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

@@ -4,12 +4,11 @@
 		<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
 		<credentials-list :dialogVisible="credentialOpenDialogVisible" @closeDialog="closeCredentialOpenDialog"></credentials-list>
 		<credentials-edit :dialogVisible="credentialNewDialogVisible" @closeDialog="closeCredentialNewDialog"></credentials-edit>
-		<workflow-open @openWorkflow="openWorkflow" :dialogVisible="workflowOpenDialogVisible" @closeDialog="closeWorkflowOpenDialog"></workflow-open>
 		<workflow-settings :dialogVisible="workflowSettingsDialogVisible" @closeDialog="closeWorkflowSettingsDialog"></workflow-settings>
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
 		<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
-			<div id="collapse-change-button" class="clickable" @click="isCollapsed=!isCollapsed">
+			<div id="collapse-change-button" class="clickable" @click="toggleCollapse">
 				<font-awesome-icon icon="angle-right" class="icon" />
 			</div>
 			<el-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
@@ -41,22 +40,16 @@
 							<span slot="title" class="item-title">Open</span>
 						</template>
 					</el-menu-item>
-					<el-menu-item index="workflow-save" :disabled="!currentWorkflow">
+					<el-menu-item index="workflow-save">
 						<template slot="title">
 							<font-awesome-icon icon="save"/>
 							<span slot="title" class="item-title">Save</span>
 						</template>
 					</el-menu-item>
-					<el-menu-item index="workflow-save-as">
+					<el-menu-item index="workflow-duplicate" :disabled="!currentWorkflow">
 						<template slot="title">
 							<font-awesome-icon icon="copy"/>
-							<span slot="title" class="item-title">Save As</span>
-						</template>
-					</el-menu-item>
-					<el-menu-item index="workflow-rename" :disabled="!currentWorkflow">
-						<template slot="title">
-							<font-awesome-icon icon="edit"/>
-							<span slot="title" class="item-title">Rename</span>
+							<span slot="title" class="item-title">Duplicate</span>
 						</template>
 					</el-menu-item>
 					<el-menu-item index="workflow-delete" :disabled="!currentWorkflow">
@@ -143,7 +136,6 @@
 
 <script lang="ts">
 
