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

1031 workflows menu fixes (#12618)

Browse Source 
## Before (not exhaustive)
<img width="520" alt="image"
src="https://github.com/user-attachments/assets/642365c5-f359-4ad3-8ba3-d7bb9c7d91e4"
/>
<img width="522" alt="image"
src="https://github.com/user-attachments/assets/0819717f-84c6-436c-b9f4-20a1964cd565"
/>
<img width="528" alt="image"
src="https://github.com/user-attachments/assets/240bf181-ec37-4e25-9fdb-c264a680abcc"
/>
<img width="525" alt="image"
src="https://github.com/user-attachments/assets/0dfd55c1-dfbd-47ee-8741-977b5e57fa0a"
/>


## After (not exhaustive)
<img width="511" alt="image"
src="https://github.com/user-attachments/assets/199b6e6e-be1d-4b75-8df6-d65ff05bee58"
/>
<img width="512" alt="image"
src="https://github.com/user-attachments/assets/a92f67a8-ed58-4c4f-b401-07765158030f"
/>
<img width="522" alt="image"
src="https://github.com/user-attachments/assets/ba3ae73a-4650-4f7f-a62a-980e6a2d21d1"
/>
<img width="518" alt="image"
src="https://github.com/user-attachments/assets/97946870-4fba-4898-8381-9087df0b9ac4"
/>
This commit is contained in:
martmull
2025-06-16 13:40:27 +02:00
committed by GitHub
parent cdc4badec3
commit e0cb53af48
21 changed files with 90 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
View File

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

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx
View File

@ -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}
/>
</OverlayContainer>
)}

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
View File

@ -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) }}
/>
) : (
<FormFieldInputInnerContainer

3
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx
View File

@ -18,6 +18,7 @@ import styled from '@emotion/styled';
import { useCallback, useId } from 'react';
import { isDefined, isValidUuid } from 'twenty-shared/utils';
import { IconChevronDown, IconForbid } from 'twenty-ui/display';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
const StyledFormSelectContainer = styled(FormFieldInputInnerContainer)<{
readonly?: boolean;
@ -165,6 +166,7 @@ export const FormSingleRecordPicker = ({
clickableComponentWidth={'100%'}
onClose={handleCloseRelationPickerDropdown}
onOpen={handleOpenDropdown}
dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
clickableComponent={
<StyledFormSelectContainer
hasRightElement={isDefined(VariablePicker) && !disabled}
@ -194,6 +196,7 @@ export const FormSingleRecordPicker = ({
onRecordSelected={handleRecordSelected}
objectNameSingular={objectNameSingular}
recordPickerInstanceId={dropdownId}
dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
}
dropdownHotkeyScope={{ scope: dropdownId }}

4
packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
View File

@ -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<HTMLDivElement>(null);
@ -49,7 +51,7 @@ export const SingleRecordPicker = ({
<SingleRecordPickerComponentInstanceContext.Provider
value={{ instanceId: componentInstanceId }}
>
<DropdownContent ref={containerRef}>
<DropdownContent ref={containerRef} widthInPixels={dropdownWidth}>
<SingleRecordPickerMenuItemsWithSearch
{...{
EmptyIcon,

8
packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx
View File

@ -25,6 +25,7 @@ type MultiSelectInputProps = {
onCancel?: () => 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}
>
<DropdownContent ref={containerRef} selectDisabled>
<DropdownContent
ref={containerRef}
selectDisabled
widthInPixels={dropdownWidth}
>
<DropdownMenuSearchInput
value={searchFilter}
onChange={(event) =>

6
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx
View File

@ -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}
/>
<HorizontalSeparator noMargin />

6
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx
View File

@ -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}
/>
<HorizontalSeparator noMargin />

5
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
View File

@ -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}
/>
<FormTextFieldInput
label="Email"

6
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord.tsx
View File

@ -19,6 +19,8 @@ import { SelectOption } from 'twenty-ui/input';
import { JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
import { RelationType } from '~/generated-metadata/graphql';
import { useTheme } from '@emotion/react';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowEditActionUpdateRecordProps = {
action: WorkflowUpdateRecordAction;
@ -43,6 +45,8 @@ export const WorkflowEditActionUpdateRecord = ({
action,
actionOptions,
}: WorkflowEditActionUpdateRecordProps) => {
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}
/>
<HorizontalSeparator noMargin />

6
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx
View File

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

5
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx
View File

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

3
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm.tsx
View File

@ -15,6 +15,7 @@ import cron from 'cron-validate';
import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowEditTriggerCronFormProps = {
trigger: WorkflowCronTrigger;
@ -101,6 +102,8 @@ export const WorkflowEditTriggerCronForm = ({
});
}}
withSearchInput
dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
/>
{trigger.settings.type === 'CUSTOM' && (
<FormTextFieldInput

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

@ -25,6 +25,7 @@ import { useCallback, useMemo, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronLeft, IconSettings, useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.light};
@ -200,7 +201,9 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
<>
{!triggerOptions.readonly &&
(isSystemObjectsOpen ? (
<DropdownContent>
<DropdownContent
widthInPixels={GenericDropdownContentWidth.ExtraLarge}
>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent
@ -229,7 +232,9 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
</DropdownMenuItemsContainer>
</DropdownContent>
) : (
<DropdownContent>
<DropdownContent
widthInPixels={GenericDropdownContentWidth.ExtraLarge}
>
<DropdownMenuSearchInput
autoFocus
value={searchInputValue}
@ -262,6 +267,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
</>
}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
/>
</StyledRecordTypeSelectContainer>
{isDefined(selectedObjectMetadataItem) && isUpdateEvent && (

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

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

3
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx
View File

@ -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' && (
<FormRawJsonFieldInput

1
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx
View File

@ -53,6 +53,7 @@ export const WorkflowVariablePicker: VariablePickerComponent = ({
onVariableSelect={onVariableSelect}
disabled={disabled}
objectNameSingularToSelect={objectNameSingularToSelect}
multiline={multiline}
/>
</StyledSearchVariablesDropdownContainer>
);

7
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
View File

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

3
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
View File

@ -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 (
<DropdownContent>
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent

3
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx
View File

@ -17,6 +17,7 @@ import {
useIcons,
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowVariablesDropdownObjectItemsProps = {
step: StepOutputSchema;
@ -99,7 +100,7 @@ export const WorkflowVariablesDropdownObjectItems = ({
: options;
return (
<DropdownContent>
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent

3
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
View File

@ -9,6 +9,7 @@ import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutput
import { useState } from 'react';
import { IconX, OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowVariablesDropdownWorkflowStepItemsProps = {
dropdownId: string;
@ -33,7 +34,7 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
);
return (
<DropdownContent>
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent