feat: first working version

packages/twenty-front/src/modules/settings/serverless-functions/hooks/useGetManyServerlessFunctions.ts

@@ -1,6 +1,7 @@
-import { useQuery } from '@apollo/client';
-import { FIND_MANY_SERVERLESS_FUNCTIONS } from '@/settings/serverless-functions/graphql/queries/findManyServerlessFunctions';
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import { FIND_MANY_SERVERLESS_FUNCTIONS } from '@/settings/serverless-functions/graphql/queries/findManyServerlessFunctions';
+import { useQuery } from '@apollo/client';
+import { useMemo } from 'react';
 import {
   GetManyServerlessFunctionsQuery,
   GetManyServerlessFunctionsQueryVariables,
@@ -14,8 +15,10 @@ export const useGetManyServerlessFunctions = () => {
   >(FIND_MANY_SERVERLESS_FUNCTIONS, {
     client: apolloMetadataClient ?? undefined,
   });
-  return {
+  return useMemo(() => {
-    serverlessFunctions:
+    return {
-      data?.serverlessFunctions?.edges.map(({ node }) => node) || [],
+      serverlessFunctions:
-  };
+        data?.serverlessFunctions?.edges.map(({ node }) => node) || [],
+    };
+  }, [data?.serverlessFunctions?.edges]);
 };

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

@@ -1,3 +1,4 @@
+import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
 import {
@@ -19,15 +20,24 @@ export const WorkflowDiagramEffect = ({
 }) => {
   const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
 
+  const { serverlessFunctions } = useGetManyServerlessFunctions();
+
   const computeAndMergeNewWorkflowDiagram = useRecoilCallback(
     ({ snapshot, set }) => {
       return (currentVersion: WorkflowVersion) => {
+        if (!isDefined(serverlessFunctions)) {
+          return;
+        }
+
         const previousWorkflowDiagram = getSnapshotValue(
           snapshot,
           workflowDiagramState,
         );
 
-        const nextWorkflowDiagram = getWorkflowVersionDiagram(currentVersion);
+        const nextWorkflowDiagram = getWorkflowVersionDiagram(
+          currentVersion,
+          serverlessFunctions,
+        );
 
         let mergedWorkflowDiagram = nextWorkflowDiagram;
         if (isDefined(previousWorkflowDiagram)) {
@@ -44,7 +54,7 @@ export const WorkflowDiagramEffect = ({
         set(workflowDiagramState, workflowDiagramWithCreateStepNodes);
       };
     },
-    [],
+    [serverlessFunctions],
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts

@@ -1,9 +1,11 @@
+import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
 import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 import { WorkflowStep, WorkflowTrigger } from '@/workflow/types/Workflow';
 import {
   WorkflowDiagram,
   WorkflowDiagramEdge,
   WorkflowDiagramNode,
+  WorkflowDiagramNodeData,
 } from '@/workflow/types/WorkflowDiagram';
 import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
 import { MarkerType } from '@xyflow/react';
@@ -14,9 +16,13 @@ import { capitalize } from '~/utils/string/capitalize';
 export const generateWorkflowDiagram = ({
   trigger,
   steps,
+  serverlessFunctionsData,
 }: {
   trigger: WorkflowTrigger | undefined;
   steps: Array<WorkflowStep>;
+  serverlessFunctionsData: ReturnType<
+    typeof useGetManyServerlessFunctions
+  >['serverlessFunctions'];
 }): WorkflowDiagram => {
   const nodes: Array<WorkflowDiagramNode> = [];
   const edges: Array<WorkflowDiagramEdge> = [];
@@ -29,13 +35,28 @@ export const generateWorkflowDiagram = ({
     yPos: number,
   ) => {
     const nodeId = step.id;
+    const nodeData: WorkflowDiagramNodeData = {
+      nodeType: 'action',
+      actionType: step.type,
+      label: step.name,
+    };
+
+    if (step.type === 'CODE') {
+      const serverlessFunctionData = serverlessFunctionsData.find(
+        ({ id }) => id === step.settings.input.serverlessFunctionId,
+      );
+      if (!isDefined(serverlessFunctionData)) {
+        throw new Error(
+          'Could not find the definition of the serverless function',
+        );
+      }
+
+      nodeData.label = serverlessFunctionData.name;
+    }
+
     nodes.push({
       id: nodeId,
-      data: {
+      data: nodeData,
-        nodeType: 'action',
-        actionType: step.type,
-        label: step.name,
-      },
       position: {
         x: xPos,
         y: yPos,

packages/twenty-front/src/modules/workflow/utils/getWorkflowVersionDiagram.ts

@@ -1,3 +1,4 @@
+import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
 import { WorkflowVersion } from '@/workflow/types/Workflow';
 import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
 import { generateWorkflowDiagram } from '@/workflow/utils/generateWorkflowDiagram';
@@ -10,6 +11,9 @@ const EMPTY_DIAGRAM: WorkflowDiagram = {
 
 export const getWorkflowVersionDiagram = (
   workflowVersion: WorkflowVersion | undefined,
+  serverlessFunctionsData: ReturnType<
+    typeof useGetManyServerlessFunctions
+  >['serverlessFunctions'],
 ): WorkflowDiagram => {
   if (!isDefined(workflowVersion)) {
     return EMPTY_DIAGRAM;
@@ -18,5 +22,6 @@ export const getWorkflowVersionDiagram = (
   return generateWorkflowDiagram({
     trigger: workflowVersion.trigger ?? undefined,
     steps: workflowVersion.steps ?? [],
+    serverlessFunctionsData,
   });
 };