feat(schedule-actions): add pause form with warning banner (SLICE-2b)

Replace confirmation-only pause with a required reason form, static warning
banner, and modal shell extensions (banner slot, initialFormValues, 900px).
Resume stays confirmation-only until SLICE-2c.

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

Author: Assem-Uber

src/views/schedule-actions/__fixtures__/schedule-actions-config.tsx

@@ -3,6 +3,7 @@ import {
   MdPauseCircleOutline,
   MdPlayCircleOutline,
 } from 'react-icons/md';
+import { z } from 'zod';
 
 import { type PauseScheduleResponse } from '@/route-handlers/pause-schedule/pause-schedule.types';
 import { type UnpauseScheduleResponse } from '@/route-handlers/unpause-schedule/unpause-schedule.types';
@@ -18,7 +19,7 @@ const mockActionApiRoute =
 
 export const mockPauseActionConfig: ScheduleAction<
   PauseScheduleResponse,
-  undefined,
+  { reason: string },
   { reason: string }
 > = {
   id: 'pause',
@@ -27,18 +28,32 @@ export const mockPauseActionConfig: ScheduleAction<
   modal: {
     banner: {
       kind: 'warning',
-      icon: MdOutlineWarningAmber,
+      icon: ({ size }) => <MdOutlineWarningAmber size={size} />,
       render: () => 'Mock pause banner message',
     },
-    withForm: false,
+    withForm: true,
+    form: ({ control, fieldErrors }) => (
+      <div data-testid="mock-pause-form">
+        <input
+          data-testid="mock-pause-reason"
+          aria-label="Reason"
+          aria-invalid={!!fieldErrors.reason}
+          {...control.register('reason')}
+        />
+      </div>
+    ),
+    formSchema: z.object({
+      reason: z.string().trim().min(1, 'Reason for pausing is required'),
+    }),
+    transformFormDataToSubmission: (formData) => formData,
+    initialFormValues: { reason: '' },
   },
   icon: MdPauseCircleOutline,
   getRunnableStatus: (schedule) =>
     schedule.state?.paused
       ? 'NOT_RUNNABLE_SCHEDULE_ALREADY_PAUSED'
       : 'RUNNABLE',
   apiRoute: mockActionApiRoute('pause'),
-  getConfirmSubmissionData: () => ({ reason: 'Mock pause reason' }),
   renderSuccessMessage: () => 'Mock pause notification',
 };
 

src/views/schedule-actions/config/schedule-actions-banner-icons.tsx

@@ -0,0 +1,7 @@
+import { MdOutlineWarningAmber } from 'react-icons/md';
+
+import { type ScheduleActionIcon } from '../schedule-actions.types';
+
+export const pauseScheduleBannerIcon: ScheduleActionIcon = ({ size }) => (
+  <MdOutlineWarningAmber size={size} />
+);

src/views/schedule-actions/config/schedule-actions.config.ts

@@ -1,20 +1,22 @@
-import {
-  MdOutlineWarningAmber,
-  MdPauseCircleOutline,
-  MdPlayCircleOutline,
-} from 'react-icons/md';
+import { MdPauseCircleOutline, MdPlayCircleOutline } from 'react-icons/md';
 
 import { type PauseScheduleResponse } from '@/route-handlers/pause-schedule/pause-schedule.types';
 import { type UnpauseScheduleResponse } from '@/route-handlers/unpause-schedule/unpause-schedule.types';
 
+import ScheduleActionPauseForm from '../schedule-action-pause-form/schedule-action-pause-form';
+import { type PauseScheduleFormData } from '../schedule-action-pause-form/schedule-action-pause-form.types';
+import { pauseScheduleFormSchema } from '../schedule-action-pause-form/schemas/pause-schedule-form-schema';
 import {
   type PauseScheduleSubmissionData,
   type ScheduleAction,
 } from '../schedule-actions.types';
 
+import { pauseScheduleBannerIcon } from './schedule-actions-banner-icons';
+import { PAUSE_SCHEDULE_MODAL_BANNER_MESSAGE } from './schedule-actions.constants';
+
 const pauseScheduleActionConfig: ScheduleAction<
   PauseScheduleResponse,
