✨ Add tagging of workflows (#1647)

* clean up dropdown

* clean up focusoncreate

* ⚡ Ignore mistaken ID in POST /workflows

* ⚡ Fix undefined tag ID in PATCH /workflows

* ⚡ Shorten response for POST /tags

* remove scss mixins

* clean up imports

* ⚡ Implement validation with class-validator

* address ivan's comments

* implement modals

* Fix lint issues

* fix disabling shortcuts

* fix focus issues

* fix focus issues

* fix focus issues with modal

* fix linting issues

* use dispatch

* use constants for modal keys

* fix focus

* fix lint issues

* remove unused prop

* add modal root

* fix lint issues

* remove unused methods

* fix shortcut

* remove max width

* ⚡ Fix duplicate entry error for pg and MySQL

* update rename messaging

* update order of buttons

* fix firefox overflow on windows

* fix dropdown height

* 🔨 refactor tag crud controllers

* 🧹 remove unused imports

* use variable for number of items

* fix dropdown spacing

* ⚡ Restore type to fix build

* ⚡ Fix post-refactor PATCH /workflows/:id

* ⚡ Fix PATCH /workflows/:id for zero tags

* ⚡ Fix usage count becoming stringified

* address max's comments

* fix filter spacing

* fix blur bug

* address most of ivan's comments

* address tags type concern

* remove defaults

* ⚡ return tag id as string

* 🔨 add hooks to tag CUD operations

* 🏎 simplify timestamp pruning

* remove blur event

* fix onblur bug

* ⚡ Fix fs import to fix build

* address max's comments

* implement responsive tag container

* fix lint issues

* Set default dates in entities

* 👕 Fix lint in migrations

* update tag limits

* address ivan's comments

* remove rename, refactor header, implement new designs for save, remove responsive tag container

* update styling

* update styling

* implement responsive tag container

* implement header tags edit

* implement header tags edit

* fix lint issues

* implement expandable input

* minor fixes

* minor fixes

* use variable

* rename save as

* duplicate fixes

* ⚡ Implement unique workflow names

* ⚡ Create /workflows/new endpoint

* minor edit fixes

* lint fixes

* style fixes

* hook up saving name

* hook up tags

* clean up impl

* fix dirty state bug

* update limit

* update notification messages

* on click outside

* fix minor bug with count

* lint fixes

* ⚡ Add query string params to /workflows/new

* handle minor edge cases

* handle minor edge cases

* handle minor bugs; fix firefox dropdown issue

* Fix min width

* apply tags only after api success

* remove count fix

* 🚧 Adjust to new qs requirements

* clean up workflow tags impl, fix tags delete bug

* fix minor issue

* fix minor spacing issue

* disable wrap for ops

* fix viewport root; save on click in dropdown

* save button loading when saving name/tags

* implement max width on tags container

* implement cleaner create experience

* disable edit while updating

* codacy hex color

* refactor tags container

* fix clickability

* fix workflow open and count

* clean up structure

* fix up lint issues

* ⚡ Create migrations for unique workflow names

* fix button size

* increase workflow name limit for larger screen

* tslint fixes

* disable responsiveness for workflow modal

* rename event

* change min width for tags

* clean up pr

* ⚡ Adjust quotes in MySQL migration

* ⚡ Adjust quotes in Postgres migration

* address max's comments on styles

* remove success toasts

* add hover mode to name

* minor fixes

* refactor name preview

* fix name input not to jiggle

* finish up name input

* Fix up add tags

* clean up param

* clean up scss

* fix resizing name

* fix resizing name

* fix resize bug

* clean up edit spacing

* ignore on esc

* fix input bug

* focus input on clear

* build

* fix up add tags clickablity

* remove scrollbars

* move into folders

* clean up multiple patch req

* remove padding top from edit

* update tags on enter

* build

* rollout blur on enter behavior

* rollout esc behavior

* fix tags bug when duplicating tags

* move key to reload tags

* update header spacing

* build

* update hex case

* refactor workflow title

* remove unusued prop

* keep focus on error, fix bug on error

* Fix bug with name / tags toggle on error

* impl creating new workflow name

* ⚡ Refactor endpoint per new guidelines

* support naming endpoint

* ⚡ Refactor to support numeric suffixes

* 👕 Lint migrations for unique workflow names

* ⚡ Add migrations set default dates to indexes

* fix connection push bug

* ⚡ Lowercase default workflow name

* ⚡ Add prefixes to set default dates migration

* ⚡ Fix indentation on default dates migrations

* ⚡ Add temp ts-ignore for unrelated change

* ⚡ Adjust default dates migration for MySQL

Remove change to data column in credentials_entity, already covered by Omar's migration. Also, fix quotes from table prefix addition.

* ⚡ Adjust quotes in dates migration for PG

* fix safari color bug

* fix count bug

* fix scroll bugs in dropdown

* expand filter size

* apply box-sizing to main header

* update workflow names in executions to be wrapped by quotes

* fix bug where key is same in dropdown

* fix firefox bug

* move up push connection session

* 🔨 Remove mistakenly added nullable property

* 🔥 Remove unneeded index drop-create (PG)

* 🔥 Remove unneeded table copying

* ⚡ Merge dates migration with tags migration

* 🔨 Refactor endpoint and make wf name env

* dropdown colors in firefox

* update colors to use variables

* update thumb color

* change error message

* remove 100 char maximum

* fix bug with saving tags dropdowns multiple times

* update error message when no name

* ⚡ Update name missing toast message

* ⚡ Update workflow already exists message

* disable saving for executions

* fix bug causing modal to close

* make tags in workflow open clickable

* increase workflow limit to 3

* remove success notifications

* update header spacing

* escape tag names

* update tag and table colors

* remove tags from export

* build

* clean up push connection dependencies

* address ben's comments

* revert tags optional interface

* address comments

* update duplicate message

* build

* fix eol

* add one more eol

* ⚡ Update comment

* add hover style for workflow open, fix up font weight

Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

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

@@ -0,0 +1,40 @@
+import Vue from 'vue';
+
+function broadcast(componentName: string, eventName: string, params: any) { // tslint:disable-line:no-any
+	// @ts-ignore
+	(this as Vue).$children.forEach(child => {
+		const name = child.$options.name;
+
+		if (name === componentName) {
+			// @ts-ignore
+			child.$emit.apply(child, [eventName].concat(params));
+		} else {
+			// @ts-ignore
+			broadcast.apply(child, [componentName, eventName].concat([params]));
+		}
+	});
+}
+
+export default Vue.extend({
+	methods: {
+		$dispatch(componentName: string, eventName: string, params: any) { // tslint:disable-line:no-any
+			let parent = this.$parent || this.$root;
+			let name = parent.$options.name;
+
+			while (parent && (!name || name !== componentName)) {
+				parent = parent.$parent;
+
+				if (parent) {
+					name = parent.$options.name;
+				}
+			}
+			if (parent) {
+				// @ts-ignore
+				parent.$emit.apply(parent, [eventName].concat(params));
+			}
+		},
+		$broadcast(componentName: string, eventName: string, params: any) { // tslint:disable-line:no-any
+			broadcast.call(this, componentName, eventName, params);
+		},
+	},
+});

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

@@ -1,11 +1,11 @@
-import { IExternalHooks } from '@/Interface';
+import { IExternalHooks, IRootState } from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
 import Vue from 'vue';
 import { Store } from 'vuex';
 
 export async function runExternalHook(
 	eventName: string,
-	store: Store<IDataObject>,
+	store: Store<IRootState>,
 	metadata?: IDataObject,
 ) {
 	// @ts-ignore

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

@@ -2,6 +2,7 @@ import dateformat from 'dateformat';
 
 import { showMessage } from '@/components/mixins/showMessage';
 import { MessageType } from '@/Interface';
+import { debounce } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
 
@@ -9,6 +10,7 @@ export const genericHelpers = mixins(showMessage).extend({
 	data () {
 		return {
 			loadingService: null as any | null, // tslint:disable-line:no-any
+			debouncedFunctions: [] as any[], // tslint:disable-line:no-any
 		};
 	},
 	computed: {
@@ -73,6 +75,19 @@ export const genericHelpers = mixins(showMessage).extend({
 			}
 		},
 
+		async callDebounced (...inputParameters: any[]): Promise<void> { // tslint:disable-line:no-any
+			const functionName = inputParameters.shift() as string;
+			const debounceTime = inputParameters.shift() as number;
+
+			// @ts-ignore
+			if (this.debouncedFunctions[functionName] === undefined) {
+				// @ts-ignore
+				this.debouncedFunctions[functionName] = debounce(this[functionName], debounceTime, { leading: true });
+			}
+			// @ts-ignore
+			await this.debouncedFunctions[functionName].apply(this, inputParameters);
+		},
+
 		async confirmMessage (message: string, headline: string, type = 'warning' as MessageType, confirmButtonText = 'OK', cancelButtonText = 'Cancel'): Promise<boolean> {
 			try {
 				await this.$confirm(message, headline, {

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

@@ -12,6 +12,7 @@ import { externalHooks } from '@/components/mixins/externalHooks';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
 import { titleChange } from '@/components/mixins/titleChange';
+import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
 
@@ -20,6 +21,7 @@ export const pushConnection = mixins(
 	nodeHelpers,
 	showMessage,
 	titleChange,
+	workflowHelpers,
 )
 	.extend({
 		data () {
@@ -227,7 +229,7 @@ export const pushConnection = mixins(
 
 						runDataExecutedErrorMessage = errorMessage;
 
-						this.$titleSet(workflow.name, 'ERROR');
+						this.$titleSet(workflow.name as string, 'ERROR');
 						this.$showMessage({
 							title: 'Problem executing workflow',
 							message: errorMessage,
@@ -235,7 +237,7 @@ export const pushConnection = mixins(
 						});
 					} else {
 						// Workflow did execute without a problem
-						this.$titleSet(workflow.name, 'IDLE');
+						this.$titleSet(workflow.name as string, 'IDLE');
 						this.$showMessage({
 							title: 'Workflow got executed',
 							message: 'Workflow did get executed successfully!',

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

@@ -30,6 +30,7 @@ import {
 	INodePropertyOptions,
 	INodeTypeDescription,
 } from 'n8n-workflow';
+import { makeRestApiRequest } from '@/api/helpers';
 
 /**
  * Unflattens the Execution data.
@@ -55,75 +56,13 @@ function unflattenExecutionData (fullExecutionData: IExecutionFlattedResponse):
 	return returnData;
 }
 
-export class ResponseError extends Error {
-	// The HTTP status code of response
-	httpStatusCode?: number;
-
-	// The error code in the resonse
-	errorCode?: number;
-
-	// The stack trace of the server
-	serverStackTrace?: string;
-
-	/**
-	 * Creates an instance of ResponseError.
-	 * @param {string} message The error message
-	 * @param {number} [errorCode] The error code which can be used by frontend to identify the actual error
-	 * @param {number} [httpStatusCode] The HTTP status code the response should have
-	 * @param {string} [stack] The stack trace
-	 * @memberof ResponseError
-	 */
-	constructor (message: string, errorCode?: number, httpStatusCode?: number, stack?: string) {
-		super(message);
-		this.name = 'ResponseError';
-
-		if (errorCode) {
-			this.errorCode = errorCode;
-		}
-		if (httpStatusCode) {
-			this.httpStatusCode = httpStatusCode;
-		}
-		if (stack) {
-			this.serverStackTrace = stack;
-		}
-	}
-}
-
 export const restApi = Vue.extend({
 	methods: {
 		restApi (): IRestApi {
 			const self = this;
 			return {
 				async makeRestApiRequest (method: Method, endpoint: string, data?: IDataObject): Promise<any> { // tslint:disable-line:no-any
-					try {
-						const options: AxiosRequestConfig = {
-							method,
-							url: endpoint,
-							baseURL: self.$store.getters.getRestUrl,
-							headers: {
-								sessionid: self.$store.getters.sessionId,
-							},
-						};
-						if (['PATCH', 'POST', 'PUT'].includes(method)) {
-							options.data = data;
-						} else {
-							options.params = data;
-						}
-
-						const response = await axios.request(options);
-						return response.data.data;
-					} catch (error) {
-						if (error.message === 'Network Error') {
-							throw new ResponseError('API-Server can not be reached. It is probably down.');
-						}
-
-						const errorResponseData = error.response.data;
-						if (errorResponseData !== undefined && errorResponseData.message !== undefined) {
-							throw new ResponseError(errorResponseData.message, errorResponseData.code, error.response.status, errorResponseData.stack);
-						}
-
-						throw error;
-					}
+					return makeRestApiRequest(self.$store.getters.getRestApiContext, method, endpoint, data);
 				},
 				getActiveWorkflows: (): Promise<string[]> => {
 					return self.restApi().makeRestApiRequest('GET', `/active`);
@@ -179,7 +118,7 @@ export const restApi = Vue.extend({
 				},
 
 				// Creates new credentials
-				createNewWorkflow: (sendData: IWorkflowData): Promise<IWorkflowDb> => {
+				createNewWorkflow: (sendData: IWorkflowDataUpdate): Promise<IWorkflowDb> => {
 					return self.restApi().makeRestApiRequest('POST', `/workflows`, sendData);
 				},
 

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

@@ -28,6 +28,7 @@ import {
 	IWorkflowDb,
 	IWorkflowDataUpdate,
 	XYPositon,
+	ITag,
 } from '../../Interface';
 
 import { externalHooks } from '@/components/mixins/externalHooks';
@@ -238,6 +239,7 @@ export const workflowHelpers = mixins(
 					connections: workflowConnections,
 					active: this.$store.getters.isActive,
 					settings: this.$store.getters.workflowSettings,
+					tags: this.$store.getters.workflowTags,
 				};
 
 				const workflowId = this.$store.getters.workflowId;
@@ -383,86 +385,43 @@ export const workflowHelpers = mixins(
 				return returnData['__xxxxxxx__'];
 			},
 
-			// Saves the currently loaded workflow to the database.
-			async saveCurrentWorkflow (withNewName = false) {
+			async saveCurrentWorkflow({name, tags}: {name?: string, tags?: string[]} = {}): Promise<boolean> {
 				const currentWorkflow = this.$route.params.name;
-				let workflowName: string | null | undefined = '';
-				if (currentWorkflow === undefined || withNewName === true) {
-					// Currently no workflow name is set to get it from user
-					workflowName = await this.$prompt(
-						'Enter workflow name',
-						'Name',
-						{
-							confirmButtonText: 'Save',
-							cancelButtonText: 'Cancel',
-						},
-					)
-						.then((data) => {
-							// @ts-ignore
-							return data.value;
-						})
-						.catch(() => {
-							// User did cancel
-							return undefined;
-						});
-
-					if (workflowName === undefined) {
-						// User did cancel
-						return;
-					} else if (['', null].includes(workflowName)) {
-						// User did not enter a name
-						this.$showMessage({
-							title: 'Name missing',
-							message: `No name for the workflow got entered and could so not be saved!`,
-							type: 'error',
-						});
-						return;
-					}
+				if (!currentWorkflow) {
+					return this.saveAsNewWorkflow({name, tags});
 				}
 
+				// Workflow exists already so update it
 				try {
 					this.$store.commit('addActiveAction', 'workflowSaving');
 
-					let workflowData: IWorkflowData = await this.getWorkflowDataToSave();
+					const workflowDataRequest: IWorkflowDataUpdate = await this.getWorkflowDataToSave();
 
-					if (currentWorkflow === undefined || withNewName === true) {
-						// Workflow is new or is supposed to get saved under a new name
-						// so create a new entry in database
-						workflowData.name = workflowName!.trim() as string;
-
-						if (withNewName === true) {
-							// If an existing workflow gets resaved with a new name
-							// make sure that the new ones is not active
-							workflowData.active = false;
-						}
-
-						workflowData = await this.restApi().createNewWorkflow(workflowData);
-
-						this.$store.commit('setActive', workflowData.active || false);
-						this.$store.commit('setWorkflowId', workflowData.id);
-						this.$store.commit('setWorkflowName', {newName: workflowData.name, setStateDirty: false});
-						this.$store.commit('setWorkflowSettings', workflowData.settings || {});
-						this.$store.commit('setStateDirty', false);
-					} else {
-						// Workflow exists already so update it
-						await this.restApi().updateWorkflow(currentWorkflow, workflowData);
+					if (name) {
+						workflowDataRequest.name = name.trim();
 					}
 
-					if (this.$route.params.name !== workflowData.id) {
-						this.$router.push({
-							name: 'NodeViewExisting',
-							params: { name: workflowData.id as string, action: 'workflowSave' },
-						});
+					if (tags) {
+						workflowDataRequest.tags = tags;
+					}
+
+					const workflowData = await this.restApi().updateWorkflow(currentWorkflow, workflowDataRequest);
+
+					if (name) {
+						this.$store.commit('setWorkflowName', {newName: workflowData.name});
+					}
+
+					if (tags) {
+						const createdTags = (workflowData.tags || []) as ITag[];
+						const tagIds = createdTags.map((tag: ITag): string => tag.id);
+						this.$store.commit('setWorkflowTagIds', tagIds);
 					}
 
-					this.$store.commit('removeActiveAction', 'workflowSaving');
 					this.$store.commit('setStateDirty', false);
-					this.$showMessage({
-						title: 'Workflow saved',
-						message: `The workflow "${workflowData.name}" got saved!`,
-						type: 'success',
-					});
+					this.$store.commit('removeActiveAction', 'workflowSaving');
 					this.$externalHooks().run('workflow.afterUpdate', { workflowData });
+
+					return true;
 				} catch (e) {
 					this.$store.commit('removeActiveAction', 'workflowSaving');
 
@@ -471,6 +430,58 @@ export const workflowHelpers = mixins(
 						message: `There was a problem saving the workflow: "${e.message}"`,
 						type: 'error',
 					});
+
+					return false;
+				}
+			},
+
+			async saveAsNewWorkflow ({name, tags}: {name?: string, tags?: string[]} = {}): Promise<boolean> {
+				try {
+					this.$store.commit('addActiveAction', 'workflowSaving');
+
+					const workflowDataRequest: IWorkflowDataUpdate = await this.getWorkflowDataToSave();
+					// make sure that the new ones are not active
+					workflowDataRequest.active = false;
+
+					if (name) {
+						workflowDataRequest.name = name.trim();
+					}
+
+					if (tags) {
+						workflowDataRequest.tags = tags;
+					}
+					const workflowData = await this.restApi().createNewWorkflow(workflowDataRequest);
+
+					this.$store.commit('setActive', workflowData.active || false);
+					this.$store.commit('setWorkflowId', workflowData.id);
+					this.$store.commit('setWorkflowName', {newName: workflowData.name, setStateDirty: false});
+					this.$store.commit('setWorkflowSettings', workflowData.settings || {});
+					this.$store.commit('setStateDirty', false);
+
+					const createdTags = (workflowData.tags || []) as ITag[];
+					const tagIds = createdTags.map((tag: ITag): string => tag.id);
+					this.$store.commit('setWorkflowTagIds', tagIds);
+
+					this.$router.push({
+						name: 'NodeViewExisting',
+						params: { name: workflowData.id as string, action: 'workflowSave' },
+					});
+
+					this.$store.commit('removeActiveAction', 'workflowSaving');
+					this.$store.commit('setStateDirty', false);
+					this.$externalHooks().run('workflow.afterUpdate', { workflowData });
+
+					return true;
+				} catch (e) {
+					this.$store.commit('removeActiveAction', 'workflowSaving');
+
+					this.$showMessage({
+						title: 'Problem saving workflow',
+						message: `There was a problem saving the workflow: "${e.message}"`,
+						type: 'error',
+					});
+
+					return false;
 				}
 			},