From 1d72225cb037d43390a9c6916b2c9790cda1f57f Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Tue, 1 Aug 2023 13:51:49 +0200
Subject: [PATCH] refactor: Clean up executions modal (#6822)

chore: Clean up executions modal
---
 .../src/components/ExecutionsModal.vue        | 34 -------------
 packages/editor-ui/src/components/Modals.vue  |  8 ---
 .../editor-ui/src/components/TriggerPanel.vue | 50 ++++++-------------
 packages/editor-ui/src/constants.ts           |  1 -
 packages/editor-ui/src/stores/ui.store.ts     |  4 --
 5 files changed, 14 insertions(+), 83 deletions(-)
 delete mode 100644 packages/editor-ui/src/components/ExecutionsModal.vue

diff --git a/packages/editor-ui/src/components/ExecutionsModal.vue b/packages/editor-ui/src/components/ExecutionsModal.vue
deleted file mode 100644
index 343fe4130..000000000
--- a/packages/editor-ui/src/components/ExecutionsModal.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<Modal :name="EXECUTIONS_MODAL_KEY" width="80%" :eventBus="modalBus">
-		<template #content>
-			<ExecutionsList @closeModal="onCloseModal" />
-		</template>
-	</Modal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import ExecutionsList from '@/components/ExecutionsList.vue';
-import Modal from '@/components/Modal.vue';
-import { EXECUTIONS_MODAL_KEY } from '@/constants';
-import { createEventBus } from 'n8n-design-system/utils';
-
-export default defineComponent({
-	name: 'ExecutionsModal',
-	components: {
-		Modal,
-		ExecutionsList,
-	},
-	data() {
-		return {
-			modalBus: createEventBus(),
-			EXECUTIONS_MODAL_KEY,
-		};
-	},
-	methods: {
-		onCloseModal() {
-			this.modalBus.emit('close');
-		},
-	},
-});
-</script>
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index 3746992e6..f5476463e 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -65,10 +65,6 @@
 			</template>
 		</ModalRoot>
 
-		<ModalRoot :name="EXECUTIONS_MODAL_KEY">
-			<ExecutionsModal />
-		</ModalRoot>
-
 		<ModalRoot :name="WORKFLOW_ACTIVE_MODAL_KEY">
 			<ActivationModal />
 		</ModalRoot>
@@ -138,7 +134,6 @@ import {
 	CREDENTIAL_SELECT_MODAL_KEY,
 	DELETE_USER_MODAL_KEY,
 	DUPLICATE_MODAL_KEY,
-	EXECUTIONS_MODAL_KEY,
 	INVITE_USER_MODAL_KEY,
 	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 	PERSONALIZATION_MODAL_KEY,
@@ -173,7 +168,6 @@ import UpdatesPanel from './UpdatesPanel.vue';
 import ValueSurvey from './ValueSurvey.vue';
 import WorkflowSettings from './WorkflowSettings.vue';
 import DeleteUserModal from './DeleteUserModal.vue';
-import ExecutionsModal from './ExecutionsModal.vue';
 import ActivationModal from './ActivationModal.vue';
 import ImportCurlModal from './ImportCurlModal.vue';
 import WorkflowShareModal from './WorkflowShareModal.ee.vue';
@@ -196,7 +190,6 @@ export default defineComponent({
 		DeleteUserModal,
 		DuplicateWorkflowDialog,
 		InviteUsersModal,
-		ExecutionsModal,
 		ModalRoot,
 		OnboardingCallSignupModal,
 		PersonalizationModal,
@@ -229,7 +222,6 @@ export default defineComponent({
 		WORKFLOW_SETTINGS_MODAL_KEY,
 		WORKFLOW_SHARE_MODAL_KEY,
 		VALUE_SURVEY_MODAL_KEY,
-		EXECUTIONS_MODAL_KEY,
 		WORKFLOW_ACTIVE_MODAL_KEY,
 		IMPORT_CURL_MODAL_KEY,
 		LOG_STREAM_MODAL_KEY,
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 7ec679ac4..946ef46da 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -105,7 +105,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import { EXECUTIONS_MODAL_KEY, WEBHOOK_NODE_TYPE, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
+import { VIEWS, WEBHOOK_NODE_TYPE, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import type { INodeUi } from '@/Interface';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import { getTriggerNodeServiceName } from '@/utils';
@@ -158,9 +158,7 @@ export default defineComponent({
 		},
 		hasIssues(): boolean {
 			return Boolean(
-				this.node &&
-					this.node.issues &&
-					(this.node.issues.parameters || this.node.issues.credentials),
+				this.node?.issues && (this.node.issues.parameters || this.node.issues.credentials),
 			);
 		},
 		serviceName(): string {
@@ -174,38 +172,28 @@ export default defineComponent({
 			return Boolean(this.node && this.node.type === WEBHOOK_NODE_TYPE);
 		},
 		webhookHttpMethod(): string | undefined {
-			if (
-				!this.node ||
-				!this.nodeType ||
-				!this.nodeType.webhooks ||
-				!this.nodeType.webhooks.length
-			) {
+			if (!this.node || !this.nodeType?.webhooks?.length) {
 				return undefined;
 			}
 
 			return this.getWebhookExpressionValue(this.nodeType.webhooks[0], 'httpMethod');
 		},
 		webhookTestUrl(): string | undefined {
-			if (
-				!this.node ||
-				!this.nodeType ||
-				!this.nodeType.webhooks ||
-				!this.nodeType.webhooks.length
-			) {
+			if (!this.node || !this.nodeType?.webhooks?.length) {
 				return undefined;
 			}
 
 			return this.getWebhookUrl(this.nodeType.webhooks[0], this.node, 'test');
 		},
 		isWebhookBasedNode(): boolean {
-			return Boolean(this.nodeType && this.nodeType.webhooks && this.nodeType.webhooks.length);
+			return Boolean(this.nodeType?.webhooks?.length);
 		},
 		isPollingNode(): boolean {
 			return Boolean(this.nodeType && this.nodeType.polling);
 		},
 		isListeningForEvents(): boolean {
-			const waitingOnWebhook = this.workflowsStore.executionWaitingForWebhook as boolean;
-			const executedNode = this.workflowsStore.executedNode as string | undefined;
+			const waitingOnWebhook = this.workflowsStore.executionWaitingForWebhook;
+			const executedNode = this.workflowsStore.executedNode;
 			return (
 				!!this.node &&
 				!this.node.disabled &&
@@ -232,11 +220,7 @@ export default defineComponent({
 				return this.$locale.baseText('ndv.trigger.pollingNode.fetchingEvent');
 			}
 
-			if (
-				this.nodeType &&
-				this.nodeType.triggerPanel &&
-				typeof this.nodeType.triggerPanel.header === 'string'
-			) {
+			if (this.nodeType?.triggerPanel && typeof this.nodeType.triggerPanel.header === 'string') {
 				return this.nodeType.triggerPanel.header;
 			}
 
@@ -259,11 +243,7 @@ export default defineComponent({
 			return '';
 		},
 		executionsHelp(): string {
-			if (
-				this.nodeType &&
-				this.nodeType.triggerPanel &&
-				this.nodeType.triggerPanel.executionsHelp !== undefined
-			) {
+			if (this.nodeType?.triggerPanel?.executionsHelp !== undefined) {
 				if (typeof this.nodeType.triggerPanel.executionsHelp === 'string') {
 					return this.nodeType.triggerPanel.executionsHelp;
 				}
@@ -306,11 +286,7 @@ export default defineComponent({
 				return '';
 			}
 
-			if (
-				this.nodeType &&
-				this.nodeType.triggerPanel &&
-				this.nodeType.triggerPanel.activationHint
-			) {
+			if (this.nodeType?.triggerPanel?.activationHint) {
 				if (typeof this.nodeType.triggerPanel.activationHint === 'string') {
 					return this.nodeType.triggerPanel.activationHint;
 				}
@@ -368,7 +344,7 @@ export default defineComponent({
 			const target = e.target as HTMLElement;
 			if (target.localName !== 'a') return;
 
-			if (target.dataset && target.dataset.key) {
+			if (target.dataset?.key) {
 				e.stopPropagation();
 				e.preventDefault();
 
@@ -382,7 +358,9 @@ export default defineComponent({
 						type: 'open-executions-log',
 					});
 					this.ndvStore.activeNodeName = null;
-					this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
+					void this.$router.push({
+						name: VIEWS.EXECUTIONS,
+					});
 				} else if (target.dataset.key === 'settings') {
 					this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 				}
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 7cc42b68e..0b35c3695 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -40,7 +40,6 @@ export const WORKFLOW_SHARE_MODAL_KEY = 'workflowShare';
 export const PERSONALIZATION_MODAL_KEY = 'personalization';
 export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';
 export const VALUE_SURVEY_MODAL_KEY = 'valueSurvey';
-export const EXECUTIONS_MODAL_KEY = 'executions';
 export const WORKFLOW_ACTIVE_MODAL_KEY = 'activation';
 export const ONBOARDING_CALL_SIGNUP_MODAL_KEY = 'onboardingCallSignup';
 export const COMMUNITY_PACKAGE_INSTALL_MODAL_KEY = 'communityPackageInstall';
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index 84a99f085..5cba16cc1 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/packages/editor-ui/src/stores/ui.store.ts
@@ -15,7 +15,6 @@ import {
 	CREDENTIAL_SELECT_MODAL_KEY,
 	DELETE_USER_MODAL_KEY,
 	DUPLICATE_MODAL_KEY,
-	EXECUTIONS_MODAL_KEY,
 	FAKE_DOOR_FEATURES,
 	IMPORT_CURL_MODAL_KEY,
 	INVITE_USER_MODAL_KEY,
@@ -107,9 +106,6 @@ export const useUIStore = defineStore(STORES.UI, {
 			[WORKFLOW_SETTINGS_MODAL_KEY]: {
 				open: false,
 			},
-			[EXECUTIONS_MODAL_KEY]: {
-				open: false,
-			},
 			[WORKFLOW_SHARE_MODAL_KEY]: {
 				open: false,
 			},