From ea6090fc784f628951987976224b8e12198aa346 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 5 Sep 2024 11:29:11 +0300
Subject: [PATCH] fix: add sticky note readonly state

---
 .../src/components/canvas/elements/nodes/CanvasNode.vue  | 2 ++
 .../canvas/elements/nodes/CanvasNodeToolbar.vue          | 9 +++++++--
 .../elements/nodes/render-types/CanvasNodeStickyNote.vue | 3 ++-
 packages/editor-ui/src/composables/useCanvasNode.ts      | 3 ++-
 packages/editor-ui/src/types/canvas.ts                   | 1 +
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index 5ab0d2da6f4a4..49ff966d609e7 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -219,12 +219,14 @@ const id = toRef(props, 'id');
 const data = toRef(props, 'data');
 const label = toRef(props, 'label');
 const selected = toRef(props, 'selected');
+const readOnly = toRef(props, 'readOnly');
 
 provide(CanvasNodeKey, {
 	id,
 	data,
 	label,
 	selected,
+	readOnly,
 	eventBus: canvasNodeEventBus,
 });
 
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
index 554e51e4644ca..b22401f5a6a16 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
@@ -47,7 +47,9 @@ const isDisableNodeVisible = computed(() => {
 
 const isDeleteNodeVisible = computed(() => !props.readOnly);
 
-const isStickyNoteNodeType = computed(() => render.value.type === CanvasNodeRenderType.StickyNote);
+const isStickyNoteChangeColorVisible = computed(
+	() => !props.readOnly && render.value.type === CanvasNodeRenderType.StickyNote,
+);
 
 function executeNode() {
 	emit('run');
@@ -106,7 +108,10 @@ function onOpenContextMenu(event: MouseEvent) {
 				:title="i18n.baseText('node.delete')"
 				@click="onDeleteNode"
 			/>
-			<CanvasNodeStickyColorSelector v-if="isStickyNoteNodeType" @update="onChangeStickyColor" />
+			<CanvasNodeStickyColorSelector
+				v-if="isStickyNoteChangeColorVisible"
+				@update="onChangeStickyColor"
+			/>
 			<N8nIconButton
 				data-test-id="overflow-node-button"
 				type="tertiary"
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
index 37dbbaac021a1..c03c5473bcac0 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue
@@ -20,7 +20,7 @@ const emit = defineEmits<{
 
 const $style = useCssModule();
 
-const { id, isSelected, render, eventBus } = useCanvasNode();
+const { id, isSelected, isReadOnly, render, eventBus } = useCanvasNode();
 
 const renderOptions = computed(() => render.value.options as CanvasNodeStickyNoteRender['options']);
 
@@ -95,6 +95,7 @@ onBeforeUnmount(() => {
 		:min-width="150"
 		:height="renderOptions.height"
 		:width="renderOptions.width"
+		:is-visible="!isReadOnly"
 		@resize="onResize"
 	/>
 	<N8nSticky
diff --git a/packages/editor-ui/src/composables/useCanvasNode.ts b/packages/editor-ui/src/composables/useCanvasNode.ts
index b9686e258bb05..4f9c25a916cf4 100644
--- a/packages/editor-ui/src/composables/useCanvasNode.ts
+++ b/packages/editor-ui/src/composables/useCanvasNode.ts
@@ -45,7 +45,7 @@ export function useCanvasNode() {
 	const connections = computed(() => data.value.connections);
 
 	const isDisabled = computed(() => data.value.disabled);
-
+	const isReadOnly = computed(() => node?.readOnly.value);
 	const isSelected = computed(() => node?.selected.value);
 
 	const pinnedDataCount = computed(() => data.value.pinnedData.count);
@@ -75,6 +75,7 @@ export function useCanvasNode() {
 		outputs,
 		connections,
 		isDisabled,
+		isReadOnly,
 		isSelected,
 		pinnedDataCount,
 		hasPinnedData,
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 3b7716af4f4a6..55300db2e4a6f 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -155,6 +155,7 @@ export interface CanvasNodeInjectionData {
 	data: Ref<CanvasNodeData>;
 	label: Ref<NodeProps['label']>;
 	selected: Ref<NodeProps['selected']>;
+	readOnly: Ref<boolean>;
 	eventBus: Ref<EventBus<CanvasNodeEventBusEvents>>;
 }