Setup routes

This commit is contained in:
Oleg Ivaniv 2024-11-11 10:15:54 +01:00
parent 5549c8fb34
commit 90eefd1d1e
No known key found for this signature in database
6 changed files with 157 additions and 0 deletions

View file

@ -36,6 +36,7 @@ const dirtyState = ref(false);
const tabBarItems = computed(() => [
{ value: MAIN_HEADER_TABS.WORKFLOW, label: locale.baseText('generic.editor') },
{ value: MAIN_HEADER_TABS.EXECUTIONS, label: locale.baseText('generic.executions') },
{ value: MAIN_HEADER_TABS.EVALUATION, label: locale.baseText('generic.tests') },
]);
const activeNode = computed(() => ndvStore.activeNode);
@ -67,6 +68,10 @@ onMounted(async () => {
});
function syncTabsWithRoute(to: RouteLocation, from?: RouteLocation): void {
console.log('🚀 ~ syncTabsWithRoute ~ to.name:', to.name);
if (to.name === VIEWS.WORKFLOW_EVALUATION) {
activeHeaderTab.value = MAIN_HEADER_TABS.EVALUATION;
}
if (
to.name === VIEWS.EXECUTION_HOME ||
to.name === VIEWS.WORKFLOW_EXECUTIONS ||
@ -106,6 +111,11 @@ function onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
void navigateToExecutionsView(openInNewTab);
break;
case MAIN_HEADER_TABS.EVALUATION:
activeHeaderTab.value = MAIN_HEADER_TABS.EVALUATION;
void router.push({ name: VIEWS.WORKFLOW_EVALUATION });
break;
default:
break;
}

View file

@ -484,6 +484,8 @@ export const enum VIEWS {
COMMUNITY_NODES = 'CommunityNodes',
WORKFLOWS = 'WorkflowsView',
WORKFLOW_EXECUTIONS = 'WorkflowExecutions',
WORKFLOW_EVALUATION = 'WorkflowEvaluation',
NEW_WORKFLOW_EVALUATION = 'NewWorkflowEvaluation',
USAGE = 'Usage',
LOG_STREAMING_SETTINGS = 'LogStreamingSettingsView',
SSO_SETTINGS = 'SSoSettings',
@ -580,6 +582,7 @@ export const enum MAIN_HEADER_TABS {
WORKFLOW = 'workflow',
EXECUTIONS = 'executions',
SETTINGS = 'settings',
EVALUATION = 'evaluation',
}
export const CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS = [
'ftp',

View file

@ -47,6 +47,7 @@
"generic.delete": "Delete",
"generic.dontShowAgain": "Don't show again",
"generic.executions": "Executions",
"generic.tests": "Tests",
"generic.or": "or",
"generic.clickToCopy": "Click to copy",
"generic.copiedToClipboard": "Copied to clipboard",

View file

@ -18,6 +18,8 @@ import type { RouterMiddleware } from '@/types/router';
import { initializeAuthenticatedFeatures, initializeCore } from '@/init';
import { tryToParseNumber } from '@/utils/typesUtils';
import { projectsRoutes } from '@/routes/projects.routes';
import WorkflowEvaluationView from './views/WorkflowEvaluationView.vue';
import NewWorkflowEvaluationView from './views/NewWorkflowEvaluationView.vue';
const ChangePasswordView = async () => await import('./views/ChangePasswordView.vue');
const ErrorView = async () => await import('./views/ErrorView.vue');
@ -248,6 +250,80 @@ export const routes: RouteRecordRaw[] = [
},
],
},
{
path: '/workflow/:name/evaluation',
name: VIEWS.WORKFLOW_EVALUATION,
components: {
default: WorkflowEvaluationView,
header: MainHeader,
sidebar: MainSidebar,
},
meta: {
keepWorkflowAlive: true,
middleware: ['authenticated'],
},
// children: [
// {
// path: '',
// name: VIEWS.EXECUTION_HOME,
// components: {
// executionPreview: WorkflowExecutionsLandingPage,
// },
// meta: {
// keepWorkflowAlive: true,
// middleware: ['authenticated'],
// },
// },
// {
// path: ':executionId',
// name: VIEWS.EXECUTION_PREVIEW,
// components: {
// executionPreview: WorkflowExecutionsPreview,
// },
// meta: {
// keepWorkflowAlive: true,
// middleware: ['authenticated'],
// },
// },
// ],
},
{
path: '/workflow/:name/evaluation/new',
name: VIEWS.NEW_WORKFLOW_EVALUATION,
components: {
default: NewWorkflowEvaluationView,
header: MainHeader,
sidebar: MainSidebar,
},
meta: {
keepWorkflowAlive: true,
middleware: ['authenticated'],
},
// children: [
// {
// path: '',
// name: VIEWS.EXECUTION_HOME,
// components: {
// executionPreview: WorkflowExecutionsLandingPage,
// },
// meta: {
// keepWorkflowAlive: true,
// middleware: ['authenticated'],
// },
// },
// {
// path: ':executionId',
// name: VIEWS.EXECUTION_PREVIEW,
// components: {
// executionPreview: WorkflowExecutionsPreview,
// },
// meta: {
// keepWorkflowAlive: true,
// middleware: ['authenticated'],
// },
// },
// ],
},
{
path: '/workflow/:workflowId/history/:versionId?',
name: VIEWS.WORKFLOW_HISTORY,

View file

@ -0,0 +1,25 @@
<script setup lang="ts">
console.log('New WorkflowEvaluationView');
function onClickEmptyStateButton() {
console.log('onClickEmptyStateButton');
}
</script>
<template>
<div :class="$style.container">
<h1>New Evaluation</h1>
Fill in
</div>
</template>
<style module lang="scss">
.container {
padding: var(--spacing-xl) var(--spacing-l);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: var(--spacing-xl);
height: 100%;
}
</style>

View file

@ -0,0 +1,42 @@
<script setup lang="ts">
import { VIEWS } from '@/constants';
import { useRouter } from 'vue-router';
console.log('WorkflowEvaluationView');
const router = useRouter();
function onClickEmptyStateButton() {
console.log('onClickEmptyStateButton');
void router.push({ name: VIEWS.NEW_WORKFLOW_EVALUATION });
}
const actionBoxConfig = {
calloutText: '',
calloutTheme: '',
hideButton: false,
};
</script>
<template>
<div :class="$style.container">
<h1>Tests</h1>
<n8n-action-box
:heading="'Get confidence your workflow is working as expected'"
:description="'Tests run your workflow and compare the results to expected ones. Create your first test from a past execution. More info'"
:button-text="'Choose Executions(s)'"
:callout-text="actionBoxConfig.calloutText"
@click:button="onClickEmptyStateButton"
/>
</div>
</template>
<style module lang="scss">
.container {
padding: var(--spacing-xl) var(--spacing-l);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: var(--spacing-xl);
height: 100%;
}
</style>