feat: Version control mvp (#6271)

* implement basic git service

* cleanup connected prop

* add skeleton of git functions

* initial import/export setup

* split out export service

* refactor and improve export

* begin import

* more commands and basic import

* clean up imports with transactions

* work folder import functions

* reintroduce versionid

* add missing import to pull workfolder

* add get-status endpoint

* add cleanup to disconnect

* add initRepo options

* add more checks and cleanup

* minor cleanup

* refactor prefs

* fix server.ts

* fix sending deleted files

* rename files to ee

* add variable override and fix critical cred import bug

* fix mkdir race condition

* make initRepo default to true

* fix front back integration

* improve connect flow

* add comment to generated ssh key

* fix(editor): use useToast composable

* fix buttons size

* commenting out repo init for now

* fix(editor): update UI logic

* fix(editor): remove console.log

* fix(editor): remove unused ref

* adjust endpoints for improved UI

* fix(editor): add push and pull buttons

* keep or not ssh key

* switching file name to id

* fix(editor): add success messages, fix save button

* fixed faulty diff preventing pull

* fix build

* fix(editor): adding loader to VC components

* removing duplicate exports

* improve conflict finding on push pull

* manage pull conflict

* alternate push pull

* fix pull confirmation

* fix rm and credential export/import

* switch to alternative pull implementation

* fix initial commit

* fix(editor): subscribing to VC store action to refresh lists

* fix(editor): wrap VC store actions with try

* feat: add fine-grained file selection for push action

* fix: close modal after successful push

* fix(editor): VC preferences validation

* fix confirm

* fix: update endpoint to /get-status

* feat: update pull modal override changes message

* fix missing wf error

* undo

* removing connect endpoint

* fix(editor): add button titles

* fix(editor): cleaning up store action

* add version-control/set-read-only protection

* fix(editor): adding set branch readonly

* fix(editor): remove Push button if branch set to readonly

* fix(editor): fix some styles

* fix(editor): remove duplicate and delete actions in WF list when branch is readonly

* fix: load status before opening selective push modal

* fix(editor): extend readonly logic

* add cleanup after failed initRepo

* fix deleted files crashing get-status

* fix n8n-checkbox in staging dialog

* fix(editor): fix loading

* fix(editor): resize buttons

* fix(editor): fix translation

* fix(editor): fix copy text size

* fix(editor): fix copy text size

* fix(editor): add disconnection confirmation

* fix(editor): add disconnection confirmation

* fix(editor): set large buttons

* add public api Pull endpoint

* feat: add refresh ssh key

* return prefs when new keys are generated

* fix(editor): adding readOnly mode to main header

* fix(editor): adding readOnly mode to workflow settings

* improve credential owner import

* add middleware to endpoints

* improve public api error/doc

* do not create branch if one already exists

* update wordings for connect toasts

* fix(editor): updating and separating readonly modes

* fix(editor): fix readonly mode in WF list

* fix(editor): disable elements dragging on canvas in readonly mode (WIP: not working when NodeView page is loaded first)

* fix(editor): fix canvas draggables in readonly env

* fix(editor): remove unused variables

* fix(editor): hide actions in node connections when readonly

* fix(editor): hide actions in node connections when readonly

* fix(editor): disable Save button when readonly

* fix(editor): disable Save settings if no branch is selected

* fix(editor): lint fix

* fix(editor): update snapshots

* fix(editor): replace Loading... text

* fix(editor): reset Loading... text

* reset branchname on disconnect

* fix(editor): adding some translations

* fix(editor): fix unit test

* fix(editor): fix loading

* fix(editor): set settings saved message

* fix(editor): update connection flag

* fix branchName not returning after connect

* temporary (but still breaking) fix for postgres

* fix(editor): adding tooltip to Push/Pull buttons when they're collapsed

* fix(editor): enabled activator in readonly mode

* fix test

* fix(editor): disabling new item addition for workflows in readonly mode

* fix(editor): modify Pull/Push button tooltips

* do not commit empty variables file

---------

Co-authored-by: Michael Auerswald <michael.auerswald@gmail.com>
Co-authored-by: Romain Minaud <romain.minaud@gmail.com>
Co-authored-by: Alex Grozav <alex@grozav.com>

packages/editor-ui/src/stores/canvas.store.ts

@@ -1,11 +1,14 @@
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { v4 as uuid } from 'uuid';
 import normalizeWheel from 'normalize-wheel';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { useUIStore } from '@/stores/ui.store';
-import { useHistoryStore } from '@/stores/history.store';
+import {
+	useWorkflowsStore,
+	useNodeTypesStore,
+	useUIStore,
+	useHistoryStore,
+	useVersionControlStore,
+} from '@/stores';
 import type { INodeUi, XYPosition } from '@/Interface';
 import { scaleBigger, scaleReset, scaleSmaller } from '@/utils';
 import { START_NODE_TYPE } from '@/constants';
@@ -40,6 +43,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 	const nodeTypesStore = useNodeTypesStore();
 	const uiStore = useUIStore();
 	const historyStore = useHistoryStore();
+	const versionControlStore = useVersionControlStore();
 
 	const jsPlumbInstanceRef = ref<BrowserJsPlumbInstance>();
 	const isDragging = ref<boolean>(false);
@@ -55,6 +59,13 @@ export const useCanvasStore = defineStore('canvas', () => {
 	const isDemo = ref<boolean>(false);
 	const nodeViewScale = ref<number>(1);
 	const canvasAddButtonPosition = ref<XYPosition>([1, 1]);
+	const readOnlyEnv = computed(() => versionControlStore.preferences.branchReadOnly);
+
+	watch(readOnlyEnv, (readOnly) => {
+		if (jsPlumbInstanceRef.value) {
+			jsPlumbInstanceRef.value.elementsDraggable = !readOnly;
+		}
+	});
 
 	Connectors.register(N8nConnector.type, N8nConnector);
 	N8nPlusEndpointRenderer.register();
@@ -166,6 +177,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 			paintStyle: CONNECTOR_PAINT_STYLE_DEFAULT,
 			hoverPaintStyle: CONNECTOR_PAINT_STYLE_PRIMARY,
 			connectionOverlays: CONNECTOR_ARROW_OVERLAYS,
+			elementsDraggable: !readOnlyEnv.value,
 			dragOptions: {
 				cursor: 'pointer',
 				grid: { w: GRID_SIZE, h: GRID_SIZE },

packages/editor-ui/src/stores/index.ts

@@ -22,3 +22,5 @@ export * from './webhooks.store';
 export * from './workflows.ee.store';
 export * from './workflows.store';
 export * from './cloudPlan.store';
+export * from './versionControl.store';
+export * from './sso.store';

packages/editor-ui/src/stores/ui.store.ts

@@ -31,6 +31,7 @@ import {
 	WORKFLOW_SETTINGS_MODAL_KEY,
 	WORKFLOW_SHARE_MODAL_KEY,
 	USER_ACTIVATION_SURVEY_MODAL,
+	VERSION_CONTROL_PUSH_MODAL_KEY,
 } from '@/constants';
 import type {
 	CurlToJSONResponse,
@@ -137,6 +138,9 @@ export const useUIStore = defineStore(STORES.UI, {
 			[USER_ACTIVATION_SURVEY_MODAL]: {
 				open: false,
 			},
+			[VERSION_CONTROL_PUSH_MODAL_KEY]: {
+				open: false,
+			},
 		},
 		modalStack: [],
 		sidebarMenuCollapsed: true,

packages/editor-ui/src/stores/versionControl.store.ts

@@ -1,6 +1,5 @@
 import { computed, reactive } from 'vue';
 import { defineStore } from 'pinia';
-import type { IDataObject } from 'n8n-workflow';
 import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings.store';
 import * as vcApi from '@/api/versionControl';
@@ -16,7 +15,7 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 	);
 
 	const preferences = reactive<VersionControlPreferences>({
-		currentBranch: '',
+		branchName: '',
 		branches: [],
 		authorName: '',
 		authorEmail: '',
@@ -27,44 +26,33 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 		publicKey: '',
 	});
 
-	const state = reactive({
-		branches: [] as string[],
-		currentBranch: '',
-		authorName: '',
-		authorEmail: '',
-		repositoryUrl: '',
-		sshKey: '',
+	const state = reactive<{
+		commitMessage: string;
+	}>({
 		commitMessage: 'commit message',
 	});
 
-	const initSsh = async (data: IDataObject) => {
-		state.sshKey = await vcApi.initSsh(rootStore.getRestApiContext, data);
-	};
-
-	const initRepository = async () => {
-		const { branches, currentBranch } = await vcApi.initRepository(rootStore.getRestApiContext);
-		state.branches = branches;
-		state.currentBranch = currentBranch;
-	};
-
-	const sync = async (data: { commitMessage: string }) => {
+	const pushWorkfolder = async (data: { commitMessage: string; fileNames?: string[] }) => {
 		state.commitMessage = data.commitMessage;
-		return vcApi.sync(rootStore.getRestApiContext, { message: data.commitMessage });
+		await vcApi.pushWorkfolder(rootStore.getRestApiContext, {
+			message: data.commitMessage,
+			...(data.fileNames ? { fileNames: data.fileNames } : {}),
+		});
 	};
-	const getConfig = async () => {
-		const { remoteRepository, name, email, currentBranch } = await vcApi.getConfig(
-			rootStore.getRestApiContext,
-		);
-		state.repositoryUrl = remoteRepository;
-		state.authorName = name;
-		state.authorEmail = email;
-		state.currentBranch = currentBranch;
+
+	const pullWorkfolder = async (force: boolean) => {
+		await vcApi.pullWorkfolder(rootStore.getRestApiContext, { force });
 	};
 
 	const setPreferences = (data: Partial<VersionControlPreferences>) => {
 		Object.assign(preferences, data);
 	};
 
+	const getBranches = async () => {
+		const data = await vcApi.getBranches(rootStore.getRestApiContext);
+		setPreferences(data);
+	};
+
 	const getPreferences = async () => {
 		const data = await vcApi.getPreferences(rootStore.getRestApiContext);
 		setPreferences(data);
@@ -75,16 +63,52 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 		setPreferences(data);
 	};
 
+	const setBranch = async (branch: string) => {
+		const data = await vcApi.setBranch(rootStore.getRestApiContext, branch);
+		setPreferences({ ...data, connected: true });
+	};
+
+	const disconnect = async (keepKeyPair: boolean) => {
+		await vcApi.disconnect(rootStore.getRestApiContext, keepKeyPair);
+		setPreferences({ connected: false, branches: [] });
+	};
+
+	const generateKeyPair = async () => {
+		await vcApi.generateKeyPair(rootStore.getRestApiContext);
+		const data = await vcApi.getPreferences(rootStore.getRestApiContext); // To be removed once the API is updated
+
+		preferences.publicKey = data.publicKey;
+
+		return { publicKey: data.publicKey };
+	};
+
+	const getStatus = async () => {
+		return vcApi.getStatus(rootStore.getRestApiContext);
+	};
+
+	const getAggregatedStatus = async () => {
+		return vcApi.getAggregatedStatus(rootStore.getRestApiContext);
+	};
+
+	const setBranchReadonly = async (branchReadOnly: boolean) => {
+		return vcApi.setBranchReadonly(rootStore.getRestApiContext, branchReadOnly);
+	};
+
 	return {
 		isEnterpriseVersionControlEnabled,
 		state,
 		preferences,
-		initSsh,
-		initRepository,
-		sync,
-		getConfig,
+		pushWorkfolder,
+		pullWorkfolder,
 		getPreferences,
 		setPreferences,
+		generateKeyPair,
+		getBranches,
 		savePreferences,
+		setBranch,
+		disconnect,
+		getStatus,
+		getAggregatedStatus,
+		setBranchReadonly,
 	};
 });