feat(schedule-details): PR01c — ScheduleDetailPageTabs + TabsError components

Add tabs navigation and error boundary components, each in their own directory,
and wire both into ScheduleDetailPage:

- schedule-detail-page-tabs/: ScheduleDetailPageTabs client component — reads
  scheduleTab from URL params, renders PageTabs with overview/backfills/input/runs,
  router.push(encodeURIComponent(tab)) on selection; types file
- schedule-detail-page-tabs-error/: ScheduleDetailPageTabsError — ErrorPanel +
  PanelSection wrapper with "Failed to load schedule content" copy; types file
- schedule-detail-page.tsx: now renders <ScheduleDetailPageTabs /> between header
  and {children}
- [scheduleTab]/error.tsx: imports from schedule-detail-page-tabs-error/ (proper
  component directory, replaces inline definition from PR01a)

Tests: tab labels rendered, router.push called on click, error message + Retry
button visible, reset callback invoked

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Assem-Uber

src/app/(Home)/(Schedule)/domains/[domain]/[cluster]/schedules/[scheduleId]/[scheduleTab]/error.tsx

@@ -1,23 +1,4 @@
 'use client';
-import React from 'react';
+import ScheduleDetailPageTabsError from '@/views/domain-schedules/schedule-detail-page-tabs-error/schedule-detail-page-tabs-error';
 
-import ErrorPanel from '@/components/error-panel/error-panel';
-import PanelSection from '@/components/panel-section/panel-section';
-
-type Props = {
-  error: Error;
-  reset: () => void;
-};
-
-export default function ScheduleDetailPageError({ error, reset }: Props) {
-  return (
-    <PanelSection>
-      <ErrorPanel
-        error={error}
-        message="Failed to load schedule content"
-        actions={[{ kind: 'retry', label: 'Retry' }]}
-        reset={reset}
-      />
-    </PanelSection>
-  );
-}
+export default ScheduleDetailPageTabsError;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useRouter: () => ({
+    push: jest.fn(),
+    back: jest.fn(),
+    replace: jest.fn(),
+    forward: jest.fn(),
+    prefetch: jest.fn(),
+    refresh: jest.fn(),
+  }),
+}));
+
+import ScheduleDetailPageTabsError from '../schedule-detail-page-tabs-error';
+
+describe(ScheduleDetailPageTabsError.name, () => {
+  it('renders the error message', () => {
+    setup();
+
+    expect(
+      screen.getByText('Failed to load schedule content')
+    ).toBeInTheDocument();
+  });
+
+  it('renders a Retry button', () => {
+    setup();
+
+    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
+  });
+
+  it('calls reset when Retry is clicked', async () => {
+    const reset = jest.fn();
+    const { user } = setup({ reset });
+
+    await user.click(screen.getByRole('button', { name: 'Retry' }));
+
+    expect(reset).toHaveBeenCalledTimes(1);
+  });
+});
+
+function setup({
+  error = new Error('Something went wrong'),
+  reset = jest.fn(),
+}: {
+  error?: Error;
+  reset?: jest.Mock;
+} = {}) {
+  const user = userEvent.setup();
+  render(<ScheduleDetailPageTabsError error={error} reset={reset} />);
+  return { user };
+}

src/views/domain-schedules/schedule-detail-page-tabs-error/schedule-detail-page-tabs-error.tsx

@@ -0,0 +1,20 @@
+'use client';
+import React from 'react';
+
+import ErrorPanel from '@/components/error-panel/error-panel';
+import PanelSection from '@/components/panel-section/panel-section';
+
+import { type Props } from './schedule-detail-page-tabs-error.types';
+
+export default function ScheduleDetailPageTabsError({ error, reset }: Props) {
+  return (
+    <PanelSection>
+      <ErrorPanel
+        error={error}
+        message="Failed to load schedule content"
+        actions={[{ kind: 'retry', label: 'Retry' }]}
+        reset={reset}
+      />
+    </PanelSection>
+  );
+}

src/views/domain-schedules/schedule-detail-page-tabs-error/schedule-detail-page-tabs-error.types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  error: Error;
+  reset: () => void;
+};

