From 7d7976bb164c1d7ececa59d0978be4e468072305 Mon Sep 17 00:00:00 2001 From: Rula Abu Hasna Date: Thu, 27 Jun 2024 17:51:59 +0300 Subject: [PATCH 1/6] Update with okta form --- .../tabs/OktaAccess/OktaAccess.tsx | 3 +- .../OktaConfigForm/OktaConfigForm.tsx | 160 ++++++++++++++++++ 2 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx index 2f508fcb57..8f0dca412a 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx @@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom' import { useIsCurrentUserAnAdmin } from 'services/user' import { AdminAuthorizationBanner } from './AdminAuthorizationBanner' +import OktaConfigForm from './OktaConfigForm/OktaConfigForm' interface URLParams { owner: string @@ -22,7 +23,7 @@ function OktaAccess() {

- {isAdmin ? <>Okta access form : } + {isAdmin ? : } ) } diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx new file mode 100644 index 0000000000..499254d30b --- /dev/null +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx @@ -0,0 +1,160 @@ +import { zodResolver } from '@hookform/resolvers/zod' +import { useState } from 'react' +import { SubmitHandler, useForm } from 'react-hook-form' +import { z } from 'zod' + +import Banner from 'ui/Banner' +import BannerContent from 'ui/Banner/BannerContent' +import Button from 'ui/Button' +import TextInput from 'ui/TextInput' +import Toggle from 'ui/Toggle' + +const FormSchema = z.object({ + clientId: z.string().nonempty('Client ID is required'), + clientSecret: z.string().nonempty('Client Secret is required'), + redirectUri: z.string().url('Redirect URI must be a valid URL'), + oktaSyncEnabled: z.boolean().default(false), + oktaLoginEnforce: z.boolean().default(false), +}) + +type FormValues = z.infer + +export default function OktaConfigForm() { + const { register, handleSubmit, formState } = useForm({ + resolver: zodResolver(FormSchema), + mode: 'onChange', + }) + + const [oktaEnabled, setOktaEnabled] = useState(false) + const [oktaLoginEnforce, setOktaLoginEnforce] = useState(false) + + const onSubmit: SubmitHandler = (data) => { + console.log('Form Data: ', data) + } + + return ( +
+
+
+

Step 1: Enable Okta Sync

+

+ To connect Codecov with Okta, you need to enable the + synchronization. Please enter the necessary Okta credentials below + and toggle the sync option to start the synchronization process. +

+
+
+ + + {formState.errors.clientId && ( +

+ {formState.errors.clientId.message} +

+ )} +
+
+ + + {formState.errors.clientSecret && ( +

+ {formState.errors.clientSecret.message} +

+ )} +
+
+ + + {formState.errors.redirectUri && ( +

+ {formState.errors.redirectUri.message} +

+ )} +
+ + +
+

+ Please note that we are unable to verify the Okta credentials. + After enabling sync, be sure to test the connection to ensure it + is functioning correctly. Additionally, you must toggle enforce + on to require Okta login +

+
+ setOktaEnabled(!oktaEnabled)} + value={oktaEnabled} + /> + +
+
+ + +
+

Step 2: Enforce Okta Login

+

+ Once the synchronization with Okta is enabled, you can enforce Okta + login for all users. +

+ + +
+

+ Please note that we are unable to verify the Okta credentials. + After enabling sync, be sure to test the connection to ensure it + is functioning correctly. Additionally, you must toggle enforce + on to require Okta login +

+
+ { + setOktaLoginEnforce(!oktaLoginEnforce) + if (!oktaLoginEnforce) { + setOktaEnabled(true) + } + }} + value={oktaLoginEnforce} + /> + +
+
+ + +
+ +
+
+
+ ) +} From 5a5b9071eb3363080dd4b1b0098e76cc4c9d1741 Mon Sep 17 00:00:00 2001 From: Rula Abu Hasna Date: Fri, 28 Jun 2024 18:03:17 +0300 Subject: [PATCH 2/6] Update form with toggles --- .../tabs/OktaAccess/OktaAccess.spec.tsx | 2 +- .../tabs/OktaAccess/OktaAccess.tsx | 2 +- .../OktaConfigForm/OktaConfigForm.spec.tsx | 179 ++++++++++++++++++ .../OktaConfigForm/OktaConfigForm.tsx | 74 ++++---- .../tabs/OktaAccess/OktaConfigForm/index.ts | 1 + 5 files changed, 220 insertions(+), 38 deletions(-) create mode 100644 src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx create mode 100644 src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/index.ts diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.spec.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.spec.tsx index 36fc50ac79..050a399046 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.spec.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.spec.tsx @@ -69,7 +69,7 @@ describe('OktaAccess', () => { setup({ isAdmin: true }) render(, { wrapper }) - const form = await screen.findByText(/Okta access form/) + const form = await screen.findByText(/Step 1: Enable Okta Sync/) expect(form).toBeInTheDocument() }) diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx index 8f0dca412a..665db37761 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.tsx @@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom' import { useIsCurrentUserAnAdmin } from 'services/user' import { AdminAuthorizationBanner } from './AdminAuthorizationBanner' -import OktaConfigForm from './OktaConfigForm/OktaConfigForm' +import { OktaConfigForm } from './OktaConfigForm' interface URLParams { owner: string diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx new file mode 100644 index 0000000000..96cecefc84 --- /dev/null +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx @@ -0,0 +1,179 @@ +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { Suspense } from 'react' +import { MemoryRouter, Route } from 'react-router-dom' + +import { OktaConfigForm } from './OktaConfigForm' + +const wrapper: React.FC = ({ children }) => ( + + + {children} + + +) + +describe('OktaConfigForm', () => { + function setup() { + const user = userEvent.setup() + return { user } + } + + it('should render Okta Config form header', async () => { + setup() + render(, { wrapper }) + + const header = await screen.findByText(/Step 1: Enable Okta Sync/) + expect(header).toBeInTheDocument() + }) + + it('should render Okta Config form description', async () => { + setup() + render(, { wrapper }) + + const description = await screen.findByText( + /To connect Codecov with Okta, you need to enable the synchronization./ + ) + expect(description).toBeInTheDocument() + }) + + it('should display Client ID validation error when removing client id value', async () => { + setup() + render(, { wrapper }) + + const clientSecretInput = await screen.findByLabelText(/Client Secret/) + await userEvent.type(clientSecretInput, 'clientSecret') + + const redirectUriInput = await screen.findByLabelText(/Redirect URI/) + await userEvent.type(redirectUriInput, 'http://localhost:3000') + + const clientIdInput = await screen.findByLabelText(/Client ID/) + await userEvent.type(clientIdInput, 'clientId') + await userEvent.clear(clientIdInput) + + const clientIdError = await screen.findByText(/Client ID is required/) + expect(clientIdError).toBeInTheDocument() + }) + + it('should display Client Secret validation error when removing client secret value', async () => { + setup() + render(, { wrapper }) + + const clientIdInput = await screen.findByLabelText(/Client ID/) + await userEvent.type(clientIdInput, 'clientId') + + const redirectUriInput = await screen.findByLabelText(/Redirect URI/) + await userEvent.type(redirectUriInput, 'http://localhost:3000') + + const clientSecretInput = await screen.findByLabelText(/Client Secret/) + await userEvent.type(clientSecretInput, 'clientSecret') + await userEvent.clear(clientSecretInput) + + const clientSecretError = await screen.findByText( + /Client Secret is required/ + ) + expect(clientSecretError).toBeInTheDocument() + }) + + it('should display Redirect URI validation error when removing redirect uri value', async () => { + setup() + render(, { wrapper }) + + const clientIdInput = await screen.findByLabelText(/Client ID/) + await userEvent.type(clientIdInput, 'clientId') + + const clientSecretInput = await screen.findByLabelText(/Client Secret/) + await userEvent.type(clientSecretInput, 'clientSecret') + + const redirectUriInput = await screen.findByLabelText(/Redirect URI/) + await userEvent.type(redirectUriInput, 'http://localhost:3000') + await userEvent.clear(redirectUriInput) + + const redirectUriError = await screen.findByText( + /Redirect URI must be a valid URL/ + ) + expect(redirectUriError).toBeInTheDocument() + }) + + it('should toggle Okta Sync Enabled on', async () => { + const { user } = setup() + render(, { wrapper }) + + const oktaSyncEnabledToggle = await screen.findByRole('button', { + name: /Okta Sync Enabled/, + }) + expect(oktaSyncEnabledToggle).toBeInTheDocument() + expect(oktaSyncEnabledToggle).toHaveClass('bg-ds-gray-quinary') + + await user.click(oktaSyncEnabledToggle) + expect(oktaSyncEnabledToggle).toHaveClass('bg-ds-primary-base') + }) + + it('should toggle Okta Login Enforce on', async () => { + const { user } = setup() + render(, { wrapper }) + + const oktaLoginEnforceToggle = await screen.findByRole('button', { + name: /Okta Login Enforced/, + }) + expect(oktaLoginEnforceToggle).toBeInTheDocument() + expect(oktaLoginEnforceToggle).toHaveClass('bg-ds-gray-quinary') + + await user.click(oktaLoginEnforceToggle) + expect(oktaLoginEnforceToggle).toHaveClass('bg-ds-primary-base') + }) + + it('toggles enabled on when enforced is on', async () => { + const { user } = setup() + render(, { wrapper }) + + const oktaLoginEnforceToggle = await screen.findByRole('button', { + name: /Okta Login Enforced/, + }) + expect(oktaLoginEnforceToggle).toBeInTheDocument() + expect(oktaLoginEnforceToggle).toHaveClass('bg-ds-gray-quinary') + + await user.click(oktaLoginEnforceToggle) + const oktaSyncEnabledToggle = await screen.findByRole('button', { + name: /Okta Sync Enabled/, + }) + expect(oktaLoginEnforceToggle).toHaveClass('bg-ds-primary-base') + expect(oktaSyncEnabledToggle).toHaveClass('bg-ds-primary-base') + }) + + it('disables enforce toggle when enabled is off', async () => { + const { user } = setup() + render(, { wrapper }) + + const oktaSyncEnabledToggle = await screen.findByRole('button', { + name: /Okta Sync Enabled/, + }) + expect(oktaSyncEnabledToggle).toBeInTheDocument() + expect(oktaSyncEnabledToggle).toHaveClass('bg-ds-gray-quinary') + + const oktaLoginEnforceToggle = await screen.findByRole('button', { + name: /Okta Login Enforced/, + }) + expect(oktaLoginEnforceToggle).toBeInTheDocument() + expect(oktaLoginEnforceToggle).toHaveClass('bg-ds-gray-quinary') + + await user.click(oktaLoginEnforceToggle) + expect(oktaLoginEnforceToggle).toHaveClass('bg-ds-primary-base') + + await user.click(oktaSyncEnabledToggle) + expect(oktaSyncEnabledToggle).toHaveClass('bg-ds-gray-quinary') + expect(oktaLoginEnforceToggle).toHaveClass('bg-ds-gray-quinary') + }) + + it('disables save button when form is in invalid state', async () => { + setup() + render(, { wrapper }) + + const saveButton = await screen.findByRole('button', { + name: /Save/, + }) + + expect(saveButton).toBeInTheDocument() + expect(saveButton).toBeDisabled() + }) +}) diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx index 499254d30b..ae40059369 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx @@ -10,8 +10,8 @@ import TextInput from 'ui/TextInput' import Toggle from 'ui/Toggle' const FormSchema = z.object({ - clientId: z.string().nonempty('Client ID is required'), - clientSecret: z.string().nonempty('Client Secret is required'), + clientId: z.string().min(1, 'Client ID is required'), + clientSecret: z.string().min(1, 'Client Secret is required'), redirectUri: z.string().url('Redirect URI must be a valid URL'), oktaSyncEnabled: z.boolean().default(false), oktaLoginEnforce: z.boolean().default(false), @@ -19,7 +19,7 @@ const FormSchema = z.object({ type FormValues = z.infer -export default function OktaConfigForm() { +export function OktaConfigForm() { const { register, handleSubmit, formState } = useForm({ resolver: zodResolver(FormSchema), mode: 'onChange', @@ -36,7 +36,7 @@ export default function OktaConfigForm() {
-

