From cc089bebd4e12fd9c3690c53568cb0100c838be4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Fri, 11 Apr 2025 16:41:59 +0200
Subject: [PATCH] fix(editor): Implement insight's design feedback 4 (#14550)

---
 .../insights/components/InsightsDashboard.vue | 26 ++++++++++++++++-
 .../tables/InsightsTableWorkflows.vue         | 28 ++++++++++++++++---
 .../src/plugins/i18n/locales/en.json          |  5 +++-
 .../frontend/editor-ui/src/views/NodeView.vue |  6 ++++
 4 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue b/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue
index 78af34d3508..1c1082a0f28 100644
--- a/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue
+++ b/packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue
@@ -104,7 +104,22 @@ watch(
 				/>
 				<div v-if="insightsStore.isInsightsEnabled" :class="$style.insightsContent">
 					<div :class="$style.insightsChartWrapper">
-						<template v-if="insightsStore.charts.isLoading"> loading </template>
+						<div v-if="insightsStore.charts.isLoading" :class="$style.chartLoader">
+							<svg
+								width="22"
+								height="22"
+								viewBox="0 0 22 22"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C11.6293 1 12.245 1.05813 12.8421 1.16931"
+									stroke="currentColor"
+									stroke-width="2"
+								/>
+							</svg>
+							{{ i18n.baseText('insights.chart.loading') }}
+						</div>
 						<component
 							:is="chartComponents[props.insightType]"
 							v-else
@@ -169,4 +184,13 @@ watch(
 .insightsTableWrapper {
 	padding: var(--spacing-l) var(--spacing-l) 0;
 }
+
+.chartLoader {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 9px;
+}
 </style>
diff --git a/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue b/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue
index 4bf5ec7d101..b6ea1e1796c 100644
--- a/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue
+++ b/packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue
@@ -15,7 +15,7 @@ import { smartDecimal } from '@n8n/utils/number/smartDecimal';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { VIEWS } from '@/constants';
 import { computed, ref, watch } from 'vue';
-import { type RouteLocationRaw } from 'vue-router';
+import { type RouteLocationRaw, type LocationQueryRaw } from 'vue-router';
 
 const props = defineProps<{
 	data: InsightsByWorkflow;
@@ -81,7 +81,7 @@ const headers = ref<Array<TableHeader<Item>>>([
 		},
 	},
 	{
-		title: 'Project name',
+		title: i18n.baseText('insights.dashboard.table.projectName'),
 		key: 'projectName',
 		disableSort: true,
 	},
@@ -101,11 +101,12 @@ const emit = defineEmits<{
 	];
 }>();
 
-const getWorkflowLink = (item: Item): RouteLocationRaw => ({
+const getWorkflowLink = (item: Item, query?: LocationQueryRaw): RouteLocationRaw => ({
 	name: VIEWS.WORKFLOW,
 	params: {
 		name: item.workflowId,
 	},
+	query,
 });
 
 const trackWorkflowClick = (item: Item) => {
@@ -146,6 +147,18 @@ watch(sortBy, (newValue) => {
 					</N8nTooltip>
 				</router-link>
 			</template>
+			<template #[`item.timeSaved`]="{ item, value }">
+				<router-link
+					v-if="!item.timeSaved"
+					:to="getWorkflowLink(item, { settings: 'true' })"
+					class="link"
+				>
+					{{ i18n.baseText('insights.dashboard.table.estimate') }}
+				</router-link>
+				<template v-else>
+					{{ value }}
+				</template>
+			</template>
 			<template #[`item.projectName`]="{ item }">
 				<N8nTooltip v-if="item.projectName" :content="item.projectName" placement="top">
 					<div class="ellipsis">
@@ -164,13 +177,20 @@ watch(sortBy, (newValue) => {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	line-height: 1.2;
+	width: fit-content;
+	max-width: 100%;
 }
 
 .link {
-	display: flex;
+	display: inline-flex;
 	height: 100%;
 	align-items: center;
 	text-decoration: none;
 	color: var(--color-text-base);
+	text-decoration: underline;
+	max-width: 100%;
+	&:hover {
+		color: var(--color-text-dark);
+	}
 }
 </style>
diff --git a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json b/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
index 2a7fff8cb9a..13f070fdcae 100644
--- a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
@@ -3087,9 +3087,12 @@
 	"insights.banner.title.timeSaved": "Time saved",
 	"insights.banner.title.timeSavedDailyAverage": "Time saved daily avg.",
 	"insights.banner.title.averageRunTime": "Run time (avg.)",
+	"insights.dashboard.table.projectName": "Project name",
+	"insights.dashboard.table.estimate": "Estimate",
 	"insights.dashboard.title": "Insights",
 	"insights.banner.title.timeSaved.tooltip": "Total time saved calculated from your estimated time savings per execution across all workflows",
 	"insights.banner.failureRate.deviation.tooltip": "Percentage point change from previous period",
 	"insights.chart.failed": "Failed",
-	"insights.chart.succeeded": "Successful"
+	"insights.chart.succeeded": "Successful",
+	"insights.chart.loading": "Loading data..."
 }
diff --git a/packages/frontend/editor-ui/src/views/NodeView.vue b/packages/frontend/editor-ui/src/views/NodeView.vue
index d0125a227c6..78eed4183da 100644
--- a/packages/frontend/editor-ui/src/views/NodeView.vue
+++ b/packages/frontend/editor-ui/src/views/NodeView.vue
@@ -64,6 +64,7 @@ import {
 	VALID_WORKFLOW_IMPORT_URL_REGEX,
 	VIEWS,
 	AI_CREDITS_EXPERIMENT,
+	WORKFLOW_SETTINGS_MODAL_KEY,
 } from '@/constants';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
@@ -1681,6 +1682,11 @@ onMounted(() => {
 				// Once view is initialized, pick up all toast notifications
 				// waiting in the store and display them
 				toast.showNotificationForViews([VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW]);
+
+				if (route.query.settings) {
+					uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
+					void router.replace({ query: { settings: undefined } });
+				}
 			})
 			.finally(() => {
 				isLoading.value = false;