fix(editor): Update SourceControlPullModal to look and feel the same as SourceControlPushModal (#18129)

Co-authored-by: r00gm <raul00gm@gmail.com>

packages/frontend/editor-ui/src/components/SourceControlPullModal.ee.vue

@@ -5,8 +5,10 @@ import { useToast } from '@/composables/useToast';
 import { SOURCE_CONTROL_PULL_MODAL_KEY, VIEWS, WORKFLOW_DIFF_MODAL_KEY } from '@/constants';
 import { sourceControlEventBus } from '@/event-bus/source-control';
 import EnvFeatureFlag from '@/features/env-feature-flag/EnvFeatureFlag.vue';
+import { useProjectsStore } from '@/stores/projects.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
+import type { ProjectListItem } from '@/types/projects.types';
 import {
 	getPullPriorityByStatus,
 	getStatusText,
@@ -14,19 +16,20 @@ import {
 	notifyUserAboutPullWorkFolderOutcome,
 } from '@/utils/sourceControlUtils';
 import { type SourceControlledFile, SOURCE_CONTROL_FILE_TYPE } from '@n8n/api-types';
-import { N8nBadge, N8nButton, N8nLink, N8nText } from '@n8n/design-system';
+import { N8nBadge, N8nButton, N8nHeading, N8nInfoTip, N8nLink, N8nText } from '@n8n/design-system';
 import { useI18n } from '@n8n/i18n';
 import type { EventBus } from '@n8n/utils/event-bus';
 import { createEventBus } from '@n8n/utils/event-bus';
-import groupBy from 'lodash/groupBy';
+import dateformat from 'dateformat';
 import orderBy from 'lodash/orderBy';
-import { computed } from 'vue';
+import { computed, onBeforeMount, ref } from 'vue';
 import { RouterLink } from 'vue-router';
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import Modal from './Modal.vue';
 
 type SourceControlledFileType = SourceControlledFile['type'];
+type SourceControlledFileWithProject = SourceControlledFile & { project?: ProjectListItem };
 
 const props = defineProps<{
 	data: { eventBus: EventBus; status: SourceControlledFile[] };
@@ -38,54 +41,120 @@ const uiStore = useUIStore();
 const toast = useToast();
 const i18n = useI18n();
 const sourceControlStore = useSourceControlStore();
+const projectsStore = useProjectsStore();
 
-const sortedFiles = computed(() =>
+onBeforeMount(() => {
+	void projectsStore.getAvailableProjects();
+});
+
+// Tab state
+const activeTab = ref<
+	typeof SOURCE_CONTROL_FILE_TYPE.workflow | typeof SOURCE_CONTROL_FILE_TYPE.credential
+>(SOURCE_CONTROL_FILE_TYPE.workflow);
+
+// Group files by type with project information
+const filesWithProjects = computed(() =>
+	props.data.status.map((file) => {
+		const project = projectsStore.availableProjects.find(({ id }) => id === file.owner?.projectId);
+		return { ...file, project };
+	}),
+);
+
+const groupedFilesByType = computed(() => {
+	const grouped: Partial<Record<SourceControlledFileType, SourceControlledFileWithProject[]>> = {};
+
+	filesWithProjects.value.forEach((file) => {
+		if (!grouped[file.type]) {
+			grouped[file.type] = [];
+		}
+		grouped[file.type]!.push(file);
+	});
+
+	return grouped;
+});
+
+// Filtered workflows
+const filteredWorkflows = computed(() => {
+	const workflows = groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.workflow] || [];
+	return workflows;
+});
+
+const sortedWorkflows = computed(() =>
 	orderBy(
-		props.data.status,
-		[({ status }) => getPullPriorityByStatus(status), ({ name }) => name.toLowerCase()],
-		['desc', 'asc'],
+		filteredWorkflows.value,
+		[({ status }) => getPullPriorityByStatus(status), 'updatedAt'],
+		['asc', 'desc'],
 	),
 );
 
-const groupedFilesByType = computed<
-	Partial<Record<SourceControlledFileType, SourceControlledFile[]>>
->(() => groupBy(sortedFiles.value, 'type'));
+// Filtered credentials
+const filteredCredentials = computed(() => {
+	const credentials = groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.credential] || [];
+	return credentials;
+});
 
-type ItemsList = Array<
-	{ type: 'render-title'; title: string; id: SourceControlledFileType } | SourceControlledFile
->;
-
-const ITEM_TITLES: Record<Exclude<SourceControlledFileType, 'file'>, string> = {
-	[SOURCE_CONTROL_FILE_TYPE.workflow]: 'Workflows',
-	[SOURCE_CONTROL_FILE_TYPE.credential]: 'Credentials',
-	[SOURCE_CONTROL_FILE_TYPE.variables]: 'Variables',
-	[SOURCE_CONTROL_FILE_TYPE.tags]: 'Tags',
-	[SOURCE_CONTROL_FILE_TYPE.folders]: 'Folders',
-} as const;
-
-const files = computed<ItemsList>(() =>
-	[
-		SOURCE_CONTROL_FILE_TYPE.workflow,
-		SOURCE_CONTROL_FILE_TYPE.credential,
-		SOURCE_CONTROL_FILE_TYPE.variables,
-		SOURCE_CONTROL_FILE_TYPE.tags,
-		SOURCE_CONTROL_FILE_TYPE.folders,
-	].reduce<ItemsList>((acc, fileType) => {
-		if (!groupedFilesByType.value[fileType]) {
-			return acc;
-		}
-
-		acc.push({
-			type: 'render-title',
-			title: ITEM_TITLES[fileType],
-			id: fileType,
-		});
-
-		acc.push(...groupedFilesByType.value[fileType]);
-		return acc;
-	}, []),
+const sortedCredentials = computed(() =>
+	orderBy(
+		filteredCredentials.value,
+		[({ status }) => getPullPriorityByStatus(status), 'updatedAt'],
+		['asc', 'desc'],
+	),
 );
 
+// Active data source based on tab
+const activeDataSourceFiltered = computed(() => {
+	if (activeTab.value === SOURCE_CONTROL_FILE_TYPE.workflow) {
+		return sortedWorkflows.value;
+	}
+	if (activeTab.value === SOURCE_CONTROL_FILE_TYPE.credential) {
+		return sortedCredentials.value;
+	}
+	return [];
+});
+
+const filtersNoResultText = computed(() => {
+	if (activeTab.value === SOURCE_CONTROL_FILE_TYPE.workflow) {
+		return i18n.baseText('workflows.noResults');
+	}
+	return i18n.baseText('credentials.noResults');
+});
+
+// Tab data
+const tabs = computed(() => {
+	return [
+		{
+			label: 'Workflows',
+			value: SOURCE_CONTROL_FILE_TYPE.workflow,
+			total: groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.workflow]?.length || 0,
+		},
+		{
+			label: 'Credentials',
+			value: SOURCE_CONTROL_FILE_TYPE.credential,
+			total: groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.credential]?.length || 0,
+		},
+	];
+});
+
+// Other files (variables, tags, folders) that are always pulled
+const otherFiles = computed(() => {
+	const others: SourceControlledFileWithProject[] = [];
+
+	const variables = groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.variables];
+	if (variables) {
+		others.push.apply(others, variables);
+	}
+	const tags = groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.tags];
+	if (tags) {
+		others.push.apply(others, tags);
+	}
+	const folders = groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.folders];
+	if (folders) {
+		others.push.apply(others, folders);
+	}
+
+	return others;
+});
+
 function close() {
 	uiStore.closeModal(SOURCE_CONTROL_PULL_MODAL_KEY);
 }
