Serverless function follow up (#9924)

- remove asynchronous serverless function build
- build serverless function synchronously instead on activate workflow
or execute
- add a loader on workflow code step test tab test button
- add a new `ServerlessFunctionSyncStatus` `BUILDING`
- add a new route to build a serverless function draft version 
- delay artificially execution to avoid UI flashing



https://github.com/user-attachments/assets/8d958d9a-ef41-4261-999e-6ea374191e33

packages/twenty-front/src/modules/workflow/states/serverlessFunctionTestDataFamilyState.ts

@@ -13,7 +13,10 @@ export type ServerlessFunctionTestData = {
   height: number;
 };
 
-export const DEFAULT_OUTPUT_VALUE = 'Enter an input above then press "Test"';
+export const DEFAULT_OUTPUT_VALUE = {
+  data: 'Enter an input above then press "Test"',
+  status: ServerlessFunctionExecutionStatus.IDLE,
+};
 
 export const serverlessFunctionTestDataFamilyState = createFamilyState<
   ServerlessFunctionTestData,
@@ -24,6 +27,6 @@ export const serverlessFunctionTestDataFamilyState = createFamilyState<
     language: 'plaintext',
     height: 64,
     input: {},
-    output: { data: DEFAULT_OUTPUT_VALUE },
+    output: DEFAULT_OUTPUT_VALUE,
   },
 });

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

@@ -86,12 +86,14 @@ export const WorkflowEditActionFormServerlessFunction = ({
 }: WorkflowEditActionFormServerlessFunctionProps) => {
   const theme = useTheme();
   const { getIcon } = useIcons();
+  const [shouldBuildServerlessFunction, setShouldBuildServerlessFunction] =
+    useState(false);
   const serverlessFunctionId = action.settings.input.serverlessFunctionId;
   const serverlessFunctionVersion =
     action.settings.input.serverlessFunctionVersion;
   const tabListId = `${WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}_${serverlessFunctionId}`;
-  const { activeTabId, setActiveTabId } = useTabList(tabListId);
-  const { updateOneServerlessFunction, isReady } =
+  const { activeTabId } = useTabList(tabListId);
+  const { updateOneServerlessFunction } =
     useUpdateOneServerlessFunction(serverlessFunctionId);
   const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
 
@@ -126,13 +128,14 @@ export const WorkflowEditActionFormServerlessFunction = ({
     });
   };
 
-  const { testServerlessFunction } = useTestServerlessFunction({
-    serverlessFunctionId,
-    serverlessFunctionVersion,
-    callback: updateOutputSchemaFromTestResult,
-  });
+  const { testServerlessFunction, isTesting, isBuilding } =
+    useTestServerlessFunction({
+      serverlessFunctionId,
+      callback: updateOutputSchemaFromTestResult,
+    });
 
   const handleSave = useDebouncedCallback(async () => {
+    setShouldBuildServerlessFunction(true);
     await updateOneServerlessFunction({
       name: formValues.name,
       description: formValues.description,
@@ -231,8 +234,10 @@ export const WorkflowEditActionFormServerlessFunction = ({
   };
 
   const handleRunFunction = async () => {
-    await testServerlessFunction();
-    setActiveTabId('test');
+    if (!isTesting) {
+      await testServerlessFunction(shouldBuildServerlessFunction);
+      setShouldBuildServerlessFunction(false);
+    }
   };
 
   const handleEditorDidMount = async (
@@ -313,7 +318,6 @@ export const WorkflowEditActionFormServerlessFunction = ({
                 readonly={actionOptions.readonly}
               />
               <StyledCodeEditorContainer>
-                <InputLabel>Code {!isReady && <span>•</span>}</InputLabel>
                 <CodeEditor
                   height={343}
                   value={formValues.code?.[INDEX_FILE_PATH]}
@@ -339,6 +343,8 @@ export const WorkflowEditActionFormServerlessFunction = ({
                 <InputLabel>Result</InputLabel>
                 <ServerlessFunctionExecutionResult
                   serverlessFunctionTestData={serverlessFunctionTestData}
+                  isBuilding={isBuilding}
+                  isTesting={isTesting}
                 />
               </StyledCodeEditorContainer>
             </>
@@ -347,7 +353,11 @@ export const WorkflowEditActionFormServerlessFunction = ({
         {activeTabId === 'test' && (
           <RightDrawerFooter
             actions={[
-              <CmdEnterActionButton title="Test" onClick={handleRunFunction} />,
+              <CmdEnterActionButton
+                title="Test"
+                onClick={handleRunFunction}
+                disabled={isTesting || isBuilding}
+              />,
             ]}
           />
         )}