feat(editor): Add support for project icons

cypress/composables/projects.ts

@@ -29,7 +29,11 @@ export const getAddProjectButton = () => {
 
 	return cy.get('@button');
 };
-
+export const getAddFirstProjectButton = () => cy.getByTestId('add-first-project-button');
+export const getIconPickerButton = () => cy.getByTestId('icon-picker-button');
+export const getIconPickerTab = (tab: string) => cy.getByTestId('icon-picker-tabs').contains(tab);
+export const getIconPickerIcons = () => cy.getByTestId('icon-picker-icon');
+export const getIconPickerEmojis = () => cy.getByTestId('icon-picker-emoji');
 // export const getAddProjectButton = () =>
 // 	cy.getByTestId('universal-add').should('contain', 'Add project').should('be.visible');
 export const getProjectTabs = () => cy.getByTestId('project-tabs').find('a');

cypress/e2e/39-projects.cy.ts

@@ -15,7 +15,7 @@ import {
 	NDV,
 	MainSidebar,
 } from '../pages';
-import { clearNotifications } from '../pages/notifications';
+import { clearNotifications, successToast } from '../pages/notifications';
 import { getVisibleDropdown, getVisibleModalOverlay, getVisibleSelect } from '../utils';
 
 const workflowsPage = new WorkflowsPage();
@@ -830,4 +830,23 @@ describe('Projects', { disableAutoLogin: true }, () => {
 				.should('not.have.length');
 		});
 	});
+
+	it('should set and update project icon', () => {
+		const DEFAULT_ICON = 'fa-layer-group';
+		const NEW_PROJECT_NAME = 'Test Project';
+
+		cy.signinAsAdmin();
+		cy.visit(workflowsPage.url);
+		projects.createProject(NEW_PROJECT_NAME);
+		// New project should have default icon
+		projects.getIconPickerButton().find('svg').should('have.class', DEFAULT_ICON);
+		// Choose another icon
+		projects.getIconPickerButton().click();
+		projects.getIconPickerTab('Emojis').click();
+		projects.getIconPickerEmojis().first().click();
+		// Project should be updated with new icon
+		successToast().contains('Project icon updated successfully');
+		projects.getIconPickerButton().should('contain', '😀');
+		projects.getMenuItems().contains(NEW_PROJECT_NAME).should('contain', '😀');
+	});
 });

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

@@ -13,7 +13,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';
@@ -123,7 +123,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[],
@@ -439,6 +439,7 @@ export declare namespace ProjectRequest {
 		Project,
 		{
 			name: string;
+			icon?: ProjectIcon;
 		}
 	>;
 
@@ -467,6 +468,7 @@ export declare namespace ProjectRequest {
 	type ProjectWithRelations = {
 		id: string;
 		name: string | undefined;
+		icon: ProjectIcon;
 		type: ProjectType;
 		relations: ProjectRelationResponse[];
 		scopes: Scope[];
@@ -476,7 +478,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/cli/test/integration/credentials/credentials.api.ee.test.ts

@@ -540,6 +540,7 @@ describe('GET /credentials/:id', () => {
 			id: ownerPersonalProject.id,
 			name: owner.createPersonalProjectName(),
 			type: ownerPersonalProject.type,
+			icon: null,
 		});
 		expect(firstCredential.sharedWithProjects).toHaveLength(0);
 
@@ -629,17 +630,20 @@ describe('GET /credentials/:id', () => {
 			homeProject: {
 				id: member1PersonalProject.id,
 				name: member1.createPersonalProjectName(),
+				icon: null,
 				type: 'personal',
 			},
 			sharedWithProjects: expect.arrayContaining([
 				{
 					id: member2PersonalProject.id,
 					name: member2.createPersonalProjectName(),
+					icon: null,
 					type: member2PersonalProject.type,
 				},
 				{
 					id: member3PersonalProject.id,
 					name: member3.createPersonalProjectName(),
+					icon: null,
 					type: member3PersonalProject.type,
 				},
 			]),

packages/cli/test/integration/public-api/projects.test.ts

@@ -131,6 +131,7 @@ describe('Projects in Public API', () => {
 			expect(response.status).toBe(201);
 			expect(response.body).toEqual({
 				name: 'some-project',
+				icon: null,
 				type: 'team',
 				id: expect.any(String),
 				createdAt: expect.any(String),

packages/cli/test/integration/workflows/workflows.controller.test.ts

@@ -441,6 +441,7 @@ describe('GET /workflows', () => {
 					homeProject: {
 						id: ownerPersonalProject.id,
 						name: owner.createPersonalProjectName(),
+						icon: null,
 						type: ownerPersonalProject.type,
 					},
 					sharedWithProjects: [],
@@ -456,6 +457,7 @@ describe('GET /workflows', () => {
 					homeProject: {
 						id: ownerPersonalProject.id,
 						name: owner.createPersonalProjectName(),
+						icon: null,
 						type: ownerPersonalProject.type,
 					},
 					sharedWithProjects: [],
@@ -833,6 +835,7 @@ describe('GET /workflows', () => {
 						homeProject: {
 							id: ownerPersonalProject.id,
 							name: owner.createPersonalProjectName(),
+							icon: null,
 							type: ownerPersonalProject.type,
 						},
 						sharedWithProjects: [],
@@ -842,6 +845,7 @@ describe('GET /workflows', () => {
 						homeProject: {
 							id: ownerPersonalProject.id,
 							name: owner.createPersonalProjectName(),
+							icon: null,
 							type: ownerPersonalProject.type,
 						},
 						sharedWithProjects: [],

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,
+}));