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

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