Update workflow nodes configuration (#6861)

- Improve the design of the right drawer
- Allow to update the trigger of the workflow: the object and the event
listened to
- Allow to update the selected serverless function that a code action
should execute
- Change how we determine which workflow version to display in the
visualizer. We fetch the selected workflow's data, including whether it
has a draft or a published version. If the workflow has a draft version,
it gets displayed; otherwise, we display the last published version.
- I used the type `WorkflowWithCurrentVersion` to forward the currently
edited workflow with its _current_ version embedded across the app.
- I created single-responsibility hooks like
`useFindWorkflowWithCurrentVersion`, `useFindShowPageWorkflow`,
`useUpdateWorkflowVersionTrigger` or `useUpdateWorkflowVersionStep`.
- I updated the types for workflow related objects, like `Workflow` and
`WorkflowVersion`. See
`packages/twenty-front/src/modules/workflow/types/Workflow.ts`.
- This introduced the possibility to have `null` values for triggers and
steps. I made the according changes in the codebase and in the tests.
- I created a utility function to extract both parts of object-event
format (`company.created`):
`packages/twenty-front/src/modules/workflow/utils/splitWorkflowTriggerEventName.ts`
This commit is contained in:
Baptiste Devessier
2024-09-04 17:39:28 +02:00
committed by GitHub
parent c55dfbde6e
commit a2b1062db6
46 changed files with 1056 additions and 498 deletions

View File

@ -1,47 +0,0 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import {
Workflow,
WorkflowStep,
WorkflowVersion,
} from '@/workflow/types/Workflow';
import { getWorkflowLastVersion } from '@/workflow/utils/getWorkflowLastVersion';
import { insertStep } from '@/workflow/utils/insertStep';
import { isDefined } from 'twenty-ui';
export const useCreateNode = ({ workflow }: { workflow: Workflow }) => {
const { updateOneRecord: updateOneWorkflowVersion } =
useUpdateOneRecord<WorkflowVersion>({
objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
});
const createNode = ({
parentNodeId,
nodeToAdd,
}: {
parentNodeId: string;
nodeToAdd: WorkflowStep;
}) => {
const lastVersion = getWorkflowLastVersion(workflow);
if (!isDefined(lastVersion)) {
throw new Error(
"Can't add a node when no version exists yet. Create a first workflow version before trying to add a node.",
);
}
return updateOneWorkflowVersion({
idToUpdate: lastVersion.id,
updateOneRecordInput: {
steps: insertStep({
steps: lastVersion.steps,
parentStepId: parentNodeId,
stepToAdd: nodeToAdd,
}),
},
});
};
return {
createNode,
};
};

View File

@ -0,0 +1,83 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
import {
WorkflowStep,
WorkflowStepType,
WorkflowVersion,
WorkflowWithCurrentVersion,
} from '@/workflow/types/Workflow';
import { getStepDefaultDefinition } from '@/workflow/utils/getStepDefaultDefinition';
import { insertStep } from '@/workflow/utils/insertStep';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-ui';
export const useCreateStep = ({
workflow,
}: {
workflow: WorkflowWithCurrentVersion;
}) => {
const workflowCreateStepFromParentStepId = useRecoilValue(
workflowCreateStepFromParentStepIdState,
);
const setWorkflowDiagramTriggerNodeSelection = useSetRecoilState(
workflowDiagramTriggerNodeSelectionState,
);
const { updateOneRecord: updateOneWorkflowVersion } =
useUpdateOneRecord<WorkflowVersion>({
objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
});
const insertNodeAndSave = ({
parentNodeId,
nodeToAdd,
}: {
parentNodeId: string;
nodeToAdd: WorkflowStep;
}) => {
const currentVersion = workflow.currentVersion;
if (!isDefined(currentVersion)) {
throw new Error("Can't add a node when there is no current version.");
}
return updateOneWorkflowVersion({
idToUpdate: currentVersion.id,
updateOneRecordInput: {
steps: insertStep({
steps: currentVersion.steps ?? [],
parentStepId: parentNodeId,
stepToAdd: nodeToAdd,
}),
},
});
};
const createStep = async (newStepType: WorkflowStepType) => {
if (!isDefined(workflowCreateStepFromParentStepId)) {
throw new Error('Select a step to create a new step from first.');
}
const newStep = getStepDefaultDefinition(newStepType);
await insertNodeAndSave({
parentNodeId: workflowCreateStepFromParentStepId,
nodeToAdd: newStep,
});
/**
* 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(newStep.id);
};
return {
createStep,
};
};

View File

@ -1,117 +0,0 @@
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useCreateNode } from '@/workflow/hooks/useCreateNode';
import { showPageWorkflowDiagramTriggerNodeSelectionState } from '@/workflow/states/showPageWorkflowDiagramTriggerNodeSelectionState';
import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
import { Workflow } from '@/workflow/types/Workflow';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import {
IconPlaystationSquare,
IconPlug,
IconPlus,
IconSearch,
IconSettingsAutomation,
} from 'twenty-ui';
import { v4 } from 'uuid';
export const useRightDrawerWorkflowSelectAction = ({
tabListId,
workflow,
}: {
tabListId: string;
workflow: Workflow;
}) => {
const workflowCreateStepFromParentStepId = useRecoilValue(
workflowCreateStepFromParentStepIdState,
);
const setShowPageWorkflowDiagramTriggerNodeSelection = useSetRecoilState(
showPageWorkflowDiagramTriggerNodeSelectionState,
);
const { createNode } = useCreateNode({ workflow });
const allOptions: Array<{
id: string;
name: string;
type: 'standard' | 'custom';
icon: any;
}> = [
{
id: 'create-record',
name: 'Create Record',
type: 'standard',
icon: IconPlus,
},
{
id: 'find-records',
name: 'Find Records',
type: 'standard',
icon: IconSearch,
},
];
const tabs = [
{
id: 'all',
title: 'All',
Icon: IconSettingsAutomation,
},
{
id: 'standard',
title: 'Standard',
Icon: IconPlaystationSquare,
},
{
id: 'custom',
title: 'Custom',
Icon: IconPlug,
},
];
const { activeTabIdState } = useTabList(tabListId);
const activeTabId = useRecoilValue(activeTabIdState);
const options = allOptions.filter(
(option) => activeTabId === 'all' || option.type === activeTabId,
);
const handleActionClick = async (actionId: string) => {
if (workflowCreateStepFromParentStepId === undefined) {
throw new Error('Select a step to create a new step from first.');
}
const newNodeId = v4();
/**
* FIXME: For now, the data of the node to create are mostly static.
*/
await createNode({
parentNodeId: workflowCreateStepFromParentStepId,
nodeToAdd: {
id: newNodeId,
name: actionId,
type: 'CODE_ACTION',
valid: true,
settings: {
serverlessFunctionId: '111',
errorHandlingOptions: {
continueOnFailure: {
value: true,
},
retryOnFailure: {
value: true,
},
},
},
},
});
setShowPageWorkflowDiagramTriggerNodeSelection(newNodeId);
};
return {
tabs,
options,
handleActionClick,
};
};

View File

@ -0,0 +1,43 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import {
WorkflowStep,
WorkflowVersion,
WorkflowWithCurrentVersion,
} from '@/workflow/types/Workflow';
import { replaceStep } from '@/workflow/utils/replaceStep';
import { isDefined } from 'twenty-ui';
export const useUpdateWorkflowVersionStep = ({
workflow,
stepId,
}: {
workflow: WorkflowWithCurrentVersion;
stepId: string;
}) => {
const { updateOneRecord: updateOneWorkflowVersion } =
useUpdateOneRecord<WorkflowVersion>({
objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
});
const updateStep = async (updatedStep: WorkflowStep) => {
if (!isDefined(workflow.currentVersion)) {
throw new Error('Can not update an undefined workflow version.');
}
await updateOneWorkflowVersion({
idToUpdate: workflow.currentVersion.id,
updateOneRecordInput: {
steps: replaceStep({
steps: workflow.currentVersion.steps ?? [],
stepId,
stepToReplace: updatedStep,
}),
},
});
};
return {
updateStep,
};
};

View File

@ -0,0 +1,36 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import {
WorkflowTrigger,
WorkflowVersion,
WorkflowWithCurrentVersion,
} from '@/workflow/types/Workflow';
import { isDefined } from 'twenty-ui';
export const useUpdateWorkflowVersionTrigger = ({
workflow,
}: {
workflow: WorkflowWithCurrentVersion;
}) => {
const { updateOneRecord: updateOneWorkflowVersion } =
useUpdateOneRecord<WorkflowVersion>({
objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
});
const updateTrigger = async (updatedTrigger: WorkflowTrigger) => {
if (!isDefined(workflow.currentVersion)) {
throw new Error('Can not update an undefined workflow version.');
}
await updateOneWorkflowVersion({
idToUpdate: workflow.currentVersion.id,
updateOneRecordInput: {
trigger: updatedTrigger,
},
});
};
return {
updateTrigger,
};
};

View File

@ -0,0 +1,55 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import {
Workflow,
WorkflowVersion,
WorkflowWithCurrentVersion,
} from '@/workflow/types/Workflow';
import { isDefined } from 'twenty-ui';
export const useWorkflowWithCurrentVersion = (
workflowId: string | undefined,
): WorkflowWithCurrentVersion | undefined => {
const { record: workflow } = useFindOneRecord<Workflow>({
objectNameSingular: CoreObjectNameSingular.Workflow,
objectRecordId: workflowId,
recordGqlFields: {
id: true,
name: true,
statuses: true,
},
skip: !isDefined(workflowId),
});
const { records: mostRecentWorkflowVersions } =
useFindManyRecords<WorkflowVersion>({
objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
filter: {
workflowId: {
eq: workflowId,
},
},
orderBy: [
{
createdAt: 'DescNullsLast',
},
],
limit: 1,
skip: !isDefined(workflowId),
});
if (!isDefined(workflow)) {
return undefined;
}
const currentVersion = mostRecentWorkflowVersions?.[0];
if (!isDefined(currentVersion)) {
return undefined;
}
return {
...workflow,
currentVersion,
};
};