chore(ui): rename ConfigureSSO descriptors and wire missing sites

Renames the 9 configureSSOWizard* element descriptors to match the
post-refactor primitive layout (configureSSOHeader / configureSSOStepper*
/ configureSSOStep / configureSSOStepCounter / configureSSOFooter*),
adds them at every site that previously had a TODO placeholder
(Stepper Root + Item + Skeleton, Step.Counter, ProfileCardHeader),
and drops the legacy entries from elementDescriptors.ts and the
appearance.ts ElementsConfig type.

Also aligns the ConfigureStep elementId from 'create-app' to
'configure' to match the wizard step id.

Author: iagodahlem

packages/ui/src/components/ConfigureSSO/elements/ProfileCard.tsx

@@ -6,6 +6,7 @@ type ProfileCardHeaderProps = React.PropsWithChildren;
 export const ProfileCardHeader = (props: ProfileCardHeaderProps): JSX.Element => (
   <Flex
     as='header'
+    elementDescriptor={descriptors.configureSSOHeader}
     {...props}
     sx={theme => ({
       gap: theme.space.$2,
@@ -22,7 +23,7 @@ type ProfileCardFooterProps = React.PropsWithChildren;
 export const ProfileCardFooter = (props: ProfileCardFooterProps): JSX.Element => (
   <Flex
     as='footer'
-    elementDescriptor={descriptors.footer}
+    elementDescriptor={descriptors.configureSSOFooter}
     align='center'
     justify='end'
     {...props}

packages/ui/src/components/ConfigureSSO/elements/Step.tsx

@@ -115,7 +115,7 @@ const FooterPrevious = ({ onClick, isDisabled, isLoading, label = 'Previous' }:
 
   return (
     <Button
-      elementDescriptor={descriptors.configureSSOWizardFooterPreviousButton}
+      elementDescriptor={descriptors.configureSSOFooterPreviousButton}
       variant='outline'
       size='sm'
       isDisabled={isDisabled}
@@ -144,7 +144,7 @@ const FooterContinue = ({ onClick, isDisabled, isLoading, label = 'Continue' }:
 
   return (
     <Button
-      elementDescriptor={descriptors.configureSSOWizardFooterContinueButton}
+      elementDescriptor={descriptors.configureSSOFooterContinueButton}
       variant='solid'
       size='sm'
       isDisabled={isDisabled}
@@ -182,7 +182,7 @@ const Counter = ({ total, current }: StepCounterProps): JSX.Element | null => {
 
   return (
     <Badge
-      // TODO: add descriptor
+      elementDescriptor={descriptors.configureSSOStepCounter}
       colorScheme='primary'
       sx={{ whiteSpace: 'nowrap' }}
     >

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Button, Flex, Icon, Text, useLocalizations } from '@/customizables';
+import { Box, Button, descriptors, Flex, Icon, Text, useLocalizations } from '@/customizables';
 import { CaretRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
@@ -10,7 +10,7 @@ const Root = ({ children }: StepperProps): JSX.Element => {
 
   return (
     <Flex
-      // TODO: add descriptor
+      elementDescriptor={descriptors.configureSSOStepper}
       align='center'
       sx={theme => ({
         gap: theme.space.$2,
@@ -23,7 +23,7 @@ const Root = ({ children }: StepperProps): JSX.Element => {
           {child}
           {index < items.length - 1 && (
             <Icon
-              // TODO: add descriptor
+              elementDescriptor={descriptors.configureSSOStepperSeparator}
               icon={CaretRight}
               size='md'
               sx={theme => ({ color: theme.colors.$colorMutedForeground })}
@@ -48,7 +48,7 @@ const Item = ({
 
   return (
     <Button
-      // TODO: add descriptor
+      elementDescriptor={descriptors.configureSSOStepperItem}
       isActive={isCurrent}
       variant='unstyled'
       isDisabled={!isReachable}
@@ -60,7 +60,7 @@ const Item = ({
       })}
     >
       <Flex
-        // TODO: add descriptor
+        elementDescriptor={descriptors.configureSSOStepperItemBullet}
         isActive={isCurrent}
         align='center'
         justify='center'
@@ -78,7 +78,7 @@ const Item = ({
         {bullet}
       </Flex>
       <Text
-        // TODO: add descriptor
+        elementDescriptor={descriptors.configureSSOStepperItemLabel}
         as='span'
         variant='body'
         sx={{ fontWeight: 'inherit', color: 'inherit' }}
@@ -120,7 +120,7 @@ type SkeletonProps = {
 
 const Skeleton = ({ totalSteps = 4 }: SkeletonProps): JSX.Element => (
   <Flex
-    // TODO: add descriptor
+    elementDescriptor={descriptors.configureSSOStepper}
     align='center'
     sx={theme => ({
       gap: theme.space.$2,
@@ -133,7 +133,7 @@ const Skeleton = ({ totalSteps = 4 }: SkeletonProps): JSX.Element => (
         <ItemSkeleton />
         {index < totalSteps - 1 && (
           <Icon
-            // TODO: add descriptor
+            elementDescriptor={descriptors.configureSSOStepperSeparator}
             icon={CaretRight}
             size='md'
             sx={theme => ({ color: theme.colors.$neutralAlpha100 })}

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

@@ -9,8 +9,8 @@ export const ConfigureStep = (): JSX.Element => {
   return (
     <Flow.Part part='configureCreateApp'>
       <Step
-        elementDescriptor={descriptors.configureSSOWizardBody}
-        elementId={descriptors.configureSSOWizardBody.setId('create-app')}
+        elementDescriptor={descriptors.configureSSOStep}
+        elementId={descriptors.configureSSOStep.setId('configure')}
       >
         <Step.Header
           title='Configure Okta Workforce'

packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx

@@ -9,8 +9,8 @@ export const ConfirmationStep = (): JSX.Element => {
   return (
     <Flow.Part part='sso-confirmation'>
       <Step
-        elementDescriptor={descriptors.configureSSOWizardBody}
-        elementId={descriptors.configureSSOWizardBody.setId('confirmation')}
+        elementDescriptor={descriptors.configureSSOStep}
+        elementId={descriptors.configureSSOStep.setId('confirmation')}
       >
         <Step.Body>
           <Step.Section

packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx

@@ -9,8 +9,8 @@ export const SelectProviderStep = (): JSX.Element => {
   return (
     <Flow.Part part='selectProvider'>
       <Step
-        elementDescriptor={descriptors.configureSSOWizardBody}
-        elementId={descriptors.configureSSOWizardBody.setId('select-provider')}
+        elementDescriptor={descriptors.configureSSOStep}
+        elementId={descriptors.configureSSOStep.setId('select-provider')}
       >
         <Step.Header
           title='Select provider'

packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx

@@ -9,8 +9,8 @@ export const TestConfigurationStep = (): JSX.Element => {
   return (
     <Flow.Part part='test-sso'>
       <Step
-        elementDescriptor={descriptors.configureSSOWizardBody}
-        elementId={descriptors.configureSSOWizardBody.setId('test')}
+        elementDescriptor={descriptors.configureSSOStep}
+        elementId={descriptors.configureSSOStep.setId('test')}
       >
         <Step.Header
           title='Test your SSO connection'

packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx

@@ -12,8 +12,8 @@ export const VerifyDomainStep = (): JSX.Element => {
   return (
     <Flow.Part part='verifyDomain'>
       <Step
-        elementDescriptor={descriptors.configureSSOWizardBody}
-        elementId={descriptors.configureSSOWizardBody.setId('verify-domain')}
+        elementDescriptor={descriptors.configureSSOStep}
+        elementId={descriptors.configureSSOStep.setId('verify-domain')}
       >
         <Wizard>
           <Step.Header

packages/ui/src/customizables/elementDescriptors.ts

@@ -536,15 +536,17 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'enterpriseConnectionButton',
   'enterpriseConnectionButtonText',
 
-  'configureSSOWizardHeader',
-  'configureSSOWizardHeaderItem',
-  'configureSSOWizardHeaderItemBullet',
-  'configureSSOWizardHeaderItemLabel',
-  'configureSSOWizardHeaderSeparator',
-  'configureSSOWizardBody',
-  'configureSSOWizardStepIndicator',
-  'configureSSOWizardFooterPreviousButton',
-  'configureSSOWizardFooterContinueButton',
+  'configureSSOHeader',
+  'configureSSOStepper',
+  'configureSSOStepperItem',
+  'configureSSOStepperItemBullet',
+  'configureSSOStepperItemLabel',
+  'configureSSOStepperSeparator',
+  'configureSSOStep',
+  'configureSSOStepCounter',
+  'configureSSOFooter',
+  'configureSSOFooterPreviousButton',
+  'configureSSOFooterContinueButton',
 
   'web3SolanaWalletButtonsRoot',
   'web3SolanaWalletButtons',

packages/ui/src/internal/appearance.ts

@@ -672,15 +672,17 @@ export type ElementsConfig = {
   enterpriseConnectionButton: WithOptions;
   enterpriseConnectionButtonText: WithOptions;
 
-  configureSSOWizardHeader: WithOptions;
-  configureSSOWizardHeaderItem: WithOptions<string, ActiveState>;
-  configureSSOWizardHeaderItemBullet: WithOptions<string, ActiveState>;
-  configureSSOWizardHeaderItemLabel: WithOptions<string>;
-  configureSSOWizardHeaderSeparator: WithOptions;
-  configureSSOWizardBody: WithOptions<string>;
-  configureSSOWizardStepIndicator: WithOptions;
-  configureSSOWizardFooterPreviousButton: WithOptions;
-  configureSSOWizardFooterContinueButton: WithOptions;
+  configureSSOHeader: WithOptions;
+  configureSSOStepper: WithOptions;
+  configureSSOStepperItem: WithOptions<string, ActiveState>;
+  configureSSOStepperItemBullet: WithOptions<string, ActiveState>;
+  configureSSOStepperItemLabel: WithOptions<string>;
+  configureSSOStepperSeparator: WithOptions;
+  configureSSOStep: WithOptions<string>;
+  configureSSOStepCounter: WithOptions;
+  configureSSOFooter: WithOptions;
+  configureSSOFooterPreviousButton: WithOptions;
+  configureSSOFooterContinueButton: WithOptions;
 
   web3SolanaWalletButtonsRoot: WithOptions;
   web3SolanaWalletButtons: WithOptions;