8723 workflow add editor in serverless function code step (#8805)

- create a serverless function when creating a new workflow code step
- add code editor in workflow code step
- move workflowVersion steps management from frontend to backend
  - add a custom resolver for workflow-version management
  - fix optimistic rendering on frontend
- fix css
- delete serverless function when deleting workflow code step

TODO
- Don't update serverlessFunction if no code change
- Factorize what can be between crud trigger and crud step
- Publish serverless version when activating workflow
- delete serverless functions when deleting workflow or workflowVersion
- fix optimistic rendering for code updates
- Unify CRUD types

<img width="1279" alt="image"
src="https://github.com/user-attachments/assets/3d97ee9f-4b96-4abc-9d36-5c0280058be4">

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx

@@ -1,4 +1,3 @@
-import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';
 import { useGetAvailablePackages } from '@/settings/serverless-functions/hooks/useGetAvailablePackages';
 import { EditorProps, Monaco } from '@monaco-editor/react';
 import dotenv from 'dotenv';
@@ -6,6 +5,7 @@ import { editor, MarkerSeverity } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
 import { CodeEditor } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
+import { useParams } from 'react-router-dom';
 
 export type File = {
   language: string;
@@ -31,7 +31,10 @@ export const SettingsServerlessFunctionCodeEditor = ({
   height = 450,
   options = undefined,
 }: SettingsServerlessFunctionCodeEditorProps) => {
-  const { availablePackages } = useGetAvailablePackages();
+  const { serverlessFunctionId = '' } = useParams();
+  const { availablePackages } = useGetAvailablePackages({
+    id: serverlessFunctionId,
+  });
 
   const currentFile = files.find((file) => file.path === currentFilePath);
   const environmentVariablesFile = files.find((file) => file.path === '.env');
@@ -116,17 +119,16 @@ export const SettingsServerlessFunctionCodeEditor = ({
   return (
     isDefined(currentFile) &&
     isDefined(availablePackages) && (
-      <SettingsServerlessFunctionCodeEditorContainer>
-        <CodeEditor
-          height={height}
-          value={currentFile.content}
-          language={currentFile.language}
-          onMount={handleEditorDidMount}
-          onChange={onChange}
-          onValidate={handleEditorValidation}
-          options={options}
-        />
-      </SettingsServerlessFunctionCodeEditorContainer>
+      <CodeEditor
+        height={height}
+        value={currentFile.content}
+        language={currentFile.language}
+        onMount={handleEditorDidMount}
+        onChange={onChange}
+        onValidate={handleEditorValidation}
+        options={options}
+        withHeader
+      />
     )
   );
 };

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-const StyledEditorContainer = styled.div`
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-top: none;
-  border-radius: 0 0 ${({ theme }) => theme.border.radius.sm}
-    ${({ theme }) => theme.border.radius.sm};
-`;
-
-export const SettingsServerlessFunctionCodeEditorContainer =
-  StyledEditorContainer;

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx

@@ -8,7 +8,6 @@ import {
 } from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
-import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';
 import { SettingsServerlessFunctionsOutputMetadataInfo } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsOutputMetadataInfo';
 import { settingsServerlessFunctionCodeEditorOutputParamsState } from '@/settings/serverless-functions/states/settingsServerlessFunctionCodeEditorOutputParamsState';
 import { settingsServerlessFunctionInputState } from '@/settings/serverless-functions/states/settingsServerlessFunctionInputState';
@@ -82,30 +81,26 @@ export const SettingsServerlessFunctionTestTab = ({
               />,
             ]}
           />
-          <SettingsServerlessFunctionCodeEditorContainer>
-            <CodeEditor
-              value={settingsServerlessFunctionInput}
-              language="json"
-              height={200}
-              onChange={setSettingsServerlessFunctionInput}
-            />
-          </SettingsServerlessFunctionCodeEditorContainer>
+          <CodeEditor
+            value={settingsServerlessFunctionInput}
+            language="json"
+            height={200}
+            onChange={setSettingsServerlessFunctionInput}
+            withHeader
+          />
         </div>
         <div>
           <CoreEditorHeader
             leftNodes={[<SettingsServerlessFunctionsOutputMetadataInfo />]}
             rightNodes={[<LightCopyIconButton copyText={result} />]}
           />
-          <SettingsServerlessFunctionCodeEditorContainer>
-            <CodeEditor
-              value={result}
-              language={
-                settingsServerlessFunctionCodeEditorOutputParams.language
-              }
-              height={settingsServerlessFunctionCodeEditorOutputParams.height}
-              options={{ readOnly: true, domReadOnly: true }}
-            />
-          </SettingsServerlessFunctionCodeEditorContainer>
+          <CodeEditor
+            value={result}
+            language={settingsServerlessFunctionCodeEditorOutputParams.language}
+            height={settingsServerlessFunctionCodeEditorOutputParams.height}
+            options={{ readOnly: true, domReadOnly: true }}
+            withHeader
+          />
         </div>
       </StyledInputsContainer>
     </Section>

packages/twenty-front/src/modules/settings/serverless-functions/graphql/queries/findManyAvailablePackages.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const FIND_MANY_AVAILABLE_PACKAGES = gql`
-  query FindManyAvailablePackages {
-    getAvailablePackages
+  query FindManyAvailablePackages($input: ServerlessFunctionIdInput!) {
+    getAvailablePackages(input: $input)
   }
 `;

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

@@ -4,15 +4,19 @@ import { FIND_MANY_AVAILABLE_PACKAGES } from '@/settings/serverless-functions/gr
 import {
   FindManyAvailablePackagesQuery,
   FindManyAvailablePackagesQueryVariables,
+  ServerlessFunctionIdInput,
 } from '~/generated-metadata/graphql';
 
-export const useGetAvailablePackages = () => {
+export const useGetAvailablePackages = (input: ServerlessFunctionIdInput) => {
   const apolloMetadataClient = useApolloMetadataClient();
   const { data } = useQuery<
     FindManyAvailablePackagesQuery,
     FindManyAvailablePackagesQueryVariables
   >(FIND_MANY_AVAILABLE_PACKAGES, {
     client: apolloMetadataClient ?? undefined,
+    variables: {
+      input,
+    },
   });
   return {
     availablePackages: data?.getAvailablePackages || null,