From f209474ba0f9e8778426669a87af2ca35284a7dc Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 3 May 2023 01:59:02 +0530
Subject: [PATCH] fix: on data change trigger history update for undo redo

---
 .../js/workflow_builder/components/ActionNode.vue      | 10 ++++++++--
 .../js/workflow_builder/components/StateNode.vue       | 10 ++++++++--
 frappe/public/js/workflow_builder/store.js             |  1 -
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frappe/public/js/workflow_builder/components/ActionNode.vue b/frappe/public/js/workflow_builder/components/ActionNode.vue
index 91d5fb0fb4..504d309296 100644
--- a/frappe/public/js/workflow_builder/components/ActionNode.vue
+++ b/frappe/public/js/workflow_builder/components/ActionNode.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { Handle, useVueFlow } from "@vue-flow/core";
-import { watch } from "vue";
+import { watch, computed } from "vue";
 import { useStore } from "../store";
 
 const props = defineProps({
@@ -35,11 +35,17 @@ watch(
 		connected_edges.forEach(edge => edge.selected = val);
 	}
 );
+
+let label = computed(() => findNode(props.node.id)?.data?.action);
+
+watch(() => props.node.data, () => {
+	store.ref_history.commit();
+}, { deep: true });
 </script>
 
 <template>
 	<div class="node" tabindex="0" @click.stop="store.workflow.selected = node">
-		<div v-if="node.data.action" class="node-label">{{ node.data.action }}</div>
+		<div v-if="label" class="node-label">{{ label }}</div>
 		<div v-else class="node-placeholder text-muted">{{ __("No Label") }}</div>
 		<Handle
 			v-for="handle in ['top', 'right', 'bottom', 'left']"
diff --git a/frappe/public/js/workflow_builder/components/StateNode.vue b/frappe/public/js/workflow_builder/components/StateNode.vue
index e5a673175f..9c682d928f 100644
--- a/frappe/public/js/workflow_builder/components/StateNode.vue
+++ b/frappe/public/js/workflow_builder/components/StateNode.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { Handle, useVueFlow } from "@vue-flow/core";
-import { watch } from "vue";
+import { watch, computed } from "vue";
 import { useStore } from "../store";
 
 const props = defineProps({
@@ -29,11 +29,17 @@ watch(
 		store.workflow.selected = val ? props.node : "";
 	}
 );
+
+let label = computed(() => findNode(props.node.id)?.data?.state);
+
+watch(() => props.node.data, () => {
+	store.ref_history.commit();
+}, { deep: true });
 </script>
 
 <template>
 	<div class="node" tabindex="0" @click.stop="store.workflow.selected = node">
-		<div v-if="node.data.state" class="node-label">{{ node.data.state }}</div>
+		<div v-if="label" class="node-label">{{ label }}</div>
 		<div v-else class="node-placeholder text-muted">{{ __("No Label") }}</div>
 		<Handle
 			v-for="handle in ['top', 'right', 'bottom', 'left']"
diff --git a/frappe/public/js/workflow_builder/store.js b/frappe/public/js/workflow_builder/store.js
index 69326da5aa..e89a673730 100644
--- a/frappe/public/js/workflow_builder/store.js
+++ b/frappe/public/js/workflow_builder/store.js
@@ -13,7 +13,6 @@ export const useStore = defineStore("workflow-builder-store", () => {
 	let ref_history = ref(null);
 
 	async function fetch() {
-		workflow.value.elements = [];
 		await frappe.model.clear_doc("Workflow", workflow_name.value);
 		await frappe.model.with_doc("Workflow", workflow_name.value);