Fix flows editing existing operations (#13713)

* Use immediate watcher instead of prop based ref default val

Fixes #13702

* Make it happy

* I'll be damned, it wasn't my stupidity after all

app/package.json

@@ -70,8 +70,8 @@
 		"@types/ms": "0.7.31",
 		"@types/qrcode": "1.4.1",
 		"@types/wellknown": "0.5.1",
-		"@vitejs/plugin-vue": "1.10.0",
-		"@vue/compiler-sfc": "3.2.22",
+		"@vitejs/plugin-vue": "2.3.3",
+		"@vue/compiler-sfc": "3.2.36",
 		"apexcharts": "3.30.0",
 		"axios": "0.24.0",
 		"base-64": "1.0.0",
@@ -97,7 +97,7 @@
 		"mitt": "3.0.0",
 		"nanoid": "3.1.30",
 		"p-queue": "7.1.0",
-		"pinia": "2.0.4",
+		"pinia": "2.0.14",
 		"prettier": "2.4.1",
 		"pretty-ms": "7.0.1",
 		"qrcode": "1.4.4",
@@ -105,12 +105,12 @@
 		"sass": "1.43.4",
 		"tinymce": "5.10.2",
 		"ts-jest": "27.1.3",
-		"typescript": "4.5.2",
-		"vite": "2.6.14",
-		"vite-plugin-md": "0.11.4",
-		"vue": "3.2.22",
-		"vue-i18n": "9.1.9",
-		"vue-router": "4.0.12",
+		"typescript": "4.7.3",
+		"vite": "2.9.9",
+		"vite-plugin-md": "0.14.0",
+		"vue": "3.2.36",
+		"vue-i18n": "9.1.10",
+		"vue-router": "4.0.15",
 		"vuedraggable": "4.1.0",
 		"wellknown": "0.5.0"
 	}

app/src/composables/use-edits-guard/use-edits-guard.ts

@@ -1,7 +1,11 @@
-import { ref, Ref, onBeforeMount, onBeforeUnmount } from 'vue';
+import { ref, Ref, onBeforeMount, onBeforeUnmount, unref } from 'vue';
 import { onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard, useRoute } from 'vue-router';
 
-export function useEditsGuard(hasEdits: Ref<boolean>) {
+type EditsGuardOptions = {
+	ignorePrefix?: string | Ref<string>;
+};
+
+export function useEditsGuard(hasEdits: Ref<boolean>, opts?: EditsGuardOptions) {
 	const { path } = useRoute();
 
 	const confirmLeave = ref(false);
@@ -16,7 +20,9 @@ export function useEditsGuard(hasEdits: Ref<boolean>) {
 	};
 
 	const editsGuard: NavigationGuard = (to) => {
-		if (hasEdits.value && !to.path.startsWith(path)) {
+		const matchesPathPrefix = opts?.ignorePrefix ? to.path.startsWith(unref(opts.ignorePrefix)) : false;
+
+		if (hasEdits.value && !to.path.startsWith(path) && !matchesPathPrefix) {
 			confirmLeave.value = true;
 			leaveTo.value = to.fullPath;
 			return false;

app/src/modules/settings/routes/flows/components/operation-detail.vue

@@ -100,6 +100,7 @@ const options = ref<Record<string, any>>(props.operation?.options ?? {});
 const operationType = ref<string | undefined>(props.operation?.type);
 const operationKey = ref<string | null>(props.operation?.key ?? null);
 const operationName = ref<string | null>(props.operation?.name ?? null);
+
 const saving = ref(false);
 
 const isOperationKeyUnique = computed(
@@ -113,6 +114,19 @@ const saveDisabled = computed(() => {
 	return !operationType.value || !isOperationKeyUnique.value;
 });
 
+watch(
+	() => props.operation,
+	(operation) => {
+		if (!operation) return;
+
+		options.value = operation.options;
+		operationType.value = operation.type;
+		operationKey.value = operation.key;
+		operationName.value = operation.name;
+	},
+	{ immediate: true, deep: true }
+);
+
 watch(operationType, () => {
 	options.value = {};
 });

app/src/modules/settings/routes/flows/flow.vue

@@ -168,7 +168,7 @@
 		</v-dialog>
 
 		<router-view
-			:operation="panels.find((panel) => panel.id === props.operationId)"
+			:operation="currentOperation"
 			:existing-operation-keys="exitingOperationKeys"
 			:flow="flow"
 			@save="stageOperation"
@@ -316,6 +316,12 @@ const panels = computed(() => {
 	return panels;
 });
 
+const currentOperation = computed(() => {
+	return panels.value.find((panel) => {
+		return panel.id === props.operationId;
+	});
+});
+
 const parentPanels = computed(() => {
 	const parents = panels.value.reduce<Record<string, ParentInfo>>((acc, panel) => {
 		if (panel.resolve)
@@ -649,7 +655,9 @@ function getNearAttachment(pos: Vector2) {
 
 const hasEdits = computed(() => stagedPanels.value.length > 0 || panelsToBeDeleted.value.length > 0);
 
-const { confirmLeave, leaveTo } = useEditsGuard(hasEdits);
+const { confirmLeave, leaveTo } = useEditsGuard(hasEdits, {
+	ignorePrefix: computed(() => `/settings/flows/${props.primaryKey}/`),
+});
 
 const confirmCancel = ref(false);