[NEW] Edit user permissions

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

@@ -133,6 +133,7 @@
   "Add_custom_oauth": "Add custom oauth",
   "Add_Domain": "Add Domain",
   "Add_manager": "Add manager",
+  "Add_role": "Add Role",
   "Add_user": "Add user",
   "Add_User": "Add User",
   "Add_users": "Add users",
@@ -1329,6 +1330,7 @@
   "Select_an_avatar": "Select an avatar",
   "Select_file": "Select file",
   "Select_service_to_login": "Select a service to login to load your picture or upload one directly from your computer",
+  "Select_role": "Select a Role",
   "Select_user": "Select user",
   "Select_users": "Select users",
   "Selected_agents": "Selected agents",

packages/rocketchat-theme/client/imports/base.css

@@ -3524,6 +3524,10 @@ body:not(.is-cordova) {
 			& #password {
 				width: 70%;
 			}
+
+			& #roleSelect {
+				width: 70%;
+			}
 		}
 
 		& nav {

packages/rocketchat-theme/client/imports/chip.css

@@ -0,0 +1,18 @@
+.chip-container {
+	list-style-type: none;
+	margin: 15px;
+}
+
+.chip-container li {
+	display: inline-block;
+	background-color: #dddddd;
+	border-radius: 10px;
+	padding: 2px 8px 2px 2px;
+	margin: 1px 0;
+	cursor: pointer;
+}
+
+.chip-container li .icon-plus-circled {
+	opacity: 0.5;
+	font-size: 0.8rem;
+}

packages/rocketchat-theme/client/main.css

@@ -4,5 +4,6 @@
 @import 'imports/keyframes.css';
 @import 'imports/forms.css';
 @import 'imports/base.css';
+@import 'imports/chip.css';
 @import 'imports/rtl.css';
 

packages/rocketchat-ui-flextab/client/tabs/userEdit.html

@@ -40,15 +40,28 @@ <h3>{{_ "Add_User"}}</h3>
 						</label>
 					</div>
 				{{/if}}
-				{{#unless user}}
-					<div class="input-line">
-						<label for="role">{{_ "Role"}}</label>
-						<select id="role">
-							{{#each role}}
-								<option value="{{_id}}" selected="{{selectUserRole}}">{{name}}</option>
+					<div class="input-line" data="{{this}}">
+						<label for="role">{{_ "Add_Role"}}</label>
+						{{#let roles=role}}
+						<select id="roleSelect" {{disabled role}}>
+							<option value="placeholder" disabled selected>{{_ "Select_role"}}</option>
+							{{#each roles}}
+								<option value="{{_id}}">{{name}}</option>
 							{{/each}}
 						</select>
+						{{/let}}
+						<button id="addRole" class="button" {{disabled role}}>{{_ 'Add_role'}}</button>
+
+						<fieldset>
+							<ul class="chip-container current-user-roles">
+								{{#each userRoles}}
+									<li class="remove-role" title="{{this}}"><i class="icon-cancel-circled"></i>{{this}}</li>
+								{{/each}}
+							</ul>
+						</fieldset>
 					</div>
+
+				{{#unless user}}
 					<div class="input-line">
 						<label for="joinDefaultChannels">
 							<input type="checkbox" id="joinDefaultChannels" value="1" checked="true">

packages/rocketchat-ui-flextab/client/tabs/userEdit.js

@@ -1,6 +1,10 @@
 import toastr from 'toastr';
 
 Template.userEdit.helpers({
+
+	disabled(cursor) {
+		return cursor.count() === 0 ? 'disabled' : '';
+	},
 	canEditOrAdd() {
 		return (Template.instance().user && RocketChat.authz.hasAtLeastOnePermission('edit-other-user-info')) || (!Template.instance().user && RocketChat.authz.hasAtLeastOnePermission('create-user'));
 	},
@@ -14,13 +18,12 @@ Template.userEdit.helpers({
 	},
 
 	role() {
-		return RocketChat.models.Roles.find({}, { sort: { description: 1, _id: 1 } });
+		const roles = Template.instance().roles.get();
+		return RocketChat.models.Roles.find({_id: {$nin:roles}, scope: 'Users'}, { sort: { description: 1, _id: 1 } });
 	},
 
-	selectUserRole() {
-		if (this._id === 'user') {
-			return 'selected';
-		}
+	userRoles() {
+		return Template.instance().roles.get();
 	},
 
 	name() {
@@ -32,26 +35,50 @@ Template.userEdit.events({
 	'click .cancel'(e, t) {
 		e.stopPropagation();
 		e.preventDefault();
-		return t.cancel(t.find('form'));
+		Template.instance().roles.set([]);
+		t.cancel(t.find('form'));
+	},
+
+	'click .remove-role'(e) {
+		e.stopPropagation();
+		e.preventDefault();
+		let roles = Template.instance().roles.get();
+		roles = roles.filter(el => el !== this.valueOf());
+		Template.instance().roles.set(roles);
+		$(`[title=${ this }]`).remove();
 	},
 
 	'click #randomPassword'(e) {
 		e.stopPropagation();
 		e.preventDefault();
-		return $('#password').val(Random.id());
+		$('#password').val(Random.id());
 	},
 
-	'submit form'(e, t) {
+	'click #addRole'(e, instance) {
 		e.stopPropagation();
 		e.preventDefault();
+		if ($('#roleSelect').find(':selected').is(':disabled')) {
+			return;
+		}
+		const userRoles = [...instance.roles.get()];
+		userRoles.push($('#roleSelect').val());
+		instance.roles.set(userRoles);
+		$('#roleSelect').val('placeholder');
+	},
 
-		return t.save(e.currentTarget);
+	'submit form'(e, t) {
+		e.stopPropagation();
+		e.preventDefault();
+		t.save(e.currentTarget);
 	}
 });
 
+
 Template.userEdit.onCreated(function() {
 	let userData;
 	this.user = this.data != null ? this.data.user : undefined;
+	this.roles = this.user ? new ReactiveVar(this.user.roles) : new ReactiveVar([]);
+
 
 	const { tabBar } = Template.currentData();
 
@@ -75,7 +102,15 @@ Template.userEdit.onCreated(function() {
 		userData.requirePasswordChange = this.$('#changePassword:checked').length > 0;
 		userData.joinDefaultChannels = this.$('#joinDefaultChannels:checked').length > 0;
 		userData.sendWelcomeEmail = this.$('#sendWelcomeEmail:checked').length > 0;
-		if (this.$('#role').val()) { userData.roles = [this.$('#role').val()]; }
+		const roleSelect = this.$('.remove-role').toArray();
+
+		if (roleSelect.length > 0) {
+			const notSorted = roleSelect.map(role => {
+				return role.title;
+			});
+			//Remove duplicate strings from the array
+			userData.roles = notSorted.filter((el, index) => notSorted.indexOf(el) === index);
+		}
 		return userData;
 	};
 
@@ -93,6 +128,10 @@ Template.userEdit.onCreated(function() {
 			errors.push('Email');
 		}
 
+		if (!userData.roles) {
+			errors.push('Roles');
+		}
+
 		for (const error of Array.from(errors)) {
 			toastr.error(TAPi18n.__('error-the-field-is-required', { field: TAPi18n.__(error) }));
 		}

tests/end-to-end/ui/11-admin.js

@@ -316,7 +316,13 @@ describe('[Administration]', () => {
 					});
 
 					it('it should show the role dropdown', () => {
-						flexTab.usersAddUserRole.isVisible().should.be.true;
+						flexTab.usersAddUserRoleList.waitForVisible(5000);
+						flexTab.usersAddUserRoleList.isVisible().should.be.true;
+					});
+
+					it('ít should show the add role button', () => {
+						flexTab.usersAddUserRoleButton.waitForVisible(5000);
+						flexTab.usersAddUserRoleButton.isVisible().should.be.true;
 					});
 
 					it('it should show the join default channel checkbox', () => {

tests/end-to-end/ui/13-permissions.js

@@ -97,6 +97,7 @@ describe('[Permissions]', () => {
 			flexTab.usersAddUserVerifiedCheckbox.click();
 			flexTab.usersAddUserPassword.setValue(password);
 			flexTab.usersAddUserChangePasswordCheckbox.click();
+			flexTab.addRole('user');
 			flexTab.usersButtonSave.click();
 		});
 

tests/pageobjects/flex-tab.page.js

@@ -85,8 +85,9 @@ class FlexTab extends Page {
 	get usersAddUserName() { return browser.element('#name'); }
 	get usersAddUserUsername() { return browser.element('#username'); }
 	get usersAddUserEmail() { return browser.element('#email'); }
+	get usersAddUserRoleList() { return browser.element('#roleSelect'); }
 	get usersAddUserPassword() { return browser.element('#password'); }
-	get usersAddUserRole() { return browser.element('#role'); }
+	get usersAddUserRoleButton() { return browser.element('#addRole'); }
 	get usersAddUserVerifiedCheckbox() { return browser.element('#verified'); }
 	get usersAddUserChangePasswordCheckbox() { return browser.element('#changePassword'); }
 	get usersAddUserDefaultChannelCheckbox() { return browser.element('#joinDefaultChannels'); }
@@ -122,6 +123,16 @@ class FlexTab extends Page {
 		this.removeUserBtn.click();
 	}
 
+	addRole(role) {
+		this.usersAddUserRoleList.waitForVisible(5000);
+		this.usersAddUserRoleList.click();
+		browser.waitForVisible(`option[value=${ role }]`, 5000);
+		browser.click(`option[value=${ role }]`);
+		this.usersAddUserRoleButton.waitForVisible(5000);
+		this.usersAddUserRoleButton.click();
+		browser.waitForVisible(`.remove-role=${ role }`);
+	}
+
 	operateFlexTab(desiredTab, desiredState) {
 		//desiredState true=open false=closed
 		switch (desiredTab) {