[FIX] UI was not disabling the actions when users has had no permissions to...

[FIX] UI was not disabling the actions when users has had no permissions to create channels or add users to rooms (#10564)

* hide plus icon when user doesn't have both permission for create-c and create-p

* add helper to checkout two permissions set initial value for the room type

* hide the plus icon in directory if user doesn't have both create-c and creat-p permissions

* get permissions for create channels and groups

* check if user can add channel hide and groups, hide button based upon correct state

* prevent add user button from being hidden when user has permission add user to joined room

* removed the if statement and use short hand if else syntax

* better code for disabling checkbox in create room feature if user doesn't have permission

* add missing simicolon

* put canShowAddUsersButton into seperate function call function in events and helpers

* move the canShowAddUsersButton function to define before it's called

* fix bug that prevents the viewing of the keyboard shortcuts button in groups and direct messages

* fix permissions

packages/rocketchat-lib/client/defaultTabBars.js

@@ -57,7 +57,7 @@ RocketChat.TabBar.addButton({
 });
 
 RocketChat.TabBar.addButton({
-	groups: ['channel', 'privategroup', 'directmessage'],
+	groups: ['channel', 'group', 'direct'],
 	id: 'keyboard-shortcut-list',
 	i18nTitle: 'Keyboard_Shortcuts_Title',
 	icon: 'keyboard',

packages/rocketchat-ui-flextab/client/flexTabBar.html

@@ -33,7 +33,7 @@
 <template name="RoomsActionTab">
 	<div class="rc-room-actions">
 		{{#each buttons}}
-		<div class="rc-room-actions__action tab-button {{active}} {{visible}} {{class}} js-action">
+		<div class="rc-room-actions__action tab-button {{active}} {{visible}} {{class}} js-action" data-id="{{id}}">
 			<button class="rc-tooltip rc-tooltip--down rc-room-actions__button" aria-label="{{title}}">
 				{{> icon block="tab-button-icon" icon=icon }}
 			</button>

packages/rocketchat-ui-flextab/client/flexTabBar.js

@@ -11,22 +11,51 @@ const commonHelpers = {
 		}
 	}
 };
-
+function canShowAddUsersButton(rid) {
+	const canAddToChannel = RocketChat.authz.hasAllPermission(
+		'add-user-to-any-c-room', rid
+	);
+	const canAddToGroup = RocketChat.authz.hasAllPermission(
+		'add-user-to-any-p-room', rid
+	);
+	const canAddToJoinedRoom = RocketChat.authz.hasAllPermission(
+		'add-user-to-joined-room', rid
+	);
+	if (
+		!canAddToJoinedRoom &&
+		!canAddToChannel &&
+		Template.instance().tabBar.currentGroup() === 'channel'
+	) {
+		return false;
+	}
+	if (
+		!canAddToJoinedRoom &&
+		!canAddToGroup &&
+		Template.instance().tabBar.currentGroup() === 'group'
+	) {
+		return false;
+	}
+	return true;
+}
+const filterButtons = (button, anonymous, rid) => {
+	if (!Meteor.userId() && !anonymous) {
+		return false;
+	}
+	if (button.groups.indexOf(Template.instance().tabBar.currentGroup()) === -1) {
+		return false;
+	}
+	if (button.id === 'addUsers' && !canShowAddUsersButton(rid)) {
+		return false;
+	}
+	return true;
+};
 Template.flexTabBar.helpers({
 	headerData() {
 		return Template.instance().tabBar.getData();
 	},
 	...commonHelpers,
 	buttons() {
-		return RocketChat.TabBar.getButtons().filter(button => {
-			if (!Meteor.userId() && !this.anonymous) {
-				return false;
-			}
-			if (button.groups.indexOf(Template.instance().tabBar.currentGroup()) === -1) {
-				return false;
-			}
-			return true;
-		});
+		return RocketChat.TabBar.getButtons().filter(button => filterButtons(button, this.anonymous, this.data.rid));
 	},
 	opened() {
 		return Template.instance().tabBar.getState();
@@ -131,15 +160,7 @@ Template.RoomsActionTab.events({
 	'click .js-more'(e, instance) {
 		$(e.currentTarget).blur();
 		e.preventDefault();
-		const buttons = RocketChat.TabBar.getButtons().filter(button => {
-			if (!Meteor.userId() && !this.anonymous) {
-				return false;
-			}
-			if (button.groups.indexOf(Template.instance().tabBar.currentGroup()) === -1) {
-				return false;
-			}
-			return true;
-		});
+		const buttons = RocketChat.TabBar.getButtons().filter(button => filterButtons(button, instance.anonymous, instance.data.rid));
 		const groups = [{items:(instance.small.get() ? buttons : buttons.slice(4)).map(item => {
 			item.name = TAPi18n.__(item.i18nTitle);
 			item.action = action;
@@ -188,15 +209,7 @@ Template.RoomsActionTab.helpers({
 		if (Template.instance().small.get()) {
 			return [];
 		}
-		const buttons = RocketChat.TabBar.getButtons().filter(button => {
-			if (!Meteor.userId() && !this.anonymous) {
-				return false;
-			}
-			if (button.groups.indexOf(Template.instance().tabBar.currentGroup()) === -1) {
-				return false;
-			}
-			return true;
-		});
+		const buttons = RocketChat.TabBar.getButtons().filter(button => filterButtons(button, this.anonymous, this.data.rid));
 		return buttons.length <= 5 ? buttons : buttons.slice(0, 4);
 	},
 
@@ -204,15 +217,9 @@ Template.RoomsActionTab.helpers({
 		if (Template.instance().small.get()) {
 			return true;
 		}
-		const buttons = RocketChat.TabBar.getButtons().filter(button => {
-			if (!Meteor.userId() && !this.anonymous) {
-				return false;
-			}
-			if (button.groups.indexOf(Template.instance().tabBar.currentGroup()) === -1) {
-				return false;
-			}
-			return true;
-		});
+		const buttons = RocketChat.TabBar.getButtons().filter(button =>
+			filterButtons(button, this.anonymous, this.data.rid)
+		);
 		return buttons.length > 5;
 	}
 });

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

@@ -14,10 +14,10 @@
 				<div class="create-channel__switches">
 					<div class="rc-switch">
 						<label class="rc-switch__label" tabindex="-1">
-							<input type="checkbox" class="rc-switch__input" name="type" value="p" checked>
+							<input type="checkbox" class="rc-switch__input" name="type" value="p" checked={{roomTypeIsP}} disabled="{{cantCreateBothTypes}}">
 							<span class="rc-switch__button">
-							<span class="rc-switch__button-inside"></span>
-						</span>
+								<span class="rc-switch__button-inside"></span>
+							</span>
 							<span class="rc-switch__text">
 								{{typeLabel}}
 							</span>

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

@@ -92,6 +92,12 @@ Template.createChannel.helpers({
 	readOnlyDescription() {
 		return t(Template.instance().readOnly.get() ? t('Only_authorized_users_can_write_new_messages') : t('All_users_in_the_channel_can_write_new_messages'));
 	},
+	cantCreateBothTypes() {
+		return !RocketChat.authz.hasAllPermission(['create-c', 'create-p']);
+	},
+	roomTypeIsP() {
+		return Template.instance().type.get() === 'p';
+	},
 	createIsDisabled() {
 		const instance = Template.instance();
 		const invalid = instance.invalid.get();
@@ -258,7 +264,7 @@ Template.createChannel.onCreated(function() {
 	this.extensions_validations = {};
 	this.extensions_submits = {};
 	this.name = new ReactiveVar('');
-	this.type = new ReactiveVar('p');
+	this.type = new ReactiveVar(RocketChat.authz.hasAllPermission(['create-p']) ? 'p' : 'c');
 	this.readOnly = new ReactiveVar(false);
 	this.broadcast = new ReactiveVar(false);
 	this.inUse = new ReactiveVar(undefined);

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

@@ -14,7 +14,9 @@
 					</div>
 				</label>
 			</div>
-			<button class="rc-button rc-button--small rc-button--primary rc-directory-plus">{{> icon icon="plus" }}</button>
+			{{#if createChannelOrGroup}}
+				<button class="rc-button rc-button--small rc-button--primary rc-directory-plus">{{> icon icon="plus" }}</button>
+			{{/if}}
 		</div>
 		{{/header}}
 		<div class="rc-directory-content">

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

@@ -49,6 +49,9 @@ Template.directory.helpers({
 		} = Template.instance();
 
 		return key === searchSortBy.get() && sortDirection.get() !== 'asc' ? 'sort-up' : 'sort-down';
+	},
+	createChannelOrGroup() {
+		return RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p']);
 	}
 });
 

tests/end-to-end/ui/04-main-elements-render.js

@@ -276,11 +276,19 @@ describe('[Main Elements Render]', function() {
 
 			describe('Files Tab:', () => {
 				before(()=> {
+					if (flexTab.filesTab.isVisible()) {
+						this.shouldClose = undefined;
+						return flexTab.filesTab.click();
+					}
+					this.shouldClose = true;
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('files', true);
 				});
 
 				after(()=> {
+					if (!this.shouldClose) {
+						return;
+					}
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('files', false);
 				});
@@ -292,12 +300,21 @@ describe('[Main Elements Render]', function() {
 			});
 
 			describe('Mentions Tab:', () => {
+
 				before(()=> {
+					if (flexTab.mentionsTab.isVisible()) {
+						this.shouldClose = undefined;
+						return flexTab.mentionsTab.click();
+					}
+					this.shouldClose = true;
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('mentions', true);
 				});
 
 				after(()=> {
+					if (!this.shouldClose) {
+						return;
+					}
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('mentions', false);
 				});
@@ -309,11 +326,19 @@ describe('[Main Elements Render]', function() {
 
 			describe('Starred Messages Tab:', () => {
 				before(()=> {
+					if (flexTab.starredTab.isVisible()) {
+						this.shouldClose = undefined;
+						return flexTab.starredTab.click();
+					}
+					this.shouldClose = true;
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('starred', true);
 				});
 
 				after(()=> {
+					if (!this.shouldClose) {
+						return;
+					}
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('starred', false);
 				});
@@ -325,11 +350,19 @@ describe('[Main Elements Render]', function() {
 
 			describe('Pinned Messages Tab:', () => {
 				before(()=> {
+					if (flexTab.pinnedTab.isVisible()) {
+						this.shouldClose = undefined;
+						return flexTab.pinnedTab.click();
+					}
+					this.shouldClose = true;
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('pinned', true);
 				});
 
 				after(()=> {
+					if (!this.shouldClose) {
+						return;
+					}
 					flexTab.moreActions.click();
 					flexTab.operateFlexTab('pinned', false);
 				});

tests/pageobjects/flex-tab.page.js

@@ -53,7 +53,7 @@ class FlexTab extends Page {
 	get notificationsSettings() { return browser.element('.push-notifications'); }
 
 	// Files Tab
-	get filesTab() { return browser.element('.rc-popover__item[data-id=uploaded-files-list]'); }
+	get filesTab() { return browser.element('.rc-popover__item[data-id=uploaded-files-list], .tab-button[data-id=uploaded-files-list]'); }
 	get fileItem() { return browser.element('.uploaded-files-list ul:first-child'); }
 	get filesTabContent() { return browser.element('.uploaded-files-list'); }
 	get fileDelete() { return browser.element('.uploaded-files-list ul:first-child .file-delete'); }
@@ -61,15 +61,15 @@ class FlexTab extends Page {
 	get fileName() { return browser.element('.uploaded-files-list ul:first-child .room-file-item'); }
 
 	// Mentions Tab
-	get mentionsTab() { return browser.element('.rc-popover__item[data-id=mentions]'); }
+	get mentionsTab() { return browser.element('.rc-popover__item[data-id=mentions], .tab-button[data-id=mentions]'); }
 	get mentionsTabContent() { return browser.element('.mentioned-messages-list'); }
 
 	// Starred Tab
-	get starredTab() { return browser.element('.rc-popover__item[data-id=starred-messages]'); }
+	get starredTab() { return browser.element('.rc-popover__item[data-id=starred-messages], .tab-button[data-id=starred-messages]'); }
 	get starredTabContent() { return browser.element('.starred-messages-list'); }
 
 	// Pinned Tab
-	get pinnedTab() { return browser.element('.rc-popover__item[data-id=pinned-messages]'); }
+	get pinnedTab() { return browser.element('.rc-popover__item[data-id=pinned-messages], .tab-button[data-id=pinned-messages]'); }
 	get pinnedTabContent() { return browser.element('.pinned-messages-list'); }
 
 	get firstSetting() { return browser.element('.clearfix li:nth-child(1) .current-setting'); }