-  undefined,
+  PauseScheduleFormData,
   PauseScheduleSubmissionData
 > = {
   id: 'pause',
@@ -23,11 +25,14 @@ const pauseScheduleActionConfig: ScheduleAction<
   modal: {
     banner: {
       kind: 'warning',
-      icon: MdOutlineWarningAmber,
-      render: () =>
-        'Pausing stops new executions but does not stop workflows already in progress.',
+      icon: pauseScheduleBannerIcon,
+      render: () => PAUSE_SCHEDULE_MODAL_BANNER_MESSAGE,
     },
-    withForm: false,
+    withForm: true,
+    form: ScheduleActionPauseForm,
+    formSchema: pauseScheduleFormSchema,
+    transformFormDataToSubmission: (formData) => formData,
+    initialFormValues: { reason: '' },
   },
   icon: MdPauseCircleOutline,
   getRunnableStatus: (schedule) =>
@@ -36,10 +41,6 @@ const pauseScheduleActionConfig: ScheduleAction<
       : 'RUNNABLE',
   apiRoute: (params) =>
     `/api/domains/${encodeURIComponent(params.domain)}/${encodeURIComponent(params.cluster)}/schedules/${encodeURIComponent(params.scheduleId)}/pause`,
-  // TODO: get reason from UI form
-  getConfirmSubmissionData: () => ({
-    reason: 'Paused from Cadence Web UI',
-  }),
   renderSuccessMessage: () => 'Schedule has been paused.',
 };
 
