Serverless function improvements (#6769)

- add layer for lambda execution
- add layer for local execution
- add package resolve for the monaco editor
- add route to get installed package for serverless functions
- add layer versioning

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -108,6 +108,7 @@ export const SettingsNavigationDrawerItems = () => {
           />
           {accountSubSettings.map((navigationItem, index) => (
             <SettingsNavigationDrawerItem
+              key={index}
               label={navigationItem.label}
               path={navigationItem.path}
               Icon={navigationItem.Icon}

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

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const FIND_MANY_AVAILABLE_PACKAGES = gql`
+  query FindManyAvailablePackages {
+    getAvailablePackages
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
+import { useQuery } from '@apollo/client';
+import { FIND_MANY_AVAILABLE_PACKAGES } from '@/settings/serverless-functions/graphql/queries/findManyAvailablePackages';
+import {
+  FindManyAvailablePackagesQuery,
+  FindManyAvailablePackagesQueryVariables,
+} from '~/generated-metadata/graphql';
+
+export const useGetAvailablePackages = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+  const { data } = useQuery<
+    FindManyAvailablePackagesQuery,
+    FindManyAvailablePackagesQueryVariables
+  >(FIND_MANY_AVAILABLE_PACKAGES, {
+    client: apolloMetadataClient ?? undefined,
+  });
+  return {
+    availablePackages: data?.getAvailablePackages || null,
+  };
+};

packages/twenty-front/src/modules/ui/input/code-editor/components/CodeEditor.tsx

@@ -1,9 +1,12 @@
 import Editor, { Monaco, EditorProps } from '@monaco-editor/react';
+import { AutoTypings } from 'monaco-editor-auto-typings';
 import { editor, MarkerSeverity } from 'monaco-editor';
 import { codeEditorTheme } from '@/ui/input/code-editor/theme/CodeEditorTheme';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useEffect } from 'react';
+import { useGetAvailablePackages } from '@/settings/serverless-functions/hooks/useGetAvailablePackages';
+import { isDefined } from '~/utils/isDefined';
 
 export const DEFAULT_CODE = `export const handler = async (
   event: object,
@@ -38,12 +41,24 @@ export const CodeEditor = ({
 }: CodeEditorProps) => {
   const theme = useTheme();
 
-  const handleEditorDidMount = (
+  const { availablePackages } = useGetAvailablePackages();
+
+  const handleEditorDidMount = async (
     editor: editor.IStandaloneCodeEditor,
     monaco: Monaco,
   ) => {
     monaco.editor.defineTheme('codeEditorTheme', codeEditorTheme(theme));
     monaco.editor.setTheme('codeEditorTheme');
+
+    if (language === 'typescript') {
+      await AutoTypings.create(editor, {
+        monaco,
+        preloadPackages: true,
+        onlySpecifiedPackages: true,
+        versions: availablePackages,
+        debounceDuration: 0,
+      });
+    }
   };
 
   const handleEditorValidation = (markers: editor.IMarker[]) => {
@@ -68,28 +83,31 @@ export const CodeEditor = ({
       document.head.removeChild(style);
     };
   }, []);
+
   return (
-    <div>
-      {header}
-      <StyledEditor
-        height={height}
-        language={language}
-        value={value}
-        onMount={handleEditorDidMount}
-        onChange={(value?: string) => value && onChange?.(value)}
-        onValidate={handleEditorValidation}
-        options={{
-          ...options,
-          overviewRulerLanes: 0,
-          scrollbar: {
-            vertical: 'hidden',
-            horizontal: 'hidden',
-          },
-          minimap: {
-            enabled: false,
-          },
-        }}
-      />
-    </div>
+    isDefined(availablePackages) && (
+      <>
+        {header}
+        <StyledEditor
+          height={height}
+          language={language}
+          value={value}
+          onMount={handleEditorDidMount}
+          onChange={(value?: string) => value && onChange?.(value)}
+          onValidate={handleEditorValidation}
+          options={{
+            ...options,
+            overviewRulerLanes: 0,
+            scrollbar: {
+              vertical: 'hidden',
+              horizontal: 'hidden',
+            },
+            minimap: {
+              enabled: false,
+            },
+          }}
+        />
+      </>
+    )
   );
 };