Skip to content

Commit

Permalink
feat(editor): Add version controls settings (WIP) (#6036)
Browse files Browse the repository at this point in the history
* feat(editor): Version control paywall (WIP)

* fix(editor): remove version control docs link

* feat(editor): Adding version control settings (WIP)

* feat(editor): Adding version control settings (WIP)

* fix(editor): use rest api root path in version control

* fix(editor): adding preferences

* fix(editor): adding preferences

* fix(editor): change store action name
  • Loading branch information
cstuncsik authored Apr 26, 2023
1 parent f91923a commit 0c9ce3a
Show file tree
Hide file tree
Showing 8 changed files with 358 additions and 20 deletions.
9 changes: 9 additions & 0 deletions packages/editor-ui/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import { useNodeTypesStore } from './stores/nodeTypes';
import { useHistoryHelper } from '@/composables/useHistoryHelper';
import { newVersions } from '@/mixins/newVersions';
import { useRoute } from 'vue-router/composables';
import { useVersionControlStore } from '@/stores/versionControl';
export default mixins(newVersions, showMessage, userHelpers).extend({
name: 'App',
Expand All @@ -69,6 +70,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
useTemplatesStore,
useUIStore,
useUsersStore,
useVersionControlStore,
),
defaultLocale(): string {
return this.rootStore.defaultLocale;
Expand Down Expand Up @@ -196,6 +198,13 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
if (this.defaultLocale !== 'en') {
await this.nodeTypesStore.getNodeTranslationHeaders();
}
if (
this.versionControlStore.isEnterpriseVersionControlEnabled &&
this.usersStore.isInstanceOwner
) {
this.versionControlStore.getPreferences();
}
},
watch: {
$route(route) {
Expand Down
11 changes: 11 additions & 0 deletions packages/editor-ui/src/Interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1432,3 +1432,14 @@ export type SamlPreferencesExtractedData = {
entityID: string;
returnUrl: string;
};

export type VersionControlPreferences = {
connected: boolean;
repositoryUrl: string;
authorName: string;
authorEmail: string;
branchName: string;
branchReadOnly: boolean;
branchColor: string;
publicKey?: string;
};
36 changes: 36 additions & 0 deletions packages/editor-ui/src/api/versionControl.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import type { IRestApiContext, VersionControlPreferences } from '@/Interface';
import { makeRestApiRequest } from '@/utils';
import type { IDataObject } from 'n8n-workflow';

const versionControlApiRoot = '/version-control';

export const initSsh = (context: IRestApiContext, data: IDataObject): Promise<string> => {
return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/init-ssh`, data);
};

export const initRepository = (
context: IRestApiContext,
): Promise<{ branches: string[]; currentBranch: string }> => {
return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/init-repository`);
};

export const sync = (context: IRestApiContext, data: IDataObject): Promise<void> => {
return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/push`, data);
};

export const getConfig = (
context: IRestApiContext,
): Promise<{ remoteRepository: string; name: string; email: string; currentBranch: string }> => {
return makeRestApiRequest(context, 'GET', `${versionControlApiRoot}/config`);
};

export const setPreferences = (
context: IRestApiContext,
preferences: Partial<VersionControlPreferences>,
): Promise<VersionControlPreferences> => {
return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/preferences`, preferences);
};

export const getPreferences = (context: IRestApiContext): Promise<VersionControlPreferences> => {
return makeRestApiRequest(context, 'GET', `${versionControlApiRoot}/preferences`);
};
95 changes: 83 additions & 12 deletions packages/editor-ui/src/components/MainSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,39 @@
/>
</div>
</template>
<template #menuSuffix v-if="hasVersionUpdates">
<div :class="$style.updates" @click="openUpdatesPanel">
<div :class="$style.giftContainer">
<GiftNotificationIcon />
<template #menuSuffix>
<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
<div :class="$style.giftContainer">
<GiftNotificationIcon />
</div>
<n8n-text
:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
color="text-base"
>
{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
nextVersions.length > 1 ? 's' : ''
}}
</n8n-text>
</div>
<div :class="$style.sync" v-if="versionControlStore.state.currentBranch">
<span>
<n8n-icon icon="code-branch" class="mr-xs" />
{{ currentBranch }}
</span>
<n8n-button
:title="
$locale.baseText('settings.versionControl.sync.prompt.title', {
interpolate: { branch: currentBranch },
})
"
icon="sync"
type="tertiary"
:size="isCollapsed ? 'mini' : 'small'"
square
@click="sync"
/>
</div>
<n8n-text
:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
color="text-base"
>
{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
nextVersions.length > 1 ? 's' : ''
}}
</n8n-text>
</div>
</template>
<template #footer v-if="showUserArea">
Expand Down Expand Up @@ -114,6 +134,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
import { useRootStore } from '@/stores/n8nRootStore';
import { useVersionsStore } from '@/stores/versions';
import { isNavigationFailure } from 'vue-router';
import { useVersionControlStore } from '@/stores/versionControl';
export default mixins(
genericHelpers,
Expand Down Expand Up @@ -143,7 +164,11 @@ export default mixins(
useUsersStore,
useVersionsStore,
useWorkflowsStore,
useVersionControlStore,
),
currentBranch(): string {
return this.versionControlStore.state.currentBranch;
},
hasVersionUpdates(): boolean {
return this.versionsStore.hasVersionUpdates;
},
Expand Down Expand Up @@ -458,6 +483,29 @@ export default mixins(
});
}
},
async sync() {
const prompt = await this.$prompt(
this.$locale.baseText('settings.versionControl.sync.prompt.description', {
interpolate: { branch: this.versionControlStore.state.currentBranch },
}),
this.$locale.baseText('settings.versionControl.sync.prompt.title', {
interpolate: { branch: this.versionControlStore.state.currentBranch },
}),
{
confirmButtonText: 'Sync',
cancelButtonText: 'Cancel',
inputPlaceholder: this.$locale.baseText(
'settings.versionControl.sync.prompt.placeholder',
),
inputPattern: /^.+$/,
inputErrorMessage: this.$locale.baseText('settings.versionControl.sync.prompt.error'),
},
);
if (prompt.value) {
this.versionControlStore.sync({ commitMessage: prompt.value });
}
},
},
});
</script>
Expand Down Expand Up @@ -596,4 +644,27 @@ export default mixins(
display: none;
}
}
.sync {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-l);
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);
font-size: var(--font-size-2xs);
span {
color: var(--color-text-light);
}
.sideMenuCollapsed & {
justify-content: center;
margin-left: calc(var(--spacing-xl) * -1);
> span {
display: none;
}
}
}
</style>
12 changes: 6 additions & 6 deletions packages/editor-ui/src/composables/useMessage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { Message, MessageBox } from 'element-ui';
export function useMessage() {
async function alert(
message: string,
configOrTitle: string | ElMessageBoxOptions | undefined,
config: ElMessageBoxOptions | undefined,
configOrTitle?: string | ElMessageBoxOptions,
config?: ElMessageBoxOptions,
) {
const resolvedConfig = {
...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
Expand All @@ -21,8 +21,8 @@ export function useMessage() {

async function confirm(
message: string,
configOrTitle: string | ElMessageBoxOptions | undefined,
config: ElMessageBoxOptions | undefined,
configOrTitle?: string | ElMessageBoxOptions,
config?: ElMessageBoxOptions,
) {
const resolvedConfig = {
...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
Expand All @@ -41,8 +41,8 @@ export function useMessage() {

async function prompt(
message: string,
configOrTitle: string | ElMessageBoxOptions | undefined,
config: ElMessageBoxOptions | undefined,
configOrTitle?: string | ElMessageBoxOptions,
config?: ElMessageBoxOptions,
) {
const resolvedConfig = {
...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
Expand Down
18 changes: 18 additions & 0 deletions packages/editor-ui/src/plugins/i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1286,6 +1286,24 @@
"settings.versionControl.actionBox.title": "Available on Enterprise plan",
"settings.versionControl.actionBox.description": "Use Version Control to connect your instance to an external Git repository to backup and track changes made to your workflows, variables, and credentials. With Version Control you can also sync instances across multiple environments (development, production...).",
"settings.versionControl.actionBox.buttonText": "See plans",
"settings.versionControl.description": "Versioning allows you to connect your n8n instance to a Git branch of a repository. You can connect your branches to multiples n8n instances to create a multi environments setup. Learn how to set up versioning and environments in n8n.",
"settings.versionControl.repoUrl": "Git repository URL",
"settings.versionControl.repoUrlPlaceholder": "e.g. [email protected]:my-team/my-repository",
"settings.versionControl.repoUrlDescription": "The SSH url of your Git repository",
"settings.versionControl.authorName": "Author name",
"settings.versionControl.authorEmail": "Author email",
"settings.versionControl.sshKey": "SSH Key",
"settings.versionControl.sshKeyDescription": "Paste the SSH key in yout git repository settings. {link}.",
"settings.versionControl.sshKeyDescriptionLink": "More info.",
"settings.versionControl.button.continue": "Continue",
"settings.versionControl.button.connect": "Connect",
"settings.versionControl.branches": "Select branch",
"settings.versionControl.switchBranch.title": "Switch to {branch} branch",
"settings.versionControl.switchBranch.description": "Please confirm you want to switch the current n8n instance to the branch: {branch}",
"settings.versionControl.sync.prompt.title": "Sync changes in {branch} branch",
"settings.versionControl.sync.prompt.description": "All the changes on your n8n instances will be synced with branch {branch} on the remote git repository. The following git sequence will be executed: pull > commit > push.",
"settings.versionControl.sync.prompt.placeholder": "Commit message",
"settings.versionControl.sync.prompt.error": "Please enter a commit message",
"showMessage.cancel": "@:_reusableBaseText.cancel",
"showMessage.ok": "OK",
"showMessage.showDetails": "Show Details",
Expand Down
74 changes: 73 additions & 1 deletion packages/editor-ui/src/stores/versionControl.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,88 @@
import { computed } from 'vue';
import { computed, reactive } from 'vue';
import { defineStore } from 'pinia';
import type { IDataObject } from 'n8n-workflow';
import { EnterpriseEditionFeature } from '@/constants';
import { useSettingsStore } from '@/stores/settings';
import * as vcApi from '@/api/versionControl';
import { useRootStore } from '@/stores/n8nRootStore';
import type { VersionControlPreferences } from '@/Interface';

export const useVersionControlStore = defineStore('versionControl', () => {
const rootStore = useRootStore();
const settingsStore = useSettingsStore();

const isEnterpriseVersionControlEnabled = computed(() =>
settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.VersionControl),
);

const preferences = reactive<VersionControlPreferences>({
branchName: '',
authorName: '',
authorEmail: '',
repositoryUrl: '',
branchReadOnly: false,
branchColor: '#000000',
connected: false,
publicKey: '',
});

const state = reactive({
branches: [] as string[],
currentBranch: '',
authorName: '',
authorEmail: '',
repositoryUrl: '',
sshKey: '',
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 }) => {
state.commitMessage = data.commitMessage;
return vcApi.sync(rootStore.getRestApiContext, { message: data.commitMessage });
};
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 setPreferences = (data: Partial<VersionControlPreferences>) => {
Object.assign(preferences, data);
};

const getPreferences = async () => {
const data = await vcApi.getPreferences(rootStore.getRestApiContext);
setPreferences(data);
};

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

return {
isEnterpriseVersionControlEnabled,
state,
initSsh,
initRepository,
sync,
getConfig,
getPreferences,
setPreferences,
savePreferences,
};
});
Loading

0 comments on commit 0c9ce3a

Please sign in to comment.