fix: add sticky note readonly state

n8n-io · Sep 5, 2024 · ea6090f · ea6090f
1 parent d74f2a6
commit ea6090f
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 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
@@ -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
@@ -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/...ages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue b/...ages/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
@@ -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
@@ -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>>;
 }