github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-31 16:57:08 +02:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity Graph

fix(editor): Unify data type icons (#19545)

Browse Source
This commit is contained in:
Charlie Kolb 2025-09-22 12:59:03 +02:00 committed by GitHub
parent c0b553e464
commit 2caf23dd82
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/frontend/editor-ui/src/components/AssignmentCollection/constants.ts
View File

@ -1,9 +1,10 @@
import { DATA_TYPE_ICON_MAP } from '@/constants';
import { type IconName } from '@n8n/design-system/components/N8nIcon/icons';
export const ASSIGNMENT_TYPES: Array<{ type: string; icon: IconName }> = [
{ type: 'string', icon: 'case-upper' },
{ type: 'number', icon: 'hash' },
{ type: 'boolean', icon: 'square-check' },
{ type: 'array', icon: 'list' },
{ type: 'object', icon: 'box' },
{ type: 'string', icon: DATA_TYPE_ICON_MAP.string },
{ type: 'number', icon: DATA_TYPE_ICON_MAP.number },
{ type: 'boolean', icon: DATA_TYPE_ICON_MAP.boolean },
{ type: 'array', icon: DATA_TYPE_ICON_MAP.array },
{ type: 'object', icon: DATA_TYPE_ICON_MAP.object },
];

13
packages/frontend/editor-ui/src/components/FilterConditions/constants.ts
View File

@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/naming-convention */
import type { FilterConditionValue, FilterOptionsValue } from 'n8n-workflow';
import type { FilterOperator, FilterOperatorGroup } from './types';
import { DATA_TYPE_ICON_MAP } from '@/constants';
export const DEFAULT_MAX_CONDITIONS = 10;
@ -285,37 +286,37 @@ export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
{
id: 'string',
name: 'type.string',
icon: 'case-upper',
icon: DATA_TYPE_ICON_MAP.string,
children: OPERATORS.filter((operator) => operator.type === 'string'),
},
{
id: 'number',
name: 'type.number',
icon: 'hash',
icon: DATA_TYPE_ICON_MAP.number,
children: OPERATORS.filter((operator) => operator.type === 'number'),
},
{
id: 'dateTime',
name: 'type.dateTime',
icon: 'calendar',
icon: DATA_TYPE_ICON_MAP.date,
children: OPERATORS.filter((operator) => operator.type === 'dateTime'),
},
{
id: 'boolean',
name: 'type.boolean',
icon: 'square-check',
icon: DATA_TYPE_ICON_MAP.boolean,
children: OPERATORS.filter((operator) => operator.type === 'boolean'),
},
{
id: 'array',
name: 'type.array',
icon: 'list',
icon: DATA_TYPE_ICON_MAP.array,
children: OPERATORS.filter((operator) => operator.type === 'array'),
},
{
id: 'object',
name: 'type.object',
icon: 'box',
icon: DATA_TYPE_ICON_MAP.object,
children: OPERATORS.filter((operator) => operator.type === 'object'),
},
];

28
packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
View File

@ -217,7 +217,7 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -973,7 +973,7 @@ exports[`VirtualSchema.vue > renders schema in output pane 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -1161,7 +1161,7 @@ exports[`VirtualSchema.vue > renders schema in output pane 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -1222,7 +1222,7 @@ exports[`VirtualSchema.vue > renders schema in output pane 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -1655,7 +1655,7 @@ exports[`VirtualSchema.vue > renders schema with spaces and dots 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -1957,7 +1957,7 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2018,7 +2018,7 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2211,7 +2211,7 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2272,7 +2272,7 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2333,7 +2333,7 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2460,7 +2460,7 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2521,7 +2521,7 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2748,7 +2748,7 @@ exports[`VirtualSchema.vue > should expand all nodes when searching 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>
@ -2881,7 +2881,7 @@ exports[`VirtualSchema.vue > should expand all nodes when searching 1`] = `
<n8n-icon-stub
class="type-icon"
data-v-0f5e7239=""
icon="case-upper"
icon="type"
size="small"
spin="false"
/>

4
packages/frontend/editor-ui/src/composables/__snapshots__/useDataSchema.test.ts.snap
View File

@ -58,7 +58,7 @@ exports[`useFlattenSchema > flattenMultipleSchemas > should flatten node schemas
"collapsable": false,
"depth": [MockFunction spy],
"expression": "{{ $('Test Node').item.json.obj.foo.nested }}",
"icon": "case-upper",
"icon": "type",
"id": "Test Node-{{ $('Test Node').item.json.obj.foo.nested }}",
"level": 3,
"nodeName": "Test Node",
@ -125,7 +125,7 @@ exports[`useFlattenSchema > flattenMultipleSchemas > should flatten node schemas
"collapsable": false,
"depth": [MockFunction spy],
"expression": "{{ $('Test Node').item.json.obj.foo.nested }}",
"icon": "case-upper",
"icon": "type",
"id": "Test Node-{{ $('Test Node').item.json.obj.foo.nested }}",
"level": 3,
"nodeName": "Test Node",

15
packages/frontend/editor-ui/src/composables/useDataSchema.ts
View File

@ -16,6 +16,7 @@ import {
} from 'n8n-workflow';
import { ref } from 'vue';
import { type IconName } from '@n8n/design-system/components/N8nIcon/icons';
import { DATA_TYPE_ICON_MAP } from '@/constants';
export function useDataSchema() {
function getSchema(
@ -293,18 +294,18 @@ export type RenderEmpty = {
export type Renders = RenderHeader | RenderItem | RenderIcon | RenderNotice | RenderEmpty;
const icons: { [key: string]: IconName } = {
object: 'box',
array: 'list',
['string']: 'case-upper',
const icons = {
object: DATA_TYPE_ICON_MAP.object,
array: DATA_TYPE_ICON_MAP.array,
['string']: DATA_TYPE_ICON_MAP.string,
null: 'case-upper',
['number']: 'hash',
['boolean']: 'square-check',
['number']: DATA_TYPE_ICON_MAP.number,
['boolean']: DATA_TYPE_ICON_MAP.boolean,
function: 'code',
bigint: 'calculator',
symbol: 'sun',
['undefined']: 'ban',
} as const;
} satisfies Record<string, IconName>;
const getIconBySchemaType = (type: Schema['type']): IconName => icons[type];

11
packages/frontend/editor-ui/src/constants.ts
View File

@ -14,6 +14,7 @@ import type { ComputedRef, InjectionKey, Ref } from 'vue';
import type { ExpressionLocalResolveContext } from './types/expressions';
import { DATA_STORE_MODULE_NAME } from './features/dataStore/constants';
import type { TelemetryContext } from './types/telemetry';
import type { IconName } from '@n8n/design-system/src/components/N8nIcon/icons';
export const MAX_WORKFLOW_SIZE = 1024 * 1024 * 16; // Workflow size limit in bytes
export const MAX_EXPECTED_REQUEST_SIZE = 2048; // Expected maximum workflow request metadata (i.e. headers) size in bytes
@ -345,6 +346,16 @@ export const NODE_CONNECTION_TYPE_ALLOW_MULTIPLE: NodeConnectionType[] = [
NodeConnectionTypes.Main,
];
// Data Types
export const DATA_TYPE_ICON_MAP = {
['string']: 'type',
['number']: 'hash',
['boolean']: 'square-check',
date: 'calendar',
array: 'list',
object: 'box',
} satisfies Record<string, IconName>;
/** PERSONALIZATION SURVEY */
export const EMAIL_KEY = 'email';
export const WORK_AREA_KEY = 'workArea';

13
packages/frontend/editor-ui/src/features/dataStore/composables/useDataStoreTypes.ts
View File

@ -1,4 +1,3 @@
import type { IconName } from '@n8n/design-system/components/N8nIcon/icons';
import type {
AGGridCellType,
DataStoreColumnType,
@ -7,18 +6,10 @@ import type {
import { isAGGridCellType } from '@/features/dataStore/typeGuards';
import { ResponseError } from '@n8n/rest-api-client';
import { useI18n } from '@n8n/i18n';
/* eslint-disable id-denylist */
const COLUMN_TYPE_ICONS: Record<DataStoreColumnType, IconName> = {
string: 'type',
number: 'hash',
boolean: 'toggle-right',
date: 'calendar',
} as const;
/* eslint-enable id-denylist */
import { DATA_TYPE_ICON_MAP } from '@/constants';
export const useDataStoreTypes = () => {
const getIconForType = (type: DataStoreColumnType) => COLUMN_TYPE_ICONS[type];
const getIconForType = (type: DataStoreColumnType) => DATA_TYPE_ICON_MAP[type];
const i18n = useI18n();
/**