mirror of https://github.com/go-gitea/gitea.git
Use `git diff-tree` for `DiffFileTree` on diff pages (#33514)
Modify Diff View FileTree to show all files ## Changes * removes Show Status button on diff * uses `git diff-tree` to generate the file tree for the diff * doesn't reload the diff tree each time we load more files in the preview * selecting and unloaded file will keep loading until that file is loaded * removes `DiffFileList.vue` and "Show Stats" in diff options ## Open Questions * selecting and unloaded file will keep loading until that file is loaded. Is this behaviour okay? It matches what github does. ### Demo In this demo I set `git.MAX_GIT_DIFF_FILES=1` in my `app.ini` to demonstrate a worst case example. In most cases the behaviour isn't nearly as jarring as we load a bunch of files at a time. https://github.com/user-attachments/assets/72f29663-d6fc-472d-94fa-7fb5950c2836 --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>pull/33278/head^2
Alexander McRae
2 weeks ago
committed by
GitHub
parent
7a8eed13b9
commit
aba96f65cd
@ -1,60 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import {onMounted, onUnmounted} from 'vue';
|
|
||||||
import {loadMoreFiles} from '../features/repo-diff.ts';
|
|
||||||
import {diffTreeStore} from '../modules/stores.ts';
|
|
||||||
|
|
||||||
const store = diffTreeStore();
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
document.querySelector('#show-file-list-btn').addEventListener('click', toggleFileList);
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.querySelector('#show-file-list-btn').removeEventListener('click', toggleFileList);
|
|
||||||
});
|
|
||||||
|
|
||||||
function toggleFileList() {
|
|
||||||
store.fileListIsVisible = !store.fileListIsVisible;
|
|
||||||
}
|
|
||||||
|
|
||||||
function diffTypeToString(pType: number) {
|
|
||||||
const diffTypes: Record<string, string> = {
|
|
||||||
'1': 'add',
|
|
||||||
'2': 'modify',
|
|
||||||
'3': 'del',
|
|
||||||
'4': 'rename',
|
|
||||||
'5': 'copy',
|
|
||||||
};
|
|
||||||
return diffTypes[String(pType)];
|
|
||||||
}
|
|
||||||
|
|
||||||
function diffStatsWidth(adds: number, dels: number) {
|
|
||||||
return `${adds / (adds + dels) * 100}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadMoreData() {
|
|
||||||
loadMoreFiles(store.linkLoadMore);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ol class="diff-stats tw-m-0" ref="root" v-if="store.fileListIsVisible">
|
|
||||||
<li v-for="file in store.files" :key="file.NameHash">
|
|
||||||
<div class="tw-font-semibold tw-flex tw-items-center pull-right">
|
|
||||||
<span v-if="file.IsBin" class="tw-ml-0.5 tw-mr-2">{{ store.binaryFileMessage }}</span>
|
|
||||||
{{ file.IsBin ? '' : file.Addition + file.Deletion }}
|
|
||||||
<span v-if="!file.IsBin" class="diff-stats-bar tw-mx-2" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
|
|
||||||
<div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }"/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<!-- todo finish all file status, now modify, add, delete and rename -->
|
|
||||||
<span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)"> </span>
|
|
||||||
<a class="file tw-font-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
|
|
||||||
</li>
|
|
||||||
<li v-if="store.isIncomplete" class="tw-pt-1">
|
|
||||||
<span class="file tw-flex tw-items-center tw-justify-between">{{ store.tooManyFilesMessage }}
|
|
||||||
<a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</template>
|
|
||||||
@ -1,11 +1,16 @@
|
|||||||
import {reactive} from 'vue';
|
import {reactive} from 'vue';
|
||||||
import type {Reactive} from 'vue';
|
import type {Reactive} from 'vue';
|
||||||
|
|
||||||
|
const {pageData} = window.config;
|
||||||
|
|
||||||
let diffTreeStoreReactive: Reactive<Record<string, any>>;
|
let diffTreeStoreReactive: Reactive<Record<string, any>>;
|
||||||
export function diffTreeStore() {
|
export function diffTreeStore() {
|
||||||
if (!diffTreeStoreReactive) {
|
if (!diffTreeStoreReactive) {
|
||||||
diffTreeStoreReactive = reactive(window.config.pageData.diffFileInfo);
|
diffTreeStoreReactive = reactive({
|
||||||
window.config.pageData.diffFileInfo = diffTreeStoreReactive;
|
files: pageData.DiffFiles,
|
||||||
|
fileTreeIsVisible: false,
|
||||||
|
selectedItem: '',
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return diffTreeStoreReactive;
|
return diffTreeStoreReactive;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,86 @@
|
|||||||
|
import {mergeChildIfOnlyOneDir, pathListToTree, type File} from './filetree.ts';
|
||||||
|
|
||||||
|
const emptyList: File[] = [];
|
||||||
|
const singleFile = [{Name: 'file1'}] as File[];
|
||||||
|
const singleDir = [{Name: 'dir1/file1'}] as File[];
|
||||||
|
const nestedDir = [{Name: 'dir1/dir2/file1'}] as File[];
|
||||||
|
const multiplePathsDisjoint = [{Name: 'dir1/dir2/file1'}, {Name: 'dir3/file2'}] as File[];
|
||||||
|
const multiplePathsShared = [{Name: 'dir1/dir2/dir3/file1'}, {Name: 'dir1/file2'}] as File[];
|
||||||
|
|
||||||
|
test('pathListToTree', () => {
|
||||||
|
expect(pathListToTree(emptyList)).toEqual([]);
|
||||||
|
expect(pathListToTree(singleFile)).toEqual([
|
||||||
|
{isFile: true, name: 'file1', path: 'file1', file: {Name: 'file1'}},
|
||||||
|
]);
|
||||||
|
expect(pathListToTree(singleDir)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1', path: 'dir1', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/file1', file: {Name: 'dir1/file1'}},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
expect(pathListToTree(nestedDir)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1', path: 'dir1', children: [
|
||||||
|
{isFile: false, name: 'dir2', path: 'dir1/dir2', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}},
|
||||||
|
]},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
expect(pathListToTree(multiplePathsDisjoint)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1', path: 'dir1', children: [
|
||||||
|
{isFile: false, name: 'dir2', path: 'dir1/dir2', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}},
|
||||||
|
]},
|
||||||
|
]},
|
||||||
|
{isFile: false, name: 'dir3', path: 'dir3', children: [
|
||||||
|
{isFile: true, name: 'file2', path: 'dir3/file2', file: {Name: 'dir3/file2'}},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
expect(pathListToTree(multiplePathsShared)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1', path: 'dir1', children: [
|
||||||
|
{isFile: false, name: 'dir2', path: 'dir1/dir2', children: [
|
||||||
|
{isFile: false, name: 'dir3', path: 'dir1/dir2/dir3', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/dir2/dir3/file1', file: {Name: 'dir1/dir2/dir3/file1'}},
|
||||||
|
]},
|
||||||
|
]},
|
||||||
|
{isFile: true, name: 'file2', path: 'dir1/file2', file: {Name: 'dir1/file2'}},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
const mergeChildWrapper = (testCase: File[]) => {
|
||||||
|
const tree = pathListToTree(testCase);
|
||||||
|
mergeChildIfOnlyOneDir(tree);
|
||||||
|
return tree;
|
||||||
|
};
|
||||||
|
|
||||||
|
test('mergeChildIfOnlyOneDir', () => {
|
||||||
|
expect(mergeChildWrapper(emptyList)).toEqual([]);
|
||||||
|
expect(mergeChildWrapper(singleFile)).toEqual([
|
||||||
|
{isFile: true, name: 'file1', path: 'file1', file: {Name: 'file1'}},
|
||||||
|
]);
|
||||||
|
expect(mergeChildWrapper(singleDir)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1', path: 'dir1', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/file1', file: {Name: 'dir1/file1'}},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
expect(mergeChildWrapper(nestedDir)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1/dir2', path: 'dir1/dir2', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
expect(mergeChildWrapper(multiplePathsDisjoint)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1/dir2', path: 'dir1/dir2', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}},
|
||||||
|
]},
|
||||||
|
{isFile: false, name: 'dir3', path: 'dir3', children: [
|
||||||
|
{isFile: true, name: 'file2', path: 'dir3/file2', file: {Name: 'dir3/file2'}},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
expect(mergeChildWrapper(multiplePathsShared)).toEqual([
|
||||||
|
{isFile: false, name: 'dir1', path: 'dir1', children: [
|
||||||
|
{isFile: false, name: 'dir2/dir3', path: 'dir1/dir2/dir3', children: [
|
||||||
|
{isFile: true, name: 'file1', path: 'dir1/dir2/dir3/file1', file: {Name: 'dir1/dir2/dir3/file1'}},
|
||||||
|
]},
|
||||||
|
{isFile: true, name: 'file2', path: 'dir1/file2', file: {Name: 'dir1/file2'}},
|
||||||
|
]},
|
||||||
|
]);
|
||||||
|
});
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
import {dirname, basename} from '../utils.ts';
|
||||||
|
|
||||||
|
export type FileStatus = 'added' | 'modified' | 'deleted' | 'renamed' | 'copied' | 'typechange';
|
||||||
|
|
||||||
|
export type File = {
|
||||||
|
Name: string;
|
||||||
|
NameHash: string;
|
||||||
|
Status: FileStatus;
|
||||||
|
IsViewed: boolean;
|
||||||
|
IsSubmodule: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
type DirItem = {
|
||||||
|
isFile: false;
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
|
||||||
|
children: Item[];
|
||||||
|
}
|
||||||
|
|
||||||
|
type FileItem = {
|
||||||
|
isFile: true;
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
file: File;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Item = DirItem | FileItem;
|
||||||
|
|
||||||
|
export function pathListToTree(fileEntries: File[]): Item[] {
|
||||||
|
const pathToItem = new Map<string, DirItem>();
|
||||||
|
|
||||||
|
// init root node
|
||||||
|
const root: DirItem = {name: '', path: '', isFile: false, children: []};
|
||||||
|
pathToItem.set('', root);
|
||||||
|
|
||||||
|
for (const fileEntry of fileEntries) {
|
||||||
|
const [parentPath, fileName] = [dirname(fileEntry.Name), basename(fileEntry.Name)];
|
||||||
|
|
||||||
|
let parentItem = pathToItem.get(parentPath);
|
||||||
|
if (!parentItem) {
|
||||||
|
parentItem = constructParents(pathToItem, parentPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileItem: FileItem = {name: fileName, path: fileEntry.Name, isFile: true, file: fileEntry};
|
||||||
|
|
||||||
|
parentItem.children.push(fileItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
return root.children;
|
||||||
|
}
|
||||||
|
|
||||||
|
function constructParents(pathToItem: Map<string, DirItem>, dirPath: string): DirItem {
|
||||||
|
const [dirParentPath, dirName] = [dirname(dirPath), basename(dirPath)];
|
||||||
|
|
||||||
|
let parentItem = pathToItem.get(dirParentPath);
|
||||||
|
if (!parentItem) {
|
||||||
|
// if the parent node does not exist, create it
|
||||||
|
parentItem = constructParents(pathToItem, dirParentPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
const dirItem: DirItem = {name: dirName, path: dirPath, isFile: false, children: []};
|
||||||
|
parentItem.children.push(dirItem);
|
||||||
|
pathToItem.set(dirPath, dirItem);
|
||||||
|
|
||||||
|
return dirItem;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function mergeChildIfOnlyOneDir(nodes: Item[]): void {
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.isFile) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const dir = node as DirItem;
|
||||||
|
|
||||||
|
mergeChildIfOnlyOneDir(dir.children);
|
||||||
|
|
||||||
|
if (dir.children.length === 1 && dir.children[0].isFile === false) {
|
||||||
|
const child = dir.children[0];
|
||||||
|
dir.name = `${dir.name}/${child.name}`;
|
||||||
|
dir.path = child.path;
|
||||||
|
dir.children = child.children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue