Consolidate Domain Page Tabs, Content and Error configs into single file (#892)

- Create combined config for Domain Page Tabs, Content, and Error, to make it easier to update.

Author: adhityamamallan

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

@@ -1,28 +1,51 @@
 import { MdArchive, MdListAlt, MdSettings, MdSort } from 'react-icons/md';
 
-import type { DomainPageTabs } from '../domain-page-tabs/domain-page-tabs.types';
+import DomainWorkflows from '@/views/domain-workflows/domain-workflows';
+import DomainWorkflowsArchival from '@/views/domain-workflows-archival/domain-workflows-archival';
 
-const domainPageTabsConfig = [
-  {
-    key: 'workflows',
+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: {
     title: 'Workflows',
     artwork: MdSort,
+    content: DomainWorkflows,
+    getErrorConfig: () => ({
+      message: 'Failed to load workflows',
+      actions: [{ kind: 'retry', label: 'Retry' }],
+    }),
   },
-  {
-    key: 'metadata',
+  metadata: {
     title: 'Metadata',
     artwork: MdListAlt,
+    content: DomainPageMetadata,
+    getErrorConfig: () => ({
+      message: 'Failed to load metadata',
+      actions: [{ kind: 'retry', label: 'Retry' }],
+    }),
   },
-  {
-    key: 'settings',
+  settings: {
     title: 'Settings',
     artwork: MdSettings,
+    content: DomainPageSettings,
+    getErrorConfig: () => ({
+      message: 'Failed to load settings',
+      actions: [{ kind: 'retry', label: 'Retry' }],
+    }),
   },
-  {
-    key: 'archival',
+  archival: {
     title: 'Archival',
     artwork: MdArchive,
+    content: DomainWorkflowsArchival,
+    getErrorConfig: () => ({
+      message: 'Failed to load archival workflows',
+      actions: [{ kind: 'retry', label: 'Retry' }],
+    }),
   },
-] as const satisfies DomainPageTabs;
+} as const;
 
 export default domainPageTabsConfig;

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

@@ -6,7 +6,6 @@ import DomainPageContent from '../domain-page-content';
 import type {
   DomainPageContentParams,
   DomainPageTabContentProps,
-  DomainPageTabsContentConfig,
 } from '../domain-page-content.types';
 
 const mockNotFound = jest.fn();
@@ -25,16 +24,28 @@ const MockedTabContent = ({
   </div>
 );
 
-jest.mock(
-  '../../config/domain-page-tabs-content.config',
-  () =>
-    ({
-      workflows: (props) => <MockedTabContent {...props} tab="workflows" />,
-      metadata: (props) => <MockedTabContent {...props} tab="metadata" />,
-      settings: (props) => <MockedTabContent {...props} tab="settings" />,
-      archival: (props) => <MockedTabContent {...props} tab="archival" />,
-    }) as const satisfies DomainPageTabsContentConfig
-);
+jest.mock('../../config/domain-page-tabs.config', () => ({
+  workflows: {
+    content: (props: DomainPageTabContentProps) => (
+      <MockedTabContent {...props} tab="workflows" />
+    ),
+  },
+  metadata: {
+    content: (props: DomainPageTabContentProps) => (
+      <MockedTabContent {...props} tab="metadata" />
+    ),
+  },
+  settings: {
+    content: (props: DomainPageTabContentProps) => (
+      <MockedTabContent {...props} tab="settings" />
+    ),
+  },
+  archival: {
+    content: (props: DomainPageTabContentProps) => (
+      <MockedTabContent {...props} tab="archival" />
+    ),
+  },
+}));
 
 const mockParams: DomainPageContentParams = {
   domain: 'mock-domain',

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

@@ -5,7 +5,7 @@ import { notFound } from 'next/navigation';
 
 import decodeUrlParams from '@/utils/decode-url-params';
 
-import domainPageTabsContentConfig from '../config/domain-page-tabs-content.config';
+import domainPageTabsConfig from '../config/domain-page-tabs.config';
 
 import { styled } from './domain-page-content.styles';
 import {
@@ -17,15 +17,15 @@ export default function DomainPageContent(props: Props) {
   const decodedParams = decodeUrlParams(
     props.params
   ) as DomainPageContentParams;
-  const TabContent = domainPageTabsContentConfig[decodedParams.domainTab];
+  const tabConfig = domainPageTabsConfig[decodedParams.domainTab];
 
-  if (!TabContent) {
+  if (!tabConfig) {
     return notFound();
   }
 
   return (
     <styled.PageSection>
-      <TabContent
+      <tabConfig.content
         domain={decodedParams.domain}
         cluster={decodedParams.cluster}
       />

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

@@ -1,11 +1,9 @@
-import type domainPageTabsConfig from '../config/domain-page-tabs.config';
-
-export type DomainTabName = (typeof domainPageTabsConfig)[number]['key'];
+import { type DomainPageTabName } from '../domain-page-tabs/domain-page-tabs.types';
 
 export type DomainPageContentParams = {
   domain: string;
   cluster: string;
-  domainTab: DomainTabName;
+  domainTab: DomainPageTabName;
 };
 
 export type Props = {
@@ -16,8 +14,3 @@ export type DomainPageTabContentProps = {
   domain: string;
   cluster: string;
 };
-
-export type DomainPageTabsContentConfig = Record<
-  DomainTabName,
-  React.ComponentType<DomainPageTabContentProps>
->;

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

@@ -5,7 +5,6 @@ import * as navigationModule from 'next/navigation';
 import { render, screen } from '@/test-utils/rtl';
 
 import DomainPageTabsError from '../domain-page-tabs-error';
-import type { DomainPageTabsErrorConfig } from '../domain-page-tabs-error.types';
 
 jest.mock('@/components/error-panel/error-panel', () =>
   jest.fn(({ message }: { message: string }) => <div>{message}</div>)
@@ -21,22 +20,30 @@ jest.mock('next/navigation', () => ({
 }));
 
 jest.mock(
-  '../../config/domain-page-tabs-error.config',
+  '../../config/domain-page-tabs.config',
   () =>
     ({
-      workflows: () => ({
-        message: 'workflow error',
-      }),
-      metadata: () => ({
-        message: 'metadata error',
-      }),
-      settings: () => ({
-        message: 'settings error',
-      }),
-      archival: () => ({
-        message: 'archival error',
-      }),
-    }) as const satisfies DomainPageTabsErrorConfig
+      workflows: {
+        getErrorConfig: () => ({
+          message: 'workflow error',
+        }),
+      },
+      metadata: {
+        getErrorConfig: () => ({
+          message: 'metadata error',
+        }),
+      },
+      settings: {
+        getErrorConfig: () => ({
+          message: 'settings error',
+        }),
+      },
+      archival: {
+        getErrorConfig: () => ({
+          message: 'archival error',
+        }),
+      },
+    }) as const
 );
 
 describe(DomainPageTabsError.name, () => {

src/views/domain-page/domain-page-content/domain-page-content.types.ts

@@ -3,16 +3,16 @@ import { useParams } from 'next/navigation';
 import ErrorPanel from '@/components/error-panel/error-panel';
 import PanelSection from '@/components/panel-section/panel-section';
 
-import domainPageTabsErrorConfig from '../config/domain-page-tabs-error.config';
-import { type DomainTabName } from '../domain-page-content/domain-page-content.types';
+import domainPageTabsConfig from '../config/domain-page-tabs.config';
+import { type DomainPageContentParams } from '../domain-page-content/domain-page-content.types';
 
 import { type Props } from './domain-page-tabs-error.types';
 
 export default function DomainPageTabsError({ error, reset }: Props) {
-  const { domainTab } = useParams();
-  const getConfig = domainPageTabsErrorConfig[domainTab as DomainTabName];
+  const { domainTab } = useParams<DomainPageContentParams>();
+  const tabConfig = domainPageTabsConfig[domainTab];
 
-  if (typeof getConfig !== 'function') {
+  if (!tabConfig) {
     return (
       <PanelSection>
         <ErrorPanel
@@ -24,7 +24,8 @@ export default function DomainPageTabsError({ error, reset }: Props) {
     );
   }
 
-  const errorConfig = getConfig(error);
+  const errorConfig = tabConfig.getErrorConfig(error);
+
   return (
     <PanelSection>
       <ErrorPanel

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

@@ -1,14 +1,7 @@
 import { type Props as ErrorPanelProps } from '@/components/error-panel/error-panel.types';
 
-import { type DomainTabName } from '../domain-page-content/domain-page-content.types';
-
 export type DomainPageTabErrorConfig = Omit<ErrorPanelProps, 'error' | 'reset'>;
 
-export type DomainPageTabsErrorConfig = Record<
-  DomainTabName,
-  (err: Error) => DomainPageTabErrorConfig
->;
-
 export type Props = {
   error: Error;
   reset: () => void;

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

@@ -2,8 +2,6 @@ import React from 'react';
 
 import { render, screen, act, fireEvent } from '@/test-utils/rtl';
 
-import { type PageTab } from '@/components/page-tabs/page-tabs.types';
-
 import domainPageTabsConfig from '../../config/domain-page-tabs.config';
 import DomainPageTabs from '../domain-page-tabs';
 
@@ -25,17 +23,15 @@ jest.mock('next/navigation', () => ({
   }),
 }));
 
-jest.mock('../../config/domain-page-tabs.config', () => [
-  {
-    key: 'workflows',
+jest.mock('../../config/domain-page-tabs.config', () => ({
+  workflows: {
     title: 'Workflows',
     artwork: () => <div data-testid="workflows-artwork" />,
   },
-  {
-    key: 'page-2',
+  'page-2': {
     title: 'Page 2',
   },
-]);
+}));
 
 describe('DomainPageTabs', () => {
   afterEach(() => {
@@ -45,7 +41,7 @@ describe('DomainPageTabs', () => {
   it('renders tabs titles correctly', () => {
     render(<DomainPageTabs />);
 
-    domainPageTabsConfig.forEach(({ title }) => {
+    Object.values(domainPageTabsConfig).forEach(({ title }) => {
       expect(screen.getByText(title)).toBeInTheDocument();
     });
   });
@@ -90,7 +86,7 @@ describe('DomainPageTabs', () => {
   it('renders tabs artworks correctly', () => {
     render(<DomainPageTabs />);
 
-    domainPageTabsConfig.forEach(({ key, artwork }: PageTab) => {
+    Object.entries(domainPageTabsConfig).forEach(([key, { artwork }]) => {
       if (typeof artwork !== 'undefined')
         expect(screen.getByTestId(`${key}-artwork`)).toBeInTheDocument();
       else