fix(editor): Fix for execution retry dropdown not closing (#4575)

* 🐛 Fixing execution retry popup closing behavior
* 👌 Updating child component ref type casting
* 👌 Handling `undefined` possibility in action dropdown blur event

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">
+		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect" ref="elementDropdown">
-			<div :class="$style.activator" @click.prevent>
+			<div :class="$style.activator" @click.prevent @blur="onButtonBlur">
 				<n8n-icon :icon="activatorIcon"/>
 			</div>
 			<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
@@ -92,6 +92,13 @@ export default Vue.extend({
 		onSelect(action: string) : void {
 			this.$emit('select', action);
 		},
+		onButtonBlur(event: FocusEvent): 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();
+			}
+		},
 	},
 });
 

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 as Vue & { hide: () => void } | undefined;
+			if (retryDropdown && event.relatedTarget === null) {
+				retryDropdown.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);

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';