@n8n/frontend-module-insights 0.1.0

package/src/components/InsightsDateRangeAlert.test.ts

@@ -0,0 +1,134 @@
+import { CalendarDate } from '@internationalized/date';
+import { createComponentRenderer, defaultSettings } from '@n8n/frontend-test-utils';
+import { createTestingPinia } from '@pinia/testing';
+
+import InsightsDateRangeAlert from './InsightsDateRangeAlert.vue';
+
+const renderComponent = createComponentRenderer(InsightsDateRangeAlert, {
+	global: {
+		stubs: { N8nIcon: true },
+	},
+});
+
+describe('InsightsDateRangeAlert', () => {
+	beforeEach(() => {
+		createTestingPinia({
+			initialState: { settings: { settings: defaultSettings } },
+		});
+	});
+
+	it('does not render when earliestDataDate is null', () => {
+		const { queryByTestId } = renderComponent({
+			props: {
+				earliestDataDate: null,
+				rangeStart: new CalendarDate(2026, 6, 1),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(queryByTestId('insights-date-range-alert')).not.toBeInTheDocument();
+	});
+
+	it('does not render when rangeStart is on the earliest data date', () => {
+		const { queryByTestId } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-11T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 11),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(queryByTestId('insights-date-range-alert')).not.toBeInTheDocument();
+	});
+
+	it('does not render when rangeStart is after the earliest data date', () => {
+		const { queryByTestId } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-11T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 15),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(queryByTestId('insights-date-range-alert')).not.toBeInTheDocument();
+	});
+
+	it('renders the alert when rangeStart is before the earliest data date', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-11T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 9),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(getByTestId('insights-date-range-alert')).toBeInTheDocument();
+	});
+
+	it('shows the correct title', () => {
+		const { getByText } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-11T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 9),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(getByText('Your selected range goes back further than your data')).toBeInTheDocument();
+	});
+
+	it('uses the singular form when exactly 1 day has no data', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-11T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 10),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(getByTestId('insights-date-range-alert').textContent).toContain('1 earlier day');
+	});
+
+	it('uses the plural form when multiple days have no data', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-11T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 9),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(getByTestId('insights-date-range-alert').textContent).toContain('2 earlier days');
+	});
+
+	it('shows no-data description when the entire range is before the earliest data date', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-25T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 1),
+				rangeEnd: new CalendarDate(2026, 6, 10),
+			},
+		});
+
+		expect(getByTestId('insights-date-range-alert').textContent).toContain(
+			'Your selected range does not have any data available.',
+		);
+	});
+
+	it('hides the alert and emits dismiss when the dismiss button is clicked', async () => {
+		const { getByTestId, queryByTestId, emitted } = renderComponent({
+			props: {
+				earliestDataDate: '2026-06-11T00:00:00.000Z',
+				rangeStart: new CalendarDate(2026, 6, 9),
+				rangeEnd: new CalendarDate(2026, 6, 30),
+			},
+		});
+
+		expect(getByTestId('insights-date-range-alert')).toBeInTheDocument();
+
+		await getByTestId('insights-date-range-alert-dismiss').click();
+
+		expect(queryByTestId('insights-date-range-alert')).not.toBeInTheDocument();
+		expect(emitted('dismiss')).toHaveLength(1);
+	});
+});

