Consolidate Workflow Page Tabs, Content and Error configs into single file (#944)

- Create combined config for Workflow Page Tabs, Content, and Error, to make it easier to update and add extra tabs behind feature flags
- Memoize the tab list in Domain Page Tabs as well

Author: adhityamamallan

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

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useRouter, useParams } from 'next/navigation';
 
@@ -17,17 +17,21 @@ export default function DomainPageTabs() {
   const params = useParams<DomainPageTabsParams>();
   const decodedParams = decodeUrlParams(params) as DomainPageTabsParams;
 
+  const tabList = useMemo(
+    () =>
+      Object.entries(domainPageTabsConfig).map(([key, tabConfig]) => ({
+        key,
+        title: tabConfig.title,
+        artwork: tabConfig.artwork,
+      })),
+    []
+  );
+
   return (
     <styled.PageTabsContainer>
       <PageTabs
         selectedTab={decodedParams.domainTab}
-        tabList={Object.entries(domainPageTabsConfig).map(
-          ([key, tabConfig]) => ({
-            key,
-            title: tabConfig.title,
-            artwork: tabConfig.artwork,
-          })
-        )}
+        tabList={tabList}
         setSelectedTab={(newTab) => {
           router.push(
             `${encodeURIComponent(newTab.toString())}${window.location.search}`

src/views/workflow-page/__fixtures__/workflow-page-tabs-config.ts

@@ -0,0 +1,40 @@
+import { createElement } from 'react';
+
+import type { WorkflowPageTabContentProps } from '../workflow-page-tab-content/workflow-page-tab-content.types';
+import { type WorkflowPageTabsConfig } from '../workflow-page-tabs/workflow-page-tabs.types';
+
+export const mockWorkflowPageTabsConfig: WorkflowPageTabsConfig<
+  'summary' | 'history' | 'queries' | 'stack-trace'
+> = {
+  summary: {
+    title: 'Summary',
+    artwork: () => createElement('div', { 'data-testid': 'summary-artwork' }),
+    content: ({ params }: WorkflowPageTabContentProps) =>
+      createElement('div', {}, JSON.stringify(params)),
+    getErrorConfig: () => ({ message: 'summary error' }),
+  },
+  history: {
+    title: 'History',
+    artwork: () => createElement('div', { 'data-testid': 'history-artwork' }),
+    endEnhancer: () =>
+      createElement('div', { 'data-testid': 'history-end-enhancer' }),
+    content: ({ params }: WorkflowPageTabContentProps) =>
+      createElement('div', {}, JSON.stringify(params)),
+    getErrorConfig: () => ({ message: 'history error' }),
+  },
+  queries: {
+    title: 'Queries',
+    artwork: () => createElement('div', { 'data-testid': 'queries-artwork' }),
+    content: ({ params }: WorkflowPageTabContentProps) =>
+      createElement('div', {}, JSON.stringify(params)),
+    getErrorConfig: () => ({ message: 'queries error' }),
+  },
+  'stack-trace': {
+    title: 'Stack Trace',
+    artwork: () =>
+      createElement('div', { 'data-testid': 'stack-trace-artwork' }),
+    content: ({ params }: WorkflowPageTabContentProps) =>
+      createElement('div', {}, JSON.stringify(params)),
+    getErrorConfig: () => ({ message: 'stack trace error' }),
+  },
+} as const;

src/views/workflow-page/config/workflow-page-tabs-contents-map.config.ts

@@ -5,31 +5,63 @@ import {
   MdOutlineTerminal,
 } from 'react-icons/md';
 
+import WorkflowHistory from '@/views/workflow-history/workflow-history';
+import WorkflowQueries from '@/views/workflow-queries/workflow-queries';
+import WorkflowStackTrace from '@/views/workflow-stack-trace/workflow-stack-trace';
+import WorkflowSummaryTab from '@/views/workflow-summary-tab/workflow-summary-tab';
+
+import getWorkflowPageErrorConfig from '../helpers/get-workflow-page-error-config';
 import WorkflowPagePendingEventsBadge from '../workflow-page-pending-events-badge/workflow-page-pending-events-badge';
-import type { WorkflowPageTabs } from '../workflow-page-tabs/workflow-page-tabs.types';
+import type { WorkflowPageTabsConfig } from '../workflow-page-tabs/workflow-page-tabs.types';
 
-const workflowPageTabsConfig = [
-  {
-    key: 'summary',
+const workflowPageTabsConfig: WorkflowPageTabsConfig<
+  'summary' | 'history' | 'queries' | 'stack-trace'
+> = {
+  summary: {
     title: 'Summary',
     artwork: MdListAlt,
+    content: WorkflowSummaryTab,
+    getErrorConfig: (err) =>
+      getWorkflowPageErrorConfig(
+        err,
+        'Failed to load workflow summary',
+        'summary'
+      ),
   },
-  {
-    key: 'history',
+  history: {
     title: 'History',
     endEnhancer: WorkflowPagePendingEventsBadge,
     artwork: MdOutlineHistory,
+    content: WorkflowHistory,
+    getErrorConfig: (err) =>
+      getWorkflowPageErrorConfig(
+        err,
+        'Failed to load workflow history',
+        'history'
+      ),
   },
-  {
-    key: 'queries',
+  queries: {
     title: 'Queries',
     artwork: MdOutlineManageSearch,
+    content: WorkflowQueries,
+    getErrorConfig: (err) =>
+      getWorkflowPageErrorConfig(
+        err,
+        'Failed to load workflow queries',
+        'queries'
+      ),
   },
-  {
-    key: 'stack-trace',
+  'stack-trace': {
     title: 'Stack Trace',
     artwork: MdOutlineTerminal,
+    content: WorkflowStackTrace,
+    getErrorConfig: (err) =>
+      getWorkflowPageErrorConfig(
+        err,
+        'Failed to load workflow stack trace',
+        'stack trace'
+      ),
   },
-] as const satisfies WorkflowPageTabs;
+} as const;
 
 export default workflowPageTabsConfig;

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

@@ -2,14 +2,14 @@ import React from 'react';
 
 import { render } from '@/test-utils/rtl';
 
+import { mockWorkflowPageTabsConfig } from '../../__fixtures__/workflow-page-tabs-config';
 import WorkflowPageTabContent from '../workflow-page-tab-content';
 import type { WorkflowPageTabContentProps } from '../workflow-page-tab-content.types';
 
-jest.mock('../../config/workflow-page-tabs-contents-map.config', () => ({
-  summary: ({ params }: WorkflowPageTabContentProps) => (
-    <div>{JSON.stringify(params)}</div>
-  ),
-}));
+jest.mock(
+  '../../config/workflow-page-tabs.config',
+  () => mockWorkflowPageTabsConfig
+);
 
 const params: WorkflowPageTabContentProps['params'] = {
   cluster: 'example-cluster',
@@ -20,15 +20,15 @@ const params: WorkflowPageTabContentProps['params'] = {
 };
 
 describe('WorkflowPageTabContent', () => {
-  it('renders tab content with correct params when workflowTab exists in contentsMap', () => {
+  it('renders tab content with correct params when workflowTab exists in config', () => {
     const { getByText } = render(<WorkflowPageTabContent params={params} />);
     expect(getByText(JSON.stringify(params))).toBeInTheDocument();
   });
 
-  it('does not return any tab cotent if workflowTab is not present in the contentsMap', () => {
-    const paramsWithoutTabContent = { ...params, workflowTab: 'unkown-tab' };
+  it('does not return any tab content if workflowTab is not present in the config', () => {
+    const paramsWithoutTabContent = { ...params, workflowTab: 'unknown-tab' };
     const { container } = render(
-      //@ts-expect-error allow passing unknown workflowtab to test recieving wrong value as a param
+      // @ts-expect-error allow passing unknown workflowtab to test receiving wrong value as a param
       <WorkflowPageTabContent params={paramsWithoutTabContent} />
     );
     expect(container.firstChild?.textContent).toBe('');

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

@@ -3,15 +3,16 @@ import React from 'react';
 
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 
-import workflowPageTabsContentsMapConfig from '../config/workflow-page-tabs-contents-map.config';
+import workflowPageTabsConfig from '../config/workflow-page-tabs.config';
 
 import { cssStyles } from './workflow-page-tab-content.styles';
 import type { Props } from './workflow-page-tab-content.types';
 
 export default function WorkflowPageTabContent({ params }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
   const selectedWorkflowTabName = params.workflowTab;
-  const TabContent = workflowPageTabsContentsMapConfig[selectedWorkflowTabName];
+  const TabContent = workflowPageTabsConfig[selectedWorkflowTabName]?.content;
+
   if (TabContent)
     return (
       <div className={cls.tabContentContainer}>

src/views/workflow-page/workflow-page-tab-content/__tests__/workflow-page-tab-content.test.tsx

@@ -1,14 +1,11 @@
-import type workflowPageTabsConfig from '../config/workflow-page-tabs.config';
-import type { WorkflowPageTabsParams } from '../workflow-page-tabs/workflow-page-tabs.types';
+import type {
+  WorkflowPageTabName,
+  WorkflowPageTabsParams,
+} from '../workflow-page-tabs/workflow-page-tabs.types';
 
-export type WorkflowPageTabName =
-  (typeof workflowPageTabsConfig)[number]['key'];
-
-export type WorkflowPageTabsContentsMap = {
-  [k in (typeof workflowPageTabsConfig)[number]['key']]:
-    | React.ComponentType<WorkflowPageTabContentProps>
-    | ((props: WorkflowPageTabContentProps) => React.ReactNode);
-};
+export type WorkflowPageTabContent =
+  | React.ComponentType<WorkflowPageTabContentProps>
+  | ((props: WorkflowPageTabContentProps) => React.ReactNode);
 
 export type WorkflowPageTabContentParams = {
   domain: string;

src/views/workflow-page/workflow-page-tab-content/workflow-page-tab-content.tsx

@@ -4,8 +4,8 @@ import * as navigationModule from 'next/navigation';
 
 import { render, screen } from '@/test-utils/rtl';
 
+import { mockWorkflowPageTabsConfig } from '../../__fixtures__/workflow-page-tabs-config';
 import WorkflowPageTabsError from '../workflow-page-tabs-error';
-import type { WorkflowPageTabsErrorConfig } from '../workflow-page-tabs-error.types';
 
 jest.mock('@/components/error-panel/error-panel', () =>
   jest.fn(({ message }: { message: string }) => <div>{message}</div>)
@@ -21,22 +21,8 @@ jest.mock('next/navigation', () => ({
 }));
 
 jest.mock(
-  '../../config/workflow-page-tabs-error.config',
-  () =>
-    ({
-      summary: () => ({
-        message: 'summary error',
-      }),
-      history: () => ({
-        message: 'history error',
-      }),
-      queries: () => ({
-        message: 'queries error',
-      }),
-      'stack-trace': () => ({
-        message: 'stack trace error',
-      }),
-    }) as const satisfies WorkflowPageTabsErrorConfig
+  '../../config/workflow-page-tabs.config',
+  () => mockWorkflowPageTabsConfig
 );
 
 describe('WorkflowPageTabsError', () => {

src/views/workflow-page/workflow-page-tab-content/workflow-page-tab-content.types.ts

@@ -3,15 +3,15 @@ import { useParams } from 'next/navigation';
 import ErrorPanel from '@/components/error-panel/error-panel';
 import PanelSection from '@/components/panel-section/panel-section';
 
-import workflowPageTabsErrorConfig from '../config/workflow-page-tabs-error.config';
-import { type WorkflowPageTabName } from '../workflow-page-tab-content/workflow-page-tab-content.types';
+import workflowPageTabsConfig from '../config/workflow-page-tabs.config';
+import { type WorkflowPageTabName } from '../workflow-page-tabs/workflow-page-tabs.types';
 
 import { type Props } from './workflow-page-tabs-error.types';
 
 export default function WorkflowPageTabsError({ error, reset }: Props) {
   const { workflowTab } = useParams();
   const getConfig =
-    workflowPageTabsErrorConfig[workflowTab as WorkflowPageTabName];
+    workflowPageTabsConfig[workflowTab as WorkflowPageTabName]?.getErrorConfig;
 
   if (typeof getConfig !== 'function') {
     return (