Add protect as children of content

Author: LauraBeatris

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

@@ -58,9 +58,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
             flex: 1,
           })}
         >
-          <ConfigureSSOProtect>
-            <ConfigureSSOContent contentRef={contentRef} />
-          </ConfigureSSOProtect>
+          <ConfigureSSOContent contentRef={contentRef} />
         </Col>
       </ConfigureSSONavbar>
     </ProfileCard.Root>
@@ -86,16 +84,18 @@ export const ConfigureSSOContent = ({ contentRef }: { contentRef: React.RefObjec
   }
 
   return (
-    <ConfigureSSOProvider
-      hasSuccessfulTestRun={hasSuccessfulTestRun}
-      enterpriseConnection={enterpriseConnection}
-      contentRef={contentRef}
-      createEnterpriseConnection={createEnterpriseConnection}
-      updateEnterpriseConnection={updateEnterpriseConnection}
-      deleteEnterpriseConnection={deleteEnterpriseConnection}
-    >
-      <ConfigureSSOSteps />
-    </ConfigureSSOProvider>
+    <ConfigureSSOProtect>
+      <ConfigureSSOProvider
+        hasSuccessfulTestRun={hasSuccessfulTestRun}
+        enterpriseConnection={enterpriseConnection}
+        contentRef={contentRef}
+        createEnterpriseConnection={createEnterpriseConnection}
+        updateEnterpriseConnection={updateEnterpriseConnection}
+        deleteEnterpriseConnection={deleteEnterpriseConnection}
+      >
+        <ConfigureSSOSteps />
+      </ConfigureSSOProvider>
+    </ConfigureSSOProtect>
   );
 };
 
@@ -151,7 +151,7 @@ const ConfigureSSOSteps = () => {
   );
 };
 
-export const ConfigureSSOProtect = ({ children }: { children: React.ReactNode }) => {
+const ConfigureSSOProtect = ({ children }: { children: React.ReactNode }) => {
   const { session } = useSession();
   const isPersonalWorkspace = !session?.lastActiveOrganizationId;
   const canManageEnterpriseConnections = useProtect(

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

@@ -1,7 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useRef } from 'react';
 
-import { ConfigureSSOContent, ConfigureSSOProtect } from '../ConfigureSSO/ConfigureSSO';
+import { ConfigureSSOContent } from '../ConfigureSSO/ConfigureSSO';
 
 export const OrganizationSelfServeSSOPage = () => {
   const { organization } = useOrganization();
@@ -12,9 +12,5 @@ export const OrganizationSelfServeSSOPage = () => {
     return null;
   }
 
-  return (
-    <ConfigureSSOProtect>
-      <ConfigureSSOContent contentRef={contentRef} />
-    </ConfigureSSOProtect>
-  );
+  return <ConfigureSSOContent contentRef={contentRef} />;
 };

packages/ui/src/components/OrganizationProfile/__tests__/OrganizationProfile.test.tsx

@@ -539,7 +539,7 @@ describe('OrganizationProfile', () => {
     });
 
     it('includes SSO even when the user does not have the manage enterprise connections permission, but the page surfaces a warning', async () => {
-      const { wrapper } = await createFixtures(f => {
+      const { wrapper, fixtures } = await createFixtures(f => {
         f.withEnterpriseSso({ selfServeSSO: true });
         f.withOrganizations();
         f.withUser({
@@ -554,14 +554,16 @@ describe('OrganizationProfile', () => {
         });
       });
 
+      fixtures.clerk.user?.getEnterpriseConnections.mockResolvedValue([]);
+
       render(<OrganizationProfile />, { wrapper });
       expect(await screen.findByText('Single Sign-On (SSO)')).toBeDefined();
 
       cleanup();
       render(<OrganizationSelfServeSSOPage />, { wrapper });
-      expect(await screen.findByText(/you do not have permission to manage enterprise connections/i)).toBeDefined();
+      expect(await screen.findByText(/you do not have permission to manage single sign-on/i)).toBeDefined();
       expect(
-        screen.queryByText(/contact your organization administrator in order to have permissions/i),
+        screen.queryByText(/contact your organization.*administrator to upgrade your permissions/i),
       ).toBeInTheDocument();
     });
   });