refactor(react): flatten sso-provider-table view props

Author: harishsundar-okta

packages/react/src/components/auth0/my-organization/__tests__/sso-provider-table.test.tsx

@@ -9,7 +9,7 @@ import { SsoProviderTableView } from '@/components/auth0/my-organization/sso-pro
 import * as useConfigModule from '@/hooks/my-organization/use-config';
 import * as useIdpConfigModule from '@/hooks/my-organization/use-idp-config';
 import * as useCoreClientModule from '@/hooks/shared/use-core-client';
-import { createMockSsoProviderTableHandler, createMockSsoProviderTableLogic } from '@/tests/utils';
+import { createMockSsoProviderTableViewProps } from '@/tests/utils';
 import { createMockUseConfig } from '@/tests/utils/__mocks__/my-organization/config/config.mocks';
 import { createMockIdentityProvider } from '@/tests/utils/__mocks__/my-organization/domain-management/domain.mocks';
 import { createMockUseIdpConfig } from '@/tests/utils/__mocks__/my-organization/idp-management/idp-config.mocks';
@@ -864,49 +864,41 @@ describe('SsoProviderTable', () => {
 });
 
 describe('SsoProviderTableView', () => {
-  const logic = createMockSsoProviderTableLogic();
-  const handlers = createMockSsoProviderTableHandler();
+  const viewProps = createMockSsoProviderTableViewProps();
 
   it('renders the table and header', () => {
-    renderWithProviders(<SsoProviderTableView logic={logic} handlers={handlers} />);
+    renderWithProviders(<SsoProviderTableView {...viewProps} />);
     expect(screen.getByRole('table')).toBeInTheDocument();
     expect(screen.getByRole('banner')).toBeInTheDocument();
   });
 
   it('renders empty state when data is empty', () => {
-    renderWithProviders(
-      <SsoProviderTableView logic={{ ...logic, data: [] }} handlers={handlers} />,
-    );
+    renderWithProviders(<SsoProviderTableView {...viewProps} providers={[]} />);
     expect(screen.getByText(/empty/i)).toBeInTheDocument();
   });
 
   it('disables create button when readOnly is true', () => {
-    renderWithProviders(
-      <SsoProviderTableView logic={{ ...logic, readOnly: true }} handlers={handlers} />,
-    );
+    renderWithProviders(<SsoProviderTableView {...viewProps} readOnly={true} />);
     const createButton = screen.getByRole('button', { name: /create/i });
     expect(createButton).toBeDisabled();
   });
 
-  it('renders loading state when isLoading is true', () => {
-    renderWithProviders(
-      <SsoProviderTableView logic={{ ...logic, isLoading: true }} handlers={handlers} />,
-    );
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    // Optionally check for a loading indicator if present in your DataTable
+  it('renders loading state when isViewLoading is true', () => {
+    renderWithProviders(<SsoProviderTableView {...viewProps} isViewLoading={true} />);
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
   });
 
   it('renders custom header class if provided', () => {
     renderWithProviders(
       <SsoProviderTableView
-        logic={{
-          ...logic,
-          styling: {
-            ...logic.styling,
-            classes: { ...logic?.styling?.classes, 'SsoProviderTable-header': 'custom-header' },
+        {...viewProps}
+        styling={{
+          ...viewProps.styling,
+          classes: {
+            ...viewProps?.styling?.classes,
+            'SsoProviderTable-header': 'custom-header',
           },
         }}
-        handlers={handlers}
       />,
     );
     expect(document.querySelector('.custom-header')).toBeInTheDocument();
@@ -915,14 +907,11 @@ describe('SsoProviderTableView', () => {
   it('renders custom table class if provided', () => {
     renderWithProviders(
       <SsoProviderTableView
-        logic={{
-          ...logic,
-          styling: {
-            ...logic.styling,
-            classes: { ...logic?.styling?.classes, 'SsoProviderTable-table': 'custom-table' },
-          },
+        {...viewProps}
+        styling={{
+          ...viewProps.styling,
+          classes: { ...viewProps?.styling?.classes, 'SsoProviderTable-table': 'custom-table' },
         }}
-        handlers={handlers}
       />,
     );
     expect(document.querySelector('.custom-table')).toBeInTheDocument();

packages/react/src/components/auth0/my-organization/sso-provider-table.tsx

@@ -20,8 +20,6 @@ import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
 import type {
   SsoProviderTableProps,
-  SsoProviderTableLogicProps,
-  SsoProviderTableHandlerProps,
   SsoProviderTableViewProps,
 } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types';
 
@@ -51,7 +49,7 @@ function SsoProviderTable(props: SsoProviderTableProps) {
     enableProviderAction,
   } = props;
 
-  const table = useSsoProviderTable({
+  const providerTable = useSsoProviderTable({
     readOnly,
     customMessages,
     createAction,
@@ -61,46 +59,15 @@ function SsoProviderTable(props: SsoProviderTableProps) {
     enableProviderAction,
   });
 
-  const ssoProviderCreateLogicProps: SsoProviderTableLogicProps = {
-    data: table.providers,
-    styling,
-    customMessages,
-    readOnly,
-    createAction,
-    editAction,
-    organization: table.organization,
-    isUpdating: table.isUpdating,
-    isUpdatingId: table.isUpdatingId,
-    isDeleting: table.isDeleting,
-    isRemoving: table.isRemoving,
-    hideHeader: false,
-    isLoading: table.isViewLoading,
-    shouldHideCreate: table.shouldHideCreate,
-    isViewLoading: table.isViewLoading,
-    selectedIdp: table.selectedIdp,
-    showDeleteModal: table.showDeleteModal,
-    showRemoveModal: table.showRemoveModal,
-    shouldAllowDeletion: table.shouldAllowDeletion,
-  };
-
-  const ssoProviderCreateHandlerProps: SsoProviderTableHandlerProps = {
-    handleCreate: table.handleCreate,
-    handleEdit: table.handleEdit,
-    handleDelete: table.handleDelete,
-    handleDeleteFromOrganization: table.handleDeleteFromOrganization,
-    handleToggleEnabled: table.handleToggleEnabled,
-    handleDeleteConfirm: table.handleDeleteConfirm,
-    handleRemoveConfirm: table.handleRemoveConfirm,
-    setShowDeleteModal: table.setShowDeleteModal,
-    setShowRemoveModal: table.setShowRemoveModal,
-    setSelectedIdp: table.setSelectedIdp,
-  };
-
   return (
-    <GateKeeper isLoading={table.isLoading} styling={styling}>
+    <GateKeeper isLoading={providerTable.isLoading} styling={styling}>
       <SsoProviderTableView
-        logic={ssoProviderCreateLogicProps}
-        handlers={ssoProviderCreateHandlerProps}
+        {...providerTable}
+        styling={styling}
+        customMessages={customMessages}
+        readOnly={readOnly}
+        createAction={createAction}
+        editAction={editAction}
       />
     </GateKeeper>
   );
@@ -109,44 +76,37 @@ function SsoProviderTable(props: SsoProviderTableProps) {
 /**
  * Internal SSO provider table view component
  * @param props - Component props
- * @param props.logic - Component logic props
- * @param props.handlers - Component handler props
  * @internal
  * @returns JSX element
  */
-function SsoProviderTableView({ logic, handlers }: SsoProviderTableViewProps) {
-  const {
-    styling,
-    customMessages,
-    readOnly,
-    data,
-    shouldHideCreate,
-    isViewLoading,
-    createAction,
-    editAction,
-    selectedIdp,
-    showDeleteModal,
-    showRemoveModal,
-    shouldAllowDeletion,
-    organization,
-    isUpdating,
-    isUpdatingId,
-    isDeleting,
-    isRemoving,
-  } = logic;
-
-  const {
-    handleCreate,
-    handleEdit,
-    handleDelete,
-    handleDeleteFromOrganization,
-    handleToggleEnabled,
-    handleDeleteConfirm,
-    handleRemoveConfirm,
-    setShowDeleteModal,
-    setShowRemoveModal,
-  } = handlers;
-
+function SsoProviderTableView({
+  styling,
+  customMessages,
+  readOnly,
+  providers,
+  shouldHideCreate,
+  isViewLoading,
+  createAction,
+  editAction,
+  selectedIdp,
+  showDeleteModal,
+  showRemoveModal,
+  shouldAllowDeletion,
+  organization,
+  isUpdating,
+  isUpdatingId,
+  isDeleting,
+  isRemoving,
+  handleCreate,
+  handleEdit,
+  handleDelete,
+  handleDeleteFromOrganization,
+  handleToggleEnabled,
+  handleDeleteConfirm,
+  handleRemoveConfirm,
+  setShowDeleteModal,
+  setShowRemoveModal,
+}: SsoProviderTableViewProps) {
   const { isDarkMode } = useTheme();
   const { t } = useTranslator('idp_management.sso_provider_table', customMessages);
   const currentStyles = React.useMemo(
@@ -234,7 +194,7 @@ function SsoProviderTableView({ logic, handlers }: SsoProviderTableViewProps) {
       <DataTable
         loading={isViewLoading}
         columns={columns}
-        data={data}
+        data={providers}
         emptyState={{ title: t('table.empty_message') }}
         className={currentStyles.classes?.['SsoProviderTable-table']}
       />

packages/react/src/tests/utils/__mocks__/my-organization/idp-management/sso-provider-table/sso-provider-table-mocks.ts

@@ -1,20 +1,16 @@
 import { vi } from 'vitest';
 
-import type {
-  SsoProviderTableHandlerProps,
-  SsoProviderTableLogicProps,
-} from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types';
+import type { SsoProviderTableViewProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-table-types';
 
-export function createMockSsoProviderTableLogic(
-  overrides: Partial<SsoProviderTableLogicProps> = {},
-): SsoProviderTableLogicProps {
+export function createMockSsoProviderTableViewProps(
+  overrides: Partial<SsoProviderTableViewProps> = {},
+): SsoProviderTableViewProps {
   return {
-    data: [],
-    isLoading: false,
+    providers: [],
     styling: { variables: { common: {}, light: {}, dark: {} }, classes: {} },
     customMessages: {},
-    hideHeader: false,
     readOnly: false,
+    isLoading: false,
     shouldHideCreate: false,
     isViewLoading: false,
     selectedIdp: null,
@@ -36,14 +32,6 @@ export function createMockSsoProviderTableLogic(
       onAfter: vi.fn(),
       onBefore: vi.fn(),
     },
-    ...overrides,
-  };
-}
-
-export function createMockSsoProviderTableHandler(
-  overrides: Partial<SsoProviderTableHandlerProps> = {},
-): SsoProviderTableHandlerProps {
-  return {
     handleCreate: vi.fn(),
     handleEdit: vi.fn(),
     handleDelete: vi.fn(),
@@ -54,6 +42,8 @@ export function createMockSsoProviderTableHandler(
     setShowDeleteModal: vi.fn(),
     setShowRemoveModal: vi.fn(),
     setSelectedIdp: vi.fn(),
+    fetchProviders: vi.fn(async () => undefined),
+    fetchOrganizationDetails: vi.fn(async () => null),
     ...overrides,
   };
 }

packages/react/src/types/my-organization/idp-management/sso-provider/sso-provider-table-types.ts

@@ -130,42 +130,10 @@ export interface SsoProviderTableActionsColumnProps
   onDelete: (provider: IdentityProvider) => void;
   onRemoveFromOrganization: (provider: IdentityProvider) => void;
 }
-export interface SsoProviderTableLogicProps {
-  data: IdentityProvider[];
-  isLoading: boolean;
+export interface SsoProviderTableViewProps extends UseSsoProviderTableReturn {
   styling: SsoProviderTableProps['styling'];
   customMessages: SsoProviderTableProps['customMessages'];
-  hideHeader: boolean;
   readOnly: boolean;
-  shouldHideCreate: boolean;
-  isViewLoading: boolean;
   createAction: SsoProviderTableProps['createAction'];
   editAction: SsoProviderTableProps['editAction'];
-  selectedIdp: IdentityProvider | null;
-  showDeleteModal: boolean;
-  showRemoveModal: boolean;
-  organization: OrganizationPrivate | null;
-  isUpdating: boolean;
-  isUpdatingId: string | null;
-  isDeleting: boolean;
-  isRemoving: boolean;
-  shouldAllowDeletion: boolean;
 }
-
-export interface SsoProviderTableHandlerProps {
-  handleCreate: () => void;
-  handleEdit: (idp: IdentityProvider) => void;
-  handleDelete: (idp: IdentityProvider) => void;
-  handleDeleteFromOrganization: (idp: IdentityProvider) => void;
-  handleToggleEnabled: (idp: IdentityProvider, enabled: boolean) => void;
-  handleDeleteConfirm: (provider: IdentityProvider) => Promise<void>;
-  handleRemoveConfirm: (provider: IdentityProvider) => Promise<void>;
-  setShowDeleteModal: React.Dispatch<React.SetStateAction<boolean>>;
-  setShowRemoveModal: React.Dispatch<React.SetStateAction<boolean>>;
-  setSelectedIdp: React.Dispatch<React.SetStateAction<IdentityProvider | null>>;
-}
-
-export type SsoProviderTableViewProps = {
-  logic: SsoProviderTableLogicProps;
-  handlers: SsoProviderTableHandlerProps;
-};