feat(schedule-details): SLICE-1 — route shell with breadcrumbs, tabs, redirect

Add the App Router page structure and view for the schedule detail page:

- Route group (Schedule) with layout, bare-id redirect, tab page, error + loading
- ScheduleDetailPage layout (header + tabs + children)
- ScheduleDetailPageHeader breadcrumbs: logo → domain → Schedules list → scheduleId
- ScheduleDetailPageTabs client component (overview / backfills / input / runs)
- ScheduleDetailPageTabContent: placeholder per tab; notFound() for unknown slugs
- schedule-detail-tabs.config.ts with DEFAULT_SCHEDULE_DETAIL_TAB = 'overview'
- Browser tests: tab labels, navigation push, breadcrumb hrefs, 404 for bad tab

No API calls in this slice; placeholder content until SLICE-4+ wires describe.

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

Author: Assem-Uber

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

@@ -0,0 +1,4 @@
+'use client';
+import ScheduleDetailPageTabsError from '@/views/domain-schedules/schedule-detail-page/schedule-detail-page-tabs-error';
+
+export default ScheduleDetailPageTabsError;

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

@@ -0,0 +1,3 @@
+import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
+
+export default SectionLoadingIndicator;

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

@@ -0,0 +1,3 @@
+import ScheduleDetailPageTabContent from '@/views/domain-schedules/schedule-detail-page/schedule-detail-page-tab-content';
+
+export default ScheduleDetailPageTabContent;

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

@@ -0,0 +1,3 @@
+import ScheduleDetailPage from '@/views/domain-schedules/schedule-detail-page/schedule-detail-page';
+
+export default ScheduleDetailPage;

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

@@ -0,0 +1,17 @@
+import { redirect } from 'next/navigation';
+
+import { DEFAULT_SCHEDULE_DETAIL_TAB } from '@/views/domain-schedules/schedule-detail-page/schedule-detail-tabs.config';
+
+type Props = {
+  params: {
+    domain: string;
+    cluster: string;
+    scheduleId: string;
+  };
+};
+
+export default function ScheduleDetailRedirectPage({ params }: Props) {
+  redirect(
+    `/domains/${encodeURIComponent(params.domain)}/${encodeURIComponent(params.cluster)}/schedules/${encodeURIComponent(params.scheduleId)}/${DEFAULT_SCHEDULE_DETAIL_TAB}`
+  );
+}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import ScheduleDetailPageHeader from '../schedule-detail-page-header';
+
+describe(ScheduleDetailPageHeader.name, () => {
+  it('renders breadcrumb with domain link', () => {
+    setup();
+
+    const domainLink = screen.getByRole('link', { name: 'test-domain' });
+    expect(domainLink).toBeInTheDocument();
+    expect(domainLink).toHaveAttribute(
+      'href',
+      '/domains/test-domain/test-cluster'
+    );
+  });
+
+  it('renders breadcrumb schedules list link', () => {
+    setup();
+
+    const schedulesLink = screen.getByRole('link', { name: 'Schedules' });
+    expect(schedulesLink).toBeInTheDocument();
+    expect(schedulesLink).toHaveAttribute(
+      'href',
+      '/domains/test-domain/test-cluster/schedules'
+    );
+  });
+
+  it('renders schedule id as last breadcrumb', () => {
+    setup();
+
+    expect(screen.getByText('my-schedule-id')).toBeInTheDocument();
+  });
+
+  it('encodes special characters in domain and cluster links', () => {
+    setup({ domain: 'my domain', cluster: 'my cluster' });
+
+    const domainLink = screen.getByRole('link', { name: 'my domain' });
+    expect(domainLink).toHaveAttribute(
+      'href',
+      '/domains/my%20domain/my%20cluster'
+    );
+  });
+});
+
+function setup({
+  domain = 'test-domain',
+  cluster = 'test-cluster',
+  scheduleId = 'my-schedule-id',
+}: {
+  domain?: string;
+  cluster?: string;
+  scheduleId?: string;
+} = {}) {
+  render(
+    <ScheduleDetailPageHeader
+      domain={domain}
+      cluster={cluster}
+      scheduleId={scheduleId}
+    />
+  );
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import { type ScheduleDetailPageParams } from '../schedule-detail-page.types';
+import ScheduleDetailPageTabContent from '../schedule-detail-page-tab-content';
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  notFound: jest.fn(() => {
+    throw new Error('NEXT_NOT_FOUND');
+  }),
+}));
+
+describe(ScheduleDetailPageTabContent.name, () => {
+  it('renders placeholder for overview tab', () => {
+    setup({ scheduleTab: 'overview' });
+
+    expect(screen.getByText(/Overview/i)).toBeInTheDocument();
+  });
+
+  it('renders placeholder for backfills tab', () => {
+    setup({ scheduleTab: 'backfills' });
+
+    expect(screen.getByText(/Backfills/i)).toBeInTheDocument();
+  });
+
+  it('renders placeholder for input tab', () => {
+    setup({ scheduleTab: 'input' });
+
+    expect(screen.getByText(/Input/i)).toBeInTheDocument();
+  });
+
+  it('renders placeholder for runs tab', () => {
+    setup({ scheduleTab: 'runs' });
+
+    expect(screen.getByText(/Runs/i)).toBeInTheDocument();
+  });
+
+  it('calls notFound for unknown tab slug', () => {
+    const { notFound } = jest.requireMock('next/navigation');
+
+    expect(() =>
+      setup({
+        scheduleTab: 'unknown-tab' as ScheduleDetailPageParams['scheduleTab'],
+      })
+    ).toThrow('NEXT_NOT_FOUND');
+    expect(notFound).toHaveBeenCalled();
+  });
+});
+
+function setup({
+  scheduleTab = 'overview',
+}: {
+  scheduleTab?: ScheduleDetailPageParams['scheduleTab'];
+} = {}) {
+  render(
+    <ScheduleDetailPageTabContent
+      params={{
+        domain: 'test-domain',
+        cluster: 'test-cluster',
+        scheduleId: 'my-schedule',
+        scheduleTab,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { fireEvent, render, screen, act } 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 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 when a tab is clicked', () => {
+    setup();
+
+    act(() => {
+      fireEvent.click(screen.getByText('Backfills'));
+    });
+
+    expect(mockPushFn).toHaveBeenCalledWith('backfills');
+  });
+});
+
+function setup() {
+  render(<ScheduleDetailPageTabs />);
+}

src/views/domain-schedules/schedule-detail-page/schedule-detail-page-header.styles.ts

@@ -0,0 +1,28 @@
+import { type BreadcrumbsOverrides } from 'baseui/breadcrumbs';
+
+import type {
+  StyletronCSSObject,
+  StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+const cssStylesObj = {
+  breadcrumbItemContainer: () => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+  cssStylesObj;
+
+export const overrides: { breadcrumbs: BreadcrumbsOverrides } = {
+  breadcrumbs: {
+    Root: {
+      style: () => ({
+        display: 'flex',
+        alignItems: 'center',
+      }),
+    },
+  },
+};

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

@@ -0,0 +1,55 @@
+'use client';
+import React from 'react';
+
+import { Breadcrumbs } from 'baseui/breadcrumbs';
+import { StyledLink } from 'baseui/link';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import cadenceLogoBlack from '@/assets/cadence-logo-black.svg';
+import PageSection from '@/components/page-section/page-section';
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+import { type DomainPageTabName } from '@/views/domain-page/domain-page-tabs/domain-page-tabs.types';
+
+import { cssStyles, overrides } from './schedule-detail-page-header.styles';
+
+type Props = {
+  domain: string;
+  cluster: string;
+  scheduleId: string;
+};
+
+export default function ScheduleDetailPageHeader({
+  domain,
+  cluster,
+  scheduleId,
+}: Props) {
+  const { cls } = useStyletronClasses(cssStyles);
+  const domainLink = `/domains/${encodeURIComponent(domain)}/${encodeURIComponent(cluster)}`;
+  const schedulesListLink = `${domainLink}/${'schedules' satisfies DomainPageTabName}`;
+
+  return (
+    <PageSection>
+      <Breadcrumbs
+        overrides={overrides.breadcrumbs}
+        showTrailingSeparator={false}
+      >
+        <div className={cls.breadcrumbItemContainer}>
+          <Image
+            width={22}
+            height={22}
+            alt="Cadence Icon"
+            src={cadenceLogoBlack}
+          />
+          <StyledLink $as={Link} href={domainLink}>
+            {domain}
+          </StyledLink>
+        </div>
+        <StyledLink $as={Link} href={schedulesListLink}>
+          Schedules
+        </StyledLink>
+        <div>{scheduleId}</div>
+      </Breadcrumbs>
+    </PageSection>
+  );
+}