-import Vue from 'vue';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 
 import {
@@ -157,7 +149,6 @@ import About from '@/components/About.vue';
 import CredentialsEdit from '@/components/CredentialsEdit.vue';
 import CredentialsList from '@/components/CredentialsList.vue';
 import ExecutionsList from '@/components/ExecutionsList.vue';
-import WorkflowOpen from '@/components/WorkflowOpen.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
 
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -170,6 +161,7 @@ import { workflowRun } from '@/components/mixins/workflowRun';
 import { saveAs } from 'file-saver';
 
 import mixins from 'vue-typed-mixins';
+import { mapGetters } from 'vuex';
 import MenuItemsIterator from './MainSidebarMenuItemsIterator.vue';
 
 const helpMenuItems: IMenuItem[] = [
@@ -220,7 +212,6 @@ export default mixins(
 			CredentialsEdit,
 			CredentialsList,
 			ExecutionsList,
-			WorkflowOpen,
 			WorkflowSettings,
 			MenuItemsIterator,
 		},
@@ -229,17 +220,18 @@ export default mixins(
 				aboutDialogVisible: false,
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				isCollapsed: true,
 				credentialNewDialogVisible: false,
 				credentialOpenDialogVisible: false,
 				executionsListDialogVisible: false,
 				stopExecutionInProgress: false,
-				workflowOpenDialogVisible: false,
 				workflowSettingsDialogVisible: false,
 				helpMenuItems,
 			};
 		},
 		computed: {
+			...mapGetters('ui', {
+				isCollapsed: 'sidebarMenuCollapsed',
+			}),
 			exeuctionId (): string | undefined {
 				return this.$route.params.id;
 			},
@@ -294,6 +286,9 @@ export default mixins(
 			},
 		},
 		methods: {
+			toggleCollapse () {
+				this.$store.commit('ui/toggleSidebarMenuCollapse');
+			},
 			clearExecutionData () {
 				this.$store.commit('setWorkflowExecutionData', null);
 				this.updateNodesExecutionIssues();
@@ -301,9 +296,6 @@ export default mixins(
 			closeAboutDialog () {
 				this.aboutDialogVisible = false;
 			},
-			closeWorkflowOpenDialog () {
-				this.workflowOpenDialogVisible = false;
-			},
 			closeWorkflowSettingsDialog () {
 				this.workflowSettingsDialogVisible = false;
 			},
@@ -316,6 +308,9 @@ export default mixins(
 			closeCredentialNewDialog () {
 				this.credentialNewDialogVisible = false;
 			},
+			openTagManager() {
+				this.$store.dispatch('ui/openTagsManagerModal');
+			},
 			async stopExecution () {
 				const executionId = this.$store.getters.activeExecutionId;
 				if (executionId === null) {
@@ -342,7 +337,7 @@ export default mixins(
 					params: { name: workflowId },
 				});
 
-				this.workflowOpenDialogVisible = false;
+				this.$store.commit('ui/closeTopModal');
 			},
 			async handleFileImport () {
 				const reader = new FileReader();
@@ -372,7 +367,7 @@ export default mixins(
 			},
 			async handleSelect (key: string, keyPath: string) {
 				if (key === 'workflow-open') {
-					this.workflowOpenDialogVisible = true;
+					this.$store.dispatch('ui/openWorklfowOpenModal');
 				} else if (key === 'workflow-import-file') {
 					(this.$refs.importFile as HTMLInputElement).click();
 				} else if (key === 'workflow-import-url') {
@@ -386,49 +381,6 @@ export default mixins(
 
 						this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
 					} catch (e) {}
-				} else if (key === 'workflow-rename') {
-					const workflowName = await this.$prompt(
-						'Enter new workflow name',
-						'Rename',
-						{
-							inputValue: this.workflowName,
-							confirmButtonText: 'Rename',
-							cancelButtonText: 'Cancel',
-						},
-					)
-						.then((data) => {
-							// @ts-ignore
-							return data.value;
-						})
-						.catch(() => {
-							// User did cancel
-							return undefined;
-						});
-
-					if (workflowName === undefined || workflowName === this.workflowName) {
-						return;
-					}
-
-					const workflowId = this.$store.getters.workflowId;
-
-					const updateData = {
-						name: workflowName,
-					};
-
-					try {
-						await this.restApi().updateWorkflow(workflowId, updateData);
-					} catch (error) {
-						this.$showError(error, 'Problem renaming the workflow', 'There was a problem renaming the workflow:');
-						return;
-					}
-
-					this.$store.commit('setWorkflowName', {newName: workflowName, setStateDirty: false});
-
-					this.$showMessage({
-						title: 'Workflow renamed',
-						message: `The workflow got renamed to "${workflowName}"!`,
-						type: 'success',
-					});
 				} else if (key === 'workflow-delete') {
 					const deleteConfirmed = await this.confirmMessage(`Are you sure that you want to delete the workflow "${this.workflowName}"?`, 'Delete Workflow?', 'warning', 'Yes, delete!');
 
@@ -454,7 +406,9 @@ export default mixins(
 					this.$router.push({ name: 'NodeViewNew' });
 				} else if (key === 'workflow-download') {
 					const workflowData = await this.getWorkflowDataToSave();
-					const blob = new Blob([JSON.stringify(workflowData, null, 2)], {
+
+					const {tags, ...data} = workflowData;
+					const blob = new Blob([JSON.stringify(data, null, 2)], {
 						type: 'application/json;charset=utf-8',
 					});
 
@@ -465,8 +419,8 @@ export default mixins(
 					saveAs(blob, workflowName + '.json');
 				} else if (key === 'workflow-save') {
 					this.saveCurrentWorkflow();
-				} else if (key === 'workflow-save-as') {
-					this.saveCurrentWorkflow(true);
+				} else if (key === 'workflow-duplicate') {
+					this.$store.dispatch('ui/openDuplicateModal');
 				} else if (key === 'help-about') {
 					this.aboutDialogVisible = true;
 				} else if (key === 'workflow-settings') {
@@ -508,11 +462,6 @@ export default mixins(
 				}
 			},
 		},
-		async mounted () {
-			this.$root.$on('openWorkflowDialog', async () => {
-				this.workflowOpenDialogVisible = true;
-			});
-		},
 	});
 </script>
 
@@ -568,7 +517,7 @@ export default mixins(
 
 	&.logo-item {
 		background-color: $--color-primary !important;
-		height: 65px;
+		height: $--header-height;
 
 		.icon {
 			position: relative;
@@ -610,10 +559,10 @@ a.logo {
 
 .side-menu-wrapper {
 	height: 100%;
-	width: 65px;
+	width: $--sidebar-width;
 
 	&.expanded {
-		width: 200px;
+		width: $--sidebar-expanded-width;
 	}
 }