Skip to content

refactor: domain table hook architecture separation#296

Open
harishsundar-okta wants to merge 6 commits into
mainfrom
refactor/domain-table-hook-architecture
Open

refactor: domain table hook architecture separation#296
harishsundar-okta wants to merge 6 commits into
mainfrom
refactor/domain-table-hook-architecture

Conversation

@harishsundar-okta
Copy link
Copy Markdown
Contributor

Summary

Refactors the domain table hooks to follow the hook architecture pattern — two hooks internally, only one exposed publicly.

Why

The domain table component previously required consumers to manually wire together useDomainTable (data) and useDomainTableLogic (UI state), creating a fragile and complex public API. This standardizes on a single public hook pattern, consistent with the SSO provider table implementation.

What

  • Moved data/API layer from use-domain-table.ts to a new internal service hook at shared/services/use-domain-table-service.ts
  • Merged use-domain-table-logic.ts into use-domain-table.ts as the single public hook that consumes the service internally
  • Simplified domain-table.tsx from manually wiring two hooks to a single useDomainTable() call
  • Removed useDomainTableLogic export from public API
  • Updated types, mocks, and tests to match new architecture

Packages

  • packages/core
  • packages/react
  • examples

References

Testing

How can this be verified? Note anything intentionally not covered by tests and why.

  • This change adds unit test coverage
  • Tested for both SPA and RWA flows, all example apps working
  • All existing and new tests complete without errors

Checklist

  • Breaking change
  • Requires docs update
  • Backward compatible

Contributing

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented May 22, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.49%. Comparing base (aecf241) to head (8edf58a).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #296      +/-   ##
==========================================
+ Coverage   89.47%   89.49%   +0.02%     
==========================================
  Files         156      156              
  Lines       13070    13102      +32     
  Branches     1419     1798     +379     
==========================================
+ Hits        11694    11726      +32     
  Misses       1376     1376              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@harishsundar-okta harishsundar-okta marked this pull request as ready for review May 25, 2026 05:28
Comment on lines +20 to +37
vi.mock('@/hooks/my-organization/shared/services/use-domain-table-service', () => ({
useDomainTableService: vi.fn(() => ({
domains: [],
providers: [],
isFetching: false,
isCreating: false,
isDeleting: false,
isVerifying: false,
isLoadingProviders: false,
fetchProviders: vi.fn(),
fetchDomains: vi.fn(),
onCreateDomain: vi.fn(),
onVerifyDomain: vi.fn(),
onDeleteDomain: vi.fn(),
onAssociateToProvider: vi.fn(),
onDeleteFromProvider: vi.fn(),
})),
}));
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const createMockServiceReturn = (overrides = {}) => ({
  domains: [],
  providers: [],
  isFetching: false,
  isCreating: false,
  isDeleting: false,
  isVerifying: false,
  isLoadingProviders: false,
  fetchProviders: vi.fn(),
  fetchDomains: vi.fn(),
  onCreateDomain: vi.fn(),
  onVerifyDomain: vi.fn(),
  onDeleteDomain: vi.fn(),
  onAssociateToProvider: vi.fn(),
  onDeleteFromProvider: vi.fn(),
  ...overrides,
});

// Get mocked function reference once
import { useDomainTableService } from '@/hooks/my-organization/shared/services/use-domain-table-service';
const mockUseDomainTableService = vi.mocked(useDomainTableService);

// In tests - much cleaner:
it('should create domain...', async () => {
  const mockOnCreateDomain = vi.fn().mockResolvedValue(mockDomain);
  mockUseDomainTableService.mockReturnValue(
    createMockServiceReturn({ onCreateDomain: mockOnCreateDomain })
  );
  // ... test
});

can we use this pattern instead of repeating same mock object multiple places? also have the base mock in separate mocks file

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, created a reusable createMockDomainTableServiceReturn helper with override support.

import { createTestQueryClientWrapper } from '@/tests/utils/test-provider';
import type { UseDomainTableServiceOptions } from '@/types/my-organization/domain-management/domain-table-types';

// ===== Mock packages =====
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets not have these auto generated comments as its public repo

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, removed all section separator comments.

Comment on lines +27 to +52
const createMockOptions = (
overrides?: Partial<UseDomainTableServiceOptions>,
): UseDomainTableServiceOptions => ({
createAction: {
onBefore: vi.fn().mockReturnValue(true),
onAfter: vi.fn(),
},
deleteAction: {
onBefore: vi.fn().mockReturnValue(true),
onAfter: vi.fn(),
},
verifyAction: {
onBefore: vi.fn().mockReturnValue(true),
onAfter: vi.fn(),
},
associateToProviderAction: {
onBefore: vi.fn().mockReturnValue(true),
onAfter: vi.fn(),
},
deleteFromProviderAction: {
onBefore: vi.fn().mockReturnValue(true),
onAfter: vi.fn(),
},
customMessages: {},
...overrides,
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we have them in separate mock file?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, moved to the shared domain mocks file.

Comment on lines +8 to +18
vi.mock('@/hooks/shared/use-translator', () => ({
useTranslator: () => ({ t: (key: string) => key }),
}));

vi.mock('@/hooks/shared/use-error-handler', () => ({
useErrorHandler: () => mockHandleError,
}));

vi.mock('@/components/auth0/shared/toast', () => ({
showToast: vi.fn(),
}));
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use existing modular approach of mocking like

mockToast
useTranslatorModule
useErrorHandlerModule

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, replaced inline toast mock with mockToast() from test utilities.


const domainQueryKeys = {
all: ['domains'] as const,
list: () => [...domainQueryKeys.all, 'list'] as const,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move to core

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you we should have all the queries extracted and reuse from the core for each module

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants