-
-
- My Project
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
index 3aef3d5a05..922116b225 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
@@ -149,7 +149,7 @@ Text.args = {
export const WithIcon = AllSizesTemplate.bind({});
WithIcon.args = {
label: 'Button',
- icon: 'plus-circle',
+ icon: 'circle-plus',
};
export const Square = AllColorsAndSizesTemplate.bind({});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts
index 5b224594b2..80df349f79 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts
@@ -39,7 +39,7 @@ describe('components', () => {
it('should render icon button', () => {
const wrapper = render(N8nButton, {
props: {
- icon: 'plus-circle',
+ icon: 'circle-plus',
},
slots,
global: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap
index 471068c333..5c2f13a3d9 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap
@@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`;
exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts
index 9d30101ff1..07f3a8590f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts
@@ -73,7 +73,7 @@ defaultCallout.args = {
export const customCallout = template.bind({});
customCallout.args = {
theme: 'custom',
- icon: 'code-branch',
+ icon: 'git-branch',
default: `
This is a custom callout.
`,
@@ -87,7 +87,7 @@ customCallout.args = {
export const secondaryCallout = template.bind({});
secondaryCallout.args = {
theme: 'secondary',
- icon: 'thumbtack',
+ icon: 'pin',
default: `
This data is pinned.
`,
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.test.ts
index e308a73828..d6ae009f40 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.test.ts
@@ -78,7 +78,7 @@ describe('components', () => {
const wrapper = render(N8nCallout, {
props: {
theme: 'custom',
- icon: 'code-branch',
+ icon: 'git-branch',
},
global: {
stubs: ['n8n-icon', 'n8n-text'],
@@ -93,7 +93,7 @@ describe('components', () => {
const wrapper = render(N8nCallout, {
props: {
theme: 'custom',
- icon: 'code-branch',
+ icon: 'git-branch',
},
global: {
stubs: ['n8n-icon', 'n8n-text', 'n8n-link'],
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue
index 3d755c17cb..a4a6ce054e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue
@@ -4,18 +4,19 @@ import { computed, useCssModule } from 'vue';
import type { IconSize, CalloutTheme } from '@n8n/design-system/types';
import N8nIcon from '../N8nIcon';
+import { type IconName } from '../N8nIcon/icons';
import N8nText from '../N8nText';
-const CALLOUT_DEFAULT_ICONS: Record
@@ -16,7 +16,7 @@ exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"
@@ -1165,28 +840,12 @@ exports[`VirtualSchema.vue > renders schema for empty objects and arrays 1`] = `
data-v-0f5e7239=""
data-value="{{ $json.nested[0].emptyArray }}"
>
-
@@ -27,7 +27,7 @@ exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"
@@ -38,7 +38,7 @@ exports[`components > N8nCallout > should render info theme correctly 1`] = `
"
@@ -1065,28 +772,12 @@ exports[`VirtualSchema.vue > renders schema for empty objects and arrays 1`] = `
data-v-0f5e7239=""
data-value="{{ $json.nested[0].empty }}"
>
-
@@ -49,7 +49,7 @@ exports[`components > N8nCallout > should render secondary theme correctly 1`] =
"
@@ -60,7 +60,7 @@ exports[`components > N8nCallout > should render success theme correctly 1`] = `
"
@@ -965,28 +704,12 @@ exports[`VirtualSchema.vue > renders schema for empty objects and arrays 1`] = `
data-v-0f5e7239=""
data-value="{{ $json.nested[0] }}"
>
-
@@ -71,7 +71,7 @@ exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"
= {
@@ -40,6 +42,7 @@ interface InfoTipProps {
bold?: boolean;
tooltipPlacement?: Placement;
enterable?: boolean;
+ size?: IconSize;
}
defineOptions({ name: 'N8nInfoTip' });
@@ -49,9 +52,10 @@ const props = withDefaults(defineProps(), {
bold: true,
tooltipPlacement: 'top',
enterable: true,
+ size: undefined,
});
-const iconData = computed<{ icon: IconMap[keyof IconMap]; color: IconColor }>(() => {
+const iconData = computed<{ icon: IconName; color: IconColor }>(() => {
return {
icon: ICON_MAP[props.theme],
color: COLOR_MAP[props.theme],
@@ -79,7 +83,7 @@ const iconData = computed<{ icon: IconMap[keyof IconMap]; color: IconColor }>(()
:enterable
>
-
-
- {{ nodeTypeName }}
+
+ {{ nodeTypeName }}
+
![]()
![]()
+
@@ -865,28 +636,12 @@ exports[`VirtualSchema.vue > renders schema for empty objects and arrays 1`] = `
data-v-0f5e7239=""
data-value="{{ $json.nested }}"
>
-
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.test.ts
new file mode 100644
index 0000000000..55b0318d24
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.test.ts
@@ -0,0 +1,64 @@
+import { render } from '@testing-library/vue';
+
+import Icon from './Icon.vue';
+import { deprecatedIconSet, type IconName } from './icons';
+
+describe('Icon', () => {
+ it('should render correctly with default props', () => {
+ const wrapper = render(Icon, {
+ props: {
+ icon: 'check',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('should render correctly with a custom size', () => {
+ const wrapper = render(Icon, {
+ props: {
+ icon: 'check',
+ size: 24,
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('should render correctly with predefined size', () => {
+ const wrapper = render(Icon, {
+ props: {
+ icon: 'check',
+ size: 'large',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('should render correctly with spin enabled', () => {
+ const wrapper = render(Icon, {
+ props: {
+ icon: 'check',
+ spin: true,
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('should render correctly with a custom color', () => {
+ const wrapper = render(Icon, {
+ props: {
+ icon: 'check',
+ color: 'primary',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('should render correctly with a deprecated icon', () => {
+ const wrapper = render(Icon, {
+ props: {
+ icon: Object.keys(deprecatedIconSet)[0] as IconName,
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.vue b/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.vue
index d303d00e3a..b04a9dc50f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.vue
@@ -1,49 +1,116 @@
-
-
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/__snapshots__/Icon.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nIcon/__snapshots__/Icon.test.ts.snap
new file mode 100644
index 0000000000..aae79e6a2c
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/__snapshots__/Icon.test.ts.snap
@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Icon > should render correctly with a custom color 1`] = `
+""
+`;
+
+exports[`Icon > should render correctly with a custom size 1`] = `
+""
+`;
+
+exports[`Icon > should render correctly with a deprecated icon 1`] = `
+""
+`;
+
+exports[`Icon > should render correctly with all props combined 1`] = `
+""
+`;
+
+exports[`Icon > should render correctly with default props 1`] = `
+""
+`;
+
+exports[`Icon > should render correctly with predefined size 1`] = `
+""
+`;
+
+exports[`Icon > should render correctly with spin enabled 1`] = `
+""
+`;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/binary.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/binary.svg
new file mode 100644
index 0000000000..1445711730
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/binary.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/grip-lines-vertical.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/grip-lines-vertical.svg
new file mode 100644
index 0000000000..9f8ac488a4
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/grip-lines-vertical.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/json.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/json.svg
new file mode 100644
index 0000000000..8951517e48
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/json.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/pop-out.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/pop-out.svg
new file mode 100644
index 0000000000..9101766212
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/pop-out.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/schema.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/schema.svg
new file mode 100644
index 0000000000..41e2702675
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/schema.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/spinner.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/spinner.svg
new file mode 100644
index 0000000000..6ad33a62ff
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/spinner.svg
@@ -0,0 +1,12 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-canceled.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-canceled.svg
new file mode 100644
index 0000000000..14623115d9
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-canceled.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-completed.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-completed.svg
new file mode 100644
index 0000000000..02f837325b
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-completed.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-error.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-error.svg
new file mode 100644
index 0000000000..4a12bcea51
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-error.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-new.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-new.svg
new file mode 100644
index 0000000000..da9890e6b9
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-new.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-unknown.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-unknown.svg
new file mode 100644
index 0000000000..1412a8a815
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-unknown.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-waiting.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-waiting.svg
new file mode 100644
index 0000000000..33d679b3f8
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-waiting.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-warning.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-warning.svg
new file mode 100644
index 0000000000..41d2f062e3
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/status-warning.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/text.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/text.svg
new file mode 100644
index 0000000000..13245abeb2
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/text.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/toolbox.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/toolbox.svg
new file mode 100644
index 0000000000..2b0dcc2c09
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/toolbox.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/triangle.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/triangle.svg
new file mode 100644
index 0000000000..7677ef85d5
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/triangle.svg
@@ -0,0 +1 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/vector-square.svg b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/vector-square.svg
new file mode 100644
index 0000000000..c1a057434f
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/custom/vector-square.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
new file mode 100644
index 0000000000..cbbeefe449
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
@@ -0,0 +1,576 @@
+import Binary from './custom/binary.svg';
+import GripLinesVertical from './custom/grip-lines-vertical.svg';
+import Json from './custom/json.svg';
+import PopOut from './custom/pop-out.svg';
+import Schema from './custom/schema.svg';
+import Spinner from './custom/spinner.svg';
+import StatusCanceled from './custom/status-canceled.svg';
+import StatusCompleted from './custom/status-completed.svg';
+import StatusError from './custom/status-error.svg';
+import StatusNew from './custom/status-new.svg';
+import StatusUnknown from './custom/status-unknown.svg';
+import StatusWaiting from './custom/status-waiting.svg';
+import StatusWarning from './custom/status-warning.svg';
+import Text from './custom/text.svg';
+import Toolbox from './custom/toolbox.svg';
+import Triangle from './custom/triangle.svg';
+import VectorSquare from './custom/vector-square.svg';
+
+import IconLucideAlignRight from '~icons/lucide/align-right';
+import IconLucideArchive from '~icons/lucide/archive';
+import IconLucideArrowDown from '~icons/lucide/arrow-down';
+import IconLucideArrowLeft from '~icons/lucide/arrow-left';
+import IconLucideArrowLeftRight from '~icons/lucide/arrow-left-right';
+import IconLucideArrowRight from '~icons/lucide/arrow-right';
+import IconLucideArrowUp from '~icons/lucide/arrow-up';
+import IconLucideAtSign from '~icons/lucide/at-sign';
+import IconLucideBan from '~icons/lucide/ban';
+import IconLucideBell from '~icons/lucide/bell';
+import IconLucideBook from '~icons/lucide/book';
+import IconLucideBot from '~icons/lucide/bot';
+import IconLucideBox from '~icons/lucide/box';
+import IconLucideBrain from '~icons/lucide/brain';
+import IconLucideBug from '~icons/lucide/bug';
+import IconLucideCalculator from '~icons/lucide/calculator';
+import IconLucideCalendar from '~icons/lucide/calendar';
+import IconLucideCaseUpper from '~icons/lucide/case-upper';
+import IconLucideChartColumnDecreasing from '~icons/lucide/chart-column-decreasing';
+import IconLucideCheck from '~icons/lucide/check';
+import IconLucideCheckCheck from '~icons/lucide/check-check';
+import IconLucideChevronDown from '~icons/lucide/chevron-down';
+import IconLucideChevronLeft from '~icons/lucide/chevron-left';
+import IconLucideChevronRight from '~icons/lucide/chevron-right';
+import IconLucideChevronUp from '~icons/lucide/chevron-up';
+import IconLucideChevronsLeft from '~icons/lucide/chevrons-left';
+import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down';
+import IconLucideCircle from '~icons/lucide/circle';
+import IconLucideCircleAlert from '~icons/lucide/circle-alert';
+import IconLucideCircleCheck from '~icons/lucide/circle-check';
+import IconLucideCircleDot from '~icons/lucide/circle-dot';
+import IconLucideCircleHelp from '~icons/lucide/circle-help';
+import IconLucideCircleMinus from '~icons/lucide/circle-minus';
+import IconLucideCirclePause from '~icons/lucide/circle-pause';
+import IconLucideCirclePlay from '~icons/lucide/circle-play';
+import IconLucideCirclePlus from '~icons/lucide/circle-plus';
+import IconLucideCircleUserRound from '~icons/lucide/circle-user-round';
+import IconLucideCircleX from '~icons/lucide/circle-x';
+import IconLucideClipboardList from '~icons/lucide/clipboard-list';
+import IconLucideClock from '~icons/lucide/clock';
+import IconLucideCloud from '~icons/lucide/cloud';
+import IconLucideCloudDownload from '~icons/lucide/cloud-download';
+import IconLucideCode from '~icons/lucide/code';
+import IconLucideCog from '~icons/lucide/cog';
+import IconLucideContrast from '~icons/lucide/contrast';
+import IconLucideCopy from '~icons/lucide/copy';
+import IconLucideDatabase from '~icons/lucide/database';
+import IconLucideEarth from '~icons/lucide/earth';
+import IconLucideEllipsis from '~icons/lucide/ellipsis';
+import IconLucideEllipsisVertical from '~icons/lucide/ellipsis-vertical';
+import IconLucideEqual from '~icons/lucide/equal';
+import IconLucideExternalLink from '~icons/lucide/external-link';
+import IconLucideEye from '~icons/lucide/eye';
+import IconLucideEyeOff from '~icons/lucide/eye-off';
+import IconLucideFile from '~icons/lucide/file';
+import IconLucideFileArchive from '~icons/lucide/file-archive';
+import IconLucideFileCode from '~icons/lucide/file-code';
+import IconLucideFileDown from '~icons/lucide/file-down';
+import IconLucideFileInput from '~icons/lucide/file-input';
+import IconLucideFileOutput from '~icons/lucide/file-output';
+import IconLucideFileText from '~icons/lucide/file-text';
+import IconLucideFiles from '~icons/lucide/files';
+import IconLucideFingerprint from '~icons/lucide/fingerprint';
+import IconLucideFlaskConical from '~icons/lucide/flask-conical';
+import IconLucideFolder from '~icons/lucide/folder';
+import IconLucideFolderOpen from '~icons/lucide/folder-open';
+import IconLucideFolderPlus from '~icons/lucide/folder-plus';
+import IconLucideFunnel from '~icons/lucide/funnel';
+import IconLucideGem from '~icons/lucide/gem';
+import IconLucideGift from '~icons/lucide/gift';
+import IconLucideGitBranch from '~icons/lucide/git-branch';
+import IconLucideGlobe from '~icons/lucide/globe';
+import IconLucideGraduationCap from '~icons/lucide/graduation-cap';
+import IconLucideGrid2x2 from '~icons/lucide/grid-2x2';
+import IconLucideGripVertical from '~icons/lucide/grip-vertical';
+import IconLucideHandCoins from '~icons/lucide/hand-coins';
+import IconLucideHandshake from '~icons/lucide/handshake';
+import IconLucideHardDrive from '~icons/lucide/hard-drive';
+import IconLucideHardDriveDownload from '~icons/lucide/hard-drive-download';
+import IconLucideHash from '~icons/lucide/hash';
+import IconLucideHistory from '~icons/lucide/history';
+import IconLucideHourglass from '~icons/lucide/hourglass';
+import IconLucideHouse from '~icons/lucide/house';
+import IconLucideImage from '~icons/lucide/image';
+import IconLucideInbox from '~icons/lucide/inbox';
+import IconLucideInfo from '~icons/lucide/info';
+import IconLucideKeyRound from '~icons/lucide/key-round';
+import IconLucideLanguages from '~icons/lucide/languages';
+import IconLucideLayers from '~icons/lucide/layers';
+import IconLucideLightbulb from '~icons/lucide/lightbulb';
+import IconLucideLink from '~icons/lucide/link';
+import IconLucideList from '~icons/lucide/list';
+import IconLucideListChecks from '~icons/lucide/list-checks';
+import IconLucideLock from '~icons/lucide/lock';
+import IconLucideLogIn from '~icons/lucide/log-in';
+import IconLucideLogOut from '~icons/lucide/log-out';
+import IconLucideMail from '~icons/lucide/mail';
+import IconLucideMaximize from '~icons/lucide/maximize';
+import IconLucideMaximize2 from '~icons/lucide/maximize-2';
+import IconLucideMenu from '~icons/lucide/menu';
+import IconLucideMessageCircle from '~icons/lucide/message-circle';
+import IconLucideMessagesSquare from '~icons/lucide/messages-square';
+import IconLucideMilestone from '~icons/lucide/milestone';
+import IconLucideMinimize2 from '~icons/lucide/minimize-2';
+import IconLucideMousePointer from '~icons/lucide/mouse-pointer';
+import IconLucideNetwork from '~icons/lucide/network';
+import IconLucidePackageOpen from '~icons/lucide/package-open';
+import IconLucidePalette from '~icons/lucide/palette';
+import IconLucidePause from '~icons/lucide/pause';
+import IconLucidePen from '~icons/lucide/pen';
+import IconLucidePencil from '~icons/lucide/pencil';
+import IconLucidePin from '~icons/lucide/pin';
+import IconLucidePlay from '~icons/lucide/play';
+import IconLucidePlug from '~icons/lucide/plug';
+import IconLucidePlus from '~icons/lucide/plus';
+import IconLucidePocketKnife from '~icons/lucide/pocket-knife';
+import IconLucidePower from '~icons/lucide/power';
+import IconLucideRedo2 from '~icons/lucide/redo-2';
+import IconLucideRefreshCw from '~icons/lucide/refresh-cw';
+import IconLucideRemoveFormatting from '~icons/lucide/remove-formatting';
+import IconLucideRss from '~icons/lucide/rss';
+import IconLucideSatelliteDish from '~icons/lucide/satellite-dish';
+import IconLucideSave from '~icons/lucide/save';
+import IconLucideScale from '~icons/lucide/scale';
+import IconLucideScissors from '~icons/lucide/scissors';
+import IconLucideSearch from '~icons/lucide/search';
+import IconLucideSend from '~icons/lucide/send';
+import IconLucideServer from '~icons/lucide/server';
+import IconLucideShare from '~icons/lucide/share';
+import IconLucideSlidersHorizontal from '~icons/lucide/sliders-horizontal';
+import IconLucideSmile from '~icons/lucide/smile';
+import IconLucideSquare from '~icons/lucide/square';
+import IconLucideSquareCheck from '~icons/lucide/square-check';
+import IconLucideSquarePen from '~icons/lucide/square-pen';
+import IconLucideSquarePlus from '~icons/lucide/square-plus';
+import IconLucideStickyNote from '~icons/lucide/sticky-note';
+import IconLucideSun from '~icons/lucide/sun';
+import IconLucideTable from '~icons/lucide/table';
+import IconLucideTags from '~icons/lucide/tags';
+import IconLucideTerminal from '~icons/lucide/terminal';
+import IconLucideThumbsDown from '~icons/lucide/thumbs-down';
+import IconLucideThumbsUp from '~icons/lucide/thumbs-up';
+import IconLucideTrash2 from '~icons/lucide/trash-2';
+import IconLucideTreePine from '~icons/lucide/tree-pine';
+import IconLucideTriangleAlert from '~icons/lucide/triangle-alert';
+import IconLucideUndo2 from '~icons/lucide/undo-2';
+import IconLucideUnlink from '~icons/lucide/unlink';
+import IconLucideUser from '~icons/lucide/user';
+import IconLucideUserCheck from '~icons/lucide/user-check';
+import IconLucideUserLock from '~icons/lucide/user-lock';
+import IconLucideUserRound from '~icons/lucide/user-round';
+import IconLucideUsers from '~icons/lucide/users';
+import IconLucideVariable from '~icons/lucide/variable';
+import IconLucideVault from '~icons/lucide/vault';
+import IconLucideVideo from '~icons/lucide/video';
+import IconLucideWaypoints from '~icons/lucide/waypoints';
+import IconLucideWrench from '~icons/lucide/wrench';
+import IconLucideX from '~icons/lucide/x';
+import IconLucideZap from '~icons/lucide/zap';
+import IconLucideZoomIn from '~icons/lucide/zoom-in';
+import IconLucideZoomOut from '~icons/lucide/zoom-out';
+
+/**
+ * Need to keep old icon names
+ * To support old project icons
+ * Which used to include all icons in instance
+ */
+export const deprecatedIconSet = {
+ // customIcons
+ variable: IconLucideVariable,
+ 'pop-out': PopOut,
+ triangle: Triangle,
+ 'status-completed': StatusCompleted,
+ 'status-waiting': StatusWaiting,
+ 'status-error': StatusError,
+ 'status-canceled': StatusCanceled,
+ 'status-new': StatusNew,
+ 'status-unknown': StatusUnknown,
+ 'status-warning': StatusWarning,
+ 'vector-square': VectorSquare,
+ schema: Schema,
+ json: Json,
+ binary: Binary,
+ text: Text,
+ toolbox: Toolbox,
+ spinner: Spinner,
+ xmark: IconLucideX,
+
+ // fontAwesomeIcons
+ 'caret-up': IconLucideChevronUp,
+ 'caret-down': IconLucideChevronDown,
+ 'caret-right': IconLucideChevronRight,
+ 'caret-left': IconLucideChevronLeft,
+ 'folder-plus': IconLucideFolderPlus,
+ share: IconLucideShare,
+ 'user-check': IconLucideUserCheck,
+ 'check-double': IconLucideCheckCheck,
+ 'exclamation-circle': IconLucideCircleAlert,
+ circle: IconLucideCircle,
+ 'eye-slash': IconLucideEyeOff,
+ folder: IconLucideFolder,
+ 'minus-circle': IconLucideCircleMinus,
+ adjust: IconLucideContrast,
+ refresh: IconLucideRefreshCw,
+ vault: IconLucideVault,
+ 'angle-double-left': IconLucideChevronsLeft,
+ 'angle-down': IconLucideChevronDown,
+ 'angle-left': IconLucideChevronLeft,
+ 'angle-right': IconLucideChevronRight,
+ 'angle-up': IconLucideChevronUp,
+ archive: IconLucideArchive,
+ 'arrow-left': IconLucideArrowLeft,
+ 'arrow-right': IconLucideArrowRight,
+ 'arrow-up': IconLucideArrowUp,
+ 'arrow-down': IconLucideArrowDown,
+ at: IconLucideAtSign,
+ ban: IconLucideBan,
+ 'balance-scale-left': IconLucideScale,
+ bars: IconLucideMenu,
+ bolt: IconLucideZap,
+ book: IconLucideBook,
+ 'box-open': IconLucidePackageOpen,
+ bug: IconLucideBug,
+ brain: IconLucideBrain,
+ calculator: IconLucideCalculator,
+ calendar: IconLucideCalendar,
+ 'chart-bar': IconLucideChartColumnDecreasing,
+ check: IconLucideCheck,
+ 'check-circle': IconLucideCircleCheck,
+ 'check-square': IconLucideSquareCheck,
+ 'chevron-left': IconLucideChevronLeft,
+ 'chevron-right': IconLucideChevronRight,
+ 'chevron-down': IconLucideChevronDown,
+ 'chevron-up': IconLucideChevronUp,
+ code: IconLucideCode,
+ 'code-branch': IconLucideGitBranch,
+ cog: IconLucideCog,
+ cogs: IconLucideCog,
+ comment: IconLucideMessageCircle,
+ comments: IconLucideMessagesSquare,
+ 'clipboard-list': IconLucideClipboardList,
+ clock: IconLucideClock,
+ clone: IconLucideCopy,
+ cloud: IconLucideCloud,
+ 'cloud-download-alt': IconLucideCloudDownload,
+ compress: IconLucideChevronsUpDown,
+ copy: IconLucideFiles,
+ cube: IconLucideBox,
+ cut: IconLucideScissors,
+ database: IconLucideDatabase,
+ 'dot-circle': IconLucideCircleDot,
+ 'grip-lines-vertical': GripLinesVertical,
+ 'grip-vertical': IconLucideGripVertical,
+ edit: IconLucideSquarePen,
+ 'ellipsis-h': IconLucideEllipsis,
+ 'ellipsis-v': IconLucideEllipsisVertical,
+ envelope: IconLucideMail,
+ equals: IconLucideEqual,
+ eye: IconLucideEye,
+ 'exclamation-triangle': IconLucideTriangleAlert,
+ expand: IconLucideMaximize,
+ 'expand-alt': IconLucideMaximize2,
+ 'external-link-alt': IconLucideExternalLink,
+ 'exchange-alt': IconLucideArrowLeftRight,
+ file: IconLucideFile,
+ 'file-alt': IconLucideFileText,
+ 'file-archive': IconLucideFileArchive,
+ 'file-code': IconLucideFileCode,
+ 'file-download': IconLucideFileDown,
+ 'file-export': IconLucideFileOutput,
+ 'file-import': IconLucideFileInput,
+ 'file-pdf': IconLucideFileText,
+ filter: IconLucideFunnel,
+ fingerprint: IconLucideFingerprint,
+ flask: IconLucideFlaskConical,
+ 'folder-open': IconLucideFolderOpen,
+ font: IconLucideCaseUpper,
+ gift: IconLucideGift,
+ globe: IconLucideGlobe,
+ 'globe-americas': IconLucideEarth,
+ 'graduation-cap': IconLucideGraduationCap,
+ 'hand-holding-usd': IconLucideHandCoins,
+ 'hand-scissors': IconLucideScissors,
+ handshake: IconLucideHandshake,
+ 'hand-point-left': IconLucideArrowLeft,
+ hashtag: IconLucideHash,
+ hdd: IconLucideHardDrive,
+ history: IconLucideHistory,
+ home: IconLucideHouse,
+ hourglass: IconLucideHourglass,
+ image: IconLucideImage,
+ inbox: IconLucideInbox,
+ info: IconLucideInfo,
+ 'info-circle': IconLucideInfo,
+ key: IconLucideKeyRound,
+ language: IconLucideLanguages,
+ 'layer-group': IconLucideLayers,
+ link: IconLucideLink,
+ list: IconLucideList,
+ lightbulb: IconLucideLightbulb,
+ lock: IconLucideLock,
+ 'map-signs': IconLucideMilestone,
+ 'mouse-pointer': IconLucideMousePointer,
+ 'network-wired': IconLucideNetwork,
+ palette: IconLucidePalette,
+ pause: IconLucidePause,
+ 'pause-circle': IconLucideCirclePause,
+ pen: IconLucidePen,
+ 'pencil-alt': IconLucidePencil,
+ play: IconLucidePlay,
+ 'play-circle': IconLucideCirclePlay,
+ plug: IconLucidePlug,
+ plus: IconLucidePlus,
+ 'plus-circle': IconLucideCirclePlus,
+ 'plus-square': IconLucideSquarePlus,
+ 'project-diagram': IconLucideWaypoints,
+ question: IconLucideCircleHelp,
+ 'question-circle': IconLucideCircleHelp,
+ redo: IconLucideRedo2,
+ 'remove-format': IconLucideRemoveFormatting,
+ robot: IconLucideBot,
+ rss: IconLucideRss,
+ save: IconLucideSave,
+ 'satellite-dish': IconLucideSatelliteDish,
+ search: IconLucideSearch,
+ 'search-minus': IconLucideZoomOut,
+ 'search-plus': IconLucideZoomIn,
+ server: IconLucideServer,
+ screwdriver: IconLucidePocketKnife,
+ smile: IconLucideSmile,
+ 'sign-in-alt': IconLucideLogIn,
+ 'sign-out-alt': IconLucideLogOut,
+ 'sliders-h': IconLucideSlidersHorizontal,
+ 'sticky-note': IconLucideStickyNote,
+ stop: IconLucideSquare,
+ stream: IconLucideAlignRight,
+ sun: IconLucideSun,
+ sync: IconLucideRefreshCw,
+ 'sync-alt': IconLucideRefreshCw,
+ table: IconLucideTable,
+ tags: IconLucideTags,
+ tasks: IconLucideListChecks,
+ terminal: IconLucideTerminal,
+ 'th-large': IconLucideGrid2x2,
+ thumbtack: IconLucidePin,
+ 'thumbs-down': IconLucideThumbsDown,
+ 'thumbs-up': IconLucideThumbsUp,
+ times: IconLucideX,
+ 'times-circle': IconLucideCircleX,
+ tools: IconLucideWrench,
+ trash: IconLucideTrash2,
+ undo: IconLucideUndo2,
+ unlink: IconLucideUnlink,
+ user: IconLucideUser,
+ 'user-circle': IconLucideCircleUserRound,
+ 'user-friends': IconLucideUserRound,
+ users: IconLucideUsers,
+ video: IconLucideVideo,
+ tree: IconLucideTreePine,
+ 'user-lock': IconLucideUserLock,
+ gem: IconLucideGem,
+ download: IconLucideHardDriveDownload,
+ 'power-off': IconLucidePower,
+ 'paper-plane': IconLucideSend,
+ bell: IconLucideBell,
+} as const;
+
+export const updatedIconSet = {
+ // custom icons
+ 'grip-lines-vertical': GripLinesVertical,
+ variable: IconLucideVariable,
+ 'pop-out': PopOut,
+ triangle: Triangle,
+ 'status-completed': StatusCompleted,
+ 'status-waiting': StatusWaiting,
+ 'status-error': StatusError,
+ 'status-canceled': StatusCanceled,
+ 'status-new': StatusNew,
+ 'status-unknown': StatusUnknown,
+ 'status-warning': StatusWarning,
+ 'vector-square': VectorSquare,
+ schema: Schema,
+ json: Json,
+ binary: Binary,
+ text: Text,
+ toolbox: Toolbox,
+ spinner: Spinner,
+
+ // lucide
+ 'align-right': IconLucideAlignRight,
+ archive: IconLucideArchive,
+ 'arrow-down': IconLucideArrowDown,
+ 'arrow-left': IconLucideArrowLeft,
+ 'arrow-left-right': IconLucideArrowLeftRight,
+ 'arrow-right': IconLucideArrowRight,
+ 'arrow-up': IconLucideArrowUp,
+ 'at-sign': IconLucideAtSign,
+ ban: IconLucideBan,
+ bell: IconLucideBell,
+ book: IconLucideBook,
+ bot: IconLucideBot,
+ box: IconLucideBox,
+ brain: IconLucideBrain,
+ bug: IconLucideBug,
+ calculator: IconLucideCalculator,
+ calendar: IconLucideCalendar,
+ 'case-upper': IconLucideCaseUpper,
+ 'chart-column-decreasing': IconLucideChartColumnDecreasing,
+ check: IconLucideCheck,
+ 'check-check': IconLucideCheckCheck,
+ 'chevron-down': IconLucideChevronDown,
+ 'chevron-left': IconLucideChevronLeft,
+ 'chevron-right': IconLucideChevronRight,
+ 'chevron-up': IconLucideChevronUp,
+ 'chevrons-left': IconLucideChevronsLeft,
+ circle: IconLucideCircle,
+ 'circle-alert': IconLucideCircleAlert,
+ 'circle-check': IconLucideCircleCheck,
+ 'circle-dot': IconLucideCircleDot,
+ 'circle-help': IconLucideCircleHelp,
+ 'circle-minus': IconLucideCircleMinus,
+ 'circle-pause': IconLucideCirclePause,
+ 'circle-play': IconLucideCirclePlay,
+ 'circle-plus': IconLucideCirclePlus,
+ 'circle-user-round': IconLucideCircleUserRound,
+ 'circle-x': IconLucideCircleX,
+ 'clipboard-list': IconLucideClipboardList,
+ clock: IconLucideClock,
+ cloud: IconLucideCloud,
+ 'cloud-download': IconLucideCloudDownload,
+ code: IconLucideCode,
+ cog: IconLucideCog,
+ contrast: IconLucideContrast,
+ copy: IconLucideCopy,
+ database: IconLucideDatabase,
+ earth: IconLucideEarth,
+ ellipsis: IconLucideEllipsis,
+ 'ellipsis-vertical': IconLucideEllipsisVertical,
+ equal: IconLucideEqual,
+ 'external-link': IconLucideExternalLink,
+ eye: IconLucideEye,
+ 'eye-off': IconLucideEyeOff,
+ file: IconLucideFile,
+ 'file-archive': IconLucideFileArchive,
+ 'file-code': IconLucideFileCode,
+ 'file-down': IconLucideFileDown,
+ 'file-input': IconLucideFileInput,
+ 'file-output': IconLucideFileOutput,
+ 'file-text': IconLucideFileText,
+ files: IconLucideFiles,
+ fingerprint: IconLucideFingerprint,
+ 'flask-conical': IconLucideFlaskConical,
+ folder: IconLucideFolder,
+ 'folder-open': IconLucideFolderOpen,
+ 'folder-plus': IconLucideFolderPlus,
+ funnel: IconLucideFunnel,
+ gem: IconLucideGem,
+ gift: IconLucideGift,
+ 'git-branch': IconLucideGitBranch,
+ globe: IconLucideGlobe,
+ 'graduation-cap': IconLucideGraduationCap,
+ 'grid-2x2': IconLucideGrid2x2,
+ 'grip-vertical': IconLucideGripVertical,
+ 'hand-coins': IconLucideHandCoins,
+ handshake: IconLucideHandshake,
+ 'hard-drive': IconLucideHardDrive,
+ 'hard-drive-download': IconLucideHardDriveDownload,
+ hash: IconLucideHash,
+ history: IconLucideHistory,
+ hourglass: IconLucideHourglass,
+ house: IconLucideHouse,
+ image: IconLucideImage,
+ inbox: IconLucideInbox,
+ info: IconLucideInfo,
+ 'key-round': IconLucideKeyRound,
+ languages: IconLucideLanguages,
+ layers: IconLucideLayers,
+ lightbulb: IconLucideLightbulb,
+ link: IconLucideLink,
+ list: IconLucideList,
+ 'list-checks': IconLucideListChecks,
+ lock: IconLucideLock,
+ 'log-in': IconLucideLogIn,
+ 'log-out': IconLucideLogOut,
+ mail: IconLucideMail,
+ 'minimize-2': IconLucideMinimize2,
+ maximize: IconLucideMaximize,
+ 'maximize-2': IconLucideMaximize2,
+ menu: IconLucideMenu,
+ 'message-circle': IconLucideMessageCircle,
+ 'messages-square': IconLucideMessagesSquare,
+ milestone: IconLucideMilestone,
+ 'mouse-pointer': IconLucideMousePointer,
+ network: IconLucideNetwork,
+ 'package-open': IconLucidePackageOpen,
+ palette: IconLucidePalette,
+ pause: IconLucidePause,
+ pen: IconLucidePen,
+ pencil: IconLucidePencil,
+ pin: IconLucidePin,
+ play: IconLucidePlay,
+ plug: IconLucidePlug,
+ plus: IconLucidePlus,
+ 'pocket-knife': IconLucidePocketKnife,
+ power: IconLucidePower,
+ 'redo-2': IconLucideRedo2,
+ 'refresh-cw': IconLucideRefreshCw,
+ 'remove-formatting': IconLucideRemoveFormatting,
+ rss: IconLucideRss,
+ 'satellite-dish': IconLucideSatelliteDish,
+ save: IconLucideSave,
+ scale: IconLucideScale,
+ scissors: IconLucideScissors,
+ search: IconLucideSearch,
+ send: IconLucideSend,
+ server: IconLucideServer,
+ share: IconLucideShare,
+ 'sliders-horizontal': IconLucideSlidersHorizontal,
+ smile: IconLucideSmile,
+ square: IconLucideSquare,
+ 'square-check': IconLucideSquareCheck,
+ 'square-pen': IconLucideSquarePen,
+ 'square-plus': IconLucideSquarePlus,
+ 'sticky-note': IconLucideStickyNote,
+ sun: IconLucideSun,
+ table: IconLucideTable,
+ tags: IconLucideTags,
+ terminal: IconLucideTerminal,
+ 'thumbs-down': IconLucideThumbsDown,
+ 'thumbs-up': IconLucideThumbsUp,
+ 'trash-2': IconLucideTrash2,
+ 'tree-pine': IconLucideTreePine,
+ 'triangle-alert': IconLucideTriangleAlert,
+ 'undo-2': IconLucideUndo2,
+ unlink: IconLucideUnlink,
+ user: IconLucideUser,
+ 'user-check': IconLucideUserCheck,
+ 'user-lock': IconLucideUserLock,
+ 'user-round': IconLucideUserRound,
+ users: IconLucideUsers,
+ vault: IconLucideVault,
+ video: IconLucideVideo,
+ waypoints: IconLucideWaypoints,
+ wrench: IconLucideWrench,
+ x: IconLucideX,
+ zap: IconLucideZap,
+ 'zoom-in': IconLucideZoomIn,
+ 'zoom-out': IconLucideZoomOut,
+} as const;
+
+export type IconName = keyof typeof updatedIconSet; // only new icon names should be used moving forward
+
+export function isSupportedIconName(iconName?: string): iconName is IconName {
+ // support both deprecated and updated icon names
+ return (
+ typeof iconName === 'string' && (iconName in updatedIconSet || iconName in deprecatedIconSet)
+ );
+}
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts
index b03a0cc332..00dfc78550 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts
@@ -1,9 +1,8 @@
import { action } from '@storybook/addon-actions';
import type { StoryFn } from '@storybook/vue3';
-import { TEST_ICONS } from './constants';
-import type { Icon } from './IconPicker.vue';
import N8nIconPicker from './IconPicker.vue';
+import { type IconOrEmoji } from './types';
export default {
title: 'Atoms/Icon Picker',
@@ -19,7 +18,7 @@ export default {
},
};
-function createTemplate(icon: Icon): StoryFn {
+function createTemplate(icon: IconOrEmoji): StoryFn {
return (args, { argTypes }) => ({
components: { N8nIconPicker },
props: Object.keys(argTypes),
@@ -39,13 +38,11 @@ const DefaultTemplate = createTemplate({ type: 'icon', value: 'smile' });
export const Default = DefaultTemplate.bind({});
Default.args = {
buttonTooltip: 'Select an icon',
- availableIcons: TEST_ICONS,
};
-const CustomTooltipTemplate = createTemplate({ type: 'icon', value: 'layer-group' });
+const CustomTooltipTemplate = createTemplate({ type: 'icon', value: 'layers' });
export const WithCustomIconAndTooltip = CustomTooltipTemplate.bind({});
WithCustomIconAndTooltip.args = {
- availableIcons: [...TEST_ICONS],
buttonTooltip: 'Select something...',
};
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts
index 71efa28b20..59c59a6ab6 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.test.ts
@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/vue';
import { createRouter, createWebHistory } from 'vue-router';
import IconPicker from '.';
-import { TEST_ICONS } from './constants';
+import { ALL_ICON_PICKER_ICONS } from './constants';
// Create a proxy handler that returns a mock icon object for any icon name
// and mock the entire icon library with the proxy
@@ -42,11 +42,6 @@ const components = {
template: '',
props: ['icon'],
},
- N8nIcon: {
- template:
- '',
- props: ['icon'],
- },
};
describe('IconPicker', () => {
@@ -55,12 +50,11 @@ describe('IconPicker', () => {
props: {
modelValue: { type: 'icon', value: 'smile' },
buttonTooltip: 'Select an icon',
- availableIcons: TEST_ICONS,
},
global: {
plugins: [router],
components,
- stubs: ['N8nButton'],
+ stubs: ['N8nButton', 'N8nIcon'],
},
});
const TEST_EMOJI_COUNT = 1962;
@@ -71,7 +65,8 @@ describe('IconPicker', () => {
expect(getByTestId('tab-icons').className).toContain('activeTab');
expect(getByTestId('icon-picker-popup')).toBeVisible();
// All icons should be rendered
- expect(getAllByTestId('icon-picker-icon')).toHaveLength(TEST_ICONS.length);
+ expect(getAllByTestId('icon-picker-icon')).toHaveLength(ALL_ICON_PICKER_ICONS.length);
+
// Click on emojis tab
await fireEvent.click(getByTestId('tab-emojis'));
// Emojis tab should be active
@@ -79,13 +74,13 @@ describe('IconPicker', () => {
// All emojis should be rendered
expect(getAllByTestId('icon-picker-emoji')).toHaveLength(TEST_EMOJI_COUNT);
});
+
it('renders icon picker with custom icon and tooltip', async () => {
- const ICON = 'layer-group';
+ const ICON = 'layers';
const TOOLTIP = 'Select something...';
const { getByTestId, getByRole } = render(IconPicker, {
props: {
modelValue: { type: 'icon', value: ICON },
- availableIcons: [...TEST_ICONS],
buttonTooltip: TOOLTIP,
},
global: {
@@ -98,13 +93,13 @@ describe('IconPicker', () => {
expect(getByRole('tooltip').textContent).toBe(TOOLTIP);
expect(getByTestId('icon-picker-button')).toHaveAttribute('icon', ICON);
});
+
it('renders emoji as default icon correctly', async () => {
const ICON = '🔥';
const TOOLTIP = 'Select something...';
const { getByTestId, getByRole } = render(IconPicker, {
props: {
modelValue: { type: 'emoji', value: ICON },
- availableIcons: [...TEST_ICONS],
buttonTooltip: TOOLTIP,
},
global: {
@@ -116,12 +111,12 @@ describe('IconPicker', () => {
expect(getByRole('tooltip').textContent).toBe(TOOLTIP);
expect(getByTestId('icon-picker-button')).toHaveTextContent(ICON);
});
+
it('renders icon picker with only emojis', () => {
const { queryByTestId } = render(IconPicker, {
props: {
modelValue: { type: 'icon', value: 'smile' },
buttonTooltip: 'Select an emoji',
- availableIcons: [],
},
global: {
plugins: [router],
@@ -131,42 +126,43 @@ describe('IconPicker', () => {
});
expect(queryByTestId('tab-icons')).not.toBeInTheDocument();
});
+
it('is able to select an icon', async () => {
const { getByTestId, getAllByTestId, queryByTestId, emitted } = render(IconPicker, {
props: {
modelValue: { type: 'icon', value: 'smile' },
buttonTooltip: 'Select an icon',
- availableIcons: TEST_ICONS,
},
global: {
plugins: [router],
components,
- stubs: ['N8nButton'],
+ stubs: ['N8nIcon', 'N8nButton'],
},
});
await fireEvent.click(getByTestId('icon-picker-button'));
// Select the first icon
await fireEvent.click(getAllByTestId('icon-picker-icon')[0]);
// Icon should be selected and popup should be closed
- expect(getByTestId('icon-picker-button')).toHaveAttribute('icon', TEST_ICONS[0]);
+ expect(getByTestId('icon-picker-button')).toHaveAttribute('icon', ALL_ICON_PICKER_ICONS[0]);
expect(queryByTestId('icon-picker-popup')).toBeNull();
expect(emitted()).toHaveProperty('update:modelValue');
// Should emit the selected icon
expect((emitted()['update:modelValue'] as unknown[][])[0][0]).toEqual({
type: 'icon',
- value: TEST_ICONS[0],
+ value: ALL_ICON_PICKER_ICONS[0],
});
});
+
it('is able to select an emoji', async () => {
const { getByTestId, getAllByTestId, queryByTestId, emitted } = render(IconPicker, {
props: {
modelValue: { type: 'emoji', value: '🔥' },
buttonTooltip: 'Select an emoji',
- availableIcons: TEST_ICONS,
},
global: {
plugins: [router],
components,
+ stubs: ['N8nIcon'],
},
});
await fireEvent.click(getByTestId('icon-picker-button'));
@@ -174,6 +170,7 @@ describe('IconPicker', () => {
expect(getByTestId('icon-picker-popup')).toBeVisible();
// Select the first emoji
await fireEvent.click(getAllByTestId('icon-picker-emoji')[0]);
+
// Emoji should be selected and popup should be closed
expect(getByTestId('icon-picker-button')).toHaveTextContent('😀');
expect(queryByTestId('icon-picker-popup')).toBeNull();
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
index 1e89e51171..ec7eadecbd 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.vue
@@ -5,6 +5,8 @@ import { onClickOutside } from '@vueuse/core';
import { isEmojiSupported } from 'is-emoji-supported';
import { ref, computed } from 'vue';
+import { ALL_ICON_PICKER_ICONS } from './constants';
+import type { IconOrEmoji } from './types';
import { useI18n } from '../../composables/useI18n';
import N8nButton from '../N8nButton';
import N8nIcon from '../N8nIcon';
@@ -31,27 +33,18 @@ const emojiRanges = [
[0x1f400, 0x1f4ff], // Additional pictographs
];
-export type Icon = {
- type: 'icon' | 'emoji';
- value: string;
-};
-
type Props = {
buttonTooltip: string;
- availableIcons: string[];
buttonSize?: 'small' | 'large';
};
const { t } = useI18n();
const props = withDefaults(defineProps(), {
- availableIcons: () => [],
buttonSize: 'large',
});
-const model = defineModel({ default: { type: 'icon', value: 'smile' } });
-
-const hasAvailableIcons = computed(() => props.availableIcons.length > 0);
+const model = defineModel({ default: { type: 'icon', value: 'smile' } });
const emojis = computed(() => {
const emojisArray: string[] = [];
@@ -67,15 +60,11 @@ const emojis = computed(() => {
});
const popupVisible = ref(false);
-const tabs = ref>(
- hasAvailableIcons.value
- ? [
- { value: 'icons', label: t('iconPicker.tabs.icons') },
- { value: 'emojis', label: t('iconPicker.tabs.emojis') },
- ]
- : [{ value: 'emojis', label: t('iconPicker.tabs.emojis') }],
-);
-const selectedTab = ref(tabs.value[0].value);
+const tabs: Array<{ value: string; label: string }> = [
+ { value: 'icons', label: t('iconPicker.tabs.icons') },
+ { value: 'emojis', label: t('iconPicker.tabs.emojis') },
+];
+const selectedTab = ref(tabs[0].value);
const container = ref();
@@ -83,7 +72,7 @@ onClickOutside(container, () => {
popupVisible.value = false;
});
-const selectIcon = (value: Icon) => {
+const selectIcon = (value: IconOrEmoji) => {
model.value = value;
popupVisible.value = false;
};
@@ -91,7 +80,7 @@ const selectIcon = (value: Icon) => {
const togglePopup = () => {
popupVisible.value = !popupVisible.value;
if (popupVisible.value) {
- selectedTab.value = tabs.value[0].value;
+ selectedTab.value = tabs[0].value;
}
};
@@ -112,7 +101,7 @@ const togglePopup = () => {
{
Need help doing something?Open docs
+ the slot either in the tooltip of the icon or following it -->
"
`;
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
"
+ the slot either in the tooltip of the icon or following it -->
"
`;
+
+exports[`N8nInfoTip > should render correctly with a specific size 1`] = `
+"
+
"
+`;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue
index 5353516798..283535a9fb 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -74,7 +74,7 @@ const addTargetBlank = (html: string) =>
:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
>
-
-
-
+
{{ i18n.baseText('freeAi.credits.credentials.edit') }}
@@ -665,28 +500,12 @@ exports[`VirtualSchema.vue > renders schema for empty objects and arrays 1`] = `
data-v-0f5e7239=""
data-value="{{ $json.empty }}"
>
-
+
"
@@ -12,10 +13,12 @@ exports[`N8nSelectableList > renders disabled collection without selectables 1`]
exports[`N8nSelectableList > renders multiple elements with some pre-selected 1`] = `
"
+
+ Add a propB
+ Add a propD
+ ;
- icon?: string;
+ icon?: IconName;
divided?: boolean;
disabled?: boolean;
shortcut?: KeyboardShortcut;
diff --git a/packages/frontend/@n8n/design-system/src/types/button.ts b/packages/frontend/@n8n/design-system/src/types/button.ts
index 9f21adbb9a..4509938ab9 100644
--- a/packages/frontend/@n8n/design-system/src/types/button.ts
+++ b/packages/frontend/@n8n/design-system/src/types/button.ts
@@ -1,5 +1,6 @@
import { type IconSize } from './icon';
import type { TextFloat } from './text';
+import type { IconName } from '../components/N8nIcon/icons';
const BUTTON_ELEMENT = ['button', 'a'] as const;
export type ButtonElement = (typeof BUTTON_ELEMENT)[number];
@@ -17,7 +18,7 @@ export interface IconButtonProps {
active?: boolean;
disabled?: boolean;
float?: TextFloat;
- icon?: string | string[];
+ icon?: IconName;
loading?: boolean;
outline?: boolean;
size?: ButtonSize;
diff --git a/packages/frontend/@n8n/design-system/src/types/menu.ts b/packages/frontend/@n8n/design-system/src/types/menu.ts
index 353c8ab438..3cb769d2a7 100644
--- a/packages/frontend/@n8n/design-system/src/types/menu.ts
+++ b/packages/frontend/@n8n/design-system/src/types/menu.ts
@@ -3,13 +3,17 @@ import type { AnchorHTMLAttributes, Component } from 'vue';
import type { RouteLocationRaw, RouterLinkProps } from 'vue-router';
import type { IconColor } from './icon';
+import type { IconName } from '../components/N8nIcon/icons';
export type IMenuItem = {
id: string;
label: string;
- icon?: string | { type: 'icon' | 'emoji'; value: string; color?: IconColor };
+ icon?:
+ | IconName
+ | { type: 'icon'; value: IconName; color?: IconColor }
+ | { type: 'emoji'; value: string; color?: IconColor };
secondaryIcon?: {
- name: string;
+ name: IconName;
size?: 'xsmall' | 'small' | 'medium' | 'large';
tooltip?: Partial;
};
diff --git a/packages/frontend/@n8n/design-system/src/types/tabs.ts b/packages/frontend/@n8n/design-system/src/types/tabs.ts
index 68dfa3eccb..9739882f56 100644
--- a/packages/frontend/@n8n/design-system/src/types/tabs.ts
+++ b/packages/frontend/@n8n/design-system/src/types/tabs.ts
@@ -1,9 +1,11 @@
import type { RouteLocationRaw } from 'vue-router';
+import type { IconName } from '../components/N8nIcon/icons';
+
export interface TabOptions {
value: Value;
label?: string;
- icon?: string;
+ icon?: IconName;
href?: string;
tooltip?: string;
align?: 'left' | 'right';
diff --git a/packages/frontend/@n8n/design-system/tsconfig.json b/packages/frontend/@n8n/design-system/tsconfig.json
index 3e0c2d0daa..95d580f365 100644
--- a/packages/frontend/@n8n/design-system/tsconfig.json
+++ b/packages/frontend/@n8n/design-system/tsconfig.json
@@ -4,7 +4,7 @@
"baseUrl": ".",
"rootDirs": [".", "../composables/src"],
"outDir": "dist",
- "types": ["vite/client", "vitest/globals"],
+ "types": ["vite/client", "unplugin-icons/types/vue", "vitest/globals"],
"typeRoots": [
"./node_modules/@testing-library",
"./node_modules/@types",
diff --git a/packages/frontend/@n8n/design-system/vite.config.mts b/packages/frontend/@n8n/design-system/vite.config.mts
index d05987b6a3..5fce1c4433 100644
--- a/packages/frontend/@n8n/design-system/vite.config.mts
+++ b/packages/frontend/@n8n/design-system/vite.config.mts
@@ -21,7 +21,7 @@ export default mergeConfig(
dts: false,
resolvers: [
iconsResolver({
- prefix: 'icon',
+ prefix: 'Icon',
}),
],
}),
diff --git a/packages/frontend/editor-ui/package.json b/packages/frontend/editor-ui/package.json
index 8510691198..bc3d3244d4 100644
--- a/packages/frontend/editor-ui/package.json
+++ b/packages/frontend/editor-ui/package.json
@@ -103,7 +103,7 @@
},
"devDependencies": {
"@faker-js/faker": "^8.0.2",
- "@iconify/json": "^2.2.228",
+ "@iconify/json": "^2.2.349",
"@n8n/eslint-config": "workspace:*",
"@n8n/typescript-config": "workspace:*",
"@n8n/vitest-config": "workspace:*",
@@ -121,8 +121,8 @@
"browserslist-to-esbuild": "^2.1.1",
"fake-indexeddb": "^6.0.0",
"miragejs": "^0.1.48",
- "unplugin-icons": "^0.19.0",
- "unplugin-vue-components": "^0.27.2",
+ "unplugin-icons": "catalog:frontend",
+ "unplugin-vue-components": "catalog:frontend",
"vite": "catalog:",
"vite-plugin-static-copy": "2.2.0",
"vite-svg-loader": "5.1.0",
diff --git a/packages/frontend/editor-ui/src/Interface.ts b/packages/frontend/editor-ui/src/Interface.ts
index 1e15f898e6..09a66dc160 100644
--- a/packages/frontend/editor-ui/src/Interface.ts
+++ b/packages/frontend/editor-ui/src/Interface.ts
@@ -70,6 +70,7 @@ import type { BulkCommand, Undoable } from '@/models/history';
import type { ProjectSharingData } from '@/types/projects.types';
import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
+import { type IconName } from '@n8n/design-system/src/components/N8nIcon/icons';
export * from '@n8n/design-system/types';
@@ -668,7 +669,7 @@ export type SimplifiedNodeType = Pick<
export interface SubcategoryItemProps {
description?: string;
iconType?: string;
- icon?: string;
+ icon?: IconName;
iconProps?: {
color?: string;
};
@@ -1072,7 +1073,7 @@ export interface ITab {
value: Value;
label?: string;
href?: string;
- icon?: string;
+ icon?: IconName;
align?: 'right';
tooltip?: string;
}
diff --git a/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue b/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue
index 081b8bc186..ffe01f0e5e 100644
--- a/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue
+++ b/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue
@@ -137,7 +137,7 @@ const onBlur = (): void => {
type="tertiary"
text
size="mini"
- icon="trash"
+ icon="trash-2"
data-test-id="assignment-remove"
:class="[$style.iconButton, $style.extraTopPadding]"
@click="onRemove"
diff --git a/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue b/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue
index 413586c1d7..d5d0843f46 100644
--- a/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue
+++ b/packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue
@@ -3,6 +3,7 @@ import { useI18n } from '@n8n/i18n';
import type { BaseTextKey } from '@n8n/i18n';
import { ASSIGNMENT_TYPES } from './constants';
import { computed } from 'vue';
+import { type IconName } from '@n8n/design-system/components/N8nIcon/icons';
interface Props {
modelValue: string;
@@ -19,7 +20,9 @@ const i18n = useI18n();
const types = ASSIGNMENT_TYPES;
-const icon = computed(() => types.find((type) => type.type === props.modelValue)?.icon ?? 'cube');
+const icon = computed(
+ (): IconName => types.find((type) => type.type === props.modelValue)?.icon ?? 'box',
+);
const onTypeChange = (type: string): void => {
emit('update:model-value', type);
diff --git a/packages/frontend/editor-ui/src/components/AssignmentCollection/constants.ts b/packages/frontend/editor-ui/src/components/AssignmentCollection/constants.ts
index c448f96ce8..8c18216151 100644
--- a/packages/frontend/editor-ui/src/components/AssignmentCollection/constants.ts
+++ b/packages/frontend/editor-ui/src/components/AssignmentCollection/constants.ts
@@ -1,7 +1,9 @@
-export const ASSIGNMENT_TYPES = [
- { type: 'string', icon: 'font' },
- { type: 'number', icon: 'hashtag' },
- { type: 'boolean', icon: 'check-square' },
+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: 'cube' },
+ { type: 'object', icon: 'box' },
];
diff --git a/packages/frontend/editor-ui/src/components/Banner.vue b/packages/frontend/editor-ui/src/components/Banner.vue
index e418002d4e..ecbeeab276 100644
--- a/packages/frontend/editor-ui/src/components/Banner.vue
+++ b/packages/frontend/editor-ui/src/components/Banner.vue
@@ -37,8 +37,8 @@ const onClick = () => {
-
-
+
-
+
"
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
index 284d90d0c0..e28e776659 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
@@ -97,7 +97,7 @@ const scrollRight = () => scroll(50);
+
{{ option.label }}
-
diff --git a/packages/frontend/@n8n/design-system/src/types/action-dropdown.ts b/packages/frontend/@n8n/design-system/src/types/action-dropdown.ts
index e748785f1c..40b19851a9 100644
--- a/packages/frontend/@n8n/design-system/src/types/action-dropdown.ts
+++ b/packages/frontend/@n8n/design-system/src/types/action-dropdown.ts
@@ -1,11 +1,13 @@
import type { KeyboardShortcut } from '@n8n/design-system/types/keyboardshortcut';
+import type { IconName } from '../components/N8nIcon/icons';
+
export interface ActionDropdownItem {
id: string;
label: string;
badge?: string;
badgeProps?: Record
diff --git a/packages/frontend/editor-ui/src/components/BecomeTemplateCreatorCta/BecomeTemplateCreatorCta.vue b/packages/frontend/editor-ui/src/components/BecomeTemplateCreatorCta/BecomeTemplateCreatorCta.vue
index ced0ee8717..02d242a8bf 100644
--- a/packages/frontend/editor-ui/src/components/BecomeTemplateCreatorCta/BecomeTemplateCreatorCta.vue
+++ b/packages/frontend/editor-ui/src/components/BecomeTemplateCreatorCta/BecomeTemplateCreatorCta.vue
@@ -28,7 +28,7 @@ const onClick = () => {
data-test-id="close-become-template-creator-cta"
@click="store.dismissCta()"
>
-
diff --git a/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue b/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
index d0eecee057..3b0abfc7b1 100644
--- a/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
+++ b/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
@@ -256,7 +256,7 @@ onMounted(() => {
v-text="`${prompt.length} / ${ASK_AI_MAX_PROMPT_LENGTH}`"
/>
-
diff --git a/packages/frontend/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/frontend/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 377a117f64..03cca5810c 100644
--- a/packages/frontend/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/frontend/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -1106,7 +1106,7 @@ const { width } = useElementSize(credNameRef);
-
diff --git a/packages/frontend/editor-ui/src/components/FilterConditions/constants.ts b/packages/frontend/editor-ui/src/components/FilterConditions/constants.ts
index 4410191cf9..c31ce37de8 100644
--- a/packages/frontend/editor-ui/src/components/FilterConditions/constants.ts
+++ b/packages/frontend/editor-ui/src/components/FilterConditions/constants.ts
@@ -285,13 +285,13 @@ export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
{
id: 'string',
name: 'type.string',
- icon: 'font',
+ icon: 'case-upper',
children: OPERATORS.filter((operator) => operator.type === 'string'),
},
{
id: 'number',
name: 'type.number',
- icon: 'hashtag',
+ icon: 'hash',
children: OPERATORS.filter((operator) => operator.type === 'number'),
},
{
@@ -303,7 +303,7 @@ export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
{
id: 'boolean',
name: 'type.boolean',
- icon: 'check-square',
+ icon: 'square-check',
children: OPERATORS.filter((operator) => operator.type === 'boolean'),
},
{
@@ -315,7 +315,7 @@ export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
{
id: 'object',
name: 'type.object',
- icon: 'cube',
+ icon: 'box',
children: OPERATORS.filter((operator) => operator.type === 'object'),
},
];
diff --git a/packages/frontend/editor-ui/src/components/FilterConditions/types.ts b/packages/frontend/editor-ui/src/components/FilterConditions/types.ts
index 74d2ff5c1f..e0f7ea0e1f 100644
--- a/packages/frontend/editor-ui/src/components/FilterConditions/types.ts
+++ b/packages/frontend/editor-ui/src/components/FilterConditions/types.ts
@@ -1,3 +1,4 @@
+import type { IconName } from '@n8n/design-system/components/N8nIcon/icons';
import type { BaseTextKey } from '@n8n/i18n';
import type { FilterConditionValue, FilterOperatorValue } from 'n8n-workflow';
@@ -8,7 +9,7 @@ export interface FilterOperator extends FilterOperatorValue {
export interface FilterOperatorGroup {
id: string;
name: BaseTextKey;
- icon?: string;
+ icon?: IconName;
children: FilterOperator[];
}
diff --git a/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue b/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue
index a5147e0468..6bb86bca77 100644
--- a/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue
@@ -287,7 +287,7 @@ const trackWorkflowInputFieldAdded = () => {
type="tertiary"
text
size="mini"
- icon="trash"
+ icon="trash-2"
data-test-id="fixed-collection-delete"
:title="locale.baseText('fixedCollectionParameter.deleteItem')"
@click="deleteOption(property.name, index)"
@@ -315,7 +315,7 @@ const trackWorkflowInputFieldAdded = () => {
type="tertiary"
text
size="mini"
- icon="trash"
+ icon="trash-2"
data-test-id="fixed-collection-delete"
:title="locale.baseText('fixedCollectionParameter.deleteItem')"
@click="deleteOption(property.name)"
diff --git a/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue b/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue
index ab547391ff..9bc5b9970f 100644
--- a/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue
+++ b/packages/frontend/editor-ui/src/components/Folders/FolderCard.vue
@@ -130,6 +130,7 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
:class="$style['folder-icon']"
icon="folder"
size="xlarge"
+ :strokeWidth="1"
/>
diff --git a/packages/frontend/editor-ui/src/components/Folders/ProjectBreadcrumb.vue b/packages/frontend/editor-ui/src/components/Folders/ProjectBreadcrumb.vue
index 8bf50fb629..8f7630da3b 100644
--- a/packages/frontend/editor-ui/src/components/Folders/ProjectBreadcrumb.vue
+++ b/packages/frontend/editor-ui/src/components/Folders/ProjectBreadcrumb.vue
@@ -1,11 +1,8 @@
-
-
- (() => [
{
// Link to in-app templates, available if custom templates are enabled
id: 'templates',
- icon: 'box-open',
+ icon: 'package-open',
label: i18n.baseText('mainSidebar.templates'),
position: 'bottom',
available: settingsStore.isTemplatesEnabled && templatesStore.hasCustomTemplatesHost,
@@ -95,7 +95,7 @@ const mainMenuItems = computed(() => [
{
// Link to website templates, available if custom templates are not enabled
id: 'templates',
- icon: 'box-open',
+ icon: 'package-open',
label: i18n.baseText('mainSidebar.templates'),
position: 'bottom',
available: settingsStore.isTemplatesEnabled && !templatesStore.hasCustomTemplatesHost,
@@ -114,7 +114,7 @@ const mainMenuItems = computed(() => [
},
{
id: 'insights',
- icon: 'chart-bar',
+ icon: 'chart-column-decreasing',
label: 'Insights',
customIconSize: 'medium',
position: 'bottom',
@@ -125,7 +125,7 @@ const mainMenuItems = computed(() => [
},
{
id: 'help',
- icon: 'question',
+ icon: 'circle-help',
label: i18n.baseText('mainSidebar.help'),
position: 'bottom',
children: [
@@ -206,7 +206,7 @@ const mainMenuItems = computed(() => [
),
{
id: 'full-changelog',
- icon: 'external-link-alt',
+ icon: 'external-link',
label: i18n.baseText('mainSidebar.whatsNew.fullChangelog'),
link: {
href: RELEASE_NOTES_URL,
diff --git a/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue b/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue
index 21bd584e98..5aa323623f 100644
--- a/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue
+++ b/packages/frontend/editor-ui/src/components/MainSidebarSourceControl.vue
@@ -128,7 +128,7 @@ async function pullWorkfolder() {
data-test-id="main-sidebar-source-control-connected"
>
-
@@ -424,27 +323,11 @@ exports[`VirtualSchema.vue > renders previous nodes schema for AI tools 1`] = `
class="toggle"
data-v-882a318e=""
>
-
-
- {{ modelValue }}
-
-
-
-
-
diff --git a/packages/frontend/editor-ui/src/components/InputPanel.vue b/packages/frontend/editor-ui/src/components/InputPanel.vue
index 7e9af9dfd9..f1647db3f2 100644
--- a/packages/frontend/editor-ui/src/components/InputPanel.vue
+++ b/packages/frontend/editor-ui/src/components/InputPanel.vue
@@ -480,7 +480,7 @@ function activatePane() {
{{ i18n.baseText('ndv.input.noOutputData.hint.tooltip') }}
-
-
-
-
- {{ placeholder }}
- {{ modelValue }}
-
-
-
-
-
- {{ subtitle }}
-
-
diff --git a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue
index 695e80ff04..b4b5cb9572 100644
--- a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue
+++ b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue
@@ -241,7 +241,7 @@ onMounted(async () => {
{
:class="parameter.type"
>
();
:show-action-arrow="true"
>
- ();
:show-action-arrow="true"
>
-
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
index c56d152a0b..3aac7c2855 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
@@ -30,6 +30,7 @@ const subcategoryName = computed(() => camelCase(props.item.subcategory || props
:name="item.icon"
:circle="false"
:show-tooltip="false"
+ :use-updated-icons="true"
v-bind="item.iconProps"
/>
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
index 4759a0b45c..e2fe596746 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
@@ -18,7 +18,13 @@ defineProps();
:show-action-arrow="true"
>
-
@@ -549,7 +549,7 @@ onMounted(async () => {
-
@@ -578,7 +578,7 @@ onMounted(async () => {
-
@@ -600,7 +600,7 @@ onMounted(async () => {
-
@@ -629,7 +629,7 @@ onMounted(async () => {
-
@@ -658,7 +658,7 @@ onMounted(async () => {
-
@@ -687,7 +687,7 @@ onMounted(async () => {
-
@@ -716,7 +716,7 @@ onMounted(async () => {
-
@@ -745,7 +745,7 @@ onMounted(async () => {
-
@@ -772,7 +772,7 @@ onMounted(async () => {
-
@@ -817,7 +817,7 @@ onMounted(async () => {
{{ i18n.baseText('workflowSettings.timeSavedPerExecution.tooltip') }}
-
diff --git a/packages/frontend/editor-ui/src/components/__snapshots__/NDVSubConnections.test.ts.snap b/packages/frontend/editor-ui/src/components/__snapshots__/NDVSubConnections.test.ts.snap
new file mode 100644
index 0000000000..99aff17416
--- /dev/null
+++ b/packages/frontend/editor-ui/src/components/__snapshots__/NDVSubConnections.test.ts.snap
@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NDVSubConnections > should render container if possible connections 1`] = `
+"
@@ -187,28 +155,12 @@ exports[`VirtualSchema.vue > renders preview schema when enabled and available 1
data-v-0f5e7239=""
data-value="{{ $json.account }}"
>
-
-
@@ -72,10 +72,4 @@ const categoryName = computed(() => {
flex-grow: 1;
color: var(--color-text-dark);
}
-
-.arrow {
- font-size: var(--font-size-2xs);
- width: 12px;
- color: $node-creator-arrow-color;
-}
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
index b5c3dc55a2..cb2ae243bf 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
@@ -18,7 +18,13 @@ defineProps
- {
props: {
rootNode: node,
},
+ global: {
+ stubs: {
+ N8nButton: true,
+ },
+ },
});
vi.advanceTimersByTime(1000); // Event debounce time
await waitFor(() => {});
expect(getByTestId('subnode-connection-group-ai_tool-0')).toBeVisible();
- expect(html()).toEqual(
- `
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/CategoryItem.test.ts b/packages/frontend/editor-ui/src/components/Node/NodeCreator/CategoryItem.test.ts
index 4d64abb728..b5591e8046 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/CategoryItem.test.ts
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/CategoryItem.test.ts
@@ -27,8 +27,8 @@ describe('CategoryItem', () => {
props: { name: 'Category Test', isTrigger: true },
});
- expect(container.querySelector('[data-icon="bolt"]')).toBeInTheDocument();
+ expect(container.querySelector('[data-icon="zap"]')).toBeInTheDocument();
await rerender({ isTrigger: false });
- expect(container.querySelector('[data-icon="bolt"]')).not.toBeInTheDocument();
+ expect(container.querySelector('[data-icon="zap"]')).not.toBeInTheDocument();
});
});
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
index ead3d49232..b7f487531d 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
@@ -28,11 +28,11 @@ const categoryName = computed(() => {
-
`,
- );
+ expect(html()).toMatchSnapshot();
});
it('should not render container if no possible connections', async () => {
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
index db7e7dc841..8a0acba366 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
@@ -109,7 +109,7 @@ function nodeTypeSelected(value: NodeTypeSelectedPayload[]) {
-
-
-
- Tools
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ i18n.baseText('communityNodeDetails.installed') }}
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeDocsLink.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeDocsLink.vue
index cc59d7041f..b4578fe335 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeDocsLink.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeDocsLink.vue
@@ -25,7 +25,7 @@ const openCommunityNodeDocsPage = () => {
{{ i18n.baseText('communityNodesDocsLink.title') }}
-
{{ i18n.baseText('communityNodeInfo.unverified') }}
diff --git a/packages/frontend/editor-ui/src/components/WorkflowSettings.vue b/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
index 738d74cb38..25e4e233ce 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
@@ -519,7 +519,7 @@ onMounted(async () => {
-
-
{{ i18n.baseText('communityNodeInfo.unverified.label') }}
@@ -134,21 +134,21 @@ onMounted(async () => {
-
{{ i18n.baseText('communityNodeInfo.downloads', { interpolate: { downloads } }) }}
-
{{ i18n.baseText('communityNodeInfo.publishedBy', { interpolate: { publisherName } }) }}
-
diff --git a/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue b/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue
index 8b0e213717..cb008def39 100644
--- a/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/frontend/editor-ui/src/components/NodeSettingsTabs.vue
@@ -95,7 +95,7 @@ const options = computed(() => {
if (isCommunityNode.value) {
options.push({
- icon: 'cube',
+ icon: 'box',
value: 'communityNode',
align: 'right',
tooltip: i18n.baseText('generic.communityNode.tooltip', {
diff --git a/packages/frontend/editor-ui/src/components/NodeWebhooks.vue b/packages/frontend/editor-ui/src/components/NodeWebhooks.vue
index 368cb2be3a..9c3f553aee 100644
--- a/packages/frontend/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/frontend/editor-ui/src/components/NodeWebhooks.vue
@@ -188,7 +188,7 @@ watch(
:title="isMinimized ? baseText.clickToDisplay : baseText.clickToHide"
@click="isMinimized = !isMinimized"
>
-
diff --git a/packages/frontend/editor-ui/src/components/PanelDragButton.vue b/packages/frontend/editor-ui/src/components/PanelDragButton.vue
index c89f3e27f7..2f2cd51e96 100644
--- a/packages/frontend/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/frontend/editor-ui/src/components/PanelDragButton.vue
@@ -40,13 +40,13 @@ const onDragStart = () => {
v-if="canMoveLeft"
:class="{ [$style.leftArrow]: true, [$style.visible]: isDragging }"
>
-
-
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue
index 9da538164c..085cd515d7 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectCardBadge.vue
@@ -2,10 +2,11 @@
import { computed } from 'vue';
import { useI18n } from '@n8n/i18n';
import { ResourceType, splitName } from '@/utils/projects.utils';
-import type { Project, ProjectIcon as BadgeIcon } from '@/types/projects.types';
+import type { Project } from '@/types/projects.types';
import { ProjectTypes } from '@/types/projects.types';
import type { CredentialsResource, FolderResource, WorkflowResource } from '@/Interface';
import { VIEWS } from '@/constants';
+import { type IconOrEmoji, isIconOrEmoji } from '@n8n/design-system/components/N8nIconPicker/types';
type Props = {
resource: WorkflowResource | CredentialsResource | FolderResource;
@@ -76,7 +77,7 @@ const badgeText = computed(() => {
}
});
-const badgeIcon = computed(() => {
+const badgeIcon = computed(() => {
switch (projectState.value) {
case ProjectState.Owned:
case ProjectState.SharedOwned:
@@ -85,9 +86,11 @@ const badgeIcon = computed(() => {
return { type: 'icon', value: 'user' };
case ProjectState.Team:
case ProjectState.SharedTeam:
- return props.resource.homeProject?.icon ?? { type: 'icon', value: 'layer-group' };
+ return isIconOrEmoji(props.resource.homeProject?.icon)
+ ? props.resource.homeProject?.icon
+ : { type: 'icon', value: 'layers' };
default:
- return { type: 'icon', value: 'layer-group' };
+ return { type: 'icon', value: 'layers' };
}
});
const badgeTooltip = computed(() => {
diff --git a/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue b/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue
index 02c35f3298..ca00a645d0 100644
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectCreateResource.vue
@@ -35,7 +35,7 @@ defineExpose({
+
{{ i18n.baseText('workerList.item.chartsTitle') }}
diff --git a/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue b/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
index 2b0fc98178..c181c81e50 100644
--- a/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
+++ b/packages/frontend/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
@@ -20,7 +20,7 @@ function runningSince(started: Date): string {
-
+
{{ i18n.baseText('workerList.item.jobListTitle') }} ({{ items.length }})
diff --git a/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue b/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
index e9f2b8c6c5..035cd2d56b 100644
--- a/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
+++ b/packages/frontend/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
@@ -25,7 +25,7 @@ function onCopyToClipboard(content: string) {
-
+
{{ i18n.baseText('workerList.item.netListTitle') }} ({{ items.length }})
diff --git a/packages/frontend/editor-ui/src/components/WorkflowActivator.vue b/packages/frontend/editor-ui/src/components/WorkflowActivator.vue
index 3b30d4f30a..5fae599d97 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowActivator.vue
@@ -262,7 +262,7 @@ watch(
@click="displayActivationError"
>
-
diff --git a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
index 223c901179..d32a96cd01 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
@@ -415,7 +415,7 @@ const onAddResourceClicked = async () => {
data-test-id="rlc-open-resource-link"
>
-
{{ i18n.baseText('communityNodeInfo.contact.admin') }}
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue
index fc9523de2a..a1e8e79789 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/CommunityNodeInstallHint.vue
@@ -15,7 +15,7 @@ defineProps();
-
diff --git a/packages/frontend/editor-ui/src/components/NodeDetailsView.vue b/packages/frontend/editor-ui/src/components/NodeDetailsView.vue
index 12f438c24d..29e34e647e 100644
--- a/packages/frontend/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/frontend/editor-ui/src/components/NodeDetailsView.vue
@@ -870,7 +870,7 @@ onBeforeUnmount(() => {
target="_blank"
@click="onFeatureRequestClick"
>
-
- {{ hint }}
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
index 36a25fe27e..60cf7738f7 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
@@ -53,9 +53,9 @@ const i18n = useI18n();
{{ i18n.baseText('nodeCreator.noResults.requestTheNode') }}
-
-
-
+
@@ -143,4 +141,8 @@ defineExpose({
fill: $node-creator-search-clear-background-color-hover;
}
}
+
+.clickable {
+ cursor: pointer;
+}
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
index 4a17c220b7..7636df0eac 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
@@ -113,7 +113,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
>
+
-
diff --git a/packages/frontend/editor-ui/src/components/ParameterInput.vue b/packages/frontend/editor-ui/src/components/ParameterInput.vue
index b92e9313ee..579688a706 100644
--- a/packages/frontend/editor-ui/src/components/ParameterInput.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterInput.vue
@@ -1399,7 +1399,7 @@ onUpdated(async () => {
{
{
{
{
{
{
{
issue
}}
-
@@ -721,13 +721,13 @@ const onCalloutDismiss = async (parameter: INodeProperties) => {
-
-
{
type="tertiary"
text
size="mini"
- icon="trash"
+ icon="trash-2"
class="icon-button"
:title="i18n.baseText('parameterInputList.delete')"
@click="deleteOption(parameter.name)"
@@ -778,7 +778,7 @@ const onCalloutDismiss = async (parameter: INodeProperties) => {
type="tertiary"
text
size="mini"
- icon="trash"
+ icon="trash-2"
class="icon-button"
:title="i18n.baseText('parameterInputList.delete')"
@click="deleteOption(parameter.name)"
diff --git a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
index d472ab87eb..488d0a167c 100644
--- a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue
@@ -27,7 +27,7 @@ const emit = defineEmits<{
type="tertiary"
:class="['n8n-input', $style.overrideCloseButton]"
:outline="false"
- icon="xmark"
+ icon="x"
size="mini"
@click="emit('close')"
/>
diff --git a/packages/frontend/editor-ui/src/components/ParameterIssues.vue b/packages/frontend/editor-ui/src/components/ParameterIssues.vue
index 154515834e..7d422c2de0 100644
--- a/packages/frontend/editor-ui/src/components/ParameterIssues.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterIssues.vue
@@ -16,7 +16,7 @@ const i18n = useI18n();
diff --git a/packages/frontend/editor-ui/src/components/ParameterOptions.test.ts b/packages/frontend/editor-ui/src/components/ParameterOptions.test.ts
index c302f7e587..a4d49eed80 100644
--- a/packages/frontend/editor-ui/src/components/ParameterOptions.test.ts
+++ b/packages/frontend/editor-ui/src/components/ParameterOptions.test.ts
@@ -77,7 +77,7 @@ describe('ParameterOptions', () => {
iconOrientation: 'horizontal',
},
});
- expect(container.querySelector('[data-icon="ellipsis-h"]')).toBeInTheDocument();
+ expect(container.querySelector('[data-icon="ellipsis"]')).toBeInTheDocument();
});
it('should render custom actions', async () => {
diff --git a/packages/frontend/editor-ui/src/components/ParameterOptions.vue b/packages/frontend/editor-ui/src/components/ParameterOptions.vue
index 94fb6835d8..bf4071066e 100644
--- a/packages/frontend/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterOptions.vue
@@ -177,7 +177,7 @@ const getArgument = (argumentName: string) => {
+
"
+`;
diff --git a/packages/frontend/editor-ui/src/components/__snapshots__/PushConnectionTracker.test.ts.snap b/packages/frontend/editor-ui/src/components/__snapshots__/PushConnectionTracker.test.ts.snap
index 5e72b2eb94..f9534899e2 100644
--- a/packages/frontend/editor-ui/src/components/__snapshots__/PushConnectionTracker.test.ts.snap
+++ b/packages/frontend/editor-ui/src/components/__snapshots__/PushConnectionTracker.test.ts.snap
@@ -28,22 +28,10 @@ exports[`PushConnectionTracker > should render error when disconnected and conne
-
+
+
+
+
+ Tools
+
+
+
+
+
+
+
+
+ renders preview schema when enabled and available 1
class="toggle"
data-v-0f5e7239=""
>
-
renders schema for empty objects and arrays 1`] = `
class="toggle"
data-v-882a318e=""
>
-
renders schema for empty objects and arrays 1`] = `
Manual Trigger
- renders schema for empty objects and arrays 1`] = `
class="toggle"
data-v-0f5e7239=""
>
-
renders schema with spaces and dots 1`] = `
Manual Trigger
- renders schema with spaces and dots 1`] = `
class="toggle"
data-v-0f5e7239=""
>
-
@@ -1890,28 +1389,12 @@ exports[`VirtualSchema.vue > renders schema with spaces and dots 1`] = `
data-v-0f5e7239=""
data-value="{{ $json['hello world'] }}"
>
- renders schema with spaces and dots 1`] = `
class="toggle"
data-v-882a318e=""
>
-
@@ -2474,27 +1829,11 @@ exports[`VirtualSchema.vue > renders variables and context section 1`] = `
class="toggle"
data-v-882a318e=""
>
- renders variables and context section 1`] = `
Manual Trigger
- should expand all nodes when searching 1`] = `
Manual Trigger
- should expand all nodes when searching 1`] = `
data-v-0f5e7239=""
data-value="{{ $json.name }}"
>
-
should expand all nodes when searching 1`] = `
data-v-0f5e7239=""
data-value="{{ $('Set2').item.json.name }}"
>
-
-
+
{{ locale.baseText('banners.trialOver.message') }}
diff --git a/packages/frontend/editor-ui/src/components/banners/V1Banner.test.ts b/packages/frontend/editor-ui/src/components/banners/V1Banner.test.ts
index 8332e8d215..b81dea203b 100644
--- a/packages/frontend/editor-ui/src/components/banners/V1Banner.test.ts
+++ b/packages/frontend/editor-ui/src/components/banners/V1Banner.test.ts
@@ -5,7 +5,13 @@ import { useUsersStore } from '@/stores/users.store';
import { ROLE } from '@n8n/api-types';
import type { IUser } from '@/Interface';
-const renderComponent = createComponentRenderer(V1Banner);
+const renderComponent = createComponentRenderer(V1Banner, {
+ global: {
+ stubs: {
+ N8nIcon: true,
+ },
+ },
+});
describe('V1 Banner', () => {
let pinia: ReturnType;
diff --git a/packages/frontend/editor-ui/src/components/banners/V1Banner.vue b/packages/frontend/editor-ui/src/components/banners/V1Banner.vue
index f7a2584fa1..66d820c6e6 100644
--- a/packages/frontend/editor-ui/src/components/banners/V1Banner.vue
+++ b/packages/frontend/editor-ui/src/components/banners/V1Banner.vue
@@ -15,7 +15,7 @@ const hasOwnerPermission = computed(() => hasPermission(['instanceOwner']));
-
+
should render banner 1`] = `
@@ -114,28 +81,11 @@ exports[`V1 Banner > should render banner with dismiss call if user is owner 1`]
-
+
should render banner 1`] = `
>
-
+ />
-
+
should render banner with dismiss call if user is owner 1`]
>
-
+ />
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.test.ts b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.test.ts
index 9513673761..820ee579ef 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.test.ts
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.test.ts
@@ -1,7 +1,13 @@
import { createComponentRenderer } from '@/__tests__/render';
import CanvasChatButton from './CanvasChatButton.vue';
-const renderComponent = createComponentRenderer(CanvasChatButton);
+const renderComponent = createComponentRenderer(CanvasChatButton, {
+ global: {
+ stubs: {
+ N8nButton: true,
+ },
+ },
+});
describe('CanvasChatButton', () => {
it('should render correctly', () => {
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
index 9d4a942665..39cf385053 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue
@@ -9,7 +9,7 @@ defineProps
+"
+
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
index 81411e0a13..b53f287e35 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
@@ -44,7 +44,7 @@ function onClick() {
:show-after="700"
>
{{ i18n.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting') }}
@@ -77,14 +77,6 @@ function onClick() {
min-width: 100px;
min-height: 100px;
cursor: pointer;
-
- svg {
- width: 26px !important;
- height: 40px;
- path {
- fill: var(--color-foreground-xdark);
- }
- }
}
.label {
diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
index ecb1499906..7b7a474a75 100644
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
@@ -40,7 +40,7 @@ const dirtiness = computed(() =>
@@ -49,11 +49,11 @@ const dirtiness = computed(() =>
-
-
@@ -64,14 +64,14 @@ const dirtiness = computed(() =>
data-test-id="canvas-node-status-running"
:class="[$style.status, $style.running]"
>
-
-
-
-
@@ -64,7 +64,7 @@ async function handleClickExecute() {
diff --git a/packages/frontend/editor-ui/src/components/canvas/experimental/components/ExperimentalEmbeddedNodeDetails.vue b/packages/frontend/editor-ui/src/components/canvas/experimental/components/ExperimentalEmbeddedNodeDetails.vue
index 2638736a1e..d405ad7819 100644
--- a/packages/frontend/editor-ui/src/components/canvas/experimental/components/ExperimentalEmbeddedNodeDetails.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/experimental/components/ExperimentalEmbeddedNodeDetails.vue
@@ -78,7 +78,7 @@ function handleToggleExpand() {
>
@@ -408,6 +408,14 @@ onBeforeMount(() => {
}
}
+.label.savedDataLabel {
+ display: flex;
+ align-items: center;
+ span {
+ margin-right: var(--spacing-3xs);
+ }
+}
+
.subGroup {
padding: 0 0 var(--spacing-xs) var(--spacing-s);
diff --git a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
index 6b289cc78a..3ffcd91f0c 100644
--- a/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
+++ b/packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
@@ -438,7 +438,7 @@ const goToUpgrade = () => {
= {
- [EXECUTION_STATUS.CRASHED]: {
- icon: 'status-error',
- color: 'danger',
- },
- [EXECUTION_STATUS.ERROR]: {
- icon: 'status-error',
- color: 'danger',
- },
- [EXECUTION_STATUS.WAITING]: {
- icon: 'status-waiting',
- color: 'secondary',
- },
- [EXECUTION_STATUS.SUCCESS]: {
- icon: 'status-completed',
- color: 'success',
- },
- [EXECUTION_STATUS.NEW]: {
- icon: 'status-new',
- color: 'foreground-xdark',
- },
- [EXECUTION_STATUS.RUNNING]: {
- icon: 'spinner',
- color: 'secondary',
- },
- [EXECUTION_STATUS.UNKNOWN]: {
- icon: 'status-unknown',
- color: 'foreground-xdark',
- },
- [EXECUTION_STATUS.CANCELED]: {
- icon: 'status-canceled',
- color: 'foreground-xdark',
- },
-};
+const executionIconStatusDictionary: Record =
+ {
+ [EXECUTION_STATUS.CRASHED]: {
+ icon: 'status-error',
+ color: 'danger',
+ },
+ [EXECUTION_STATUS.ERROR]: {
+ icon: 'status-error',
+ color: 'danger',
+ },
+ [EXECUTION_STATUS.WAITING]: {
+ icon: 'status-waiting',
+ color: 'secondary',
+ },
+ [EXECUTION_STATUS.SUCCESS]: {
+ icon: 'status-completed',
+ color: 'success',
+ },
+ [EXECUTION_STATUS.NEW]: {
+ icon: 'status-new',
+ color: 'foreground-xdark',
+ },
+ [EXECUTION_STATUS.RUNNING]: {
+ icon: 'spinner',
+ color: 'secondary',
+ },
+ [EXECUTION_STATUS.UNKNOWN]: {
+ icon: 'status-unknown',
+ color: 'foreground-xdark',
+ },
+ [EXECUTION_STATUS.CANCELED]: {
+ icon: 'status-canceled',
+ color: 'foreground-xdark',
+ },
+ };
const errorStatuses: ExecutionStatus[] = [EXECUTION_STATUS.ERROR, EXECUTION_STATUS.CRASHED];
const classes = computed(() => {
@@ -225,7 +227,13 @@ async function handleActionItemClick(commandData: Command) {
>
@@ -253,7 +261,7 @@ async function handleActionItemClick(commandData: Command) {
-
-
-
- Prod. executionsLast 7 days525 85%
+
- Prod. executionsLast 7 days525
-85% - Failed prod. executionsLast 7 days14 3% +
- Failed prod. executionsLast 7 days14
-3% - Failure rateLast 7 days1.9 % 0.8pp +
- Failure rateLast 7 days1.9 %
-0.8pp - Time savedLast 7 days55.56 h 5.16h +
- Time savedLast 7 days55.56 h
-5.16h - Run time (avg.)Last 7 days2.5 s 0.5s +
- Run time (avg.)Last 7 days2.5 s
0.5s @@ -51,35 +51,32 @@ exports[`InsightsSummary > should render the summary correctly 2`] = ` exports[`InsightsSummary > should render the summary correctly 3`] = ` " -
-
- Prod. executionsLast 7 days525 85%
+
- Prod. executionsLast 7 days525
-85% - Failed prod. executionsLast 7 days14 3% +
- Failed prod. executionsLast 7 days14
-3% - Failure rateLast 7 days1.9 % 0.8pp +
- Failure rateLast 7 days1.9 %
-0.8pp - Time savedLast 7 days-- - - - +
- Time savedLast 7 days--
-- Run time (avg.)Last 7 days2.5 s 0.5s +
- Run time (avg.)Last 7 days2.5 s
0.5s @@ -93,35 +90,35 @@ exports[`InsightsSummary > should render the summary correctly 3`] = ` exports[`InsightsSummary > should render the summary correctly 4`] = ` " -
-
- Prod. executionsLast 7 days525 2%
+
- Prod. executionsLast 7 days525
-2% - Failed prod. executionsLast 7 days14 3% +
- Failed prod. executionsLast 7 days14
-3% - Failure rateLast 7 days1.9 % 0.8pp +
- Failure rateLast 7 days1.9 %
-0.8pp - Time savedLast 7 days55.56 h 0h +
- Time savedLast 7 days55.56 h
-0h - Run time (avg.)Last 7 days2.5 s 0.5s +
- Run time (avg.)Last 7 days2.5 s
0.5s @@ -162,35 +159,32 @@ exports[`InsightsSummary > should render the summary correctly 5`] = ` exports[`InsightsSummary > should render the summary correctly 6`] = ` " -
-
- Prod. executionsLast 7 days0 0%
+
- Prod. executionsLast 7 days0
-0% - Failed prod. executionsLast 7 days0 0% +
- Failed prod. executionsLast 7 days0
-0% - Failure rateLast 7 days0 % 0pp +
- Failure rateLast 7 days0 %
-0pp - Time savedLast 7 days-- - - - +
- Time savedLast 7 days--
-- Run time (avg.)Last 7 days0 s 0s +
- Run time (avg.)Last 7 days0 s
0s diff --git a/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue b/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue index 244b6689c5..0819bdee52 100644 --- a/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue +++ b/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue @@ -176,7 +176,7 @@ async function copySessionId() { type="secondary" size="small" icon-size="medium" - icon="undo" + icon="undo-2" :title="locale.baseText('chat.window.session.reset')" @click.stop="onRefreshSession" /> @@ -202,7 +202,7 @@ async function copySessionId() { - {{ statusText }} @@ -184,14 +184,14 @@ watch( v-if="isError && isCompact" size="medium" color="danger" - icon="exclamation-triangle" + icon="triangle-alert" :class="$style.compactErrorIcon" />+ {{ statusText }} import type { PropType } from 'vue'; import { useAttrs } from 'vue'; +import { type IconName } from '@n8n/design-system/src/components/N8nIcon/icons'; defineProps({ label: { @@ -8,7 +9,7 @@ defineProps({ required: true, }, icon: { - type: String, + type: Object as PropType , required: true, }, placement: { diff --git a/packages/frontend/editor-ui/src/plugins/icons/index.ts b/packages/frontend/editor-ui/src/plugins/icons/index.ts index 15190e5251..5562e7e907 100644 --- a/packages/frontend/editor-ui/src/plugins/icons/index.ts +++ b/packages/frontend/editor-ui/src/plugins/icons/index.ts @@ -205,6 +205,7 @@ function addIcon(icon: IconDefinition) { library.add(icon); } +// this can be removed once nodes stop using FA icons export const FontAwesomePlugin: Plugin = { install: (app) => { addIcon(faAngleDoubleLeft); @@ -413,7 +414,3 @@ type LibraryWithDefinitions = Library & { }; export const iconLibrary = library as LibraryWithDefinitions; - -export const getAllIconNames = () => { - return Object.keys(iconLibrary.definitions.fas); -}; diff --git a/packages/frontend/editor-ui/src/stores/nodeCreator.store.ts b/packages/frontend/editor-ui/src/stores/nodeCreator.store.ts index 209a30f2e9..576dddf56e 100644 --- a/packages/frontend/editor-ui/src/stores/nodeCreator.store.ts +++ b/packages/frontend/editor-ui/src/stores/nodeCreator.store.ts @@ -250,7 +250,7 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => { title: actionNode.properties.displayName, nodeIcon: { type: 'icon', - name: 'check-double', + name: 'check-check', }, rootView: 'Regular', mode: 'actions', diff --git a/packages/frontend/editor-ui/src/stores/projects.store.ts b/packages/frontend/editor-ui/src/stores/projects.store.ts index 9baa4755c8..a19af17ef6 100644 --- a/packages/frontend/editor-ui/src/stores/projects.store.ts +++ b/packages/frontend/editor-ui/src/stores/projects.store.ts @@ -18,6 +18,7 @@ import { useUsersStore } from '@/stores/users.store'; import { getResourcePermissions } from '@n8n/permissions'; import type { CreateProjectDto, UpdateProjectDto } from '@n8n/api-types'; import { useSourceControlStore } from '@/stores/sourceControl.store'; +import type { IconOrEmoji } from '@n8n/design-system/components/N8nIconPicker/types'; export const useProjectsStore = defineStore(STORES.PROJECTS, () => { const route = useRoute(); @@ -126,12 +127,12 @@ export const useProjectsStore = defineStore(STORES.PROJECTS, () => { const { name, icon, description } = projectData; if (projectIndex !== -1) { myProjects.value[projectIndex].name = name; - myProjects.value[projectIndex].icon = icon; + myProjects.value[projectIndex].icon = icon as IconOrEmoji; myProjects.value[projectIndex].description = description; } if (currentProject.value) { currentProject.value.name = name; - currentProject.value.icon = icon; + currentProject.value.icon = icon as IconOrEmoji; currentProject.value.description = description; } if (projectData.relations) { diff --git a/packages/frontend/editor-ui/src/types/projects.types.ts b/packages/frontend/editor-ui/src/types/projects.types.ts index 851bb115b0..b69f769dd8 100644 --- a/packages/frontend/editor-ui/src/types/projects.types.ts +++ b/packages/frontend/editor-ui/src/types/projects.types.ts @@ -17,7 +17,7 @@ export type ProjectRelationPayload = { userId: string; role: ProjectRole }; export type ProjectSharingData = { id: string; name: string | null; - icon: ProjectIcon | null; + icon: { type: 'emoji'; value: string } | { type: 'icon'; value: string } | null; type: ProjectType; description?: string | null; createdAt: string; @@ -32,8 +32,3 @@ export type ProjectListItem = ProjectSharingData & { scopes?: Scope[]; }; export type ProjectsCount = Record - Prod. executionsLast 7 days0
- Prod. executionsLast 7 days525
- Prod. executionsLast 7 days525
- Prod. executionsLast 7 days525