refactor(editor): Remove old execution view route and its dependants (#4651)

* fix(editor): Remove old execution view header

* fix(editor): Remove old execution route

packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue

@@ -1,128 +0,0 @@
-<template>
-	<div class="container">
-		<span class="title">
-			{{ $locale.baseText('executionDetails.executionId') + ':' }}
-			<span>
-				<strong>{{ executionId }}</strong
-				>&nbsp;
-				<font-awesome-icon
-					icon="check"
-					class="execution-icon success"
-					v-if="executionFinished"
-					:title="$locale.baseText('executionDetails.executionWasSuccessful')"
-				/>
-				<font-awesome-icon
-					icon="clock"
-					class="execution-icon warning"
-					v-else-if="executionWaiting"
-					:title="$locale.baseText('executionDetails.executionWaiting')"
-				/>
-				<font-awesome-icon
-					icon="times"
-					class="execution-icon error"
-					v-else
-					:title="$locale.baseText('executionDetails.executionFailed')"
-				/>
-			</span>
-			{{ $locale.baseText('executionDetails.of') }}
-			<span
-				class="primary-color clickable"
-				:title="$locale.baseText('executionDetails.openWorkflow')"
-			>
-				<ShortenName :name="workflowName">
-					<template #default="{ shortenedName }">
-						<span @click="openWorkflow(workflowExecution.workflowId)"> "{{ shortenedName }}" </span>
-					</template>
-				</ShortenName>
-			</span>
-			{{ $locale.baseText('executionDetails.workflow') }}
-		</span>
-		<ReadOnly class="read-only" />
-	</div>
-</template>
-
-<script lang="ts">
-import mixins from 'vue-typed-mixins';
-
-import { IExecutionResponse, IExecutionsSummary } from '../../../Interface';
-
-import { titleChange } from '@/mixins/titleChange';
-
-import ShortenName from '@/components/ShortenName.vue';
-import ReadOnly from '@/components/MainHeader/ExecutionDetails/ReadOnly.vue';
-import { mapStores } from 'pinia';
-import { useWorkflowsStore } from '@/stores/workflows';
-
-export default mixins(titleChange).extend({
-	name: 'ExecutionDetails',
-	components: {
-		ShortenName,
-		ReadOnly,
-	},
-	computed: {
-		...mapStores(useWorkflowsStore),
-		executionId(): string | undefined {
-			return this.$route.params.id;
-		},
-		executionFinished(): boolean {
-			const fullExecution = this.workflowsStore.getWorkflowExecution;
-
-			return !!fullExecution && fullExecution.finished;
-		},
-		executionWaiting(): boolean {
-			const fullExecution = this.workflowsStore.getWorkflowExecution as IExecutionsSummary;
-
-			return !!fullExecution && !!fullExecution.waitTill;
-		},
-		workflowExecution(): IExecutionResponse | null {
-			return this.workflowsStore.getWorkflowExecution;
-		},
-		workflowName(): string {
-			return this.workflowsStore.workflowName;
-		},
-	},
-	methods: {
-		async openWorkflow(workflowId: string) {
-			this.$titleSet(this.workflowName, 'IDLE');
-			// Change to other workflow
-			this.$router.push({
-				name: 'NodeViewExisting',
-				params: { name: workflowId },
-			});
-		},
-	},
-});
-</script>
-
-<style scoped lang="scss">
-* {
-	box-sizing: border-box;
-}
-
-.execution-icon {
-	&.success {
-		color: var(--color-success);
-	}
-	&.warning {
-		color: var(--color-warning);
-	}
-}
-
-.container {
-	width: 100%;
-	display: flex;
-}
-
-.title {
-	flex: 1;
-	text-align: center;
-}
-
-.read-only {
-	align-self: flex-end;
-}
-
-.el-tooltip.read-only div {
-	max-width: 400px;
-}
-</style>

packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue

@@ -1,27 +0,0 @@
-<template>
-	<n8n-tooltip class="primary-color" placement="bottom-end">
-		<template #content>
-			<div>
-				<span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
-			</div>
-		</template>
-		<div>
-			<font-awesome-icon icon="exclamation-triangle" />
-			<span v-text="$locale.baseText('executionDetails.readOnly.readOnly')"></span>
-		</div>
-	</n8n-tooltip>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	name: 'ReadOnly',
-});
-</script>
-
-<style scoped>
-svg {
-	margin-right: 6px;
-}
-</style>

packages/editor-ui/src/components/MainHeader/MainHeader.vue

@@ -2,10 +2,9 @@
 	<div>
 		<div :class="{ 'main-header': true, expanded: !this.uiStore.sidebarMenuCollapsed }">
 			<div v-show="!hideMenuBar" class="top-menu">
-				<ExecutionDetails v-if="isExecutionPage" />
+				<WorkflowDetails />
-				<WorkflowDetails v-else />
 				<tab-bar
-					v-if="onWorkflowPage && !isExecutionPage"
+					v-if="onWorkflowPage"
 					:items="tabBarItems"
 					:activeTab="activeHeaderTab"
 					@select="onTabSelected"
@@ -19,7 +18,6 @@
 import mixins from 'vue-typed-mixins';
 import { pushConnection } from '@/mixins/pushConnection';
 import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
-import ExecutionDetails from '@/components/MainHeader/ExecutionDetails/ExecutionDetails.vue';
 import TabBar from '@/components/MainHeader/TabBar.vue';
 import {
 	MAIN_HEADER_TABS,
@@ -38,7 +36,6 @@ export default mixins(pushConnection, workflowHelpers).extend({
 	name: 'MainHeader',
 	components: {
 		WorkflowDetails,
-		ExecutionDetails,
 		TabBar,
 	},
 	data() {
@@ -56,9 +53,6 @@ export default mixins(pushConnection, workflowHelpers).extend({
 				{ value: MAIN_HEADER_TABS.EXECUTIONS, label: this.$locale.baseText('generic.executions') },
 			];
 		},
-		isExecutionPage(): boolean {
-			return this.$route.name === VIEWS.EXECUTION;
-		},
 		activeNode(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},

packages/editor-ui/src/constants.ts

@@ -296,7 +296,6 @@ export const TEMPLATES_NODES_FILTER = ['n8n-nodes-base.start', 'n8n-nodes-base.r
 export enum VIEWS {
 	HOMEPAGE = 'Homepage',
 	COLLECTION = 'TemplatesCollectionView',
-	EXECUTION = 'ExecutionById',
 	EXECUTIONS = 'Executions',
 	EXECUTION_PREVIEW = 'ExecutionPreview',
 	EXECUTION_HOME = 'ExecutionsLandingPage',

packages/editor-ui/src/router.ts

@@ -112,23 +112,6 @@ const router = new Router({
 				},
 			},
 		},
-		{
-			path: '/execution/:id',
-			name: VIEWS.EXECUTION,
-			components: {
-				default: NodeView,
-				header: MainHeader,
-				sidebar: MainSidebar,
-			},
-			meta: {
-				nodeView: true,
-				permissions: {
-					allow: {
-						loginStatus: [LOGIN_STATUS.LoggedIn],
-					},
-				},
-			},
-		},
 		{
 			path: '/templates/:id',
 			name: VIEWS.TEMPLATE,

packages/editor-ui/src/stores/ui.ts

@@ -254,7 +254,7 @@ export const useUIStore = defineStore(STORES.UI, {
 			return [
 				VIEWS.NEW_WORKFLOW.toString(),
 				VIEWS.WORKFLOW.toString(),
-				VIEWS.EXECUTION.toString(),
+				VIEWS.WORKFLOW_EXECUTIONS.toString(),
 			].includes(this.currentView);
 		},
 		isActionActive() {

packages/editor-ui/src/utils/canvasUtils.ts

@@ -81,7 +81,7 @@ export const getNodeViewTab = (route: Route): string | null => {
 		return MAIN_HEADER_TABS.WORKFLOW;
 	} else {
 		const executionTabRoutes = [
-			VIEWS.EXECUTION.toString(),
+			VIEWS.WORKFLOW_EXECUTIONS.toString(),
 			VIEWS.EXECUTION_PREVIEW.toString(),
 			VIEWS.EXECUTION_HOME.toString(),
 		];

packages/editor-ui/src/views/NodeView.vue

@@ -476,16 +476,8 @@ export default mixins(
 		isDemo(): boolean {
 			return this.$route.name === VIEWS.DEMO;
 		},
-		isExecutionView(): boolean {
-			return this.$route.name === VIEWS.EXECUTION;
-		},
 		showCanvasAddButton(): boolean {
-			return (
+			return this.loadingService === null && !this.containsTrigger && !this.isDemo;
-				this.loadingService === null &&
-				!this.containsTrigger &&
-				!this.isDemo &&
-				!this.isExecutionView
-			);
 		},
 		lastSelectedNode(): INodeUi | null {
 			return this.uiStore.getLastSelectedNode;
@@ -2486,10 +2478,6 @@ export default mixins(
 			} else if (this.$route.name === VIEWS.TEMPLATE_IMPORT) {
 				const templateId = this.$route.params.id;
 				await this.openWorkflowTemplate(templateId);
-			} else if (this.isExecutionView) {
-				// Load an execution
-				const executionId = this.$route.params.id;
-				await this.openExecution(executionId);
 			} else {
 				const result = this.uiStore.stateIsDirty;
 				if (result) {