Update workflow action types (#886)

* update workflow action tyoes

* remove unnessesary as Control<ResetWorkflowFormData>

Author: Assem-Uber

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

@@ -8,9 +8,9 @@ import { type TerminateWorkflowResponse } from '@/route-handlers/terminate-workf
 import { type WorkflowAction } from '../workflow-actions.types';
 
 export const mockResetActionConfig: WorkflowAction<
+  ResetWorkflowResponse,
   { testField: string },
-  { transformed: string },
-  ResetWorkflowResponse
+  { transformed: string }
 > = {
   id: 'reset',
   label: 'Mock reset',
@@ -21,6 +21,7 @@ export const mockResetActionConfig: WorkflowAction<
       text: 'Mock docs link',
       href: 'https://mock.docs.link',
     },
+    withForm: true,
     form: ({ control, fieldErrors }) => (
       <div data-testid="mock-form">
         <input
@@ -44,52 +45,54 @@ export const mockResetActionConfig: WorkflowAction<
     `Mock reset notification (Run ID: ${result.runId})`,
 };
 
-const mockCancelActionConfig: WorkflowAction<any, any, CancelWorkflowResponse> =
-  {
-    id: 'cancel',
-    label: 'Mock cancel',
-    subtitle: 'Mock cancel a workflow execution',
-    modal: {
-      text: 'Mock modal text to cancel a workflow execution',
-      docsLink: {
-        text: 'Mock docs link',
-        href: 'https://mock.docs.link',
-      },
-    },
-    icon: MdHighlightOff,
-    getRunnableStatus: () => 'RUNNABLE',
-    apiRoute: 'cancel',
-    renderSuccessMessage: () => 'Mock cancel notification',
-  };
-
-const mockTerminateActionConfig: WorkflowAction<
-  any,
-  any,
-  TerminateWorkflowResponse
+export const mockCancelActionConfig: WorkflowAction<
+  CancelWorkflowResponse,
+  undefined,
+  undefined
 > = {
-  id: 'terminate',
-  label: 'Mock terminate',
-  subtitle: 'Mock terminate a workflow execution',
+  id: 'cancel',
+  label: 'Mock cancel',
+  subtitle: 'Mock cancel a workflow execution',
   modal: {
-    text: 'Mock modal text to terminate a workflow execution',
+    text: 'Mock modal text to cancel a workflow execution',
     docsLink: {
       text: 'Mock docs link',
       href: 'https://mock.docs.link',
     },
+    withForm: false,
   },
-  icon: MdPowerSettingsNew,
+  icon: MdHighlightOff,
   getRunnableStatus: () => 'RUNNABLE',
-  apiRoute: 'terminate',
-  renderSuccessMessage: () => 'Mock terminate notification',
+  apiRoute: 'cancel',
+  renderSuccessMessage: () => 'Mock cancel notification',
 };
 
+export const mockTerminateActionConfig: WorkflowAction<TerminateWorkflowResponse> =
+  {
+    id: 'terminate',
+    label: 'Mock terminate',
+    subtitle: 'Mock terminate a workflow execution',
+    modal: {
+      text: 'Mock modal text to terminate a workflow execution',
+      docsLink: {
+        text: 'Mock docs link',
+        href: 'https://mock.docs.link',
+      },
+      withForm: false,
+    },
+    icon: MdPowerSettingsNew,
+    getRunnableStatus: () => 'RUNNABLE',
+    apiRoute: 'terminate',
+    renderSuccessMessage: () => 'Mock terminate notification',
+  };
+
 export const mockWorkflowActionsConfig: [
-  WorkflowAction<any, any, CancelWorkflowResponse>,
-  WorkflowAction<any, any, TerminateWorkflowResponse>,
+  WorkflowAction<CancelWorkflowResponse>,
+  WorkflowAction<TerminateWorkflowResponse>,
   WorkflowAction<
+    ResetWorkflowResponse,
     { testField: string },
-    { transformed: string },
-    ResetWorkflowResponse
+    { transformed: string }
   >,
 ] = [
   mockCancelActionConfig,

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

@@ -22,11 +22,7 @@ import {
 } from '../workflow-action-reset-form/workflow-action-reset-form.types';
 import { type WorkflowAction } from '../workflow-actions.types';
 
-const cancelWorkflowActionConfig: WorkflowAction<
-  any,
-  any,
-  CancelWorkflowResponse
-> = {
+const cancelWorkflowActionConfig: WorkflowAction<CancelWorkflowResponse> = {
   id: 'cancel',
   label: 'Cancel',
   subtitle: 'Cancel a workflow execution',
@@ -36,6 +32,7 @@ const cancelWorkflowActionConfig: WorkflowAction<
       text: 'Read more about cancelling workflows',
       href: 'https://cadenceworkflow.io/docs/cli#signal-cancel-terminate-workflow',
     },
+    withForm: false,
   },
   icon: MdHighlightOff,
   getRunnableStatus: (workflow) =>
@@ -48,37 +45,31 @@ const cancelWorkflowActionConfig: WorkflowAction<
   renderSuccessMessage: () => 'Workflow cancellation has been requested.',
 };
 
-const terminateWorkflowActionConfig: WorkflowAction<
-  any,
-  any,
-  TerminateWorkflowResponse
-> = {
-  id: 'terminate',
-  label: 'Terminate',
-  subtitle: 'Terminate a workflow execution',
-  modal: {
-    text: 'Terminates a running workflow immediately. Please terminate a workflow only if you know what you are doing.',
-    docsLink: {
-      text: 'Read more about terminating workflows',
-      href: 'https://cadenceworkflow.io/docs/cli#signal-cancel-terminate-workflow',
+const terminateWorkflowActionConfig: WorkflowAction<TerminateWorkflowResponse> =
+  {
+    id: 'terminate',
+    label: 'Terminate',
+    subtitle: 'Terminate a workflow execution',
+    modal: {
+      text: 'Terminates a running workflow immediately. Please terminate a workflow only if you know what you are doing.',
+      docsLink: {
+        text: 'Read more about terminating workflows',
+        href: 'https://cadenceworkflow.io/docs/cli#signal-cancel-terminate-workflow',
+      },
+      withForm: false,
     },
-  },
-  icon: MdPowerSettingsNew,
-  getRunnableStatus: (workflow) =>
-    getWorkflowIsCompleted(
-      workflow.workflowExecutionInfo?.closeEvent?.attributes ?? ''
-    )
-      ? 'NOT_RUNNABLE_WORKFLOW_CLOSED'
-      : 'RUNNABLE',
-  apiRoute: 'terminate',
-  renderSuccessMessage: () => 'Workflow has been terminated.',
-};
+    icon: MdPowerSettingsNew,
+    getRunnableStatus: (workflow) =>
+      getWorkflowIsCompleted(
+        workflow.workflowExecutionInfo?.closeEvent?.attributes ?? ''
+      )
+        ? 'NOT_RUNNABLE_WORKFLOW_CLOSED'
+        : 'RUNNABLE',
+    apiRoute: 'terminate',
+    renderSuccessMessage: () => 'Workflow has been terminated.',
+  };
 
-const restartWorkflowActionConfig: WorkflowAction<
-  any,
-  any,
-  RestartWorkflowResponse
-> = {
+const restartWorkflowActionConfig: WorkflowAction<RestartWorkflowResponse> = {
   id: 'restart',
   label: 'Restart',
   subtitle: 'Restart a workflow execution',
@@ -87,6 +78,7 @@ const restartWorkflowActionConfig: WorkflowAction<
       'Restarts a workflow by creating a new execution with a fresh Run ID while using the existing input. If the previous execution is still running, it will be terminated.',
       'What differentiates Restart from Reset is that the restarted workflow is not aware of the previous workflow execution.',
     ],
+    withForm: false,
   },
   icon: MdOutlineRestartAlt,
   getRunnableStatus: () => 'RUNNABLE',
@@ -99,9 +91,9 @@ const restartWorkflowActionConfig: WorkflowAction<
 };
 
 export const resetWorkflowActionConfig: WorkflowAction<
+  ResetWorkflowResponse,
   ResetWorkflowFormData,
-  ResetWorkflowSubmissionData,
-  ResetWorkflowResponse
+  ResetWorkflowSubmissionData
 > = {
   id: 'reset',
   label: 'Reset',
@@ -114,6 +106,7 @@ export const resetWorkflowActionConfig: WorkflowAction<
       text: 'Read more about resetting workflows',
       href: 'https://cadenceworkflow.io/docs/cli#workflow-reset',
     },
+    withForm: true,
     form: WorkflowActionResetForm,
     formSchema: resetWorkflowFormSchema,
     transformFormDataToSubmission: (v) => v,
@@ -133,6 +126,6 @@ const workflowActionsConfig = [
   terminateWorkflowActionConfig,
   restartWorkflowActionConfig,
   resetWorkflowActionConfig,
-] as const;
+] as const satisfies WorkflowAction<any, any, any>[];
 
 export default workflowActionsConfig;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { type FieldErrors, useForm, type Control } from 'react-hook-form';
