9024 workflow test serverless function follow up (#9066)

- Fix Tablist style - Fix dropdown style (wrong grey background) - Update dropdown variable when no outputSchema is available https://github.com/user-attachments/assets/56698fe8-8dd3-404a-b2b2-f1eca6f5fa28
2024-12-17 10:35:38 +01:00
parent 0692bba710
commit 5dfcc413cf
25 changed files with 218 additions and 89 deletions
--- a/packages/twenty-front/src/modules/workflow/hooks/tests/useTriggerNodeSelection.test.tsx
+++ b/packages/twenty-front/src/modules/workflow/hooks/tests/useTriggerNodeSelection.test.tsx
@ -13,11 +13,11 @@ const wrapper = ({ children }: { children: React.ReactNode }) => (
 );

 describe('useTriggerNodeSelection', () => {
-  const mockUpdateNode = jest.fn();
+  const mockSetNodes = jest.fn();

  beforeEach(() => {
    (useReactFlow as jest.Mock).mockReturnValue({
-      updateNode: mockUpdateNode,
+      setNodes: mockSetNodes,
    });
  });

@ -51,7 +51,6 @@ describe('useTriggerNodeSelection', () => {
      result.current.setWorkflowDiagramTriggerNodeSelection(mockNodeId);
    });

-    expect(mockUpdateNode).toHaveBeenCalledWith(mockNodeId, { selected: true });
    expect(result.current.workflowDiagramTriggerNodeSelection).toBeUndefined();
  });

@ -61,6 +60,6 @@ describe('useTriggerNodeSelection', () => {
    });

    // Ensure updateNode is not called when state is undefined
-    expect(mockUpdateNode).not.toHaveBeenCalled();
+    expect(mockSetNodes).not.toHaveBeenCalled();
  });
 });
--- a/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts
+++ b/packages/twenty-front/src/modules/workflow/hooks/useCreateStep.ts
@ -1,7 +1,6 @@
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
-import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import {
  WorkflowStepType,
@ -25,10 +24,6 @@ export const useCreateStep = ({
    workflowCreateStepFromParentStepIdState,
  );

-  const setWorkflowDiagramTriggerNodeSelection = useSetRecoilState(
-    workflowDiagramTriggerNodeSelectionState,
-  );
-
  const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();

  const createStep = async (newStepType: WorkflowStepType) => {
@ -51,15 +46,6 @@ export const useCreateStep = ({

    setWorkflowSelectedNode(createdStep.id);
    openRightDrawer(RightDrawerPages.WorkflowStepEdit);
-
-    /**
-     * After the step has been created, select it.
-     * As the `insertNodeAndSave` function mutates the cached workflow before resolving,
-     * we are sure that the new node will have been created at this stage.
-     *
-     * Selecting the node will cause a right drawer to open in order to edit the step.
-     */
-    setWorkflowDiagramTriggerNodeSelection(createdStep.id);
  };

  return {
--- a/packages/twenty-front/src/modules/workflow/hooks/useTriggerNodeSelection.ts
+++ b/packages/twenty-front/src/modules/workflow/hooks/useTriggerNodeSelection.ts
@ -21,9 +21,12 @@ export const useTriggerNodeSelection = () => {
      return;
    }

-    reactflow.updateNode(workflowDiagramTriggerNodeSelection, {
-      selected: true,
-    });
+    reactflow.setNodes((nodes) =>
+      nodes.map((node) => ({
+        ...node,
+        selected: workflowDiagramTriggerNodeSelection === node.id,
+      })),
+    );

    setWorkflowDiagramTriggerNodeSelection(undefined);
  }, [
--- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx
@ -28,7 +28,8 @@ const StyledDropdownVariableButtonContainer = styled(
 `;

 const StyledDropdownComponentsContainer = styled(DropdownMenuItemsContainer)`
-  background-color: ${({ theme }) => theme.background.transparent.light};
+  display: flex;
+  flex-direction: column;
 `;

 const SearchVariablesDropdown = ({
--- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx
@ -2,6 +2,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import {
  BaseOutputSchema,
+  LinkOutputSchema,
  OutputSchema,
  StepOutputSchema,
 } from '@/workflow/search-variables/types/StepOutputSchema';
@ -13,10 +14,17 @@ import { useState } from 'react';
 import {
  HorizontalSeparator,
  IconChevronLeft,
+  isDefined,
  MenuItemSelect,
  OverflowingTextWithTooltip,
  useIcons,
 } from 'twenty-ui';
+import { useSetRecoilState } from 'recoil';
+import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
+import { isLinkOutputSchema } from '@/workflow/search-variables/utils/isLinkOutputSchema';
+import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';

 type SearchVariablesDropdownFieldItemsProps = {
  step: StepOutputSchema;
@ -33,6 +41,13 @@ export const SearchVariablesDropdownFieldItems = ({
  const [currentPath, setCurrentPath] = useState<string[]>([]);
  const [searchInputValue, setSearchInputValue] = useState('');
  const { getIcon } = useIcons();
+  const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
+  const { setActiveTabId } = useTabList(
+    WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID,
+  );
+  const setWorkflowDiagramTriggerNodeSelection = useSetRecoilState(
+    workflowDiagramTriggerNodeSelectionState,
+  );

  const getCurrentSubStep = (): OutputSchema => {
    let currentSubStep = step.outputSchema;
@ -51,7 +66,9 @@ export const SearchVariablesDropdownFieldItems = ({
  const getDisplayedSubStepFields = () => {
    const currentSubStep = getCurrentSubStep();

-    if (isRecordOutputSchema(currentSubStep)) {
+    if (isLinkOutputSchema(currentSubStep)) {
+      return { link: currentSubStep.link };
+    } else if (isRecordOutputSchema(currentSubStep)) {
      return currentSubStep.fields;
    } else if (isBaseOutputSchema(currentSubStep)) {
      return currentSubStep;
@ -60,6 +77,7 @@ export const SearchVariablesDropdownFieldItems = ({

  const handleSelectField = (key: string) => {
    const currentSubStep = getCurrentSubStep();
+
    const handleSelectBaseOutputSchema = (
      baseOutputSchema: BaseOutputSchema,
    ) => {
@ -71,7 +89,19 @@ export const SearchVariablesDropdownFieldItems = ({
      }
    };

-    if (isRecordOutputSchema(currentSubStep)) {
+    const handleSelectLinkOutputSchema = (
+      linkOutputSchema: LinkOutputSchema,
+    ) => {
+      setWorkflowSelectedNode(step.id);
+      setWorkflowDiagramTriggerNodeSelection(step.id);
+      if (isDefined(linkOutputSchema.link.tab)) {
+        setActiveTabId(linkOutputSchema.link.tab);
+      }
+    };
+
+    if (isLinkOutputSchema(currentSubStep)) {
+      handleSelectLinkOutputSchema(currentSubStep);
+    } else if (isRecordOutputSchema(currentSubStep)) {
      handleSelectBaseOutputSchema(currentSubStep.fields);
    } else if (isBaseOutputSchema(currentSubStep)) {
      handleSelectBaseOutputSchema(currentSubStep);
--- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownObjectItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownObjectItems.tsx
@ -60,6 +60,10 @@ export const SearchVariablesDropdownObjectItems = ({
  const getDisplayedSubStepObject = () => {
    const currentSubStep = getCurrentSubStep();

+    if (!isRecordOutputSchema(currentSubStep)) {
+      return;
+    }
+
    return currentSubStep.object;
  };

--- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx
@ -10,6 +10,7 @@ import {
  MenuItem,
  MenuItemSelect,
  OverflowingTextWithTooltip,
+  useIcons,
 } from 'twenty-ui';

 type SearchVariablesDropdownWorkflowStepItemsProps = {
@ -24,6 +25,7 @@ export const SearchVariablesDropdownWorkflowStepItems = ({
  onSelect,
 }: SearchVariablesDropdownWorkflowStepItemsProps) => {
  const theme = useTheme();
+  const { getIcon } = useIcons();
  const [searchInputValue, setSearchInputValue] = useState('');

  const { closeDropdown } = useDropdown(dropdownId);
@ -60,7 +62,7 @@ export const SearchVariablesDropdownWorkflowStepItems = ({
            hovered={false}
            onClick={() => onSelect(item.id)}
            text={item.name}
-            LeftIcon={undefined}
+            LeftIcon={item.icon ? getIcon(item.icon) : undefined}
            hasSubMenu
          />
        ))
--- a/packages/twenty-front/src/modules/workflow/search-variables/hooks/useAvailableVariablesInWorkflowStep.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/hooks/useAvailableVariablesInWorkflowStep.ts
@ -82,6 +82,7 @@ export const useAvailableVariablesInWorkflowStep = ({
        id: previousStep.id,
        name: previousStep.name,
        outputSchema: filteredOutputSchema,
+        ...(previousStep.type === 'CODE' ? { icon: 'IconCode' } : {}),
      });
    }
  });
--- a/packages/twenty-front/src/modules/workflow/search-variables/types/StepOutputSchema.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/types/StepOutputSchema.ts
@ -1,6 +1,6 @@
 import { InputSchemaPropertyType } from '@/workflow/types/InputSchema';

-export type Leaf = {
+type Leaf = {
  isLeaf: true;
  type?: InputSchemaPropertyType;
  icon?: string;
@ -8,13 +8,20 @@ export type Leaf = {
  value: any;
 };

-export type Node = {
+type Node = {
  isLeaf: false;
  icon?: string;
  label?: string;
  value: OutputSchema;
 };

+type Link = {
+  isLeaf: true;
+  tab?: string;
+  icon?: string;
+  label?: string;
+};
+
 export type BaseOutputSchema = Record<string, Leaf | Node>;

 export type RecordOutputSchema = {
@ -23,10 +30,19 @@ export type RecordOutputSchema = {
  _outputSchemaType: 'RECORD';
 };

-export type OutputSchema = BaseOutputSchema | RecordOutputSchema;
+export type LinkOutputSchema = {
+  link: Link;
+  _outputSchemaType: 'LINK';
+};
+
+export type OutputSchema =
+  | BaseOutputSchema
+  | RecordOutputSchema
+  | LinkOutputSchema;

 export type StepOutputSchema = {
  id: string;
  name: string;
+  icon?: string;
  outputSchema: OutputSchema;
 };
--- a/packages/twenty-front/src/modules/workflow/search-variables/utils/filterOutputSchema.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/utils/filterOutputSchema.ts
@ -6,6 +6,7 @@ import {
 import { isBaseOutputSchema } from '@/workflow/search-variables/utils/isBaseOutputSchema';
 import { isRecordOutputSchema } from '@/workflow/search-variables/utils/isRecordOutputSchema';
 import { isDefined } from 'twenty-ui';
+import { isLinkOutputSchema } from '@/workflow/search-variables/utils/isLinkOutputSchema';

 const isValidRecordOutputSchema = (
  outputSchema: RecordOutputSchema,
@ -105,7 +106,9 @@ export const filterOutputSchema = (
    return outputSchema;
  }

-  if (isRecordOutputSchema(outputSchema)) {
+  if (isLinkOutputSchema(outputSchema)) {
+    return outputSchema;
+  } else if (isRecordOutputSchema(outputSchema)) {
    return filterRecordOutputSchema(outputSchema, objectNameSingularToSelect);
  } else if (isBaseOutputSchema(outputSchema)) {
    return filterBaseOutputSchema(outputSchema, objectNameSingularToSelect);
--- a/packages/twenty-front/src/modules/workflow/search-variables/utils/isLinkOutputSchema.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/utils/isLinkOutputSchema.ts
@ -0,0 +1,10 @@
+import {
+  OutputSchema,
+  LinkOutputSchema,
+} from '@/workflow/search-variables/types/StepOutputSchema';
+
+export const isLinkOutputSchema = (
+  outputSchema: OutputSchema,
+): outputSchema is LinkOutputSchema => {
+  return outputSchema._outputSchemaType === 'LINK';
+};
--- a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx
@ -15,7 +15,7 @@ import { editor } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
 import { useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { CodeEditor, IconCode, isDefined, IconPlayerPlay } from 'twenty-ui';
+import { CodeEditor, IconCode, IconPlayerPlay, isDefined } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
 import { TabList } from '@/ui/layout/tab/components/TabList';
@ -32,6 +32,7 @@ import { getFunctionOutputSchema } from '@/serverless-functions/utils/getFunctio
 import { getFunctionInputFromSourceCode } from '@/serverless-functions/utils/getFunctionInputFromSourceCode';
 import { mergeDefaultFunctionInputAndFunctionInput } from '@/serverless-functions/utils/mergeDefaultFunctionInputAndFunctionInput';
 import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields';
+import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';

 const StyledContainer = styled.div`
  display: flex;
@ -66,17 +67,19 @@ type ServerlessFunctionInputFormData = {
  [field: string]: string | ServerlessFunctionInputFormData;
 };

-const TAB_LIST_COMPONENT_ID = 'serverless-function-code-step';
-
 export const WorkflowEditActionFormServerlessFunction = ({
  action,
  actionOptions,
 }: WorkflowEditActionFormServerlessFunctionProps) => {
-  const theme = useTheme();
-  const { activeTabId, setActiveTabId } = useTabList(TAB_LIST_COMPONENT_ID);
-  const { updateOneServerlessFunction } = useUpdateOneServerlessFunction();
-  const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
  const serverlessFunctionId = action.settings.input.serverlessFunctionId;
+  const theme = useTheme();
+  const { activeTabId, setActiveTabId } = useTabList(
+    WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID,
+  );
+  const { updateOneServerlessFunction, isReady } =
+    useUpdateOneServerlessFunction(serverlessFunctionId);
+  const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
+
  const workflowId = useRecoilValue(workflowIdState);
  const workflow = useWorkflowWithCurrentVersion(workflowId);
  const { availablePackages } = useGetAvailablePackages({
@ -112,12 +115,11 @@ export const WorkflowEditActionFormServerlessFunction = ({

  const handleSave = useDebouncedCallback(async () => {
    await updateOneServerlessFunction({
-      id: serverlessFunctionId,
      name: formValues.name,
      description: formValues.description,
      code: formValues.code,
    });
-  }, 1_000);
+  }, 500);

  const onCodeChange = async (newCode: string) => {
    if (actionOptions.readonly === true) {
@ -161,7 +163,15 @@ export const WorkflowEditActionFormServerlessFunction = ({
        ...action,
        settings: {
          ...action.settings,
-          outputSchema: {},
+          outputSchema: {
+            link: {
+              isLeaf: true,
+              icon: 'IconVariable',
+              tab: 'test',
+              label: 'Generate Function Input',
+            },
+            _outputSchemaType: 'LINK',
+          },
          input: {
            ...action.settings.input,
            serverlessFunctionInput: newMergedInput,
@ -169,7 +179,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
        },
      });
    },
-    1_000,
+    500,
  );

  const handleInputChange = async (value: any, path: string[]) => {
@ -254,7 +264,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
    !loading && (
      <StyledContainer>
        <StyledTabList
-          tabListInstanceId={TAB_LIST_COMPONENT_ID}
+          tabListInstanceId={WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}
          tabs={tabs}
          behaveAsLinks={false}
        />
@ -277,7 +287,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
                readonly={actionOptions.readonly}
              />
              <StyledCodeEditorContainer>
-                <InputLabel>Code</InputLabel>
+                <InputLabel>Code {!isReady && <span>•</span>}</InputLabel>
                <CodeEditor
                  height={343}
                  value={formValues.code?.[INDEX_FILE_PATH]}
--- a/packages/twenty-front/src/modules/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId.ts
@ -0,0 +1,2 @@
+export const WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID =
+  'workflow-serverless-function-tab-list-component-id';