Add failover history tab (#1071)

Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com>

Author: adhityamamallan

src/views/domain-page/config/domain-page-tabs.config.ts

@@ -1,14 +1,21 @@
-import { MdArchive, MdListAlt, MdSettings, MdSort } from 'react-icons/md';
+import {
+  MdArchive,
+  MdListAlt,
+  MdSettings,
+  MdSort,
+  MdSyncAlt,
+} from 'react-icons/md';
 
 import DomainWorkflows from '@/views/domain-workflows/domain-workflows';
 import DomainWorkflowsArchival from '@/views/domain-workflows-archival/domain-workflows-archival';
 
+import DomainPageFailovers from '../domain-page-failovers/domain-page-failovers';
 import DomainPageMetadata from '../domain-page-metadata/domain-page-metadata';
 import DomainPageSettings from '../domain-page-settings/domain-page-settings';
 import type { DomainPageTabsConfig } from '../domain-page-tabs/domain-page-tabs.types';
 
 const domainPageTabsConfig: DomainPageTabsConfig<
-  'workflows' | 'metadata' | 'settings' | 'archival'
+  'workflows' | 'metadata' | 'failovers' | 'settings' | 'archival'
 > = {
   workflows: {
     title: 'Workflows',
@@ -28,6 +35,15 @@ const domainPageTabsConfig: DomainPageTabsConfig<
       actions: [{ kind: 'retry', label: 'Retry' }],
     }),
   },