@@ -107,6 +176,20 @@ async function pullWorkfolder() {
 	}
 }
 
+function renderUpdatedAt(file: SourceControlledFile) {
+	const currentYear = new Date().getFullYear().toString();
+
+	return i18n.baseText('settings.sourceControl.lastUpdated', {
+		interpolate: {
+			date: dateformat(
+				file.updatedAt,
+				`d mmm${file.updatedAt?.startsWith(currentYear) ? '' : ', yyyy'}`,
+			),
+			time: dateformat(file.updatedAt, 'HH:MM'),
+		},
+	});
+}
+
 const workflowDiffEventBus = createEventBus();
 
 function openDiffModal(id: string) {
@@ -119,86 +202,156 @@ function openDiffModal(id: string) {
 		data: { eventBus: workflowDiffEventBus, workflowId: id, direction: 'pull' },
 	});
 }
+
+const modalHeight = computed(() =>
+	groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.workflow]?.length ||
+	groupedFilesByType.value[SOURCE_CONTROL_FILE_TYPE.credential]?.length
+		? 'min(80vh, 850px)'
+		: 'auto',
+);
 </script>
 
 <template>
 	<Modal
-		width="500px"
-		:title="i18n.baseText('settings.sourceControl.modals.pull.title')"
+		width="812px"
 		:event-bus="data.eventBus"
 		:name="SOURCE_CONTROL_PULL_MODAL_KEY"
