feat(schedule-details): add schedule input JSON section (SLICE-8 / PR08)

Show decoded workflow input from describe in a collapsible read-only JSON viewer on the details tab, with copy support and graceful handling of missing or non-JSON payloads.

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

Author: Assem-Uber

src/views/schedule-details/__tests__/schedule-details.test.tsx

@@ -116,6 +116,54 @@ describe(ScheduleDetails.name, () => {
     expect(describeResolver).toHaveBeenCalledTimes(1);
   });
 
+
+  it('renders schedule input JSON section when workflow input is present', async () => {
+    setup({
+      describeResolver: () =>
+        HttpResponse.json(
+          getMockRunningDescribeScheduleResponse({
+            action: {
+              startWorkflow: {
+                workflowType: { name: 'ScheduleWorker' },
+                taskList: {
+                  name: 'schedule-task-list',
+                  kind: 'TASK_LIST_KIND_NORMAL',
+                  baseName: 'schedule-task-list',
+                },
+                input: {
+                  data: 'eyJ3b3JrZmxvd0FyZyI6InRlc3QtdmFsdWUifQ==',
+                },
+                workflowIdPrefix: 'schedule-prefix',
+                executionStartToCloseTimeout: null,
+                taskStartToCloseTimeout: null,
+                retryPolicy: null,
+                memo: null,
+                searchAttributes: null,
+              },
+            },
+          })
+        ),
+    });
+
+    expect(
+      await screen.findByRole('heading', { name: 'Schedule input' })
+    ).toBeInTheDocument();
+  });
+
+  it('hides schedule input JSON section when workflow input is absent', async () => {
+    setup({
+      describeResolver: () =>
+        HttpResponse.json(getMockRunningDescribeScheduleResponse()),
+    });
+
+    expect(
+      await screen.findByRole('heading', { name: 'Schedule specifications' })
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('heading', { name: 'Schedule input' })
+    ).not.toBeInTheDocument();
+  });
+
   it('hides optional detail rows when schedule fields are missing', async () => {
     setup({
       describeResolver: () =>

src/views/schedule-details/schedule-details.tsx

@@ -10,6 +10,7 @@ import useDescribeSchedule from '@/views/shared/hooks/use-describe-schedule/use-
 import { type ScheduleDetailRowConfig } from '../schedule-page/config/schedule-detail-sections.types';
 import scheduleDetailsSectionsConfig from '../schedule-page/config/schedule-details-sections.config';
 import SchedulePageBackfillsTable from '../schedule-page/schedule-page-backfills-table/schedule-page-backfills-table';
+import SchedulePageInputJson from '../schedule-page/schedule-page-input-json/schedule-page-input-json';
 import SchedulePageDetailsSection from '../schedule-page/schedule-page-details-section/schedule-page-details-section';
 
 import { cssStyles } from './schedule-details.styles';
@@ -54,6 +55,7 @@ export default function ScheduleDetails({ params }: Props) {
             />
           );
         })}
+        <SchedulePageInputJson input={data.action?.startWorkflow?.input} />
         <SchedulePageBackfillsTable
           backfills={data.info?.ongoingBackfills ?? []}
           domain={params.domain}

src/views/schedule-page/config/schedule-details-formatters.ts

@@ -57,3 +57,9 @@ export function formatScheduleMemo(
   if (values.length === 0) return null;
   return values.join(', ');
 }
+
+export function formatScheduleInput(
+  input: { data?: string | null } | null | undefined
+) {
+  return formatPayload(input);
+}

src/views/schedule-page/schedule-page-input-json/__tests__/schedule-page-input-json.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import SchedulePageInputJson from '../schedule-page-input-json';
+
+jest.mock('@/components/copy-text-button/copy-text-button', () =>
+  jest.fn(({ textToCopy }) => <div>Copy Button: {textToCopy}</div>)
+);
+
+jest.mock('@/components/pretty-json/pretty-json', () =>
+  jest.fn(({ json }) => (
+    <div>PrettyJson Mock: {JSON.stringify(json)}</div>
+  ))
+);
+
+const mockInputPayload = {
+  data: 'eyJ3b3JrZmxvd0FyZyI6InRlc3QtdmFsdWUifQ==',
+};
+
+describe(SchedulePageInputJson.name, () => {
+  it('renders section title when input is present', () => {
+    setup({});
+    expect(
+      screen.getByRole('heading', { name: 'Schedule input' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders parsed JSON via PrettyJson', () => {
+    setup({});
+    expect(
+      screen.getByText(
+        'PrettyJson Mock: {"workflowArg":"test-value"}'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('renders copy button with stringified JSON', () => {
+    setup({});
+    const copyButton = screen.getByText(/Copy Button:/);
+    expect(copyButton).toBeInTheDocument();
+    expect(copyButton.innerHTML).toMatch(
+      JSON.stringify({ workflowArg: 'test-value' }, null, '\t')
+    );
+  });
+
+  it('renders nothing when input is missing', () => {
+    setup({ input: null });
+    expect(
+      screen.queryByRole('heading', { name: 'Schedule input' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when input payload has no data', () => {
+    setup({ input: { data: null } });
+    expect(
+      screen.queryByRole('heading', { name: 'Schedule input' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders non-JSON payload as a string value', () => {
+    setup({
+      input: { data: Buffer.from('plain-text-input').toString('base64') },
+    });
+    expect(
+      screen.getByText('PrettyJson Mock: "plain-text-input"')
+    ).toBeInTheDocument();
+  });
+
+  it('collapses JSON content when toggle button is clicked', async () => {
+    const { user } = setup({});
+    expect(
+      screen.getByText('PrettyJson Mock: {"workflowArg":"test-value"}')
+    ).toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole('button', { name: /collapse schedule input details/i })
+    );
+
+    expect(
+      screen.queryByText('PrettyJson Mock: {"workflowArg":"test-value"}')
+    ).not.toBeInTheDocument();
+  });
+
+  it('expands JSON content again after collapsing', async () => {
+    const { user } = setup({});
+
+    await user.click(
+      screen.getByRole('button', { name: /collapse schedule input details/i })
+    );
+    await user.click(
+      screen.getByRole('button', { name: /expand schedule input details/i })
+    );
+
+    expect(
+      screen.getByText('PrettyJson Mock: {"workflowArg":"test-value"}')
+    ).toBeInTheDocument();
+  });
+});
+
+function setup({
+  input = mockInputPayload,
+}: {
+  input?: { data?: string | null } | null;
+}) {
+  const user = userEvent.setup();
+  render(<SchedulePageInputJson input={input} />);
+  return { user };
+}

src/views/schedule-page/schedule-page-input-json/schedule-page-input-json.styles.ts

@@ -0,0 +1,47 @@
+import { styled as createStyled, type Theme } from 'baseui';
+import { type ButtonOverrides } from 'baseui/button';
+
+import type {
+  StyletronCSSObject,
+  StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+const cssStylesObj = {
+  section: () => ({
+    display: 'flex',
+    flexDirection: 'column',
+  }),
+  jsonContainer: () => ({
+    position: 'relative',
+    width: '100%',
+  }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+  cssStylesObj;
+
+export const styled = {
+  JsonViewContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    padding: $theme.sizing.scale600,
+    backgroundColor: $theme.colors.backgroundSecondary,
+    borderRadius: $theme.borders.radius300,
+    maxHeight: '50vh',
+    overflow: 'auto',
+  })),
+  JsonViewHeader: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    display: 'flex',
+    position: 'absolute',
+    right: $theme.sizing.scale400,
+    top: $theme.sizing.scale400,
+  })),
+};
+
+export const overrides = {
+  copyButton: {
+    BaseButton: {
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+      },
+    },
+  } satisfies ButtonOverrides,
+};

src/views/schedule-page/schedule-page-input-json/schedule-page-input-json.tsx

@@ -0,0 +1,61 @@
+'use client';
+import React, { useMemo } from 'react';
+
+import CopyTextButton from '@/components/copy-text-button/copy-text-button';
+import PrettyJson from '@/components/pretty-json/pretty-json';
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
+
+import { formatScheduleInput } from '../config/schedule-details-formatters';
+import SchedulePageDetailsSectionHeader from '../schedule-page-details-section-header/schedule-page-details-section-header';
+
+import { cssStyles, overrides, styled } from './schedule-page-input-json.styles';
+import { type Props } from './schedule-page-input-json.types';
+
+const SECTION_TITLE = 'Schedule input';
+
+export default function SchedulePageInputJson({ input }: Props) {
+  const { cls } = useStyletronClasses(cssStyles);
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+
+  const parsedInput = useMemo(() => formatScheduleInput(input), [input]);
+
+  const onToggle = React.useCallback(() => {
+    setIsCollapsed((current) => !current);
+  }, []);
+
+  const textToCopy = useMemo(() => {
+    if (parsedInput === null || parsedInput === undefined) {
+      return '';
+    }
+
+    return losslessJsonStringify(parsedInput, null, '\t');
+  }, [parsedInput]);
+
+  if (parsedInput === null || parsedInput === undefined) {
+    return null;
+  }
+
+  return (
+    <section className={cls.section}>
+      <SchedulePageDetailsSectionHeader
+        title={SECTION_TITLE}
+        isCollapsed={isCollapsed}
+        onToggle={onToggle}
+      />
+      {!isCollapsed && (
+        <div className={cls.jsonContainer}>
+          <styled.JsonViewContainer>
+            <styled.JsonViewHeader>
+              <CopyTextButton
+                textToCopy={textToCopy}
+                overrides={overrides.copyButton}
+              />
+            </styled.JsonViewHeader>
+            <PrettyJson json={parsedInput} />
+          </styled.JsonViewContainer>
+        </div>
+      )}
+    </section>
+  );
+}

src/views/schedule-page/schedule-page-input-json/schedule-page-input-json.types.ts

@@ -0,0 +1,5 @@
+import { type Payload } from '@/__generated__/proto-ts/common/common';
+
+export type Props = {
+  input: Payload | null | undefined;
+};