diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 5eefcca086..b6bbf534b2 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -183,6 +183,7 @@ "Settings.sso.form.defaultRole.label": "Default role", "Settings.sso.form.registration.description": "Create new user on SSO login if no account exists", "Settings.sso.form.registration.label": "Auto-registration", + "Settings.sso.form.settings.title": "Settings", "Settings.sso.title": "Single Sign-On", "Settings.webhooks.create": "Create a webhook", "Settings.webhooks.create.header": "Create a new header", diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js index af11766fcc..017b2789e8 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js @@ -12,6 +12,7 @@ import { Box } from '@strapi/design-system/Box'; import { Button } from '@strapi/design-system/Button'; import { Main } from '@strapi/design-system/Main'; import { Stack } from '@strapi/design-system/Stack'; +import { Typography } from '@strapi/design-system/Typography'; import { ToggleInput } from '@strapi/design-system/ToggleInput'; import { Select, Option } from '@strapi/design-system/Select'; import { Grid, GridItem } from '@strapi/design-system/Grid'; @@ -100,8 +101,14 @@ export const SingleSignOn = () => { ) : ( - - + + + + {formatMessage({ + id: 'Settings.sso.form.settings.title', + defaultMessage: 'Settings', + })} + { - - + + )} diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js index 71b7763a01..e4ed610d9c 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js @@ -37,9 +37,9 @@ describe('Admin | ee | SettingsPage | SSO', () => { afterAll(() => server.close()); - it('should not crash', () => { + it('renders and matches the snapshot', async () => { useRBAC.mockImplementation(() => ({ - isLoading: true, + isLoading: false, allowedActions: { canUpdate: true, canReadRoles: true }, })); @@ -47,7 +47,20 @@ describe('Admin | ee | SettingsPage | SSO', () => { container: { firstChild }, } = render(App); + await waitFor(() => + expect( + screen.getByText('Create new user on SSO login if no account exists') + ).toBeInTheDocument() + ); + expect(firstChild).toMatchInlineSnapshot(` + .c17 { + background: #ffffff; + padding: 24px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + .c11 { font-weight: 600; color: #32324d; @@ -186,7 +199,58 @@ describe('Admin | ee | SettingsPage | SSO', () => { background: #4945ff; } - .c14 { + .c41 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; + } + + .c41:focus { + outline: none; + } + + .c41[aria-disabled='true'] { + cursor: not-allowed; + } + + .c38 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; + } + + .c45 { + color: #32324d; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.875rem; + line-height: 1.43; + } + + .c49 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; + } + + .c44 { + padding-right: 16px; + padding-left: 16px; + } + + .c46 { + padding-left: 12px; + } + + .c39 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -194,17 +258,193 @@ describe('Admin | ee | SettingsPage | SSO', () => { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - -webkit-box-pack: space-around; - -webkit-justify-content: space-around; - -ms-flex-pack: space-around; - justify-content: space-around; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } - .c16 { + .c42 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c37 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c37 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c37 > * + * { + margin-top: 4px; + } + + .c40 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; + border-radius: 4px; + background: #ffffff; + overflow: hidden; + min-height: 2.5rem; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + } + + .c40:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; + } + + .c47 { + background: transparent; + border: none; + position: relative; + z-index: 1; + } + + .c47 svg { + height: 0.6875rem; + width: 0.6875rem; + } + + .c47 svg path { + fill: #666687; + } + + .c48 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; + } + + .c48 svg { + width: 0.375rem; + } + + .c43 { + width: 100%; + } + + .c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c18 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c18 > * + * { + margin-top: 16px; + } + + .c25 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; + } + + .c34 { + font-weight: 600; + color: #271fe0; + font-size: 0.75rem; + line-height: 1.33; + } + + .c36 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; + } + + .c28 { + background: #ffffff; + border-radius: 4px; + } + + .c30 { + background: #ffffff; + padding-right: 32px; + padding-left: 32px; + } + + .c32 { + background: #f0f0ff; + padding-right: 32px; + padding-left: 32px; + } + + .c24 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c23 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c23 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c23 > * + * { + margin-top: 4px; + } + + .c27 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -216,13 +456,63 @@ describe('Admin | ee | SettingsPage | SSO', () => { width: 1px; } - .c17 { - -webkit-animation: gzYjWD 1s infinite linear; - animation: gzYjWD 1s infinite linear; + .c26 { + position: relative; + display: inline-block; } - .c15 { - height: 100vh; + .c29 { + height: 2.5rem; + border: 1px solid #dcdce4; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: hidden; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + } + + .c29:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; + } + + .c33 { + text-transform: uppercase; + position: relative; + z-index: 2; + } + + .c31 { + text-transform: uppercase; + border-right: 1px solid #dcdce4; + position: relative; + z-index: 2; + } + + .c35 { + position: absolute; + z-index: 1; + left: 4px; + top: 4px; + } + + .c22 { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + } + + .c19 { + color: #32324d; + font-weight: 500; + font-size: 1rem; + line-height: 1.25; } .c1 { @@ -238,6 +528,19 @@ describe('Admin | ee | SettingsPage | SSO', () => { padding-left: 56px; } + .c15 { + padding-bottom: 56px; + } + + .c14 { + display: grid; + grid-template-columns: 1fr; + } + + .c16 { + overflow-x: hidden; + } + .c2 { display: -webkit-box; display: -webkit-flex; @@ -287,6 +590,28 @@ describe('Admin | ee | SettingsPage | SSO', () => { outline: none; } + .c20 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 16px; + } + + .c21 { + grid-column: span 6; + } + + @media (max-width:68.75rem) { + .c21 { + grid-column: span 12; + } + } + + @media (max-width:34.375rem) { + .c21 { + grid-column: span; + } + } +
{ class="c13" >
+
+ @@ -380,18 +868,22 @@ describe('Admin | ee | SettingsPage | SSO', () => { `); }); - // FIXME: uncomment when parts/button supports disabled - // it('should disable the form when there is no change', () => { - // useRBAC.mockImplementation(() => ({ - // isLoading: false, - // allowedActions: { canUpdate: true, canReadRoles: true }, - // })); + it('should disable the form when there is no change', async () => { + useRBAC.mockImplementation(() => ({ + isLoading: false, + allowedActions: { canUpdate: true, canReadRoles: true }, + })); - // const { getByTestId } = render(App); + const { getByTestId } = render(App); - // expect(getByTestId('save-button')).toHaveAttribute('aria-disabled'); - // expect(screen.getByRole('button')).toBeDisabled(); - // }); + await waitFor(() => + expect( + screen.getByText('Create new user on SSO login if no account exists') + ).toBeInTheDocument() + ); + + expect(getByTestId('save-button')).toHaveAttribute('aria-disabled'); + }); it('should not disable the form when there is a change', async () => { useRBAC.mockImplementation(() => ({ diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/server.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/server.js index 0b7670a9f0..8b165a3d5a 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/server.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/server.js @@ -4,6 +4,7 @@ import { rest } from 'msw'; const handlers = [ rest.get('*/providers/options', (req, res, ctx) => { return res( + ctx.delay(200), ctx.status(200), ctx.json({ data: { @@ -15,6 +16,7 @@ const handlers = [ }), rest.get('*/admin/roles', (req, res, ctx) => { return res( + ctx.delay(200), ctx.status(200), ctx.json({ data: [