+import { type FieldErrors, useForm } from 'react-hook-form';
 
 import { render, screen, userEvent } from '@/test-utils/rtl';
 
@@ -82,9 +82,13 @@ function TestWrapper({ formErrors, formData }: TestProps) {
 
   return (
     <WorkflowActionResetForm
-      control={methods.control as Control<ResetWorkflowFormData>}
+      control={methods.control}
       fieldErrors={formErrors}
       formData={formData}
+      cluster="test-cluster"
+      domain="test-domain"
+      workflowId="test-workflow-id"
+      runId="test-run-id"
     />
   );
 }

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

@@ -6,7 +6,10 @@ import { type CancelWorkflowResponse } from '@/route-handlers/cancel-workflow/ca
 import { type ResetWorkflowResponse } from '@/route-handlers/reset-workflow/reset-workflow.types';
 import { mockWorkflowDetailsParams } from '@/views/workflow-page/__fixtures__/workflow-details-params';
 
-import { mockWorkflowActionsConfig } from '../../__fixtures__/workflow-actions-config';
+import {
+  mockCancelActionConfig,
+  mockWorkflowActionsConfig,
+} from '../../__fixtures__/workflow-actions-config';
 import { type WorkflowAction } from '../../workflow-actions.types';
 import WorkflowActionsModalContent from '../workflow-actions-modal-content';
 