+  failovers: {
+    title: 'Failovers',
+    artwork: MdSyncAlt,
+    content: DomainPageFailovers,
+    getErrorConfig: () => ({
+      message: 'Failed to load failovers',
+      actions: [{ kind: 'retry', label: 'Retry' }],
+    }),
+  },
   settings: {
     title: 'Settings',
     artwork: MdSettings,

src/views/domain-page/domain-page-failovers/domain-page-failovers.tsx

@@ -0,0 +1,8 @@
+'use client';
+import React from 'react';
+
+import { type DomainPageTabContentProps } from '../domain-page-content/domain-page-content.types';
+
+export default function DomainPageFailovers(_: DomainPageTabContentProps) {
+  return <div>WIP: Domain Page Failovers Tab</div>;
+}

src/views/domain-page/domain-page-tabs/__tests__/domain-page-tabs.test.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
-import { render, screen, act, fireEvent } from '@/test-utils/rtl';
+import { HttpResponse } from 'msw';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import ErrorBoundary from '@/components/error-boundary/error-boundary';
+import { type GetConfigResponse } from '@/route-handlers/get-config/get-config.types';
 
-import domainPageTabsConfig from '../../config/domain-page-tabs.config';
 import DomainPageTabs from '../domain-page-tabs';
 
 const mockPushFn = jest.fn();
@@ -36,40 +40,63 @@ jest.mock('../../config/domain-page-tabs.config', () => ({
     title: 'Workflows',
     artwork: () => <div data-testid="workflows-artwork" />,
   },
-  'page-2': {
-    title: 'Page 2',
+  metadata: {
+    title: 'Metadata',
+    artwork: () => <div data-testid="metadata-artwork" />,
+  },
+  failovers: {
+    title: 'Failovers',
+    artwork: () => <div data-testid="failovers-artwork" />,
+  },
+  settings: {
+    title: 'Settings',
+    artwork: () => <div data-testid="settings-artwork" />,
+  },
+  archival: {
+    title: 'Archival',
+    artwork: () => <div data-testid="archival-artwork" />,
   },
 }));
 
 jest.mock('../../domain-page-help/domain-page-help', () =>
   jest.fn(() => <button data-testid="domain-page-help">Help Button</button>)
 );
 
-describe('DomainPageTabs', () => {
+describe(DomainPageTabs.name, () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders tabs titles correctly', () => {
-    render(<DomainPageTabs />);
+  it('renders tabs titles correctly with failover history disabled', async () => {
+    await setup({ enableFailoverHistory: false });
 
-    Object.values(domainPageTabsConfig).forEach(({ title }) => {
-      expect(screen.getByText(title)).toBeInTheDocument();
-    });
+    expect(screen.getByText('Workflows')).toBeInTheDocument();
+    expect(screen.getByText('Metadata')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Archival')).toBeInTheDocument();
+    expect(screen.queryByText('Failovers')).toBeNull();
   });
 
-  it('reroutes when new tab is clicked', () => {
-    render(<DomainPageTabs />);
+  it('renders tabs with failover history enabled', async () => {
+    await setup({ enableFailoverHistory: true });
 
-    const page2Tab = screen.getByText('Page 2');
-    act(() => {
-      fireEvent.click(page2Tab);
-    });
+    expect(screen.getByText('Workflows')).toBeInTheDocument();
+    expect(screen.getByText('Metadata')).toBeInTheDocument();
+    expect(screen.getByText('Failovers')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Archival')).toBeInTheDocument();
+  });
 
-    expect(mockPushFn).toHaveBeenCalledWith('page-2');
+  it('reroutes when new tab is clicked', async () => {
+    const { user } = await setup({ enableFailoverHistory: false });
+
+    const metadataTab = await screen.findByText('Metadata');
+    await user.click(metadataTab);
+
+    expect(mockPushFn).toHaveBeenCalledWith('metadata');
   });
 
-  it('retains query params when new tab is clicked', () => {
+  it('retains query params when new tab is clicked', async () => {
     // TODO: this is a bit hacky, see if there is a better way to mock the window search property
     const originalWindow = window;
     window = Object.create(window);
@@ -81,41 +108,95 @@ describe('DomainPageTabs', () => {
       writable: true,
     });
 
-    render(<DomainPageTabs />);
+    const { user } = await setup({ enableFailoverHistory: false });
 
-    const page2Tab = screen.getByText('Page 2');
-    act(() => {
-      fireEvent.click(page2Tab);
-    });
+    const metadataTab = await screen.findByText('Metadata');
+    await user.click(metadataTab);
 
     expect(mockPushFn).toHaveBeenCalledWith(
-      'page-2?queryParam1=one&queryParam2=two'
+      'metadata?queryParam1=one&queryParam2=two'
     );
 
     window = originalWindow;
   });
 
-  it('renders tabs artworks correctly', () => {
-    render(<DomainPageTabs />);
+  it('renders tabs artworks correctly', async () => {
+    await setup({ enableFailoverHistory: false });
 
-    Object.entries(domainPageTabsConfig).forEach(([key, { artwork }]) => {
-      if (typeof artwork !== 'undefined')
-        expect(screen.getByTestId(`${key}-artwork`)).toBeInTheDocument();
-      else
-        expect(screen.queryByTestId(`${key}-artwork`)).not.toBeInTheDocument();
-    });
+    expect(screen.getByTestId('workflows-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('metadata-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('settings-artwork')).toBeInTheDocument();
+    expect(screen.getByTestId('archival-artwork')).toBeInTheDocument();
+    expect(screen.queryByTestId('failovers-artwork')).toBeNull();
   });
 
-  it('renders the help button as endEnhancer', () => {
-    render(<DomainPageTabs />);
+  it('handles errors gracefully', async () => {
+    await setup({ error: true });
+
+    expect(
+      await screen.findByText('Error: Failed to fetch config')
+    ).toBeInTheDocument();
+  });
+
+  it('renders the help button as endEnhancer', async () => {
+    await setup({});
 
     expect(screen.getByTestId('domain-page-help')).toBeInTheDocument();
     expect(screen.getByText('Help Button')).toBeInTheDocument();
   });
 
-  it('renders the start workflow button', () => {
-    render(<DomainPageTabs />);
+  it('renders the start workflow button', async () => {
+    await setup({});
 
     expect(screen.getByTestId('start-workflow-button')).toBeInTheDocument();
   });
 });
+
+async function setup({
+  error,
+  enableFailoverHistory,
+}: {
+  error?: boolean;
+  enableFailoverHistory?: boolean;
+}) {
+  const user = userEvent.setup();
+
+  render(
+    <ErrorBoundary
+      fallbackRender={({ error }) => <div>Error: {error.message}</div>}
+    >
+      <Suspense fallback={<div>Loading...</div>}>
+        <DomainPageTabs />
+      </Suspense>
+    </ErrorBoundary>,
+    {
+      endpointsMocks: [
+        {
+          path: '/api/config',
+          httpMethod: 'GET',
+          mockOnce: false,
+          httpResolver: async () => {
+            if (error) {
+              return HttpResponse.json(
+                { message: 'Failed to fetch config' },
+                { status: 500 }
+              );
+            } else {
+              return HttpResponse.json(
+                (enableFailoverHistory ??
+                  false) satisfies GetConfigResponse<'FAILOVER_HISTORY_ENABLED'>
+              );
+            }
+          },
+        },
+      ],
+    }
+  );
+
+  if (!error) {
+    // Wait for the first tab to load
+    await screen.findByText('Workflows');
+  }
+
+  return { user };
+}

src/views/domain-page/domain-page-tabs/domain-page-tabs.tsx

@@ -1,31 +1,50 @@
 'use client';
 import React, { useMemo } from 'react';
 
+import omit from 'lodash/omit';
 import { useRouter, useParams } from 'next/navigation';
 
 import PageTabs from '@/components/page-tabs/page-tabs';
+import useSuspenseConfigValue from '@/hooks/use-config-value/use-suspense-config-value';
 import decodeUrlParams from '@/utils/decode-url-params';
 
 import domainPageTabsConfig from '../config/domain-page-tabs.config';
 import DomainPageHelp from '../domain-page-help/domain-page-help';
 import DomainPageStartWorkflowButton from '../domain-page-start-workflow-button/domain-page-start-workflow-button';
 
 import { styled } from './domain-page-tabs.styles';
-import type { DomainPageTabsParams } from './domain-page-tabs.types';
+import {
+  type DomainPageTabName,
+  type DomainPageTabsParams,
+} from './domain-page-tabs.types';
 
 export default function DomainPageTabs() {
   const router = useRouter();
   const params = useParams<DomainPageTabsParams>();
   const decodedParams = decodeUrlParams(params) as DomainPageTabsParams;
 
+  const { data: isFailoverHistoryEnabled } = useSuspenseConfigValue(
+    'FAILOVER_HISTORY_ENABLED'
+  );
+
+  const tabsConfig = useMemo<Partial<typeof domainPageTabsConfig>>(() => {
+    const tabsToHide: Array<DomainPageTabName> = [];
+
+    if (!isFailoverHistoryEnabled) {
+      tabsToHide.push('failovers');
+    }
+
+    return omit(domainPageTabsConfig, tabsToHide);
+  }, [isFailoverHistoryEnabled]);
+
   const tabList = useMemo(
     () =>
-      Object.entries(domainPageTabsConfig).map(([key, tabConfig]) => ({
+      Object.entries(tabsConfig).map(([key, tabConfig]) => ({
         key,
         title: tabConfig.title,
         artwork: tabConfig.artwork,
       })),
-    []
+    [tabsConfig]
   );
 
   return (