diff --git a/packages/e2e-tests/tests/user-interface/user-interface-configuration.spec.js b/packages/e2e-tests/tests/user-interface/user-interface-configuration.spec.js index f74576cb..89c5a9e9 100644 --- a/packages/e2e-tests/tests/user-interface/user-interface-configuration.spec.js +++ b/packages/e2e-tests/tests/user-interface/user-interface-configuration.spec.js @@ -1,7 +1,7 @@ // @ts-check const { test, expect } = require('../../fixtures/index'); -test.describe.skip('User interface page', () => { +test.describe('User interface page', () => { test.beforeEach(async ({ userInterfacePage }) => { await userInterfacePage.profileMenuButton.click(); await userInterfacePage.adminMenuItem.click(); @@ -43,16 +43,6 @@ test.describe.skip('User interface page', () => { initialRgbColor ); }); - - test('checks custom logo', async ({ userInterfacePage }) => { - const initialLogoSvgCode = - await userInterfacePage.logoSvgCodeInput.inputValue(); - const logoSrcAttribute = await userInterfacePage.customLogo.getAttribute( - 'src' - ); - const svgCode = userInterfacePage.encodeSVG(initialLogoSvgCode); - expect(logoSrcAttribute).toMatch(svgCode); - }); }); test.describe( @@ -90,44 +80,6 @@ test.describe.skip('User interface page', () => { } ); - test.describe( - 'update form based on input values and check if the inputs still reflect them', - async () => { - test('update primary main color and check color input', async ({ - userInterfacePage, - }) => { - await userInterfacePage.primaryMainColorInput.fill('#00adef'); - await userInterfacePage.updateButton.click(); - const rgbColor = userInterfacePage.hexToRgb('#00adef'); - const button = await userInterfacePage.primaryMainColorButton; - const styleAttribute = await button.getAttribute('style'); - expect(styleAttribute).toBe(`background-color: ${rgbColor};`); - }); - - test('update primary dark color and check color input', async ({ - userInterfacePage, - }) => { - await userInterfacePage.primaryDarkColorInput.fill('#222222'); - await userInterfacePage.updateButton.click(); - const rgbColor = userInterfacePage.hexToRgb('#222222'); - const button = await userInterfacePage.primaryDarkColorButton; - const styleAttribute = await button.getAttribute('style'); - expect(styleAttribute).toBe(`background-color: ${rgbColor};`); - }); - - test('update primary light color and check color input', async ({ - userInterfacePage, - }) => { - await userInterfacePage.primaryLightColorInput.fill('#f90707'); - await userInterfacePage.updateButton.click(); - const rgbColor = userInterfacePage.hexToRgb('#f90707'); - const button = await userInterfacePage.primaryLightColorButton; - const styleAttribute = await button.getAttribute('style'); - expect(styleAttribute).toBe(`background-color: ${rgbColor};`); - }); - } - ); - test.describe('update form based on input values', async () => { test('fill primary main color', async ({ userInterfacePage }) => { await userInterfacePage.primaryMainColorInput.fill('#00adef'); @@ -147,14 +99,15 @@ test.describe.skip('User interface page', () => { }); }); - test('fill primary light color', async ({ userInterfacePage }) => { + test.skip('fill primary light color', async ({ userInterfacePage }) => { await userInterfacePage.primaryLightColorInput.fill('#f90707'); await userInterfacePage.updateButton.click(); await userInterfacePage.goToDashboardButton.click(); await expect(userInterfacePage.page).toHaveURL('/flows'); - const span = await userInterfacePage.flowRowCardActionArea; - await span.waitFor({ state: 'visible' }); - await span.hover(); + await userInterfacePage.flowRowCardActionArea.waitFor({ + state: 'visible', + }); + await userInterfacePage.flowRowCardActionArea.hover(); await userInterfacePage.screenshot({ path: 'updated primary light color.png', }); @@ -173,4 +126,45 @@ test.describe.skip('User interface page', () => { }); }); }); + + test.describe( + 'update form based on input values and check if the inputs still reflect them', + async () => { + test('update primary main color and check color input', async ({ + userInterfacePage, + }) => { + await userInterfacePage.primaryMainColorInput.fill('#00adef'); + await userInterfacePage.updateButton.click(); + await userInterfacePage.snackbar.waitFor({ state: 'visible' }); + const rgbColor = userInterfacePage.hexToRgb('#00adef'); + const button = await userInterfacePage.primaryMainColorButton; + const styleAttribute = await button.getAttribute('style'); + expect(styleAttribute).toEqual(`background-color: ${rgbColor};`); + }); + + test('update primary dark color and check color input', async ({ + userInterfacePage, + }) => { + await userInterfacePage.primaryDarkColorInput.fill('#222222'); + await userInterfacePage.updateButton.click(); + await userInterfacePage.snackbar.waitFor({ state: 'visible' }); + const rgbColor = userInterfacePage.hexToRgb('#222222'); + const button = await userInterfacePage.primaryDarkColorButton; + const styleAttribute = await button.getAttribute('style'); + expect(styleAttribute).toEqual(`background-color: ${rgbColor};`); + }); + + test('update primary light color and check color input', async ({ + userInterfacePage, + }) => { + await userInterfacePage.primaryLightColorInput.fill('#f90707'); + await userInterfacePage.updateButton.click(); + await userInterfacePage.snackbar.waitFor({ state: 'visible' }); + const rgbColor = userInterfacePage.hexToRgb('#f90707'); + const button = await userInterfacePage.primaryLightColorButton; + const styleAttribute = await button.getAttribute('style'); + expect(styleAttribute).toEqual(`background-color: ${rgbColor};`); + }); + } + ); }); diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 02662596..0bc1618d 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -220,11 +220,11 @@ "appAuthClientsDialog.title": "Choose your authentication client", "userInterfacePage.title": "User Interface", "userInterfacePage.successfullyUpdated": "User interface has been updated.", - "userInterfacePage.metadataTitle": "Title", - "userInterfacePage.mainColor": "Primary main color", - "userInterfacePage.darkColor": "Primary dark color", - "userInterfacePage.lightColor": "Primary light color", - "userInterfacePage.svgData": "Logo SVG code", + "userInterfacePage.titleFieldLabel": "Title", + "userInterfacePage.primaryMainColorFieldLabel": "Primary main color", + "userInterfacePage.primaryDarkColorFieldLabel": "Primary dark color", + "userInterfacePage.primaryLightColorFieldLabel": "Primary light color", + "userInterfacePage.svgDataFieldLabel": "Logo SVG code", "userInterfacePage.submit": "Update", "authenticationPage.title": "Single Sign-On with SAML", "authenticationForm.active": "Active", diff --git a/packages/web/src/pages/UserInterface/index.tsx b/packages/web/src/pages/UserInterface/index.tsx index e25565c4..962fa61b 100644 --- a/packages/web/src/pages/UserInterface/index.tsx +++ b/packages/web/src/pages/UserInterface/index.tsx @@ -2,8 +2,10 @@ import * as React from 'react'; import { useMutation } from '@apollo/client'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; +import Skeleton from '@mui/material/Skeleton'; import LoadingButton from '@mui/lab/LoadingButton'; import { useSnackbar } from 'notistack'; +import merge from 'lodash/merge'; import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee'; import useConfig from 'hooks/useConfig'; @@ -14,7 +16,11 @@ import TextField from 'components/TextField'; import useFormatMessage from 'hooks/useFormatMessage'; import ColorInput from 'components/ColorInput'; import nestObject from 'helpers/nestObject'; -import { Skeleton } from '@mui/material'; +import { + primaryMainColor, + primaryDarkColor, + primaryLightColor, +} from 'styles/theme'; type UserInterface = { palette: { @@ -30,6 +36,17 @@ type UserInterface = { }; }; +const getPrimaryMainColor = (color?: string) => color || primaryMainColor; +const getPrimaryDarkColor = (color?: string) => color || primaryDarkColor; +const getPrimaryLightColor = (color?: string) => color || primaryLightColor; + +const defaultValues = { + title: 'Automatisch', + 'palette.primary.main': primaryMainColor, + 'palette.primary.dark': primaryDarkColor, + 'palette.primary.light': primaryLightColor, +}; + export default function UserInterface(): React.ReactElement { const formatMessage = useFormatMessage(); const [updateConfig, { loading }] = useMutation(UPDATE_CONFIG, { @@ -43,6 +60,10 @@ export default function UserInterface(): React.ReactElement { 'logo.svgData', ]); const { enqueueSnackbar } = useSnackbar(); + const configWithDefaults = merge( + defaultValues, + nestObject(config) + ); const handleUserInterfaceUpdate = async (uiData: Partial) => { try { @@ -50,9 +71,15 @@ export default function UserInterface(): React.ReactElement { variables: { input: { title: uiData?.title, - 'palette.primary.main': uiData?.palette?.primary.main, - 'palette.primary.dark': uiData?.palette?.primary.dark, - 'palette.primary.light': uiData?.palette?.primary.light, + 'palette.primary.main': getPrimaryMainColor( + uiData?.palette?.primary.main + ), + 'palette.primary.dark': getPrimaryDarkColor( + uiData?.palette?.primary.dark + ), + 'palette.primary.light': getPrimaryLightColor( + uiData?.palette?.primary.light + ), 'logo.svgData': uiData?.logo?.svgData, }, }, @@ -86,39 +113,45 @@ export default function UserInterface(): React.ReactElement { {!configLoading && (
(config)} + defaultValues={configWithDefaults} >