Render ConfigureSSO content within OrganizationProfile

Author: LauraBeatris

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

@@ -58,16 +58,16 @@ const AuthenticatedContent = withCoreUserGuard(() => {
             flex: 1,
           })}
         >
-          <ConfigureSSOCardProtect>
-            <ConfigureSSOCardContent contentRef={contentRef} />
-          </ConfigureSSOCardProtect>
+          <ConfigureSSOProtect>
+            <ConfigureSSOContent contentRef={contentRef} />
+          </ConfigureSSOProtect>
         </Col>
       </ConfigureSSONavbar>
     </ProfileCard.Root>
   );
 });
 
-const ConfigureSSOCardContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {
+export const ConfigureSSOContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {
   const {
     data: enterpriseConnections,
     isLoading: isLoadingEnterpriseConnections,
@@ -142,7 +142,7 @@ const ConfigureSSOSteps = () => {
   );
 };
 
-const ConfigureSSOCardProtect = ({ children }: { children: React.ReactNode }) => {
+export const ConfigureSSOProtect = ({ children }: { children: React.ReactNode }) => {
   const { session } = useSession();
   const isPersonalWorkspace = !session?.lastActiveOrganizationId;
   const canManageEnterpriseConnections = useProtect(

packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSsoPage.tsx

@@ -1,24 +1,20 @@
 import { useOrganization } from '@clerk/shared/react';
+import { useRef } from 'react';
 
-import { Col } from '@/ui/customizables';
-import { Header } from '@/ui/elements/Header';
+import { ConfigureSSOContent, ConfigureSSOProtect } from '../ConfigureSSO/ConfigureSSO';
 
 export const OrganizationSelfServeSsoPage = () => {
   const { organization } = useOrganization();
+  const contentRef = useRef<HTMLDivElement>(null);
 
   if (!organization) {
     // We should never reach this point, but we'll return null to make TS happy
     return null;
   }
 
   return (
-    <Col gap={4}>
-      <Header.Root>
-        <Header.Title
-          title='Self-Serve SSO'
-          textVariant='h2'
-        />
-      </Header.Root>
-    </Col>
+    <ConfigureSSOProtect>
+      <ConfigureSSOContent contentRef={contentRef} />
+    </ConfigureSSOProtect>
   );
 };