fix(editor): Adding branch color (#6380)

* fix(editor): Adding branch color * fix(editor): backend refactor preferences update * fix(editor): frontend refactor preferences update
2023-06-06 11:23:53 +02:00
parent e95e8de500
commit dba3f44bc0
8 changed files with 75 additions and 112 deletions
--- a/packages/editor-ui/src/api/versionControl.ts
+++ b/packages/editor-ui/src/api/versionControl.ts
@@ -9,6 +9,14 @@ import type { IDataObject } from 'n8n-workflow';

 const versionControlApiRoot = '/version-control';

+const createPreferencesRequestFn =
+	(method: 'POST' | 'PATCH') =>
+	async (
+		context: IRestApiContext,
+		preferences: Partial<VersionControlPreferences>,
+	): Promise<VersionControlPreferences> =>
+		makeRestApiRequest(context, method, `${versionControlApiRoot}/preferences`, preferences);
+
 export const pushWorkfolder = async (
 	context: IRestApiContext,
 	data: IDataObject,
@@ -29,19 +37,8 @@ export const getBranches = async (
 	return makeRestApiRequest(context, 'GET', `${versionControlApiRoot}/get-branches`);
 };

-export const setBranch = async (
-	context: IRestApiContext,
-	branch: string,
-): Promise<{ branches: string[]; currentBranch: string }> => {
-	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/set-branch`, { branch });
-};
-
-export const setPreferences = async (
-	context: IRestApiContext,
-	preferences: Partial<VersionControlPreferences>,
-): Promise<VersionControlPreferences> => {
-	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/preferences`, preferences);
-};
+export const savePreferences = createPreferencesRequestFn('POST');
+export const updatePreferences = createPreferencesRequestFn('PATCH');

 export const getPreferences = async (
 	context: IRestApiContext,
@@ -68,15 +65,6 @@ export const disconnect = async (
 	});
 };

-export const setBranchReadonly = async (
-	context: IRestApiContext,
-	branchReadOnly: boolean,
-): Promise<string> => {
-	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/set-read-only`, {
-		branchReadOnly,
-	});
-};
-
 export const generateKeyPair = async (context: IRestApiContext): Promise<string> => {
 	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/generate-key-pair`);
 };
