Move Wizard to ConfigureSSO folder

Author: LauraBeatris

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

@@ -8,12 +8,12 @@ import { ApplicationLogo } from '@/elements/ApplicationLogo';
 import { withCardStateProvider } from '@/elements/contexts';
 import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
 import { ProfileCard } from '@/elements/ProfileCard';
-import { Wizard } from '@/elements/Wizard';
 import { BoxIcon } from '@/icons';
 import { Route, Switch } from '@/router';
 
-import { ConfigureSSOFlowProvider, useConfigureSSOFlow } from './ConfigureSSOContext';
+import { ConfigureSSOFlowProvider } from './ConfigureSSOContext';
 import { CONFIGURE_SSO_STEPS } from './constants';
+import { ConfigureSSOWizard } from './wizard';
 
 const ConfigureSSOInternal = () => {
   return (
@@ -117,30 +117,18 @@ const AuthenticatedContent = withCoreUserGuard(() => {
             enterpriseConnection={enterpriseConnection}
             isLoading={isLoadingEnterpriseConnections}
           >
-            <ConfigureSSOWizardPanel />
+            <ConfigureSSOWizard.Root steps={CONFIGURE_SSO_STEPS}>
+              <ConfigureSSOWizard.Header />
+              <ConfigureSSOWizard.Content />
+              <ConfigureSSOWizard.Footer />
+            </ConfigureSSOWizard.Root>
           </ConfigureSSOFlowProvider>
         </Col>
       </NavbarContextProvider>
     </ProfileCard.Root>
   );
 });
 
-const ConfigureSSOWizardPanel = () => {
-  const data = useConfigureSSOFlow();
-
-  return (
-    <Wizard.Root
-      steps={CONFIGURE_SSO_STEPS}
-      data={data}
-      isLoading={data.isLoading}
-    >
-      <Wizard.Header />
-      <Wizard.Content />
-      <Wizard.Footer />
-    </Wizard.Root>
-  );
-};
-
 const OrganizationSidebarSubtitle = () => {
   const { organization } = useOrganization();
 

packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx

@@ -4,8 +4,8 @@ import React, { type PropsWithChildren } from 'react';
 
 /**
  * Shared form state for the ConfigureSSO wizard, persisted across step
- * route mounts and exposed to `WizardStep.shouldSkip` via `Wizard.Root`'s
- * `data` prop
+ * route mounts. Sourced by the wizard via `useConfigureSSOFlow()` and
+ * passed to each step's `shouldSkip` predicate
  */
 export interface ConfigureSSOData {
   /**

packages/ui/src/components/ConfigureSSO/constants.ts

@@ -1,6 +1,3 @@
-import type { WizardStep } from '@/elements/Wizard';
-
-import type { ConfigureSSOData } from './ConfigureSSOContext';
 import {
   ConfigureCreateApp,
   ConfigureMapAttributes,
@@ -9,8 +6,9 @@ import {
   TestConfigurationStep,
   VerifyDomain,
 } from './steps';
+import type { ConfigureSSOWizardStep } from './wizard';
 
-export const CONFIGURE_SSO_STEPS: ReadonlyArray<WizardStep<ConfigureSSOData>> = [
+export const CONFIGURE_SSO_STEPS: ReadonlyArray<ConfigureSSOWizardStep> = [
   {
     id: 'verify-email-domain',
     path: 'verify-email-domain',

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

@@ -1,10 +1,10 @@
 import { Flow, Text } from '@/customizables';
-import { useRegisterContinueAction, useWizard } from '@/elements/Wizard';
 
+import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
 import { StepLayout } from './StepLayout';
 
 export const ConfigureCreateApp = (): JSX.Element => {
-  const { goNext } = useWizard();
+  const { goNext } = useConfigureSSOWizard();
 
   useRegisterContinueAction({
     handler: () => goNext(),

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

@@ -1,10 +1,10 @@
 import { Flow, Text } from '@/customizables';
-import { useRegisterContinueAction, useWizard } from '@/elements/Wizard';
 
+import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
 import { StepLayout } from './StepLayout';
 
 export const ConfigureMapAttributes = (): JSX.Element => {
-  const { goNext } = useWizard();
+  const { goNext } = useConfigureSSOWizard();
 
   useRegisterContinueAction({
     handler: () => goNext(),

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

@@ -1,10 +1,10 @@
 import { Flow, Text } from '@/customizables';
-import { useRegisterContinueAction, useWizard } from '@/elements/Wizard';
 
+import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
 import { StepLayout } from './StepLayout';
 
 export const ProvideEmail = (): JSX.Element => {
-  const { goNext } = useWizard();
+  const { goNext } = useConfigureSSOWizard();
 
   useRegisterContinueAction({
     handler: () => {

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

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { Col, Flex, Heading, Text } from '@/customizables';
-import { Wizard } from '@/elements/Wizard';
+
+import { ConfigureSSOWizard } from '../wizard';
 
 interface StepLayoutProps {
   title?: React.ReactNode;
@@ -13,8 +14,8 @@ interface StepLayoutProps {
  * Renders the title row (with the Wizard's Step X/Y badge) on top, a divider, and the step body
  * underneath. Each individual step file owns the body content
  *
- * The Step X/Y badge is rendered via `Wizard.StepIndicator`, which
- * self-hides on steps that have no inner sub-steps
+ * The Step X/Y badge is rendered via `ConfigureSSOWizard.StepIndicator`,
+ * which self-hides on steps that have no inner sub-steps
  */
 export const StepLayout = ({ title, subtitle, children }: StepLayoutProps): JSX.Element => {
   return (
@@ -52,7 +53,7 @@ export const StepLayout = ({ title, subtitle, children }: StepLayoutProps): JSX.
             ) : null}
           </Col>
         ) : null}
-        <Wizard.StepIndicator />
+        <ConfigureSSOWizard.StepIndicator />
       </Flex>
       <Col
         sx={theme => ({

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

@@ -1,10 +1,10 @@
 import { Flow, Text } from '@/customizables';
-import { useRegisterContinueAction, useWizard } from '@/elements/Wizard';
 
+import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
 import { StepLayout } from './StepLayout';
 
 export const VerifyDomain = (): JSX.Element => {
-  const { goNext } = useWizard();
+  const { goNext } = useConfigureSSOWizard();
 
   useRegisterContinueAction({
     handler: () => goNext(),

…ckages/ui/src/elements/Wizard/Wizard.tsx …nfigureSSO/wizard/ConfigureSSOWizard.tsxpackages/ui/src/elements/Wizard/Wizard.tsx renamed to packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx packages/ui/src/elements/Wizard/Wizard.tsx renamed to packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx

@@ -4,38 +4,35 @@ import { Badge, Box, Button, descriptors, Flex, Icon, Spinner, Text, useLocaliza
 import { CaretLeft, CaretRight } from '@/icons';
 import { Route, Switch, useRouter } from '@/router';
 
-import type { WizardInnerStep, WizardStep } from './types';
-import { useWizard, WizardProvider } from './WizardContext';
+import { useConfigureSSOFlow } from '../ConfigureSSOContext';
+import { ConfigureSSOWizardProvider, useConfigureSSOWizard } from './ConfigureSSOWizardContext';
+import type { ConfigureSSOWizardInnerStep, ConfigureSSOWizardStep } from './types';
 
-interface WizardRootProps<TData = unknown> {
-  steps: ReadonlyArray<WizardStep<TData>>;
-  /**
-   * Optional data passed to each step's `shouldSkip` predicate. When the
-   * referenced shape changes, the active step list is recomputed
-   */
-  data?: TData;
-  /**
-   * `true` while the parent flow is still loading async dependencies.
-   * The header renders a skeleton breadcrumb, the content renders a
-   * centered spinner, and the footer's buttons are disabled
-   */
-  isLoading?: boolean;
+interface ConfigureSSOWizardRootProps {
+  steps: ReadonlyArray<ConfigureSSOWizardStep>;
   children: React.ReactNode;
 }
 
-const Root = <TData,>(props: WizardRootProps<TData>): JSX.Element => {
-  const { steps, data, isLoading = false, children } = props;
+/**
+ * Top-level wizard scaffold for the ConfigureSSO flow. Sources its
+ * `data` and `isLoading` from `useConfigureSSOFlow()` directly, so it
+ * must be rendered inside `<ConfigureSSOFlowProvider>`
+ */
+const Root = (props: ConfigureSSOWizardRootProps): JSX.Element => {
+  const { steps, children } = props;
   const router = useRouter();
+  const data = useConfigureSSOFlow();
+  const { isLoading } = data;
 
-  const activeSteps = React.useMemo(() => steps.filter(s => !s.shouldSkip?.(data as TData)), [steps, data]);
+  const activeSteps = React.useMemo(() => steps.filter(s => !s.shouldSkip?.(data)), [steps, data]);
 
   const getActiveInnerSteps = React.useCallback(
-    (step: WizardStep<TData> | undefined): WizardInnerStep<TData>[] =>
-      step?.innerSteps?.filter(s => !s.shouldSkip?.(data as TData)) ?? [],
+    (step: ConfigureSSOWizardStep | undefined): ConfigureSSOWizardInnerStep[] =>
+      step?.innerSteps?.filter(s => !s.shouldSkip?.(data)) ?? [],
     [data],
   );
 
-  const currentStep = React.useMemo<WizardStep<TData> | undefined>(() => {
+  const currentStep = React.useMemo<ConfigureSSOWizardStep | undefined>(() => {
     if (activeSteps.length === 0) {
       return undefined;
     }
@@ -57,7 +54,7 @@ const Root = <TData,>(props: WizardRootProps<TData>): JSX.Element => {
   // is the catch-all, the first inner step of any main
   // step is its parent's index route (no segment)
   const buildPath = React.useCallback(
-    (mainStep: WizardStep<TData>, innerStep?: WizardInnerStep<TData>): string => {
+    (mainStep: ConfigureSSOWizardStep, innerStep?: ConfigureSSOWizardInnerStep): string => {
       const inners = getActiveInnerSteps(mainStep);
       const target = innerStep ?? inners[0];
       const isFirstMain = activeSteps[0]?.id === mainStep.id;
@@ -68,7 +65,7 @@ const Root = <TData,>(props: WizardRootProps<TData>): JSX.Element => {
     [activeSteps, getActiveInnerSteps],
   );
 
-  const currentInnerStep = React.useMemo<WizardInnerStep<TData> | undefined>(() => {
+  const currentInnerStep = React.useMemo<ConfigureSSOWizardInnerStep | undefined>(() => {
     if (!currentStep || innerSteps.length === 0) {
       return undefined;
     }
@@ -82,7 +79,7 @@ const Root = <TData,>(props: WizardRootProps<TData>): JSX.Element => {
   }, [currentStep, innerSteps, router, buildPath]);
 
   const navigateTo = React.useCallback(
-    (mainStep: WizardStep<TData> | undefined, innerStep?: WizardInnerStep<TData>) =>
+    (mainStep: ConfigureSSOWizardStep | undefined, innerStep?: ConfigureSSOWizardInnerStep) =>
       mainStep ? router.navigate(buildPath(mainStep, innerStep)) : undefined,
     [router, buildPath],
   );
@@ -128,7 +125,7 @@ const Root = <TData,>(props: WizardRootProps<TData>): JSX.Element => {
   );
 
   return (
-    <WizardProvider
+    <ConfigureSSOWizardProvider
       activeSteps={activeSteps}
       currentStep={currentStep}
       innerSteps={innerSteps}
@@ -139,15 +136,15 @@ const Root = <TData,>(props: WizardRootProps<TData>): JSX.Element => {
       goToStep={goToStep}
     >
       {children}
-    </WizardProvider>
+    </ConfigureSSOWizardProvider>
   );
 };
 
 /**
  * Renders a container step's inner sub-routes, or falls back to the
  * step's own `Component` for leaf steps
  */
-const StepRoutes = <TData,>({ step }: { step: WizardStep<TData> }): JSX.Element | null => {
+const StepRoutes = ({ step }: { step: ConfigureSSOWizardStep }): JSX.Element | null => {
   const Component = step.Component;
   if (!step.innerSteps?.length) {
     return Component ? <Component /> : null;
@@ -176,7 +173,7 @@ const StepRoutes = <TData,>({ step }: { step: WizardStep<TData> }): JSX.Element
  * doesn't match another main step (e.g. its own inner-step paths)
  */
 const Content = (): JSX.Element | null => {
-  const { activeSteps, isLoading } = useWizard();
+  const { activeSteps, isLoading } = useConfigureSSOWizard();
 
   if (isLoading) {
     return (
@@ -222,7 +219,7 @@ const Content = (): JSX.Element | null => {
  * are clickable for backwards navigation, future steps are disabled
  */
 const Header = (): JSX.Element => {
-  const { activeSteps, currentIndex, isLoading, goToStep } = useWizard();
+  const { activeSteps, currentIndex, isLoading, goToStep } = useConfigureSSOWizard();
   const { t } = useLocalizations();
 
   return (
@@ -335,7 +332,7 @@ const SkeletonBreadcrumbStep = (): JSX.Element => (
  * need to reserve room for it
  */
 const StepIndicator = (): JSX.Element | null => {
-  const { totalInnerSteps, currentInnerIndex } = useWizard();
+  const { totalInnerSteps, currentInnerIndex } = useConfigureSSOWizard();
 
   if (totalInnerSteps <= 0 || currentInnerIndex < 0) {
     return null;
@@ -391,7 +388,7 @@ interface FooterProps {
  */
 const Footer = (props: FooterProps): JSX.Element => {
   const { previousLabel = 'Previous', continueLabel = 'Continue', hidePrevious = false, isDisabled = false } = props;
-  const { isFirstStep, isLastStep, isLoading, goPrev, goNext, continueAction } = useWizard();
+  const { isFirstStep, isLastStep, isLoading, goPrev, goNext, continueAction } = useConfigureSSOWizard();
   const isForceDisabled = isDisabled || isLoading;
   const { t } = useLocalizations();
 
@@ -457,7 +454,7 @@ const Footer = (props: FooterProps): JSX.Element => {
   );
 };
 
-export const Wizard = {
+export const ConfigureSSOWizard = {
   Root,
   Header,
   Content,

…ui/src/elements/Wizard/WizardContext.tsx …SSO/wizard/ConfigureSSOWizardContext.tsxpackages/ui/src/elements/Wizard/WizardContext.tsx renamed to packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsx packages/ui/src/elements/Wizard/WizardContext.tsx renamed to packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsx

@@ -1,33 +1,38 @@
 import React from 'react';
 
-import type { ContinueAction, WizardContextValue, WizardInnerStep, WizardStep } from './types';
+import type {
+  ConfigureSSOWizardContextValue,
+  ConfigureSSOWizardInnerStep,
+  ConfigureSSOWizardStep,
+  ContinueAction,
+} from './types';
 
-const WizardContext = React.createContext<WizardContextValue<any> | null>(null);
-WizardContext.displayName = 'WizardContext';
+const ConfigureSSOWizardContext = React.createContext<ConfigureSSOWizardContextValue | null>(null);
+ConfigureSSOWizardContext.displayName = 'ConfigureSSOWizardContext';
 
-export function useWizard<TData = unknown>(): WizardContextValue<TData> {
-  const ctx = React.useContext(WizardContext);
+export function useConfigureSSOWizard(): ConfigureSSOWizardContextValue {
+  const ctx = React.useContext(ConfigureSSOWizardContext);
 
   if (!ctx) {
-    throw new Error('useWizard called outside of <Wizard.Root>');
+    throw new Error('useConfigureSSOWizard called outside of <ConfigureSSOWizard.Root>');
   }
 
-  return ctx as WizardContextValue<TData>;
+  return ctx;
 }
 
-interface WizardProviderProps<TData> {
-  activeSteps: WizardStep<TData>[];
-  currentStep: WizardStep<TData> | undefined;
-  innerSteps: WizardInnerStep<TData>[];
-  currentInnerStep: WizardInnerStep<TData> | undefined;
+interface ConfigureSSOWizardProviderProps {
+  activeSteps: ConfigureSSOWizardStep[];
+  currentStep: ConfigureSSOWizardStep | undefined;
+  innerSteps: ConfigureSSOWizardInnerStep[];
+  currentInnerStep: ConfigureSSOWizardInnerStep | undefined;
   isLoading: boolean;
-  goNext: WizardContextValue<TData>['goNext'];
-  goPrev: WizardContextValue<TData>['goPrev'];
-  goToStep: WizardContextValue<TData>['goToStep'];
+  goNext: ConfigureSSOWizardContextValue['goNext'];
+  goPrev: ConfigureSSOWizardContextValue['goPrev'];
+  goToStep: ConfigureSSOWizardContextValue['goToStep'];
   children: React.ReactNode;
 }
 
-export function WizardProvider<TData>(props: WizardProviderProps<TData>): JSX.Element {
+export function ConfigureSSOWizardProvider(props: ConfigureSSOWizardProviderProps): JSX.Element {
   const { activeSteps, currentStep, innerSteps, currentInnerStep, isLoading, goNext, goPrev, goToStep, children } =
     props;
 
@@ -38,7 +43,7 @@ export function WizardProvider<TData>(props: WizardProviderProps<TData>): JSX.El
     setContinueAction(undefined);
   }, [currentStep?.id, currentInnerStep?.id]);
 
-  const value = React.useMemo<WizardContextValue<TData>>(() => {
+  const value = React.useMemo<ConfigureSSOWizardContextValue>(() => {
     const currentIndex = currentStep ? activeSteps.findIndex(s => s.id === currentStep.id) : -1;
     const currentInnerIndex = currentInnerStep ? innerSteps.findIndex(s => s.id === currentInnerStep.id) : -1;
     const totalInnerSteps = innerSteps.length;
@@ -68,14 +73,14 @@ export function WizardProvider<TData>(props: WizardProviderProps<TData>): JSX.El
     };
   }, [activeSteps, currentStep, innerSteps, currentInnerStep, isLoading, goNext, goPrev, goToStep, continueAction]);
 
-  return <WizardContext.Provider value={value}>{children}</WizardContext.Provider>;
+  return <ConfigureSSOWizardContext.Provider value={value}>{children}</ConfigureSSOWizardContext.Provider>;
 }
 
 /**
  * Helper for step components that need to register a Continue action
  */
 export function useRegisterContinueAction(action: ContinueAction | undefined): void {
-  const { setContinueAction } = useWizard();
+  const { setContinueAction } = useConfigureSSOWizard();
 
   const handlerRef = React.useRef<ContinueAction['handler'] | undefined>(action?.handler);
   handlerRef.current = action?.handler;