diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx index ebb581ad5..81c68e36c 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx @@ -12,13 +12,14 @@ import { WorkflowDiagramNode, WorkflowDiagramStepNodeData, } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; -import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon'; +import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey'; import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react'; import { useCallback } from 'react'; import { useSetRecoilState } from 'recoil'; -import { IconBolt, isDefined } from 'twenty-ui'; +import { IconBolt, isDefined, useIcons } from 'twenty-ui'; export const WorkflowDiagramCanvasEditableEffect = () => { + const { getIcon } = useIcons(); const { startNodeCreation } = useStartNodeCreation(); const { openRightDrawer, closeRightDrawer } = useRightDrawer(); @@ -66,7 +67,7 @@ export const WorkflowDiagramCanvasEditableEffect = () => { setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false }); openRightDrawer(RightDrawerPages.WorkflowStepEdit, { title: selectedNodeData.name, - Icon: getWorkflowNodeIcon(selectedNodeData), + Icon: getIcon(getWorkflowNodeIconKey(selectedNodeData)), }); }, [ @@ -76,6 +77,7 @@ export const WorkflowDiagramCanvasEditableEffect = () => { closeRightDrawer, closeCommandMenu, startNodeCreation, + getIcon, ], ); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx index 0f2a11c30..5b82068aa 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx @@ -9,13 +9,14 @@ import { WorkflowDiagramNode, WorkflowDiagramStepNodeData, } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; -import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon'; +import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey'; import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react'; import { useCallback } from 'react'; import { useSetRecoilState } from 'recoil'; -import { isDefined } from 'twenty-ui'; +import { isDefined, useIcons } from 'twenty-ui'; export const WorkflowDiagramCanvasReadonlyEffect = () => { + const { getIcon } = useIcons(); const { openRightDrawer, closeRightDrawer } = useRightDrawer(); const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState); const setHotkeyScope = useSetHotkeyScope(); @@ -38,7 +39,7 @@ export const WorkflowDiagramCanvasReadonlyEffect = () => { const selectedNodeData = selectedNode.data as WorkflowDiagramStepNodeData; openRightDrawer(RightDrawerPages.WorkflowStepView, { title: selectedNodeData.name, - Icon: getWorkflowNodeIcon(selectedNodeData), + Icon: getIcon(getWorkflowNodeIconKey(selectedNodeData)), }); }, [ @@ -47,6 +48,7 @@ export const WorkflowDiagramCanvasReadonlyEffect = () => { openRightDrawer, closeRightDrawer, closeCommandMenu, + getIcon, ], ); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx index c5efa221c..33e0fd021 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx @@ -1,7 +1,5 @@ import { WorkflowDiagramBaseStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode'; -import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconPlaylistAdd } from 'twenty-ui'; const StyledStepNodeLabelIconContainer = styled.div` align-items: center; @@ -9,25 +7,16 @@ const StyledStepNodeLabelIconContainer = styled.div` border-radius: ${({ theme }) => theme.spacing(1)}; display: flex; justify-content: center; - padding: ${({ theme }) => theme.spacing(1)}; + padding: ${({ theme }) => theme.spacing(3)}; `; export const WorkflowDiagramEmptyTrigger = () => { - const theme = useTheme(); - return ( - - - } + Icon={} /> ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx index 69230cc14..b9cf73c63 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx @@ -1,9 +1,10 @@ import { assertUnreachable } from '@/workflow/utils/assertUnreachable'; import { WorkflowDiagramBaseStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode'; import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; -import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon'; +import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; const StyledStepNodeLabelIconContainer = styled.div` align-items: center; @@ -22,8 +23,8 @@ export const WorkflowDiagramStepNodeBase = ({ RightFloatingElement?: React.ReactNode; }) => { const theme = useTheme(); - - const Icon = getWorkflowNodeIcon(data); + const { getIcon } = useIcons(); + const Icon = getIcon(getWorkflowNodeIconKey(data)); const renderStepIcon = () => { switch (data.nodeType) { @@ -73,9 +74,7 @@ export const WorkflowDiagramStepNodeBase = ({ ); } - case 'CREATE_RECORD': - case 'UPDATE_RECORD': - case 'DELETE_RECORD': { + default: { return ( { }); }); - it('returns a diagram with an empty-trigger node if the provided workflow version has no steps', () => { + it('returns a diagram with only a trigger node if the provided workflow version has no steps', () => { const result = getWorkflowVersionDiagram({ __typename: 'WorkflowVersion', status: 'ACTIVE', @@ -42,7 +42,7 @@ describe('getWorkflowVersionDiagram', () => { name: '', steps: null, trigger: { - name: 'Company created', + name: 'Record is created', settings: { eventName: 'company.created', outputSchema: {} }, type: 'DATABASE_EVENT', }, @@ -54,9 +54,10 @@ describe('getWorkflowVersionDiagram', () => { nodes: [ { data: { - name: 'Company created', + name: 'Record is created', nodeType: 'trigger', triggerType: 'DATABASE_EVENT', + icon: 'IconPlus', }, id: 'trigger', position: { x: 0, y: 0 }, diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts index 60d821f49..364b511ea 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts @@ -7,9 +7,10 @@ import { WorkflowDiagramEdge, WorkflowDiagramNode, } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; -import { DATABASE_TRIGGER_EVENTS } from '@/workflow/workflow-trigger/constants/DatabaseTriggerEvents'; +import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes'; import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId'; +import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon'; import { isDefined } from 'twenty-ui'; import { v4 } from 'uuid'; @@ -57,11 +58,15 @@ export const generateWorkflowDiagram = ({ const triggerNodeId = TRIGGER_STEP_ID; if (isDefined(trigger)) { - let triggerLabel: string; + let triggerDefaultLabel: string; + let triggerIcon: string | undefined; switch (trigger.type) { case 'MANUAL': { - triggerLabel = 'Manual Trigger'; + triggerDefaultLabel = 'Manual Trigger'; + triggerIcon = getTriggerIcon({ + type: 'MANUAL', + }); break; } @@ -70,10 +75,15 @@ export const generateWorkflowDiagram = ({ trigger.settings.eventName, ); - triggerLabel = - DATABASE_TRIGGER_EVENTS.find( - (event) => event.value === triggerEvent.event, - )?.label ?? ''; + triggerDefaultLabel = + DATABASE_TRIGGER_TYPES.find( + (item) => item.event === triggerEvent.event, + )?.defaultLabel ?? ''; + + triggerIcon = getTriggerIcon({ + type: 'DATABASE_EVENT', + eventName: triggerEvent.event, + }); break; } @@ -90,7 +100,8 @@ export const generateWorkflowDiagram = ({ data: { nodeType: 'trigger', triggerType: trigger.type, - name: isDefined(trigger.name) ? trigger.name : triggerLabel, + name: isDefined(trigger.name) ? trigger.name : triggerDefaultLabel, + icon: triggerIcon, }, position: { x: 0, diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIcon.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIcon.ts deleted file mode 100644 index feefe37ae..000000000 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIcon.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { - WorkflowActionType, - WorkflowTriggerType, -} from '@/workflow/types/Workflow'; -import { assertUnreachable } from '@/workflow/utils/assertUnreachable'; -import { - IconAddressBook, - IconCode, - IconHandMove, - IconMail, - IconPlaylistAdd, -} from 'twenty-ui'; - -export const getWorkflowNodeIcon = ( - data: - | { - nodeType: 'trigger'; - triggerType: WorkflowTriggerType; - } - | { - nodeType: 'action'; - actionType: WorkflowActionType; - }, -) => { - switch (data.nodeType) { - case 'trigger': { - switch (data.triggerType) { - case 'DATABASE_EVENT': { - return IconPlaylistAdd; - } - case 'MANUAL': { - return IconHandMove; - } - } - - return assertUnreachable(data.triggerType); - } - case 'action': { - switch (data.actionType) { - case 'CODE': { - return IconCode; - } - case 'SEND_EMAIL': { - return IconMail; - } - case 'CREATE_RECORD': - case 'UPDATE_RECORD': - case 'DELETE_RECORD': { - return IconAddressBook; - } - } - - return assertUnreachable(data.actionType); - } - } -}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIconKey.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIconKey.ts new file mode 100644 index 000000000..82177b632 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIconKey.ts @@ -0,0 +1,13 @@ +import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; +import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon'; + +export const getWorkflowNodeIconKey = (data: WorkflowDiagramStepNodeData) => { + switch (data.nodeType) { + case 'trigger': { + return data.icon; + } + case 'action': { + return getActionIcon(data.actionType); + } + } +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx index 5cd674b53..b6cf92ce3 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx @@ -7,6 +7,7 @@ const StyledWorkflowStepBody = styled.div` padding: ${({ theme }) => theme.spacing(6)}; row-gap: ${({ theme }) => theme.spacing(6)}; flex: 1 1 auto; + height: 100%; `; export { StyledWorkflowStepBody as WorkflowStepBody }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts index 8d782dff8..f65967bb2 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts @@ -7,17 +7,18 @@ import { WorkflowWithCurrentVersion, } from '@/workflow/types/Workflow'; import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState'; -import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon'; +import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey'; import { useCreateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep'; import { workflowCreateStepFromParentStepIdState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { isDefined } from 'twenty-ui'; +import { isDefined, useIcons } from 'twenty-ui'; export const useCreateStep = ({ workflow, }: { workflow: WorkflowWithCurrentVersion; }) => { + const { getIcon } = useIcons(); const { createWorkflowVersionStep } = useCreateWorkflowVersionStep(); const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState); const setWorkflowLastCreatedStepId = useSetRecoilState( @@ -53,12 +54,15 @@ export const useCreateStep = ({ setWorkflowSelectedNode(createdStep.id); setWorkflowLastCreatedStepId(createdStep.id); + const stepIcon = getWorkflowNodeIconKey({ + nodeType: 'action', + actionType: createdStep.type as WorkflowStepType, + name: createdStep.name, + }); + openRightDrawer(RightDrawerPages.WorkflowStepEdit, { title: createdStep.name, - Icon: getWorkflowNodeIcon({ - nodeType: 'action', - actionType: createdStep.type as WorkflowStepType, - }), + Icon: getIcon(stepIcon), }); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx index dbebcbc5b..c2a39a5b3 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx @@ -3,7 +3,7 @@ import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep'; import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions'; import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions'; import styled from '@emotion/styled'; -import { MenuItem } from 'twenty-ui'; +import { MenuItem, useIcons } from 'twenty-ui'; const StyledActionListContainer = styled.div` display: flex; @@ -30,6 +30,7 @@ export const RightDrawerWorkflowSelectActionContent = ({ }: { workflow: WorkflowWithCurrentVersion; }) => { + const { getIcon } = useIcons(); const { createStep } = useCreateStep({ workflow, }); @@ -40,7 +41,7 @@ export const RightDrawerWorkflowSelectActionContent = ({ {RECORD_ACTIONS.map((action) => ( createStep(action.type)} /> @@ -49,7 +50,7 @@ export const RightDrawerWorkflowSelectActionContent = ({ {OTHER_ACTIONS.map((action) => ( createStep(action.type)} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx index f8296041c..d9d9e8d0f 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx @@ -7,15 +7,11 @@ import { useViewOrDefaultViewFromPrefetchedViews } from '@/views/hooks/useViewOr import { WorkflowCreateRecordAction } from '@/workflow/types/Workflow'; import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody'; import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader'; +import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon'; import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; import { useTheme } from '@emotion/react'; import { useEffect, useState } from 'react'; -import { - HorizontalSeparator, - IconAddressBook, - isDefined, - useIcons, -} from 'twenty-ui'; +import { HorizontalSeparator, isDefined, useIcons } from 'twenty-ui'; import { JsonValue } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; import { FieldMetadataType } from '~/generated/graphql'; @@ -162,6 +158,7 @@ export const WorkflowEditActionFormCreateRecord = ({ }, [saveAction]); const headerTitle = isDefined(action.name) ? action.name : `Create Record`; + const headerIcon = getActionIcon(action.type); return ( <> @@ -176,7 +173,7 @@ export const WorkflowEditActionFormCreateRecord = ({ name: newName, }); }} - Icon={IconAddressBook} + Icon={getIcon(headerIcon)} iconColor={theme.font.color.tertiary} initialTitle={headerTitle} headerType="Action" diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx index 3fb5e1619..6b7cb4067 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx @@ -5,14 +5,10 @@ import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/Workflo import { WorkflowSingleRecordPicker } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowSingleRecordPicker'; import { useTheme } from '@emotion/react'; import { useEffect, useState } from 'react'; -import { - HorizontalSeparator, - IconAddressBook, - isDefined, - useIcons, -} from 'twenty-ui'; +import { HorizontalSeparator, isDefined, useIcons } from 'twenty-ui'; import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody'; +import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon'; import { JsonValue } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; @@ -110,6 +106,7 @@ export const WorkflowEditActionFormDeleteRecord = ({ }, [saveAction]); const headerTitle = isDefined(action.name) ? action.name : `Delete Record`; + const headerIcon = getActionIcon(action.type); return ( <> @@ -124,7 +121,7 @@ export const WorkflowEditActionFormDeleteRecord = ({ name: newName, }); }} - Icon={IconAddressBook} + Icon={getIcon(headerIcon)} iconColor={theme.font.color.tertiary} initialTitle={headerTitle} headerType="Action" diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx index d3d450090..4788885db 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx @@ -9,11 +9,12 @@ import { workflowIdState } from '@/workflow/states/workflowIdState'; import { WorkflowSendEmailAction } from '@/workflow/types/Workflow'; import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody'; import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader'; +import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon'; import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; import { useTheme } from '@emotion/react'; import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; -import { IconMail, IconPlus, isDefined } from 'twenty-ui'; +import { IconPlus, isDefined, useIcons } from 'twenty-ui'; import { JsonValue } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; @@ -41,6 +42,7 @@ export const WorkflowEditActionFormSendEmail = ({ actionOptions, }: WorkflowEditActionFormSendEmailProps) => { const theme = useTheme(); + const { getIcon } = useIcons(); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); const { triggerApisOAuth } = useTriggerApisOAuth(); @@ -165,6 +167,7 @@ export const WorkflowEditActionFormSendEmail = ({ }); const headerTitle = isDefined(action.name) ? action.name : 'Send Email'; + const headerIcon = getActionIcon(action.type); return ( !loading && ( @@ -180,7 +183,7 @@ export const WorkflowEditActionFormSendEmail = ({ name: newName, }); }} - Icon={IconMail} + Icon={getIcon(headerIcon)} iconColor={theme.color.blue} initialTitle={headerTitle} headerType="Email" diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx index 173bfc957..fdace1303 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx @@ -23,6 +23,7 @@ import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverl import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody'; import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields'; import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId'; +import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon'; import { getWrongExportedFunctionMarkers } from '@/workflow/workflow-steps/workflow-actions/utils/getWrongExportedFunctionMarkers'; import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; import { useTheme } from '@emotion/react'; @@ -32,7 +33,13 @@ 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, IconPlayerPlay, isDefined } from 'twenty-ui'; +import { + CodeEditor, + IconCode, + IconPlayerPlay, + isDefined, + useIcons, +} from 'twenty-ui'; import { useDebouncedCallback } from 'use-debounce'; const StyledContainer = styled.div` @@ -76,10 +83,11 @@ export const WorkflowEditActionFormServerlessFunction = ({ action, actionOptions, }: WorkflowEditActionFormServerlessFunctionProps) => { + const theme = useTheme(); + const { getIcon } = useIcons(); const serverlessFunctionId = action.settings.input.serverlessFunctionId; const serverlessFunctionVersion = action.settings.input.serverlessFunctionVersion; - const theme = useTheme(); const tabListId = `${WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}_${serverlessFunctionId}`; const { activeTabId, setActiveTabId } = useTabList(tabListId); const { updateOneServerlessFunction, isReady } = @@ -270,6 +278,11 @@ export const WorkflowEditActionFormServerlessFunction = ({ setFunctionInput(action.settings.input.serverlessFunctionInput); }, [action]); + const headerTitle = isDefined(action.name) + ? action.name + : 'Code - Serverless Function'; + const headerIcon = getActionIcon(action.type); + return ( !loading && ( @@ -284,9 +297,9 @@ export const WorkflowEditActionFormServerlessFunction = ({ onTitleChange={(newName: string) => { updateAction({ name: newName }); }} - Icon={IconCode} + Icon={getIcon(headerIcon)} iconColor={theme.color.orange} - initialTitle={action.name || 'Code - Serverless Function'} + initialTitle={headerTitle} headerType="Code" /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx index d1e736803..3a8ff7a4d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx @@ -3,12 +3,7 @@ import { Select, SelectOption } from '@/ui/input/components/Select'; import { WorkflowUpdateRecordAction } from '@/workflow/types/Workflow'; import { useTheme } from '@emotion/react'; import { useEffect, useState } from 'react'; -import { - HorizontalSeparator, - IconAddressBook, - isDefined, - useIcons, -} from 'twenty-ui'; +import { HorizontalSeparator, isDefined, useIcons } from 'twenty-ui'; import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition'; import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput'; @@ -16,6 +11,7 @@ import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-typ import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody'; import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader'; import { WorkflowSingleRecordPicker } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowSingleRecordPicker'; +import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon'; import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker'; import { JsonValue } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; @@ -157,6 +153,7 @@ export const WorkflowEditActionFormUpdateRecord = ({ }, [saveAction]); const headerTitle = isDefined(action.name) ? action.name : `Update Record`; + const headerIcon = getActionIcon(action.type); return ( <> @@ -171,7 +168,7 @@ export const WorkflowEditActionFormUpdateRecord = ({ name: newName, }); }} - Icon={IconAddressBook} + Icon={getIcon(headerIcon)} iconColor={theme.font.color.tertiary} initialTitle={headerTitle} headerType="Action" diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/OtherActions.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/OtherActions.ts index 8b0c92999..b48ca3217 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/OtherActions.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/OtherActions.ts @@ -1,19 +1,18 @@ import { WorkflowStepType } from '@/workflow/types/Workflow'; -import { IconCode, IconComponent, IconSend } from 'twenty-ui'; export const OTHER_ACTIONS: Array<{ label: string; type: WorkflowStepType; - icon: IconComponent; + icon: string; }> = [ { label: 'Send Email', type: 'SEND_EMAIL', - icon: IconSend, + icon: 'IconSend', }, { label: 'Code', type: 'CODE', - icon: IconCode, + icon: 'IconCode', }, ]; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts index 7e85c7d64..46b3ef85a 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts @@ -1,24 +1,23 @@ import { WorkflowStepType } from '@/workflow/types/Workflow'; -import { IconComponent, IconPlus, IconRefreshDot, IconTrash } from 'twenty-ui'; export const RECORD_ACTIONS: Array<{ label: string; type: WorkflowStepType; - icon: IconComponent; + icon: string; }> = [ { label: 'Create Record', type: 'CREATE_RECORD', - icon: IconPlus, + icon: 'IconPlus', }, { label: 'Update Record', type: 'UPDATE_RECORD', - icon: IconRefreshDot, + icon: 'IconRefreshDot', }, { label: 'Delete Record', type: 'DELETE_RECORD', - icon: IconTrash, + icon: 'IconTrash', }, ]; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIcon.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIcon.ts new file mode 100644 index 000000000..c042becf5 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIcon.ts @@ -0,0 +1,13 @@ +import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions'; +import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions'; + +export const getActionIcon = (actionType: string) => { + switch (actionType) { + case 'CREATE_RECORD': + case 'UPDATE_RECORD': + case 'DELETE_RECORD': + return RECORD_ACTIONS.find((item) => item.type === actionType)?.icon; + default: + return OTHER_ACTIONS.find((item) => item.type === actionType)?.icon; + } +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx index 66cf20907..676962e76 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx @@ -10,7 +10,7 @@ import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hoo import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; -import { MenuItem } from 'twenty-ui'; +import { MenuItem, useIcons } from 'twenty-ui'; const StyledActionListContainer = styled.div` display: flex; @@ -37,6 +37,7 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({ }: { workflow: WorkflowWithCurrentVersion; }) => { + const { getIcon } = useIcons(); const { updateTrigger } = useUpdateWorkflowVersionTrigger({ workflow }); const { activeObjectMetadataItems } = useFilteredObjectMetadataItems(); @@ -49,13 +50,13 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({ Data {DATABASE_TRIGGER_TYPES.map((action) => ( { await updateTrigger( getTriggerDefaultDefinition({ - name: action.name, + defaultLabel: action.defaultLabel, type: action.type, activeObjectMetadataItems, }), @@ -64,8 +65,8 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({ setWorkflowSelectedNode(TRIGGER_STEP_ID); openRightDrawer(RightDrawerPages.WorkflowStepEdit, { - title: action.name, - Icon: action.icon, + title: action.defaultLabel, + Icon: getIcon(action.icon), }); }} /> @@ -73,13 +74,13 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({ Others {OTHER_TRIGGER_TYPES.map((action) => ( { await updateTrigger( getTriggerDefaultDefinition({ - name: action.name, + defaultLabel: action.defaultLabel, type: action.type, activeObjectMetadataItems, }), @@ -88,8 +89,8 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({ setWorkflowSelectedNode(TRIGGER_STEP_ID); openRightDrawer(RightDrawerPages.WorkflowStepEdit, { - title: action.name, - Icon: action.icon, + title: action.defaultLabel, + Icon: getIcon(action.icon), }); }} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx index cac249cd6..b1b82bdd4 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx @@ -4,9 +4,10 @@ import { WorkflowDatabaseEventTrigger } from '@/workflow/types/Workflow'; import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName'; import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody'; import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader'; -import { DATABASE_TRIGGER_EVENTS } from '@/workflow/workflow-trigger/constants/DatabaseTriggerEvents'; +import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon'; +import { getTriggerDefaultLabel } from '@/workflow/workflow-trigger/utils/getTriggerLabel'; import { useTheme } from '@emotion/react'; -import { IconPlaylistAdd, isDefined } from 'twenty-ui'; +import { isDefined, useIcons } from 'twenty-ui'; type WorkflowEditTriggerDatabaseEventFormProps = { trigger: WorkflowDatabaseEventTrigger; @@ -26,6 +27,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({ triggerOptions, }: WorkflowEditTriggerDatabaseEventFormProps) => { const theme = useTheme(); + const { getIcon } = useIcons(); const { activeObjectMetadataItems } = useFilteredObjectMetadataItems(); @@ -37,23 +39,23 @@ export const WorkflowEditTriggerDatabaseEventForm = ({ activeObjectMetadataItems.map((item) => ({ label: item.labelPlural, value: item.nameSingular, + Icon: getIcon(item.icon), })); - const selectedEvent = isDefined(triggerEvent) - ? DATABASE_TRIGGER_EVENTS.find( - (availableEvent) => availableEvent.value === triggerEvent.event, - ) - : undefined; + const defaultLabel = + getTriggerDefaultLabel({ + type: 'DATABASE_EVENT', + eventName: triggerEvent.event, + }) ?? '-'; - const headerTitle = isDefined(trigger.name) - ? trigger.name - : isDefined(selectedEvent) - ? selectedEvent.label - : '-'; + const headerIcon = getTriggerIcon({ + type: 'DATABASE_EVENT', + eventName: triggerEvent.event, + }); - const headerType = isDefined(selectedEvent) - ? `Trigger · ${selectedEvent.label}` - : '-'; + const headerTitle = isDefined(trigger.name) ? trigger.name : defaultLabel; + + const headerType = `Trigger · ${defaultLabel}`; return ( <> @@ -68,7 +70,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({ name: newName, }); }} - Icon={IconPlaylistAdd} + Icon={getIcon(headerIcon)} iconColor={theme.font.color.tertiary} initialTitle={headerTitle} headerType={headerType} diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx index c889c8838..291b230af 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx @@ -8,8 +8,9 @@ import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowS import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader'; import { MANUAL_TRIGGER_AVAILABILITY_OPTIONS } from '@/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions'; import { getManualTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings'; +import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon'; import { useTheme } from '@emotion/react'; -import { IconHandMove, isDefined, useIcons } from 'twenty-ui'; +import { isDefined, useIcons } from 'twenty-ui'; type WorkflowEditTriggerManualFormProps = { trigger: WorkflowManualTrigger; @@ -47,6 +48,10 @@ export const WorkflowEditTriggerManualForm = ({ const headerTitle = isDefined(trigger.name) ? trigger.name : 'Manual Trigger'; + const headerIcon = getTriggerIcon({ + type: 'MANUAL', + }); + return ( <> > = [ - { - label: DatabaseTriggerName.RECORD_IS_CREATED, - value: 'created', - }, - { - label: DatabaseTriggerName.RECORD_IS_UPDATED, - value: 'updated', - }, - { - label: DatabaseTriggerName.RECORD_IS_DELETED, - value: 'deleted', - }, -]; diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerTypes.ts b/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerTypes.ts index 9b255c2da..452cb79be 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerTypes.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerTypes.ts @@ -1,25 +1,28 @@ import { WorkflowTriggerType } from '@/workflow/types/Workflow'; -import { DatabaseTriggerName } from '@/workflow/workflow-trigger/constants/DatabaseTriggerName'; -import { IconComponent, IconPlus, IconRefreshDot, IconTrash } from 'twenty-ui'; +import { DatabaseTriggerDefaultLabel } from '@/workflow/workflow-trigger/constants/DatabaseTriggerDefaultLabel'; export const DATABASE_TRIGGER_TYPES: Array<{ - name: DatabaseTriggerName; + defaultLabel: DatabaseTriggerDefaultLabel; type: WorkflowTriggerType; - icon: IconComponent; + icon: string; + event: string; }> = [ { - name: DatabaseTriggerName.RECORD_IS_CREATED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_CREATED, type: 'DATABASE_EVENT', - icon: IconPlus, + icon: 'IconPlus', + event: 'created', }, { - name: DatabaseTriggerName.RECORD_IS_UPDATED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_UPDATED, type: 'DATABASE_EVENT', - icon: IconRefreshDot, + icon: 'IconRefreshDot', + event: 'updated', }, { - name: DatabaseTriggerName.RECORD_IS_DELETED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_DELETED, type: 'DATABASE_EVENT', - icon: IconTrash, + icon: 'IconTrash', + event: 'deleted', }, ]; diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/OtherTriggerTypes.ts b/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/OtherTriggerTypes.ts index 0e1eed42e..925ce7690 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/OtherTriggerTypes.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/OtherTriggerTypes.ts @@ -1,14 +1,13 @@ import { WorkflowTriggerType } from '@/workflow/types/Workflow'; -import { IconClick, IconComponent } from 'twenty-ui'; export const OTHER_TRIGGER_TYPES: Array<{ - name: string; + defaultLabel: string; type: WorkflowTriggerType; - icon: IconComponent; + icon: string; }> = [ { - name: 'Launch manually', + defaultLabel: 'Launch manually', type: 'MANUAL', - icon: IconClick, + icon: 'IconHandMove', }, ]; diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerDefaultDefinition.test.ts b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerDefaultDefinition.test.ts index 72459de1b..bf55fc944 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerDefaultDefinition.test.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerDefaultDefinition.test.ts @@ -1,4 +1,4 @@ -import { DatabaseTriggerName } from '@/workflow/workflow-trigger/constants/DatabaseTriggerName'; +import { DatabaseTriggerDefaultLabel } from '@/workflow/workflow-trigger/constants/DatabaseTriggerDefaultLabel'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { getTriggerDefaultDefinition } from '../getTriggerDefaultDefinition'; @@ -6,7 +6,7 @@ describe('getTriggerDefaultDefinition', () => { it('throws if the activeObjectMetadataItems list is empty', () => { expect(() => { getTriggerDefaultDefinition({ - name: DatabaseTriggerName.RECORD_IS_CREATED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_CREATED, type: 'DATABASE_EVENT', activeObjectMetadataItems: [], }); @@ -16,7 +16,7 @@ describe('getTriggerDefaultDefinition', () => { it('returns a valid configuration for DATABASE_EVENT trigger type creation', () => { expect( getTriggerDefaultDefinition({ - name: DatabaseTriggerName.RECORD_IS_CREATED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_CREATED, type: 'DATABASE_EVENT', activeObjectMetadataItems: generatedMockObjectMetadataItems, }), @@ -32,7 +32,7 @@ describe('getTriggerDefaultDefinition', () => { it('returns a valid configuration for DATABASE_EVENT trigger type update', () => { expect( getTriggerDefaultDefinition({ - name: DatabaseTriggerName.RECORD_IS_UPDATED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_UPDATED, type: 'DATABASE_EVENT', activeObjectMetadataItems: generatedMockObjectMetadataItems, }), @@ -48,7 +48,7 @@ describe('getTriggerDefaultDefinition', () => { it('returns a valid configuration for DATABASE_EVENT trigger type deletion', () => { expect( getTriggerDefaultDefinition({ - name: DatabaseTriggerName.RECORD_IS_DELETED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_DELETED, type: 'DATABASE_EVENT', activeObjectMetadataItems: generatedMockObjectMetadataItems, }), @@ -64,7 +64,7 @@ describe('getTriggerDefaultDefinition', () => { it('returns a valid configuration for DATABASE_EVENT trigger type creation', () => { expect( getTriggerDefaultDefinition({ - name: DatabaseTriggerName.RECORD_IS_CREATED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_CREATED, type: 'DATABASE_EVENT', activeObjectMetadataItems: generatedMockObjectMetadataItems, }), @@ -80,7 +80,7 @@ describe('getTriggerDefaultDefinition', () => { it('returns a valid configuration for MANUAL trigger type', () => { expect( getTriggerDefaultDefinition({ - name: 'Launch manually', + defaultLabel: 'Launch manually', type: 'MANUAL', activeObjectMetadataItems: generatedMockObjectMetadataItems, }), @@ -96,7 +96,7 @@ describe('getTriggerDefaultDefinition', () => { it('throws when providing an unknown trigger type', () => { expect(() => { getTriggerDefaultDefinition({ - name: DatabaseTriggerName.RECORD_IS_CREATED, + defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_CREATED, type: 'unknown' as any, activeObjectMetadataItems: generatedMockObjectMetadataItems, }); diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerDefaultDefinition.ts b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerDefaultDefinition.ts index 04f341145..bd81a4658 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerDefaultDefinition.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerDefaultDefinition.ts @@ -4,15 +4,15 @@ import { WorkflowTriggerType, } from '@/workflow/types/Workflow'; import { assertUnreachable } from '@/workflow/utils/assertUnreachable'; -import { DATABASE_TRIGGER_EVENTS } from '@/workflow/workflow-trigger/constants/DatabaseTriggerEvents'; +import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes'; import { getManualTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings'; export const getTriggerDefaultDefinition = ({ - name, + defaultLabel, type, activeObjectMetadataItems, }: { - name: string; + defaultLabel: string; type: WorkflowTriggerType; activeObjectMetadataItems: ObjectMetadataItem[]; }): WorkflowTrigger => { @@ -28,9 +28,9 @@ export const getTriggerDefaultDefinition = ({ type, settings: { eventName: `${activeObjectMetadataItems[0].nameSingular}.${ - DATABASE_TRIGGER_EVENTS.find( - (availableEvent) => availableEvent.label === name, - )?.value + DATABASE_TRIGGER_TYPES.find( + (availableEvent) => availableEvent.defaultLabel === defaultLabel, + )?.event }`, outputSchema: {}, }, diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerIcon.ts b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerIcon.ts new file mode 100644 index 000000000..003b464ff --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerIcon.ts @@ -0,0 +1,21 @@ +import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes'; +import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes'; + +export const getTriggerIcon = ( + trigger: + | { + type: 'MANUAL'; + } + | { + type: 'DATABASE_EVENT'; + eventName: string; + }, +): string | undefined => { + if (trigger.type === 'DATABASE_EVENT') { + return DATABASE_TRIGGER_TYPES.find( + (type) => type.event === trigger.eventName, + )?.icon; + } + + return OTHER_TRIGGER_TYPES.find((item) => item.type === trigger.type)?.icon; +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerLabel.ts b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerLabel.ts new file mode 100644 index 000000000..fb07f7bf3 --- /dev/null +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerLabel.ts @@ -0,0 +1,22 @@ +import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes'; +import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes'; + +export const getTriggerDefaultLabel = ( + trigger: + | { + type: 'MANUAL'; + } + | { + type: 'DATABASE_EVENT'; + eventName: string; + }, +): string | undefined => { + if (trigger.type === 'DATABASE_EVENT') { + return DATABASE_TRIGGER_TYPES.find( + (type) => type.event === trigger.eventName, + )?.defaultLabel; + } + + return OTHER_TRIGGER_TYPES.find((item) => item.type === trigger.type) + ?.defaultLabel; +}; diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/utils/getTriggerStepName.ts b/packages/twenty-front/src/modules/workflow/workflow-variables/utils/getTriggerStepName.ts index 00fb841b7..27ac9f86a 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-variables/utils/getTriggerStepName.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-variables/utils/getTriggerStepName.ts @@ -3,7 +3,7 @@ import { WorkflowTrigger, } from '@/workflow/types/Workflow'; import { assertUnreachable } from '@/workflow/utils/assertUnreachable'; -import { DATABASE_TRIGGER_EVENTS } from '@/workflow/workflow-trigger/constants/DatabaseTriggerEvents'; +import { getTriggerDefaultLabel } from '@/workflow/workflow-trigger/utils/getTriggerLabel'; import { capitalize } from 'twenty-shared'; import { isDefined } from 'twenty-ui'; @@ -26,8 +26,10 @@ const getDatabaseEventTriggerStepName = ( trigger: WorkflowDatabaseEventTrigger, ): string => { const [, action] = trigger.settings.eventName.split('.'); + const defaultLabel = getTriggerDefaultLabel({ + type: 'DATABASE_EVENT', + eventName: action, + }); - return ( - DATABASE_TRIGGER_EVENTS.find((event) => event.value === action)?.label ?? '' - ); + return defaultLabel ?? ''; }; diff --git a/packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts b/packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts index e7362cc3d..0db159a10 100644 --- a/packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts +++ b/packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts @@ -49,7 +49,7 @@ export const generateFakeObjectRecordEvent = ( properties: { isLeaf: false, value: { after: { isLeaf: false, value: after, label: 'After' } }, - label: 'Record fields', + label: 'Record Fields', }, }; } @@ -65,7 +65,7 @@ export const generateFakeObjectRecordEvent = ( before: { isLeaf: false, value: before, label: 'Before' }, after: { isLeaf: false, value: after, label: 'After' }, }, - label: 'Record fields', + label: 'Record Fields', }, }; } @@ -78,7 +78,7 @@ export const generateFakeObjectRecordEvent = ( value: { before: { isLeaf: false, value: before, label: 'Before' }, }, - label: 'Record fields', + label: 'Record Fields', }, }; } @@ -91,7 +91,7 @@ export const generateFakeObjectRecordEvent = ( value: { before: { isLeaf: false, value: before, label: 'Before' }, }, - label: 'Record fields', + label: 'Record Fields', }, }; }