package/src/components/InsightsDateRangeAlert.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date';
+import { getLocalTimeZone, parseDate } from '@internationalized/date';
+import { N8nAlert, N8nButton, N8nIcon, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { computed, ref } from 'vue';
+
+const props = defineProps<{
+	earliestDataDate: string | null;
+	rangeStart: DateValue;
+	rangeEnd: DateValue;
+}>();
+
+const emit = defineEmits<{ dismiss: [] }>();
+
+const i18n = useI18n();
+
+const isDismissed = ref(false);
+
+const alertInfo = computed(() => {
+	if (!props.earliestDataDate) return null;
+
+	const earliestCalendarDate = parseDate(props.earliestDataDate.substring(0, 10));
+	if (props.rangeStart.compare(earliestCalendarDate) >= 0) return null;
+
+	if (props.rangeEnd.compare(earliestCalendarDate) < 0) {
+		return { earliestCalendarDate, daysWithoutData: 0, noData: true as const };
+	}
+
+	const daysWithoutData = earliestCalendarDate.compare(props.rangeStart);
+	return { earliestCalendarDate, daysWithoutData, noData: false as const };
+});
+
+const formattedDate = computed(() => {
+	if (!alertInfo.value) return '';
+	const d = alertInfo.value.earliestCalendarDate.toDate(getLocalTimeZone());
+	return new Intl.DateTimeFormat(undefined, {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric',
+	}).format(d);
+});
+
+function dismiss() {
+	isDismissed.value = true;
+	emit('dismiss');
+}
+</script>
+
+<template>
+	<N8nAlert
+		v-if="alertInfo && !isDismissed"
+		type="info"
+		:show-icon="false"
+		data-test-id="insights-date-range-alert"
+	>
+		<template #icon>
+			<N8nText color="text-dark">
+				<N8nIcon icon="info" />
+			</N8nText>
+		</template>
+		<template #title>
+			<N8nText color="text-dark" bold>
+				{{ i18n.baseText('insights.dashboard.dataRangeAlert.title') }}
+			</N8nText>
+		</template>
+		<N8nText color="text-dark">
+			{{
+				alertInfo.noData
+					? i18n.baseText('insights.dashboard.dataRangeAlert.descriptionNoData', {
+							interpolate: { date: formattedDate },
+						})
+					: i18n.baseText('insights.dashboard.dataRangeAlert.description', {
+							interpolate: { date: formattedDate, days: alertInfo.daysWithoutData },
+							adjustToNumber: alertInfo.daysWithoutData,
+						})
+			}}
+		</N8nText>
+		<template #aside>
+			<N8nButton
+				size="small"
+				variant="subtle"
+				:label="i18n.baseText('insights.dashboard.dataRangeAlert.dismiss')"
+				data-test-id="insights-date-range-alert-dismiss"
+				@click="dismiss"
+			/>
+		</template>
+	</N8nAlert>
+</template>

package/src/components/InsightsPaywall.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { N8nButton, N8nIcon, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useBasePageRedirectionHelper } from '@n8n/stores/composables/useBasePageRedirectionHelper';
+
+const pageRedirectionHelper = useBasePageRedirectionHelper();
+const i18n = useI18n();
+
+const goToUpgrade = async () => {
+	await pageRedirectionHelper.goToUpgrade('insights', 'upgrade-insights');
+};
+</script>
+
+<template>
+	<div :class="$style.callout">
+		<N8nIcon icon="lock" size="xlarge"></N8nIcon>
+		<N8nText bold tag="h4" size="large">
+			{{ i18n.baseText('insights.dashboard.paywall.title') }}
+		</N8nText>
+		<N8nText>
+			{{ i18n.baseText('insights.dashboard.paywall.description') }}
+		</N8nText>
+		<N8nButton variant="solid" native-type="button" size="large" @click="goToUpgrade">
+			{{ i18n.baseText('generic.upgrade') }}
+		</N8nButton>
+	</div>
+</template>
+
+<style lang="scss" module>
+.callout {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	padding: 6rem 0;
+	align-items: center;
+	max-width: 360px;
+	margin: 0 auto;
+	text-align: center;
+	gap: 10px;
+	justify-content: center;
+}
+</style>

package/src/components/InsightsSummary.test.ts

@@ -0,0 +1,206 @@
+import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
+import { createComponentRenderer, defaultSettings } from '@n8n/frontend-test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { reactive } from 'vue';
+
+import InsightsSummary from './InsightsSummary.vue';
+import type { InsightsSummaryDisplay } from '../insights.types';
+
+vi.mock('vue-router', () => ({
+	useRouter: () => ({}),
+	useRoute: () => reactive({}),
+	RouterLink: {
+		template: '<a><slot /></a>',
+	},
+}));
+
+const renderComponent = createComponentRenderer(InsightsSummary, {
+	global: {
+		stubs: {
+			RouterLink: {
+				template: '<a><slot /></a>',
+			},
+			N8nIcon: true,
+		},
+	},
+});
+
+describe('InsightsSummary', () => {
+	const endDate = today(getLocalTimeZone());
+	const startDate = endDate.subtract({ days: 7 });
+
+	beforeEach(() => {
+		createTestingPinia({
+			initialState: { settings: { settings: defaultSettings } },
+		});
+	});
+
+	it('should render without error', () => {
+		expect(() =>
+			renderComponent({
+				props: {
+					summary: [],
+					startDate,
+					endDate,
+				},
+			}),
+		).not.toThrow();
+	});
+
+	test.each<InsightsSummaryDisplay[]>([
+		[[]],
+		[
+			[
+				{ id: 'total', value: 525, deviation: 85, unit: '', deviationUnit: '%' },
+				{ id: 'failed', value: 14, deviation: 3, unit: '', deviationUnit: '%' },
+				{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%', deviationUnit: 'pp' },
+				{
+					id: 'timeSaved',
+					value: 55.55555555555556,
+					deviation: -5.164722222222222,
+					unit: 'h',
+					deviationUnit: 'h',
+				},
+				{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's', deviationUnit: 's' },
+			],
+		],
+		[
+			[
+				{ id: 'total', value: 525, deviation: 85, unit: '', deviationUnit: '%' },
+				{ id: 'failed', value: 14, deviation: 3, unit: '', deviationUnit: '%' },
+				{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%', deviationUnit: 'pp' },
+				{ id: 'timeSaved', value: 0, deviation: 0, unit: 'h', deviationUnit: 'h' },
+				{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's', deviationUnit: 's' },
+			],
+		],
+		[
+			[
+				{ id: 'total', value: 525, deviation: -2, unit: '', deviationUnit: '%' },
+				{ id: 'failed', value: 14, deviation: -3, unit: '', deviationUnit: '%' },
+				{ id: 'failureRate', value: 1.9, deviation: 0.8, unit: '%', deviationUnit: 'pp' },
+				{ id: 'timeSaved', value: 55.55555555555556, deviation: 0, unit: 'h', deviationUnit: 'h' },
+				{ id: 'averageRunTime', value: 2.5, deviation: 0.5, unit: 's', deviationUnit: 's' },
+			],
+		],
+		[
+			[
+				{ id: 'total', value: 525, deviation: null, unit: '', deviationUnit: '%' },
+				{ id: 'failed', value: 14, deviation: null, unit: '', deviationUnit: '%' },
+				{ id: 'failureRate', value: 1.9, deviation: null, unit: '%', deviationUnit: 'pp' },
+				{
+					id: 'timeSaved',
+					value: 55.55555555555556,
+					deviation: null,
+					unit: 'h',
+					deviationUnit: 'h',
+				},
+				{ id: 'averageRunTime', value: 2.5, deviation: null, unit: 's', deviationUnit: 's' },
+			],
+		],
+		[
+			[
+				{ id: 'total', value: 0, deviation: 0, unit: '', deviationUnit: '%' },
+				{ id: 'failed', value: 0, deviation: 0, unit: '', deviationUnit: '%' },
+				{ id: 'failureRate', value: 0, deviation: 0, unit: '%', deviationUnit: 'pp' },
+				{ id: 'timeSaved', value: 0, deviation: 0, unit: 'h', deviationUnit: 'h' },
+				{ id: 'averageRunTime', value: 0, deviation: 0, unit: 's', deviationUnit: 's' },
+			],
+		],
+	])('should render the summary correctly', (summary) => {
+		const { html } = renderComponent({
+			props: {
+				summary,
+				startDate,
+				endDate,
+			},
+		});
+
+		expect(html()).toMatchSnapshot();
+	});
+
+	describe('with different date ranges', () => {
+		const testSummary: InsightsSummaryDisplay = [
+			{ id: 'total', value: 525, deviation: 85, unit: '', deviationUnit: '%' },
+			{ id: 'failed', value: 14, deviation: 3, unit: '', deviationUnit: '%' },
+			{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%', deviationUnit: 'pp' },
+			{ id: 'timeSaved', value: 55.55, deviation: -5.16, unit: 'h', deviationUnit: 'h' },
+			{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's', deviationUnit: 's' },
+		];
+
+		test.each<{
+			description: string;
+			getDates: () => { start: ReturnType<typeof today>; end?: ReturnType<typeof today> };
+		}>([
+			{
+				description: 'last 24 hours (day preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 1 }), end };
+				},
+			},
+			{
+				description: 'last 7 days (week preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 7 }), end };
+				},
+			},
+			{
+				description: 'last 14 days (2weeks preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 14 }), end };
+				},
+			},
+			{
+				description: 'last 30 days (month preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 30 }), end };
+				},
+			},
+			{
+				description: 'last 90 days (quarter preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 90 }), end };
+				},
+			},
+			{
+				description: 'last 180 days (6months preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 180 }), end };
+				},
+			},
+			{
+				description: 'last 365 days (year preset)',
+				getDates: () => {
+					const end = today(getLocalTimeZone());
+					return { start: end.subtract({ days: 365 }), end };
+				},
+			},
+			{
+				description: 'custom range',
+				getDates: () => {
+					return {
+						start: new CalendarDate(2025, 9, 6),
+						end: new CalendarDate(2025, 9, 13),
+					};
+				},
+			},
+		])('should render with $description', ({ getDates }) => {
+			const { start, end } = getDates();
+
+			const { html } = renderComponent({
+				props: {
+					summary: testSummary,
+					startDate: start,
+					endDate: end,
+				},
+			});
+
+			expect(html()).toMatchSnapshot();
+		});
+	});
+});