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>
2023-07-26 09:25:01 +02:00
parent bcfc5e717b
commit fc7aa8bd66
51 changed files with 2210 additions and 1064 deletions
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -152,7 +152,7 @@ import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
 import type { IUser, IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare } from '@/Interface';

 import { saveAs } from 'file-saver';
-import { useTitleChange, useToast, useMessage, useLoadingService } from '@/composables';
+import { useTitleChange, useToast, useMessage } from '@/composables';
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
 import {
 	useUIStore,
@@ -169,6 +169,7 @@ import { getWorkflowPermissions } from '@/permissions';
 import { createEventBus } from 'n8n-design-system';
 import { useCloudPlanStore } from '@/stores';
 import { nodeViewEventBus } from '@/event-bus';
+import { genericHelpers } from '@/mixins/genericHelpers';

 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -181,7 +182,7 @@ const hasChanged = (prev: string[], curr: string[]) => {

 export default defineComponent({
 	name: 'WorkflowDetails',
-	mixins: [workflowHelpers],
+	mixins: [workflowHelpers, genericHelpers],
 	components: {
 		TagsContainer,
 		PushConnectionTracker,
@@ -199,10 +200,7 @@ export default defineComponent({
 		},
 	},
 	setup() {
-		const loadingService = useLoadingService();
-
 		return {
-			loadingService,
 			...useTitleChange(),
 			...useToast(),
 			...useMessage(),
@@ -247,6 +245,9 @@ export default defineComponent({
 		isDirty(): boolean {
 			return this.uiStore.stateIsDirty;
 		},
+		readOnlyEnv(): boolean {
+			return this.sourceControlStore.preferences.branchReadOnly;
+		},
 		currentWorkflowTagIds(): string[] {
 			return this.workflowsStore.workflowTags;
 		},
@@ -318,7 +319,8 @@ export default defineComponent({
 				disabled:
 					!this.sourceControlStore.isEnterpriseSourceControlEnabled ||
 					!this.onWorkflowPage ||
-					this.onExecutionsTab,
+					this.onExecutionsTab ||
+					this.readOnlyEnv,
 			});

 			actions.push({
@@ -531,25 +533,20 @@ export default defineComponent({
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.PUSH: {
-					this.loadingService.startLoading();
+					this.startLoading();
 					try {
 						await this.onSaveButtonClick();

 						const status = await this.sourceControlStore.getAggregatedStatus();
-						const workflowStatus = status.filter(
-							(s) =>
-								(s.id === this.currentWorkflowId && s.type === 'workflow') || s.type !== 'workflow',
-						);

 						this.uiStore.openModalWithData({
 							name: SOURCE_CONTROL_PUSH_MODAL_KEY,
-							data: { eventBus: this.eventBus, status: workflowStatus },
+							data: { eventBus: this.eventBus, status },
 						});
 					} catch (error) {
 						this.showError(error, this.$locale.baseText('error'));
 					} finally {
-						this.loadingService.stopLoading();
-						this.loadingService.setLoadingText(this.$locale.baseText('genericHelpers.loading'));
+						this.stopLoading();
 					}

 					break;
--- a/packages/editor-ui/src/components/MainSidebarSourceControl.vue
+++ b/packages/editor-ui/src/components/MainSidebarSourceControl.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import { useRouter } from 'vue-router/composables';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useI18n, useLoadingService, useMessage, useToast } from '@/composables';
-import { useUIStore, useSourceControlStore } from '@/stores';
+import { useUIStore, useSourceControlStore, useUsersStore } from '@/stores';
 import { SOURCE_CONTROL_PULL_MODAL_KEY, SOURCE_CONTROL_PUSH_MODAL_KEY, VIEWS } from '@/constants';
+import type { SourceControlAggregatedFile } from '../Interface';
+import { sourceControlEventBus } from '@/event-bus/source-control';

 const props = defineProps<{
 	isCollapsed: boolean;
@@ -17,6 +19,7 @@ const responseStatuses = {
 const router = useRouter();
 const loadingService = useLoadingService();
 const uiStore = useUIStore();
+const usersStore = useUsersStore();
 const sourceControlStore = useSourceControlStore();
 const message = useMessage();
 const toast = useToast();
@@ -29,10 +32,16 @@ const currentBranch = computed(() => {
 	return sourceControlStore.preferences.branchName;
 });
 const featureEnabled = computed(() => window.localStorage.getItem('source-control'));
+// TODO: use this for release
+// const featureEnabled = computed(
+// 	() => sourceControlStore.preferences.connected && sourceControlStore.preferences.branchName,
+// );
+const isInstanceOwner = computed(() => usersStore.isInstanceOwner);
 const setupButtonTooltipPlacement = computed(() => (props.isCollapsed ? 'right' : 'top'));

 async function pushWorkfolder() {
 	loadingService.startLoading();
+	loadingService.setLoadingText(i18n.baseText('settings.sourceControl.loading.checkingForChanges'));
 	try {
 		const status = await sourceControlStore.getAggregatedStatus();

@@ -53,7 +62,45 @@ async function pullWorkfolder() {
 	loadingService.setLoadingText(i18n.baseText('settings.sourceControl.loading.pull'));

 	try {
-		await sourceControlStore.pullWorkfolder(false);
+		const status: SourceControlAggregatedFile[] =
+			((await sourceControlStore.pullWorkfolder(
+				false,
+			)) as unknown as SourceControlAggregatedFile[]) || [];
+
+		const statusWithoutLocallyCreatedWorkflows = status.filter((file) => {
+			return !(file.type === 'workflow' && file.status === 'created' && file.location === 'local');
+		});
+		if (statusWithoutLocallyCreatedWorkflows.length === 0) {
+			toast.showMessage({
+				title: i18n.baseText('settings.sourceControl.pull.upToDate.title'),
+				message: i18n.baseText('settings.sourceControl.pull.upToDate.description'),
+				type: 'success',
+			});
+		} else {
+			toast.showMessage({
+				title: i18n.baseText('settings.sourceControl.pull.success.title'),
+				type: 'success',
+			});
+
+			const incompleteFileTypes = ['variables', 'credential'];
+			const hasVariablesOrCredentials = (status || []).some((file) => {
+				return incompleteFileTypes.includes(file.type);
+			});
+
+			if (hasVariablesOrCredentials) {
+				nextTick(() => {
+					toast.showMessage({
+						message: i18n.baseText('settings.sourceControl.pull.oneLastStep.description'),
+						title: i18n.baseText('settings.sourceControl.pull.oneLastStep.title'),
+						type: 'info',
+						duration: 0,
+						showClose: true,
+						offset: 0,
+					});
+				});
+			}
+		}
+		sourceControlEventBus.emit('pull');
 	} catch (error) {
 		const errorResponse = error.response;

@@ -78,12 +125,11 @@ const goToSourceControlSetup = async () => {

 <template>
 	<div
-		v-if="featureEnabled"
+		v-if="featureEnabled && isInstanceOwner"
 		:class="{
 			[$style.sync]: true,
 			[$style.collapsed]: isCollapsed,
-			[$style.isConnected]:
-				sourceControlStore.preferences.connected && sourceControlStore.preferences.branchName,
+			[$style.isConnected]: featureEnabled,
 		}"
 		:style="{ borderLeftColor: sourceControlStore.preferences.branchColor }"
 		data-test-id="main-sidebar-source-control"
@@ -93,7 +139,7 @@ const goToSourceControlSetup = async () => {
 			:class="$style.connected"
 			data-test-id="main-sidebar-source-control-connected"
 		>
-			<span>
+			<span :class="$style.branchName">
 				<n8n-icon icon="code-branch" />
 				{{ currentBranch }}
 			</span>
@@ -178,6 +224,11 @@ const goToSourceControlSetup = async () => {
 	}
 }

+.branchName {
+	white-space: normal;
+	line-break: anywhere;
+}
+
 .collapsed {
 	text-align: center;
 	padding-left: var(--spacing-s);
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -12,7 +12,7 @@
 					class="node-name"
 					:value="node && node.name"
 					:nodeType="nodeType"
-					:isReadOnly="isReadOnly"
+					:readOnly="isReadOnly"
 					@input="nameChanged"
 				></NodeTitle>
 				<div v-if="isExecutable">
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -7,7 +7,7 @@
 			:class="$style.pinnedDataCallout"
 		>
 			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
-			<span class="ml-4xs" v-if="!isReadOnlyRoute">
+			<span class="ml-4xs" v-if="!isReadOnlyRoute && !readOnlyEnv">
 				<n8n-link
 					theme="secondary"
 					size="small"
@@ -59,7 +59,7 @@
 					data-test-id="ndv-run-data-display-mode"
 				/>
 				<n8n-icon-button
-					v-if="canPinData && !isReadOnlyRoute"
+					v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
 					v-show="!editMode.enabled"
 					:title="$locale.baseText('runData.editOutput')"
 					:circle="false"
@@ -100,7 +100,10 @@
 						:active="hasPinData"
 						icon="thumbtack"
 						:disabled="
-							editMode.enabled || (inputData.length === 0 && !hasPinData) || isReadOnlyRoute
+							editMode.enabled ||
+							(inputData.length === 0 && !hasPinData) ||
+							isReadOnlyRoute ||
+							readOnlyEnv
 						"
 						@click="onTogglePinData({ source: 'pin-icon-click' })"
 						data-test-id="ndv-pin-data"
@@ -889,6 +892,9 @@ export default defineComponent({
 		isPaneTypeOutput(): boolean {
 			return this.paneType === 'output';
 		},
+		readOnlyEnv(): boolean {
+			return this.sourceControlStore.preferences.branchReadOnly;
+		},
 	},
 	methods: {
 		onItemHover(itemIndex: number | null) {
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -207,7 +207,6 @@ export default defineComponent({
 					}
 					break;
 				case 'users': // Fakedoor feature added via hooks when user management is disabled on cloud
-				case 'environments':
 				case 'logging':
 					this.$router.push({ name: VIEWS.FAKE_DOOR, params: { featureId: key } }).catch(() => {});
 					break;
--- a/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
+++ b/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
@@ -3,28 +3,45 @@ import Modal from './Modal.vue';
 import { SOURCE_CONTROL_PULL_MODAL_KEY } from '@/constants';
 import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
-import type { SourceControlStatus } from '@/Interface';
+import type { SourceControlAggregatedFile } from '@/Interface';
 import { useI18n, useLoadingService, useToast } from '@/composables';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores';
-import { useRoute } from 'vue-router/composables';
+import { useRoute, useRouter } from 'vue-router/composables';
+import { computed, nextTick, ref } from 'vue';
+import { sourceControlEventBus } from '@/event-bus/source-control';

 const props = defineProps({
 	data: {
-		type: Object as PropType<{ eventBus: EventBus; status: SourceControlStatus }>,
+		type: Object as PropType<{ eventBus: EventBus; status: SourceControlAggregatedFile[] }>,
 		default: () => ({}),
 	},
 });

-const defaultStagedFileTypes = ['tags', 'variables', 'credential'];
+const incompleteFileTypes = ['variables', 'credential'];

 const loadingService = useLoadingService();
 const uiStore = useUIStore();
 const toast = useToast();
 const { i18n } = useI18n();
 const sourceControlStore = useSourceControlStore();
+const router = useRouter();
 const route = useRoute();

+const files = ref<SourceControlAggregatedFile[]>(props.data.status || []);
+
+const workflowFiles = computed(() => {
+	return files.value.filter((file) => file.type === 'workflow');
+});
+
+const modifiedWorkflowFiles = computed(() => {
+	return workflowFiles.value.filter((file) => file.status === 'modified');
+});
+
+const deletedWorkflowFiles = computed(() => {
+	return workflowFiles.value.filter((file) => file.status === 'deleted');
+});
+
 function close() {
 	uiStore.closeModal(SOURCE_CONTROL_PULL_MODAL_KEY);
 }
@@ -35,11 +52,29 @@ async function pullWorkfolder() {

 	try {
 		await sourceControlStore.pullWorkfolder(true);
+
+		const hasVariablesOrCredentials = files.value.some((file) => {
+			return incompleteFileTypes.includes(file.type);
+		});
+
 		toast.showMessage({
-			message: i18n.baseText('settings.sourceControl.pull.success.description'),
 			title: i18n.baseText('settings.sourceControl.pull.success.title'),
 			type: 'success',
 		});
+
+		if (hasVariablesOrCredentials) {
+			nextTick(() => {
+				toast.showMessage({
+					message: i18n.baseText('settings.sourceControl.pull.oneLastStep.description'),
+					title: i18n.baseText('settings.sourceControl.pull.oneLastStep.title'),
+					type: 'info',
+					duration: 0,
+					showClose: true,
+					offset: 0,
+				});
+			});
+		}
+		sourceControlEventBus.emit('pull');
 	} catch (error) {
 		toast.showError(error, 'Error');
 	} finally {
@@ -59,7 +94,21 @@ async function pullWorkfolder() {
 			<div :class="$style.container">
 				<n8n-text>
 					{{ i18n.baseText('settings.sourceControl.modals.pull.description') }}
+					<n8n-link :to="i18n.baseText('settings.sourceControl.docs.using.pushPull.url')">
+						{{ i18n.baseText('settings.sourceControl.modals.pull.description.learnMore') }}
+					</n8n-link>
 				</n8n-text>
+
+				<div v-if="modifiedWorkflowFiles.length > 0" class="mt-l">
+					<ul :class="$style.filesList">
+						<li v-for="file in modifiedWorkflowFiles" :key="file.id">
+							<n8n-link :class="$style.fileLink" new-window :to="`/workflow/${file.id}`">
+								{{ file.name }}
+								<n8n-icon icon="external-link-alt" />
+							</n8n-link>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</template>

@@ -81,6 +130,27 @@ async function pullWorkfolder() {
 	overflow-wrap: break-word;
 }

+.filesList {
+	list-style: inside;
+	margin-top: var(--spacing-3xs);
+	padding-left: var(--spacing-2xs);
+
+	li {
+		margin-top: var(--spacing-3xs);
+	}
+}
+
+.fileLink {
+	svg {
+		display: none;
+		margin-left: var(--spacing-4xs);
+	}
+
+	&:hover svg {
+		display: inline-flex;
+	}
+}
+
 .footer {
 	display: flex;
 	flex-direction: row;
--- a/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
+++ b/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
@@ -23,12 +23,20 @@ const defaultStagedFileTypes = ['tags', 'variables', 'credential'];
 const loadingService = useLoadingService();
 const uiStore = useUIStore();
 const toast = useToast();
-const { i18n } = useI18n();
+const { i18n: locale } = useI18n();
 const sourceControlStore = useSourceControlStore();
 const route = useRoute();

 const staged = ref<Record<string, boolean>>({});
-const files = ref<SourceControlAggregatedFile[]>(props.data.status || []);
+const files = ref<SourceControlAggregatedFile[]>(
+	props.data.status.filter((file, index, self) => {
+		// do not show remote workflows that are not yet created locally during push
+		if (file.location === 'remote' && file.type === 'workflow' && file.status === 'created') {
+			return false;
+		}
+		return self.findIndex((f) => f.id === file.id) === index;
+	}) || [],
+);

 const commitMessage = ref('');
 const loading = ref(true);
@@ -55,10 +63,10 @@ const workflowId = computed(() => {

 const sortedFiles = computed(() => {
 	const statusPriority = {
-		deleted: 1,
-		modified: 2,
-		renamed: 3,
-		created: 4,
+		modified: 1,
+		renamed: 2,
+		created: 3,
+		deleted: 4,
 	};

 	return [...files.value].sort((a, b) => {
@@ -104,7 +112,7 @@ onMounted(async () => {
 	try {
 		staged.value = getStagedFilesByContext(files.value);
 	} catch (error) {
-		toast.showError(error, i18n.baseText('error'));
+		toast.showError(error, locale.baseText('error'));
 	} finally {
 		loading.value = false;
 	}
@@ -152,10 +160,10 @@ function getStagedFilesByContext(files: SourceControlAggregatedFile[]): Record<s
 			stagedFiles[file.file] = true;
 		}

-		if (context.value === 'workflow' && file.type === 'workflow' && file.id === workflowId.value) {
-			stagedFiles[file.file] = true;
-		} else if (context.value === 'workflows' && file.type === 'workflow') {
-			stagedFiles[file.file] = true;
+		if (context.value === 'workflow') {
+			if (file.type === 'workflow' && file.id === workflowId.value) {
+				stagedFiles[file.file] = true;
+			}
 		}
 	});

@@ -176,7 +184,7 @@ function close() {
 function renderUpdatedAt(file: SourceControlAggregatedFile) {
 	const currentYear = new Date().getFullYear();

-	return i18n.baseText('settings.sourceControl.lastUpdated', {
+	return locale.baseText('settings.sourceControl.lastUpdated', {
 		interpolate: {
 			date: dateformat(
 				file.updatedAt,
@@ -187,25 +195,32 @@ function renderUpdatedAt(file: SourceControlAggregatedFile) {
 	});
 }

-async function commitAndPush() {
-	const fileNames = files.value.filter((file) => staged.value[file.file]).map((file) => file.file);
+async function onCommitKeyDownEnter() {
+	if (!isSubmitDisabled.value) {
+		await commitAndPush();
+	}
+}

-	loadingService.startLoading(i18n.baseText('settings.sourceControl.loading.push'));
+async function commitAndPush() {
+	const fileNames = files.value.filter((file) => staged.value[file.file]);
+
+	loadingService.startLoading(locale.baseText('settings.sourceControl.loading.push'));
 	close();

 	try {
 		await sourceControlStore.pushWorkfolder({
+			force: true,
 			commitMessage: commitMessage.value,
 			fileNames,
 		});

 		toast.showToast({
-			title: i18n.baseText('settings.sourceControl.modals.push.success.title'),
-			message: i18n.baseText('settings.sourceControl.modals.push.success.description'),
+			title: locale.baseText('settings.sourceControl.modals.push.success.title'),
+			message: locale.baseText('settings.sourceControl.modals.push.success.description'),
 			type: 'success',
 		});
 	} catch (error) {
-		toast.showError(error, i18n.baseText('error'));
+		toast.showError(error, locale.baseText('error'));
 	} finally {
 		loadingService.stopLoading();
 	}
@@ -215,98 +230,106 @@ async function commitAndPush() {
 <template>
 	<Modal
 		width="812px"
-		:title="i18n.baseText('settings.sourceControl.modals.push.title')"
+		:title="locale.baseText('settings.sourceControl.modals.push.title')"
 		:eventBus="data.eventBus"
 		:name="SOURCE_CONTROL_PUSH_MODAL_KEY"
 	>
 		<template #content>
 			<div :class="$style.container">
-				<n8n-text>
-					{{ i18n.baseText('settings.sourceControl.modals.push.description') }}
-					<span v-if="context">
-						{{ i18n.baseText(`settings.sourceControl.modals.push.description.${context}`) }}
-					</span>
-					<n8n-link
-						:href="i18n.baseText('settings.sourceControl.modals.push.description.learnMore.url')"
-					>
-						{{ i18n.baseText('settings.sourceControl.modals.push.description.learnMore') }}
-					</n8n-link>
-				</n8n-text>
+				<div v-if="files.length > 0">
+					<div v-if="workflowFiles.length > 0">
+						<n8n-text>
+							{{ locale.baseText('settings.sourceControl.modals.push.description') }}
+							<n8n-link :to="locale.baseText('settings.sourceControl.docs.using.pushPull.url')">
+								{{ locale.baseText('settings.sourceControl.modals.push.description.learnMore') }}
+							</n8n-link>
+						</n8n-text>

-				<div v-if="workflowFiles.length > 0">
-					<div class="mt-l mb-2xs">
-						<n8n-checkbox
-							:indeterminate="selectAllIndeterminate"
-							:value="selectAll"
-							@input="onToggleSelectAll"
-						>
-							<n8n-text bold tag="strong">
-								{{ i18n.baseText('settings.sourceControl.modals.push.workflowsToCommit') }}
-							</n8n-text>
-							<n8n-text tag="strong" v-show="workflowFiles.length > 0">
-								({{ stagedWorkflowFiles.length }}/{{ workflowFiles.length }})
-							</n8n-text>
-						</n8n-checkbox>
-					</div>
-					<n8n-card
-						v-for="file in sortedFiles"
-						v-show="!defaultStagedFileTypes.includes(file.type)"
-						:key="file.file"
-						:class="$style.listItem"
-						@click="setStagedStatus(file, !staged[file.file])"
-					>
-						<div :class="$style.listItemBody">
+						<div class="mt-l mb-2xs">
 							<n8n-checkbox
-								:value="staged[file.file]"
-								:class="$style.listItemCheckbox"
-								@input="setStagedStatus(file, !staged[file.file])"
-							/>
-							<div>
-								<n8n-text v-if="file.status === 'deleted'" color="text-light">
-									<span v-if="file.type === 'workflow'"> Deleted Workflow: </span>
-									<span v-if="file.type === 'credential'"> Deleted Credential: </span>
-									<strong>{{ file.id }}</strong>
+								:indeterminate="selectAllIndeterminate"
+								:value="selectAll"
+								@input="onToggleSelectAll"
+							>
+								<n8n-text bold tag="strong">
+									{{ locale.baseText('settings.sourceControl.modals.push.workflowsToCommit') }}
 								</n8n-text>
-								<n8n-text bold v-else>
-									{{ file.name }}
+								<n8n-text tag="strong" v-show="workflowFiles.length > 0">
+									({{ stagedWorkflowFiles.length }}/{{ workflowFiles.length }})
 								</n8n-text>
-								<div v-if="file.updatedAt">
-									<n8n-text color="text-light" size="small">
-										{{ renderUpdatedAt(file) }}
-									</n8n-text>
-								</div>
-								<div v-if="file.conflict">
-									<n8n-text color="danger" size="small">
-										{{ i18n.baseText('settings.sourceControl.modals.push.overrideVersionInGit') }}
-									</n8n-text>
-								</div>
-							</div>
-							<div :class="$style.listItemStatus">
-								<n8n-badge class="mr-2xs" v-if="workflowId === file.id && file.type === 'workflow'">
-									Current workflow
-								</n8n-badge>
-								<n8n-badge :theme="statusToBadgeThemeMap[file.status] || 'default'">
-									{{ file.status }}
-								</n8n-badge>
-							</div>
+							</n8n-checkbox>
 						</div>
-					</n8n-card>
+						<n8n-card
+							v-for="file in sortedFiles"
+							v-show="!defaultStagedFileTypes.includes(file.type)"
+							:key="file.file"
+							:class="$style.listItem"
+							@click="setStagedStatus(file, !staged[file.file])"
+						>
+							<div :class="$style.listItemBody">
+								<n8n-checkbox
+									:value="staged[file.file]"
+									:class="$style.listItemCheckbox"
+									@input="setStagedStatus(file, !staged[file.file])"
+								/>
+								<div>
+									<n8n-text v-if="file.status === 'deleted'" color="text-light">
+										<span v-if="file.type === 'workflow'"> Deleted Workflow: </span>
+										<span v-if="file.type === 'credential'"> Deleted Credential: </span>
+										<strong>{{ file.name || file.id }}</strong>
+									</n8n-text>
+									<n8n-text bold v-else> {{ file.name }} </n8n-text>
+									<div v-if="file.updatedAt">
+										<n8n-text color="text-light" size="small">
+											{{ renderUpdatedAt(file) }}
+										</n8n-text>
+									</div>
+								</div>
+								<div :class="$style.listItemStatus">
+									<n8n-badge
+										class="mr-2xs"
+										v-if="workflowId === file.id && file.type === 'workflow'"
+									>
+										Current workflow
+									</n8n-badge>
+									<n8n-badge :theme="statusToBadgeThemeMap[file.status] || 'default'">
+										{{ locale.baseText(`settings.sourceControl.status.${file.status}`) }}
+									</n8n-badge>
+								</div>
+							</div>
+						</n8n-card>
+					</div>
+					<n8n-notice class="mt-0" v-else>
+						<i18n path="settings.sourceControl.modals.push.noWorkflowChanges">
+							<template #link>
+								<n8n-link
+									size="small"
+									:to="locale.baseText('settings.sourceControl.docs.using.url')"
+								>
+									{{
+										locale.baseText('settings.sourceControl.modals.push.noWorkflowChanges.moreInfo')
+									}}
+								</n8n-link>
+							</template>
+						</i18n>
+					</n8n-notice>

 					<n8n-text bold tag="p" class="mt-l mb-2xs">
-						{{ i18n.baseText('settings.sourceControl.modals.push.commitMessage') }}
+						{{ locale.baseText('settings.sourceControl.modals.push.commitMessage') }}
 					</n8n-text>
 					<n8n-input
 						type="text"
 						v-model="commitMessage"
 						:placeholder="
-							i18n.baseText('settings.sourceControl.modals.push.commitMessage.placeholder')
+							locale.baseText('settings.sourceControl.modals.push.commitMessage.placeholder')
 						"
+						@keydown.enter.native="onCommitKeyDownEnter"
 					/>
 				</div>
 				<div v-else-if="!loading">
-					<n8n-callout class="mt-l">
-						{{ i18n.baseText('settings.sourceControl.modals.push.everythingIsUpToDate') }}
-					</n8n-callout>
+					<n8n-notice class="mt-0 mb-0">
+						{{ locale.baseText('settings.sourceControl.modals.push.everythingIsUpToDate') }}
+					</n8n-notice>
 				</div>
 			</div>
 		</template>
@@ -314,10 +337,10 @@ async function commitAndPush() {
 		<template #footer>
 			<div :class="$style.footer">
 				<n8n-button type="tertiary" class="mr-2xs" @click="close">
-					{{ i18n.baseText('settings.sourceControl.modals.push.buttons.cancel') }}
+					{{ locale.baseText('settings.sourceControl.modals.push.buttons.cancel') }}
 				</n8n-button>
 				<n8n-button type="primary" :disabled="isSubmitDisabled" @click="commitAndPush">
-					{{ i18n.baseText('settings.sourceControl.modals.push.buttons.save') }}
+					{{ locale.baseText('settings.sourceControl.modals.push.buttons.save') }}
 				</n8n-button>
 			</div>
 		</template>
--- a/packages/editor-ui/src/components/tests/MainSidebarSourceControl.test.ts
+++ b/packages/editor-ui/src/components/tests/MainSidebarSourceControl.test.ts
@@ -9,10 +9,12 @@ import { i18nInstance } from '@/plugins/i18n';
 import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
 import MainSidebarSourceControl from '@/components/MainSidebarSourceControl.vue';
 import { useSourceControlStore, useUIStore } from '@/stores';
+import { useUsersStore } from '@/stores/users.store';

 let pinia: ReturnType<typeof createTestingPinia>;
 let sourceControlStore: ReturnType<typeof useSourceControlStore>;
 let uiStore: ReturnType<typeof useUIStore>;
+let usersStore: ReturnType<typeof useUsersStore>;

 const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) => {
 	return render(
@@ -41,6 +43,10 @@ describe('MainSidebarSourceControl', () => {
 			},
 		});

+		usersStore = useUsersStore(pinia);
+
+		vi.spyOn(usersStore, 'isInstanceOwner', 'get').mockReturnValue(true);
+
 		sourceControlStore = useSourceControlStore();
 		uiStore = useUIStore();
 	});
@@ -62,8 +68,6 @@ describe('MainSidebarSourceControl', () => {
 			vi.spyOn(sourceControlStore, 'preferences', 'get').mockReturnValue({
 				branchName: 'main',
 				branches: [],
-				authorName: '',
-				authorEmail: '',
 				repositoryUrl: '',
 				branchReadOnly: false,
 				branchColor: '#5296D6',
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -8,7 +8,7 @@
 			</div>

 			<div class="mt-xs mb-l">
-				<slot name="add-button">
+				<slot name="add-button" :disabled="disabled">
 					<n8n-button
 						size="large"
 						block