refactor: domain table hook architecture separation

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

@@ -13,8 +13,7 @@ import {
   createMockCreateAction,
   createMockVerifyAction,
   createMockDeleteAction,
-  createMockLogic,
-  createMockApi,
+  createMockDomainTableReturn,
 } from '@/tests/utils/__mocks__/my-organization/domain-management/domain.mocks';
 import { renderWithProviders } from '@/tests/utils/test-provider';
 import { mockCore, mockToast } from '@/tests/utils/test-setup';
@@ -681,27 +680,32 @@ describe('DomainTable', () => {
 });
 
 describe('DomainTableView', () => {
-  // Provide all required handlers and properties for UseDomainTableResult & DomainTableProps
-  const logic = createMockLogic();
-  const handlers = createMockApi();
+  const mockDomainTable = createMockDomainTableReturn();
+  const defaultViewProps = {
+    domainTable: mockDomainTable,
+    schema: undefined,
+    styling: { variables: { common: {}, light: {}, dark: {} }, classes: {} },
+    hideHeader: false,
+    readOnly: false,
+    customMessages: {},
+    createAction: undefined,
+    onOpenProvider: undefined,
+    onCreateProvider: undefined,
+  };
 
   it('renders the table and header', () => {
-    renderWithProviders(<DomainTableView logic={logic} handlers={handlers} />);
+    renderWithProviders(<DomainTableView {...defaultViewProps} />);
     expect(screen.getByRole('table')).toBeInTheDocument();
     expect(screen.getByText(/header.title/i)).toBeInTheDocument();
   });
 
   it('does not render header if hideHeader is true', () => {
-    renderWithProviders(
-      <DomainTableView logic={{ ...logic, hideHeader: true }} handlers={handlers} />,
-    );
+    renderWithProviders(<DomainTableView {...defaultViewProps} hideHeader={true} />);
     expect(screen.queryByText(/header.title/i)).not.toBeInTheDocument();
   });
 
   it('disables create button if readOnly is true', () => {
-    renderWithProviders(
-      <DomainTableView logic={{ ...logic, readOnly: true }} handlers={handlers} />,
-    );
+    renderWithProviders(<DomainTableView {...defaultViewProps} readOnly={true} />);
     expect(screen.getByRole('button', { name: /create/i })).toBeDisabled();
   });
 });

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

@@ -15,7 +15,6 @@ import { Header } from '@/components/auth0/shared/header';
 import { StyledScope } from '@/components/auth0/shared/styled-scope';
 import { Badge } from '@/components/ui/badge';
 import { useDomainTable } from '@/hooks/my-organization/use-domain-table';
-import { useDomainTableLogic } from '@/hooks/my-organization/use-domain-table-logic';
 import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
 import { getStatusBadgeVariant } from '@/lib/utils/my-organization/domain-management/domain-management-utils';
@@ -46,9 +45,7 @@ function DomainTable(props: DomainTableProps) {
     onCreateProvider,
   } = props;
 
-  const { t } = useTranslator('domain_management', customMessages);
-
-  const domainTableState = useDomainTable({
+  const domainTable = useDomainTable({
     createAction,
     verifyAction,
     deleteAction,
@@ -57,46 +54,42 @@ function DomainTable(props: DomainTableProps) {
     customMessages,
   });
 
-  const domainTableHandlers = useDomainTableLogic({
-    t,
-    onCreateDomain: domainTableState.onCreateDomain,
-    onVerifyDomain: domainTableState.onVerifyDomain,
-    onDeleteDomain: domainTableState.onDeleteDomain,
-    onAssociateToProvider: domainTableState.onAssociateToProvider,
-    onDeleteFromProvider: domainTableState.onDeleteFromProvider,
-    fetchProviders: domainTableState.fetchProviders,
-    fetchDomains: domainTableState.fetchDomains,
-  });
-
-  const domainTableLogic = {
-    ...domainTableState,
-    schema,
-    styling,
-    hideHeader,
-    readOnly,
-    onOpenProvider,
-    onCreateProvider,
-  };
-
   return (
-    <GateKeeper isLoading={domainTableState.isFetching} styling={styling}>
-      <DomainTableView logic={domainTableLogic} handlers={domainTableHandlers} />
+    <GateKeeper isLoading={domainTable.isFetching} styling={styling}>
+      <DomainTableView
+        domainTable={domainTable}
+        schema={schema}
+        styling={styling}
+        hideHeader={hideHeader}
+        readOnly={readOnly}
+        customMessages={customMessages}
+        createAction={createAction}
+        onOpenProvider={onOpenProvider}
+        onCreateProvider={onCreateProvider}
+      />
     </GateKeeper>
   );
 }
 
 /**
  * DomainTableView — Presentational component.
- * @param props - View props with logic and handlers
+ * @param props - View props
  * @returns Domain table view element
  * @internal
  */
 function DomainTableView({
-  logic,
-  handlers,
-}: DomainTableViewProps & { handlers: ReturnType<typeof useDomainTableLogic> }) {
+  domainTable,
+  schema,
+  styling,
+  hideHeader,
+  readOnly = false,
+  customMessages,
+  createAction,
+  onOpenProvider,
+  onCreateProvider,
+}: DomainTableViewProps) {
   const { isDarkMode } = useTheme();
-  const { t } = useTranslator('domain_management', logic.customMessages);
+  const { t } = useTranslator('domain_management', customMessages);
 
   const {
     domains,
@@ -106,17 +99,6 @@ function DomainTableView({
     isFetching,
     isLoadingProviders,
     isDeleting,
-    schema,
-    styling,
-    hideHeader,
-    readOnly = false,
-    customMessages,
-    createAction,
-    onOpenProvider,
-    onCreateProvider,
-  } = logic;
-
-  const {
     showCreateModal,
     showConfigureModal,
     showVerifyModal,
@@ -135,7 +117,7 @@ function DomainTableView({
     handleConfigureClick,
     handleVerifyClick,
     handleDeleteClick,
-  } = handlers;
+  } = domainTable;
 
   const currentStyles = React.useMemo(
     () => getComponentStyles(styling, isDarkMode),
@@ -172,7 +154,7 @@ function DomainTableView({
           <DomainTableActionsColumn
             domain={domain}
             readOnly={readOnly}
-            customMessages={logic.customMessages}
+            customMessages={customMessages}
             onView={handleConfigureClick}
             onConfigure={handleConfigureClick}
             onVerify={handleVerifyClick}

packages/react/src/hooks/index.ts

@@ -18,7 +18,6 @@ export { useConfig } from './my-organization/use-config';
 export { useIdpConfig } from './my-organization/use-idp-config';
 export { useOrganizationDetailsEdit } from './my-organization/use-organization-details-edit';
 export { useDomainTable } from './my-organization/use-domain-table';
-export { useDomainTableLogic } from './my-organization/use-domain-table-logic';
 export { useProviderFormMode } from './my-organization/use-provider-form-mode';
 export { useSsoDomainTab } from './my-organization/use-sso-domain-tab';
 export { useSsoProviderCreate } from './my-organization/use-sso-provider-create';