Code review returns

twentyhq · Dec 12, 2024 · 3ab11cb · 3ab11cb
1 parent 1c19366
commit 3ab11cb
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 76 deletions.
diff --git a/...ges/twenty-front/src/modules/serverless-functions/utils/getFunctionInputFromSourceCode.ts b/...ges/twenty-front/src/modules/serverless-functions/utils/getFunctionInputFromSourceCode.ts
@@ -14,13 +14,13 @@ export const getFunctionInputFromSourceCode = (
   const functionInputSchema = getFunctionInputSchema(sourceCode);
 
   if (functionInputSchema.length !== 1) {
-    throw new Error('Function should have one object parameter');
+    return {};
   }
 
   const result = getDefaultFunctionInputFromInputSchema(functionInputSchema)[0];
 
   if (!isObject(result)) {
-    throw new Error('Function should have one object parameter');
+    return {};
   }
 
   return result;

diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerFooter.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerFooter.tsx
@@ -11,7 +11,6 @@ const StyledContainer = styled.div`
   justify-content: flex-end;
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
   gap: ${({ theme }) => theme.spacing(2)};
-  position: fixed;
   width: 100%;
 `;
 

diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowStepBody.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowStepBody.tsx
@@ -6,6 +6,7 @@ const StyledWorkflowStepBody = styled.div`
   overflow-y: scroll;
   padding: ${({ theme }) => theme.spacing(6)};
   row-gap: ${({ theme }) => theme.spacing(6)};
+  flex: 1 1 auto;
 `;
 
 export { StyledWorkflowStepBody as WorkflowStepBody };
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowStepHeader.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowStepHeader.tsx
@@ -65,32 +65,30 @@ export const WorkflowStepHeader = ({
   };
 
   return (
-    <>
-      <StyledHeader>
-        <StyledHeaderIconContainer>
-          {
-            <Icon
-              color={iconColor}
-              stroke={theme.icon.stroke.sm}
-              size={theme.icon.size.lg}
-            />
-          }
-        </StyledHeaderIconContainer>
-        <StyledHeaderInfo>
-          <StyledHeaderTitle>
-            <TextInput
-              value={title}
-              copyButton={false}
-              hotkeyScope="workflow-step-title"
-              onEnter={onTitleChange}
-              onEscape={onTitleChange}
-              onChange={handleChange}
-              shouldTrim={false}
-            />
-          </StyledHeaderTitle>
-          <StyledHeaderType>{headerType}</StyledHeaderType>
-        </StyledHeaderInfo>
-      </StyledHeader>
-    </>
+    <StyledHeader>
+      <StyledHeaderIconContainer>
+        {
+          <Icon
+            color={iconColor}
+            stroke={theme.icon.stroke.sm}
+            size={theme.icon.size.lg}
+          />
+        }
+      </StyledHeaderIconContainer>
+      <StyledHeaderInfo>
+        <StyledHeaderTitle>
+          <TextInput
+            value={title}
+            copyButton={false}
+            hotkeyScope="workflow-step-title"
+            onEnter={onTitleChange}
+            onEscape={onTitleChange}
+            onChange={handleChange}
+            shouldTrim={false}
+          />
+        </StyledHeaderTitle>
+        <StyledHeaderType>{headerType}</StyledHeaderType>
+      </StyledHeaderInfo>
+    </StyledHeader>
   );
 };
diff --git a/...modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx b/...modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx
@@ -33,12 +33,19 @@ import { getFunctionInputFromSourceCode } from '@/serverless-functions/utils/get
 import { mergeDefaultFunctionInputAndFunctionInput } from '@/serverless-functions/utils/mergeDefaultFunctionInputAndFunctionInput';
 import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields';
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
 const StyledCodeEditorContainer = styled.div`
   display: flex;
   flex-direction: column;
 `;
 
 const StyledTabList = styled(TabList)`
+  background: ${({ theme }) => theme.background.secondary};
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
@@ -92,7 +99,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
       return;
     }
     const newOutputSchema = getFunctionOutputSchema(testResult);
-    await updateAction({
+    updateAction({
       ...action,
       settings: { ...action.settings, outputSchema: newOutputSchema },
     });
@@ -124,50 +131,53 @@ export const WorkflowEditActionFormServerlessFunction = ({
     await handleUpdateFunctionInputSchema(newCode);
   };
 
-  const handleUpdateFunctionInputSchema = async (sourceCode: string) => {
-    if (actionOptions.readonly === true) {
-      return;
-    }
+  const handleUpdateFunctionInputSchema = useDebouncedCallback(
+    async (sourceCode: string) => {
+      if (actionOptions.readonly === true) {
+        return;
+      }
 
-    if (!isDefined(sourceCode)) {
-      return;
-    }
+      if (!isDefined(sourceCode)) {
+        return;
+      }
 
-    const newFunctionInput = getFunctionInputFromSourceCode(sourceCode);
-    const newMergedInput = mergeDefaultFunctionInputAndFunctionInput({
-      newInput: newFunctionInput,
-      oldInput: action.settings.input.serverlessFunctionInput,
-    });
-    const newMergedTestInput = mergeDefaultFunctionInputAndFunctionInput({
-      newInput: newFunctionInput,
-      oldInput: serverlessFunctionTestData.input,
-    });
+      const newFunctionInput = getFunctionInputFromSourceCode(sourceCode);
+      const newMergedInput = mergeDefaultFunctionInputAndFunctionInput({
+        newInput: newFunctionInput,
+        oldInput: action.settings.input.serverlessFunctionInput,
+      });
+      const newMergedTestInput = mergeDefaultFunctionInputAndFunctionInput({
+        newInput: newFunctionInput,
+        oldInput: serverlessFunctionTestData.input,
+      });
 
-    setFunctionInput(newMergedInput);
-    setServerlessFunctionTestData((prev) => ({
-      ...prev,
-      input: newMergedTestInput,
-    }));
+      setFunctionInput(newMergedInput);
+      setServerlessFunctionTestData((prev) => ({
+        ...prev,
+        input: newMergedTestInput,
+      }));
 
-    await updateAction({
-      ...action,
-      settings: {
-        ...action.settings,
-        outputSchema: {},
-        input: {
-          ...action.settings.input,
-          serverlessFunctionInput: newMergedInput,
+      updateAction({
+        ...action,
+        settings: {
+          ...action.settings,
+          outputSchema: {},
+          input: {
+            ...action.settings.input,
+            serverlessFunctionInput: newMergedInput,
+          },
         },
-      },
-    });
-  };
+      });
+    },
+    1_000,
+  );
 
   const handleInputChange = async (value: any, path: string[]) => {
     const updatedFunctionInput = setNestedValue(functionInput, path, value);
 
     setFunctionInput(updatedFunctionInput);
 
-    await updateAction({
+    updateAction({
       ...action,
       settings: {
         ...action.settings,
@@ -200,10 +210,6 @@ export const WorkflowEditActionFormServerlessFunction = ({
     editor: editor.IStandaloneCodeEditor,
     monaco: Monaco,
   ) => {
-    editor.addCommand(
-      monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-      handleRunFunction,
-    );
     await AutoTypings.create(editor, {
       monaco,
       preloadPackages: true,
@@ -219,7 +225,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
         return;
       }
 
-      actionOptions?.onActionUpdate({
+      actionOptions.onActionUpdate({
         ...action,
         ...actionUpdate,
       });
@@ -246,7 +252,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
 
   return (
     !loading && (
-      <>
+      <StyledContainer>
         <StyledTabList
           tabListInstanceId={TAB_LIST_COMPONENT_ID}
           tabs={tabs}
@@ -302,12 +308,14 @@ export const WorkflowEditActionFormServerlessFunction = ({
             </>
           )}
         </WorkflowStepBody>
-        <RightDrawerFooter
-          actions={[
-            <CmdEnterActionButton title="Test" onClick={handleRunFunction} />,
-          ]}
-        />
-      </>
+        {activeTabId === 'test' && (
+          <RightDrawerFooter
+            actions={[
+              <CmdEnterActionButton title="Test" onClick={handleRunFunction} />,
+            ]}
+          />
+        )}
+      </StyledContainer>
     )
   );
 };