feat: Audit Logs - add new page to frontend [WIP] (no-changelog) (#6418)

* feat: Audit Logs (WIP)

* feat: Audit Logs license depending contents

* fix(editor): simplify import

* fix(editor): add audit logs to server

packages/editor-ui/src/views/SettingsAuditLogs.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { useI18n } from '@/composables';
+import { useUIStore, useAuditLogsStore } from '@/stores';
+
+const { i18n: locale } = useI18n();
+const uiStore = useUIStore();
+const auditLogsStore = useAuditLogsStore();
+
+const goToUpgrade = () => {
+	uiStore.goToUpgrade('audit-logs', 'upgrade-audit-logs');
+};
+</script>
+
+<template>
+	<div>
+		<n8n-heading size="2xlarge" tag="h1">{{
+			locale.baseText('settings.auditLogs.title')
+		}}</n8n-heading>
+		<div
+			v-if="auditLogsStore.isEnterpriseAuditLogsFeatureEnabled"
+			data-test-id="audit-logs-content-licensed"
+		></div>
+		<n8n-action-box
+			v-else
+			data-test-id="audit-logs-content-unlicensed"
+			:class="$style.actionBox"
+			:description="locale.baseText('settings.auditLogs.actionBox.description')"
+			:buttonText="locale.baseText('settings.auditLogs.actionBox.buttonText')"
+			@click="goToUpgrade"
+		>
+			<template #heading>
+				<span>{{ locale.baseText('settings.auditLogs.actionBox.title') }}</span>
+			</template>
+		</n8n-action-box>
+	</div>
+</template>
+
+<style lang="scss" module>
+.actionBox {
+	margin: var(--spacing-2xl) 0 0;
+}
+</style>

packages/editor-ui/src/views/__tests__/SettingsAuditLogs.test.ts

@@ -0,0 +1,57 @@
+import { vi } from 'vitest';
+import { render } from '@testing-library/vue';
+import { createPinia, setActivePinia, PiniaVuePlugin } from 'pinia';
+import { merge } from 'lodash-es';
+import { i18nInstance } from '@/plugins/i18n';
+import { useAuditLogsStore, useSettingsStore } from '@/stores';
+import SettingsAuditLogs from '@/views/SettingsAuditLogs.vue';
+
+let pinia: ReturnType<typeof createPinia>;
+let settingsStore: ReturnType<typeof useSettingsStore>;
+let auditLogsStore: ReturnType<typeof useAuditLogsStore>;
+
+const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
+	render(
+		SettingsAuditLogs,
+		merge(
+			{
+				pinia,
+				i18n: i18nInstance,
+			},
+			renderOptions,
+		),
+		(vue) => {
+			vue.use(PiniaVuePlugin);
+		},
+	);
+
+describe('SettingsAuditLogs', () => {
+	beforeEach(() => {
+		pinia = createPinia();
+		setActivePinia(pinia);
+		settingsStore = useSettingsStore();
+		auditLogsStore = useAuditLogsStore();
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render paywall state when there is no license', () => {
+		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(false);
+
+		const { getByTestId, queryByTestId } = renderComponent();
+
+		expect(queryByTestId('audit-logs-content-licensed')).not.toBeInTheDocument();
+		expect(getByTestId('audit-logs-content-unlicensed')).toBeInTheDocument();
+	});
+
+	it('should render licensed content', () => {
+		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+
+		const { getByTestId, queryByTestId } = renderComponent();
+
+		expect(getByTestId('audit-logs-content-licensed')).toBeInTheDocument();
+		expect(queryByTestId('audit-logs-content-unlicensed')).not.toBeInTheDocument();
+	});
+});