[NEW] Don't ask me again checkbox on hide room modal

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -647,6 +647,8 @@
   "Display_unread_counter": "Display number of unread messages",
   "Display_offline_form": "Display Offline Form",
   "Displays_action_text": "Displays action text",
+  "Dont_ask_me_again": "Don't ask me again!",
+  "Dont_ask_me_again_list": "Don't ask me again list",
   "Do_not_display_unread_counter": "Do not display any counter of this channel",
   "Do_you_want_to_accept": "Do you want to accept?",
   "Do_you_want_to_change_to_s_question": "Do you want to change to <strong>%s</strong>?",
@@ -2687,4 +2689,4 @@
   "Country_Yemen": "Yemen",
   "Country_Zambia": "Zambia",
   "Country_Zimbabwe": "Zimbabwe"
-}
+}

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

@@ -12,6 +12,10 @@ export function hide(type, rid, name) {
 		confirmButtonText: t('Yes_hide_it'),
 		cancelButtonText: t('Cancel'),
 		closeOnConfirm: true,
+		dontAskAgain: {
+			action: 'hideRoom',
+			label: t('Hide_room')
+		},
 		html: false
 	}, async function() {
 		if (['channel', 'group', 'direct'].includes(FlowRouter.getRouteName()) && (Session.get('openedRoom') === rid)) {

packages/rocketchat-theme/client/imports/forms/checkbox.css

@@ -0,0 +1,85 @@
+/*
+	HTML structure:
+		<label class="rc-checkbox">
+			<input type="checkbox" name="dont-ask" class="rc-checkbox__input">
+			{{> icon icon="check" block="rc-checkbox__icon"}}
+			<span class="rc-checkbox__text rc-text__small">Don't ask me again!</span>
+		</label>
+ */
+
+.rc-checkbox {
+	position: relative;
+
+	margin: 6px 8px;
+
+	cursor: pointer;
+
+	&__input {
+		position: absolute;
+
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+
+		width: 0;
+		height: 0;
+
+		opacity: 0;
+
+		&[disabled] ~ .rc-checkbox__text::before {
+			border-color: var(--color-gray-light);
+		}
+
+		&:checked {
+			& ~ .rc-checkbox__icon {
+				display: block;
+			}
+
+			& ~ .rc-checkbox__text::before {
+				border-color: var(--rc-color-button-primary-light);
+				background-color: var(--rc-color-button-primary);
+			}
+		}
+	}
+
+	&__text {
+		display: flex;
+
+		margin: 0 -8px;
+		align-items: center;
+
+		&::before {
+			width: 12px;
+			height: 12px;
+			margin: 0 8px;
+
+			content: "";
+
+			transition: all 0.3s;
+
+			border: 1px solid var(--rc-color-primary-light-medium);
+			border-radius: 2px;
+			background: transparent;
+		}
+
+		&:hover {
+			&::before {
+				border-color: var(--rc-color-primary-light);
+			}
+		}
+	}
+
+	&__icon {
+		position: absolute;
+		top: 3px;
+
+		left: 2px;
+
+		display: none;
+
+		width: 8px;
+
+		color: white;
+	}
+}

packages/rocketchat-theme/client/imports/general/forms.css

@@ -135,17 +135,22 @@
 	&--inline {
 		display: flex;
 		flex-direction: row;
-    align-items: flex-end;
-		margin-left: -0.5rem;
+
 		margin-right: -0.5rem;
+
+		margin-left: -0.5rem;
+
 		white-space: nowrap;
+		align-items: flex-end;
 	}
 
 	& > .rc-form-item-inline {
 		flex: 1 1 auto;
-		margin-left: 0.5rem;
+
 		margin-right: 0.5rem;
 
+		margin-left: 0.5rem;
+
 		&--full {
 			flex: 0 0 100%;
 		}
@@ -191,6 +196,7 @@
 
 .rc-button-group {
 	display: flex;
+
 	margin: 0 calc(-var(--default-small-padding) / 2);
 
 	& .rc-button {

packages/rocketchat-theme/client/imports/general/typography.css

@@ -0,0 +1,9 @@
+.rc-text {
+	&__small {
+		letter-spacing: 0;
+
+		font-size: 0.875rem;
+
+		line-height: 1.25rem;
+	}
+}

packages/rocketchat-theme/client/main.css

@@ -15,6 +15,10 @@
 @import 'imports/forms/select-avatar.css';
 @import 'imports/forms/switch.css';
 @import 'imports/forms/tags.css';
+@import 'imports/forms/checkbox.css';
+
+/* Typography */
+@import 'imports/general/typography.css';
 
 /* Sidebar */
 @import 'imports/components/sidebar/sidebar.css';
@@ -53,6 +57,7 @@
 @import 'imports/components/modal/full-modal.css';
 @import 'imports/components/modal/create-channel.css';
 @import 'imports/components/modal/directory.css';
+
 /* User Info */
 @import 'imports/components/userInfo.css';
 

packages/rocketchat-ui-account/client/accountPreferences.html

@@ -25,6 +25,22 @@ <h1>{{_ "Localization"}}</h1>
 							</div>
 						</div>
 					</div>
+					<div class="section">
+						<h1>{{_ "Global"}}</h1>
+						<div class="section-content border-component-color">
+							<div class="input-line double-col">
+								<label for="language">{{_ "Dont_ask_me_again_list"}}</label>
+								<div class="rc-select">
+									<select id="dont-ask" class="rc-select__element" multiple>
+										{{#each dontAskAgainList}}
+											<option value="{{action}}">{{label}}</option>
+										{{/each}}
+									</select>
+								</div>
+								<button class="rc-button rc-button--cancel js-dont-ask-remove"><span>{{_ "Remove"}}</span></button>
+							</div>
+						</div>
+					</div>
 					<div class="section">
 						<h1>{{_ "User_Presence"}}</h1>
 						<div class="section-content border-component-color">

packages/rocketchat-ui-account/client/accountPreferences.js

@@ -100,6 +100,9 @@ Template.accountPreferences.helpers({
 	},
 	notificationsSoundVolume() {
 		return RocketChat.getUserPreference(Meteor.user(), 'notificationsSoundVolume');
+	},
+	dontAskAgainList() {
+		return RocketChat.getUserPreference(Meteor.user(), 'dontAskAgainList');
 	}
 });
 
@@ -160,6 +163,9 @@ Template.accountPreferences.onCreated(function() {
 		data.highlights = _.compact(_.map($('[name=highlights]').val().split(/,|\n/), function(e) {
 			return s.trim(e);
 		}));
+		data.dontAskAgainList = Array.from(document.getElementById('dont-ask').options).map(option => {
+			return {action: option.value, label: option.text};
+		});
 
 		let reload = false;
 
@@ -309,5 +315,14 @@ Template.accountPreferences.events({
 			const $audio = $(`audio#${ audio }`);
 			return $audio && $audio[0] && $audio[0].play();
 		}
+	},
+	'click .js-dont-ask-remove'(e) {
+		e.preventDefault();
+		const selectEl = document.getElementById('dont-ask');
+		const options = selectEl.options;
+		const selectedOption = selectEl.value;
+		const optionIndex = Array.from(options).findIndex(option => option.value === selectedOption);
+
+		selectEl.remove(optionIndex);
 	}
 });

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

@@ -43,6 +43,13 @@ <h1 class="rc-modal__title">
 						</div>
 						<div class="rc-modal__content-error"></div>
 					{{/if}}
+					{{#if dontAskAgain}}
+						<label class="rc-checkbox">
+							<input type="checkbox" id="dont-ask-me-again" class="rc-checkbox__input js-modal-dont-ask">
+							{{> icon icon="check" block="rc-checkbox__icon"}}
+							<span class="rc-checkbox__text rc-text__small">{{_ "Dont_ask_me_again"}}</span>
+						</label>
+					{{/if}}
 				</main>
 				<div class="rc-modal__footer {{#unless showFooter}}rc-modal__footer--empty{{/unless}}">
 					<input class="rc-button rc-button--nude js-close {{#unless showCancelButton}}rc-button--invisible{{/unless}}" type="submit" data-button="cancel" value="{{cancelButtonText}}">

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

@@ -19,9 +19,19 @@ this.modal = {
 		}
 
 		this.close();
-		this.renderedModal = Blaze.renderWithData(Template.rc_modal, config, document.body);
 		this.fn = fn;
 		this.config = config;
+
+		if (config.dontAskAgain) {
+			const dontAskAgainList = RocketChat.getUserPreference(Meteor.user(), 'dontAskAgainList');
+
+			if (dontAskAgainList && dontAskAgainList.some(dontAsk => dontAsk.action === config.dontAskAgain.action)) {
+				this.confirm(true);
+				return;
+			}
+		}
+
+		this.renderedModal = Blaze.renderWithData(Template.rc_modal, config, document.body);
 		this.timer = null;
 		if (config.timer) {
 			this.timer = setTimeout(() => this.close(), config.timer);
@@ -106,8 +116,30 @@ Template.rc_modal.events({
 	},
 	'click .js-confirm'(e, instance) {
 		e.stopPropagation();
+		const dontAskAgain = instance.data.dontAskAgain;
+		if (dontAskAgain && document.getElementById('dont-ask-me-again').checked) {
+			const dontAskAgainObject = {
+				action: dontAskAgain.action,
+				label: dontAskAgain.label
+			};
+
+			let dontAskAgainList = RocketChat.getUserPreference(Meteor.user(), 'dontAskAgainList');
+			if (dontAskAgainList) {
+				dontAskAgainList.push(dontAskAgainObject);
+			} else {
+				dontAskAgainList = [dontAskAgainObject];
+			}
+
+			Meteor.call('saveUserPreferences', {dontAskAgainList}, function(error) {
+				if (error) {
+					return handleError(error);
+				}
+			});
+		}
+
 		if (instance.data.input) {
-			return modal.confirm($('.js-modal-input').val());
+			modal.confirm(document.getElementsByClassName('js-modal-input')[0].value);
+			return;
 		}
 
 		modal.confirm(true);