refactor(ui): single-source the enterprise connection query in ConfigureSSO

- Hoist the __internal_useUserEnterpriseConnections call to ConfigureSSOCardContent
  so the provider receives the data and the create mutation as props instead of
  calling the hook a second time
- Drop the unused isLoading from the provider surface; the load gate upstream
  already consumes it
- Rename ConfigureSSOFlowProvider → ConfigureSSOProvider, useConfigureSSOFlow →
  useConfigureSSO, drop the leftover "Flow" suffix

Author: iagodahlem

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

@@ -10,7 +10,7 @@ import { ProfileCard } from '@/elements/ProfileCard';
 import { ExclamationTriangle } from '@/icons';
 import { Route, Switch } from '@/router';
 
-import { ConfigureSSOFlowProvider, useConfigureSSOFlow } from './ConfigureSSOContext';
+import { ConfigureSSOProvider, useConfigureSSO } from './ConfigureSSOContext';
 import { ConfigureSSOHeader } from './ConfigureSSOHeader';
 import { ConfigureSSONavbar } from './ConfigureSSONavbar';
 import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';
@@ -64,8 +64,11 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 });
 
 const ConfigureSSOCardContent = () => {
-  const { data: enterpriseConnections, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });
-
+  const {
+    data: enterpriseConnections,
+    isLoading,
+    createEnterpriseConnection,
+  } = __internal_useUserEnterpriseConnections({ enabled: true });
   // Currently FAPI only supports one enterprise connection per user
   const enterpriseConnection = enterpriseConnections?.[0];
 
@@ -74,17 +77,17 @@ const ConfigureSSOCardContent = () => {
   }
 
   return (
-    <ConfigureSSOFlowProvider
+    <ConfigureSSOProvider
       enterpriseConnection={enterpriseConnection}
-      isLoading={isLoading}
+      createEnterpriseConnection={createEnterpriseConnection}
     >
       <ConfigureSSOSteps />
-    </ConfigureSSOFlowProvider>
+    </ConfigureSSOProvider>
   );
 };
 
 const ConfigureSSOSteps = () => {
-  const { initialStepId } = useConfigureSSOFlow();
+  const { initialStepId } = useConfigureSSO();
 
   return (
     <Wizard initialStepId={initialStepId}>

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

@@ -1,5 +1,5 @@
-import { __internal_useUserEnterpriseConnections, useReverification, useSession, useUser } from '@clerk/shared/react';
-import type { EnterpriseConnectionResource } from '@clerk/shared/types';
+import { useReverification, useSession, useUser } from '@clerk/shared/react';
+import type { CreateMeEnterpriseConnectionParams, EnterpriseConnectionResource } from '@clerk/shared/types';
 import React, { type PropsWithChildren } from 'react';
 
 import { deriveInitialStep } from './deriveInitialStep';
@@ -14,10 +14,6 @@ export interface ConfigureSSOData {
    * The enterprise connection from the user's primary email address domain
    */
   enterpriseConnection: EnterpriseConnectionResource | undefined;
-  /**
-   * Whether the underlying enterprise connection data is still loading
-   */
-  isLoading: boolean;
   /**
    * The provider selected for this configuration. Reads from the existing
    * enterprise connection when present, falling back to the local selection
@@ -37,27 +33,27 @@ export interface ConfigureSSOData {
   createConnection: (provider: ProviderType) => Promise<void>;
 }
 
-interface ConfigureSSOFlowProviderProps {
+interface ConfigureSSOProviderProps {
   enterpriseConnection: EnterpriseConnectionResource | undefined;
-  isLoading?: boolean;
+  createEnterpriseConnection: (
+    params: CreateMeEnterpriseConnectionParams,
+  ) => Promise<EnterpriseConnectionResource | undefined>;
 }
 
-const ConfigureSSOFlowContext = React.createContext<ConfigureSSOData | null>(null);
-ConfigureSSOFlowContext.displayName = 'ConfigureSSOFlowContext';
+const ConfigureSSOContext = React.createContext<ConfigureSSOData | null>(null);
+ConfigureSSOContext.displayName = 'ConfigureSSOContext';
 
-export const ConfigureSSOFlowProvider = ({
+export const ConfigureSSOProvider = ({
   enterpriseConnection,
-  isLoading = false,
+  createEnterpriseConnection,
   children,
-}: PropsWithChildren<ConfigureSSOFlowProviderProps>): JSX.Element => {
+}: PropsWithChildren<ConfigureSSOProviderProps>): JSX.Element => {
   const { user } = useUser();
   const { session } = useSession();
   const [provider, setProvider] = React.useState<ProviderType | undefined>(
     enterpriseConnection?.provider as ProviderType,
   );
 
-  const { createEnterpriseConnection } = __internal_useUserEnterpriseConnections();
-
   const initialStepId = deriveInitialStep(enterpriseConnection);
 
   const createConnectionFetcher = React.useCallback(
@@ -87,21 +83,20 @@ export const ConfigureSSOFlowProvider = ({
     () => ({
       initialStepId,
       enterpriseConnection,
-      isLoading,
       provider,
       setProvider,
       createConnection,
     }),
-    [initialStepId, enterpriseConnection, isLoading, provider, createConnection],
+    [initialStepId, enterpriseConnection, provider, createConnection],
   );
 
-  return <ConfigureSSOFlowContext.Provider value={value}>{children}</ConfigureSSOFlowContext.Provider>;
+  return <ConfigureSSOContext.Provider value={value}>{children}</ConfigureSSOContext.Provider>;
 };
 
-export const useConfigureSSOFlow = (): ConfigureSSOData => {
-  const ctx = React.useContext(ConfigureSSOFlowContext);
+export const useConfigureSSO = (): ConfigureSSOData => {
+  const ctx = React.useContext(ConfigureSSOContext);
   if (!ctx) {
-    throw new Error('useConfigureSSOFlow called outside <ConfigureSSOFlowProvider>.');
+    throw new Error('useConfigureSSO called outside <ConfigureSSOProvider>.');
   }
   return ctx;
 };

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

@@ -17,7 +17,7 @@ import { useCardState } from '@/elements/contexts';
 import { Alert } from '@/ui/elements/Alert';
 import { handleError } from '@/utils/errorHandler';
 
-import { useConfigureSSOFlow } from '../ConfigureSSOContext';
+import { useConfigureSSO } from '../ConfigureSSOContext';
 import { Step } from '../elements/Step';
 import { useWizard } from '../elements/Wizard';
 import type { ProviderType } from '../types';
@@ -44,7 +44,7 @@ const PROVIDER_GROUPS: ReadonlyArray<{
 export const SelectProviderStep = (): JSX.Element => {
   const card = useCardState();
   const { goNext, isLastStep } = useWizard();
-  const { setProvider, createConnection } = useConfigureSSOFlow();
+  const { setProvider, createConnection } = useConfigureSSO();
   const [selected, setSelected] = React.useState<ProviderType | null>(null);
 
   const handleContinue = async () => {

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

@@ -31,9 +31,8 @@ const clearProvider = vi.fn();
 const createConnection = vi.fn();
 
 vi.mock('../../ConfigureSSOContext', () => ({
-  useConfigureSSOFlow: () => ({
+  useConfigureSSO: () => ({
     enterpriseConnection: undefined,
-    isLoading: false,
     provider: undefined,
     setProvider,
     clearProvider,