feat(editor): Executions page (#4997)

* fix(editor): Create executions page

* fix(editor): lint fix

* fix(editor): Reuse execution list in both modal and page

* fix(editor): fix ts issues

* fix(editor): Reorganizing exec list components for easier redesign (everything is in its new place now)

* fix(editor): Exec list item restyling

* fix(editor): Exec list add back stripes

* fix(editor): Exec list formatting dates and times

* fix(editor): Exec list revert accidental searc and replace

* fix(editor): Exec list translations and execution IDs

* fix(editor): Exec list playing with table cell sizing

* fix(editor): Exec list playing with table cell sizing

* fix(editor): Exec list drop Element UI Table

* fix(editor): Exec list adding sticky header and View button on row hover

* fix(editor): Exec list open execution in new tab, add ellipsis menu to all rows with Delete action

* fix(editor): Global exec list update translations snd fix tabindex

* fix(editor): Global exec list redesign selection

* fix(editor): Global exec list fix scrolling container

* fix(editor): Global exec list fix running status

* fix(editor): Global exec list fix waiting status

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

@@ -0,0 +1,33 @@
+<template>
+	<Modal :name="EXECUTIONS_MODAL_KEY" width="80%" :eventBus="modalBus">
+		<template #content>
+			<ExecutionsList @closeModal="onCloseModal" />
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import ExecutionsList from '@/components/ExecutionsList.vue';
+import Modal from '@/components/Modal.vue';
+import { EXECUTIONS_MODAL_KEY } from '@/constants';
+
+export default Vue.extend({
+	name: 'ExecutionsModal',
+	components: {
+		Modal,
+		ExecutionsList,
+	},
+	data() {
+		return {
+			modalBus: new Vue(),
+			EXECUTIONS_MODAL_KEY,
+		};
+	},
+	methods: {
+		onCloseModal() {
+			this.modalBus.$emit('close');
+		},
+	},
+});
+</script>

packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue

@@ -76,7 +76,7 @@ export default mixins(
 	debounceHelper,
 	workflowHelpers,
 ).extend({
-	name: 'executions-page',
+	name: 'executions-list',
 	components: {
 		ExecutionsSidebar,
 	},

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

@@ -99,7 +99,7 @@ export default mixins(pushConnection, workflowHelpers).extend({
 		syncTabsWithRoute(route: Route): void {
 			if (
 				route.name === VIEWS.EXECUTION_HOME ||
-				route.name === VIEWS.EXECUTIONS ||
+				route.name === VIEWS.WORKFLOW_EXECUTIONS ||
 				route.name === VIEWS.EXECUTION_PREVIEW
 			) {
 				this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;

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

@@ -240,7 +240,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 		onExecutionsTab(): boolean {
 			return [
 				VIEWS.EXECUTION_HOME.toString(),
-				VIEWS.EXECUTIONS.toString(),
+				VIEWS.WORKFLOW_EXECUTIONS.toString(),
 				VIEWS.EXECUTION_PREVIEW,
 			].includes(this.$route.name || '');
 		},

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

@@ -93,7 +93,6 @@
 <script lang="ts">
 import { IExecutionResponse, IMenuItem, IVersion } from '../Interface';
 
-import ExecutionsList from '@/components/ExecutionsList.vue';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
 
@@ -111,7 +110,6 @@ import {
 	MODAL_CONFIRMED,
 	ABOUT_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
-	EXECUTIONS_MODAL_KEY,
 	VIEWS,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 } from '@/constants';
@@ -138,7 +136,6 @@ export default mixins(
 ).extend({
 	name: 'MainSidebar',
 	components: {
-		ExecutionsList,
 		GiftNotificationIcon,
 		WorkflowSettings,
 	},
@@ -239,8 +236,9 @@ export default mixins(
 				{
 					id: 'executions',
 					icon: 'tasks',
-					label: this.$locale.baseText('generic.executions'),
+					label: this.$locale.baseText('mainSidebar.executions'),
 					position: 'top',
+					activateOnRouteNames: [VIEWS.EXECUTIONS],
 				},
 				{
 					id: 'settings',
@@ -390,7 +388,9 @@ export default mixins(
 					break;
 				}
 				case 'executions': {
-					this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
+					if (this.$router.currentRoute.name !== VIEWS.EXECUTIONS) {
+						this.$router.push({ name: VIEWS.EXECUTIONS });
+					}
 					break;
 				}
 				case 'settings': {

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

@@ -62,7 +62,7 @@
 		</ModalRoot>
 
 		<ModalRoot :name="EXECUTIONS_MODAL_KEY">
-			<ExecutionsList />
+			<ExecutionsModal />
 		</ModalRoot>
 
 		<ModalRoot :name="WORKFLOW_ACTIVE_MODAL_KEY">
@@ -153,7 +153,7 @@ import UpdatesPanel from './UpdatesPanel.vue';
 import ValueSurvey from './ValueSurvey.vue';
 import WorkflowSettings from './WorkflowSettings.vue';
 import DeleteUserModal from './DeleteUserModal.vue';
-import ExecutionsList from './ExecutionsList.vue';
+import ExecutionsModal from './ExecutionsModal.vue';
 import ActivationModal from './ActivationModal.vue';
 import ImportCurlModal from './ImportCurlModal.vue';
 import WorkflowShareModal from './WorkflowShareModal.ee.vue';
@@ -173,7 +173,7 @@ export default Vue.extend({
 		DeleteUserModal,
 		DuplicateWorkflowDialog,
 		InviteUsersModal,
-		ExecutionsList,
+		ExecutionsModal,
 		ModalRoot,
 		OnboardingCallSignupModal,
 		PersonalizationModal,