From 78470f5dd7842d5b0936316f995209e162a716e2 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 10 Nov 2022 16:49:42 +0100
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20Fixing=20execution=20retry?=
 =?UTF-8?q?=20popup=20closing=20behavior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../N8nActionDropdown/ActionDropdown.vue         | 13 +++++++++++--
 .../ExecutionsView/ExecutionPreview.vue          | 16 ++++++++++++++--
 .../components/ExecutionsView/ExecutionsView.vue |  2 +-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 894b08dcf4d26..537e37c8f9a2d 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
-		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect">
-			<div :class="$style.activator" @click.prevent>
+		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect"  ref="elementDropdown">
+			<div :class="$style.activator" @click.prevent @blur="onButtonBlur">
 				<n8n-icon :icon="activatorIcon"/>
 			</div>
 			<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
@@ -92,6 +92,15 @@ export default Vue.extend({
 		onSelect(action: string) : void {
 			this.$emit('select', action);
 		},
+		onButtonBlur(event: FocusEvent): void {
+			const elementDropdown = this.$refs.elementDropdown;
+			// Hide dropdown when clicking outside of current document
+			if (elementDropdown && event.relatedTarget === null) {
+				// TODO: Disabling error here since this ref is always ElDropdown instance
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+				(elementDropdown as unknown as InstanceType<typeof ElDropdown>).hide();
+			}
+		},
 	},
 });
 
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index b8bb9beb22b88..e55976322e869 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -33,13 +33,14 @@
 				</n8n-text>
 			</div>
 			<div>
-				<el-dropdown v-if="executionUIDetails.name === 'error'" trigger="click" class="mr-xs" @command="handleRetryClick">
+				<el-dropdown v-if="executionUIDetails.name === 'error'" trigger="click" class="mr-xs" @command="handleRetryClick" ref="retryDropdown">
 					<span class="retry-button">
 						<n8n-icon-button
 							size="large"
 							type="tertiary"
 							:title="$locale.baseText('executionsList.retryExecution')"
 							icon="redo"
+							@blur="onRetryButtonBlur"
 						/>
 					</span>
 					<el-dropdown-menu slot="dropdown">
