From dcec5e9e8231609a9461acb196ab157ab6fabcd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Tue, 1 Nov 2022 22:23:05 +0100
Subject: [PATCH] fix(editor): disable settings link in executions view for
 unsaved workflows (#4493)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

⚡ Disabling settings link in executions view for unsaved workflows
---
 .../N8nInfoAccordion/InfoAccordion.vue        |  1 +
 .../ExecutionsInfoAccordion.vue               | 65 +++++++++++++++----
 .../src/plugins/i18n/locales/en.json          |  5 +-
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
index 8c50bb126..2b723be1d 100644
--- a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
+++ b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
@@ -19,6 +19,7 @@
 			<n8n-text color="text-base" size="small" align="left">
 				<span v-html="description"></span>
 			</n8n-text>
+			 <slot name="customContent"></slot>
 		</div>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
index 73dd4aec8..ee71c6f49 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
@@ -3,18 +3,33 @@
 		:class="[$style.accordion, 'mt-2xl']"
 		:title="$locale.baseText('executionsLandingPage.emptyState.accordion.title')"
 		:items="accordionItems"
-		:description="accordionDescription"
 		:initiallyExpanded="shouldExpandAccordion"
 		:headerIcon="accordionIcon"
 		@click="onAccordionClick"
 		@tooltipClick="onItemTooltipClick"
-	></n8n-info-accordion>
+	>
+		<template #customContent>
+			<footer class="mt-2xs">
+				{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer') }}
+				<n8n-tooltip :disabled="!isNewWorkflow">
+					<div slot="content">
+						<n8n-link @click.prevent="onSaveWorkflowClick">{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipLink') }}</n8n-link>
+						{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipText') }}
+					</div>
+					<n8n-link @click.prevent="openWorkflowSettings" :class="{[$style.disabled]: isNewWorkflow}">
+						{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.settingsLink') }}
+					</n8n-link>
+				</n8n-tooltip>
+			</footer>
+		</template>
+	</n8n-info-accordion>
 </template>
 
 <script lang="ts">
-import { WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
+import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import { deepCopy, IWorkflowSettings } from 'n8n-workflow';
-import Vue from 'vue';
+import mixins from 'vue-typed-mixins';
+import { workflowHelpers } from '../mixins/workflowHelpers';
 
 interface IWorkflowSaveSettings {
 	saveFailedExecutions: boolean,
@@ -22,7 +37,7 @@ interface IWorkflowSaveSettings {
 	saveManualExecutions: boolean,
 };
 
-export default Vue.extend({
+export default mixins(workflowHelpers).extend({
 	name: 'executions-info-accordion',
 	props: {
 		initiallyExpanded: {
@@ -103,19 +118,24 @@ export default Vue.extend({
 			const workflowSettings = deepCopy(this.$store.getters.workflowSettings);
 			return workflowSettings;
 		},
-		accordionDescription(): string {
-			return `
-				<footer class="mt-2xs">
-					${this.$locale.baseText('executionsLandingPage.emptyState.accordion.footer')}
-				</footer>
-			`;
-		},
 		accordionIcon(): { icon: string, color: string }|null {
 			if (this.workflowSaveSettings.saveManualExecutions !== true || this.productionExecutionsStatus !== 'saving') {
 				return { icon: 'exclamation-triangle', color: 'warning' };
 			}
 			return null;
 		},
+		currentWorkflowId(): string {
+			return this.$store.getters.workflowId;
+		},
+		isNewWorkflow(): boolean {
+			return !this.currentWorkflowId || (this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || this.currentWorkflowId === 'new');
+		},
+		workflowName(): string {
+			return this.$store.getters.workflowName;
+		},
+		currentWorkflowTagIds(): string[] {
+			return this.$store.getters.workflowTags;
+		},
 	},
 	methods: {
 		updateSettings(settingsInStore: IWorkflowSettings): void {
@@ -135,6 +155,19 @@ export default Vue.extend({
 				this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
 			}
 		},
+		openWorkflowSettings(event: MouseEvent): void {
+			this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+		},
+		async onSaveWorkflowClick(event: MouseEvent): void {
+			let currentId = undefined;
+			if (this.currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+				currentId = this.currentWorkflowId;
+			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
+				currentId = this.$route.params.name;
+			}
+			const saved = await this.saveCurrentWorkflow({ id: currentId, name: this.workflowName, tags: this.currentWorkflowTagIds });
+			if (saved) this.$store.dispatch('settings/fetchPromptsData');
+		},
 	},
 });
 </script>
@@ -168,6 +201,14 @@ export default Vue.extend({
 	footer {
 		text-align: left;
 		width: 100%;
+		font-size: var(--font-size-2xs);
+	}
+
+	.disabled a {
+		color: currentColor;
+		cursor: not-allowed;
+		opacity: 0.5;
+		text-decoration: none;
 	}
 }
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 07ace4eb9..4528a7b65 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -401,7 +401,10 @@
 	"executionsLandingPage.emptyState.accordion.productionExecutions": "Production executions",
 	"executionsLandingPage.emptyState.accordion.manualExecutions": "Manual executions",
 	"executionsLandingPage.emptyState.accordion.productionExecutionsWarningTooltip": "Not all production executions are being saved. Change this in the workflow's <a href=\"#\">settings</a>",
-	"executionsLandingPage.emptyState.accordion.footer": "You can change this in <a href=\"#\">Workflow Settings</a>",
+	"executionsLandingPage.emptyState.accordion.footer": "You can change this in",
+	"executionsLandingPage.emptyState.accordion.footer.settingsLink": "Workflow settings",
+	"executionsLandingPage.emptyState.accordion.footer.tooltipLink": "Save your workflow",
+	"executionsLandingPage.emptyState.accordion.footer.tooltipText": "in order to access workflow settings",
 	"executionsLandingPage.noResults": "No executions found",
 	"executionsList.allWorkflows": "All Workflows",
 	"executionsList.anyStatus": "Any Status",