From e0cb53af480968c722afdeeddc272ed83d153a07 Mon Sep 17 00:00:00 2001 From: martmull Date: Mon, 16 Jun 2025 13:40:27 +0200 Subject: [PATCH] 1031 workflows menu fixes (#12618) ## Before (not exhaustive) image image image image ## After (not exhaustive) image image image image --- .../form-types/components/FormDateTimeFieldInput.tsx | 3 ++- .../components/FormMultiSelectFieldInput.tsx | 4 +++- .../form-types/components/FormSelectFieldInput.tsx | 6 ++++++ .../form-types/components/FormSingleRecordPicker.tsx | 3 +++ .../components/SingleRecordPicker.tsx | 4 +++- .../ui/field/input/components/MultiSelectInput.tsx | 8 +++++++- .../components/WorkflowEditActionCreateRecord.tsx | 6 ++++++ .../components/WorkflowEditActionDeleteRecord.tsx | 6 ++++++ .../components/WorkflowEditActionSendEmail.tsx | 5 +++++ .../components/WorkflowEditActionUpdateRecord.tsx | 6 ++++++ .../WorkflowFormFieldSettingsRecordPicker.tsx | 6 ++++++ .../components/WorkflowEditActionHttpRequest.tsx | 5 +++++ .../components/WorkflowEditTriggerCronForm.tsx | 3 +++ .../WorkflowEditTriggerDatabaseEventForm.tsx | 10 ++++++++-- .../components/WorkflowEditTriggerManualForm.tsx | 5 +++++ .../components/WorkflowEditTriggerWebhookForm.tsx | 3 +++ .../components/WorkflowVariablePicker.tsx | 1 + .../components/WorkflowVariablesDropdown.tsx | 7 ++++++- .../components/WorkflowVariablesDropdownFieldItems.tsx | 3 ++- .../WorkflowVariablesDropdownObjectItems.tsx | 3 ++- .../WorkflowVariablesDropdownWorkflowStepItems.tsx | 3 ++- 21 files changed, 90 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx index b93e545dd..925364684 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx @@ -26,13 +26,14 @@ import { Nullable } from 'twenty-ui/utilities'; const StyledInputContainer = styled(FormFieldInputInnerContainer)` display: grid; grid-template-columns: 1fr; - grid-template-rows: 1fr 0px; + grid-template-rows: 1fr 0; overflow: visible; position: relative; `; const StyledDateInputAbsoluteContainer = styled.div` position: absolute; + top: ${({ theme }) => theme.spacing(1)}; `; const StyledDateInput = styled.input<{ hasError?: boolean }>` diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx index 18f620326..9a549fe10 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx @@ -21,6 +21,7 @@ import { isDefined } from 'twenty-shared/utils'; import { VisibilityHidden } from 'twenty-ui/accessibility'; import { IconChevronDown } from 'twenty-ui/display'; import { SelectOption } from 'twenty-ui/input'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; type FormMultiSelectFieldInputProps = { label?: string; @@ -55,7 +56,7 @@ const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)` const StyledSelectInputContainer = styled.div` position: absolute; z-index: 1; - top: ${({ theme }) => theme.spacing(8)}; + top: ${({ theme }) => theme.spacing(9)}; `; const StyledPlaceholder = styled.div` @@ -260,6 +261,7 @@ export const FormMultiSelectFieldInput = ({ onCancel={onCancel} onOptionSelected={onOptionSelected} values={selectedNames} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> )} diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx index 43fe62ce0..fc698308e 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx @@ -13,6 +13,8 @@ import { useId, useState } from 'react'; import { Key } from 'ts-key-enum'; import { isDefined } from 'twenty-shared/utils'; import { SelectOption } from 'twenty-ui/input'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; +import { useTheme } from '@emotion/react'; type FormSelectFieldInputProps = { label?: string; @@ -31,6 +33,8 @@ export const FormSelectFieldInput = ({ options, readonly, }: FormSelectFieldInputProps) => { + const theme = useTheme(); + const inputId = useId(); const hotkeyScope = InlineCellHotkeyScope.InlineCell; @@ -132,6 +136,8 @@ export const FormSelectFieldInput = ({ hasRightElement={isDefined(VariablePicker) && !readonly} withSearchInput disabled={readonly} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} /> ) : ( } dropdownHotkeyScope={{ scope: dropdownId }} diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx index 15c0d14c7..dc50997aa 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx @@ -13,6 +13,7 @@ export const SINGLE_RECORD_PICKER_LISTENER_ID = 'single-record-select'; export type SingleRecordPickerProps = { componentInstanceId: string; + dropdownWidth?: number; } & SingleRecordPickerMenuItemsWithSearchProps; export const SingleRecordPicker = ({ @@ -25,6 +26,7 @@ export const SingleRecordPicker = ({ objectNameSingular, componentInstanceId, layoutDirection, + dropdownWidth, }: SingleRecordPickerProps) => { const containerRef = useRef(null); @@ -49,7 +51,7 @@ export const SingleRecordPicker = ({ - + void; options: SelectOption[]; onOptionSelected: (value: FieldMultiSelectValue) => void; + dropdownWidth?: number; }; export const MultiSelectInput = ({ @@ -34,6 +35,7 @@ export const MultiSelectInput = ({ hotkeyScope, onCancel, onOptionSelected, + dropdownWidth, }: MultiSelectInputProps) => { const { resetSelectedItem } = useSelectableList( selectableListComponentInstanceId, @@ -102,7 +104,11 @@ export const MultiSelectInput = ({ selectableItemIdArray={optionIds} hotkeyScope={hotkeyScope} > - + diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx index 3da95a415..8bf20ab16 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx @@ -16,6 +16,8 @@ import { HorizontalSeparator, useIcons } from 'twenty-ui/display'; import { SelectOption } from 'twenty-ui/input'; import { JsonValue } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; +import { useTheme } from '@emotion/react'; type WorkflowEditActionCreateRecordProps = { action: WorkflowCreateRecordAction; @@ -57,6 +59,8 @@ export const WorkflowEditActionCreateRecord = ({ action, actionOptions, }: WorkflowEditActionCreateRecordProps) => { + const theme = useTheme(); + const { getIcon } = useIcons(); const { activeNonSystemObjectMetadataItems } = @@ -201,6 +205,8 @@ export const WorkflowEditActionCreateRecord = ({ saveAction(newFormData); }} withSearchInput + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx index 635c72a92..d26614c15 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx @@ -13,6 +13,8 @@ import { HorizontalSeparator, useIcons } from 'twenty-ui/display'; import { SelectOption } from 'twenty-ui/input'; import { JsonValue } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; +import { useTheme } from '@emotion/react'; type WorkflowEditActionDeleteRecordProps = { action: WorkflowDeleteRecordAction; @@ -35,6 +37,8 @@ export const WorkflowEditActionDeleteRecord = ({ action, actionOptions, }: WorkflowEditActionDeleteRecordProps) => { + const theme = useTheme(); + const { getIcon } = useIcons(); const { activeNonSystemObjectMetadataItems } = @@ -147,6 +151,8 @@ export const WorkflowEditActionDeleteRecord = ({ saveAction(newFormData); }} withSearchInput + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx index 1b5dd6ed0..e2e0ef65f 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx @@ -24,6 +24,8 @@ import { SelectOption } from 'twenty-ui/input'; import { JsonValue } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; +import { useTheme } from '@emotion/react'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; type WorkflowEditActionSendEmailProps = { action: WorkflowSendEmailAction; @@ -48,6 +50,7 @@ export const WorkflowEditActionSendEmail = ({ action, actionOptions, }: WorkflowEditActionSendEmailProps) => { + const theme = useTheme(); const { getIcon } = useIcons(); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); const { triggerApisOAuth } = useTriggerApisOAuth(); @@ -244,6 +247,8 @@ export const WorkflowEditActionSendEmail = ({ handleFieldChange('connectedAccountId', connectedAccountId); }} disabled={actionOptions.readonly} + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> { + const theme = useTheme(); + const { getIcon } = useIcons(); const { activeNonSystemObjectMetadataItems } = @@ -184,6 +188,8 @@ export const WorkflowEditActionUpdateRecord = ({ saveAction(newFormData); }} withSearchInput + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx index 0618ea4b0..d5ac0b488 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx @@ -9,6 +9,8 @@ import styled from '@emotion/styled'; import camelCase from 'lodash.camelcase'; import { useIcons } from 'twenty-ui/display'; import { SelectOption } from 'twenty-ui/input'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; +import { useTheme } from '@emotion/react'; type WorkflowFormFieldSettingsRecordPickerProps = { field: WorkflowFormActionField; @@ -25,6 +27,8 @@ export const WorkflowFormFieldSettingsRecordPicker = ({ field, onChange, }: WorkflowFormFieldSettingsRecordPickerProps) => { + const theme = useTheme(); + const { getIcon } = useIcons(); const { activeNonSystemObjectMetadataItems } = @@ -62,6 +66,8 @@ export const WorkflowFormFieldSettingsRecordPicker = ({ }); }} withSearchInput + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx index 5c39637e0..4af4dcbb6 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx @@ -18,6 +18,8 @@ import { useHttpRequestForm } from '../hooks/useHttpRequestForm'; import { useHttpRequestOutputSchema } from '../hooks/useHttpRequestOutputSchema'; import { BodyInput } from './BodyInput'; import { KeyValuePairInput } from './KeyValuePairInput'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; +import { useTheme } from '@emotion/react'; type WorkflowEditActionHttpRequestProps = { action: WorkflowHttpRequestAction; @@ -31,6 +33,7 @@ export const WorkflowEditActionHttpRequest = ({ action, actionOptions, }: WorkflowEditActionHttpRequestProps) => { + const theme = useTheme(); const { getIcon } = useIcons(); const { headerTitle, headerIcon, headerIconColor, headerType } = useWorkflowActionHeader({ @@ -84,6 +87,8 @@ export const WorkflowEditActionHttpRequest = ({ value={formData.method} onChange={(value) => handleFieldChange('method', value)} disabled={actionOptions.readonly} + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> {trigger.settings.type === 'CUSTOM' && ( theme.font.color.light}; @@ -200,7 +201,9 @@ export const WorkflowEditTriggerDatabaseEventForm = ({ <> {!triggerOptions.readonly && (isSystemObjectsOpen ? ( - + ) : ( - + } dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }} + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} /> {isDefined(selectedObjectMetadataItem) && isUpdateEvent && ( 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 b4c16fd36..7d3cf5e5a 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 @@ -15,6 +15,7 @@ import { useTheme } from '@emotion/react'; import { isDefined } from 'twenty-shared/utils'; import { useIcons } from 'twenty-ui/display'; import { SelectOption } from 'twenty-ui/input'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; type WorkflowEditTriggerManualFormProps = { trigger: WorkflowManualTrigger; @@ -96,6 +97,8 @@ export const WorkflowEditTriggerManualForm = ({ }), }); }} + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> {manualTriggerAvailability === 'WHEN_RECORD_SELECTED' ? ( @@ -119,6 +122,8 @@ export const WorkflowEditTriggerManualForm = ({ }, }); }} + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> ) : null} diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx index 846cf585f..974c4df4c 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx @@ -24,6 +24,7 @@ import { isDefined } from 'twenty-shared/utils'; import { IconCopy, useIcons } from 'twenty-ui/display'; import { useDebouncedCallback } from 'use-debounce'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; type WorkflowEditTriggerWebhookFormProps = { trigger: WorkflowWebhookTrigger; @@ -138,6 +139,8 @@ export const WorkflowEditTriggerWebhookForm = ({ { computeOutputSchema: false }, ); }} + dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> {trigger.settings.httpMethod === 'POST' && ( ); diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx index 957abebb3..4da56bf26 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx @@ -37,11 +37,13 @@ export const WorkflowVariablesDropdown = ({ onVariableSelect, disabled, objectNameSingularToSelect, + multiline, }: { inputId: string; onVariableSelect: (variableName: string) => void; disabled?: boolean; objectNameSingularToSelect?: string; + multiline?: boolean; }) => { const theme = useTheme(); @@ -132,7 +134,10 @@ export const WorkflowVariablesDropdown = ({ ) } dropdownPlacement="bottom-end" - dropdownOffset={{ x: 2, y: 4 }} + dropdownOffset={{ + x: parseInt(theme.spacing(0.5), 10), + y: parseInt(theme.spacing(multiline ? 11 : 1), 10), + }} /> ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx index f44609545..0fcd0ebcf 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx @@ -27,6 +27,7 @@ import { useIcons, } from 'twenty-ui/display'; import { MenuItemSelect } from 'twenty-ui/navigation'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; type WorkflowVariablesDropdownFieldItemsProps = { step: StepOutputSchema; @@ -118,7 +119,7 @@ export const WorkflowVariablesDropdownFieldItems = ({ : options; return ( - + + +