feat: Add user role select to users list settings page (#7796)

![CleanShot 2023-11-27 at 07 20
58](https://github.com/n8n-io/n8n/assets/5410822/40be0505-32ee-48a7-923e-ba6b4dbce670)

packages/editor-ui/src/views/SettingsUsersView.vue

@@ -52,7 +52,23 @@
 				@copyPasswordResetLink="onCopyPasswordResetLink"
 				@allowSSOManualLogin="onAllowSSOManualLogin"
 				@disallowSSOManualLogin="onDisallowSSOManualLogin"
-			/>
+			>
+				<template #actions="{ user }">
+					<n8n-select
+						:modelValue="user.globalRole.name"
+						@update:modelValue="($event: IRole) => onRoleChange(user, $event)"
+						:disabled="!canUpdateRole"
+						data-test-id="user-role-select"
+					>
+						<n8n-option
+							v-for="role in userRoles"
+							:key="role.value"
+							:value="role.value"
+							:label="role.label"
+						/>
+					</n8n-select>
+				</template>
+			</n8n-users-list>
 		</div>
 	</div>
 </template>
@@ -62,7 +78,7 @@ import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { EnterpriseEditionFeature, INVITE_USER_MODAL_KEY, VIEWS } from '@/constants';
 
-import type { IUserListAction } from '@/Interface';
+import type { IRole, IUser, IUserListAction } from '@/Interface';
 import { useToast } from '@/composables';
 import { copyPaste } from '@/mixins/copyPaste';
 import { useUIStore } from '@/stores/ui.store';
@@ -133,6 +149,21 @@ export default defineComponent({
 				},
 			];
 		},
+		userRoles(): Array<{ value: IRole; label: string }> {
+			return [
+				{
+					value: ROLE.Member,
+					label: this.$locale.baseText('auth.roles.member'),
+				},
+				{
+					value: ROLE.Admin,
+					label: this.$locale.baseText('auth.roles.admin'),
+				},
+			];
+		},
+		canUpdateRole(): boolean {
+			return hasPermission(['rbac'], { rbac: { scope: 'user:update' } });
+		},
 	},
 	methods: {
 		redirectToSetup() {
@@ -220,6 +251,9 @@ export default defineComponent({
 		goToUpgrade() {
 			void this.uiStore.goToUpgrade('settings-users', 'upgrade-users');
 		},
+		async onRoleChange(user: IUser, name: IRole) {
+			await this.usersStore.updateRole({ id: user.id, role: { scope: 'global', name } });
+		},
 	},
 });
 </script>