Add separator line

twentyhq · Nov 13, 2024 · 7dd8b3e · 7dd8b3e
1 parent 301b358
commit 7dd8b3e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx
@@ -4,20 +4,21 @@ import styled from '@emotion/styled';
 type HorizontalSeparatorProps = {
   visible?: boolean;
   text?: string;
+  noMargin?: boolean;
 };
 const StyledSeparator = styled.div<HorizontalSeparatorProps>`
   background-color: ${({ theme }) => theme.border.color.medium};
   height: ${({ visible }) => (visible ? '1px' : 0)};
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
-  margin-top: ${({ theme }) => theme.spacing(3)};
+  margin-bottom: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
+  margin-top: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
   width: 100%;
 `;
 
-const StyledSeparatorContainer = styled.div`
+const StyledSeparatorContainer = styled.div<{ noMargin: boolean }>`
   align-items: center;
   display: flex;
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
-  margin-top: ${({ theme }) => theme.spacing(3)};
+  margin-bottom: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
+  margin-top: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
   width: 100%;
 `;
 
@@ -36,16 +37,17 @@ const StyledText = styled.span`
 export const HorizontalSeparator = ({
   visible = true,
   text = '',
+  noMargin = false,
 }: HorizontalSeparatorProps): JSX.Element => (
   <>
     {text ? (
-      <StyledSeparatorContainer>
+      <StyledSeparatorContainer noMargin={noMargin}>
         <StyledLine visible={visible} />
         {text && <StyledText>{text}</StyledText>}
         <StyledLine visible={visible} />
       </StyledSeparatorContainer>
     ) : (
-      <StyledSeparator visible={visible} />
+      <StyledSeparator visible={visible} noMargin={noMargin} />
     )}
   </>
 );
diff --git a/...twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx b/...twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx
@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-
 import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
 import { setNestedValue } from '@/workflow/utils/setNestedValue';
 import { Select, SelectOption } from '@/ui/input/components/Select';
@@ -13,6 +12,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { getDefaultFunctionInputFromInputSchema } from '@/workflow/utils/getDefaultFunctionInputFromInputSchema';
 import { FunctionInput } from '@/workflow/types/FunctionInput';
 import { mergeDefaultFunctionInputAndFunctionInput } from '@/workflow/utils/mergeDefaultFunctionInputAndFunctionInput';
+import { HorizontalSeparator } from 'packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator';
 
 const StyledContainer = styled.div`
   display: inline-flex;
@@ -175,6 +175,18 @@ export const WorkflowEditActionFormServerlessFunction = (
     });
   };
 
+  const displaySeparator = (functionInput: FunctionInput) => {
+    const keys = Object.keys(functionInput);
+    if (keys.length > 1) {
+      return true;
+    }
+    if (keys.length === 1) {
+      const subKeys = Object.keys(functionInput[keys[0]]);
+      return subKeys.length > 0;
+    }
+    return false;
+  };
+
   return (
     <WorkflowEditGenericFormBase
       HeaderIcon={<IconCode color={theme.color.orange} />}
@@ -191,6 +203,7 @@ export const WorkflowEditActionFormServerlessFunction = (
         disabled={props.readonly}
         onChange={handleFunctionChange}
       />
+      {displaySeparator(functionInput) && <HorizontalSeparator noMargin />}
       {renderFields(functionInput)}
     </WorkflowEditGenericFormBase>
   );