From 744c94d94b3576f2a1d4227e49185be77b8c6954 Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Wed, 5 Jun 2024 09:38:26 +0300
Subject: [PATCH] fix(editor): Commit theme change from Save button (#9619)
---
.../src/views/SettingsPersonalView.vue | 96 +++++++++++--------
.../__tests__/SettingsPersonalView.test.ts | 50 ++++++++++
2 files changed, 104 insertions(+), 42 deletions(-)
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index caf5d9f137dbe..424504fc3af36 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -84,12 +84,11 @@
,
};
},
+ computed: {
+ ...mapStores(useUIStore, useUsersStore, useSettingsStore),
+ currentUser(): IUser | null {
+ return this.usersStore.currentUser;
+ },
+ isExternalAuthEnabled(): boolean {
+ const isLdapEnabled =
+ this.settingsStore.settings.enterprise.ldap && this.currentUser?.signInType === 'ldap';
+ const isSamlEnabled =
+ this.settingsStore.isSamlLoginEnabled && this.settingsStore.isDefaultAuthenticationSaml;
+ return isLdapEnabled || isSamlEnabled;
+ },
+ isPersonalSecurityEnabled(): boolean {
+ return this.usersStore.isInstanceOwner || !this.isExternalAuthEnabled;
+ },
+ mfaDisabled(): boolean {
+ return !this.usersStore.mfaEnabled;
+ },
+ isMfaFeatureEnabled(): boolean {
+ return this.settingsStore.isMfaFeatureEnabled;
+ },
+ hasAnyPersonalisationChanges(): boolean {
+ return this.currentSelectedTheme !== this.uiStore.theme;
+ },
+ hasAnyChanges() {
+ return this.hasAnyBasicInfoChanges || this.hasAnyPersonalisationChanges;
+ },
+ },
mounted() {
this.formInputs = [
{
@@ -201,62 +229,46 @@ export default defineComponent({
},
];
},
- computed: {
- ...mapStores(useUIStore, useUsersStore, useSettingsStore),
- currentUser(): IUser | null {
- return this.usersStore.currentUser;
- },
- isExternalAuthEnabled(): boolean {
- const isLdapEnabled =
- this.settingsStore.settings.enterprise.ldap && this.currentUser?.signInType === 'ldap';
- const isSamlEnabled =
- this.settingsStore.isSamlLoginEnabled && this.settingsStore.isDefaultAuthenticationSaml;
- return isLdapEnabled || isSamlEnabled;
- },
- isPersonalSecurityEnabled(): boolean {
- return this.usersStore.isInstanceOwner || !this.isExternalAuthEnabled;
- },
- mfaDisabled(): boolean {
- return !this.usersStore.mfaEnabled;
- },
- isMfaFeatureEnabled(): boolean {
- return this.settingsStore.isMfaFeatureEnabled;
- },
- currentTheme(): ThemeOption {
- return this.uiStore.theme;
- },
- },
methods: {
- selectTheme(theme: ThemeOption) {
- this.uiStore.setTheme(theme);
- },
onInput() {
- this.hasAnyChanges = true;
+ this.hasAnyBasicInfoChanges = true;
},
onReadyToSubmit(ready: boolean) {
this.readyToSubmit = ready;
},
async onSubmit(form: { firstName: string; lastName: string; email: string }) {
- if (!this.hasAnyChanges || !this.usersStore.currentUserId) {
- return;
- }
try {
- await this.usersStore.updateUser({
- id: this.usersStore.currentUserId,
- firstName: form.firstName,
- lastName: form.lastName,
- email: form.email,
- });
+ await Promise.all([this.updateUserBasicInfo(form), this.updatePersonalisationSettings()]);
+
this.showToast({
title: this.i18n.baseText('settings.personal.personalSettingsUpdated'),
message: '',
type: 'success',
});
- this.hasAnyChanges = false;
} catch (e) {
this.showError(e, this.i18n.baseText('settings.personal.personalSettingsUpdatedError'));
}
},
+ async updateUserBasicInfo(form: { firstName: string; lastName: string; email: string }) {
+ if (!this.hasAnyBasicInfoChanges || !this.usersStore.currentUserId) {
+ return;
+ }
+
+ await this.usersStore.updateUser({
+ id: this.usersStore.currentUserId,
+ firstName: form.firstName,
+ lastName: form.lastName,
+ email: form.email,
+ });
+ this.hasAnyBasicInfoChanges = false;
+ },
+ async updatePersonalisationSettings() {
+ if (!this.hasAnyPersonalisationChanges) {
+ return;
+ }
+
+ this.uiStore.setTheme(this.currentSelectedTheme);
+ },
onSaveClick() {
this.formBus.emit('submit');
},
diff --git a/packages/editor-ui/src/views/__tests__/SettingsPersonalView.test.ts b/packages/editor-ui/src/views/__tests__/SettingsPersonalView.test.ts
index b8392280654e0..c30f63fe1c550 100644
--- a/packages/editor-ui/src/views/__tests__/SettingsPersonalView.test.ts
+++ b/packages/editor-ui/src/views/__tests__/SettingsPersonalView.test.ts
@@ -6,10 +6,12 @@ import { useUsersStore } from '@/stores/users.store';
import { createComponentRenderer } from '@/__tests__/render';
import { setupServer } from '@/__tests__/server';
import { ROLE } from '@/constants';
+import { useUIStore } from '@/stores/ui.store';
let pinia: ReturnType;
let settingsStore: ReturnType;
let usersStore: ReturnType;
+let uiStore: ReturnType;
let server: ReturnType;
const renderComponent = createComponentRenderer(SettingsPersonalView);
@@ -37,6 +39,7 @@ describe('SettingsPersonalView', () => {
settingsStore = useSettingsStore(pinia);
usersStore = useUsersStore(pinia);
+ uiStore = useUIStore(pinia);
usersStore.users[currentUser.id] = currentUser;
usersStore.currentUserId = currentUser.id;
@@ -56,6 +59,53 @@ describe('SettingsPersonalView', () => {
expect(getByTestId('change-password-link')).toBeInTheDocument();
});
+ describe('when changing theme', () => {
+ it('should disable save button when theme has not been changed', async () => {
+ const { getByTestId } = renderComponent({ pinia });
+ await waitAllPromises();
+
+ expect(getByTestId('save-settings-button')).toBeDisabled();
+ });
+
+ it('should enable save button when theme is changed', async () => {
+ const { getByTestId, getByPlaceholderText, findByText } = renderComponent({ pinia });
+ await waitAllPromises();
+
+ getByPlaceholderText('Select').click();
+ const darkThemeOption = await findByText('Dark theme');
+ darkThemeOption.click();
+
+ await waitAllPromises();
+ expect(getByTestId('save-settings-button')).toBeEnabled();
+ });
+
+ it('should not update theme after changing the selected theme', async () => {
+ const { getByPlaceholderText, findByText } = renderComponent({ pinia });
+ await waitAllPromises();
+
+ getByPlaceholderText('Select').click();
+ const darkThemeOption = await findByText('Dark theme');
+ darkThemeOption.click();
+
+ await waitAllPromises();
+ expect(uiStore.theme).toBe('system');
+ });
+
+ it('should commit the theme change after clicking save', async () => {
+ const { getByPlaceholderText, findByText, getByTestId } = renderComponent({ pinia });
+ await waitAllPromises();
+
+ getByPlaceholderText('Select').click();
+ const darkThemeOption = await findByText('Dark theme');
+ darkThemeOption.click();
+
+ await waitAllPromises();
+
+ getByTestId('save-settings-button').click();
+ expect(uiStore.theme).toBe('dark');
+ });
+ });
+
describe('when external auth is enabled, email and password change', () => {
beforeEach(() => {
vi.spyOn(settingsStore, 'isSamlLoginEnabled', 'get').mockReturnValue(true);