feat(editor): Add color selector to sticky node (#7453)

fixes: https://linear.app/n8n/issue/ADO-1223/feature-sticky-colors

---------

Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>

cypress/e2e/25-stickies.cy.ts

@@ -1,4 +1,6 @@
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
+import { getPopper } from '../utils';
+import { Interception } from 'cypress/types/net-stubbing';
 
 const workflowPage = new WorkflowPageClass();
 
@@ -66,6 +68,32 @@ describe('Canvas Actions', () => {
 		workflowPage.getters.stickies().should('have.length', 0);
 	});
 
+	it('change sticky color', () => {
+		workflowPage.actions.addSticky();
+
+		workflowPage.getters.stickies().should('have.length', 1);
+
+		workflowPage.actions.toggleColorPalette();
+
+		getPopper().should('be.visible');
+
+		workflowPage.actions.pickColor(2);
+
+		workflowPage.actions.toggleColorPalette();
+
+		getPopper().should('not.be.visible');
+
+		workflowPage.actions.saveWorkflowOnButtonClick();
+
+		cy.wait('@createWorkflow').then((interception: Interception) => {
+			const { request } = interception;
+			const color = request.body?.nodes[0]?.parameters?.color;
+			expect(color).to.equal(2);
+		});
+
+		workflowPage.getters.stickies().should('have.length', 1);
+	});
+
 	it('edits sticky and updates content as markdown', () => {
 		workflowPage.actions.addSticky();
 

cypress/pages/workflow.ts

@@ -126,6 +126,7 @@ export class WorkflowPage extends BasePage {
 		stickies: () => cy.getByTestId('sticky'),
 		editorTabButton: () => cy.getByTestId('radio-button-workflow'),
 		workflowHistoryButton: () => cy.getByTestId('workflow-history-button'),
+		colors: () => cy.getByTestId('color'),
 	};
 	actions = {
 		visit: (preventNodeViewUnload = true) => {
@@ -328,6 +329,17 @@ export class WorkflowPage extends BasePage {
 		deleteSticky: () => {
 			this.getters.stickies().eq(0).realHover().find('[data-test-id="delete-sticky"]').click();
 		},
+		toggleColorPalette: () => {
+			this.getters
+				.stickies()
+				.eq(0)
+				.realHover()
+				.find('[data-test-id="change-sticky-color"]')
+				.click({ force: true });
+		},
+		pickColor: (index: number) => {
+			this.getters.colors().eq(1).click();
+		},
 		editSticky: (content: string) => {
 			this.getters.stickies().dblclick().find('textarea').clear().type(content).type('{esc}');
 		},