Create connection for organization

Author: LauraBeatris

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

@@ -52,14 +52,17 @@ const AuthenticatedContent = withCoreUserGuard(() => {
   const { organizationSettings } = useEnvironment();
   const { parsedOptions } = useAppearance();
   const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
+  const { organization } = useOrganization();
 
   // Gate the entire wizard behind the org-level permission. When the
   // user can't manage enterprise connections, we still render the
   // outer sidebar/title chrome but replace the wizard with a
   // permissions-error message so the layout stays consistent
-  const canManageEnterpriseConnections = useProtect({
-    permission: 'org:sys_enterprise_connections:manage',
-  });
+  const canManageEnterpriseConnections =
+    !!organization &&
+    useProtect({
+      permission: 'org:sys_enterprise_connections:manage',
+    });
 
   const {
     data: enterpriseConnections,
@@ -69,7 +72,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
     deleteEnterpriseConnection,
     revalidate: revalidateEnterpriseConnections,
   } = __internal_useUserEnterpriseConnections({
-    enabled: canManageEnterpriseConnections,
+    enabled: true,
   });
   // Currently FAPI only supports one enterprise connection per user
   const enterpriseConnection = enterpriseConnections?.[0];
@@ -148,7 +151,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
             flex: 1,
           })}
         >
-          {canManageEnterpriseConnections ? (
+          {canManageEnterpriseConnections || !organization ? (
             <ConfigureSSOFlowProvider
               enterpriseConnection={enterpriseConnection}
               isLoading={isLoadingEnterpriseConnections}
@@ -185,6 +188,7 @@ const ConfigureSSOSteps = () => {
           id='select-provider'
           path='select-provider'
           label='Select provider'
+          hideFromBreadcrumb
         >
           <SelectProviderStep />
         </ConfigureSSOWizard.Step>

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

@@ -1,4 +1,4 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { Box, Button, Col, descriptors, Flex, Flow, Icon, Input, Spinner, Text } from '@/customizables';
@@ -19,6 +19,7 @@ export const ConfigureCreateApp = (): JSX.Element => {
     useConfigureSSOFlow();
   const { user } = useUser();
   const card = useCardState();
+  const { organization } = useOrganization();
 
   const primaryEmail = user?.primaryEmailAddress?.emailAddress ?? '';
   const emailDomain = getEmailDomain(primaryEmail);
@@ -51,6 +52,7 @@ export const ConfigureCreateApp = (): JSX.Element => {
     createEnterpriseConnection({
       provider: selectedProvider,
       name: emailDomain,
+      organizationId: organization?.id,
     })
       .catch(err => handleError(err as Error, [], card.setError))
       .finally(() => setIsCreating(false));

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

@@ -154,7 +154,7 @@ export const VerifyDomainStep = (): JSX.Element | null => {
                   variant='body'
                   sx={t => ({ color: t.colors.$colorMutedForeground })}
                 >
-                  Contact the application's administrator to get access through the existing connection.
+                  Contact the application's administrator to get access through the existing connection.
                 </Text>
               </Col>
             </>

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

@@ -55,6 +55,7 @@ function extractSteps(children: React.ReactNode): ConfigureSSOWizardActiveStep[]
       path: props.path,
       label: props.label,
       isCompleted: props.isCompleted,
+      hideFromBreadcrumb: props.hideFromBreadcrumb,
       children: props.children,
     });
   });
@@ -265,12 +266,16 @@ const StepBody = ({ step }: { step: ConfigureSSOWizardActiveStep }): JSX.Element
 /**
  * Numbered breadcrumb of the outermost wizard's active steps.
  * Completed and current steps are clickable for backwards navigation,
- * future steps are disabled
+ * future steps are disabled. Steps marked with `hideFromBreadcrumb`
+ * are silently skipped over and the visible steps are renumbered, so
+ * dropping a hidden step from the wizard later doesn't shift numbers
  */
 const Header = (): JSX.Element => {
   const { activeSteps, currentIndex, isLoading, goToStep } = useConfigureSSOWizard();
   const { t } = useLocalizations();
 
+  const visibleSteps = React.useMemo(() => activeSteps.filter(s => !s.hideFromBreadcrumb), [activeSteps]);
+
   return (
     <Flex
       elementDescriptor={descriptors.configureSSOWizardHeader}
@@ -284,10 +289,15 @@ const Header = (): JSX.Element => {
         flexWrap: 'wrap',
       })}
     >
-      {activeSteps.map((step, index) => {
-        const isCurrent = index === currentIndex;
-        const isCompleted = step.isCompleted ?? index < currentIndex;
-        const isReachable = isCompleted || index <= currentIndex;
+      {visibleSteps.map((step, visibleIndex) => {
+        // `currentIndex` is computed against the full `activeSteps`
+        // list, so look the visible step back up there to keep
+        // current/completed/reachable consistent with the wizard's
+        // own routing state
+        const actualIndex = activeSteps.findIndex(s => s.id === step.id);
+        const isCurrent = actualIndex === currentIndex;
+        const isCompleted = step.isCompleted ?? actualIndex < currentIndex;
+        const isReachable = isCompleted || actualIndex <= currentIndex;
         const labelText = step.label ? (typeof step.label === 'string' ? step.label : t(step.label)) : '';
 
         return (
@@ -342,7 +352,7 @@ const Header = (): JSX.Element => {
                       size='xs'
                     />
                   ) : (
-                    index + 1
+                    visibleIndex + 1
                   )}
                 </Flex>
                 <Text
@@ -356,7 +366,7 @@ const Header = (): JSX.Element => {
                 </Text>
               </Button>
             )}
-            {index < activeSteps.length - 1 && (
+            {visibleIndex < visibleSteps.length - 1 && (
               <Icon
                 elementDescriptor={descriptors.configureSSOWizardHeaderSeparator}
                 icon={CaretRight}

packages/ui/src/components/ConfigureSSO/wizard/types.ts

@@ -31,6 +31,14 @@ export interface ConfigureSSOWizardStepProps {
    * to the current step
    */
   isCompleted?: boolean;
+  /**
+   * Hides this step from the wizard breadcrumb/header while keeping
+   * it routable. Useful for "pre-flight" steps like provider
+   * selection that shouldn't be visible (or clickable) once the user
+   * has moved past them — and to avoid the visible step count
+   * shifting when the step is later dropped from the wizard
+   */
+  hideFromBreadcrumb?: boolean;
   /**
    * The step body. Anything React, including a nested
    * `<ConfigureSSOWizard>` for inner sub-steps
@@ -74,6 +82,7 @@ export interface ConfigureSSOWizardActiveStep {
   path: string;
   label?: LocalizationKey | string;
   isCompleted?: boolean;
+  hideFromBreadcrumb?: boolean;
   children: React.ReactNode;
 }