[IMPROVE] Rewrite Announcement as React component

app/theme/client/imports/general/base_old.css

@@ -893,134 +893,6 @@
 	animation: highlight 6s infinite;
 }
 
-.rc-old .fixed-title {
-	display: flex;
-
-	height: calc(var(--header-min-height) + 1px);
-	padding: 0 10px 0 20px;
-
-	border-width: 0 0 1px;
-	align-items: center;
-	flex-flow: row nowrap;
-	flex-shrink: 0;
-
-	&.visible h2 {
-		overflow: visible;
-	}
-
-	& h2 {
-		overflow: hidden;
-		flex: 1;
-
-		width: 100%;
-
-		white-space: nowrap;
-		text-overflow: ellipsis;
-
-		font-size: 22px;
-		font-weight: 500;
-		line-height: 29px;
-
-		& .icon-at,
-		& .icon-hash,
-		& .icon-lock {
-			margin-right: -7px;
-		}
-
-		& .icon-star,
-		& .icon-star-empty {
-			margin-right: -4px;
-		}
-
-		& .iframe-toolbar {
-			white-space: nowrap;
-			flex-grow: 0;
-		}
-	}
-
-	& .submit {
-		display: flex;
-
-		& .button {
-			margin-left: 1rem;
-
-			white-space: nowrap;
-		}
-	}
-
-	& .animated-hidden {
-		display: none;
-		visibility: hidden;
-	}
-
-	& input[type='text'] {
-		width: calc(100% - 100px);
-		margin-top: -4px;
-		margin-left: -3px;
-
-		vertical-align: top;
-
-		font-size: 20px;
-	}
-
-	& .icon-pencil {
-		display: inline-block;
-
-		margin-top: -7px;
-
-		vertical-align: text-top;
-
-		font-size: 16px;
-	}
-}
-
-.rc-old .announcement {
-	display: flex;
-
-	overflow: hidden;
-
-	height: 40px;
-	padding: 0 20px;
-
-	cursor: pointer;
-	text-align: center;
-
-	color: var(--rc-color-content);
-	background-color: var(--primary-background-color);
-
-	font-size: 1.2em;
-	line-height: 40px;
-	flex-flow: row nowrap;
-
-	&.warning {
-		background-color: var(--rc-color-alert);
-	}
-
-	&.error {
-		background-color: var(--rc-color-alert-message-warning);
-	}
-
-	& ~ .container-bars {
-		top: 45px;
-	}
-
-	a {
-		text-decoration: underline;
-
-		color: currentColor;
-	}
-
-	p {
-		overflow: hidden;
-		flex: auto;
-
-		width: 0; /* Grow via flex. */
-
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-}
-
 .cms-page {
 	display: flex;
 	flex-direction: column;

app/ui/client/views/app/room.html

@@ -5,11 +5,7 @@
 				<div class="messages-container-main dropzone {{dragAndDrop}}">
 					<div class="dropzone-overlay {{isDropzoneDisabled}} background-transparent-darkest color-content-background-color">{{_ dragAndDropLabel}}</div>
 					{{#unless embeddedVersion}}
-						{{#if announcement}}
-						<div class="fixed-title announcement {{getAnnouncementStyle}}">
-							<p>{{{announcement}}}</p>
-						</div>
-						{{/if}}
+						{{> RoomAnnouncement announcement=announcement announcementDetails=announcementDetails }}
 					{{/unless}}
 					<div class="container-bars {{containerBarsShow unreadData uploading}}">
 						{{#with unreadData}}

app/ui/client/views/app/room.js

@@ -18,11 +18,9 @@ import {
 	RoomHistoryManager,
 	RoomManager,
 	readMessage,
-	modal,
 	Layout,
 } from '../../../../ui-utils/client';
 import { messageContext } from '../../../../ui-utils/client/lib/messageContext';
-import { renderMessageBody } from '../../../../../client/lib/renderMessageBody';
 import { messageArgs } from '../../../../ui-utils/client/lib/messageArgs';
 import { settings } from '../../../../settings';
 import { callbacks } from '../../../../callbacks';
@@ -264,6 +262,14 @@ Template.roomOld.helpers({
 		return announcement ? Markdown.parse(announcement).replace(/^<p>|<\/p>$/, '') : undefined;
 	},
 
+	announcementDetails() {
+		const roomData = Session.get(`roomData${ this._id }`);
+		if (!roomData) { return false; }
+		if (roomData.announcementDetails != null && roomData.announcementDetails.callback != null) {
+			return () => callbacks.run(roomData.announcementDetails.callback, this._id);
+		}
+	},
+
 	messageboxData() {
 		const { sendToBottomIfNecessaryDebounced, subscription } = Template.instance();
 		const { _id: rid } = this;
@@ -512,22 +518,6 @@ Meteor.startup(() => {
 	Template.roomOld.events({
 		...getCommonRoomEvents(),
 		...dropzoneEvents,
-		'click .announcement'() {
-			const roomData = Session.get(`roomData${ this._id }`);
-			if (!roomData) { return false; }
-			if (roomData.announcementDetails != null && roomData.announcementDetails.callback != null) {
-				return callbacks.run(roomData.announcementDetails.callback, this._id);
-			}
-
-			modal.open({
-				title: t('Announcement'),
-				text: renderMessageBody({ msg: roomData.announcement }),
-				html: true,
-				showConfirmButton: false,
-				showCancelButton: true,
-				cancelButtonText: t('Close'),
-			});
-		},
 		'click .toggle-hidden'(e) {
 			const id = e.currentTarget.dataset.message;
 			document.querySelector(`#${ id }`).classList.toggle('message--ignored');

client/components/MarkdownText.js

@@ -12,10 +12,10 @@ const options = {
 	headerIds: false,
 };
 
-function MarkdownText({ content, preserveHtml = false, ...props }) {
+function MarkdownText({ content, preserveHtml = false, withRichContent = true, ...props }) {
 	const __html = useMemo(() => content && marked(preserveHtml ? content : escapeHTML(content), options), [content, preserveHtml]);
 
-	return __html ? <Box dangerouslySetInnerHTML={{ __html }} withRichContent {...props} /> : null;
+	return __html ? <Box dangerouslySetInnerHTML={{ __html }} {...withRichContent && { withRichContent }} {...props} /> : null;
 }
 
 export default MarkdownText;

client/components/Message/Attachments/index.tsx

@@ -52,7 +52,7 @@ const isQuoteAttachment = (attachment: AttachmentPropsGeneric): attachment is Qu
 
 const isActionAttachment = (attachment: AttachmentPropsGeneric): attachment is ActionAttachmentProps => 'actions' in attachment;
 
-const applyMarkdownIfRequires = (list: AttachmentProps['mrkdwn_in']) => (key: PossibleMarkdownFields, text: string): JSX.Element | string => (list?.includes(key) ? <MarkdownText withRichContent={null} content={text}/> : text);
+const applyMarkdownIfRequires = (list: AttachmentProps['mrkdwn_in']) => (key: PossibleMarkdownFields, text: string): JSX.Element | string => (list?.includes(key) ? <MarkdownText withRichContent={undefined} content={text}/> : text);
 
 const Item: FC<{attachment: AttachmentPropsGeneric; file?: FileProp }> = memo(({ attachment, file = null }) => {
 	if (isFileAttachment(attachment)) {
@@ -73,7 +73,7 @@ const Item: FC<{attachment: AttachmentPropsGeneric; file?: FileProp }> = memo(({
 			</Attachment.Author> }
 			{attachment.title && <Attachment.Title {...attachment.title_link && { is: 'a', href: attachment.title_link, target: '_blank', color: undefined }}>{attachment.title}</Attachment.Title> }
 			{attachment.text && <Attachment.Text>{applyMardownFor('text', attachment.text)}</Attachment.Text>}
-			{attachment.fields && <FieldsAttachment fields={attachment.mrkdwn_in?.includes('fields') ? attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText withRichContent={null} content={value} /> })) : attachment.fields} />}
+			{attachment.fields && <FieldsAttachment fields={attachment.mrkdwn_in?.includes('fields') ? attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText withRichContent={undefined} content={value} /> })) : attachment.fields} />}
 			{attachment.image_url && <Attachment.Image {...attachment.image_dimensions as any} src={attachment.image_url} />}
 			{/* DEPRECATED */}
 			{isActionAttachment(attachment) && <ActionAttachment {...attachment} />}

client/views/room/Announcement/Announcement.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+import colors from '@rocket.chat/fuselage-tokens/colors';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import AnnouncementModal from './AnnouncementModal';
+import { useSetModal } from '../../../contexts/ModalContext';
+import MarkdownText from '../../../components/MarkdownText';
+
+export const Announcement = ({ children, onClickOpen }) => {
+	const clickable = css`
+		background-color: ${ colors.b200 };
+		color: ${ colors.b600 };
+		cursor: pointer;
+		transition: transform 0.2s ease-out;
+		> * {
+			flex: auto;
+		}
+		&:hover,
+		&:focus {
+			background-color: ${ colors.b300 };
+			color: ${ colors.b800 };
+		}`;
+
+	return <Box onClick={onClickOpen} height='x40' alignItems='center' display='flex' fontScale='p2' textAlign='center' className={clickable}><Box withTruncatedText w='none'>{children}</Box></Box>;
+};
+
+export default ({ announcement, announcementDetails }) => {
+	const setModal = useSetModal();
+	const closeModal = useMutableCallback(() => setModal());
+	const handleClick = () => {
+		announcementDetails ? announcementDetails() : setModal(<AnnouncementModal onClose={closeModal}>{announcement}</AnnouncementModal>);
+	};
+
+	return announcement ? <Announcement onClickOpen={handleClick}><MarkdownText content={announcement} /></Announcement> : false;
+};

client/views/room/Announcement/Announcement.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Announcement } from './Announcement';
+
+export default {
+	title: 'components/Announcement',
+	component: Announcement,
+};
+
+export const Default = () =>
+	<Announcement onClickOpen={alert}>Lorem Ipsum Indolor</Announcement>;

client/views/room/Announcement/AnnouncementModal.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, ButtonGroup, Box, Modal } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import MarkdownText from '../../../components/MarkdownText';
+
+export default ({
+	onClose,
+	confirmLabel = 'Close',
+	children,
+	...props
+}) => {
+	const t = useTranslation();
+
+	return (
+		<Modal {...props}>
+			<Modal.Header>
+				<Modal.Title>{t('Announcement')}</Modal.Title>
+				<Modal.Close onClick={onClose}/>
+			</Modal.Header>
+			<Modal.Content>
+				<Box textAlign='center'><MarkdownText content={children} /></Box>
+			</Modal.Content>
+			<Modal.Footer>
+				<ButtonGroup align='end'>
+					<Button onClick={onClose}>{confirmLabel}</Button>
+				</ButtonGroup>
+			</Modal.Footer>
+		</Modal>
+	);
+};

client/views/room/Announcement/index.js

@@ -0,0 +1,3 @@
+import Announcement from './Announcement';
+
+export default Announcement;

client/views/room/adapters.js

@@ -90,6 +90,10 @@ createTemplateForComponent('channelFilesList', () => import('./contextualBar/Roo
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });
 
+createTemplateForComponent('RoomAnnouncement', () => import('./Announcement'), {
+	renderContainerView: () => HTML.DIV(), // eslint-disable-line new-cap
+});
+
 createTemplateForComponent('PruneMessages', () => import('./contextualBar/PruneMessages'), {
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });