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-ui/src/input/code-editor/components/CodeEditor.tsx

@@ -1,16 +1,35 @@
-import { useTheme } from '@emotion/react';
+import { useTheme, css } from '@emotion/react';
 import Editor, { EditorProps } from '@monaco-editor/react';
 import { codeEditorTheme } from '@ui/input';
 import { isDefined } from '@ui/utilities';
-
-export type CodeEditorPackage = {
-  [packageName: string]: string;
-};
+import styled from '@emotion/styled';
 
 type CodeEditorProps = Omit<EditorProps, 'onChange'> & {
   onChange?: (value: string) => void;
+  withHeader?: boolean;
 };
 
+const StyledEditor = styled(Editor)<{ withHeader: boolean }>`
+  .monaco-editor {
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+    outline-width: 0;
+  }
+  .overflow-guard {
+    border: 1px solid ${({ theme }) => theme.border.color.medium};
+    box-sizing: border-box;
+    ${({ withHeader, theme }) =>
+      withHeader
+        ? css`
+            border-radius: 0 0 ${theme.border.radius.sm}
+              ${theme.border.radius.sm};
+            border-top: none;
+          `
+        : css`
+            border-radius: ${theme.border.radius.sm};
+          `}
+  }
+`;
+
 export const CodeEditor = ({
   value,
   language,
@@ -18,38 +37,42 @@ export const CodeEditor = ({
   onChange,
   onValidate,
   height = 450,
+  withHeader = false,
   options,
 }: CodeEditorProps) => {
   const theme = useTheme();
 
   return (
-    <Editor
-      height={height}
-      value={value}
-      language={language}
-      onMount={(editor, monaco) => {
-        monaco.editor.defineTheme('codeEditorTheme', codeEditorTheme(theme));
-        monaco.editor.setTheme('codeEditorTheme');
+    <div>
+      <StyledEditor
+        height={height}
+        withHeader={withHeader}
+        value={value}
+        language={language}
+        onMount={(editor, monaco) => {
+          monaco.editor.defineTheme('codeEditorTheme', codeEditorTheme(theme));
+          monaco.editor.setTheme('codeEditorTheme');
 
-        onMount?.(editor, monaco);
-      }}
-      onChange={(value) => {
-        if (isDefined(value)) {
-          onChange?.(value);
-        }
-      }}
-      onValidate={onValidate}
-      options={{
-        overviewRulerLanes: 0,
-        scrollbar: {
-          vertical: 'hidden',
-          horizontal: 'hidden',
-        },
-        minimap: {
-          enabled: false,
-        },
-        ...options,
-      }}
-    />
+          onMount?.(editor, monaco);
+        }}
+        onChange={(value) => {
+          if (isDefined(value)) {
+            onChange?.(value);
+          }
+        }}
+        onValidate={onValidate}
+        options={{
+          overviewRulerLanes: 0,
+          scrollbar: {
+            vertical: 'hidden',
+            horizontal: 'hidden',
+          },
+          minimap: {
+            enabled: false,
+          },
+          ...options,
+        }}
+      />
+    </div>
   );
 };