@@ -85,8 +88,9 @@ describe(WorkflowActionsModalContent.name, () => {
 
   it('renders array text correctly in modal content', () => {
     const cancelAction = {
-      ...mockWorkflowActionsConfig[0],
+      ...mockCancelActionConfig,
       modal: {
+        ...mockCancelActionConfig.modal,
         text: ['First line of array text', 'Second line of array text'],
       },
     };

src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.tsx

@@ -4,12 +4,7 @@ import { Banner, HIERARCHY, KIND as BANNER_KIND } from 'baseui/banner';
 import { KIND as BUTTON_KIND, SIZE } from 'baseui/button';
 import { ModalButton } from 'baseui/modal';
 import { useSnackbar } from 'baseui/snackbar';
-import {
-  type FieldValues,
-  useForm,
-  type DefaultValues,
-  type Control,
-} from 'react-hook-form';
+import { type DefaultValues, type FieldValues, useForm } from 'react-hook-form';
 import { MdCheckCircle, MdErrorOutline, MdOpenInNew } from 'react-icons/md';
 
 import request from '@/utils/request';
@@ -21,28 +16,31 @@ import { overrides, styled } from './workflow-actions-modal-content.styles';
 import { type Props } from './workflow-actions-modal-content.types';
 
 export default function WorkflowActionsModalContent<
-  FormData extends FieldValues,
-  SubmissionData,
   Result,
+  FormData,
+  SubmissionData,
 >({
   action,
   params,
   onCloseModal,
   initialFormValues,
-}: Props<FormData, SubmissionData, Result>) {
+}: Props<Result, FormData, SubmissionData>) {
   const queryClient = useQueryClient();
   const { enqueue, dequeue } = useSnackbar();
 
+  // useForm doesn't accept form data that is not a FieldValues (e.g. undefined)
+  type OptionalFormData = FormData extends FieldValues ? FormData : any;
+
   const {
     handleSubmit,
     formState: { errors: validationErrors, isSubmitting },
     control,
     watch,
-  } = useForm<FormData>({
+  } = useForm<OptionalFormData>({
     resolver: action.modal.formSchema
       ? zodResolver(action.modal.formSchema)
       : undefined,
-    defaultValues: initialFormValues,
+    defaultValues: initialFormValues as DefaultValues<OptionalFormData>,
   });
 
   const { mutate, isPending, error } = useMutation<
@@ -87,12 +85,11 @@ export default function WorkflowActionsModalContent<
   );
 
   const onSubmit = (data: FormData) => {
-    const { transformFormDataToSubmission } = action.modal;
-    const transform = transformFormDataToSubmission || (() => undefined);
-
     mutate({
       ...params,
-      submissionData: transform(data),
+      submissionData: action.modal.withForm
+        ? action.modal.transformFormDataToSubmission(data)
+        : (undefined as SubmissionData),
     });
   };
 
@@ -121,11 +118,15 @@ export default function WorkflowActionsModalContent<
               <MdOpenInNew />
             </styled.Link>
           )}
-          {Form && (
+          {action.modal.withForm && Form && (
             <Form
               formData={watch()}
               fieldErrors={validationErrors}
-              control={control as Control<FieldValues>}
+              control={control}
+              cluster={params.cluster}
+              domain={params.domain}
+              workflowId={params.workflowId}
+              runId={params.runId}
             />
           )}
           {error && (
@@ -143,7 +144,7 @@ export default function WorkflowActionsModalContent<
         </styled.ModalBody>
         <styled.ModalFooter>
           <ModalButton
-            autoFocus={!action.modal.form}
+            autoFocus={!action.modal.withForm}
             size={SIZE.compact}
             type="button"
             kind={BUTTON_KIND.secondary}

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

@@ -5,8 +5,8 @@ import {
   type WorkflowActionInputParams,
 } from '../workflow-actions.types';
 
-export type Props<FormData, SubmissionData, Result> = {
-  action: WorkflowAction<FormData, SubmissionData, Result>;
+export type Props<Result, FormData, SubmissionData> = {
+  action: WorkflowAction<Result, FormData, SubmissionData>;
   params: WorkflowActionInputParams;
   onCloseModal: () => void;
   initialFormValues?: DefaultValues<FormData>;