Merge pull request #399 from auth0/feat/sso-hide-prop

rax7389 · web-flow · commit 8758cf1126ca · 2026-07-08T23:08:55.000+05:30
feat(react): add props to hide SSO provider actions
diff --git a/packages/react/src/components/auth0/my-organization/__tests__/sso-provider-edit.test.tsx b/packages/react/src/components/auth0/my-organization/__tests__/sso-provider-edit.test.tsx
@@ -379,6 +379,100 @@ describe('SsoProviderEdit', () => {
     });
   });
 
+  describe('hideProvisioningTab', () => {
+    describe('when is true', () => {
+      it('should not display provisioning tab', async () => {
+        renderWithProviders(
+          <SsoProviderEdit {...createMockSsoProviderEditProps({ hideProvisioningTab: true })} />,
+        );
+
+        await waitForComponentToLoad();
+
+        expect(screen.queryByText(/tabs.provisioning.name/i)).not.toBeInTheDocument();
+      });
+    });
+
+    describe('when is false', () => {
+      it('should display provisioning tab when enabled for strategy', async () => {
+        renderWithProviders(
+          <SsoProviderEdit {...createMockSsoProviderEditProps({ hideProvisioningTab: false })} />,
+        );
+
+        await waitForComponentToLoad();
+
+        expect(screen.queryByText(/tabs.provisioning.name/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('hideDeleteProvider', () => {
+    describe('when is true', () => {
+      it('should not display delete provider button', async () => {
+        renderWithProviders(
+          <SsoProviderEdit {...createMockSsoProviderEditProps({ hideDeleteProvider: true })} />,
+        );
+
+        await waitForComponentToLoad();
+
+        const deleteButtons = screen.queryAllByRole('button', {
+          name: /delete_button_label/i,
+        });
+        expect(deleteButtons.length).toBe(0);
+      });
+    });
+
+    describe('when is false', () => {
+      it('should display delete provider button', async () => {
+        renderWithProviders(
+          <SsoProviderEdit {...createMockSsoProviderEditProps({ hideDeleteProvider: false })} />,
+        );
+
+        await waitForComponentToLoad();
+
+        const deleteButtons = screen.queryAllByRole('button', {
+          name: /delete_button_label/i,
+        });
+        expect(deleteButtons.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('hideRemoveFromOrganization', () => {
+    describe('when is true', () => {
+      it('should not display remove from organization button', async () => {
+        renderWithProviders(
+          <SsoProviderEdit
+            {...createMockSsoProviderEditProps({ hideRemoveFromOrganization: true })}
+          />,
+        );
+
+        await waitForComponentToLoad();
+
+        const removeButtons = screen.queryAllByRole('button', {
+          name: /remove_button_label/i,
+        });
+        expect(removeButtons.length).toBe(0);
+      });
+    });
+
+    describe('when is false', () => {
+      it('should display remove from organization button', async () => {
+        renderWithProviders(
+          <SsoProviderEdit
+            {...createMockSsoProviderEditProps({ hideRemoveFromOrganization: false })}
+          />,
+        );
+
+        await waitForComponentToLoad();
+
+        const removeButtons = screen.queryAllByRole('button', {
+          name: /remove_button_label/i,
+        });
+        expect(removeButtons.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
   describe('sso action props', () => {
     describe('when sso.updateAction is provided', () => {
       it('should call onBefore when toggling provider', async () => {
diff --git a/packages/react/src/components/auth0/my-organization/__tests__/sso-provider-table.test.tsx b/packages/react/src/components/auth0/my-organization/__tests__/sso-provider-table.test.tsx
@@ -809,6 +809,102 @@ describe('SsoProviderTable', () => {
       });
     });
   });
+
+  describe('hideDeleteProvider', () => {
+    describe('when is true', () => {
+      it('should not render delete action in dropdown menu', async () => {
+        const user = userEvent.setup();
+
+        renderTable({ hideDeleteProvider: true });
+
+        await waitForComponentToLoad();
+        await screen.findByText(mockProvider.name!);
+
+        const actionButtons = screen.getAllByRole('button');
+        const rowActionButton = actionButtons.find(
+          (btn) =>
+            btn.querySelector('svg.lucide-more-horizontal') || btn.className.includes('rounded-xl'),
+        );
+        expect(rowActionButton).toBeDefined();
+        await user.click(rowActionButton!);
+
+        expect(
+          screen.queryByRole('menuitem', { name: /table.actions.delete_button_text/i }),
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    describe('when is false', () => {
+      it('should render delete action in dropdown menu', async () => {
+        const user = userEvent.setup();
+
+        renderTable({ hideDeleteProvider: false });
+
+        await waitForComponentToLoad();
+        await screen.findByText(mockProvider.name!);
+
+        const actionButtons = screen.getAllByRole('button');
+        const rowActionButton = actionButtons.find(
+          (btn) =>
+            btn.querySelector('svg.lucide-more-horizontal') || btn.className.includes('rounded-xl'),
+        );
+        expect(rowActionButton).toBeDefined();
+        await user.click(rowActionButton!);
+
+        expect(
+          screen.queryByRole('menuitem', { name: /table.actions.delete_button_text/i }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('hideRemoveFromOrganization', () => {
+    describe('when is true', () => {
+      it('should not render remove from organization action in dropdown menu', async () => {
+        const user = userEvent.setup();
+
+        renderTable({ hideRemoveFromOrganization: true });
+
+        await waitForComponentToLoad();
+        await screen.findByText(mockProvider.name!);
+
+        const actionButtons = screen.getAllByRole('button');
+        const rowActionButton = actionButtons.find(
+          (btn) =>
+            btn.querySelector('svg.lucide-more-horizontal') || btn.className.includes('rounded-xl'),
+        );
+        expect(rowActionButton).toBeDefined();
+        await user.click(rowActionButton!);
+
+        expect(
+          screen.queryByRole('menuitem', { name: /table.actions.remove_button_text/i }),
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    describe('when is false', () => {
+      it('should render remove from organization action in dropdown menu', async () => {
+        const user = userEvent.setup();
+
+        renderTable({ hideRemoveFromOrganization: false });
+
+        await waitForComponentToLoad();
+        await screen.findByText(mockProvider.name!);
+
+        const actionButtons = screen.getAllByRole('button');
+        const rowActionButton = actionButtons.find(
+          (btn) =>
+            btn.querySelector('svg.lucide-more-horizontal') || btn.className.includes('rounded-xl'),
+        );
+        expect(rowActionButton).toBeDefined();
+        await user.click(rowActionButton!);
+
+        expect(
+          screen.queryByRole('menuitem', { name: /table.actions.remove_button_text/i }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
 });
 
 describe('SsoProviderTableView', () => {
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab.tsx
@@ -53,6 +53,8 @@ export function SsoProviderTab({
   isRemoving,
   idpConfig,
   shouldAllowDeletion,
+  hideDeleteProvider = false,
+  hideRemoveFromOrganization = false,
   formActions,
   hasSsoAttributeSyncWarning,
   onAttributeSync,
@@ -102,7 +104,7 @@ export function SsoProviderTab({
       </Card>
 
       <div className="space-y-4">
-        {provider && organization && (
+        {provider && organization && !hideRemoveFromOrganization && (
           <SsoProviderRemoveFromOrganization
             provider={provider}
             organizationName={organization?.name}
@@ -113,7 +115,7 @@ export function SsoProviderTab({
           />
         )}
 
-        {provider && shouldAllowDeletion && (
+        {provider && shouldAllowDeletion && !hideDeleteProvider && (
           <SsoProviderDelete
             provider={provider}
             onDelete={onDelete}
diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-table/sso-provider-table-action.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-table/sso-provider-table-action.tsx
@@ -39,6 +39,8 @@ import type { SsoProviderTableActionsColumnProps } from '@/types/my-organization
 export function SsoProviderTableActionsColumn({
   provider,
   shouldAllowDeletion,
+  hideDeleteProvider = false,
+  hideRemoveFromOrganization = false,
   readOnly = false,
   isUpdating = false,
   isUpdatingId,
@@ -99,7 +101,7 @@ export function SsoProviderTableActionsColumn({
               <Edit className="mr-2 h-4 w-4" />
               {t('table.actions.edit_button_text')}
             </DropdownMenuItem>
-            {shouldAllowDeletion && (
+            {shouldAllowDeletion && !hideDeleteProvider && (
               <DropdownMenuItem
                 onClick={handleDelete}
                 className="text-destructive-foreground focus:text-destructive-foreground"
@@ -109,14 +111,16 @@ export function SsoProviderTableActionsColumn({
                 {t('table.actions.delete_button_text')}
               </DropdownMenuItem>
             )}
-            <DropdownMenuItem
-              onClick={handleRemoveFromOrganization}
-              className="text-destructive-foreground focus:text-destructive-foreground"
-              disabled={readOnly}
-            >
-              <Trash2 className="mr-2 h-4 w-4" />
-              {t('table.actions.remove_button_text')}
-            </DropdownMenuItem>
+            {!hideRemoveFromOrganization && (
+              <DropdownMenuItem
+                onClick={handleRemoveFromOrganization}
+                className="text-destructive-foreground focus:text-destructive-foreground"
+                disabled={readOnly}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                {t('table.actions.remove_button_text')}
+              </DropdownMenuItem>
+            )}
           </DropdownMenuContent>
         </DropdownMenuPortal>
       </DropdownMenu>
diff --git a/packages/react/src/components/auth0/my-organization/sso-provider-edit.tsx b/packages/react/src/components/auth0/my-organization/sso-provider-edit.tsx
@@ -33,6 +33,9 @@ import type {
  * @param props.provisioning - Provisioning configuration
  * @param props.domains - Array of domains
  * @param props.hideHeader - Whether to hide the header
+ * @param props.hideProvisioningTab - Whether to hide the provisioning tab
+ * @param props.hideDeleteProvider - Whether to hide the delete provider action
+ * @param props.hideRemoveFromOrganization - Whether to hide the remove from organization action
  * @param props.customMessages - Custom translation messages to override defaults
  * @param props.styling - Custom styling configuration with variables and classes
  * @param props.schema - Zod validation schema
@@ -50,6 +53,9 @@ function SsoProviderEdit(props: SsoProviderEditProps) {
     provisioning,
     domains,
     hideHeader = false,
+    hideProvisioningTab = false,
+    hideDeleteProvider = false,
+    hideRemoveFromOrganization = false,
     customMessages = {},
     styling = {
       variables: { common: {}, light: {}, dark: {} },
@@ -70,7 +76,7 @@ function SsoProviderEdit(props: SsoProviderEditProps) {
     ...ssoProviderEdit,
     shouldAllowDeletion: ssoProviderEdit.shouldAllowDeletion,
     idpConfig: ssoProviderEdit.idpConfig,
-    showProvisioningTab: ssoProviderEdit.showProvisioningTab,
+    showProvisioningTab: ssoProviderEdit.showProvisioningTab && !hideProvisioningTab,
     styling,
     customMessages,
     backButton,
@@ -79,6 +85,9 @@ function SsoProviderEdit(props: SsoProviderEditProps) {
     providerId,
     domains,
     hideHeader,
+    hideProvisioningTab,
+    hideDeleteProvider,
+    hideRemoveFromOrganization,
   };
 
   const ssoProviderCreateHandlerProps: SsoProviderEditHandlerProps = {
@@ -126,6 +135,8 @@ function SsoProviderEditView({ logic, handlers }: SsoProviderEditViewProps) {
     providerId,
     domains,
     hideHeader,
+    hideDeleteProvider,
+    hideRemoveFromOrganization,
     provider,
     organization,
     isLoading,
@@ -231,6 +242,8 @@ function SsoProviderEditView({ logic, handlers }: SsoProviderEditViewProps) {
               isRemoving={isRemoving}
               idpConfig={idpConfig}
               shouldAllowDeletion={shouldAllowDeletion}
+              hideDeleteProvider={hideDeleteProvider}
+              hideRemoveFromOrganization={hideRemoveFromOrganization}
               hasSsoAttributeSyncWarning={hasSsoAttributeSyncWarning}
               onAttributeSync={syncSsoAttributes}
               isSyncingAttributes={isSsoAttributesSyncing}
diff --git a/packages/react/src/components/auth0/my-organization/sso-provider-table.tsx b/packages/react/src/components/auth0/my-organization/sso-provider-table.tsx
@@ -30,6 +30,8 @@ import type {
  * @param props.customMessages - Custom translation messages to override defaults
  * @param props.styling - Custom styling configuration with variables and classes
  * @param props.readOnly - Whether the component is in read-only mode
+ * @param props.hideDeleteProvider - Whether to hide the delete provider action
+ * @param props.hideRemoveFromOrganization - Whether to hide the remove from organization action
  * @param props.createAction - Configuration for the create action
  * @param props.editAction - Configuration for the edit action
  * @param props.deleteAction - Configuration for the delete action
@@ -46,6 +48,8 @@ function SsoProviderTable(props: SsoProviderTableProps) {
     styling = { variables: { common: {}, light: {}, dark: {} }, classes: {} },
     readOnly = false,
     hideHeader = false,
+    hideDeleteProvider = false,
+    hideRemoveFromOrganization = false,
     createAction,
     editAction,
     deleteAction,
@@ -71,6 +75,8 @@ function SsoProviderTable(props: SsoProviderTableProps) {
         customMessages={customMessages}
         readOnly={readOnly}
         hideHeader={hideHeader}
+        hideDeleteProvider={hideDeleteProvider}
+        hideRemoveFromOrganization={hideRemoveFromOrganization}
         createAction={createAction}
         editAction={editAction}
       />
@@ -89,6 +95,8 @@ function SsoProviderTableView({
   customMessages,
   readOnly,
   hideHeader,
+  hideDeleteProvider,
+  hideRemoveFromOrganization,
   providers,
   shouldHideCreate,
   isViewLoading,
@@ -153,6 +161,8 @@ function SsoProviderTableView({
           <SsoProviderTableActionsColumn
             provider={idp}
             shouldAllowDeletion={shouldAllowDeletion}
+            hideDeleteProvider={hideDeleteProvider}
+            hideRemoveFromOrganization={hideRemoveFromOrganization}
             readOnly={readOnly}
             isUpdating={isUpdating}
             isUpdatingId={isUpdatingId}
@@ -171,6 +181,8 @@ function SsoProviderTableView({
       readOnly,
       editAction,
       isUpdating,
+      hideDeleteProvider,
+      hideRemoveFromOrganization,
       handleEdit,
       handleDelete,
       handleDeleteFromOrganization,
diff --git a/packages/react/src/types/my-organization/idp-management/sso-provider/sso-provider-edit-types.ts b/packages/react/src/types/my-organization/idp-management/sso-provider/sso-provider-edit-types.ts
@@ -78,6 +78,9 @@ export interface SsoProviderEditProps
     SsoProviderEditSchema
   > {
   hideHeader?: boolean;
+  hideProvisioningTab?: boolean;
+  hideDeleteProvider?: boolean;
+  hideRemoveFromOrganization?: boolean;
   providerId: IdpId;
   sso?: SsoProviderTabEditProps;
   provisioning?: SsoProvisioningTabEditProps;
diff --git a/packages/react/src/types/my-organization/idp-management/sso-provider/sso-provider-tab-types.ts b/packages/react/src/types/my-organization/idp-management/sso-provider/sso-provider-tab-types.ts
diff --git a/packages/react/src/types/my-organization/idp-management/sso-provider/sso-provider-table-types.ts b/packages/react/src/types/my-organization/idp-management/sso-provider/sso-provider-table-types.ts
