gymnastics

Author: NicolasLopes7

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/oidc/OidcCustomConfigureSteps.tsx

@@ -15,7 +15,6 @@ const OIDC_STEPS: WizardStepConfig[] = [
 
 export const OidcCustomConfigureSteps = (): JSX.Element => {
   return (
-    // Linear, guard-less sub-flow: mount on the first step, mirroring the SAML custom inner wizard.
     <Wizard
       steps={OIDC_STEPS}
       initialStepId={OIDC_STEPS[0].id}

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/oidc/shared/IdentityProviderConfigurationModes.tsx

@@ -0,0 +1,58 @@
+import { type JSX } from 'react';
+
+import { type LocalizationKey, useLocalizations } from '@/customizables';
+import { SegmentedControl } from '@/elements/SegmentedControl';
+
+/**
+ * The possible modes for the OIDC identity provider configuration
+ *
+ * metadataUrl: Fetch IdP configuration via metadata URL
+ * metadataFile: Upload IdP configuration via metadata file
+ * manual: Configure manually each field, such as sign on URL, issuer, and signing certificate
+ */
+export type IdpConfigurationMode = 'discoveryUrl' | 'manual';
+
+type ModeLocalizationKeys = Partial<Record<IdpConfigurationMode, LocalizationKey>>;
+
+type IdentityProviderConfigurationModesProps = {
+  modes: readonly IdpConfigurationMode[];
+  value: IdpConfigurationMode;
+  onChange: (mode: IdpConfigurationMode) => void;
+  labels: {
+    ariaLabel: LocalizationKey;
+  } & ModeLocalizationKeys;
+};
+
+export const IdentityProviderConfigurationModes = ({
+  modes,
+  value,
+  onChange,
+  labels,
+}: IdentityProviderConfigurationModesProps): JSX.Element => {
+  const { t } = useLocalizations();
+
+  return (
+    <SegmentedControl.Root
+      aria-label={t(labels.ariaLabel)}
+      value={value}
+      onChange={next => onChange(next as IdpConfigurationMode)}
+      fullWidth
+      size='lg'
+    >
+      {modes.map(mode => {
+        const label = labels[mode];
+        if (!label) {
+          return null;
+        }
+
+        return (
+          <SegmentedControl.Button
+            key={mode}
+            value={mode}
+            text={label}
+          />
+        );
+      })}
+    </SegmentedControl.Root>
+  );
+};

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/oidc/shared/OidcCredentialsStep.tsx

@@ -12,7 +12,7 @@ import { useConfigureSSO } from '../../../../ConfigureSSOContext';
 import { Step } from '../../../../elements/Step';
 import { useWizard } from '../../../../elements/Wizard';
 import { InnerStepCounter } from '../../../../elements/Wizard/InnerStepCounter';
-import { ActiveConnectionAlert } from '../../saml/shared/ActiveConnectionAlert';
+import { ActiveConnectionAlert } from '../../shared/ActiveConnectionAlert';
 
 export const OidcCredentialsStep = (): JSX.Element => {
   const card = useCardState();

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/oidc/shared/OidcEndpointsConfigurationForm.tsx

@@ -5,7 +5,7 @@ import { type LocalizationKey, Text } from '@/customizables';
 import { Form } from '@/elements/Form';
 import type { FormControlState } from '@/ui/utils/useFormControl';
 
-import { ActiveConnectionAlert } from '../../saml/shared/ActiveConnectionAlert';
+import { ActiveConnectionAlert } from '../../shared/ActiveConnectionAlert';
 
 type FormControl = FormControlState<FieldId>;
 

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/oidc/shared/OidcEndpointsStep.tsx

@@ -12,7 +12,7 @@ import { InnerStepCounter } from '../../../../elements/Wizard/InnerStepCounter';
 import {
   IdentityProviderConfigurationModes,
   type IdpConfigurationMode,
-} from '../../saml/shared/IdentityProviderConfigurationModes';
+} from '../shared/IdentityProviderConfigurationModes';
 import {
   OidcEndpointsConfigurationForm,
   type OidcEndpointsConfigurationFormProps,

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/IdentityProviderConfigurationForm.tsx

@@ -21,7 +21,7 @@ import { ArrowUpTray, Close } from '@/icons';
 import type { FormControlState } from '@/ui/utils/useFormControl';
 import { handleError } from '@/utils/errorHandler';
 
-import { ActiveConnectionAlert } from './ActiveConnectionAlert';
+import { ActiveConnectionAlert } from '../../shared/ActiveConnectionAlert';
 import type { IdpConfigurationMode } from './IdentityProviderConfigurationModes';
 
 type CardState = ReturnType<typeof useCardState>;

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/IdentityProviderConfigurationModes.tsx

@@ -8,10 +8,9 @@ import { SegmentedControl } from '@/elements/SegmentedControl';
  *
  * metadataUrl: Fetch IdP configuration via metadata URL
  * metadataFile: Upload IdP configuration via metadata file
- * discoveryUrl: Fetch IdP configuration via OIDC discovery URL
  * manual: Configure manually each field, such as sign on URL, issuer, and signing certificate
  */
-export type IdpConfigurationMode = 'metadataUrl' | 'metadataFile' | 'discoveryUrl' | 'manual';
+export type IdpConfigurationMode = 'metadataUrl' | 'metadataFile' | 'manual';
 
 type ModeLocalizationKeys = Partial<Record<IdpConfigurationMode, LocalizationKey>>;
 

…ep/saml/shared/ActiveConnectionAlert.tsx …ureStep/shared/ActiveConnectionAlert.tsxpackages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/ActiveConnectionAlert.tsx renamed to packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/shared/ActiveConnectionAlert.tsx packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/ActiveConnectionAlert.tsx renamed to packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/shared/ActiveConnectionAlert.tsx

@@ -3,7 +3,7 @@ import React, { type JSX } from 'react';
 import { localizationKeys } from '@/customizables';
 import { Alert } from '@/elements/Alert';
 
-import { useConfigureSSO } from '../../../../ConfigureSSOContext';
+import { useConfigureSSO } from '../../../ConfigureSSOContext';
 
 export const ActiveConnectionAlert = (): JSX.Element | null => {
   const { enterpriseConnection } = useConfigureSSO();