9024 workflow test serverless function follow up #9066

martmull · 2024-12-13T17:58:22Z

Fix Tablist style
Fix dropdown style (wrong grey background)
Update dropdown variable when no outputSchema is available

Enregistrement.de.l.ecran.2024-12-13.a.18.55.21.mov

greptile-apps

PR Summary

This PR enhances workflow variable handling and UI components, focusing on tab and dropdown styling improvements.

Added horizontal scrolling with hidden scrollbar in TabList.tsx to handle tab overflow gracefully
Introduced LinkOutputSchema type and handling in filterOutputSchema.ts for workflow variable selection
Improved node selection in workflow diagrams by updating all nodes' selection state via reactflow.setNodes()
Added EllipsisDisplay to Tab component for better text overflow handling
Standardized tab list styling by removing custom containers and adding consistent background/padding styles

_{16 file(s) reviewed, 8 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-12-13T17:59:17Z

packages/twenty-front/src/modules/workflow/hooks/useTriggerNodeSelection.ts

+        ...node,
+        selected: workflowDiagramTriggerNodeSelection === node.id,
+      })),
+    );

    setWorkflowDiagramTriggerNodeSelection(undefined);


logic: clearing selection immediately after setting it could cause flickering or race conditions if there are other effects watching node selection

greptile-apps · 2024-12-13T17:59:24Z

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

