mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-24 02:52:24 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse source 
* 🐛 Fixing execution retry popup closing behavior
* 👌 Updating child component ref type casting
* 👌 Handling `undefined` possibility in action dropdown blur event
This commit is contained in:
Milorad FIlipović 2022-11-14 09:35:16 +01:00 committed by GitHub
parent c1bcc47cb5
commit e0ec5a6aa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View file

@ -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,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();
}
},
},
});

16
packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
View file

@ -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);

2
packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
View file

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