✨ 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/views/NodeView.vue

@@ -38,7 +38,7 @@
 			@nodeTypeSelected="nodeTypeSelected"
 			@closeNodeCreator="closeNodeCreator"
 			></node-creator>
-		<div class="zoom-menu">
+		<div :class="{ 'zoom-menu': true, expanded: !sidebarMenuCollapsed }">
 			<button @click="setZoom('in')" class="button-white" title="Zoom In">
 				<font-awesome-icon icon="search-plus"/>
 			</button>
@@ -102,6 +102,7 @@
 				<font-awesome-icon icon="trash" class="clear-execution-icon" />
 			</el-button>
 		</div>
+		<Modals />
 	</div>
 </template>
 
@@ -126,6 +127,7 @@ import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowRun } from '@/components/mixins/workflowRun';
 
 import DataDisplay from '@/components/DataDisplay.vue';
+import Modals from '@/components/Modals.vue';
 import Node from '@/components/Node.vue';
 import NodeCreator from '@/components/NodeCreator.vue';
 import NodeSettings from '@/components/NodeSettings.vue';
@@ -133,7 +135,6 @@ import RunData from '@/components/RunData.vue';
 
 import mixins from 'vue-typed-mixins';
 import { v4 as uuidv4} from 'uuid';
-import { debounce } from 'lodash';
 import axios from 'axios';
 import {
 	IConnection,
@@ -163,7 +164,9 @@ import {
 	IWorkflowDataUpdate,
 	XYPositon,
 	IPushDataExecutionFinished,
+	ITag,
 } from '../Interface';
+import { mapGetters } from 'vuex';
 
 export default mixins(
 	copyPaste,
@@ -181,6 +184,7 @@ export default mixins(
 		name: 'NodeView',
 		components: {
 			DataDisplay,
+			Modals,
 			Node,
 			NodeCreator,
 			NodeSettings,
@@ -234,6 +238,9 @@ export default mixins(
 			}
 		},
 		computed: {
+			...mapGetters('ui', [
+				'sidebarMenuCollapsed',
+			]),
 			activeNode (): INodeUi | null {
 				return this.$store.getters.activeNode;
 			},
@@ -303,7 +310,6 @@ export default mixins(
 				lastClickPosition: [450, 450] as XYPositon,
 				nodeViewScale: 1,
 				ctrlKeyPressed: false,
-				debouncedFunctions: [] as any[], // tslint:disable-line:no-any
 				stopExecutionInProgress: false,
 			};
 		},
@@ -314,18 +320,6 @@ export default mixins(
 			document.removeEventListener('keyup', this.keyUp);
 		},
 		methods: {
-			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);
-			},
 			clearExecutionData () {
 				this.$store.commit('setWorkflowExecutionData', null);
 				this.updateNodesExecutionIssues();
@@ -378,6 +372,12 @@ export default mixins(
 				this.$store.commit('setWorkflowName', {newName: data.name, setStateDirty: false});
 				this.$store.commit('setWorkflowSettings', data.settings || {});
 
+				const tags = (data.tags || []) as ITag[];
+				this.$store.commit('tags/upsertTags', tags);
+
+				const tagIds = tags.map((tag) => tag.id);
+				this.$store.commit('setWorkflowTagIds', tagIds || []);
+
 				await this.addNodes(data.nodes, data.connections);
 
 				this.$store.commit('setStateDirty', false);
@@ -440,6 +440,10 @@ export default mixins(
 						return;
 					}
 				}
+				const anyModalsOpen = this.$store.getters['ui/anyModalsOpen'];
+				if (anyModalsOpen) {
+					return;
+				}
 
 				if (e.key === 'd') {
 					this.callDebounced('deactivateSelectedNode', 350);
@@ -485,7 +489,7 @@ export default mixins(
 					e.stopPropagation();
 					e.preventDefault();
 
-					this.$root.$emit('openWorkflowDialog');
+					this.$store.dispatch('ui/openWorklfowOpenModal');
 				} else if (e.key === 'n' && this.isCtrlKeyPressed(e) === true && e.altKey === true) {
 					// Create a new workflow
 					e.stopPropagation();
@@ -503,7 +507,9 @@ export default mixins(
 					e.stopPropagation();
 					e.preventDefault();
 
-					this.$store.commit('setStateDirty', false);
+					if (this.isReadOnly) {
+						return;
+					}
 
 					this.callDebounced('saveCurrentWorkflow', 1000);
 				} else if (e.key === 'Enter') {
@@ -1392,6 +1398,8 @@ export default mixins(
 			},
 			async newWorkflow (): Promise<void> {
 				await this.resetWorkspace();
+				await this.$store.dispatch('workflows/setNewWorkflowName');
+				this.$store.commit('setStateDirty', false);
 
 				// Create start node
 				const defaultNodes = [
@@ -1440,6 +1448,9 @@ export default mixins(
 					}
 					if (workflowId !== null) {
 						const workflow = await this.restApi().getWorkflow(workflowId);
+						if (!workflow) {
+							throw new Error('Could not find workflow');
+						}
 						this.$titleSet(workflow.name, 'IDLE');
 						// Open existing workflow
 						await this.openWorkflow(workflowId);
@@ -1988,6 +1999,7 @@ export default mixins(
 				this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
 				this.$store.commit('setWorkflowName', {newName: '', setStateDirty: false});
 				this.$store.commit('setWorkflowSettings', {});
+				this.$store.commit('setWorkflowTagIds', []);
 
 				this.$store.commit('setActiveExecutionId', null);
 				this.$store.commit('setExecutingNode', null);
@@ -2097,14 +2109,20 @@ export default mixins(
 <style scoped lang="scss">
 
 .zoom-menu {
+	$--zoom-menu-margin: 5;
+
 	position: fixed;
-	left: 70px;
+	left: $--sidebar-width + $--zoom-menu-margin;
 	width: 200px;
 	bottom: 45px;
 	line-height: 25px;
 	z-index: 18;
 	color: #444;
 	padding-right: 5px;
+
+	&.expanded {
+		left: $--sidebar-expanded-width + $--zoom-menu-margin;
+	}
 }
 
 .node-creator-button {