fix(editor): Show the right state on metadata update (no-changelog) (#25816)

Author: dariacodes

packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowDetails.vue

@@ -175,7 +175,7 @@ function onTagsBlur() {
 		workflowDocumentStore.value.setTags(tags);
 	}
 	workflowState.setWorkflowTagIds(tags);
-	uiStore.markStateDirty();
+	uiStore.markStateDirty('metadata');
 
 	telemetry.track('User edited workflow tags', {
 		workflow_id: props.id,

packages/frontend/editor-ui/src/app/components/MainHeader/WorkflowHeaderDraftPublishActions.vue

@@ -99,7 +99,7 @@ const workflowPublishState = computed((): WorkflowPublishState => {
 	const hasBeenPublished = !!workflowsStore.workflow.activeVersion;
 	const hasChanges =
 		workflowsStore.workflow.versionId !== workflowsStore.workflow.activeVersion?.versionId ||
-		uiStore.stateIsDirty;
+		uiStore.hasUnsavedWorkflowChanges;
 
 	// Not published states
 	if (!hasBeenPublished) {

packages/frontend/editor-ui/src/app/composables/useWorkflowState.ts

@@ -62,7 +62,7 @@ export function useWorkflowState() {
 
 	function setWorkflowName(data: { newName: string; setStateDirty: boolean }) {
 		if (data.setStateDirty) {
-			uiStore.markStateDirty();
+			uiStore.markStateDirty('metadata');
 		}
 		ws.workflow.name = data.newName;
 		ws.workflowObject.name = data.newName;

packages/frontend/editor-ui/src/app/stores/ui.store.test.ts

@@ -0,0 +1,80 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { useUIStore } from '@/app/stores/ui.store';
+
+describe('UI Store', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+	});
+
+	describe('markStateDirty', () => {
+		it('should mark state as dirty and set hasUnsavedWorkflowChanges when type is workflow', () => {
+			const uiStore = useUIStore();
+
+			uiStore.markStateDirty('workflow');
+
+			expect(uiStore.stateIsDirty).toBe(true);
+			expect(uiStore.hasUnsavedWorkflowChanges).toBe(true);
+		});
+
+		it('should mark state as dirty but not set hasUnsavedWorkflowChanges when type is metadata', () => {
+			const uiStore = useUIStore();
+
+			uiStore.markStateDirty('metadata');
+
+			expect(uiStore.stateIsDirty).toBe(true);
+			expect(uiStore.hasUnsavedWorkflowChanges).toBe(false);
+		});
+
+		it('should default to workflow type when no type is provided', () => {
+			const uiStore = useUIStore();
+
+			uiStore.markStateDirty();
+
+			expect(uiStore.stateIsDirty).toBe(true);
+			expect(uiStore.hasUnsavedWorkflowChanges).toBe(true);
+		});
+
+		it('should increment dirtyStateSetCount each time it is called', () => {
+			const uiStore = useUIStore();
+			const initialCount = uiStore.dirtyStateSetCount;
+
+			uiStore.markStateDirty('metadata');
+			expect(uiStore.dirtyStateSetCount).toBe(initialCount + 1);
+
+			uiStore.markStateDirty('workflow');
+			expect(uiStore.dirtyStateSetCount).toBe(initialCount + 2);
+		});
+
+		it('should not override hasUnsavedWorkflowChanges once set to true', () => {
+			const uiStore = useUIStore();
+
+			uiStore.markStateDirty('workflow');
+			expect(uiStore.hasUnsavedWorkflowChanges).toBe(true);
+
+			uiStore.markStateDirty('metadata');
+			expect(uiStore.hasUnsavedWorkflowChanges).toBe(true);
+		});
+	});
+
+	describe('markStateClean', () => {
+		it('should mark state as clean', () => {
+			const uiStore = useUIStore();
+
+			uiStore.markStateDirty('workflow');
+			expect(uiStore.stateIsDirty).toBe(true);
+
+			uiStore.markStateClean();
+			expect(uiStore.stateIsDirty).toBe(false);
+		});
+
+		it('should clear hasUnsavedWorkflowChanges when marking state clean', () => {
+			const uiStore = useUIStore();
+
+			uiStore.markStateDirty('workflow');
+			expect(uiStore.hasUnsavedWorkflowChanges).toBe(true);
+
+			uiStore.markStateClean();
+			expect(uiStore.hasUnsavedWorkflowChanges).toBe(false);
+		});
+	});
+});

packages/frontend/editor-ui/src/app/stores/ui.store.ts

@@ -275,6 +275,8 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	});
 	const currentView = ref<string>('');
 	const stateIsDirty = ref<boolean>(false);
+	// This tracks only structural changes without metadata (name or tags)
+	const hasUnsavedWorkflowChanges = ref<boolean>(false);
 	const dirtyStateSetCount = ref<number>(0);
 	const lastSelectedNode = ref<string | null>(null);
 	const nodeViewOffsetPosition = ref<[number, number]>([0, 0]);
@@ -617,13 +619,17 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		processingExecutionResults.value = value;
 	};
 
-	const markStateDirty = () => {
+	const markStateDirty = (type: 'workflow' | 'metadata' = 'workflow') => {
 		dirtyStateSetCount.value++;
 		stateIsDirty.value = true;
+		if (type === 'workflow') {
+			hasUnsavedWorkflowChanges.value = true;
+		}
 	};
 
 	const markStateClean = () => {
 		stateIsDirty.value = false;
+		hasUnsavedWorkflowChanges.value = false;
 	};
 
 	/**
@@ -686,6 +692,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		headerHeight,
 		dirtyStateSetCount: computed(() => dirtyStateSetCount.value),
 		stateIsDirty: computed(() => stateIsDirty.value),
+		hasUnsavedWorkflowChanges: computed(() => hasUnsavedWorkflowChanges.value),
 		isBlankRedirect,
 		activeCredentialType,
 		lastSelectedNode,