Reset form component (#869)

Workflow reset form component

Author: Assem-Uber

src/views/workflow-actions/workflow-action-reset-form/__tests__/workflow-action-reset-form.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import { type FieldErrors, useForm, type Control } from 'react-hook-form';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import WorkflowActionResetForm from '../workflow-action-reset-form';
+import { type ResetWorkflowFormData } from '../workflow-action-reset-form.types';
+
+describe('WorkflowActionResetForm', () => {
+  it('renders all form fields correctly', async () => {
+    await setup({});
+
+    expect(screen.getByPlaceholderText('Find Event ID')).toBeInTheDocument();
+    expect(screen.getByText('Skip signal re-apply')).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText('Enter reason for reset')
+    ).toBeInTheDocument();
+  });
+
+  it('displays error when form has errors', async () => {
+    const formErrors = {
+      decisionFinishEventId: {
+        message: 'Event ID is required',
+        type: 'required',
+      },
+      reason: { message: 'Reason is required', type: 'required' },
+    };
+
+    await setup({ formErrors });
+
+    const eventIdInput = screen.getByPlaceholderText('Find Event ID');
+    expect(eventIdInput).toHaveAttribute('aria-invalid', 'true');
+
+    const reasonInput = screen.getByPlaceholderText('Enter reason for reset');
+    expect(reasonInput).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('handles input changes correctly', async () => {
+    const { user } = await setup({});
+
+    const eventIdInput = screen.getByPlaceholderText('Find Event ID');
+    await user.type(eventIdInput, '123');
+    expect(eventIdInput).toHaveValue(123);
+
+    const reasonInput = screen.getByPlaceholderText('Enter reason for reset');
+    await user.type(reasonInput, 'Test reason');
+    expect(reasonInput).toHaveValue('Test reason');
+
+    const skipSignalCheckbox = screen.getByRole('checkbox', {
+      name: /skip signal re-apply/i,
+    });
+    await user.click(skipSignalCheckbox);
+    expect(skipSignalCheckbox).toBeChecked();
+  });
+
+  it('renders with default values', async () => {
+    await setup({});
+
+    const eventIdInput = screen.getByPlaceholderText('Find Event ID');
+    expect(eventIdInput).toHaveValue(null);
+
+    const reasonInput = screen.getByPlaceholderText('Enter reason for reset');
+    expect(reasonInput).toHaveValue('');
+
+    const skipSignalCheckbox = screen.getByRole('checkbox', {
+      name: /skip signal re-apply/i,
+    });
+    expect(skipSignalCheckbox).not.toBeChecked();
+  });
+});
+
+type TestProps = {
+  formErrors: FieldErrors<ResetWorkflowFormData>;
+  formData: ResetWorkflowFormData;
+};
+
+function TestWrapper({ formErrors, formData }: TestProps) {
+  const methods = useForm<ResetWorkflowFormData>({
+    defaultValues: formData,
+  });
+
+  return (
+    <WorkflowActionResetForm
+      control={methods.control as Control<ResetWorkflowFormData>}
+      fieldErrors={formErrors}
+      formData={formData}
+    />
+  );
+}
+
+async function setup({
+  formErrors = {},
+  formData = {
+    decisionFinishEventId: '',
+    reason: '',
+    skipSignalReapply: false,
+  },
+}: Partial<TestProps>) {
+  const user = userEvent.setup();
+
+  render(<TestWrapper formErrors={formErrors} formData={formData} />);
+
+  return { user };
+}

src/views/workflow-actions/workflow-action-reset-form/schemas/reset-workflow-form-schema.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const resetWorkflowFormSchema = z.object({
+  decisionFinishEventId: z.string().min(1),
+  reason: z.string().min(1),
+  skipSignalReapply: z.boolean().optional(),
+});

src/views/workflow-actions/workflow-action-reset-form/workflow-action-reset-form.tsx

@@ -0,0 +1,85 @@
+import {
+  Checkbox,
+  STYLE_TYPE as CHECKBOX_STYLE_TYPE,
+  LABEL_PLACEMENT as CHECKBOX_LABEL_PLACEMENT,
+} from 'baseui/checkbox';
+import { FormControl } from 'baseui/form-control';
+import { Input } from 'baseui/input';
+import { Textarea } from 'baseui/textarea';
+import { Controller } from 'react-hook-form';
+
+import { type Props } from './workflow-action-reset-form.types';
+
+export default function WorkflowActionResetForm({
+  fieldErrors,
+  control,
+}: Props) {
+  return (
+    <div>
+      <FormControl label="Event ID">
+        <Controller
+          name="decisionFinishEventId"
+          control={control}
+          defaultValue=""
+          render={({ field: { ref, ...field } }) => (
+            <Input
+              {...field}
+              // @ts-expect-error - inputRef expects ref object while ref is a callback. It should support both.
+              inputRef={ref}
+              onChange={(e) => {
+                field.onChange(e.target.value);
+              }}
+              onBlur={field.onBlur}
+              error={Boolean(fieldErrors.decisionFinishEventId?.message)}
+              type="number"
+              placeholder="Find Event ID"
+            />
+          )}
+        />
+      </FormControl>
+
+      <FormControl>
+        <Controller
+          name="skipSignalReapply"
+          control={control}
+          defaultValue={false}
+          render={({ field: { value, onChange, ref, ...field } }) => (
+            <Checkbox
+              {...field}
+              // @ts-expect-error - inputRef expects ref object while ref is a callback. It should support both.
+              inputRef={ref}
+              checkmarkType={CHECKBOX_STYLE_TYPE.toggle_round}
+              labelPlacement={CHECKBOX_LABEL_PLACEMENT.right}
+              checked={value}
+              error={Boolean(fieldErrors.skipSignalReapply?.message)}
+              onChange={(e) => onChange(e.currentTarget.checked)}
+            >
+              Skip signal re-apply
+            </Checkbox>
+          )}
+        />
+      </FormControl>
+
+      <FormControl label="Reason">
+        <Controller
+          name="reason"
+          control={control}
+          defaultValue=""
+          render={({ field: { ref, ...field } }) => (
+            <Textarea
+              {...field}
+              // @ts-expect-error - inputRef expects ref object while ref is a callback. It should support both.
+              inputRef={ref}
+              onChange={(e) => {
+                field.onChange(e.target.value);
+              }}
+              onBlur={field.onBlur}
+              error={Boolean(fieldErrors.reason?.message)}
+              placeholder="Enter reason for reset"
+            />
+          )}
+        />
+      </FormControl>
+    </div>
+  );
+}

src/views/workflow-actions/workflow-action-reset-form/workflow-action-reset-form.types.ts

@@ -0,0 +1,15 @@
+import { type z } from 'zod';
+
+import type resetWorkflowRequestBodySchema from '@/route-handlers/reset-workflow/schemas/reset-workflow-request-body-schema';
+
+import { type WorkflowActionFormProps } from '../workflow-actions.types';
+
+import { type resetWorkflowFormSchema } from './schemas/reset-workflow-form-schema';
+
+export type Props = WorkflowActionFormProps<ResetWorkflowFormData>;
+
+export type ResetWorkflowFormData = z.infer<typeof resetWorkflowFormSchema>;
+
+export type ResetWorkflowSubmissionData = z.infer<
+  typeof resetWorkflowRequestBodySchema
+>;

src/views/workflow-actions/workflow-actions.types.ts

@@ -1,6 +1,11 @@
 import { type ReactNode } from 'react';
 
 import { type IconProps } from 'baseui/icon';
+import {
+  type Control,
+  type FieldValues,
+  type FieldErrors,
+} from 'react-hook-form';
 
 import { type WorkflowActionID as WorkflowActionIDFromConfig } from '@/config/dynamic/resolvers/workflow-actions-enabled.types';
 import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
@@ -23,6 +28,12 @@ export type WorkflowActionSuccessMessageProps<R> = {
   inputParams: WorkflowActionInputParams;
 };
 
+export type WorkflowActionFormProps<FormData extends FieldValues> = {
+  formData: FormData;
+  fieldErrors: FieldErrors<FormData>;
+  control: Control<FormData>;
+};
+
 export type WorkflowActionNonRunnableStatus =
   (typeof WORKFLOW_ACTIONS_NON_RUNNABLE_STATUSES_CONFIG)[number];