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

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