+		:height="modalHeight"
+		:custom-class="$style.sourceControlPull"
 	>
+		<template #header>
+			<N8nHeading tag="h1" size="xlarge">
+				{{ i18n.baseText('settings.sourceControl.modals.pull.title') }}
+			</N8nHeading>
+
+			<div :class="[$style.filtersRow]" class="mt-l">
+				<N8nText tag="div" class="mb-xs">
+					{{ i18n.baseText('settings.sourceControl.modals.pull.description') }}
+					<br />
+					<N8nLink :to="i18n.baseText('settings.sourceControl.docs.using.pushPull.url')">
+						{{ i18n.baseText('settings.sourceControl.modals.push.description.learnMore') }}
+					</N8nLink>
+				</N8nText>
+			</div>
+		</template>
 		<template #content>
-			<N8nText tag="div" class="mb-xs">
-				{{ i18n.baseText('settings.sourceControl.modals.pull.description') }}
-				<br />
-				<N8nLink :to="i18n.baseText('settings.sourceControl.docs.using.pushPull.url')">
-					{{ i18n.baseText('settings.sourceControl.modals.push.description.learnMore') }}
-				</N8nLink>
-			</N8nText>
-			<div :class="$style.container">
-				<DynamicScroller
-					ref="scroller"
-					:items="files"
-					:min-item-size="47"
-					:class="$style.scroller"
-					style="max-height: 440px"
-				>
-					<template #default="{ item, index, active }">
-						<div
-							v-if="item.type === 'render-title'"
-							:class="$style.listHeader"
-							data-test-id="pull-modal-item-header"
+			<div v-if="!tabs.some((tab) => tab.total > 0)">
+				<N8nText tag="div" class="mb-xs">
+					{{ i18n.baseText('settings.sourceControl.modals.pull.description') }}
+					<br />
+					<N8nLink :to="i18n.baseText('settings.sourceControl.docs.using.pushPull.url')">
+						{{ i18n.baseText('settings.sourceControl.modals.push.description.learnMore') }}
+					</N8nLink>
+				</N8nText>
+			</div>
+			<div v-else style="display: flex; height: 100%">
+				<div :class="$style.tabs">
+					<template v-for="tab in tabs" :key="tab.value">
+						<button
+							type="button"
+							:class="[$style.tab, { [$style.tabActive]: activeTab === tab.value }]"
+							data-test-id="source-control-pull-modal-tab"
+							@click="activeTab = tab.value"
 						>
-							<N8nText bold>{{ item.title }}</N8nText>
-						</div>
-						<DynamicScrollerItem
-							v-else
-							:item="item"
-							:active="active"
-							:size-dependencies="[item.name]"
-							:data-index="index"
-						>
-							<div :class="$style.listItem" data-test-id="pull-modal-item">
-								<div :class="$style.itemName">
-									<RouterLink
-										v-if="item.type === 'credential'"
-										target="_blank"
-										:to="{ name: VIEWS.CREDENTIALS, params: { credentialId: item.id } }"
-									>
-										<N8nText>{{ item.name }}</N8nText>
-									</RouterLink>
-									<RouterLink
-										v-else-if="item.type === 'workflow'"
-										target="_blank"
-										:to="{ name: VIEWS.WORKFLOW, params: { name: item.id } }"
-									>
-										<N8nText>{{ item.name }}</N8nText>
-									</RouterLink>
-									<N8nText v-else>{{ item.name }}</N8nText>
-								</div>
-								<div :class="$style.itemActions">
-									<N8nBadge :theme="getStatusTheme(item.status)" :class="$style.listBadge">
-										{{ getStatusText(item.status) }}
-									</N8nBadge>
-									<EnvFeatureFlag name="SOURCE_CONTROL_WORKFLOW_DIFF">
-										<N8nIconButton
-											v-if="item.type === SOURCE_CONTROL_FILE_TYPE.workflow"
-											icon="file-diff"
-											type="secondary"
-											:class="$style.diffButton"
-											@click="openDiffModal(item.id)"
-										/>
-									</EnvFeatureFlag>
-								</div>
-							</div>
-						</DynamicScrollerItem>
+							<div>{{ tab.label }}</div>
+							<N8nText tag="div" color="text-light">
+								{{ tab.total }} {{ tab.total === 1 ? 'item' : 'items' }}
+							</N8nText>
+						</button>
 					</template>
