feat: Environments release using source control (#6653)

* initial telemetry setup and adjusted pull return

* quicksave before merge

* feat: add conflicting workflow list to pull modal

* feat: update source control pull modal

* fix: fix linting issue

* feat: add Enter keydown event for submitting source control push modal (no-changelog)

feat: add Enter keydown event for submitting source control push modal

* quicksave

* user workflow table for export

* improve telemetry data

* pull api telemetry

* fix lint

* Copy tweaks.

* remove authorName and authorEmail and pick from user

* rename owners.json to workflow_owners.json

* ignore credential conflicts on pull

* feat: several push/pull flow changes and design update

* pull and push return same data format

* fix: add One last step toast for successful pull

* feat: add up to date pull toast

* fix: add proper Learn more link for push and pull modals

* do not await tracking being sent

* fix import

* fix await

* add more sourcecontrolfile status

* Minor copy tweak for "More info".

* Minor copy tweak for "More info".

* ignore variable_stub conflicts on pull

* ignore whitespace differences

* do not show remote workflows that are not yet created

* fix telemetry

* fix toast when pulling deleted wf

* lint fix

* refactor and make some imports dynamic

* fix variable edit validation

* fix telemetry response

* improve telemetry

* fix unintenional delete commit

* fix status unknown issue

* fix up to date toast

* do not export active state and reapply versionid

* use update instead of upsert

* fix: show all workflows when clicking push to git

* feat: update Up to date pull translation

* fix: update read only env checks

* do not update versionid of only active flag changes

* feat: prevent access to new workflow and templates import when read only env

* feat: send only active state and version if workflow state is not dirty

* fix: Detect when only active state has changed and prevent generation a new version ID

* feat: improve readonly env messages

* make getPreferences public

* fix telemetry issue

* fix: add partial workflow update based on dirty state when changing active state

* update unit tests

* fix: remove unsaved changes check in readOnlyEnv

* fix: disable push to git button when read onyl env

* fix: update readonly toast duration

* fix: fix pinning and title input in protected mode

* initial commit (NOT working)

* working push

* cleanup and implement pull

* fix getstatus

* update import to new method

* var and tag diffs are no conflicts

* only show pull conflict for workflows

* refactor and ignore faulty credentials

* add sanitycheck for missing git folder

* prefer fetch over pull and limit depth to 1

* back to pull...

* fix setting branch on initial connect

* fix test

* remove clean workfolder

* refactor: Remove some unnecessary code

* Fixed links to docs.

* fix getstatus query params

* lint fix

* dialog to show local and remote name on conflict

* only show remote name on conflict

* fix credential expression export

* fix: Broken test

* dont show toast on pull with empty var/tags and refactor

* apply frontend changes from old branch

* fix tag with same name import

* fix buttons shown for non instance owners

* prepare local storage key for removal

* refactor: Change wording on pushing and pulling

* refactor: Change menu item

* test: Fix broken test

* Update packages/cli/src/environments/sourceControl/types/sourceControlPushWorkFolder.ts

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

---------

Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

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

@@ -315,6 +315,8 @@ import {
 	N8nPlusEndpointType,
 	EVENT_PLUS_ENDPOINT_CLICK,
 } from '@/plugins/endpoints/N8nPlusEndpointType';
+import type { ElNotificationComponent } from 'element-ui/types/notification';
+import { sourceControlEventBus } from '@/event-bus/source-control';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -362,6 +364,8 @@ export default defineComponent({
 	watch: {
 		// Listen to route changes and load the workflow accordingly
 		$route(to: Route, from: Route) {
+			this.readOnlyEnvRouteCheck();
+
 			const currentTab = getNodeViewTab(to);
 			const nodeViewNotInitialized = !this.uiStore.nodeViewInitialized;
 			let workflowChanged =
@@ -422,7 +426,7 @@ export default defineComponent({
 			next();
 			return;
 		}
-		if (this.uiStore.stateIsDirty) {
+		if (this.uiStore.stateIsDirty && !this.readOnlyEnv) {
 			const confirmModal = await this.confirm(
 				this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
 				{
@@ -620,6 +624,7 @@ export default defineComponent({
 			isProductionExecutionPreview: false,
 			enterTimer: undefined as undefined | ReturnType<typeof setTimeout>,
 			exitTimer: undefined as undefined | ReturnType<typeof setTimeout>,
+			readOnlyNotification: null as null | ElNotificationComponent,
 			// jsplumb automatically deletes all loose connections which is in turn recorded
 			// in undo history as a user action.
 			// This should prevent automatically removed connections from populating undo stack
@@ -637,13 +642,24 @@ export default defineComponent({
 	},
 	methods: {
 		editAllowedCheck(): boolean {
+			if (this.readOnlyNotification?.visible) {
+				return;
+			}
 			if (this.isReadOnlyRoute || this.readOnlyEnv) {
-				this.showMessage({
-					// title: 'Workflow can not be changed!',
-					title: this.$locale.baseText('genericHelpers.showMessage.title'),
-					message: this.$locale.baseText('genericHelpers.showMessage.message'),
+				this.readOnlyNotification = this.showMessage({
+					title: this.$locale.baseText(
+						this.readOnlyEnv
+							? `readOnlyEnv.showMessage.${this.isReadOnlyRoute ? 'executions' : 'workflows'}.title`
+							: 'readOnly.showMessage.executions.title',
+					),
+					message: this.$locale.baseText(
+						this.readOnlyEnv
+							? `readOnlyEnv.showMessage.${
+									this.isReadOnlyRoute ? 'executions' : 'workflows'
+							  }.message`
+							: 'readOnly.showMessage.executions.message',
+					),
 					type: 'info',
-					duration: 0,
 					dangerouslyUseHTMLString: true,
 				});
 
@@ -1465,6 +1481,10 @@ export default defineComponent({
 		 * This method gets called when data got pasted into the window
 		 */
 		async receivedCopyPasteData(plainTextData: string): Promise<void> {
+			if (this.readOnlyEnv) {
+				return;
+			}
+
 			const currentTab = getNodeViewTab(this.$route);
 			if (currentTab === MAIN_HEADER_TABS.WORKFLOW) {
 				let workflowData: IWorkflowDataUpdate | undefined;
@@ -2550,8 +2570,7 @@ export default defineComponent({
 				const templateId = this.$route.params.id;
 				await this.openWorkflowTemplate(templateId);
 			} else {
-				const result = this.uiStore.stateIsDirty;
-				if (result) {
+				if (this.uiStore.stateIsDirty && !this.readOnlyEnv) {
 					const confirmModal = await this.confirm(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
 						{
@@ -3821,6 +3840,41 @@ export default defineComponent({
 				this.stopLoading();
 			}
 		},
+		readOnlyEnvRouteCheck() {
+			if (
+				this.readOnlyEnv &&
+				[VIEWS.NEW_WORKFLOW, VIEWS.TEMPLATE_IMPORT].includes(this.$route.name)
+			) {
+				this.$nextTick(async () => {
+					this.resetWorkspace();
+					this.uiStore.stateIsDirty = false;
+
+					await this.$router.replace({ name: VIEWS.WORKFLOWS });
+				});
+			}
+		},
+	},
+	async onSourceControlPull() {
+		let workflowId = null as string | null;
+		if (this.$route.params.name) {
+			workflowId = this.$route.params.name;
+		}
+
+		try {
+			await Promise.all([this.loadCredentials(), this.loadVariables(), this.tagsStore.fetchAll()]);
+
+			if (workflowId !== null && !this.uiStore.stateIsDirty) {
+				const workflow: IWorkflowDb | undefined = await this.workflowsStore.fetchWorkflow(
+					workflowId,
+				);
+				if (workflow) {
+					this.titleSet(workflow.name, 'IDLE');
+					await this.openWorkflow(workflow);
+				}
+			}
+		} catch (error) {
+			console.error(error);
+		}
 	},
 	async mounted() {
 		this.resetWorkspace();
@@ -3850,6 +3904,7 @@ export default defineComponent({
 			);
 			return;
 		}
+
 		ready(async () => {
 			try {
 				try {
@@ -3913,6 +3968,10 @@ export default defineComponent({
 				}, promptTimeout);
 			}
 		}
+
+		sourceControlEventBus.on('pull', this.onSourceControlPull);
+
+		this.readOnlyEnvRouteCheck();
 	},
 	activated() {
 		const openSideMenu = this.uiStore.addFirstStepOnLoad;
@@ -3976,6 +4035,7 @@ export default defineComponent({
 		nodeViewEventBus.off('importWorkflowData', this.onImportWorkflowDataEvent);
 		nodeViewEventBus.off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
 		this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+		sourceControlEventBus.off('pull', this.onSourceControlPull);
 	},
 });
 </script>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, onMounted } from 'vue';
 import type { Rule, RuleGroup } from 'n8n-design-system/types';
-import { MODAL_CONFIRM, VALID_EMAIL_REGEX } from '@/constants';
+import { MODAL_CONFIRM } from '@/constants';
 import { useUIStore, useSourceControlStore } from '@/stores';
 import { useToast, useMessage, useLoadingService, useI18n } from '@/composables';
 import CopyInput from '@/components/CopyInput.vue';
@@ -13,9 +13,6 @@ const toast = useToast();
 const message = useMessage();
 const loadingService = useLoadingService();
 
-const sourceControlDocsSetupUrl = computed(() =>
-	locale.baseText('settings.sourceControl.docs.setup.url'),
-);
 const isConnected = ref(false);
 const branchNameOptions = computed(() =>
 	sourceControlStore.preferences.branches.map((branch) => ({
@@ -26,10 +23,9 @@ const branchNameOptions = computed(() =>
 
 const onConnect = async () => {
 	loadingService.startLoading();
+	loadingService.setLoadingText(locale.baseText('settings.sourceControl.loading.connecting'));
 	try {
 		await sourceControlStore.savePreferences({
-			authorName: sourceControlStore.preferences.authorName,
-			authorEmail: sourceControlStore.preferences.authorEmail,
 			repositoryUrl: sourceControlStore.preferences.repositoryUrl,
 		});
 		await sourceControlStore.getBranches();
@@ -115,9 +111,6 @@ onMounted(async () => {
 
 const formValidationStatus = reactive<Record<string, boolean>>({
 	repoUrl: false,
-	authorName: false,
-	authorEmail: false,
-	branchName: false,
 });
 
 function onValidate(key: string, value: boolean) {
@@ -135,28 +128,9 @@ const repoUrlValidationRules: Array<Rule | RuleGroup> = [
 	},
 ];
 
-const authorNameValidationRules: Array<Rule | RuleGroup> = [{ name: 'REQUIRED' }];
-
-const authorEmailValidationRules: Array<Rule | RuleGroup> = [
-	{ name: 'REQUIRED' },
-	{
-		name: 'MATCH_REGEX',
-		config: {
-			regex: VALID_EMAIL_REGEX,
-			message: locale.baseText('settings.sourceControl.authorEmailInvalid'),
-		},
-	},
-];
-
+const validForConnection = computed(() => formValidationStatus.repoUrl);
 const branchNameValidationRules: Array<Rule | RuleGroup> = [{ name: 'REQUIRED' }];
 
-const validForConnection = computed(
-	() =>
-		formValidationStatus.repoUrl &&
-		formValidationStatus.authorName &&
-		formValidationStatus.authorEmail,
-);
-
 async function refreshSshKey() {
 	try {
 		const confirmation = await message.confirm(
@@ -205,7 +179,7 @@ const refreshBranches = async () => {
 			<n8n-callout theme="secondary" icon="info-circle" class="mt-2xl mb-l">
 				<i18n path="settings.sourceControl.description">
 					<template #link>
-						<a :href="sourceControlDocsSetupUrl" target="_blank">
+						<a :href="locale.baseText('settings.sourceControl.docs.url')" target="_blank">
 							{{ locale.baseText('settings.sourceControl.description.link') }}
 						</a>
 					</template>
@@ -241,35 +215,6 @@ const refreshBranches = async () => {
 					>
 				</div>
 			</div>
-			<div :class="[$style.group, $style.groupFlex]">
-				<div>
-					<label for="authorName">{{ locale.baseText('settings.sourceControl.authorName') }}</label>
-					<n8n-form-input
-						label
-						id="authorName"
-						name="authorName"
-						validateOnBlur
-						:validationRules="authorNameValidationRules"
-						v-model="sourceControlStore.preferences.authorName"
-						@validate="(value) => onValidate('authorName', value)"
-					/>
-				</div>
-				<div>
-					<label for="authorEmail">{{
-						locale.baseText('settings.sourceControl.authorEmail')
-					}}</label>
-					<n8n-form-input
-						label
-						type="email"
-						id="authorEmail"
-						name="authorEmail"
-						validateOnBlur
-						:validationRules="authorEmailValidationRules"
-						v-model="sourceControlStore.preferences.authorEmail"
-						@validate="(value) => onValidate('authorEmail', value)"
-					/>
-				</div>
-			</div>
 			<div v-if="sourceControlStore.preferences.publicKey" :class="$style.group">
 				<label>{{ locale.baseText('settings.sourceControl.sshKey') }}</label>
 				<div :class="{ [$style.sshInput]: !isConnected }">
@@ -293,9 +238,11 @@ const refreshBranches = async () => {
 				<n8n-notice type="info" class="mt-s">
 					<i18n path="settings.sourceControl.sshKeyDescription">
 						<template #link>
-							<a :href="sourceControlDocsSetupUrl" target="_blank">{{
-								locale.baseText('settings.sourceControl.sshKeyDescriptionLink')
-							}}</a>
+							<a
+								:href="locale.baseText('settings.sourceControl.docs.setup.ssh.url')"
+								target="_blank"
+								>{{ locale.baseText('settings.sourceControl.sshKeyDescriptionLink') }}</a
+							>
 						</template>
 					</i18n>
 				</n8n-notice>
@@ -352,14 +299,9 @@ const refreshBranches = async () => {
 						v-model="sourceControlStore.preferences.branchReadOnly"
 						:class="$style.readOnly"
 					>
-						<i18n path="settings.sourceControl.readonly">
+						<i18n path="settings.sourceControl.protected">
 							<template #bold>
-								<strong>{{ locale.baseText('settings.sourceControl.readonly.bold') }}</strong>
-							</template>
-							<template #link>
-								<a :href="sourceControlDocsSetupUrl" target="_blank">
-									{{ locale.baseText('settings.sourceControl.readonly.link') }}
-								</a>
+								<strong>{{ locale.baseText('settings.sourceControl.protected.bold') }}</strong>
 							</template>
 						</i18n>
 					</n8n-checkbox>

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

@@ -13,6 +13,24 @@
 		@click:add="addWorkflow"
 		@update:filters="filters = $event"
 	>
+		<template #add-button="{ disabled }">
+			<n8n-tooltip :disabled="!readOnlyEnv">
+				<div>
+					<n8n-button
+						size="large"
+						block
+						:disabled="disabled"
+						@click="addWorkflow"
+						data-test-id="resources-list-add"
+					>
+						{{ $locale.baseText(`workflows.add`) }}
+					</n8n-button>
+				</div>
+				<template #content>
+					{{ $locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip') }}
+				</template>
+			</n8n-tooltip>
+		</template>
 		<template #default="{ data, updateItemSize }">
 			<workflow-card
 				data-test-id="resources-list-item"

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

@@ -80,8 +80,6 @@ describe('SettingsSourceControl', () => {
 		expect(connectButton).toBeDisabled();
 
 		const repoUrlInput = container.querySelector('input[name="repoUrl"]')!;
-		const authorName = container.querySelector('input[name="authorName"]')!;
-		const authorEmail = container.querySelector('input[name="authorEmail"]')!;
 
 		await userEvent.click(repoUrlInput);
 		await userEvent.type(repoUrlInput, 'git@github');
@@ -91,21 +89,6 @@ describe('SettingsSourceControl', () => {
 		await userEvent.click(repoUrlInput);
 		await userEvent.type(repoUrlInput, '.com:john/n8n-data.git');
 		await userEvent.tab();
-		expect(connectButton).toBeDisabled();
-
-		await userEvent.click(authorName);
-		await userEvent.type(authorName, 'John Doe');
-		await userEvent.tab();
-		expect(connectButton).toBeDisabled();
-
-		await userEvent.click(authorEmail);
-		await userEvent.type(authorEmail, 'john@example.');
-		await userEvent.tab();
-		expect(connectButton).toBeDisabled();
-
-		await userEvent.click(authorEmail);
-		await userEvent.type(authorEmail, 'com');
-		await userEvent.tab();
 
 		await waitFor(() => expect(connectButton).toBeEnabled());
 		expect(queryByTestId('source-control-save-settings-button')).not.toBeInTheDocument();