Add icon to code step

twentyhq · Dec 13, 2024 · 2ae2367 · 2ae2367
1 parent 18b20df
commit 2ae2367
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git 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);
   }, [

diff --git a/...nt/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx b/...nt/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx
@@ -19,13 +19,12 @@ import {
   OverflowingTextWithTooltip,
   useIcons,
 } from 'twenty-ui';
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 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;
@@ -42,11 +41,13 @@ export const SearchVariablesDropdownFieldItems = ({
   const [currentPath, setCurrentPath] = useState<string[]>([]);
   const [searchInputValue, setSearchInputValue] = useState('');
   const { getIcon } = useIcons();
-  const { openRightDrawer } = useRightDrawer();
   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;
@@ -91,11 +92,11 @@ export const SearchVariablesDropdownFieldItems = ({
     const handleSelectLinkOutputSchema = (
       linkOutputSchema: LinkOutputSchema,
     ) => {
+      setWorkflowSelectedNode(step.id);
+      setWorkflowDiagramTriggerNodeSelection(step.id);
       if (isDefined(linkOutputSchema.link.tab)) {
         setActiveTabId(linkOutputSchema.link.tab);
       }
-      setWorkflowSelectedNode(step.id);
-      openRightDrawer(RightDrawerPages.WorkflowStepEdit);
     };
 
     if (isLinkOutputSchema(currentSubStep)) {

diff --git a/...modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx b/...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
           />
         ))

diff --git a/...-front/src/modules/workflow/search-variables/hooks/useAvailableVariablesInWorkflowStep.ts b/...-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' } : {}),
       });
     }
   });

diff --git a/packages/twenty-front/src/modules/workflow/search-variables/types/StepOutputSchema.ts b/packages/twenty-front/src/modules/workflow/search-variables/types/StepOutputSchema.ts
@@ -43,5 +43,6 @@ export type OutputSchema =
 export type StepOutputSchema = {
   id: string;
   name: string;
+  icon?: string;
   outputSchema: OutputSchema;
 };