-				</DynamicScroller>
+				</div>
+				<div style="flex: 1">
+					<div :class="[$style.table]">
+						<div :class="[$style.tableHeader]">
+							<div :class="$style.headerTitle">
+								<N8nText>Title</N8nText>
+							</div>
+						</div>
+						<div style="flex: 1; overflow: hidden">
+							<N8nInfoTip v-if="!activeDataSourceFiltered.length" class="p-xs" :bold="false">
+								{{ filtersNoResultText }}
+							</N8nInfoTip>
+							<DynamicScroller
+								v-if="activeDataSourceFiltered.length"
+								:class="[$style.scroller]"
+								:items="activeDataSourceFiltered"
+								:min-item-size="57"
+								item-class="scrollerItem"
+							>
+								<template #default="{ item: file, active, index }">
+									<DynamicScrollerItem
+										:item="file"
+										:active="active"
+										:size-dependencies="[file.name, file.id]"
+										:data-index="index"
+									>
+										<div :class="[$style.listItem]" data-test-id="pull-modal-item">
+											<div :class="[$style.itemContent]">
+												<N8nText tag="div" bold color="text-dark" :class="[$style.listItemName]">
+													<RouterLink
+														v-if="file.type === SOURCE_CONTROL_FILE_TYPE.credential"
+														target="_blank"
+														:to="{ name: VIEWS.CREDENTIALS, params: { credentialId: file.id } }"
+													>
+														{{ file.name }}
+													</RouterLink>
+													<RouterLink
+														v-else-if="file.type === SOURCE_CONTROL_FILE_TYPE.workflow"
+														target="_blank"
+														:to="{ name: VIEWS.WORKFLOW, params: { name: file.id } }"
+													>
+														{{ file.name }}
+													</RouterLink>
+													<span v-else>{{ file.name }}</span>
+												</N8nText>
+												<N8nText
+													v-if="file.updatedAt"
+													tag="p"
+													class="mt-0"
+													color="text-light"
+													size="small"
+												>
+													{{ renderUpdatedAt(file) }}
+												</N8nText>
+											</div>
+											<span :class="[$style.badges]">
+												<N8nBadge :theme="getStatusTheme(file.status)" style="height: 25px">
+													{{ getStatusText(file.status) }}
+												</N8nBadge>
+												<EnvFeatureFlag name="SOURCE_CONTROL_WORKFLOW_DIFF">
+													<N8nIconButton
+														v-if="file.type === SOURCE_CONTROL_FILE_TYPE.workflow"
+														icon="file-diff"
+														type="secondary"
+														@click="openDiffModal(file.id)"
+													/>
+												</EnvFeatureFlag>
+											</span>
+										</div>
+									</DynamicScrollerItem>
+								</template>
+							</DynamicScroller>
+						</div>
+					</div>
+				</div>
 			</div>
 		</template>
 
 		<template #footer>
+			<div v-if="otherFiles.length" class="mb-xs">
+				<N8nText bold size="medium">Additional changes to be pulled:</N8nText>
+				<N8nText size="small">
+					<template v-if="groupedFilesByType[SOURCE_CONTROL_FILE_TYPE.variables]?.length">
+						Variables ({{ groupedFilesByType[SOURCE_CONTROL_FILE_TYPE.variables]?.length || 0 }}),
+					</template>
+					<template v-if="groupedFilesByType[SOURCE_CONTROL_FILE_TYPE.tags]?.length">
+						Tags ({{ groupedFilesByType[SOURCE_CONTROL_FILE_TYPE.tags]?.length || 0 }}),
+					</template>
+					<template v-if="groupedFilesByType[SOURCE_CONTROL_FILE_TYPE.folders]?.length">
+						Folders ({{ groupedFilesByType[SOURCE_CONTROL_FILE_TYPE.folders]?.length || 0 }})
+					</template>
+				</N8nText>
+			</div>
 			<div :class="$style.footer">
 				<N8nButton type="tertiary" class="mr-2xs" @click="close">
 					{{ i18n.baseText('settings.sourceControl.modals.pull.buttons.cancel') }}
