8839 workflow follow up code step (#8856)

- add readonly mode
- fix falsy stepOutput computation

packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowHeader.tsx

@@ -15,7 +15,6 @@ import {
   IconTrash,
   isDefined,
 } from 'twenty-ui';
-import { capitalize } from '~/utils/string/capitalize';
 import { assertWorkflowWithCurrentVersionIsDefined } from '../utils/assertWorkflowWithCurrentVersionIsDefined';
 
 export const RecordShowPageWorkflowHeader = ({
@@ -73,17 +72,6 @@ export const RecordShowPageWorkflowHeader = ({
             workflowVersionId: workflowWithCurrentVersion.currentVersion.id,
             workflowName: workflowWithCurrentVersion.name,
           });
-
-          enqueueSnackBar('', {
-            variant: SnackBarVariant.Success,
-            title: `${capitalize(workflowWithCurrentVersion.name)} starting...`,
-            icon: (
-              <IconSettingsAutomation
-                size={16}
-                color={theme.snackBar.success.color}
-              />
-            ),
-          });
         }}
       />
 

packages/twenty-front/src/modules/workflow/hooks/useUpdateStep.ts

@@ -14,7 +14,10 @@ export const useUpdateStep = ({
   const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
   const { updateWorkflowVersionStep } = useUpdateWorkflowVersionStep();
 
-  const updateStep = async <T extends WorkflowStep>(updatedStep: T) => {
+  const updateStep = async <T extends WorkflowStep>(
+    updatedStep: T,
+    shouldUpdateStepOutput = true,
+  ) => {
     if (!isDefined(workflow.currentVersion)) {
       throw new Error('Can not update an undefined workflow version.');
     }
@@ -23,6 +26,7 @@ export const useUpdateStep = ({
     await updateWorkflowVersionStep({
       workflowVersionId: workflowVersion.id,
       step: updatedStep,
+      shouldUpdateStepOutput,
     });
   };
 

packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx

@@ -5,7 +5,7 @@ import { mergeDefaultFunctionInputAndFunctionInput } from '@/workflow/utils/merg
 import { setNestedValue } from '@/workflow/utils/setNestedValue';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Fragment, ReactNode, useState } from 'react';
+import { Fragment, ReactNode, useEffect, useState } from 'react';
 import {
   CodeEditor,
   HorizontalSeparator,
@@ -63,7 +63,10 @@ type WorkflowEditActionFormServerlessFunctionProps = {
       }
     | {
         readonly?: false;
-        onActionUpdate: (action: WorkflowCodeAction) => void;
+        onActionUpdate: (
+          action: WorkflowCodeAction,
+          shouldUpdateStepOutput?: boolean,
+        ) => void;
       };
 };
 
@@ -88,9 +91,16 @@ export const WorkflowEditActionFormServerlessFunction = ({
     id: serverlessFunctionId,
   });
 
+  const [functionInput, setFunctionInput] =
+    useState<ServerlessFunctionInputFormData>(
+      action.settings.input.serverlessFunctionInput,
+    );
+
   const { formValues, setFormValues, loading } =
     useServerlessFunctionUpdateFormState(serverlessFunctionId);
 
+  const headerTitle = action.name || 'Code - Serverless Function';
+
   const save = async () => {
     try {
       await updateOneServerlessFunction({
@@ -112,6 +122,9 @@ export const WorkflowEditActionFormServerlessFunction = ({
   const handleSave = usePreventOverlapCallback(save, 1000);
 
   const onCodeChange = async (value: string) => {
+    if (actionOptions.readonly === true) {
+      return;
+    }
     setFormValues((prevState) => ({
       ...prevState,
       code: { ...prevState.code, [INDEX_FILE_PATH]: value },
@@ -121,6 +134,9 @@ export const WorkflowEditActionFormServerlessFunction = ({
   };
 
   const updateFunctionInputSchema = async () => {
+    if (actionOptions.readonly === true) {
+      return;
+    }
     const sourceCode = formValues.code?.[INDEX_FILE_PATH];
     if (!isDefined(sourceCode)) {
       return;
@@ -141,27 +157,25 @@ export const WorkflowEditActionFormServerlessFunction = ({
     100,
   );
 
-  const [functionInput, setFunctionInput] =
-    useState<ServerlessFunctionInputFormData>(
-      action.settings.input.serverlessFunctionInput,
-    );
-
   const updateFunctionInput = useDebouncedCallback(
-    async (newFunctionInput: object) => {
+    async (newFunctionInput: object, shouldUpdateStepOutput = true) => {
       if (actionOptions.readonly === true) {
         return;
       }
 
-      actionOptions.onActionUpdate({
-        ...action,
-        settings: {
-          ...action.settings,
-          input: {
-            ...action.settings.input,
-            serverlessFunctionInput: newFunctionInput,
+      actionOptions.onActionUpdate(
+        {
+          ...action,
+          settings: {
+            ...action.settings,
+            input: {
+              ...action.settings.input,
+              serverlessFunctionInput: newFunctionInput,
+            },
           },
         },
-      });
+        shouldUpdateStepOutput,
+      );
     },
     1_000,
   );
@@ -171,7 +185,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
 
     setFunctionInput(updatedFunctionInput);
 
-    await updateFunctionInput(updatedFunctionInput);
+    await updateFunctionInput(updatedFunctionInput, false);
   };
 
   const renderFields = (
@@ -230,10 +244,6 @@ export const WorkflowEditActionFormServerlessFunction = ({
     });
   };
 
-  const headerTitle = isDefined(action.name)
-    ? action.name
-    : 'Code - Serverless Function';
-
   const handleEditorDidMount = async (
     editor: editor.IStandaloneCodeEditor,
     monaco: Monaco,
@@ -252,10 +262,13 @@ export const WorkflowEditActionFormServerlessFunction = ({
       return;
     }
 
-    actionOptions?.onActionUpdate({
-      ...action,
-      ...actionUpdate,
-    });
+    actionOptions?.onActionUpdate(
+      {
+        ...action,
+        ...actionUpdate,
+      },
+      false,
+    );
   };
 
   const checkWorkflowUpdatable = async () => {
@@ -265,6 +278,10 @@ export const WorkflowEditActionFormServerlessFunction = ({
     await getUpdatableWorkflowVersion(workflow);
   };
 
+  useEffect(() => {
+    setFunctionInput(action.settings.input.serverlessFunctionInput);
+  }, [action]);
+
   return (
     !loading && (
       <WorkflowEditGenericFormBase
@@ -285,6 +302,10 @@ export const WorkflowEditActionFormServerlessFunction = ({
             await onCodeChange(value);
           }}
           onMount={handleEditorDidMount}
+          options={{
+            readOnly: actionOptions.readonly,
+            domReadOnly: actionOptions.readonly,
+          }}
         />
         {renderFields(functionInput)}
       </WorkflowEditGenericFormBase>