feat(editor): Add support for project icons

packages/cli/src/controllers/project.controller.ts

@@ -51,7 +51,12 @@ export class ProjectController {
 	@Licensed('feat:projectRole:admin')
 	async createProject(req: ProjectRequest.Create) {
 		try {
-			const project = await this.projectsService.createTeamProject(req.body.name, req.user);
+			const project = await this.projectsService.createTeamProject(
+				req.body.name,
+				req.user,
+				undefined,
+				req.body.icon,
+			);
 
 			this.eventService.emit('team-project-created', {
 				userId: req.user.id,
@@ -163,7 +168,7 @@ export class ProjectController {
 	@Get('/:projectId')
 	@ProjectScope('project:read')
 	async getProject(req: ProjectRequest.Get): Promise<ProjectRequest.ProjectWithRelations> {
-		const [{ id, name, type }, relations] = await Promise.all([
+		const [{ id, name, icon, type }, relations] = await Promise.all([
 			this.projectsService.getProject(req.params.projectId),
 			this.projectsService.getProjectRelations(req.params.projectId),
 		]);
@@ -172,6 +177,7 @@ export class ProjectController {
 		return {
 			id,
 			name,
+			icon,
 			type,
 			relations: relations.map((r) => ({
 				id: r.user.id,
@@ -193,7 +199,7 @@ export class ProjectController {
 	@ProjectScope('project:update')
 	async updateProject(req: ProjectRequest.Update) {
 		if (req.body.name) {
-			await this.projectsService.updateProject(req.body.name, req.params.projectId);
+			await this.projectsService.updateProject(req.body.name, req.params.projectId, req.body.icon);
 		}
 		if (req.body.relations) {
 			try {

packages/cli/src/databases/entities/project.ts

@@ -6,6 +6,7 @@ import type { SharedCredentials } from './shared-credentials';
 import type { SharedWorkflow } from './shared-workflow';
 
 export type ProjectType = 'personal' | 'team';
+export type ProjectIcon = { type: 'emoji' | 'icon'; value: string } | null;
 
 @Entity()
 export class Project extends WithTimestampsAndStringId {
@@ -15,6 +16,9 @@ export class Project extends WithTimestampsAndStringId {
 	@Column({ length: 36 })
 	type: ProjectType;
 
+	@Column({ type: 'json', nullable: true })
+	icon: ProjectIcon;
+
 	@OneToMany('ProjectRelation', 'project')
 	projectRelations: ProjectRelation[];
 

packages/cli/src/databases/migrations/common/1729607673469-AddProjectIcons.ts

@@ -0,0 +1,10 @@
+import type { MigrationContext, ReversibleMigration } from '@/databases/types';
+export class AddProjectIcons1729607673469 implements ReversibleMigration {
+	async up({ schemaBuilder: { addColumns, column } }: MigrationContext) {
+		await addColumns('project', [column('icon').json]);
+	}
+
+	async down({ schemaBuilder: { dropColumns } }: MigrationContext) {
+		await dropColumns('project', ['icon']);
+	}
+}

packages/cli/src/databases/migrations/mysqldb/index.ts

@@ -69,6 +69,7 @@ import { CreateProcessedDataTable1726606152711 } from '../common/1726606152711-C
 import { SeparateExecutionCreationFromStart1727427440136 } from '../common/1727427440136-SeparateExecutionCreationFromStart';
 import { AddMissingPrimaryKeyOnAnnotationTagMapping1728659839644 } from '../common/1728659839644-AddMissingPrimaryKeyOnAnnotationTagMapping';
 import { UpdateProcessedDataValueColumnToText1729607673464 } from '../common/1729607673464-UpdateProcessedDataValueColumnToText';
+import { AddProjectIcons1729607673469 } from '../common/1729607673469-AddProjectIcons';
 import { CreateTestDefinitionTable1730386903556 } from '../common/1730386903556-CreateTestDefinitionTable';
 import { AddDescriptionToTestDefinition1731404028106 } from '../common/1731404028106-AddDescriptionToTestDefinition';
 import { CreateTestMetricTable1732271325258 } from '../common/1732271325258-CreateTestMetricTable';
@@ -152,4 +153,5 @@ export const mysqlMigrations: Migration[] = [
 	CreateTestRun1732549866705,
 	AddMockedNodesColumnToTestDefinition1733133775640,
 	AddManagedColumnToCredentialsTable1734479635324,
+	AddProjectIcons1729607673469,
 ];

packages/cli/src/databases/migrations/postgresdb/index.ts

@@ -69,6 +69,7 @@ import { CreateProcessedDataTable1726606152711 } from '../common/1726606152711-C
 import { SeparateExecutionCreationFromStart1727427440136 } from '../common/1727427440136-SeparateExecutionCreationFromStart';
 import { AddMissingPrimaryKeyOnAnnotationTagMapping1728659839644 } from '../common/1728659839644-AddMissingPrimaryKeyOnAnnotationTagMapping';
 import { UpdateProcessedDataValueColumnToText1729607673464 } from '../common/1729607673464-UpdateProcessedDataValueColumnToText';
+import { AddProjectIcons1729607673469 } from '../common/1729607673469-AddProjectIcons';
 import { CreateTestDefinitionTable1730386903556 } from '../common/1730386903556-CreateTestDefinitionTable';
 import { AddDescriptionToTestDefinition1731404028106 } from '../common/1731404028106-AddDescriptionToTestDefinition';
 import { CreateTestMetricTable1732271325258 } from '../common/1732271325258-CreateTestMetricTable';
@@ -152,4 +153,5 @@ export const postgresMigrations: Migration[] = [
 	CreateTestRun1732549866705,
 	AddMockedNodesColumnToTestDefinition1733133775640,
 	AddManagedColumnToCredentialsTable1734479635324,
+	AddProjectIcons1729607673469,
 ];

packages/cli/src/databases/migrations/sqlite/index.ts

@@ -67,6 +67,7 @@ import { CreateAnnotationTables1724753530828 } from '../common/1724753530828-Cre
 import { CreateProcessedDataTable1726606152711 } from '../common/1726606152711-CreateProcessedDataTable';
 import { SeparateExecutionCreationFromStart1727427440136 } from '../common/1727427440136-SeparateExecutionCreationFromStart';
 import { UpdateProcessedDataValueColumnToText1729607673464 } from '../common/1729607673464-UpdateProcessedDataValueColumnToText';
+import { AddProjectIcons1729607673469 } from '../common/1729607673469-AddProjectIcons';
 import { CreateTestDefinitionTable1730386903556 } from '../common/1730386903556-CreateTestDefinitionTable';
 import { CreateTestMetricTable1732271325258 } from '../common/1732271325258-CreateTestMetricTable';
 import { CreateTestRun1732549866705 } from '../common/1732549866705-CreateTestRunTable';
@@ -146,6 +147,7 @@ const sqliteMigrations: Migration[] = [
 	CreateTestRun1732549866705,
 	AddMockedNodesColumnToTestDefinition1733133775640,
 	AddManagedColumnToCredentialsTable1734479635324,
+	AddProjectIcons1729607673469,
 ];
 
 export { sqliteMigrations };

packages/cli/src/requests.ts

@@ -15,7 +15,7 @@ import type {
 } from 'n8n-workflow';
 
 import type { CredentialsEntity } from '@/databases/entities/credentials-entity';
-import type { Project, ProjectType } from '@/databases/entities/project';
+import type { Project, ProjectIcon, ProjectType } from '@/databases/entities/project';
 import type { AssignableRole, GlobalRole, User } from '@/databases/entities/user';
 import type { Variables } from '@/databases/entities/variables';
 import type { WorkflowEntity } from '@/databases/entities/workflow-entity';
@@ -125,7 +125,7 @@ export namespace ListQuery {
 }
 
 type SlimUser = Pick<IUser, 'id' | 'email' | 'firstName' | 'lastName'>;
-export type SlimProject = Pick<Project, 'id' | 'type' | 'name'>;
+export type SlimProject = Pick<Project, 'id' | 'type' | 'name' | 'icon'>;
 
 export function hasSharing(
 	workflows: ListQuery.Workflow.Plain[] | ListQuery.Workflow.WithSharing[],
@@ -523,6 +523,7 @@ export declare namespace ProjectRequest {
 		Project,
 		{
 			name: string;
+			icon?: ProjectIcon;
 		}
 	>;
 
@@ -551,6 +552,7 @@ export declare namespace ProjectRequest {
 	type ProjectWithRelations = {
 		id: string;
 		name: string | undefined;
+		icon: ProjectIcon;
 		type: ProjectType;
 		relations: ProjectRelationResponse[];
 		scopes: Scope[];
@@ -560,7 +562,11 @@ export declare namespace ProjectRequest {
 	type Update = AuthenticatedRequest<
 		{ projectId: string },
 		{},
-		{ name?: string; relations?: ProjectRelationPayload[] }
+		{
+			name?: string;
+			relations?: ProjectRelationPayload[];
+			icon?: { type: 'icon' | 'emoji'; value: string };
+		}
 	>;
 	type Delete = AuthenticatedRequest<{ projectId: string }, {}, {}, { transferId?: string }>;
 }

packages/cli/src/services/ownership.service.ts

@@ -87,12 +87,14 @@ export class OwnershipService {
 					id: project.id,
 					type: project.type,
 					name: project.name,
+					icon: project.icon,
 				};
 			} else {
 				entity.sharedWithProjects.push({
 					id: project.id,
 					type: project.type,
 					name: project.name,
+					icon: project.icon,
 				});
 			}
 		}

packages/cli/src/services/project.service.ee.ts

@@ -7,7 +7,8 @@ import { ApplicationError } from 'n8n-workflow';
 import Container, { Service } from 'typedi';
 
 import { UNLIMITED_LICENSE_QUOTA } from '@/constants';
-import { Project, type ProjectType } from '@/databases/entities/project';
+import type { ProjectIcon, ProjectType } from '@/databases/entities/project';
+import { Project } from '@/databases/entities/project';
 import { ProjectRelation } from '@/databases/entities/project-relation';
 import type { ProjectRole } from '@/databases/entities/project-relation';
 import type { User } from '@/databases/entities/user';
@@ -167,7 +168,12 @@ export class ProjectService {
 		return await this.projectRelationRepository.getPersonalProjectOwners(projectIds);
 	}
 
-	async createTeamProject(name: string, adminUser: User, id?: string): Promise<Project> {
+	async createTeamProject(
+		name: string,
+		adminUser: User,
+		id?: string,
+		icon?: ProjectIcon,
+	): Promise<Project> {
 		const limit = this.license.getTeamProjectLimit();
 		if (
 			limit !== UNLIMITED_LICENSE_QUOTA &&
@@ -180,6 +186,7 @@ export class ProjectService {
 			this.projectRepository.create({
 				id,
 				name,
+				icon,
 				type: 'team',
 			}),
 		);
@@ -190,14 +197,19 @@ export class ProjectService {
 		return project;
 	}
 
-	async updateProject(name: string, projectId: string): Promise<Project> {
+	async updateProject(
+		name: string,
+		projectId: string,
+		icon?: { type: 'icon' | 'emoji'; value: string },
+	): Promise<Project> {
 		const result = await this.projectRepository.update(
 			{
 				id: projectId,
 				type: 'team',
 			},
 			{
 				name,
+				icon,
 			},
 		);
 

packages/design-system/package.json

@@ -45,6 +45,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "element-plus": "2.4.3",
+    "is-emoji-supported": "^0.0.5",
     "markdown-it": "^13.0.2",
     "markdown-it-emoji": "^2.0.2",
     "markdown-it-link-attributes": "^4.0.1",
@@ -55,5 +56,8 @@
     "vue-boring-avatars": "^1.3.0",
     "vue-router": "catalog:frontend",
     "xss": "catalog:"
+  },
+  "peerDependencies": {
+    "@vueuse/core": "*"
   }
 }

packages/design-system/src/__tests__/setup.ts

@@ -15,3 +15,8 @@ window.ResizeObserver =
 		observe: vi.fn(),
 		unobserve: vi.fn(),
 	}));
+
+// Globally mock is-emoji-supported
+vi.mock('is-emoji-supported', () => ({
+	isEmojiSupported: () => true,
+}));

packages/design-system/src/components/N8nIconPicker/IconPicker.stories.ts

@@ -0,0 +1,70 @@
+import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue3';
+
+import { TEST_ICONS } from './constants';
+import N8nIconPicker from './IconPicker.vue';
+
+export default {
+	title: 'Atoms/Icon Picker',
+	component: N8nIconPicker,
+	argTypes: {},
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	components: { N8nIconPicker },
+	props: Object.keys(argTypes),
+	setup: () => ({ args }),
+	data: () => ({
+		icon: { type: 'icon', value: 'smile' },
+	}),
+	template:
+		'<div style="height: 500px"><n8n-icon-picker v-model="icon" v-bind="args" @update:model-value="onIconSelected" /></div>',
+	methods: {
+		onIconSelected: action('iconSelected'),
+	},
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+	buttonTooltip: 'Select an icon',
+	availableIcons: TEST_ICONS,
+};
+
+const CustomTooltipTemplate: StoryFn = (args, { argTypes }) => ({
+	components: { N8nIconPicker },
+	props: Object.keys(argTypes),
+	setup: () => ({ args }),
+	data: () => ({
+		icon: { type: 'icon', value: 'layer-group' },
+	}),
+	template:
+		'<div style="height: 500px"><n8n-icon-picker v-model="icon" v-bind="args" @update:model-value="onIconSelected" /></div>',
+	methods: {
+		onIconSelected: action('iconSelected'),
+	},
+});
+
+export const WithCustomIconAndTooltip = CustomTooltipTemplate.bind({});
+WithCustomIconAndTooltip.args = {
+	availableIcons: [...TEST_ICONS],
+	buttonTooltip: 'Select something...',
+};
+
+const OnlyEmojiTemplate: StoryFn = (args, { argTypes }) => ({
+	components: { N8nIconPicker },
+	props: Object.keys(argTypes),
+	setup: () => ({ args }),
+	data: () => ({
+		icon: { type: 'emoji', value: '🔥' },
+	}),
+	template:
+		'<div style="height: 500px"><n8n-icon-picker v-model="icon" v-bind="args" @update:model-value="onIconSelected" /></div>',
+	methods: {
+		onIconSelected: action('iconSelected'),
+	},
+});
+export const OnlyEmojis = OnlyEmojiTemplate.bind({});
+OnlyEmojis.args = {
+	buttonTooltip: 'Select an emoji',
+	availableIcons: [],
+};