feat(core): block workflow update on interim change (#4397)

* ⚡ Add `updatedAt` to store

* ⚡ Set `updatedAt` in store

* 👕 Update FE types

* 👕 Update BE types

* ⚡ Set `updatedAt` on workflow open

* ⚡ Add endpoint check

* ⚡ Add first update check

* 🔥 Remove log

* ⚡ Simplify check

* ⚡ Make `makeWorkflow` more flexible

* 🗃️ Make `updatedAt` default consistent

* 🧪 Adjust tests checking for `updatedAt`

* 🧪 Add tests for interim changes block

* ✏️ Remove unneeded quotes

* ⏪ Simplify without using `-1`

* 👕 Simplify interfaces

* 🐛 Fix calls to `setWorkflowUpdatedAt` setter

* :track: Move update to API call

* ⚡ Restrict check to multiple users only

* 🧪 Add more tests

* 🐛 Account for activation outside of canvas

* ✏️ Add warning comment

* 🔥 Remove unneeded check

* ⏪ Revert to `new Date()` for `-1`

* 🐛 Fix display for never updated

packages/editor-ui/src/Interface.ts

@@ -268,6 +268,7 @@ export interface IWorkflowData {
 	settings?: IWorkflowSettings;
 	tags?: string[];
 	pinData?: IPinData;
+	updatedAt?: string;
 }
 
 export interface IWorkflowDataUpdate {
@@ -279,6 +280,7 @@ export interface IWorkflowDataUpdate {
 	active?: boolean;
 	tags?: ITag[] | string[]; // string[] when store or requested, ITag[] from API response
 	pinData?: IPinData;
+	updatedAt?: string;
 }
 
 export interface IWorkflowToShare extends IWorkflowDataUpdate {

packages/editor-ui/src/components/WorkflowCard.vue

@@ -10,7 +10,15 @@
 			</template>
 			<div :class="$style.cardDescription">
 				<n8n-text color="text-light" size="small">
-					<span v-show="data">{{$locale.baseText('workflows.item.updated')}} <time-ago :date="data.updatedAt" /> | </span>
+					<span v-show="data">
+						<span v-if="data.updatedAt === -1">
+							{{ $locale.baseText('workflows.item.neverUpdated') }} |
+						</span>
+						<span v-else>
+							{{ $locale.baseText('workflows.item.updated') }}
+							<time-ago :date="data.updatedAt" /> |
+						</span>
+					</span>
 					<span v-show="data" class="mr-2xs">{{$locale.baseText('workflows.item.created')}} {{ formattedCreatedAtDate }} </span>
 					<span v-if="areTagsEnabled && data.tags && data.tags.length > 0" v-show="data">
 					<n8n-tags

packages/editor-ui/src/components/WorkflowSettings.vue

@@ -519,7 +519,8 @@ export default mixins(
 			this.isLoading = true;
 
 			try {
-				await this.restApi().updateWorkflow(this.$route.params.name, data);
+				const workflow = await this.restApi().updateWorkflow(this.$route.params.name, data);
+				this.$store.commit('setWorkflowUpdatedAt', workflow.updatedAt);
 			} catch (error) {
 				this.$showError(
 					error,

packages/editor-ui/src/components/mixins/workflowHelpers.ts

@@ -400,6 +400,7 @@ export const workflowHelpers = mixins(
 					active: this.$store.getters.isActive,
 					settings: this.$store.getters.workflowSettings,
 					tags: this.$store.getters.workflowTags,
+					updatedAt: this.$store.getters.workflowUpdatedAt,
 				};
 
 				const workflowId = this.$store.getters.workflowId;
@@ -660,6 +661,9 @@ export const workflowHelpers = mixins(
 				const isCurrentWorkflow = workflowId === this.$store.getters.workflowId;
 				if (isCurrentWorkflow) {
 					data = await this.getWorkflowDataToSave();
+				} else {
+					const { updatedAt } = await this.restApi().getWorkflow(workflowId);
+					data.updatedAt = updatedAt as string;
 				}
 
 				if (active !== undefined) {
@@ -667,6 +671,7 @@ export const workflowHelpers = mixins(
 				}
 
 				const workflow = await this.restApi().updateWorkflow(workflowId, data);
+				this.$store.commit('setWorkflowUpdatedAt', workflow.updatedAt);
 
 				if (isCurrentWorkflow) {
 					this.$store.commit('setActive', !!workflow.active);
@@ -714,6 +719,7 @@ export const workflowHelpers = mixins(
 
 					this.$store.commit('setStateDirty', false);
 					this.$store.commit('removeActiveAction', 'workflowSaving');
+					this.$store.commit('setWorkflowUpdatedAt', workflowData.updatedAt);
 					this.$externalHooks().run('workflow.afterUpdate', { workflowData });
 
 					return true;

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1287,6 +1287,7 @@
 	"workflows.item.open": "Open",
 	"workflows.item.duplicate": "Duplicate",
 	"workflows.item.delete": "Delete",
+	"workflows.item.neverUpdated": "Never updated",
 	"workflows.item.updated": "Last updated",
 	"workflows.item.created": "Created",
 	"workflows.item.owner": "Owner",

packages/editor-ui/src/store.ts

@@ -465,6 +465,13 @@ export const store = new Vuex.Store({
 			state.workflow.id = id;
 		},
 
+		/**
+		 * @warning Do not mutate `updatedAt` in `state.workflow` client-side.
+		 */
+		setWorkflowUpdatedAt (state, updatedAt: string) {
+			state.workflow.updatedAt = updatedAt;
+		},
+
 		// Name
 		setWorkflowName(state, data) {
 			if (data.setStateDirty === true) {
@@ -1008,6 +1015,9 @@ export const store = new Vuex.Store({
 		workflowId: (state): string => {
 			return state.workflow.id;
 		},
+		workflowUpdatedAt (state): string | number {
+			return state.workflow.updatedAt;
+		},
 
 		workflowSettings: (state): IWorkflowSettings => {
 			if (state.workflow.settings === undefined) {

packages/editor-ui/src/views/NodeView.vue

@@ -715,6 +715,7 @@ export default mixins(
 
 				this.$store.commit('setActive', data.active || false);
 				this.$store.commit('setWorkflowId', workflowId);
+				this.$store.commit('setWorkflowUpdatedAt', data.updatedAt);
 				this.$store.commit('setWorkflowName', { newName: data.name, setStateDirty: false });
 				this.$store.commit('setWorkflowSettings', data.settings || {});
 				this.$store.commit('setWorkflowPinData', data.pinData || {});