@@ -47,7 +48,7 @@
 							{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
 						</el-dropdown-item>
 						<el-dropdown-item command="original-workflow">
-							{{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
+							{{ $locale.baseText('executionsList.retryWithOriginalWorkflow') }}
 						</el-dropdown-item>
 					</el-dropdown-menu>
 				</el-dropdown>
@@ -67,6 +68,7 @@ import { executionHelpers, IExecutionUIData } from '../mixins/executionsHelpers'
 import { VIEWS } from '../../constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
+import ElDropdown from 'element-ui/lib/dropdown';
 
 export default mixins(restApi, showMessage, executionHelpers).extend({
 	name: 'execution-preview',
@@ -106,6 +108,13 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		handleRetryClick(command: string): void {
 			this.$emit('retryExecution', { execution: this.activeExecution, command });
 		},
+		onRetryButtonBlur(event: FocusEvent): void {
+			// Hide dropdown when clicking outside of current document
+			const retryDropdown = this.$refs.retryDropdown;
+			if (retryDropdown && event.relatedTarget === null) {
+				(retryDropdown as unknown as InstanceType<typeof ElDropdown>).hide();
+			}
+		},
 	},
 });
 </script>
@@ -125,6 +134,9 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 	display: flex;
 	justify-content: space-between;
 	transition: all 150ms ease-in-out;
+	pointer-events: none;
+
+	& * { pointer-events: all; }
 
 	&.sidebarCollapsed {
 		width: calc(100% - 375px);
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
index cc7c78d506528..3081327b3110f 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
@@ -26,7 +26,7 @@
 import ExecutionsSidebar from '@/components/ExecutionsView/ExecutionsSidebar.vue';
 import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS, WEBHOOK_NODE_TYPE } from '@/constants';
 import { IExecutionsListResponse, IExecutionsSummary, INodeUi, ITag, IWorkflowDb } from '@/Interface';
-import { IConnection, IConnections, IDataObject, INodeTypeDescription, INodeTypeNameVersion, IWorkflowSettings, NodeHelpers } from 'n8n-workflow';
+import { IConnection, IConnections, IDataObject, INodeTypeDescription, INodeTypeNameVersion, NodeHelpers } from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
 import { restApi } from '../mixins/restApi';
 import { showMessage } from '../mixins/showMessage';

From 3b1006f7926224997722db42bf12ffdb849e26f7 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 11 Nov 2022 14:20:48 +0100
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=91=8C=20Updating=20child=20component?=
 =?UTF-8?q?=20ref=20type=20casting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nActionDropdown/ActionDropdown.vue   | 8 +++-----
 .../src/components/ExecutionsView/ExecutionPreview.vue    | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 537e37c8f9a2d..60da96e64bbd8 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
-		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect"  ref="elementDropdown">
+		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect" ref="elementDropdown">
 			<div :class="$style.activator" @click.prevent @blur="onButtonBlur">
 				<n8n-icon :icon="activatorIcon"/>
 			</div>
@@ -93,12 +93,10 @@ export default Vue.extend({
 			this.$emit('select', action);
 		},
 		onButtonBlur(event: FocusEvent): void {
-			const elementDropdown = this.$refs.elementDropdown;
+			const elementDropdown = this.$refs.elementDropdown as Vue & { hide: () => void };
 			// Hide dropdown when clicking outside of current document
 			if (elementDropdown && event.relatedTarget === null) {
-				// TODO: Disabling error here since this ref is always ElDropdown instance
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-				(elementDropdown as unknown as InstanceType<typeof ElDropdown>).hide();
+				elementDropdown.hide();
 			}
 		},
 	},
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index e55976322e869..bc8d3c4461989 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -110,9 +110,9 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		},
 		onRetryButtonBlur(event: FocusEvent): void {
 			// Hide dropdown when clicking outside of current document
-			const retryDropdown = this.$refs.retryDropdown;
+			const retryDropdown = this.$refs.retryDropdown as Vue & { hide: () => void };
 			if (retryDropdown && event.relatedTarget === null) {
-				(retryDropdown as unknown as InstanceType<typeof ElDropdown>).hide();
+				retryDropdown.hide();
 			}
 		},
 	},

From 87509073e040cedf1e1ae8137fb00a20c0f97c9e Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 14 Nov 2022 09:19:39 +0100
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=91=8C=20Handling=20`undefined`=20pos?=
 =?UTF-8?q?sibility=20in=20action=20dropdown=20blur=20event?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/N8nActionDropdown/ActionDropdown.vue         | 2 +-
 .../src/components/ExecutionsView/ExecutionPreview.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 60da96e64bbd8..13663cfb1770d 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -93,7 +93,7 @@ export default Vue.extend({
 			this.$emit('select', action);
 		},
 		onButtonBlur(event: FocusEvent): void {
-			const elementDropdown = this.$refs.elementDropdown as Vue & { hide: () => void };
+			const elementDropdown = this.$refs.elementDropdown as Vue & { hide: () => void }  | undefined;
 			// Hide dropdown when clicking outside of current document
 			if (elementDropdown && event.relatedTarget === null) {
 				elementDropdown.hide();
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index bc8d3c4461989..8061c7beebced 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -110,7 +110,7 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		},
 		onRetryButtonBlur(event: FocusEvent): void {
 			// Hide dropdown when clicking outside of current document
-			const retryDropdown = this.$refs.retryDropdown as Vue & { hide: () => void };
+			const retryDropdown = this.$refs.retryDropdown as Vue & { hide: () => void } | undefined;
 			if (retryDropdown && event.relatedTarget === null) {
 				retryDropdown.hide();
 			}