Add element descriptors

Author: LauraBeatris

packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Badge, Box, Button, descriptors, Flex, Icon, Spinner, Text, useLocalizations } from '@/customizables';
+import { Badge, Box, Button, Col, descriptors, Flex, Icon, Spinner, Text, useLocalizations } from '@/customizables';
 import { CaretLeft, CaretRight } from '@/icons';
 import { Route, Switch, useRouter } from '@/router';
 
@@ -241,14 +241,26 @@ const Body = ({ activeSteps }: { activeSteps: ConfigureSSOWizardActiveStep[] }):
           key={step.id}
           path={step.path}
         >
-          {step.children}
+          <StepBody step={step} />
         </Route>
       ))}
-      <Route key={firstStep.id}>{firstStep.children}</Route>
+      <Route key={firstStep.id}>
+        <StepBody step={firstStep} />
+      </Route>
     </Switch>
   );
 };
 
+const StepBody = ({ step }: { step: ConfigureSSOWizardActiveStep }): JSX.Element => (
+  <Col
+    elementDescriptor={descriptors.configureSSOWizardBody}
+    elementId={descriptors.configureSSOWizardBody.setId(step.id)}
+    sx={{ flex: 1, minHeight: 0 }}
+  >
+    {step.children}
+  </Col>
+);
+
 /**
  * Numbered breadcrumb of the outermost wizard's active steps.
  * Completed and current steps are clickable for backwards navigation,
@@ -260,6 +272,7 @@ const Header = (): JSX.Element => {
 
   return (
     <Flex
+      elementDescriptor={descriptors.configureSSOWizardHeader}
       align='center'
       sx={theme => ({
         gap: theme.space.$2,
@@ -282,6 +295,9 @@ const Header = (): JSX.Element => {
               <SkeletonBreadcrumbStep />
             ) : (
               <Button
+                elementDescriptor={descriptors.configureSSOWizardHeaderItem}
+                elementId={descriptors.configureSSOWizardHeaderItem.setId(step.id)}
+                isActive={isCurrent}
                 variant='unstyled'
                 isDisabled={!isReachable}
                 onClick={() => {
@@ -296,6 +312,9 @@ const Header = (): JSX.Element => {
                 })}
               >
                 <Flex
+                  elementDescriptor={descriptors.configureSSOWizardHeaderItemBullet}
+                  elementId={descriptors.configureSSOWizardHeaderItemBullet.setId(step.id)}
+                  isActive={isCurrent}
                   align='center'
                   justify='center'
                   sx={theme => ({
@@ -315,6 +334,8 @@ const Header = (): JSX.Element => {
                   {index + 1}
                 </Flex>
                 <Text
+                  elementDescriptor={descriptors.configureSSOWizardHeaderItemLabel}
+                  elementId={descriptors.configureSSOWizardHeaderItemLabel.setId(step.id)}
                   as='span'
                   variant='body'
                   sx={{ fontWeight: 'inherit', color: 'inherit' }}
@@ -325,6 +346,7 @@ const Header = (): JSX.Element => {
             )}
             {index < activeSteps.length - 1 && (
               <Icon
+                elementDescriptor={descriptors.configureSSOWizardHeaderSeparator}
                 icon={CaretRight}
                 size='sm'
                 sx={theme => ({ color: theme.colors.$colorMutedForeground })}
@@ -374,7 +396,10 @@ const StepIndicator = (): JSX.Element | null => {
   }
 
   return (
-    <Flex sx={{ marginBottom: 'auto' }}>
+    <Flex
+      elementDescriptor={descriptors.configureSSOWizardStepIndicator}
+      sx={{ marginBottom: 'auto' }}
+    >
       <Badge
         colorScheme='primary'
         sx={{
@@ -468,6 +493,7 @@ const Footer = (props: FooterProps): JSX.Element => {
     >
       {!hidePrevious && (
         <Button
+          elementDescriptor={descriptors.configureSSOWizardFooterPreviousButton}
           variant='outline'
           size='sm'
           isDisabled={isForceDisabled || isFirstStep}
@@ -482,6 +508,7 @@ const Footer = (props: FooterProps): JSX.Element => {
         </Button>
       )}
       <Button
+        elementDescriptor={descriptors.configureSSOWizardFooterContinueButton}
         variant='solid'
         size='sm'
         isDisabled={isForceDisabled || continueAction?.isDisabled || isLastStep}

packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsx

@@ -2,20 +2,9 @@ import React from 'react';
 
 import type { ConfigureSSOWizardContextValue, ContinueAction } from './types';
 
-/**
- * Per-wizard context. Each `<ConfigureSSOWizard>` renders one of
- * these, so `useConfigureSSOWizard()` returns the *nearest* wizard.
- * Inner wizards reach their parent via `React.useContext` *before*
- * overriding the provider with their own value
- */
 export const ConfigureSSOWizardContext = React.createContext<ConfigureSSOWizardContextValue | null>(null);
 ConfigureSSOWizardContext.displayName = 'ConfigureSSOWizardContext';
 
-/**
- * Returns the nearest `<ConfigureSSOWizard>`'s API. Inner steps
- * registered inside a nested wizard see the inner wizard's `goNext`,
- * which itself cascades to the parent wizard on overflow
- */
 export function useConfigureSSOWizard(): ConfigureSSOWizardContextValue {
   const ctx = React.useContext(ConfigureSSOWizardContext);
 
@@ -41,9 +30,9 @@ interface WizardChromeRegistry {
   continueAction: ContinueAction | undefined;
   setContinueAction: (action: ContinueAction | undefined) => void;
   /**
-   * Marks a wizard as mounted; called by every `<ConfigureSSOWizard>`
-   * on mount and unmount. Footer-level controls always dispatch to
-   * the deepest wizard in this stack
+   * Marks a wizard as mounted, called by every `<ConfigureSSOWizard>`
+   * on mount and unmount
+   * Footer-level controls always dispatch to the deepest wizard in this stack
    */
   pushWizard: (ref: WizardValueRef) => void;
   popWizard: (ref: WizardValueRef) => void;

packages/ui/src/customizables/elementDescriptors.ts

@@ -536,6 +536,16 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'enterpriseConnectionButton',
   'enterpriseConnectionButtonText',
 
+  'configureSSOWizardHeader',
+  'configureSSOWizardHeaderItem',
+  'configureSSOWizardHeaderItemBullet',
+  'configureSSOWizardHeaderItemLabel',
+  'configureSSOWizardHeaderSeparator',
+  'configureSSOWizardBody',
+  'configureSSOWizardStepIndicator',
+  'configureSSOWizardFooterPreviousButton',
+  'configureSSOWizardFooterContinueButton',
+
   'web3SolanaWalletButtonsRoot',
   'web3SolanaWalletButtons',
   'web3SolanaWalletButtonsIconButton',

packages/ui/src/internal/appearance.ts

@@ -672,6 +672,16 @@ 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;
+
   web3SolanaWalletButtonsRoot: WithOptions;
   web3SolanaWalletButtons: WithOptions;
   web3SolanaWalletButtonsIconButton: WithOptions<string, LoadingState>;