@@ -93,7 +94,7 @@ export const Tab = ({
      <StyledHover>
        {logo && <StyledLogo src={logo} alt={`${title} logo`} />}
        {Icon && <Icon size={theme.icon.size.md} />}
-        {title}
+        <EllipsisDisplay>{title}</EllipsisDisplay>


style: EllipsisDisplay may need a max-width prop to ensure proper truncation within the tab's available space

greptile-apps · 2024-12-13T17:59:29Z

packages/twenty-front/src/modules/serverless-functions/utils/getFunctionOutputSchema.ts

          if (isObject(value) && !Array.isArray(value)) {
            acc[key] = {
              isLeaf: false,
+              icon: 'IconVariable',
              value: getFunctionOutputSchema(value),
            };
          } else {


logic: this recursively processes nested objects but doesn't handle arrays. Arrays are treated as leaf nodes which may not be the desired behavior for complex data structures

greptile-apps · 2024-12-13T17:59:30Z

packages/twenty-front/src/modules/serverless-functions/utils/getFunctionOutputSchema.ts

              isLeaf: false,
+              icon: 'IconVariable',
              value: getFunctionOutputSchema(value),


style: hardcoding 'IconVariable' here may be better defined as a constant at the module level for consistency and maintainability

greptile-apps · 2024-12-13T18:00:09Z

...rc/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx

@@ -60,7 +62,7 @@ export const SearchVariablesDropdownWorkflowStepItems = ({
            hovered={false}


style: hovered={false} is redundant since it's the default state and doesn't affect the component's behavior

greptile-apps · 2024-12-13T18:00:43Z

packages/twenty-front/src/modules/workflow/search-variables/types/StepOutputSchema.ts

@@ -1,20 +1,27 @@
 import { InputSchemaPropertyType } from '@/workflow/types/InputSchema';

-export type Leaf = {
+type Leaf = {
  isLeaf: true;
  type?: InputSchemaPropertyType;
  icon?: string;
  label?: string;
  value: any;


style: value is typed as 'any' - consider using a more specific type or adding a generic type parameter

greptile-apps · 2024-12-13T18:01:10Z

.../modules/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId.ts

+export const WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID =
+  'workflow-serverless-function-tab-list-component-id';


style: consider using a more specific ID format like twenty-workflow-serverless-function-tab-list to better align with common component ID patterns and avoid potential conflicts

greptile-apps · 2024-12-13T18:01:24Z

packages/twenty-server/src/modules/workflow/workflow-builder/types/output-schema.type.ts

+type Link = {
+  isLeaf: true;
+  tab?: string;
+  icon?: string;
+  label?: string;
+};


logic: Link type has isLeaf: true but no value property, unlike the other Leaf type. This inconsistency could cause type checking issues.

thomtrp · 2024-12-16T09:34:41Z

packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts

-     *
-     * Selecting the node will cause a right drawer to open in order to edit the step.
-     */
-    setWorkflowDiagramTriggerNodeSelection(createdStep.id);


why don't we need this anymore?

thomtrp · 2024-12-16T09:37:23Z

packages/twenty-front/src/modules/workflow/hooks/useTriggerNodeSelection.ts

+        ...node,
+        selected: workflowDiagramTriggerNodeSelection === node.id,
+      })),
+    );


interesting greptile commnet on this one. We are calling setWorkflowDiagramTriggerNodeSelection. How does that work?

thomtrp · 2024-12-16T09:38:03Z

...front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx

@@ -51,7 +66,9 @@ export const SearchVariablesDropdownFieldItems = ({
  const getDisplayedSubStepFields = () => {
    const currentSubStep = getCurrentSubStep();

-    if (isRecordOutputSchema(currentSubStep)) {
+    if (isLinkOutputSchema(currentSubStep)) {


thomtrp

I cannot see the step before testing the function. How can I see the link?

martmull added 6 commits December 13, 2024 12:23

Fix tabList style

8dd7f85

Fix dropdown background

ceb1def

Use previous tab as default tab in tabList

c4fc9f2

Redirect to code step if no output variables are computed

c3c44ea

Add icon to code variables

18b20df

Add icon to code step

2ae2367

martmull linked an issue Dec 13, 2024 that may be closed by this pull request

[Workflow] Test serverless function follow up #9024

Closed

martmull marked this pull request as ready for review December 13, 2024 17:58

greptile-apps bot reviewed Dec 13, 2024

View reviewed changes

charlesBochet added the -PR: awaiting author label Dec 13, 2024

charlesBochet assigned martmull Dec 13, 2024

charlesBochet added -PR: awaiting review and removed -PR: awaiting author labels Dec 13, 2024

martmull added 4 commits December 14, 2024 11:12

Fix tests

5362593

Fix typecheck

a971f72

Remove buggy trigger selection

48c00f4

Move syncStatus ready to proper place

d3a0404

thomtrp reviewed Dec 16, 2024

View reviewed changes

martmull added 2 commits December 16, 2024 15:23

Fix Code step ouputSchema on create

a84b678

Add indicator if function is ready or not

f3c6d35

martmull force-pushed the 9024-workflow-test-serverless-function-follow-up branch from 57daaff to f3c6d35 Compare December 16, 2024 15:29

thomtrp approved these changes Dec 17, 2024

View reviewed changes

martmull merged commit 5dfcc41 into main Dec 17, 2024
16 checks passed

martmull deleted the 9024-workflow-test-serverless-function-follow-up branch December 17, 2024 09:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

9024 workflow test serverless function follow up #9066

9024 workflow test serverless function follow up #9066

martmull commented Dec 13, 2024

greptile-apps bot left a comment

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

thomtrp Dec 16, 2024

thomtrp Dec 16, 2024

thomtrp Dec 16, 2024

thomtrp left a comment

		@@ -60,7 +62,7 @@ export const SearchVariablesDropdownWorkflowStepItems = ({
		hovered={false}

		export const WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID =
		'workflow-serverless-function-tab-list-component-id';

9024 workflow test serverless function follow up #9066

9024 workflow test serverless function follow up #9066

Conversation

martmull commented Dec 13, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

thomtrp Dec 16, 2024

Choose a reason for hiding this comment

thomtrp Dec 16, 2024

Choose a reason for hiding this comment

thomtrp Dec 16, 2024

Choose a reason for hiding this comment

thomtrp left a comment

Choose a reason for hiding this comment