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/serverless-functions/hooks/useTestServerlessFunction.ts

@@ -2,55 +2,76 @@ import { useExecuteOneServerlessFunction } from '@/settings/serverless-functions
 import { useRecoilState } from 'recoil';
 import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
 import { isDefined } from 'twenty-ui';
+import { useState } from 'react';
+import { useBuildDraftServerlessFunction } from '@/settings/serverless-functions/hooks/useBuildDraftServerlessFunction';
+import { sleep } from '~/utils/sleep';
 
 export const useTestServerlessFunction = ({
   serverlessFunctionId,
-  serverlessFunctionVersion = 'draft',
   callback,
 }: {
   serverlessFunctionId: string;
-  serverlessFunctionVersion?: string;
   callback?: (testResult: object) => void;
 }) => {
+  const [isTesting, setIsTesting] = useState(false);
+  const [isBuilding, setIsBuilding] = useState(false);
   const { executeOneServerlessFunction } = useExecuteOneServerlessFunction();
+  const { buildDraftServerlessFunction } = useBuildDraftServerlessFunction();
   const [serverlessFunctionTestData, setServerlessFunctionTestData] =
     useRecoilState(serverlessFunctionTestDataFamilyState(serverlessFunctionId));
 
-  const testServerlessFunction = async () => {
-    const result = await executeOneServerlessFunction({
-      id: serverlessFunctionId,
-      payload: serverlessFunctionTestData.input,
-      version: serverlessFunctionVersion,
-    });
+  const testServerlessFunction = async (shouldBuild = true) => {
+    try {
+      if (shouldBuild) {
+        setIsBuilding(true);
+        await buildDraftServerlessFunction({
+          id: serverlessFunctionId,
+        });
+        setIsBuilding(false);
+      }
+      setIsTesting(true);
+      await sleep(200); // Delay artificially to avoid flashing the UI
+      const result = await executeOneServerlessFunction({
+        id: serverlessFunctionId,
+        payload: serverlessFunctionTestData.input,
+        version: 'draft',
+      });
 
-    if (isDefined(result?.data?.executeOneServerlessFunction?.data)) {
-      callback?.(result?.data?.executeOneServerlessFunction?.data);
+      setIsTesting(false);
+
+      if (isDefined(result?.data?.executeOneServerlessFunction?.data)) {
+        callback?.(result?.data?.executeOneServerlessFunction?.data);
+      }
+
+      setServerlessFunctionTestData((prev) => ({
+        ...prev,
+        language: 'json',
+        height: 300,
+        output: {
+          data: result?.data?.executeOneServerlessFunction?.data
+            ? JSON.stringify(
+                result?.data?.executeOneServerlessFunction?.data,
+                null,
+                4,
+              )
+            : undefined,
+          duration: result?.data?.executeOneServerlessFunction?.duration,
+          status: result?.data?.executeOneServerlessFunction?.status,
+          error: result?.data?.executeOneServerlessFunction?.error
+            ? JSON.stringify(
+                result?.data?.executeOneServerlessFunction?.error,
+                null,
+                4,
+              )
+            : undefined,
+        },
+      }));
+    } catch (error) {
+      setIsBuilding(false);
+      setIsTesting(false);
+      throw error;
     }
-
-    setServerlessFunctionTestData((prev) => ({
-      ...prev,
-      language: 'json',
-      height: 300,
-      output: {
-        data: result?.data?.executeOneServerlessFunction?.data
-          ? JSON.stringify(
-              result?.data?.executeOneServerlessFunction?.data,
-              null,
-              4,
-            )
-          : undefined,
-        duration: result?.data?.executeOneServerlessFunction?.duration,
-        status: result?.data?.executeOneServerlessFunction?.status,
-        error: result?.data?.executeOneServerlessFunction?.error
-          ? JSON.stringify(
-              result?.data?.executeOneServerlessFunction?.error,
-              null,
-              4,
-            )
-          : undefined,
-      },
-    }));
   };
 
-  return { testServerlessFunction };
+  return { testServerlessFunction, isTesting, isBuilding };
 };