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

Object icon visual parity (#19374)

Browse Source 
## Summary

Aligns **object metadata** icons with the **tinted tile** look
everywhere we show a workspace object, and **retires** the
navigation-only `NavigationMenuItemStyleIcon` wrapper in favor of
**shared** UI primitives under `@/ui/display` and `@/object-metadata`.

## What changed

### Global tinted icon building blocks (`@/ui/display`)

- **`TintedIconTile`** / **`StyledTintedIconTileContainer`** support
optional **`size`** and **`stroke`**, and grow the tile when **`size`**
is set so layouts match previous `theme.icon` usage.
- Shared helpers and constants for theme color parsing and tinted
backgrounds/borders/icon color (e.g.
**`getTintedIconTileStyleFromColor`**, **`parseThemeColor`**,
**`getColorFromTheme`**, related constants).

### Object metadata icon (`@/object-metadata`)

- **`ObjectMetadataIcon`** composes **`TintedIconTile`** with
**`getObjectColorWithFallback`**, forwards optional **`size`** /
**`stroke`** for **visual parity** with old `getIcon` + explicit sizing.
- **`getSelectOptionIconFromObjectMetadataItem`** returns an
**`IconComponent`** for selects/menus that expect a component, not a
React node.

### Navigation module cleanup

- **Removed** **`NavigationMenuItemStyleIcon`**; call sites use
**`ObjectMetadataIcon`**, **`TintedIconTile`**, and/or the shared
**`getTintedIconTileStyleFromColor`** pipeline so the same treatment is
**not** tied to the navigation package.
- **`NavigationMenuItemIcon`**, view/link overlays, DnD handle, and
sidebar editor flows updated to use the shared pattern where they render
object (or tinted) icons.

### Product surfaces updated (non-exhaustive)

- **Settings:** role object picker/rows, data model
tables/graph/overview, object preview summary, webhooks entity list,
morph relation multiselect.
- **Workflows:** create/update/delete/upsert/find records, triggers,
filters, variables dropdowns, AI agent object rows, object dropdowns.
- **Shell:** side panel object filter / data sources / folder chrome
where object icons appear.
- **Records:** index header icon, show breadcrumb styling.
- **Activity:** timeline event icon when linked object metadata applies.
- **`NavigationDrawerItem`:** tinted branch aligned with shared
**`TintedIconTile`** behavior.

---------

Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
This commit is contained in:
Abdul Rahman
2026-04-10 15:44:20 +05:30
committed by GitHub
parent aed81a54a2
commit 34a903b4fa
81 changed files with 587 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowDropdownStepOutputItems.tsx
+9 -5
View File
@@ -5,6 +5,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { useGetFieldMetadataItemByIdOrThrow } from '@/object-metadata/hooks/useGetFieldMetadataItemById';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { useGetInitialFilterValue } from '@/object-record/object-filter-dropdown/hooks/useGetInitialFilterValue';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
@@ -52,6 +53,8 @@ export const WorkflowDropdownStepOutputItems = ({
}: WorkflowDropdownStepOutputItemsProps) => {
const { t } = useLingui();
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const { upsertStepFilterSettings } = useUpsertStepFilterSettings();
const { getFieldMetadataItemByIdOrThrow } =
@@ -203,6 +206,10 @@ export const WorkflowDropdownStepOutputItems = ({
const objectLabel = subStepObjectMetadataItem?.labelSingular;
const subStepObjectIconProps = isDefined(subStepObjectMetadataItem)
? getSelectIconPropsFromObjectMetadataItem(subStepObjectMetadataItem)
: undefined;
return (
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
<DropdownMenuHeader
@@ -231,11 +238,8 @@ export const WorkflowDropdownStepOutputItems = ({
onClick={handleSelectObject}
text={objectLabel || ''}
hasSubMenu={false}
LeftIcon={
subStepObjectMetadataItem?.icon
? getIcon(subStepObjectMetadataItem.icon)
: undefined
}
LeftIcon={subStepObjectIconProps?.Icon}
leftIconColor={subStepObjectIconProps?.iconThemeColor}
contextualText={t`Pick a ${objectLabel} record`}
/>
)}
packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterFieldSelect.tsx
+14 -1
View File
@@ -1,4 +1,5 @@
import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { SelectControl } from '@/ui/input/components/SelectControl';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -33,6 +34,8 @@ export const WorkflowStepFilterFieldSelect = ({
const { t } = useLingui();
const { closeDropdown } = useCloseDropdown();
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const availableVariablesInWorkflowStep = useAvailableVariablesInWorkflowStep({
shouldDisplayRecordFields: true,
@@ -88,12 +91,20 @@ export const WorkflowStepFilterFieldSelect = ({
? t`Select a field from a previous step`
: variableLabel;
const fullRecordIconProps = stepFilter.isFullRecord
? isDefined(filterObjectMetadataItem)
? getSelectIconPropsFromObjectMetadataItem(filterObjectMetadataItem)
: undefined
: undefined;
const icon = stepFilter.isFullRecord
? getIcon(filterObjectMetadataItem?.icon)
? fullRecordIconProps?.Icon
: filterFieldMetadataItem?.icon
? getIcon(filterFieldMetadataItem.icon)
: undefined;
const iconThemeColor = fullRecordIconProps?.iconThemeColor;
if (readonly || noAvailableVariables) {
const disabledLabel = noAvailableVariables
? t`No available fields to select`
@@ -109,6 +120,7 @@ export const WorkflowStepFilterFieldSelect = ({
label: disabledLabel,
fullLabel: variablePathLabel,
Icon: icon,
iconThemeColor,
}}
isDisabled={true}
/>
@@ -128,6 +140,7 @@ export const WorkflowStepFilterFieldSelect = ({
fullLabel: variablePathLabel,
value: stepFilter.stepOutputKey,
Icon: icon,
iconThemeColor,
}}
textAccent={isSelectedFieldNotFound ? 'placeholder' : 'default'}
isDisabled={readonly}
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx
+7 -11
View File
@@ -1,12 +1,12 @@
import { useIcons } from 'twenty-ui/display';
import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
import { MenuItem } from 'twenty-ui/navigation';
type WorkflowAiAgentPermissionsObjectRowProps = {
objectMetadata: {
id: string;
icon?: string | null;
labelPlural: string;
};
objectMetadata: Pick<
EnrichedObjectMetadataItem,
'id' | 'icon' | 'labelPlural' | 'nameSingular' | 'color' | 'isSystem'
>;
onClick?: () => void;
readonly: boolean;
};
@@ -16,13 +16,9 @@ export const WorkflowAiAgentPermissionsObjectRow = ({
onClick,
readonly,
}: WorkflowAiAgentPermissionsObjectRowProps) => {
const { getIcon } = useIcons();
const IconComponent = getIcon(objectMetadata.icon);
return (
<MenuItem
LeftIcon={IconComponent}
withIconContainer
LeftComponent={<ObjectMetadataIcon objectMetadataItem={objectMetadata} />}
text={objectMetadata.labelPlural}
hasSubMenu={!readonly}
onClick={!readonly ? onClick : undefined}
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectsList.tsx
+7 -5
View File
@@ -1,13 +1,15 @@
import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { t } from '@lingui/core/macro';
import { WorkflowAiAgentPermissionsObjectRow } from './WorkflowAiAgentPermissionsObjectRow';
type WorkflowAiAgentPermissionsObjectsListProps = {
objects: Array<{
id: string;
icon?: string | null;
labelPlural: string;
}>;
objects: Array<
Pick<
EnrichedObjectMetadataItem,
'id' | 'icon' | 'labelPlural' | 'nameSingular' | 'color' | 'isSystem'
>
>;
onObjectClick: (objectId: string) => void;
readonly: boolean;
};
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx
+6 -5
View File
@@ -1,6 +1,6 @@
import { t } from '@lingui/core/macro';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
import { FormFieldInput } from '@/object-record/record-field/ui/components/FormFieldInput';
import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
@@ -12,10 +12,11 @@ import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowS
import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
import { shouldDisplayFormField } from '@/workflow/workflow-steps/workflow-actions/utils/shouldDisplayFormField';
import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
import { t } from '@lingui/core/macro';
import { useEffect, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { canObjectBeManagedByWorkflow } from 'twenty-shared/workflow';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { HorizontalSeparator } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { type JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
@@ -65,8 +66,8 @@ export const WorkflowEditActionCreateRecord = ({
action,
actionOptions,
}: WorkflowEditActionCreateRecordProps) => {
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
@@ -79,9 +80,9 @@ export const WorkflowEditActionCreateRecord = ({
}),
)
.map((item) => ({
Icon: getIcon(item.icon),
label: item.labelPlural,
value: item.nameSingular,
...getSelectIconPropsFromObjectMetadataItem(item),
}));
const [formData, setFormData] = useState<CreateRecordFormData>({
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx
+6 -5
View File
@@ -1,8 +1,9 @@
import { t } from '@lingui/core/macro';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { FormSingleRecordPicker } from '@/object-record/record-field/ui/form-types/components/FormSingleRecordPicker';
import { Select } from '@/ui/input/components/Select';
import { type WorkflowDeleteRecordAction } from '@/workflow/types/Workflow';
import { t } from '@lingui/core/macro';
import { useEffect, useState } from 'react';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
@@ -11,7 +12,7 @@ import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/Workflo
import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
import { isDefined } from 'twenty-shared/utils';
import { canObjectBeManagedByWorkflow } from 'twenty-shared/workflow';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { HorizontalSeparator } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { type JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
@@ -37,8 +38,8 @@ export const WorkflowEditActionDeleteRecord = ({
action,
actionOptions,
}: WorkflowEditActionDeleteRecordProps) => {
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
@@ -51,9 +52,9 @@ export const WorkflowEditActionDeleteRecord = ({
}),
)
.map((item) => ({
Icon: getIcon(item.icon),
label: item.labelPlural,
value: item.nameSingular,
...getSelectIconPropsFromObjectMetadataItem(item),
}));
const [formData, setFormData] = useState<DeleteRecordFormData>({
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord.tsx
+5 -4
View File
@@ -1,4 +1,5 @@
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
import { FormFieldInput } from '@/object-record/record-field/ui/components/FormFieldInput';
import { FormSingleRecordPicker } from '@/object-record/record-field/ui/form-types/components/FormSingleRecordPicker';
@@ -16,7 +17,7 @@ import { t } from '@lingui/core/macro';
import { useEffect, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { canObjectBeManagedByWorkflow } from 'twenty-shared/workflow';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { HorizontalSeparator } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { type JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
@@ -38,8 +39,8 @@ export const WorkflowEditActionUpdateRecord = ({
action,
actionOptions,
}: WorkflowEditActionUpdateRecordProps) => {
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
@@ -52,9 +53,9 @@ export const WorkflowEditActionUpdateRecord = ({
}),
)
.map((item) => ({
Icon: getIcon(item.icon),
label: item.labelPlural,
value: item.nameSingular,
...getSelectIconPropsFromObjectMetadataItem(item),
}));
const [formData, setFormData] = useState<UpdateRecordFormData>({
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpsertRecord.tsx
+5 -4
View File
@@ -1,5 +1,6 @@
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
import { FormFieldInput } from '@/object-record/record-field/ui/components/FormFieldInput';
import { FormSingleRecordPicker } from '@/object-record/record-field/ui/form-types/components/FormSingleRecordPicker';
@@ -17,7 +18,7 @@ import { t } from '@lingui/core/macro';
import { useEffect, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { canObjectBeManagedByWorkflow } from 'twenty-shared/workflow';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { HorizontalSeparator } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { type JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
@@ -75,8 +76,8 @@ export const WorkflowEditActionUpsertRecord = ({
action,
actionOptions,
}: WorkflowEditActionUpsertRecordProps) => {
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
@@ -89,9 +90,9 @@ export const WorkflowEditActionUpsertRecord = ({
}),
)
.map((item) => ({
Icon: getIcon(item.icon),
label: item.labelPlural,
value: item.nameSingular,
...getSelectIconPropsFromObjectMetadataItem(item),
}));
const [formData, setFormData] = useState<UpsertRecordFormData>({
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords.tsx
+8 -7
View File
@@ -1,16 +1,17 @@
import { styled } from '@linaria/react';
import { msg } from '@lingui/core/macro';
import { i18n } from '@lingui/core';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react/macro';
import { isNumber } from '@sniptt/guards';
import { useEffect, useState } from 'react';
import { QUERY_MAX_RECORDS } from 'twenty-shared/constants';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
import { HorizontalSeparator } from 'twenty-ui/display';
import { type JsonValue } from 'type-fest';
import { useDebouncedCallback } from 'use-debounce';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { FormNumberFieldInput } from '@/object-record/record-field/ui/form-types/components/FormNumberFieldInput';
@@ -82,6 +83,8 @@ export const WorkflowEditActionFindRecords = ({
actionOptions,
}: WorkflowEditActionFindRecordsProps) => {
const { t } = useLingui();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const maxRecordsFormatted = QUERY_MAX_RECORDS.toLocaleString();
const dropdownId = 'workflow-edit-action-record-find-records-object-name';
@@ -108,13 +111,11 @@ export const WorkflowEditActionFindRecords = ({
const selectedObjectMetadataItem = objectMetadataItems.find(
(item) => item.nameSingular === formData.objectNameSingular,
);
const { getIcon } = useIcons();
const selectedOption = selectedObjectMetadataItem
? {
Icon: getIcon(selectedObjectMetadataItem?.icon),
label: selectedObjectMetadataItem?.labelPlural,
value: selectedObjectMetadataItem?.nameSingular,
label: selectedObjectMetadataItem.labelPlural,
value: selectedObjectMetadataItem.nameSingular,
...getSelectIconPropsFromObjectMetadataItem(selectedObjectMetadataItem),
}
: { label: i18n._(defaultSelectedOptionMessage), value: '' };
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowObjectDropdownContent.tsx
+9 -13
View File
@@ -1,3 +1,4 @@
import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
@@ -9,7 +10,7 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene
import { Trans } from '@lingui/react/macro';
import { isNonEmptyString } from '@sniptt/guards';
import { useState } from 'react';
import { IconChevronLeft, IconSettings, useIcons } from 'twenty-ui/display';
import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
type WorkflowObjectDropdownContentProps = {
@@ -21,7 +22,6 @@ export const WorkflowObjectDropdownContent = ({
onOptionClick,
showAdvancedOption = true,
}: WorkflowObjectDropdownContentProps) => {
const { getIcon } = useIcons();
const [searchInputValue, setSearchInputValue] = useState('');
const [isSystemObjectsOpen, setIsSystemObjectsOpen] = useState(false);
@@ -74,12 +74,6 @@ export const WorkflowObjectDropdownContent = ({
? filteredSystemObjects
: filteredNonSystemObjects;
const filteredOptions = filteredObjects.map((objectMetadataItem) => ({
Icon: getIcon(objectMetadataItem.icon),
label: objectMetadataItem.labelPlural,
value: objectMetadataItem.nameSingular,
}));
const handleSystemObjectsClick = () => {
setIsSystemObjectsOpen(true);
setSearchInputValue('');
@@ -123,12 +117,14 @@ export const WorkflowObjectDropdownContent = ({
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{filteredOptions.map((option) => (
{filteredObjects.map((objectMetadataItem) => (
<MenuItem
key={option.value}
LeftIcon={option.Icon}
text={option.label}
onClick={() => onOptionClick(option.value)}
key={objectMetadataItem.nameSingular}
LeftIcon={() => (
<ObjectMetadataIcon objectMetadataItem={objectMetadataItem} />
)}
text={objectMetadataItem.labelPlural}
onClick={() => onOptionClick(objectMetadataItem.nameSingular)}
/>
))}
{shouldShowAdvanced && (
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsRecordPicker.tsx
+5 -5
View File
@@ -1,4 +1,5 @@
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { FormFieldInputContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputContainer';
import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
import { InputLabel } from '@/ui/input/components/InputLabel';
@@ -6,10 +7,9 @@ import { Select } from '@/ui/input/components/Select';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { type WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField';
import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
import { t } from '@lingui/core/macro';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import camelCase from 'lodash.camelcase';
import { useIcons } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -28,16 +28,16 @@ export const WorkflowFormFieldSettingsRecordPicker = ({
field,
onChange,
}: WorkflowFormFieldSettingsRecordPickerProps) => {
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
const availableMetadata: Array<SelectOption<string>> =
activeNonSystemObjectMetadataItems.map((item) => ({
Icon: getIcon(item.icon),
label: item.labelPlural,
value: item.nameSingular,
...getSelectIconPropsFromObjectMetadataItem(item),
}));
return (
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx
+6 -4
View File
@@ -1,4 +1,5 @@
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { type FieldMultiSelectValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { SelectControl } from '@/ui/input/components/SelectControl';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -20,7 +21,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
import { useCallback, useMemo, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
import { IconChevronLeft, IconSettings, useIcons } from 'twenty-ui/display';
import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -63,8 +64,9 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
trigger,
triggerOptions,
}: WorkflowEditTriggerDatabaseEventFormProps) => {
const { getIcon } = useIcons();
const { t } = useLingui();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const [searchInputValue, setSearchInputValue] = useState('');
const [isSystemObjectsOpen, setIsSystemObjectsOpen] = useState(false);
const dropdownId = 'workflow-edit-trigger-record-type';
@@ -90,7 +92,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
.map((item) => ({
label: item.labelPlural,
value: item.nameSingular,
Icon: getIcon(item.icon),
...getSelectIconPropsFromObjectMetadataItem(item),
}));
const systemObjects = objectMetadataItems
@@ -98,7 +100,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
.map((item) => ({
label: item.labelPlural,
value: item.nameSingular,
Icon: getIcon(item.icon),
...getSelectIconPropsFromObjectMetadataItem(item),
}));
const selectedOption =
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManual.tsx
+5 -2
View File
@@ -1,5 +1,5 @@
import { isDefined } from 'twenty-shared/utils';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { SelectControl } from '@/ui/input/components/SelectControl';
@@ -13,6 +13,7 @@ import { getManualTriggerDefaultSettings } from '@/workflow/workflow-trigger/uti
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { QUERY_MAX_RECORDS } from 'twenty-shared/constants';
import { isDefined } from 'twenty-shared/utils';
import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
import { useIcons } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
@@ -56,6 +57,8 @@ export const WorkflowEditTriggerManual = ({
const { t } = useLingui();
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const maxRecordsFormatted = QUERY_MAX_RECORDS.toLocaleString();
const { activeNonSystemObjectMetadataItems } =
@@ -65,7 +68,7 @@ export const WorkflowEditTriggerManual = ({
activeNonSystemObjectMetadataItems.map((item) => ({
label: item.labelPlural,
value: item.nameSingular,
Icon: getIcon(item.icon),
...getSelectIconPropsFromObjectMetadataItem(item),
}));
const availability = trigger.settings.availability;
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownStepItems.tsx
+12 -6
View File
@@ -4,9 +4,11 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useVariableDropdown } from '@/workflow/workflow-variables/hooks/useVariableDropdown';
import { isRecordOutputSchemaV2 } from '@/workflow/workflow-variables/types/guards/isRecordOutputSchemaV2';
import { type StepOutputSchemaV2 } from '@/workflow/workflow-variables/types/StepOutputSchemaV2';
import { getCurrentSubStepFromPath } from '@/workflow/workflow-variables/utils/getCurrentSubStepFromPath';
@@ -21,7 +23,6 @@ import {
useIcons,
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { useVariableDropdown } from '@/workflow/workflow-variables/hooks/useVariableDropdown';
type WorkflowVariablesDropdownStepItemsProps = {
step: StepOutputSchemaV2;
@@ -38,6 +39,8 @@ export const WorkflowVariablesDropdownStepItems = ({
}: WorkflowVariablesDropdownStepItemsProps) => {
const { t } = useLingui();
const { getIcon } = useIcons();
const { getSelectIconPropsFromObjectMetadataItem } =
useObjectMetadataSelectHelpers();
const {
searchInputValue,
setSearchInputValue,
@@ -97,6 +100,12 @@ export const WorkflowVariablesDropdownStepItems = ({
const shouldDisplaySubStepObject =
shouldDisplayRecordObjects && isObjectFoundThroughSearch;
const displayedSubStepObjectIconProps = isDefined(
displayedSubStepObjectMetadata,
)
? getSelectIconPropsFromObjectMetadataItem(displayedSubStepObjectMetadata)
: undefined;
return (
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
<DropdownMenuHeader
@@ -125,11 +134,8 @@ export const WorkflowVariablesDropdownStepItems = ({
onClick={handleSelectObject}
text={objectLabel || ''}
hasSubMenu={false}
LeftIcon={
displayedSubStepObjectMetadata?.icon
? getIcon(displayedSubStepObjectMetadata.icon)
: undefined
}
LeftIcon={displayedSubStepObjectIconProps?.Icon}
leftIconColor={displayedSubStepObjectIconProps?.iconThemeColor}
contextualText={t`Pick a ${objectLabel} record`}
/>
)}