Merge pull request #396 from auth0/feat/integration-data-refresh-domains-table

feat: integrate data refresh indicator into domains table

Author: grandmaester

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

@@ -677,6 +677,73 @@ describe('DomainTable', () => {
       });
     });
   });
+
+  describe('refresh indicator', () => {
+    it('should render the refresh control once domains data is loaded and stale', async () => {
+      renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+      await waitForComponentToLoad();
+
+      expect(screen.getByRole('button', { name: 'refresh' })).toBeInTheDocument();
+    });
+
+    it('should refetch domains when the refresh button is clicked', async () => {
+      const user = userEvent.setup();
+      const apiService = mockCoreClient.getMyOrganizationApiClient();
+      const listDomains = apiService.organization.domains.list as ReturnType<typeof vi.fn>;
+
+      renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+      await waitForComponentToLoad();
+      expect(listDomains).toHaveBeenCalledTimes(1);
+      await user.click(screen.getByRole('button', { name: 'refresh' }));
+
+      await waitFor(() => {
+        expect(listDomains).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    it('should show the last updated label once domains data is loaded', async () => {
+      renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+      await waitForComponentToLoad();
+      expect(screen.getByText('last_updated', { exact: false })).toBeInTheDocument();
+    });
+
+    it('should disable the refresh button while a refetch is in flight, then re-enable it', async () => {
+      const user = userEvent.setup();
+      const apiService = mockCoreClient.getMyOrganizationApiClient();
+      const listDomains = apiService.organization.domains.list as ReturnType<typeof vi.fn>;
+
+      renderWithProviders(<DomainTable {...createMockDomainTableProps()} />);
+
+      await waitForComponentToLoad();
+
+      const refreshButton = screen.getByRole('button', { name: 'refresh' });
+      expect(refreshButton).toBeEnabled();
+
+      let resolveRefetch: (value: unknown) => void = () => {};
+      listDomains.mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveRefetch = resolve;
+          }),
+      );
+
+      await user.click(refreshButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'refresh' })).toBeDisabled();
+      });
+
+      resolveRefetch({
+        response: { organization_domains: [mockDomain, mockVerifiedDomain] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'refresh' })).toBeEnabled();
+      });
+    });
+  });
 });
 
 describe('DomainTableView', () => {

packages/react/src/components/auth0/my-organization/__tests__/organization-member-management.test.tsx

@@ -610,7 +610,7 @@ describe('OrganizationMemberManagement', () => {
       expect(refetchMembers).not.toHaveBeenCalled();
     });
 
-    it('does not render the refresh control when the active tab data is not stale', () => {
+    it('renders a disabled refresh control when the active tab data is not stale', () => {
       mockedUseOrganizationMemberManagement.mockReturnValue(
         createMockMemberManagementResult({
           activeTab: 'invitations',
@@ -620,7 +620,7 @@ describe('OrganizationMemberManagement', () => {
 
       renderWithProviders(<OrganizationMemberManagement {...createMockComponentProps()} />);
 
-      expect(screen.queryByRole('button', { name: 'refresh' })).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'refresh' })).toBeDisabled();
     });
   });
 });

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

@@ -13,13 +13,15 @@ import { DataPagination } from '@/components/auth0/shared/data-pagination';
 import { DataTable, type Column } from '@/components/auth0/shared/data-table';
 import { GateKeeper } from '@/components/auth0/shared/gate-keeper/gate-keeper';
 import { Header } from '@/components/auth0/shared/header';
+import { RefreshIndicator } from '@/components/auth0/shared/refresh-indicator';
 import { StyledScope } from '@/components/auth0/shared/styled-scope';
 import { Badge } from '@/components/ui/badge';
 import { useDomainTable } from '@/hooks/my-organization/use-domain-table';
 import { useTelemetry } from '@/hooks/shared/use-telemetry';
 import { useTheme } from '@/hooks/shared/use-theme';
 import { useTranslator } from '@/hooks/shared/use-translator';
 import { DEFAULT_PAGE_SIZE_OPTIONS } from '@/lib/constants/shared/constants';
+import { cn } from '@/lib/utils';
 import { getStatusBadgeVariant } from '@/lib/utils/my-organization/domain-management/domain-management-utils';
 import type {
   DomainTableProps,
@@ -102,6 +104,9 @@ function DomainTableView({
     isCreating,
     isVerifying,
     isFetching,
+    isRefetchingDomains,
+    isDomainsStale,
+    domainsUpdatedAt,
     isLoadingProviders,
     isDeleting,
     pagination,
@@ -111,6 +116,7 @@ function DomainTableView({
     showDeleteModal,
     verifyError,
     selectedDomain,
+    refetchDomains,
     setShowCreateModal,
     setShowConfigureModal,
     setShowDeleteModal,
@@ -195,6 +201,17 @@ function DomainTableView({
         </div>
       )}
 
+      <div
+        className={cn('flex justify-end mb-8', currentStyles.classes?.['DomainTable-tableActions'])}
+      >
+        <RefreshIndicator
+          isStale={isDomainsStale}
+          isFetching={isRefetchingDomains}
+          lastUpdatedAt={domainsUpdatedAt || undefined}
+          onRefresh={refetchDomains}
+        />
+      </div>
+
       <DataTable
         columns={columns}
         data={domains}

packages/react/src/components/auth0/my-organization/organization-member-management.tsx

@@ -139,13 +139,13 @@ export function OrganizationMemberManagementView(props: OrganizationMemberManage
       ? {
           isStale: isMembersStale,
           isFetching: isFetchingMembers,
-          lastUpdatedAt: membersUpdatedAt,
+          lastUpdatedAt: membersUpdatedAt || undefined,
           onRefresh: refetchMembers,
         }
       : {
           isStale: isInvitationsStale,
           isFetching: isFetchingInvitations,
-          lastUpdatedAt: invitationsUpdatedAt,
+          lastUpdatedAt: invitationsUpdatedAt || undefined,
           onRefresh: refetchInvitations,
         };
 

packages/react/src/components/auth0/shared/__tests__/refresh-indicator.test.tsx

@@ -29,19 +29,36 @@ describe('RefreshIndicator', () => {
     vi.restoreAllMocks();
   });
 
-  it('renders the refresh button when data is stale', () => {
+  it('enables the refresh button when data is stale', () => {
     render(<RefreshIndicator isStale onRefresh={vi.fn()} />);
-    expect(screen.getByRole('button', { name: 'Refresh' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Refresh' })).toBeEnabled();
+  });
+
+  it('disables the refresh button while a refetch is in flight', () => {
+    render(<RefreshIndicator isStale isFetching lastUpdatedAt={new Date()} onRefresh={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Refresh' })).toBeDisabled();
   });
 
-  it('hides the indicator while fetching', () => {
+  it('hides the indicator during an initial load, before any data has been fetched', () => {
     render(<RefreshIndicator isStale isFetching onRefresh={vi.fn()} />);
     expect(screen.queryByRole('button', { name: 'Refresh' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
   });
 
-  it('hides the indicator when data is not stale', () => {
-    render(<RefreshIndicator isStale={false} onRefresh={vi.fn()} />);
-    expect(screen.queryByRole('button', { name: 'Refresh' })).not.toBeInTheDocument();
+  it('shows "Just now" instead of the stale time while a refetch is in flight', () => {
+    const lastUpdatedAt = new Date('2026-06-30T11:55:00Z'); // 5 min ago
+    render(
+      <RefreshIndicator isStale isFetching lastUpdatedAt={lastUpdatedAt} onRefresh={vi.fn()} />,
+    );
+    expect(screen.getByText(/just now/i)).toBeInTheDocument();
+    expect(screen.queryByText(/ago/i)).not.toBeInTheDocument();
+  });
+
+  it('shows a disabled button and a "Just now" label when data is fresh', () => {
+    render(<RefreshIndicator isStale={false} lastUpdatedAt={new Date()} onRefresh={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Refresh' })).toBeDisabled();
+    expect(screen.getByText('Last updated', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(/just now/i)).toBeInTheDocument();
   });
 
   it('calls onRefresh when the button is clicked', () => {
@@ -51,6 +68,15 @@ describe('RefreshIndicator', () => {
     expect(onRefresh).toHaveBeenCalledTimes(1);
   });
 
+  it('does not call onRefresh when the button is disabled', () => {
+    const onRefresh = vi.fn();
+    render(
+      <RefreshIndicator isStale isFetching lastUpdatedAt={new Date()} onRefresh={onRefresh} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+    expect(onRefresh).not.toHaveBeenCalled();
+  });
+
   it('renders a relative "last updated" label', () => {
     const lastUpdatedAt = new Date('2026-06-30T11:59:30Z'); // 30s ago -> under a minute
     render(<RefreshIndicator isStale lastUpdatedAt={lastUpdatedAt} onRefresh={vi.fn()} />);
@@ -79,16 +105,15 @@ describe('RefreshIndicator', () => {
     render(
       <RefreshIndicator
         isStale
-        lastUpdatedAt={new Date('2026-06-30T11:59:10Z')} // 50s ago -> under a minute
+        lastUpdatedAt={new Date('2026-06-30T11:59:10Z')}
         tickIntervalMs={1000}
         onRefresh={vi.fn()}
       />,
     );
     expect(screen.getByText(/just now/i)).toBeInTheDocument();
 
-    // Advance elapsed time past the minute boundary and fire the tick so the label recomputes.
     act(() => {
-      vi.advanceTimersByTime(15_000); // now 1 min 5 sec ago
+      vi.advanceTimersByTime(15_000);
     });
     expect(screen.getByText(/1 minute 5 sec ago/i)).toBeInTheDocument();
   });

packages/react/src/components/auth0/shared/refresh-indicator.tsx

@@ -23,9 +23,9 @@ export interface RefreshIndicatorProps {
 }
 
 /**
- * Renders a stale-data indicator with a manual refresh button.
+ * Renders a last-updated indicator with a manual refresh button.
  * @param props - {@link RefreshIndicatorProps}
- * @returns The rendered indicator, or `null` when it should be hidden.
+ * @returns The rendered indicator
  */
 export function RefreshIndicator({
   lastUpdatedAt,
@@ -36,18 +36,26 @@ export function RefreshIndicator({
   tickIntervalMs = DEFAULT_REFRESH_INDICATOR_TICK_MS,
 }: RefreshIndicatorProps): React.JSX.Element | null {
   const { t } = useTranslator('common');
-  const visible = isStale && !isFetching;
   const timestampMs = lastUpdatedAt == null ? null : new Date(lastUpdatedAt).getTime();
   const hasValidTimestamp = timestampMs != null && !Number.isNaN(timestampMs);
+  const isInitialLoad = isFetching && !hasValidTimestamp;
 
+  const showStaleLabel = isStale && !isFetching;
+  const label = showStaleLabel
+    ? hasValidTimestamp
+      ? getRelativeTimeLabel(timestampMs, t)
+      : null
+    : t('time.just_now', undefined, 'Just now');
+
+  const shouldTick = showStaleLabel && hasValidTimestamp;
   const [, forceTick] = React.useReducer((n: number) => n + 1, 0);
   React.useEffect(() => {
-    if (!visible || !hasValidTimestamp || tickIntervalMs <= 0) return;
+    if (!shouldTick || tickIntervalMs <= 0) return;
     const id = setInterval(forceTick, tickIntervalMs);
     return () => clearInterval(id);
-  }, [visible, hasValidTimestamp, timestampMs, tickIntervalMs]);
+  }, [shouldTick, timestampMs, tickIntervalMs]);
 
-  if (!visible) {
+  if (isInitialLoad) {
     return null;
   }
 
@@ -56,14 +64,20 @@ export function RefreshIndicator({
       className={cn('flex items-center gap-3 text-sm text-muted-foreground', className)}
       role="status"
     >
-      {hasValidTimestamp && (
+      {label != null && (
         <span aria-live="off">
           {t('last_updated')}
           {': '}
-          {getRelativeTimeLabel(timestampMs, t)}
+          {label}
         </span>
       )}
-      <Button type="button" variant="outline" size="default" onClick={onRefresh}>
+      <Button
+        type="button"
+        variant="outline"
+        size="default"
+        disabled={!isStale || isFetching}
+        onClick={onRefresh}
+      >
         <RefreshCw aria-hidden="true" />
         {t('refresh')}
       </Button>

packages/react/src/hooks/my-organization/shared/services/use-domain-table-service.ts

@@ -223,11 +223,15 @@ export function useDomainTableService({
     providers: providersQuery.data ?? [],
     nextToken: domainsQuery.data?.next ?? null,
     isFetching: domainsQuery.isLoading,
+    isRefetchingDomains: domainsQuery.isFetching,
+    isDomainsStale: domainsQuery.isStale,
+    domainsUpdatedAt: domainsQuery.dataUpdatedAt,
     isCreating: isMutationLoading(createDomainMutation),
     isDeleting: isMutationLoading(deleteDomainMutation),
     isVerifying: isMutationLoading(verifyDomainMutation),
     isLoadingProviders: providersQuery.isLoading,
 
+    refetchDomains: domainsQuery.refetch,
     fetchProviders,
     fetchDomains,
     onCreateDomain,

packages/react/src/hooks/my-organization/use-domain-table.ts

@@ -52,10 +52,14 @@ export function useDomainTable({
     providers,
     nextToken,
     isFetching,
+    isRefetchingDomains,
+    isDomainsStale,
+    domainsUpdatedAt,
     isCreating,
     isDeleting,
     isVerifying,
     isLoadingProviders,
+    refetchDomains,
     fetchProviders,
     onCreateDomain,
     onVerifyDomain,
@@ -277,11 +281,13 @@ export function useDomainTable({
 
     // Loading states
     isFetching,
+    isRefetchingDomains,
+    isDomainsStale,
+    domainsUpdatedAt,
     isCreating,
     isDeleting,
     isVerifying,
     isLoadingProviders,
-
     // Pagination
     pagination: {
       pageSize,
@@ -305,6 +311,7 @@ export function useDomainTable({
     setShowDeleteModal,
 
     // Handlers
+    refetchDomains,
     handleCreate,
     handleVerify,
     handleDelete,

packages/react/src/tests/utils/__mocks__/my-organization/domain-management/domain.mocks.ts

@@ -127,6 +127,9 @@ export const createMockDomainTableReturn = (
   isCreating: false,
   isVerifying: false,
   isFetching: false,
+  isRefetchingDomains: false,
+  isDomainsStale: false,
+  domainsUpdatedAt: 0,
   isLoadingProviders: false,
   isDeleting: false,
   pagination: {
@@ -145,6 +148,7 @@ export const createMockDomainTableReturn = (
   setShowConfigureModal: vi.fn(),
   setShowVerifyModal: vi.fn(),
   setShowDeleteModal: vi.fn(),
+  refetchDomains: vi.fn(),
   handleCreate: vi.fn(),
   handleVerify: vi.fn(),
   handleDelete: vi.fn(),
@@ -194,10 +198,14 @@ export const createMockDomainTableServiceReturn = (
   providers: [],
   nextToken: null,
   isFetching: false,
+  isRefetchingDomains: false,
+  isDomainsStale: false,
+  domainsUpdatedAt: 0,
   isCreating: false,
   isDeleting: false,
   isVerifying: false,
   isLoadingProviders: false,
+  refetchDomains: vi.fn(),
   fetchProviders: vi.fn(),
   fetchDomains: vi.fn(),
   onCreateDomain: vi.fn(),