feat: New Cron Tab (#1078)

Signed-off-by: Tim Chan <[email protected]>

Author: macrotim

src/views/domain-cron-list/domain-cron-list.styles.ts

@@ -0,0 +1,11 @@
+import { styled as createStyled, type Theme } from 'baseui';
+
+export const styled = {
+  DomainCronListContainer: createStyled(
+    'div',
+    ({ $theme }: { $theme: Theme }) => ({
+      marginTop: $theme.sizing.scale950,
+      marginBottom: $theme.sizing.scale900,
+    })
+  ),
+};

src/views/domain-cron-list/domain-cron-list.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { styled } from './domain-cron-list.styles';
+
+export default function DomainCronList() {
+  return (
+    <styled.DomainCronListContainer>
+      Cron List, Coming Soon!
+    </styled.DomainCronListContainer>
+  );
+}

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

@@ -4,8 +4,10 @@ import {
   MdSettings,
   MdSort,
   MdSyncAlt,
+  MdSchedule,
 } from 'react-icons/md';
 
+import DomainCronList from '@/views/domain-cron-list/domain-cron-list';
 import DomainWorkflows from '@/views/domain-workflows/domain-workflows';
 import DomainWorkflowsArchival from '@/views/domain-workflows-archival/domain-workflows-archival';
 
@@ -15,7 +17,7 @@ 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' | 'failovers' | 'settings' | 'archival'
+  'workflows' | 'cron-list' | 'metadata' | 'failovers' | 'settings' | 'archival'
 > = {
   workflows: {
     title: 'Workflows',
@@ -26,6 +28,15 @@ const domainPageTabsConfig: DomainPageTabsConfig<
       actions: [{ kind: 'retry', label: 'Retry' }],
     }),
   },
+  'cron-list': {
+    title: 'Cron',
+    artwork: MdSchedule,
+    content: DomainCronList,
+    getErrorConfig: () => ({
+      message: 'Failed to load cron list',
+      actions: [{ kind: 'retry', label: 'Retry' }],
+    }),
+  },
   metadata: {
     title: 'Metadata',
     artwork: MdListAlt,

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

@@ -40,6 +40,10 @@ jest.mock('../../config/domain-page-tabs.config', () => ({
     title: 'Workflows',
     artwork: () => <div data-testid="workflows-artwork" />,
   },
+  'cron-list': {
+    title: 'Cron',
+    artwork: () => <div data-testid="cron-list-artwork" />,
+  },
   metadata: {
     title: 'Metadata',
     artwork: () => <div data-testid="metadata-artwork" />,
@@ -67,28 +71,34 @@ describe(DomainPageTabs.name, () => {
     jest.clearAllMocks();
   });
 
-  it('renders tabs titles correctly with failover history disabled', async () => {
-    await setup({ enableFailoverHistory: false });
+  it('renders tabs titles correctly', async () => {
+    await setup();
 
     expect(screen.getByText('Workflows')).toBeInTheDocument();
     expect(screen.getByText('Metadata')).toBeInTheDocument();
     expect(screen.getByText('Settings')).toBeInTheDocument();
     expect(screen.getByText('Archival')).toBeInTheDocument();
+
+    expect(screen.queryByText('Cron')).toBeNull();
     expect(screen.queryByText('Failovers')).toBeNull();
   });
 
-  it('renders tabs with failover history enabled', async () => {
-    await setup({ enableFailoverHistory: true });
+  it('renders tabs with cron and failover history enabled', async () => {
+    await setup({
+      enableFailoverHistory: true,
+      enableCronList: true,
+    });
 
     expect(screen.getByText('Workflows')).toBeInTheDocument();
+    expect(screen.getByText('Cron')).toBeInTheDocument();
     expect(screen.getByText('Metadata')).toBeInTheDocument();
     expect(screen.getByText('Failovers')).toBeInTheDocument();
     expect(screen.getByText('Settings')).toBeInTheDocument();
     expect(screen.getByText('Archival')).toBeInTheDocument();
   });
 
   it('reroutes when new tab is clicked', async () => {
-    const { user } = await setup({ enableFailoverHistory: false });
+    const { user } = await setup();
 
     const metadataTab = await screen.findByText('Metadata');
     await user.click(metadataTab);
@@ -108,7 +118,7 @@ describe(DomainPageTabs.name, () => {
       writable: true,
     });
 
-    const { user } = await setup({ enableFailoverHistory: false });
+    const { user } = await setup();
 
     const metadataTab = await screen.findByText('Metadata');
     await user.click(metadataTab);
@@ -121,7 +131,7 @@ describe(DomainPageTabs.name, () => {
   });
 
   it('renders tabs artworks correctly', async () => {
-    await setup({ enableFailoverHistory: false });
+    await setup();
 
     expect(screen.getByTestId('workflows-artwork')).toBeInTheDocument();
     expect(screen.getByTestId('metadata-artwork')).toBeInTheDocument();
@@ -152,13 +162,12 @@ describe(DomainPageTabs.name, () => {
   });
 });
 
-async function setup({
-  error,
-  enableFailoverHistory,
-}: {
+async function setup(opts?: {
   error?: boolean;
   enableFailoverHistory?: boolean;
+  enableCronList?: boolean;
 }) {
+  const { error, enableFailoverHistory, enableCronList } = opts ?? {};
   const user = userEvent.setup();
 
   render(
@@ -183,8 +192,10 @@ async function setup({
               );
             } else {
               return HttpResponse.json(
-                (enableFailoverHistory ??
-                  false) satisfies GetConfigResponse<'FAILOVER_HISTORY_ENABLED'>
+                ((enableFailoverHistory ??
+                  false) satisfies GetConfigResponse<'FAILOVER_HISTORY_ENABLED'>) ||
+                  ((enableCronList ??
+                    false) satisfies GetConfigResponse<'CRON_LIST_ENABLED'>)
               );
             }
           },

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

@@ -27,15 +27,22 @@ export default function DomainPageTabs() {
     'FAILOVER_HISTORY_ENABLED'
   );
 
+  const { data: isCronListEnabled } =
+    useSuspenseConfigValue('CRON_LIST_ENABLED');
+
   const tabsConfig = useMemo<Partial<typeof domainPageTabsConfig>>(() => {
     const tabsToHide: Array<DomainPageTabName> = [];
 
     if (!isFailoverHistoryEnabled) {
       tabsToHide.push('failovers');
     }
 
+    if (!isCronListEnabled) {
+      tabsToHide.push('cron-list');
+    }
+
     return omit(domainPageTabsConfig, tabsToHide);
-  }, [isFailoverHistoryEnabled]);
+  }, [isFailoverHistoryEnabled, isCronListEnabled]);
 
   const tabList = useMemo(
     () =>