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);