src/views/domain-schedules/schedule-detail-page-tabs/__tests__/schedule-detail-page-tabs.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { act, fireEvent, render, screen } from '@/test-utils/rtl';
+
+import ScheduleDetailPageTabs from '../schedule-detail-page-tabs';
+
+const mockPushFn = jest.fn();
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useRouter: () => ({
+    push: mockPushFn,
+    back: jest.fn(),
+    replace: jest.fn(),
+    forward: jest.fn(),
+    prefetch: jest.fn(),
+    refresh: jest.fn(),
+  }),
+  useParams: () => ({
+    domain: 'test-domain',
+    cluster: 'test-cluster',
+    scheduleId: 'my-schedule',
+    scheduleTab: 'overview',
+  }),
+}));
+
+describe(ScheduleDetailPageTabs.name, () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all four tab titles', () => {
+    setup();
+
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+    expect(screen.getByText('Backfills')).toBeInTheDocument();
+    expect(screen.getByText('Input')).toBeInTheDocument();
+    expect(screen.getByText('Runs')).toBeInTheDocument();
+  });
+
+  it('navigates with router.push when a tab is clicked', () => {
+    setup();
+
+    act(() => {
+      fireEvent.click(screen.getByText('Backfills'));
+    });
+
+    expect(mockPushFn).toHaveBeenCalledWith('backfills');
+  });
+
+  it('navigates to runs tab when clicked', () => {
+    setup();
+
+    act(() => {
+      fireEvent.click(screen.getByText('Runs'));
+    });
+
+    expect(mockPushFn).toHaveBeenCalledWith('runs');
+  });
+});
+
+function setup() {
+  render(<ScheduleDetailPageTabs />);
+}

src/views/domain-schedules/schedule-detail-page-tabs/schedule-detail-page-tabs.tsx

@@ -0,0 +1,37 @@
+'use client';
+import React, { useMemo } from 'react';
+
+import { useParams, useRouter } from 'next/navigation';
+
+import PageTabs from '@/components/page-tabs/page-tabs';
+import decodeUrlParams from '@/utils/decode-url-params';
+
+import scheduleDetailTabsConfig from '../schedule-detail-page/schedule-detail-tabs.config';
+
+import { type ScheduleDetailPageTabsParams } from './schedule-detail-page-tabs.types';
+
+export default function ScheduleDetailPageTabs() {
+  const router = useRouter();
+  const params = useParams<ScheduleDetailPageTabsParams>();
+  const decodedParams = decodeUrlParams(params) as ScheduleDetailPageTabsParams;
+
+  const tabList = useMemo(
+    () =>
+      Object.entries(scheduleDetailTabsConfig).map(([key, tabConfig]) => ({
+        key,
+        title: tabConfig.title,
+        artwork: tabConfig.artwork,
+      })),
+    []
+  );
+
+  return (
+    <PageTabs
+      selectedTab={decodedParams.scheduleTab}
+      tabList={tabList}
+      setSelectedTab={(newTab) => {
+        router.push(encodeURIComponent(newTab.toString()));
+      }}
+    />
+  );
+}

src/views/domain-schedules/schedule-detail-page-tabs/schedule-detail-page-tabs.types.ts

@@ -0,0 +1,8 @@
+import { type ScheduleDetailTabName } from '../schedule-detail-page/schedule-detail-tabs.config';
+
+export type ScheduleDetailPageTabsParams = {
+  domain: string;
+  cluster: string;
+  scheduleId: string;
+  scheduleTab: ScheduleDetailTabName;
+};

src/views/domain-schedules/schedule-detail-page/schedule-detail-page.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import decodeUrlParams from '@/utils/decode-url-params';
 
 import ScheduleDetailPageHeader from '../schedule-detail-page-header/schedule-detail-page-header';
+import ScheduleDetailPageTabs from '../schedule-detail-page-tabs/schedule-detail-page-tabs';
 
 import { type Props } from './schedule-detail-page.types';
 
@@ -16,6 +17,7 @@ export default function ScheduleDetailPage({ params, children }: Props) {
         cluster={decodedParams.cluster}
         scheduleId={decodedParams.scheduleId}
       />
+      <ScheduleDetailPageTabs />
       {children}
     </>
   );