@@ -48,6 +49,11 @@ const resumeScheduleActionConfig: ScheduleAction<UnpauseScheduleResponse> = {
   label: 'Resume',
   subtitle: 'Resume a paused schedule',
   modal: {
+    text: 'Resumes the schedule so new workflow runs can be triggered again.',
+    docsLink: {
+      text: 'Read more about schedules',
+      href: 'https://cadenceworkflow.io/docs/concepts/schedules',
+    },
     withForm: false,
   },
   icon: MdPlayCircleOutline,

src/views/schedule-actions/config/schedule-actions.constants.ts

@@ -0,0 +1,2 @@
+export const PAUSE_SCHEDULE_MODAL_BANNER_MESSAGE =
+  'Pausing stops new executions but does not stop workflows already in progress.';

src/views/schedule-actions/schedule-action-pause-form/schedule-action-pause-form.constants.ts

@@ -0,0 +1,3 @@
+export const SCHEDULE_ACTION_PAUSE_FORM_FIELD_IDS = {
+  reason: 'schedule-action-pause-reason',
+} as const;

src/views/schedule-actions/schedule-action-pause-form/schedule-action-pause-form.tsx

@@ -0,0 +1,42 @@
+import { Textarea } from 'baseui/textarea';
+import { Controller } from 'react-hook-form';
+
+import DomainSchedulesHorizontalField from '@/views/domain-schedules/domain-schedules-horizontal-field/domain-schedules-horizontal-field';
+import getFieldErrorMessage from '@/views/workflow-actions/workflow-action-start-form/helpers/get-field-error-message';
+
+import { SCHEDULE_ACTION_PAUSE_FORM_FIELD_IDS } from './schedule-action-pause-form.constants';
+import { type Props } from './schedule-action-pause-form.types';
+
+export default function ScheduleActionPauseForm({
+  fieldErrors,
+  control,
+}: Props) {
+  return (
+    <DomainSchedulesHorizontalField
+      label="Reason for pausing"
+      htmlFor={SCHEDULE_ACTION_PAUSE_FORM_FIELD_IDS.reason}
+      error={getFieldErrorMessage(fieldErrors, 'reason')}
+    >
+      <Controller
+        name="reason"
+        control={control}
+        defaultValue=""
+        render={({ field: { ref, ...field } }) => (
+          <Textarea
+            {...field}
+            id={SCHEDULE_ACTION_PAUSE_FORM_FIELD_IDS.reason}
+            // @ts-expect-error - inputRef expects ref object while ref is a callback. It should support both.
+            inputRef={ref}
+            size="compact"
+            onChange={(e) => {
+              field.onChange(e.target.value);
+            }}
+            onBlur={field.onBlur}
+            error={Boolean(getFieldErrorMessage(fieldErrors, 'reason'))}
+            placeholder="Add reason"
+          />
+        )}
+      />
+    </DomainSchedulesHorizontalField>
+  );
+}

src/views/schedule-actions/schedule-action-pause-form/schedule-action-pause-form.types.ts

@@ -0,0 +1,12 @@
+import { type z } from 'zod';
+
+import { type ScheduleActionFormProps } from '../schedule-actions.types';
+
+import { type pauseScheduleFormSchema } from './schemas/pause-schedule-form-schema';
+
+export type PauseScheduleFormData = z.infer<typeof pauseScheduleFormSchema>;
+
+export type Props = Pick<
+  ScheduleActionFormProps<PauseScheduleFormData>,
+  'fieldErrors' | 'control'
+>;

src/views/schedule-actions/schedule-action-pause-form/schemas/pause-schedule-form-schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const pauseScheduleFormSchema = z.object({
+  reason: z.string().trim().min(1, 'Reason for pausing is required'),
+});

src/views/schedule-actions/schedule-actions-modal-content/__tests__/schedule-actions-modal-content.test.tsx

@@ -2,7 +2,9 @@ import { HttpResponse } from 'msw';
 
 import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';
 
+import { mockDescribeScheduleResponse } from '@/route-handlers/describe-schedule/__fixtures__/mock-describe-schedule-response';
 import { type PauseScheduleResponse } from '@/route-handlers/pause-schedule/pause-schedule.types';
+import { type UnpauseScheduleResponse } from '@/route-handlers/unpause-schedule/unpause-schedule.types';
 
 import { mockScheduleActionsConfig } from '../../__fixtures__/schedule-actions-config';
 import { type ScheduleAction } from '../../schedule-actions.types';
@@ -58,6 +60,10 @@ describe(ScheduleActionsModalContent.name, () => {
       {}
     );
 
+    await user.type(
+      screen.getByTestId('mock-pause-reason'),
+      'Mock pause reason'
+    );
     await user.click(
       await screen.findByRole('button', { name: 'Mock pause schedule' })
     );
@@ -75,9 +81,21 @@ describe(ScheduleActionsModalContent.name, () => {
     expect(mockOnClose).toHaveBeenCalled();
   });
 
+  it('renders pause banner without describe schedule data', async () => {
+    setup({ schedule: undefined });
+
+    expect(
+      await screen.findByText('Mock pause banner message')
+    ).toBeInTheDocument();
+  });
+
   it('displays banner when the action fails', async () => {
     const { user, mockOnClose } = setup({ error: true });
 
+    await user.type(
+      screen.getByTestId('mock-pause-reason'),
+      'Mock pause reason'
+    );
     await user.click(
       await screen.findByRole('button', { name: 'Mock pause schedule' })
     );
@@ -90,14 +108,50 @@ describe(ScheduleActionsModalContent.name, () => {
     });
     expect(mockOnClose).not.toHaveBeenCalled();
   });
+
+  describe('form handling', () => {
+    it('renders form when provided in action config', () => {
+      setup({});
+
+      expect(screen.getByTestId('mock-pause-form')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-pause-reason')).toBeInTheDocument();
+    });
+
+    it('disables submit button when form has validation errors', async () => {
+      const { user } = setup({});
+
+      const submitButton = screen.getByRole('button', {
+        name: 'Mock pause schedule',
+      });
+      await user.click(submitButton);
+
+      expect(submitButton).toHaveAttribute('disabled');
+    });
+
+    it('shows validation error when reason is empty', async () => {
+      const { user } = setup({});
+
+      const submitButton = screen.getByRole('button', {
+        name: 'Mock pause schedule',
+      });
+      await user.click(submitButton);
+
+      expect(screen.getByTestId('mock-pause-reason')).toHaveAttribute(
+        'aria-invalid',
+        'true'
+      );
+    });
+  });
 });
 
 function setup({
   error,
   actionConfig,
+  schedule = mockDescribeScheduleResponse,
 }: {
   error?: boolean;
   actionConfig?: ScheduleAction<any, any, any>;
+  schedule?: typeof mockDescribeScheduleResponse;
 }) {
   const user = userEvent.setup();
   const mockOnClose = jest.fn();
@@ -111,6 +165,7 @@ function setup({
     <ScheduleActionsModalContent
       action={actionConfig ?? mockScheduleActionsConfig[0]}
       params={{ ...mockScheduleParams }}
+      schedule={schedule}
       onCloseModal={mockOnClose}
     />,
     {
@@ -131,7 +186,9 @@ function setup({
               );
             }
 
-            return HttpResponse.json({} satisfies PauseScheduleResponse);
+            return HttpResponse.json(
+              {} satisfies PauseScheduleResponse | UnpauseScheduleResponse
+            );
           },
         },
       ],

src/views/schedule-actions/schedule-actions-modal-content/schedule-actions-modal-content.styles.ts

@@ -1,5 +1,6 @@
 import { styled as createStyled, type Theme, withStyle } from 'baseui';
 import { type BannerOverrides } from 'baseui/banner';
+import { StyledLink } from 'baseui/link';
 import { ModalBody, ModalFooter, ModalHeader } from 'baseui/modal';
 import { type StyleObject } from 'styletron-react';
 
@@ -27,6 +28,13 @@ export const styled = {
     display: 'flex',
     justifyContent: 'space-between',
   }),
+  Link: withStyle(StyledLink, ({ $theme }: { $theme: Theme }) => ({
+    alignSelf: 'start',
+    ...$theme.typography.LabelSmall,
+    display: 'flex',
+    alignItems: 'center',
+    columnGap: $theme.sizing.scale100,
+  })),
 };
 
 export const overrides = {