Signal workflow form (#903)

Author: Assem-Uber

src/views/workflow-actions/workflow-action-new-run-success-msg/workflow-action-new-run-success-msg.types.tsx

@@ -5,5 +5,4 @@ export type Props = WorkflowActionSuccessMessageProps<
   { runId: string }
 > & {
   successMessage: string;
-  onDismissMessage: () => void;
 };

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

@@ -0,0 +1,103 @@
+import React from 'react';
+
+import { type FieldErrors, useForm } from 'react-hook-form';
+
+import { render, screen, fireEvent } from '@/test-utils/rtl';
+
+import WorkflowActionSignalForm from '../workflow-action-signal-form';
+import { type SignalWorkflowFormData } from '../workflow-action-signal-form.types';
+
+describe('WorkflowActionSignalForm', () => {
+  it('renders all form fields correctly', async () => {
+    await setup({});
+
+    expect(
+      screen.getByPlaceholderText('Enter signal name')
+    ).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter JSON input')).toBeInTheDocument();
+  });
+
+  it('displays error when form has errors', async () => {
+    const formErrors = {
+      signalName: {
+        message: 'Signal name is required',
+        type: 'required',
+      },
+      signalInput: {
+        message: 'Invalid JSON format',
+        type: 'invalid',
+      },
+    };
+
+    await setup({ formErrors });
+
+    const signalNameInput = screen.getByPlaceholderText('Enter signal name');
+    expect(signalNameInput).toHaveAttribute('aria-invalid', 'true');
+
+    const signalInputTextarea = screen.getByPlaceholderText('Enter JSON input');
+    expect(signalInputTextarea).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('handles input changes correctly', async () => {
+    await setup({});
+
+    const signalNameInput = screen.getByPlaceholderText('Enter signal name');
+    fireEvent.change(signalNameInput, { target: { value: 'test-signal' } });
+    expect(signalNameInput).toHaveValue('test-signal');
+
+    const signalInputTextarea = screen.getByPlaceholderText('Enter JSON input');
+    fireEvent.change(signalInputTextarea, {
+      target: { value: '{"key": "value"}' },
+    });
+    expect(signalInputTextarea).toHaveValue('{"key": "value"}');
+  });
+
+  it('renders with default values', async () => {
+    await setup({
+      formData: {
+        signalName: 'test-signal',
+        signalInput: '{"key": "value"}',
+      },
+    });
+
+    const signalNameInput = screen.getByPlaceholderText('Enter signal name');
+    expect(signalNameInput).toHaveValue('test-signal');
+
+    const signalInputTextarea = screen.getByPlaceholderText('Enter JSON input');
+    expect(signalInputTextarea).toHaveValue('{"key": "value"}');
+  });
+});
+
+type TestProps = {
+  formErrors: FieldErrors<SignalWorkflowFormData>;
+  formData: SignalWorkflowFormData;
+};
+
+function TestWrapper({ formErrors, formData }: TestProps) {
+  const methods = useForm<SignalWorkflowFormData>({
+    defaultValues: formData,
+  });
+
+  return (
+    <WorkflowActionSignalForm
+      control={methods.control}
+      clearErrors={methods.clearErrors}
+      fieldErrors={formErrors}
+      formData={formData}
+      cluster="test-cluster"
+      domain="test-domain"
+      workflowId="test-workflow-id"
+      runId="test-run-id"
+    />
+  );
+}
+
+async function setup({
+  formErrors = {},
+  formData = {
+    signalName: '',
+    signalInput: '',
+  },
+}: Partial<TestProps>) {
+  render(<TestWrapper formErrors={formErrors} formData={formData} />);
+}

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

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+import signalWorkflowInputSchema from '@/route-handlers/signal-workflow/schemas/signal-workflow-input-schema';
+
+export const signalWorkflowFormSchema = z.object({
+  signalName: z.string().min(1),
+  signalInput: signalWorkflowInputSchema.optional(),
+});

src/views/workflow-actions/workflow-action-signal-form/workflow-action-signal-form.styles.ts

@@ -0,0 +1,16 @@
+import { type Theme } from 'baseui';
+import { type TextareaOverrides } from 'baseui/textarea';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  jsonInput: {
+    Input: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        ...$theme.typography.MonoParagraphSmall,
+        '::placeholder': {
+          ...$theme.typography.ParagraphSmall,
+        },
+      }),
+    },
+  } satisfies TextareaOverrides,
+};

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

@@ -0,0 +1,68 @@
+import { FormControl } from 'baseui/form-control';
+import { Input } from 'baseui/input';
+import { Textarea } from 'baseui/textarea';
+import { Controller } from 'react-hook-form';
+
+import { type WorkflowActionFormProps } from '../workflow-actions.types';
+
+import { overrides } from './workflow-action-signal-form.styles';
+import { type SignalWorkflowFormData } from './workflow-action-signal-form.types';
+
+export default function WorkflowActionSignalForm({
+  fieldErrors,
+  control,
+}: WorkflowActionFormProps<SignalWorkflowFormData>) {
+  const getErrorMessage = (field: string) => {
+    return field in fieldErrors
+      ? fieldErrors[field as keyof typeof fieldErrors]?.message
+      : undefined;
+  };
+
+  return (
+    <div>
+      <FormControl label="Signal Name">
+        <Controller
+          name="signalName"
+          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);
+              }}
+              size="compact"
+              onBlur={field.onBlur}
+              error={Boolean(getErrorMessage('signalName'))}
+              placeholder="Enter signal name"
+            />
+          )}
+        />
+      </FormControl>
+      <FormControl label="JSON Input (optional)">
+        <Controller
+          name="signalInput"
+          control={control}
+          defaultValue=""
+          render={({ field: { ref, ...field } }) => (
+            <Textarea
+              {...field}
+              overrides={overrides.jsonInput}
+              // @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);
+              }}
+              size="compact"
+              onBlur={field.onBlur}
+              error={Boolean(getErrorMessage('signalInput'))}
+              placeholder="Enter JSON input"
+            />
+          )}
+        />
+      </FormControl>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { type z } from 'zod';
+
+import type signalWorkflowRequestBodySchema from '@/route-handlers/signal-workflow/schemas/signal-workflow-request-body-schema';
+
+import { type WorkflowActionFormProps } from '../workflow-actions.types';
+
+import { type signalWorkflowFormSchema } from './schemas/signal-workflow-form-schema';
+
+export type SignalWorkflowFormData = z.infer<typeof signalWorkflowFormSchema>;
+
+export type Props = WorkflowActionFormProps<SignalWorkflowFormData>;
+
+export type SignalWorkflowSubmissionData = z.infer<
+  typeof signalWorkflowRequestBodySchema
+>;