[NEW] Add internal API to handle room announcements

packages/rocketchat-channel-settings/client/views/channelSettings.js

@@ -118,6 +118,9 @@ Template.channelSettingsEditing.onCreated(function() {
 		announcement: {
 			type: 'markdown',
 			label: 'Announcement',
+			getValue() {
+				return Template.instance().room.announcement && Template.instance().room.announcement.message;
+			},
 			canView() {
 				return RocketChat.roomTypes.roomTypes[room.t].allowRoomSettingChange(room, RoomSettingsEnum.ANNOUNCEMENT);
 			},
@@ -450,7 +453,7 @@ Template.channelSettingsInfo.helpers({
 		return Template.instance().room.description;
 	},
 	announcement() {
-		return Template.instance().room.announcement;
+		return Template.instance().room.announcement ? Template.instance().room.announcement.message : '';
 	},
 	topic() {
 		return Template.instance().room.topic;

packages/rocketchat-channel-settings/server/functions/saveRoomAnnouncement.js

@@ -4,11 +4,16 @@ RocketChat.saveRoomAnnouncement = function(rid, roomAnnouncement, user, sendMess
 	if (!Match.test(rid, String)) {
 		throw new Meteor.Error('invalid-room', 'Invalid room', { function: 'RocketChat.saveRoomAnnouncement' });
 	}
+	const announcementObject = typeof roomAnnouncement === 'object' ?
+		roomAnnouncement :
+		{
+			message: roomAnnouncement
+		};
 
-	roomAnnouncement = s.escapeHTML(roomAnnouncement);
-	const updated = RocketChat.models.Rooms.setAnnouncementById(rid, roomAnnouncement);
+	const escapedMessage = s.escapeHTML(announcementObject.message);
+	const updated = RocketChat.models.Rooms.setAnnouncementById(rid, {...announcementObject, message: escapedMessage});
 	if (updated && sendMessage) {
-		RocketChat.models.Messages.createRoomSettingsChangedWithTypeRoomIdMessageAndUser('room_changed_announcement', rid, roomAnnouncement, user);
+		RocketChat.models.Messages.createRoomSettingsChangedWithTypeRoomIdMessageAndUser('room_changed_announcement', rid, escapedMessage, user);
 	}
 
 	return updated;

packages/rocketchat-lib/client/lib/RocketChatAnnouncement.js

@@ -0,0 +1,21 @@
+export class RocketChatAnnouncement {
+	constructor(args={}) {
+		this.room = new ReactiveVar(args.room);
+		this.message = new ReactiveVar(args.message);
+		this.callback = new ReactiveVar(args.callback);
+		this.style = new ReactiveVar(args.style);
+	}
+	save() {
+		const announcementObject = { message: this.message.get(), callback: this.callback.get(), style: this.style.get() };
+		Meteor.call('saveRoomSettings', this.room.get(), 'roomAnnouncement', announcementObject);
+	}
+	getMessage() {
+		return this.message.get();
+	}
+	getCallback() {
+		return this.callback.get();
+	}
+	getStyle() {
+		return this.callback.get();
+	}
+}

packages/rocketchat-lib/client/lib/index.js

@@ -7,6 +7,7 @@
 */
 
 import { RocketChatTabBar } from './RocketChatTabBar';
+import { RocketChatAnnouncement } from './RocketChatAnnouncement';
 import { RoomSettingsEnum, RoomTypeConfig, RoomTypeRouteConfig, UiTextContext } from '../../lib/RoomTypeConfig';
 import { hide, leave, erase } from './ChannelActions';
 import { call } from './callMethod';
@@ -20,5 +21,6 @@ export {
 	RoomSettingsEnum,
 	RoomTypeConfig,
 	RoomTypeRouteConfig,
-	UiTextContext
+	UiTextContext,
+	RocketChatAnnouncement
 };

packages/rocketchat-lib/package.js

@@ -201,6 +201,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/lib/RestApiClient.js', 'client');
 	api.addFiles('client/lib/TabBar.js', 'client');
 	api.addFiles('client/lib/RocketChatTabBar.js', 'client');
+	api.addFiles('client/lib/RocketChatAnnouncement.js', 'client');
 	api.addFiles('client/lib/RestApiClient.js', 'client');
 	api.addFiles('client/lib/cachedCollection.js', 'client');
 	api.addFiles('client/lib/openRoom.js', 'client');

packages/rocketchat-theme/server/colors.less

@@ -950,4 +950,10 @@ label.required::after {
 
 .announcement {
 	background-color: @primary-background-color;
+	&.warning {
+		background-color: var(--rc-color-alert);
+	}
+	&.error {
+		background-color: var(--rc-color-alert-message-warning);
+	}
 }

packages/rocketchat-ui/client/views/app/room.html

@@ -20,7 +20,7 @@
 					<div class="messages-container-main">
 						{{#unless embeddedVersion}}
 							{{#if showAnnouncement}}
-							<div class="fixed-title announcement" aria-label="{{RocketChatMarkdown roomAnnouncement}}">
+							<div class="fixed-title announcement {{getAnnouncementStyle}}" aria-label="{{RocketChatMarkdown roomAnnouncement}}">
 								{{{RocketChatMarkdown roomAnnouncement}}}
 							</div>
 							{{/if}}

packages/rocketchat-ui/client/views/app/room.js

@@ -217,7 +217,7 @@ Template.room.helpers({
 	showAnnouncement() {
 		const roomData = Session.get(`roomData${ this._id }`);
 		if (!roomData) { return false; }
-		return (roomData.announcement !== undefined) && (roomData.announcement !== '');
+		return (roomData.announcement !== undefined) && (roomData.announcement.message !== '');
 	},
 
 	messageboxData() {
@@ -235,7 +235,13 @@ Template.room.helpers({
 	roomAnnouncement() {
 		const roomData = Session.get(`roomData${ this._id }`);
 		if (!roomData) { return ''; }
-		return roomData.announcement;
+		return roomData.announcement && roomData.announcement.message;
+	},
+
+	getAnnouncementStyle() {
+		const roomData = Session.get(`roomData${ this._id }`);
+		if (!roomData) { return ''; }
+		return roomData.announcement && roomData.announcement.style !== undefined ? roomData.announcement.style : '';
 	},
 
 	roomIcon() {
@@ -704,13 +710,21 @@ Template.room.events({
 		}
 	},
 	'click .announcement'(e) {
-		modal.open({
-			title: t('Announcement'),
-			text: $(e.target).attr('aria-label'),
-			showConfirmButton: false,
-			showCancelButton: true,
-			cancelButtonText: t('Close')
-		});
+		const roomData = Session.get(`roomData${ this._id }`);
+		if (!roomData) { return false; }
+		if (roomData.announcement !== undefined && roomData.announcement.callback !== undefined) {
+			return RocketChat.callbacks.run(roomData.announcement.callback, this._id);
+		} else {
+			modal.open({
+				title: t('Announcement'),
+				text: $(e.target).attr('aria-label'),
+				showConfirmButton: false,
+				showCancelButton: true,
+				cancelButtonText: t('Close')
+			});
+
+		}
+
 	}
 });