feat(editor): Version control paywall (WIP) (#6030)

* feat(editor): Version control paywall (WIP)

* fix(editor): remove version control docs link

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

@@ -1,11 +1,40 @@
 <script lang="ts" setup>
 import { i18n as locale } from '@/plugins/i18n';
+import { useVersionControlStore } from '@/stores/versionControl';
+import { useUIStore } from '@/stores/ui';
+
+const versionControlStore = useVersionControlStore();
+const uiStore = useUIStore();
+
+const goToUpgrade = () => {
+	uiStore.goToUpgrade('version-control', 'upgrade-version-control');
+};
 </script>
 
 <template>
 	<div>
 		<n8n-heading size="2xlarge">{{ locale.baseText('settings.versionControl.title') }}</n8n-heading>
+		<div
+			v-if="versionControlStore.isEnterpriseVersionControlEnabled"
+			data-test-id="version-control-content-licensed"
+		></div>
+		<n8n-action-box
+			v-else
+			data-test-id="version-control-content-unlicensed"
+			:class="$style.actionBox"
+			:description="locale.baseText('settings.versionControl.actionBox.description')"
+			:buttonText="locale.baseText('settings.versionControl.actionBox.buttonText')"
+			@click="goToUpgrade"
+		>
+			<template #heading>
+				<span>{{ locale.baseText('settings.versionControl.actionBox.title') }}</span>
+			</template>
+		</n8n-action-box>
 	</div>
 </template>
 
-<style lang="scss" module></style>
+<style lang="scss" module>
+.actionBox {
+	margin: var(--spacing-2xl) 0 0;
+}
+</style>

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

@@ -0,0 +1,60 @@
+import { PiniaVuePlugin } from 'pinia';
+import { render } from '@testing-library/vue';
+import { createTestingPinia } from '@pinia/testing';
+import { merge } from 'lodash-es';
+import { STORES } from '@/constants';
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { i18n } from '@/plugins/i18n';
+import SettingsVersionControl from '@/views/SettingsVersionControl.vue';
+import { useVersionControlStore } from '@/stores/versionControl';
+
+let pinia: ReturnType<typeof createTestingPinia>;
+let versionControlStore: ReturnType<typeof useVersionControlStore>;
+
+const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
+	render(
+		SettingsVersionControl,
+		merge(
+			{
+				pinia,
+				i18n,
+			},
+			renderOptions,
+		),
+		(vue) => {
+			vue.use(PiniaVuePlugin);
+		},
+	);
+
+describe('SettingsSso', () => {
+	beforeEach(() => {
+		pinia = createTestingPinia({
+			initialState: {
+				[STORES.SETTINGS]: {
+					settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
+				},
+			},
+		});
+		versionControlStore = useVersionControlStore(pinia);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render paywall state when there is no license', () => {
+		const { getByTestId, queryByTestId } = renderComponent();
+
+		expect(queryByTestId('version-control-content-licensed')).not.toBeInTheDocument();
+		expect(getByTestId('version-control-content-unlicensed')).toBeInTheDocument();
+	});
+
+	it('should render licensed content', () => {
+		vi.spyOn(versionControlStore, 'isEnterpriseVersionControlEnabled', 'get').mockReturnValue(true);
+
+		const { getByTestId, queryByTestId } = renderComponent();
+
+		expect(getByTestId('version-control-content-licensed')).toBeInTheDocument();
+		expect(queryByTestId('version-control-content-unlicensed')).not.toBeInTheDocument();
+	});
+});