feat(editor): Insights summary banner (#13424)

Co-authored-by: Guillaume Jacquart <jacquart.guillaume@gmail.com>

Author: cstuncsik

packages/@n8n/permissions/src/constants.ee.ts

@@ -23,4 +23,5 @@ export const RESOURCES = {
 	workersView: ['manage'] as const,
 	workflow: ['share', 'execute', 'move', ...DEFAULT_OPERATIONS] as const,
 	folder: [...DEFAULT_OPERATIONS] as const,
+	insights: ['list'] as const,
 } as const;

packages/frontend/@n8n/design-system/src/components/N8nLoading/Loading.vue

@@ -19,6 +19,7 @@ interface LoadingProps {
 	animated?: boolean;
 	loading?: boolean;
 	rows?: number;
+	cols?: number;
 	shrinkLast?: boolean;
 	variant?: (typeof VARIANT)[number];
 }
@@ -27,6 +28,7 @@ withDefaults(defineProps<LoadingProps>(), {
 	animated: true,
 	loading: true,
 	rows: 1,
+	cols: 0,
 	shrinkLast: true,
 	variant: 'p',
 });
@@ -38,7 +40,10 @@ withDefaults(defineProps<LoadingProps>(), {
 		:animated="animated"
 		:class="['n8n-loading', `n8n-loading-${variant}`]"
 	>
-		<template #template>
+		<template v-if="cols" #template>
+			<ElSkeletonItem v-for="i in cols" :key="i" />
+		</template>
+		<template v-else #template>
 			<div v-if="variant === 'h1'">
 				<div
 					v-for="(item, index) in rows"

packages/frontend/editor-ui/src/components/Projects/ProjectHeader.test.ts

@@ -61,21 +61,6 @@ describe('ProjectHeader', () => {
 		vi.clearAllMocks();
 	});
 
-	it('should render the correct icon', async () => {
-		const { container, rerender } = renderComponent();
-
-		expect(container.querySelector('.fa-home')).toBeVisible();
-
-		projectsStore.currentProject = { type: ProjectTypes.Personal } as Project;
-		await rerender({});
-		expect(container.querySelector('.fa-user')).toBeVisible();
-
-		const projectName = 'My Project';
-		projectsStore.currentProject = { name: projectName } as Project;
-		await rerender({});
-		expect(container.querySelector('.fa-layer-group')).toBeVisible();
-	});
-
 	it('should render the correct title and subtitle', async () => {
 		const { getByText, queryByText, rerender } = renderComponent();
 		const subtitle = 'All the workflows, credentials and executions you have access to';

packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import type { UserAction } from '@n8n/design-system';
 import { N8nButton, N8nTooltip } from '@n8n/design-system';
 import { useI18n } from '@/composables/useI18n';
-import { type ProjectIcon, ProjectTypes } from '@/types/projects.types';
+import { ProjectTypes } from '@/types/projects.types';
 import { useProjectsStore } from '@/stores/projects.store';
 import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
 import { getResourcePermissions } from '@/permissions';
@@ -24,16 +24,6 @@ const emit = defineEmits<{
 	createFolder: [];
 }>();
 
-const headerIcon = computed((): ProjectIcon => {
-	if (projectsStore.currentProject?.type === ProjectTypes.Personal) {
-		return { type: 'icon', value: 'user' };
-	} else if (projectsStore.currentProject?.name) {
-		return projectsStore.currentProject.icon ?? { type: 'icon', value: 'layer-group' };
-	} else {
-		return { type: 'icon', value: 'home' };
-	}
-});
-
 const projectName = computed(() => {
 	if (!projectsStore.currentProject) {
 		return i18n.baseText('projects.menu.overview');
@@ -136,7 +126,6 @@ const onSelect = (action: string) => {
 	<div>
 		<div :class="$style.projectHeader">
 			<div :class="$style.projectDetails">
-				<ProjectIcon :icon="headerIcon" :border-less="true" size="medium" />
 				<div :class="$style.headerActions">
 					<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
 					<N8nText color="text-light">
@@ -168,6 +157,7 @@ const onSelect = (action: string) => {
 				</N8nTooltip>
 			</div>
 		</div>
+		<slot></slot>
 		<div :class="$style.actions">
 			<ProjectTabs :show-settings="showSettings" />
 		</div>

packages/frontend/editor-ui/src/components/executions/global/GlobalExecutionsList.vue

@@ -2,7 +2,6 @@
 import ConcurrentExecutionsHeader from '@/components/executions/ConcurrentExecutionsHeader.vue';
 import ExecutionsFilter from '@/components/executions/ExecutionsFilter.vue';
 import GlobalExecutionsListItem from '@/components/executions/global/GlobalExecutionsListItem.vue';
-import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { useI18n } from '@/composables/useI18n';
 import { useMessage } from '@/composables/useMessage';
 import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
@@ -334,7 +333,7 @@ const goToUpgrade = () => {
 
 <template>
 	<div :class="$style.execListWrapper">
-		<ProjectHeader />
+		<slot />
 		<div :class="$style.execListHeaderControls">
 			<ExecutionsFilter
 				:workflows="workflows"

packages/frontend/editor-ui/src/composables/useOverview.ts

@@ -0,0 +1,20 @@
+import { computed, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { VIEWS } from '@/constants';
+
+export const useOverview = () => {
+	const route = useRoute();
+
+	const isOverviewSubPage = computed(
+		() =>
+			route.name === VIEWS.WORKFLOWS ||
+			route.name === VIEWS.HOMEPAGE ||
+			route.name === VIEWS.CREDENTIALS ||
+			route.name === VIEWS.EXECUTIONS ||
+			route.name === VIEWS.FOLDERS,
+	);
+
+	return reactive({
+		isOverviewSubPage,
+	});
+};

packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.test.ts

@@ -0,0 +1,56 @@
+import InsightsSummary from '@/features/insights/components/InsightsSummary.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import type { InsightsSummaryDisplay } from '@/features/insights/insights.types';
+
+const renderComponent = createComponentRenderer(InsightsSummary);
+
+describe('InsightsSummary', () => {
+	it('should render without error', () => {
+		expect(() =>
+			renderComponent({
+				props: {
+					summary: [],
+				},
+			}),
+		).not.toThrow();
+	});
+
+	test.each<InsightsSummaryDisplay[]>([
+		[[]],
+		[
+			[
+				{ id: 'total', value: 525, deviation: 85, unit: '' },
+				{ id: 'failed', value: 14, deviation: 3, unit: '' },
+				{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%' },
+				{ id: 'timeSaved', value: 55.55555555555556, deviation: -5.164722222222222, unit: 'h' },
+				{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's' },
+			],
+		],
+		[
+			[
+				{ id: 'total', value: 525, deviation: 85, unit: '' },
+				{ id: 'failed', value: 14, deviation: 3, unit: '' },
+				{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%' },
+				{ id: 'timeSaved', value: 0, deviation: 0, unit: 'h' },
+				{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's' },
+			],
+		],
+		[
+			[
+				{ id: 'total', value: 525, deviation: -2, unit: '' },
+				{ id: 'failed', value: 14, deviation: -3, unit: '' },
+				{ id: 'failureRate', value: 1.9, deviation: 0.8, unit: '%' },
+				{ id: 'timeSaved', value: 55.55555555555556, deviation: 0, unit: 'h' },
+				{ id: 'averageRunTime', value: 2.5, deviation: 0.5, unit: 's' },
+			],
+		],
+	])('should render the summary correctly', (summary) => {
+		const { html } = renderComponent({
+			props: {
+				summary,
+			},
+		});
+
+		expect(html()).toMatchSnapshot();
+	});
+});