admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix icon matching + small other fixes on workflows (#9814)

Browse Source 
- Record Fields label
- body height fix
- Icons on object picker
- Fix icon matching between nodes and right drawer

<img width="1296" alt="Capture d’écran 2025-01-23 à 18 51 12"
src="https://github.com/user-attachments/assets/ecd5fb00-49cd-416e-96af-9200418294e0"
/>
This commit is contained in:
Thomas Trompette
2025-01-24 15:47:09 +01:00
committed by GitHub
parent 1a42483aa9
commit 29df6e64a0
33 changed files with 247 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
View File

@ -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,
],
);

8
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx
View File

@ -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,
],
);

15
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx
View File

@ -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 (
<WorkflowDiagramBaseStepNode
name="Add a Trigger"
nodeType="trigger"
variant="placeholder"
Icon={
<StyledStepNodeLabelIconContainer>
<IconPlaylistAdd
size={theme.icon.size.md}
color={theme.font.color.tertiary}
/>
</StyledStepNodeLabelIconContainer>
}
Icon={<StyledStepNodeLabelIconContainer />}
/>
);
};

13
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
View File

@ -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 = ({
</StyledStepNodeLabelIconContainer>
);
}
case 'CREATE_RECORD':
case 'UPDATE_RECORD':
case 'DELETE_RECORD': {
default: {
return (
<StyledStepNodeLabelIconContainer>
<Icon
@ -89,8 +88,6 @@ export const WorkflowDiagramStepNodeBase = ({
}
}
}
return assertUnreachable(data);
};
return (

1
packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts
View File

@ -17,6 +17,7 @@ export type WorkflowDiagramStepNodeData =
nodeType: 'trigger';
triggerType: WorkflowTriggerType;
name: string;
icon?: string;
}
| {
nodeType: 'action';

7
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/getWorkflowVersionDiagram.test.ts
View File

@ -33,7 +33,7 @@ describe('getWorkflowVersionDiagram', () => {
});
});
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 },

27
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateWorkflowDiagram.ts
View File

@ -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,

56
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIcon.ts
View File

@ -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);
}
}
};

13
packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowNodeIconKey.ts Normal file
View File

@ -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);
}
}
};

1
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepBody.tsx
View File

@ -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 };

16
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts
View File

@ -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),
});
};

7
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
View File

@ -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) => (
<MenuItem
key={action.type}
LeftIcon={action.icon}
LeftIcon={getIcon(action.icon)}
text={action.label}
onClick={() => createStep(action.type)}
/>
@ -49,7 +50,7 @@ export const RightDrawerWorkflowSelectActionContent = ({
{OTHER_ACTIONS.map((action) => (
<MenuItem
key={action.type}
LeftIcon={action.icon}
LeftIcon={getIcon(action.icon)}
text={action.label}
onClick={() => createStep(action.type)}
/>

11
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx
View File

@ -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"

11
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx
View File

@ -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"

7
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx
View File

@ -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"

21
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx
View File

@ -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 && (
<StyledContainer>
@ -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"
/>
<WorkflowStepBody>

11
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx
View File

@ -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"

7
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/OtherActions.ts
View File

@ -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',
},
];

9
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts
View File

@ -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',
},
];

13
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIcon.ts Normal file
View File

@ -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;
}
};

27
packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
View File

@ -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 = ({
<StyledSectionTitle>Data</StyledSectionTitle>
{DATABASE_TRIGGER_TYPES.map((action) => (
<MenuItem
key={action.name}
LeftIcon={action.icon}
text={action.name}
key={action.defaultLabel}
LeftIcon={getIcon(action.icon)}
text={action.defaultLabel}
onClick={async () => {
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 = ({
<StyledSectionTitle>Others</StyledSectionTitle>
{OTHER_TRIGGER_TYPES.map((action) => (
<MenuItem
key={action.name}
LeftIcon={action.icon}
text={action.name}
key={action.defaultLabel}
LeftIcon={getIcon(action.icon)}
text={action.defaultLabel}
onClick={async () => {
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),
});
}}
/>

34
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx
View File

@ -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}

9
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx
View File

@ -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 (
<>
<WorkflowStepHeader
@ -60,7 +65,7 @@ export const WorkflowEditTriggerManualForm = ({
name: newName,
});
}}
Icon={IconHandMove}
Icon={getIcon(headerIcon)}
iconColor={theme.font.color.tertiary}
initialTitle={headerTitle}
headerType="Trigger · Manual"

2
packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerName.ts → packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerDefaultLabel.ts
View File

@ -1,4 +1,4 @@
export enum DatabaseTriggerName {
export enum DatabaseTriggerDefaultLabel {
RECORD_IS_CREATED = 'Record is Created',
RECORD_IS_UPDATED = 'Record is Updated',
RECORD_IS_DELETED = 'Record is Deleted',

18
packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerEvents.ts
View File

@ -1,18 +0,0 @@
import { SelectOption } from '@/ui/input/components/Select';
import { DatabaseTriggerName } from '@/workflow/workflow-trigger/constants/DatabaseTriggerName';
export const DATABASE_TRIGGER_EVENTS: Array<SelectOption<string>> = [
{
label: DatabaseTriggerName.RECORD_IS_CREATED,
value: 'created',
},
{
label: DatabaseTriggerName.RECORD_IS_UPDATED,
value: 'updated',
},
{
label: DatabaseTriggerName.RECORD_IS_DELETED,
value: 'deleted',
},
];

23
packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerTypes.ts
View File

@ -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',
},
];

9
packages/twenty-front/src/modules/workflow/workflow-trigger/constants/OtherTriggerTypes.ts
View File

@ -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',
},
];

16
packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerDefaultDefinition.test.ts
View File

@ -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,
});

12
packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerDefaultDefinition.ts
View File

@ -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: {},
},

21
packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerIcon.ts Normal file
View File

@ -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;
};

22
packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerLabel.ts Normal file
View File

@ -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;
};

10
packages/twenty-front/src/modules/workflow/workflow-variables/utils/getTriggerStepName.ts
View File

@ -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 ?? '';
};

8
packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts
View File

@ -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',
},
};
}