Step 1: Enable Okta Sync

+

Step 1: Enable Okta Sync

To connect Codecov with Okta, you need to enable the synchronization. Please enter the necessary Okta credentials below @@ -48,7 +48,9 @@ export default function OktaConfigForm() { Client ID -

- setOktaEnabled(!oktaEnabled)} - value={oktaEnabled} - /> - -
+ { + setOktaEnabled(!oktaEnabled) + if (oktaLoginEnforce) { + setOktaLoginEnforce(false) + } + }} + value={oktaEnabled} + label="Okta Sync Enabled" + />
-

Step 2: Enforce Okta Login

+

Step 2: Enforce Okta Login

Once the synchronization with Okta is enabled, you can enforce Okta login for all users. @@ -122,25 +127,22 @@ export default function OktaConfigForm() {

- Please note that we are unable to verify the Okta credentials. - After enabling sync, be sure to test the connection to ensure it - is functioning correctly. Additionally, you must toggle enforce - on to require Okta login + Please note that enabling this will require all users to log in + to Codecov via Okta. Without successful verification, only + public repositories will be visible.

-
- { - setOktaLoginEnforce(!oktaLoginEnforce) - if (!oktaLoginEnforce) { - setOktaEnabled(true) - } - }} - value={oktaLoginEnforce} - /> - -
+ { + setOktaLoginEnforce(!oktaLoginEnforce) + if (!oktaLoginEnforce) { + setOktaEnabled(true) + } + }} + value={oktaLoginEnforce} + label="Okta Login Enforced" + />
@@ -149,7 +151,7 @@ export default function OktaConfigForm() { type="submit" disabled={!formState.isValid} to={undefined} - hook="save changes" + hook="save okta form changes" > Save diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/index.ts b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/index.ts new file mode 100644 index 0000000000..b8db0b7fea --- /dev/null +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/index.ts @@ -0,0 +1 @@ +export { OktaConfigForm } from './OktaConfigForm' From d5156407551bd10c4515284fa82d57b830294cb7 Mon Sep 17 00:00:00 2001 From: Rula Abu Hasna Date: Fri, 28 Jun 2024 18:21:18 +0300 Subject: [PATCH 3/6] Update to move save button up --- .../OktaConfigForm/OktaConfigForm.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx index ae40059369..657d9c2b26 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx @@ -93,6 +93,16 @@ export function OktaConfigForm() {

)}
+
+ +
@@ -146,16 +156,6 @@ export function OktaConfigForm() {
-
- -
) From 6a2e9d90ef4e10ccec7de0d117365ec0b88ab356 Mon Sep 17 00:00:00 2001 From: Rula Abu Hasna Date: Sat, 29 Jun 2024 13:50:07 +0300 Subject: [PATCH 4/6] Update with style --- .../OktaConfigForm/OktaConfigForm.tsx | 133 +++++++++--------- 1 file changed, 68 insertions(+), 65 deletions(-) diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx index 657d9c2b26..1582b3ad89 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx @@ -13,8 +13,6 @@ const FormSchema = z.object({ clientId: z.string().min(1, 'Client ID is required'), clientSecret: z.string().min(1, 'Client Secret is required'), redirectUri: z.string().url('Redirect URI must be a valid URL'), - oktaSyncEnabled: z.boolean().default(false), - oktaLoginEnforce: z.boolean().default(false), }) type FormValues = z.infer @@ -34,7 +32,10 @@ export function OktaConfigForm() { return (
-
+

Step 1: Enable Okta Sync

@@ -43,66 +44,70 @@ export function OktaConfigForm() { and toggle the sync option to start the synchronization process.

-
- - - {formState.errors.clientId && ( -

- {formState.errors.clientId.message} -

- )} -
-
- - - {formState.errors.clientSecret && ( -

- {formState.errors.clientSecret.message} -

- )} -
-
- - - {formState.errors.redirectUri && ( -

- {formState.errors.redirectUri.message} -

- )} -
-
- +
+
+ + + {formState.errors.clientId && ( +

+ {formState.errors.clientId.message} +

+ )} +
+
+ + + {formState.errors.clientSecret && ( +

+ {formState.errors.clientSecret.message} +

+ )} +
+
+ + + {formState.errors.redirectUri && ( +

+ {formState.errors.redirectUri.message} +

+ )} +
+
+ +
+ +
@@ -113,7 +118,6 @@ export function OktaConfigForm() { on to require Okta login

{ setOktaEnabled(!oktaEnabled) @@ -142,7 +146,6 @@ export function OktaConfigForm() { public repositories will be visible.

{ setOktaLoginEnforce(!oktaLoginEnforce) @@ -156,7 +159,7 @@ export function OktaConfigForm() {
- +
) } From afbdcdb788d741ec93f94953bfbcb317ab5c5a33 Mon Sep 17 00:00:00 2001 From: Rula Abu Hasna Date: Sat, 29 Jun 2024 14:09:27 +0300 Subject: [PATCH 5/6] Update with password show/hide stuff --- .../OktaConfigForm/OktaConfigForm.spec.tsx | 31 +++++++++++++++++++ .../OktaConfigForm/OktaConfigForm.tsx | 27 ++++++++++++---- src/ui/Icon/svg/solid/index.js | 4 +-- 3 files changed, 54 insertions(+), 8 deletions(-) diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx index 96cecefc84..b57ac154cd 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.spec.tsx @@ -75,6 +75,37 @@ describe('OktaConfigForm', () => { expect(clientSecretError).toBeInTheDocument() }) + it('shows client secret when clicking on the eye icon', async () => { + setup() + render(, { wrapper }) + + const clientSecretInput = await screen.findByLabelText(/Client Secret/) + await userEvent.type(clientSecretInput, 'clientSecret') + + const eyeIcon = await screen.findByRole('button', { + name: /eye/, + }) + await userEvent.click(eyeIcon) + + expect(clientSecretInput).toHaveAttribute('type', 'text') + }) + + it('hides client secret when clicking on the eye icon', async () => { + setup() + render(, { wrapper }) + + const clientSecretInput = await screen.findByLabelText(/Client Secret/) + await userEvent.type(clientSecretInput, 'clientSecret') + + const eyeIcon = await screen.findByRole('button', { + name: /eye/, + }) + await userEvent.click(eyeIcon) + await userEvent.click(eyeIcon) + + expect(clientSecretInput).toHaveAttribute('type', 'password') + }) + it('should display Redirect URI validation error when removing redirect uri value', async () => { setup() render(, { wrapper }) diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx index 1582b3ad89..44fb210a8c 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx @@ -6,6 +6,7 @@ import { z } from 'zod' import Banner from 'ui/Banner' import BannerContent from 'ui/Banner/BannerContent' import Button from 'ui/Button' +import Icon from 'ui/Icon' import TextInput from 'ui/TextInput' import Toggle from 'ui/Toggle' @@ -25,6 +26,7 @@ export function OktaConfigForm() { const [oktaEnabled, setOktaEnabled] = useState(false) const [oktaLoginEnforce, setOktaLoginEnforce] = useState(false) + const [showPassword, setShowPassword] = useState(false) const onSubmit: SubmitHandler = (data) => { console.log('Form Data: ', data) @@ -67,12 +69,25 @@ export function OktaConfigForm() { - +
+ + +
{formState.errors.clientSecret && (

{formState.errors.clientSecret.message} diff --git a/src/ui/Icon/svg/solid/index.js b/src/ui/Icon/svg/solid/index.js index d2d2977d5e..11a5726de4 100644 --- a/src/ui/Icon/svg/solid/index.js +++ b/src/ui/Icon/svg/solid/index.js @@ -91,8 +91,8 @@ export { ReactComponent as download } from './download.svg' export { ReactComponent as exclamationCircle } from './exclamation-circle.svg' export { ReactComponent as exclamation } from './exclamation.svg' export { ReactComponent as externalLink } from './external-link.svg' -// export { ReactComponent as eyeOff } from './eye-off.svg' -// export { ReactComponent as eye } from './eye.svg' +export { ReactComponent as eyeOff } from './eye-off.svg' +export { ReactComponent as eye } from './eye.svg' // export { ReactComponent as fastForward } from './fast-forward.svg' // export { ReactComponent as film } from './film.svg' // export { ReactComponent as filter } from './filter.svg' From 7f8a13e53cf3a1c6cf105505c9359275814c2230 Mon Sep 17 00:00:00 2001 From: Rula Abu Hasna Date: Tue, 2 Jul 2024 18:01:49 +0300 Subject: [PATCH 6/6] update with some changes --- .../OktaConfigForm/OktaConfigForm.tsx | 275 +++++++++--------- 1 file changed, 141 insertions(+), 134 deletions(-) diff --git a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx index 44fb210a8c..d6e1e6531b 100644 --- a/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx +++ b/src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx @@ -6,6 +6,7 @@ import { z } from 'zod' import Banner from 'ui/Banner' import BannerContent from 'ui/Banner/BannerContent' import Button from 'ui/Button' +import { Card } from 'ui/Card' import Icon from 'ui/Icon' import TextInput from 'ui/TextInput' import Toggle from 'ui/Toggle' @@ -33,148 +34,154 @@ export function OktaConfigForm() { } return ( -

-
-
-

Step 1: Enable Okta Sync

-

- To connect Codecov with Okta, you need to enable the - synchronization. Please enter the necessary Okta credentials below - and toggle the sync option to start the synchronization process. -

-
-
+ + +
- - - {formState.errors.clientId && ( -

- {formState.errors.clientId.message} -

- )} +

+ Step 1: Enable Okta Sync +

+

+ To connect Codecov with Okta, you need to enable the + synchronization. Please enter the necessary Okta credentials below + and toggle the sync option to start the synchronization process. +

-
- -
+
+
+ -
+
+ +
+ - + +
+ {formState.errors.clientSecret ? ( +

+ {formState.errors.clientSecret.message} +

+ ) : null}
- {formState.errors.clientSecret && ( -

- {formState.errors.clientSecret.message} -

- )} -
-
- - - {formState.errors.redirectUri && ( -

- {formState.errors.redirectUri.message} -

- )} -
-
- -
-
- -
- - -
-

- Please note that we are unable to verify the Okta credentials. - After enabling sync, be sure to test the connection to ensure it - is functioning correctly. Additionally, you must toggle enforce - on to require Okta login -

- { - setOktaEnabled(!oktaEnabled) - if (oktaLoginEnforce) { - setOktaLoginEnforce(false) - } - }} - value={oktaEnabled} - label="Okta Sync Enabled" +
+ + + {formState.errors.redirectUri ? ( +

+ {formState.errors.redirectUri.message} +

+ ) : null}
- - -
-

Step 2: Enforce Okta Login

-

- Once the synchronization with Okta is enabled, you can enforce Okta - login for all users. -

- - -
-

- Please note that enabling this will require all users to log in - to Codecov via Okta. Without successful verification, only - public repositories will be visible. -

- { - setOktaLoginEnforce(!oktaLoginEnforce) - if (!oktaLoginEnforce) { - setOktaEnabled(true) - } - }} - value={oktaLoginEnforce} - label="Okta Login Enforced" - /> +
+
- - -
-
+
+ +
+ + +
+

+ Please note that we are unable to verify the Okta credentials. + After enabling sync, be sure to test the connection to ensure + it is functioning correctly. Additionally, you must toggle + enforce on to require Okta login +

+ { + setOktaEnabled(!oktaEnabled) + if (oktaLoginEnforce) { + setOktaLoginEnforce(false) + } + }} + value={oktaEnabled} + label="Okta Sync Enabled" + /> +
+ + +
+

+ Step 2: Enforce Okta Login +

+

+ Once the synchronization with Okta is enabled, you can enforce Okta + login for all users. +

+ + +
+

+ Please note that enabling this will require all users to log + in to Codecov via Okta. Without successful verification, only + public repositories will be visible. +

+ { + setOktaLoginEnforce(!oktaLoginEnforce) + if (!oktaLoginEnforce) { + setOktaEnabled(true) + } + }} + value={oktaLoginEnforce} + label="Okta Login Enforced" + /> +
+ + +
+ + ) }