--- a/packages/editor-ui/src/components/MainSidebarVersionControl.vue
+++ b/packages/editor-ui/src/components/MainSidebarVersionControl.vue
@@ -71,7 +71,10 @@ async function pullWorkfolder() {
 </script>

 <template>
-	<div :class="{ [$style.sync]: true, [$style.collapsed]: isCollapsed }">
+	<div
+		:class="{ [$style.sync]: true, [$style.collapsed]: isCollapsed }"
+		:style="{ borderLeftColor: versionControlStore.preferences.branchColor }"
+	>
 		<span>
 			<n8n-icon icon="code-branch" />
 			{{ currentBranch }}
@@ -128,10 +131,11 @@ async function pullWorkfolder() {

 <style lang="scss" module>
 .sync {
-	padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-l);
+	padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-m);
 	margin: 0 calc(var(--spacing-l) * -1) calc(var(--spacing-m) * -1);
 	background: var(--color-background-light);
-	border-top: 1px solid var(--color-foreground-light);
+	border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	border-left: var(--spacing-3xs) var(--border-style-base) var(--color-foreground-base);
 	font-size: var(--font-size-2xs);

 	span {
@@ -145,7 +149,7 @@ async function pullWorkfolder() {

 .collapsed {
 	text-align: center;
-	margin-left: calc(var(--spacing-xl) * -1);
+	padding-left: var(--spacing-xs);

 	> span {
 		display: none;
--- a/packages/editor-ui/src/stores/versionControl.store.ts
+++ b/packages/editor-ui/src/stores/versionControl.store.ts
@@ -48,6 +48,13 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 		Object.assign(preferences, data);
 	};

+	const makePreferencesAction =
+		(action: typeof vcApi.savePreferences | typeof vcApi.updatePreferences) =>
+		async (preferences: Partial<VersionControlPreferences>) => {
+			const data = await action(rootStore.getRestApiContext, preferences);
+			setPreferences(data);
+		};
+
 	const getBranches = async () => {
 		const data = await vcApi.getBranches(rootStore.getRestApiContext);
 		setPreferences(data);
@@ -58,15 +65,9 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 		setPreferences(data);
 	};

-	const savePreferences = async (preferences: Partial<VersionControlPreferences>) => {
-		const data = await vcApi.setPreferences(rootStore.getRestApiContext, preferences);
-		setPreferences(data);
-	};
+	const savePreferences = makePreferencesAction(vcApi.savePreferences);

-	const setBranch = async (branch: string) => {
-		const data = await vcApi.setBranch(rootStore.getRestApiContext, branch);
-		setPreferences({ ...data, connected: true });
-	};
+	const updatePreferences = makePreferencesAction(vcApi.updatePreferences);

 	const disconnect = async (keepKeyPair: boolean) => {
 		await vcApi.disconnect(rootStore.getRestApiContext, keepKeyPair);
@@ -90,10 +91,6 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 		return vcApi.getAggregatedStatus(rootStore.getRestApiContext);
 	};

-	const setBranchReadonly = async (branchReadOnly: boolean) => {
-		return vcApi.setBranchReadonly(rootStore.getRestApiContext, branchReadOnly);
-	};
-
 	return {
 		isEnterpriseVersionControlEnabled,
 		state,
@@ -105,10 +102,9 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 		generateKeyPair,
 		getBranches,
 		savePreferences,
-		setBranch,
+		updatePreferences,
 		disconnect,
 		getStatus,
 		getAggregatedStatus,
-		setBranchReadonly,
 	};
 });
--- a/packages/editor-ui/src/views/SettingsVersionControl.vue
+++ b/packages/editor-ui/src/views/SettingsVersionControl.vue
@@ -2,8 +2,7 @@
 import { computed, reactive, onBeforeMount, ref } from 'vue';
 import type { Rule, RuleGroup } from 'n8n-design-system/types';
 import { MODAL_CONFIRM, VALID_EMAIL_REGEX } from '@/constants';
-import { useVersionControlStore } from '@/stores/versionControl.store';
-import { useUIStore } from '@/stores/ui.store';
+import { useUIStore, useVersionControlStore } from '@/stores';
 import { useToast, useMessage, useLoadingService, useI18n } from '@/composables';
 import CopyInput from '@/components/CopyInput.vue';

@@ -67,10 +66,11 @@ const onDisconnect = async () => {
 const onSave = async () => {
 	loadingService.startLoading();
 	try {
-		await Promise.all([
-			versionControlStore.setBranch(versionControlStore.preferences.branchName),
-			versionControlStore.setBranchReadonly(versionControlStore.preferences.branchReadOnly),
-		]);
+		await versionControlStore.updatePreferences({
+			branchName: versionControlStore.preferences.branchName,
+			branchReadOnly: versionControlStore.preferences.branchReadOnly,
+			branchColor: versionControlStore.preferences.branchColor,
+		});
 		toast.showMessage({
 			title: locale.baseText('settings.versionControl.saved.title'),
 			type: 'success',
@@ -92,7 +92,7 @@ const goToUpgrade = () => {
 	uiStore.goToUpgrade('version-control', 'upgrade-version-control');
 };

-onBeforeMount(async () => {
+onBeforeMount(() => {
 	if (versionControlStore.preferences.connected) {
 		isConnected.value = true;
 		void versionControlStore.getBranches();
@@ -318,12 +318,12 @@ async function refreshSshKey() {
 						</i18n>
 					</n8n-checkbox>
 				</div>
-				<!-- <div :class="$style.group">
+				<div :class="$style.group">
 					<label>{{ locale.baseText('settings.versionControl.color') }}</label>
 					<div>
 						<n8n-color-picker size="small" v-model="versionControlStore.preferences.branchColor" />
 					</div>
-				</div> -->
+				</div>
 				<div :class="[$style.group, 'pt-s']">
 					<n8n-button
 						@click="onSave"