feat(react): refactor domain table with view props

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

@@ -13,8 +13,7 @@ import {
   createMockCreateAction,
   createMockVerifyAction,
   createMockDeleteAction,
-  createMockLogic,
-  createMockApi,
+  createMockDomainTableView,
 } 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,21 @@ describe('DomainTable', () => {
 });
 
 describe('DomainTableView', () => {
-  // Provide all required handlers and properties for UseDomainTableResult & DomainTableProps
-  const logic = createMockLogic();
-  const handlers = createMockApi();
+  const viewProps = createMockDomainTableView();
 
   it('renders the table and header', () => {
-    renderWithProviders(<DomainTableView logic={logic} handlers={handlers} />);
+    renderWithProviders(<DomainTableView {...viewProps} />);
     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 {...viewProps} 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 {...viewProps} readOnly={true} />);
     expect(screen.getByRole('button', { name: /create/i })).toBeDisabled();
   });
 });

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

@@ -14,7 +14,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';
@@ -24,12 +23,11 @@ import type {
 } from '@/types/my-organization/domain-management/domain-table-types';
 
 /**
- * DomainTableContainer Component.
  * @param props - Component props
  * @returns Domain table container element
  * @internal
  */
-function DomainTableContainer(props: DomainTableProps) {
+function DomainTable(props: DomainTableProps) {
   const {
     schema,
     hideHeader = false,
@@ -45,9 +43,7 @@ function DomainTableContainer(props: DomainTableProps) {
     onCreateProvider,
   } = props;
 
-  const { t } = useTranslator('domain_management', customMessages);
-
-  const domainTableState = useDomainTable({
+  const hook = useDomainTable({
     createAction,
     verifyAction,
     deleteAction,
@@ -56,81 +52,63 @@ function DomainTableContainer(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 <DomainTableView logic={domainTableLogic} handlers={domainTableHandlers} />;
+  return (
+    <DomainTableView
+      {...hook}
+      schema={schema}
+      styling={styling}
+      hideHeader={hideHeader}
+      readOnly={readOnly}
+      customMessages={customMessages}
+      createAction={createAction}
+      onOpenProvider={onOpenProvider}
+      onCreateProvider={onCreateProvider}
+    />
+  );
 }
 
 /**
- * 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> }) {
+  domains,
+  providers,
+  isCreating,
+  isVerifying,
+  isFetching,
+  isLoadingProviders,
+  isDeleting,
+  schema,
+  styling,
+  hideHeader,
+  readOnly,
+  customMessages,
+  createAction,
+  onOpenProvider,
+  onCreateProvider,
+  showCreateModal,
+  showConfigureModal,
+  showVerifyModal,
+  showDeleteModal,
+  verifyError,
+  selectedDomain,
+  setShowCreateModal,
+  setShowConfigureModal,
+  setShowDeleteModal,
+  handleCreate,
+  handleVerify,
+  handleDelete,
+  handleToggleSwitch,
+  handleCloseVerifyModal,
+  handleCreateClick,
+  handleConfigureClick,
+  handleVerifyClick,
+  handleDeleteClick,
+}: DomainTableViewProps) {
   const { isDarkMode } = useTheme();
-  const { t } = useTranslator('domain_management', logic.customMessages);
-
-  const {
-    domains,
-    providers,
-    isCreating,
-    isVerifying,
-    isFetching,
-    isLoadingProviders,
-    isDeleting,
-    schema,
-    styling,
-    hideHeader,
-    readOnly = false,
-    customMessages,
-    createAction,
-    onOpenProvider,
-    onCreateProvider,
-  } = logic;
-
-  const {
-    showCreateModal,
-    showConfigureModal,
-    showVerifyModal,
-    showDeleteModal,
-    verifyError,
-    selectedDomain,
-    setShowCreateModal,
-    setShowConfigureModal,
-    setShowDeleteModal,
-    handleCreate,
-    handleVerify,
-    handleDelete,
-    handleToggleSwitch,
-    handleCloseVerifyModal,
-    handleCreateClick,
-    handleConfigureClick,
-    handleVerifyClick,
-    handleDeleteClick,
-  } = handlers;
+  const { t } = useTranslator('domain_management', customMessages);
 
   const currentStyles = React.useMemo(
     () => getComponentStyles(styling, isDarkMode),
@@ -165,7 +143,7 @@ function DomainTableView({
           <DomainTableActionsColumn
             domain={domain}
             readOnly={readOnly}
-            customMessages={logic.customMessages}
+            customMessages={customMessages}
             onView={handleConfigureClick}
             onConfigure={handleConfigureClick}
             onVerify={handleVerifyClick}
@@ -286,6 +264,4 @@ function DomainTableView({
  * />
  * ```
  */
-const DomainTable = DomainTableContainer;
-
 export { DomainTable, DomainTableView };

packages/react/src/hooks/index.ts

@@ -22,7 +22,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';