fix(editor): Add confirmation toast when changing user role (#10592)

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1678,6 +1678,9 @@
 	"settings.users.usersInvitedError": "Could not invite users",
 	"settings.users.advancedPermissions.warning": "{link} to unlock the ability to create additional admin users",
 	"settings.users.advancedPermissions.warning.link": "Upgrade",
+	"settings.users.userRoleUpdated": "Changes saved",
+	"settings.users.userRoleUpdated.message": "{user} has been successfully updated to a {role}",
+	"settings.users.userRoleUpdatedError": "Unable to updated role",
 	"settings.api": "API",
 	"settings.n8napi": "n8n API",
 	"settings.log-streaming": "Log Streaming",

packages/editor-ui/src/views/SettingsUsersView.test.ts

@@ -17,6 +17,16 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { defaultSettings } from '@/__tests__/defaults';
 import { ProjectTypes } from '@/types/projects.types';
 
+const showToast = vi.fn();
+const showError = vi.fn();
+
+vi.mock('@/composables/useToast', () => ({
+	useToast: () => ({
+		showToast,
+		showError,
+	}),
+}));
+
 const wrapperComponentWithModal = {
 	components: { SettingsUsersView, ModalRoot, DeleteUserModal },
 	template: `
@@ -71,6 +81,9 @@ describe('SettingsUsersView', () => {
 		vi.spyOn(projectsStore, 'projects', 'get').mockReturnValue(projects);
 
 		usersStore.currentUserId = loggedInUser.id;
+
+		showToast.mockReset();
+		showError.mockReset();
 	});
 
 	afterEach(() => {
@@ -156,4 +169,28 @@ describe('SettingsUsersView', () => {
 			id: users[0].id,
 		});
 	});
+
+	it("should show success toast when changing a user's role", async () => {
+		const updateGlobalRoleSpy = vi.spyOn(usersStore, 'updateGlobalRole').mockResolvedValue();
+
+		const { getByTestId } = createComponentRenderer(SettingsUsersView)({
+			pinia,
+		});
+
+		const userListItem = getByTestId(`user-list-item-${users.at(-1)?.email}`);
+		expect(userListItem).toBeInTheDocument();
+
+		const roleSelect = within(userListItem).getByTestId('user-role-select');
+
+		const roleDropdownItems = await getDropdownItems(roleSelect);
+		await userEvent.click(roleDropdownItems[0]);
+
+		expect(updateGlobalRoleSpy).toHaveBeenCalledWith(
+			expect.objectContaining({ newRoleName: 'global:member' }),
+		);
+
+		expect(showToast).toHaveBeenCalledWith(
+			expect.objectContaining({ type: 'success', message: expect.stringContaining('Member') }),
+		);
+	});
 });

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

@@ -211,7 +211,24 @@ function goToUpgradeAdvancedPermissions() {
 	void uiStore.goToUpgrade('settings-users', 'upgrade-advanced-permissions');
 }
 async function onRoleChange(user: IUser, newRoleName: UpdateGlobalRolePayload['newRoleName']) {
-	await usersStore.updateGlobalRole({ id: user.id, newRoleName });
+	try {
+		await usersStore.updateGlobalRole({ id: user.id, newRoleName });
+
+		const role = userRoles.value.find(({ value }) => value === newRoleName)?.label || newRoleName;
+
+		showToast({
+			type: 'success',
+			title: i18n.baseText('settings.users.userRoleUpdated'),
+			message: i18n.baseText('settings.users.userRoleUpdated.message', {
+				interpolate: {
+					user: user.fullName ?? '',
+					role,
+				},
+			}),
+		});
+	} catch (e) {
+		showError(e, i18n.baseText('settings.users.userReinviteError'));
+	}
 }
 </script>