From 8d35454dd8384efc14f57fc155826dbf18148ced Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Fri, 28 Mar 2025 10:11:01 +0100 Subject: [PATCH] Form action fast follows (#11242) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - on form action, add trash on hover and fix spacing - fix dark mode - second batch of icon fixes Capture d’écran 2025-03-27 à 18 25 48 --- .../constants/WorkflowActionsConfig.ts | 6 +- .../constants/WorkflowRunsActionsConfig.ts | 4 +- .../WorkflowVersionsActionsConfig.ts | 4 +- .../WorkflowEditActionFormBuilder.tsx | 133 ++++++++++-------- .../WorkflowEditActionFormFieldSettings.tsx | 4 +- .../views/workflow-runs-all.view.ts | 2 +- .../workflow-run.workspace-service.ts | 29 +++- .../display/icon/components/TablerIcons.ts | 9 +- 8 files changed, 116 insertions(+), 75 deletions(-) diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts index ffe2e1aea..75af2dea2 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts @@ -39,7 +39,6 @@ import { IconFileImport, IconHeart, IconHeartOff, - IconHistory, IconHistoryToggle, IconNoteOff, IconPlayerPause, @@ -49,6 +48,7 @@ import { IconRotate2, IconTrash, IconTrashX, + IconVersions, } from 'twenty-ui'; export const WORKFLOW_ACTIONS_CONFIG: Record< @@ -120,7 +120,7 @@ export const WORKFLOW_ACTIONS_CONFIG: Record< shortLabel: msg`See active version`, isPinned: false, position: 4, - Icon: IconHistory, + Icon: IconVersions, type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.RecordSelection, availableOn: [ @@ -150,7 +150,7 @@ export const WORKFLOW_ACTIONS_CONFIG: Record< shortLabel: msg`See versions`, isPinned: false, position: 6, - Icon: IconHistory, + Icon: IconVersions, type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.RecordSelection, availableOn: [ diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts index e5885aa46..366659917 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts @@ -27,9 +27,9 @@ import { IconEyeOff, IconHeart, IconHeartOff, - IconHistory, IconRotate2, IconSettingsAutomation, + IconVersions, } from 'twenty-ui'; export const WORKFLOW_RUNS_ACTIONS_CONFIG: Record< @@ -61,7 +61,7 @@ export const WORKFLOW_RUNS_ACTIONS_CONFIG: Record< isPinned: true, type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.RecordSelection, - Icon: IconHistory, + Icon: IconVersions, availableOn: [ ActionViewType.SHOW_PAGE, ActionViewType.INDEX_PAGE_SINGLE_RECORD_SELECTION, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts index e07f18106..6c49cfa8a 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts @@ -30,11 +30,11 @@ import { IconEyeOff, IconHeart, IconHeartOff, - IconHistory, IconHistoryToggle, IconPencil, IconRotate2, IconSettingsAutomation, + IconVersions, } from 'twenty-ui'; export const WORKFLOW_VERSIONS_ACTIONS_CONFIG: Record< @@ -95,7 +95,7 @@ export const WORKFLOW_VERSIONS_ACTIONS_CONFIG: Record< position: 4, type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.RecordSelection, - Icon: IconHistory, + Icon: IconVersions, availableOn: [ ActionViewType.SHOW_PAGE, ActionViewType.INDEX_PAGE_SINGLE_RECORD_SELECTION, diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx index 4467d7d91..c7eda8a00 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx @@ -81,13 +81,18 @@ const StyledIconButtonContainer = styled.div` } `; -const StyledAddFieldContainer = styled.div` - display: flex; +const StyledAddFieldButtonContainer = styled.div` + padding-top: ${({ theme }) => theme.spacing(2)}; +`; + +const StyledAddFieldButtonContentContainer = styled.div` + align-items: center; color: ${({ theme }) => theme.font.color.secondary}; + display: flex; font-weight: ${({ theme }) => theme.font.weight.medium}; + gap: ${({ theme }) => theme.spacing(0.5)}; justify-content: center; width: 100%; - gap: ${({ theme }) => theme.spacing(0.5)}; `; export const WorkflowEditActionFormBuilder = ({ @@ -106,7 +111,9 @@ export const WorkflowEditActionFormBuilder = ({ const headerType = useActionHeaderTypeOrThrow(action.type); const [selectedField, setSelectedField] = useState(null); + const [hoveredField, setHoveredField] = useState(null); const isFieldSelected = (fieldName: string) => selectedField === fieldName; + const isFieldHovered = (fieldName: string) => hoveredField === fieldName; const handleFieldClick = (fieldName: string) => { if (actionOptions.readonly === true) { return; @@ -177,7 +184,10 @@ export const WorkflowEditActionFormBuilder = ({ {field.label ? {field.label} : null} - + setHoveredField(field.id)} + onMouseLeave={() => setHoveredField(null)} + > - {!actionOptions.readonly && isFieldSelected(field.id) && ( - - { - const updatedFormData = formData.filter( - (currentField) => currentField.id !== field.id, - ); + {!actionOptions.readonly && + (isFieldSelected(field.id) || isFieldHovered(field.id)) && ( + + { + const updatedFormData = formData.filter( + (currentField) => currentField.id !== field.id, + ); - setFormData(updatedFormData); + setFormData(updatedFormData); - actionOptions.onActionUpdate({ - ...action, - settings: { - ...action.settings, - input: updatedFormData, - }, - }); - }} - /> - - )} + actionOptions.onActionUpdate({ + ...action, + settings: { + ...action.settings, + input: updatedFormData, + }, + }); + }} + /> + + )} {isFieldSelected(field.id) && ( ))} {!actionOptions.readonly && ( - - - - { - const { label, placeholder, name } = - getDefaultFormFieldSettings(FieldMetadataType.TEXT); + + + + + { + const { label, placeholder, name } = + getDefaultFormFieldSettings(FieldMetadataType.TEXT); - const newField: WorkflowFormActionField = { - id: v4(), - name, - type: FieldMetadataType.TEXT, - label, - placeholder, - }; + const newField: WorkflowFormActionField = { + id: v4(), + name, + type: FieldMetadataType.TEXT, + label, + placeholder, + }; - setFormData([...formData, newField]); + setFormData([...formData, newField]); - actionOptions.onActionUpdate({ - ...action, - settings: { - ...action.settings, - input: [...action.settings.input, newField], - }, - }); - }} - > - - - - {t`Add Field`} - - - - - - + actionOptions.onActionUpdate({ + ...action, + settings: { + ...action.settings, + input: [...action.settings.input, newField], + }, + }); + }} + > + + + + {t`Add Field`} + + + + + + + )} diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx index c53b38231..17be80288 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx @@ -44,12 +44,14 @@ const StyledSettingsHeader = styled.div` border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; display: grid; gap: ${({ theme }) => theme.spacing(1)}; - padding-inline: ${({ theme }) => theme.spacing(3)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(3)}; grid-template-columns: 1fr 24px; padding-bottom: ${({ theme }) => theme.spacing(3)}; `; const StyledTitleContainer = styled.div` + color: ${({ theme }) => theme.font.color.primary}; display: flex; flex-direction: row; gap: ${({ theme }) => theme.spacing(1)}; diff --git a/packages/twenty-server/src/engine/workspace-manager/standard-objects-prefill-data/views/workflow-runs-all.view.ts b/packages/twenty-server/src/engine/workspace-manager/standard-objects-prefill-data/views/workflow-runs-all.view.ts index 9c534d18c..8dafdaa51 100644 --- a/packages/twenty-server/src/engine/workspace-manager/standard-objects-prefill-data/views/workflow-runs-all.view.ts +++ b/packages/twenty-server/src/engine/workspace-manager/standard-objects-prefill-data/views/workflow-runs-all.view.ts @@ -14,7 +14,7 @@ export const workflowRunsAllView = ( type: 'table', key: 'INDEX', position: 0, - icon: 'IconHistory', + icon: 'IconHistoryToggle', openRecordIn: ViewOpenRecordInType.RECORD_PAGE, kanbanFieldMetadataId: '', filters: [], diff --git a/packages/twenty-server/src/modules/workflow/workflow-runner/workflow-run/workflow-run.workspace-service.ts b/packages/twenty-server/src/modules/workflow/workflow-runner/workflow-run/workflow-run.workspace-service.ts index 9eaa57cab..022b77981 100644 --- a/packages/twenty-server/src/modules/workflow/workflow-runner/workflow-run/workflow-run.workspace-service.ts +++ b/packages/twenty-server/src/modules/workflow/workflow-runner/workflow-run/workflow-run.workspace-service.ts @@ -8,6 +8,7 @@ import { WorkflowRunStatus, WorkflowRunWorkspaceEntity, } from 'src/modules/workflow/common/standard-objects/workflow-run.workspace-entity'; +import { WorkflowWorkspaceEntity } from 'src/modules/workflow/common/standard-objects/workflow.workspace-entity'; import { WorkflowCommonWorkspaceService } from 'src/modules/workflow/common/workspace-services/workflow-common.workspace-service'; import { WorkflowAction } from 'src/modules/workflow/workflow-executor/workflow-actions/types/workflow-action.type'; import { @@ -39,12 +40,36 @@ export class WorkflowRunWorkspaceService { workflowVersionId, ); + const workflowRepository = + await this.twentyORMManager.getRepository( + 'workflow', + ); + + const workflow = await workflowRepository.findOne({ + where: { + id: workflowVersion.workflowId, + }, + }); + + if (!workflow) { + throw new WorkflowRunException( + 'Workflow id is invalid', + WorkflowRunExceptionCode.WORKFLOW_RUN_INVALID, + ); + } + + const workflowRunCount = await workflowRunRepository.count({ + where: { + workflowId: workflow.id, + }, + }); + return ( await workflowRunRepository.save({ - name: `Execution of ${workflowVersion.name}`, + name: `#${workflowRunCount + 1} - ${workflow.name}`, workflowVersionId, createdBy, - workflowId: workflowVersion.workflowId, + workflowId: workflow.id, status: WorkflowRunStatus.NOT_STARTED, }) ).id; diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts index 95e6af620..7d9f7d070 100644 --- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts +++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts @@ -203,6 +203,7 @@ export { IconMinus, IconMoneybag, IconMoodSmile, + IconMoon, IconMouse2, IconNorthStar, IconNoteOff, @@ -262,6 +263,9 @@ export { IconSquareRoundedX, IconStatusChange, IconStepInto, + IconSun, + IconSunMoon, + IconSwitchHorizontal, IconTable, IconTag, IconTags, @@ -281,16 +285,13 @@ export { IconUpload, IconUser, IconUserCircle, - IconSwitchHorizontal, IconUserCog, IconUserPin, IconUserPlus, - IconSunMoon, - IconMoon, - IconSun, IconUsers, IconVariable, IconVariablePlus, + IconVersions, IconVideo, IconWand, IconWebhook,