@@ -212,78 +365,90 @@ function openDiffModal(id: string) {
 </template>
 
 <style module lang="scss">
-.container {
-	overflow-wrap: break-word;
-	padding-right: 8px;
-}
+.sourceControlPull {
+	&:global(.el-dialog) {
+		margin: 0;
+	}
 
-.scroller {
-	margin-right: -8px;
-}
-
-.filesList {
-	list-style: inside;
-	margin-top: var(--spacing-3xs);
-	padding-left: var(--spacing-2xs);
-
-	li {
-		margin-top: var(--spacing-3xs);
+	:global(.el-dialog__header) {
+		padding-bottom: var(--spacing-xs);
 	}
 }
 
-.listHeader {
-	padding-top: 16px;
-	padding-bottom: 12px;
-	height: 47px;
-	margin-right: 8px;
+.filtersRow {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	justify-content: space-between;
+}
+
+.filters {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.headerTitle {
+	flex-shrink: 0;
+	margin-bottom: 0;
+	padding: 10px 16px;
+}
+
+.filtersApplied {
+	border-top: var(--border-base);
+}
+
+.scroller {
+	max-height: 100%;
+	scrollbar-color: var(--color-foreground-base) transparent;
+	outline: var(--border-base);
+
+	:global(.scrollerItem) {
+		&:last-child {
+			.listItem {
+				border-bottom: 0;
+			}
+		}
+	}
 }
 
 .listItem {
 	display: flex;
 	align-items: center;
-	padding-bottom: 8px;
-	margin-right: 8px;
-
-	&::before {
-		display: block;
-		content: '';
-		width: 5px;
-		height: 5px;
-		background-color: var(--color-foreground-xdark);
-		border-radius: 100%;
-		margin: 7px 8px 6px 2px;
-		flex-shrink: 0;
-	}
+	justify-content: space-between;
+	padding: 10px 16px;
+	margin: 0;
+	border-bottom: var(--border-base);
+	gap: 30px;
 }
 
-.itemName {
+.itemContent {
 	flex: 1;
 	min-width: 0;
-	margin-right: 8px;
+}
 
-	a,
-	span {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: block;
+.listItemName {
+	line-clamp: 2;
+	-webkit-line-clamp: 2;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	word-wrap: break-word;
+
+	a {
+		color: inherit;
+		text-decoration: none;
+		&:hover {
+			text-decoration: underline;
+		}
 	}
 }
 
-.itemActions {
+.badges {
 	display: flex;
+	gap: 10px;
 	align-items: center;
-	gap: 8px;
-	flex-shrink: 0;
-}
-
-.listBadge {
-	align-self: center;
-	white-space: nowrap;
-	height: 30px;
-}
-
-.diffButton {
 	flex-shrink: 0;
 }
 
@@ -291,5 +456,55 @@ function openDiffModal(id: string) {
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
+	margin-top: 8px;
+}
+
+.table {
+	height: 100%;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	border: var(--border-base);
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+
+.tableHeader {
+	border-bottom: var(--border-base);
+	display: flex;
+	flex-direction: column;
+}
+
+.tabs {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	width: 165px;
+	padding: var(--spacing-2xs);
+	border: var(--border-base);
+	border-right: 0;
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+
+.tab {
+	color: var(--color-text-base);
+	background-color: transparent;
+	border: 1px solid transparent;
+	padding: var(--spacing-2xs);
+	cursor: pointer;
+	border-radius: 4px;
+	text-align: left;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	&:hover {
+		border-color: var(--color-background-base);
+	}
+}
+
+.tabActive {
+	background-color: var(--color-background-base);
+	color: var(--color-text-dark);
 }
 </style>