From 2bcf950b78519f81b4ade3f9cab32b6e4a200268 Mon Sep 17 00:00:00 2001 From: McMichalK Date: Sun, 23 Aug 2026 18:31:22 +0200 Subject: [PATCH] feat(diff): Add search and extension filter to diff sidebar (#37068) Adds a search box and a file-extension filter to the pull request diff sidebar, so reviewers can narrow a large diff down to the files they care about. Both filters apply to the file tree and to the diff itself. The extension menu follows GitHub: extensions sorted alphabetically, dotfiles and extension-less files in their own buckets, and the selection kept in the same `file-filters[]` query parameter, so a filtered view is shareable and survives a reload. The menu can list every extension in a diff, so `createTippy` gains an opt-in `limitSizeToViewport` option that caps a popup to the space left in the viewport and scrolls its content. Popups that do not ask for it are unchanged. Closes https://github.com/go-gitea/gitea/issues/27256 Signed-off-by: silverwind Signed-off-by: wxiaoguang Co-authored-by: silverwind Co-authored-by: Claude (Opus 4.7) Co-authored-by: Copilot Co-authored-by: Nicolas Co-authored-by: wxiaoguang --- options/locale/locale_en-US.json | 15 +- routers/web/repo/treelist.go | 4 + routers/web/repo/treelist_test.go | 15 ++ templates/repo/diff/box.tmpl | 36 +++- tests/e2e/external-render.test.ts | 6 +- tests/e2e/file-view-render.test.ts | 8 +- tests/e2e/pr-create.test.ts | 4 +- tests/e2e/pr-diff-filter.test.ts | 87 +++++++++ tests/e2e/pr-review.test.ts | 4 +- tests/e2e/pull-merge-box.test.ts | 4 +- tests/e2e/utils.ts | 27 ++- web_src/css/helpers.css | 18 ++ web_src/css/modules/tippy.css | 18 +- web_src/css/repo.css | 21 ++- web_src/js/components/DiffCommitSelector.vue | 2 +- .../js/components/DiffFileExtensionFilter.vue | 168 +++++++++++++++++ web_src/js/components/DiffFileTree.vue | 126 ++++++++++++- .../js/components/DiffFileTreeItem.test.ts | 23 +++ web_src/js/components/DiffFileTreeItem.vue | 30 ++- web_src/js/features/repo-diff-filetree.ts | 5 +- web_src/js/features/repo-diff.ts | 6 +- web_src/js/modules/diff-file.test.ts | 177 +++++++++++++----- web_src/js/modules/diff-file.ts | 168 ++++++++++++++++- web_src/js/modules/tippy.test.ts | 16 ++ web_src/js/modules/tippy.ts | 47 ++++- web_src/js/svg.ts | 2 + web_src/js/utils.test.ts | 3 + web_src/js/utils.ts | 7 +- 28 files changed, 914 insertions(+), 133 deletions(-) create mode 100644 tests/e2e/pr-diff-filter.test.ts create mode 100644 web_src/js/components/DiffFileExtensionFilter.vue create mode 100644 web_src/js/components/DiffFileTreeItem.test.ts create mode 100644 web_src/js/modules/tippy.test.ts diff --git a/options/locale/locale_en-US.json b/options/locale/locale_en-US.json index a0b0b3eb5bc..f5b7ed1268b 100644 --- a/options/locale/locale_en-US.json +++ b/options/locale/locale_en-US.json @@ -2597,9 +2597,9 @@ "repo.diff.file_byte_size": "Size", "repo.diff.file_suppressed": "File diff suppressed because it is too large", "repo.diff.file_suppressed_line_too_long": "File diff suppressed because one or more lines are too long", - "repo.diff.too_many_files": "Some files were not shown because too many files have changed in this diff", - "repo.diff.show_more": "Show More", - "repo.diff.load": "Load Diff", + "repo.diff.too_many_files": "Loaded %[1]d of %[2]d files, more files were not shown because too many files have changed in this diff.", + "repo.diff.show_more": "Show more", + "repo.diff.load": "Load diff", "repo.diff.generated": "Generated", "repo.diff.vendored": "Vendored", "repo.diff.comment.add_line_comment": "Add line comment", @@ -2627,6 +2627,15 @@ "repo.diff.has_escaped": "This line has hidden Unicode characters", "repo.diff.show_file_tree": "Show file tree", "repo.diff.hide_file_tree": "Hide file tree", + "repo.diff.filter_files": "Filter files…", + "repo.diff.filter_files_clear": "Clear filter", + "repo.diff.filter_by_file_extension": "Filter by file extension", + "repo.diff.file_extensions": "File extensions", + "repo.diff.no_file_extension": "No extension", + "repo.diff.dotfile_extension": "Dotfiles", + "repo.diff.all_file_extensions": "All extensions", + "repo.diff.no_files_matched": "No files matched your search", + "repo.diff.show_more_matching": "Show more - %[1]d matching below", "repo.diff.submodule_added": "Submodule %[1]s added at %[2]s", "repo.diff.submodule_deleted": "Submodule %[1]s deleted from %[2]s", "repo.diff.submodule_updated": "Submodule %[1]s updated: %[2]s", diff --git a/routers/web/repo/treelist.go b/routers/web/repo/treelist.go index 206660ad5c7..d75d31444a6 100644 --- a/routers/web/repo/treelist.go +++ b/routers/web/repo/treelist.go @@ -63,6 +63,7 @@ func isExcludedEntry(entry *git.TreeEntry) bool { // WebDiffFileItem is used by frontend, check the field names in frontend before changing type WebDiffFileItem struct { FullName string + OldFullName string DisplayName string NameHash string DiffStatus string @@ -110,6 +111,9 @@ func transformDiffTreeForWeb(renderedIconPool *fileicon.RenderedIconPool, diffTr for _, file := range diffTree.Files { item := &WebDiffFileItem{FullName: file.HeadPath, DiffStatus: file.Status} + if file.BasePath != file.HeadPath { + item.OldFullName = file.BasePath + } item.IsViewed = filesViewedState[item.FullName] == pull_model.Viewed item.NameHash = git.HashFilePathForWebUI(item.FullName) item.FileIcon = fileicon.RenderEntryIconHTML(renderedIconPool, &fileicon.EntryInfo{BaseName: path.Base(file.HeadPath), EntryMode: file.HeadMode}) diff --git a/routers/web/repo/treelist_test.go b/routers/web/repo/treelist_test.go index be496933e86..171b32a66a3 100644 --- a/routers/web/repo/treelist_test.go +++ b/routers/web/repo/treelist_test.go @@ -28,6 +28,12 @@ func TestTransformDiffTreeForWeb(t *testing.T) { HeadPath: "file1", HeadMode: git.EntryModeBlob, }, + { + Status: "renamed", + BasePath: "file2-old", + HeadPath: "file2", + HeadMode: git.EntryModeBlob, + }, }}, map[string]pull_model.ViewedState{ "dir-a/dir-a-x/file-deep": pull_model.Viewed, }) @@ -62,6 +68,15 @@ func TestTransformDiffTreeForWeb(t *testing.T) { DiffStatus: "added", FileIcon: mockIconForFile(`svg-mfi-file`), }, + { + EntryMode: "", + DisplayName: "file2", + FullName: "file2", + OldFullName: "file2-old", + NameHash: "cb99b709a1978bd205ab9dfd4c5aaa1fc91c7523", + DiffStatus: "renamed", + FileIcon: mockIconForFile(`svg-mfi-file`), + }, }, }, }, ret) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 4ed7fe9ab7e..52204947d7c 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -35,7 +35,9 @@ {{template "repo/diff/whitespace_dropdown" .}} {{template "repo/diff/options_dropdown" .}} {{if .PageIsPullFiles}} -
+
{{/* the following will be replaced by vue component, but this avoids any loading artifacts till the vue component is initialized */}}
{{svg "octicon-git-commit"}} @@ -61,7 +63,15 @@
{{if $showFileTree}} {{$.FileIconPoolHTML}} -
+
@@ -69,7 +79,13 @@ {{if .DiffNotAvailable}}

{{ctx.Locale.Tr "repo.diff.data_not_available"}}

{{else}} -
+
+ {{if $showFileTree}} +
+

{{ctx.Locale.Tr "repo.diff.no_files_matched"}}

+
+ {{end}} +
{{range $i, $file := .Diff.Files}} {{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}} {{$isImage:= $file.IsBlobTypeImage}} @@ -206,13 +222,17 @@ {{end}} {{if .Diff.IsIncomplete}} -
-

- {{ctx.Locale.Tr "repo.diff.too_many_files"}} - {{ctx.Locale.Tr "repo.diff.show_more"}} -

+
+ + {{ctx.Locale.Tr "repo.diff.too_many_files" (len .Diff.Files) .DiffShortStat.NumFiles}} + + {{ctx.Locale.Tr "repo.diff.show_more"}}
{{end}} +
{{end}}
diff --git a/tests/e2e/external-render.test.ts b/tests/e2e/external-render.test.ts index da02db4c1a7..3f04b4b089c 100644 --- a/tests/e2e/external-render.test.ts +++ b/tests/e2e/external-render.test.ts @@ -1,6 +1,6 @@ import {env} from 'node:process'; import {expect, test} from '@playwright/test'; -import {login, apiCreateRepo, apiCreateFile, assertFlushWithParent, assertNoJsError, randomString} from './utils.ts'; +import {login, apiCreateRepo, apiCreateFiles, assertFlushWithParent, assertNoJsError, randomString} from './utils.ts'; test('external file', async ({page, request}) => { const repoName = `e2e-external-render-${randomString(8)}`; @@ -9,7 +9,7 @@ test('external file', async ({page, request}) => { apiCreateRepo(request, {name: repoName}), login(page), ]); - await apiCreateFile(request, owner, repoName, 'test.external', '

rendered content

'); + await apiCreateFiles(request, owner, repoName, [{path: 'test.external', content: '

rendered content

'}]); await page.goto(`/${owner}/${repoName}/src/branch/main/test.external`); const iframe = page.locator('iframe.external-render-iframe'); await expect(iframe).toBeVisible(); @@ -34,7 +34,7 @@ test('openapi file', async ({page, request}) => { paths: {'/pets': {get: {responses: {'200': {description: 'OK', content: {'application/json': {schema: {$ref: '#/components/schemas/Pet'}}}}}}}}, components: {schemas: {Pet: {type: 'object', properties: {children: {type: 'array', items: {$ref: '#/components/schemas/Pet'}}}}}}, }); - await apiCreateFile(request, owner, repoName, 'openapi.json', spec); + await apiCreateFiles(request, owner, repoName, [{path: 'openapi.json', content: spec}]); await page.goto(`/${owner}/${repoName}/src/branch/main/openapi.json`); const iframe = page.locator('iframe.external-render-iframe'); await expect(iframe).toBeVisible(); diff --git a/tests/e2e/file-view-render.test.ts b/tests/e2e/file-view-render.test.ts index 6ebb2afceb9..89cca628010 100644 --- a/tests/e2e/file-view-render.test.ts +++ b/tests/e2e/file-view-render.test.ts @@ -1,6 +1,6 @@ import {env} from 'node:process'; import {expect, test} from '@playwright/test'; -import {apiCreateRepo, apiCreateFile, assertFlushWithParent, assertNoJsError, login, randomString} from './utils.ts'; +import {apiCreateRepo, apiCreateFiles, assertFlushWithParent, assertNoJsError, login, randomString} from './utils.ts'; test('3d model file', async ({page, request, browserName}) => { test.skip(browserName === 'firefox', 'unclear firefox-only CI-only failure'); // eslint-disable-line playwright/no-skipped-test -- conditional skip, the reason is in the message @@ -8,7 +8,7 @@ test('3d model file', async ({page, request, browserName}) => { const owner = env.GITEA_TEST_E2E_USER; await apiCreateRepo(request, {name: repoName}); const stl = 'solid test\nfacet normal 0 0 1\nouter loop\nvertex 0 0 0\nvertex 1 0 0\nvertex 0 1 0\nendloop\nendfacet\nendsolid test\n'; - await apiCreateFile(request, owner, repoName, 'test.stl', stl); + await apiCreateFiles(request, owner, repoName, [{path: 'test.stl', content: stl}]); await page.goto(`/${owner}/${repoName}/src/branch/main/test.stl?display=rendered`); const iframe = page.locator('iframe.external-render-iframe'); await expect(iframe).toBeVisible(); @@ -31,7 +31,7 @@ test('pdf file', async ({page, request}) => { const repoName = `e2e-pdf-render-${randomString(8)}`; const owner = env.GITEA_TEST_E2E_USER; await apiCreateRepo(request, {name: repoName}); - await apiCreateFile(request, owner, repoName, 'test.pdf', '%PDF-1.0\n%%EOF\n'); + await apiCreateFiles(request, owner, repoName, [{path: 'test.pdf', content: '%PDF-1.0\n%%EOF\n'}]); await page.goto(`/${owner}/${repoName}/src/branch/main/test.pdf`); const container = page.locator('.file-view-render-container'); await expect(container).toHaveAttribute('data-render-name', 'pdf-viewer'); @@ -47,7 +47,7 @@ test('asciicast file', async ({page, request}) => { await Promise.all([apiCreateRepo(request, {name: repoName, autoInit: false}), login(page)]); const cast = '{"version": 2, "width": 80, "height": 24}\n[0.0, "o", "test-content"]\n'; // on an empty repo, apiCreateFile with newBranch creates that branch as the initial commit - await apiCreateFile(request, owner, repoName, 'test.cast', cast, {newBranch: branch}); + await apiCreateFiles(request, owner, repoName, [{path: 'test.cast', content: cast}], {newBranch: branch}); await page.goto(`/${owner}/${repoName}/src/branch/${branchEnc}/test.cast`); const iframe = page.locator('iframe.external-render-iframe'); const frame = iframe.contentFrame(); diff --git a/tests/e2e/pr-create.test.ts b/tests/e2e/pr-create.test.ts index 592512683fc..662bd42af1c 100644 --- a/tests/e2e/pr-create.test.ts +++ b/tests/e2e/pr-create.test.ts @@ -1,13 +1,13 @@ import {env} from 'node:process'; import {test, expect} from '@playwright/test'; -import {login, apiCreateRepo, apiCreateFile, randomString} from './utils.ts'; +import {login, apiCreateRepo, apiCreateFiles, randomString} from './utils.ts'; test('create a pull request from the compare page', async ({page, request}) => { const repoName = `e2e-pr-create-${randomString(8)}`; const owner = env.GITEA_TEST_E2E_USER; await apiCreateRepo(request, {name: repoName}); await Promise.all([ - apiCreateFile(request, owner, repoName, 'feat.txt', 'feature content\n', {branch: 'main', newBranch: 'feat'}), + apiCreateFiles(request, owner, repoName, [{path: 'feat.txt', content: 'feature content\n'}], {branch: 'main', newBranch: 'feat'}), login(page), ]); // expand=1 renders the PR form directly, skipping the "New Pull Request" toggle click diff --git a/tests/e2e/pr-diff-filter.test.ts b/tests/e2e/pr-diff-filter.test.ts new file mode 100644 index 00000000000..9697ff17e6b --- /dev/null +++ b/tests/e2e/pr-diff-filter.test.ts @@ -0,0 +1,87 @@ +import {test, expect} from '@playwright/test'; +import {apiCreateFiles, apiCreatePR, apiCreateRepo, apiCreateUser, apiUserHeaders, loginUser, randomString} from './utils.ts'; + +test('diff sidebar filtering', async ({page, request}) => { + const user = `df-${randomString(8)}`; + await apiCreateUser(request, user); + const headers = apiUserHeaders(user); + const repo = `e2e-difffilter-${randomString(8)}`; + await apiCreateRepo(request, {name: repo, headers}); + + await apiCreateFiles(request, user, repo, [ + {path: 'src/a.ts', content: 'a\n'}, + {path: 'src/b.ts', content: 'b\n'}, + {path: 'src/.eslintrc', content: 'e\n'}, // dotfiles count as "No extension" + {path: 'styles/x.css', content: 'x\n'}, + {path: 'docs/intro.md', content: 'r\n'}, + {path: 'Makefile', content: 'm\n'}, + ], {branch: 'main', newBranch: 'feat', headers}); + const prIndex = await apiCreatePR(request, user, repo, 'feat', 'main', 'diff filter test', {headers}); + + await loginUser(page, user); + await page.goto(`/${user}/${repo}/pulls/${prIndex}/files`); + + const tree = page.locator('#diff-file-tree'); + const items = tree.locator('.item-file'); + const search = tree.getByRole('textbox'); + const filterTrigger = tree.getByRole('button', {name: 'Filter by file extension'}); + + // every PR file is listed + await expect(items).toHaveCount(6); + + // sidebar leaves the diff column the bulk of the viewport + const boxesWidth = (await page.locator('#diff-file-boxes').boundingBox())!.width; + const treeWidth = (await tree.boundingBox())!.width; + expect(boxesWidth).toBeGreaterThan(treeWidth * 2); + + // search filters tree and file boxes + await search.fill('a.ts'); + await expect(items).toHaveText([/a\.ts/]); + await expect(page.locator('.diff-file-box[data-new-filename="src/a.ts"]')).toBeVisible(); + + await tree.getByRole('button', {name: 'Clear filter'}).click(); + await expect(items).toHaveCount(6); + + // empty-result placeholder + await search.fill('zzz-no-such-file'); + await expect(page.locator('#diff-no-matches')).toBeVisible(); + await search.fill(''); + + // extensions sort alphabetically, then dotfiles, then files without extension + await filterTrigger.click(); + const extItems = page.getByRole('menuitemcheckbox'); + await expect(extItems).toHaveText(['.css1', '.md1', '.ts2', 'Dotfiles1', 'No extension1', 'All extensions']); + + // deselecting .ts leaves the other extensions + const allExtensions = page.getByRole('menuitemcheckbox', {name: 'All extensions'}); + await page.getByRole('menuitemcheckbox', {name: '.ts'}).click(); + await expect(items).toHaveCount(4); + await expect(filterTrigger).toHaveClass(/\bindicator-dot\b/); + await expect(allExtensions).toHaveAttribute('aria-checked', 'false'); + + // "All extensions" cycles through select all, select none and back + await allExtensions.click(); + await expect(allExtensions).toHaveAttribute('aria-checked', 'true'); + await expect(items).toHaveCount(6); + + await allExtensions.click(); + await expect(items).toHaveCount(0); + + await allExtensions.click(); + await expect(items).toHaveCount(6); + await expect(filterTrigger).not.toHaveClass(/\bindicator-dot\b/); + + // the extension filter lives in the URL and survives a reload + await page.getByRole('menuitemcheckbox', {name: '.ts'}).click(); + await expect(page).toHaveURL(/file-filters/); + await page.reload(); + await expect(items).toHaveCount(4); + await expect(filterTrigger).toHaveClass(/\bindicator-dot\b/); + + // hiding the file tree drops the filter + await expect(page.locator('.diff-file-box[data-new-filename="src/a.ts"]')).toBeHidden(); + await filterTrigger.click(); + await page.locator('.diff-toggle-file-tree-button').click(); + await expect(tree).toBeHidden(); + await expect(page.locator('.diff-file-box[data-new-filename="src/a.ts"]')).toBeVisible(); +}); diff --git a/tests/e2e/pr-review.test.ts b/tests/e2e/pr-review.test.ts index d1e7aaa4ca0..ea2d7fbaa82 100644 --- a/tests/e2e/pr-review.test.ts +++ b/tests/e2e/pr-review.test.ts @@ -1,5 +1,5 @@ import {test, expect} from '@playwright/test'; -import {apiCreateFile, apiCreatePR, apiCreateRepo, apiCreateReview, apiCreateUser, apiUserHeaders, loginUser, randomString} from './utils.ts'; +import {apiCreateFiles, apiCreatePR, apiCreateRepo, apiCreateReview, apiCreateUser, apiUserHeaders, loginUser, randomString} from './utils.ts'; test('pr review flow', async ({page, request}) => { const poster = `rv-poster-${randomString(8)}`; @@ -8,7 +8,7 @@ test('pr review flow', async ({page, request}) => { const posterHeaders = apiUserHeaders(poster); const repoName = `e2e-prreview-${randomString(8)}`; await apiCreateRepo(request, {name: repoName, headers: posterHeaders}); - await apiCreateFile(request, poster, repoName, 'added.txt', 'new content\n', {branch: 'main', newBranch: 'feat'}); + await apiCreateFiles(request, poster, repoName, [{path: 'added.txt', content: 'new content\n'}], {branch: 'main', newBranch: 'feat', headers: posterHeaders}); const prIndex = await apiCreatePR(request, poster, repoName, 'feat', 'main', 'review test', {headers: posterHeaders}); // reviewer seeds an inline comment via API so the poster's UI reply exercises the reply-to-review path (#35994) diff --git a/tests/e2e/pull-merge-box.test.ts b/tests/e2e/pull-merge-box.test.ts index 3b29e4383e2..974836fe98d 100644 --- a/tests/e2e/pull-merge-box.test.ts +++ b/tests/e2e/pull-merge-box.test.ts @@ -1,6 +1,6 @@ import {env} from 'node:process'; import {test, expect} from '@playwright/test'; -import {apiCreateFile, apiCreatePR, apiCreateRepo, assertNoJsError, login, randomString} from './utils.ts'; +import {apiCreateFiles, apiCreatePR, apiCreateRepo, assertNoJsError, login, randomString} from './utils.ts'; const owner = env.GITEA_TEST_E2E_USER; @@ -8,7 +8,7 @@ test('merge box merges a pull request', async ({page, request}) => { const repo = `e2e-merge-box-${randomString(8)}`; const createPR = (async () => { await apiCreateRepo(request, {name: repo}); - await apiCreateFile(request, owner, repo, 'feat.txt', 'feature\n', {branch: 'main', newBranch: 'feat'}); + await apiCreateFiles(request, owner, repo, [{path: 'feat.txt', content: 'feature\n'}], {branch: 'main', newBranch: 'feat'}); return apiCreatePR(request, owner, repo, 'feat', 'main', 'merge box test'); })(); const [index] = await Promise.all([createPR, login(page)]); diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts index 8fe335bc85d..e230acc3ce0 100644 --- a/tests/e2e/utils.ts +++ b/tests/e2e/utils.ts @@ -12,8 +12,6 @@ export function randomString(length: number): string { return result; } -export const timeoutFactor = Number(env.GITEA_TEST_E2E_TIMEOUT_FACTOR) || 1; - export function baseUrl() { return env.GITEA_TEST_E2E_URL?.replace(/\/$/g, ''); } @@ -67,6 +65,17 @@ export async function apiStartStopwatch(requestContext: APIRequestContext, owner }), 'apiStartStopwatch'); } +/** Commit one or more files in a single API call. */ +export async function apiCreateFiles(requestContext: APIRequestContext, owner: string, repo: string, files: Array<{path: string; content: string}>, {branch, newBranch, headers}: {branch?: string; newBranch?: string; headers?: Record} = {}) { + await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/contents`, { + headers: headers || apiHeaders(), + data: { + branch, new_branch: newBranch, + files: files.map((file) => ({operation: 'create', path: file.path, content: Buffer.from(file.content, 'utf8').toString('base64')})), + }, + }), 'apiCreateFiles'); +} + export async function apiCancelStopwatch(requestContext: APIRequestContext, owner: string, repo: string, issueIndex: number, {headers}: {headers?: Record} = {}) { await apiRetry(() => requestContext.delete(`${baseUrl()}/api/v1/repos/${owner}/${repo}/issues/${issueIndex}/stopwatch/delete`, { headers: headers || apiHeaders(), @@ -80,20 +89,6 @@ export async function apiCloseIssue(requestContext: APIRequestContext, owner: st }), 'apiCloseIssue'); } -export async function apiCreateFile(requestContext: APIRequestContext, owner: string, repo: string, filepath: string, content: string, {branch, newBranch, message}: {branch?: string; newBranch?: string; message?: string} = {}) { - await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/contents/${filepath}`, { - headers: apiHeaders(), - data: {content: Buffer.from(content, 'utf8').toString('base64'), branch, new_branch: newBranch, message}, - }), 'apiCreateFile'); -} - -export async function apiCreateBranch(requestContext: APIRequestContext, owner: string, repo: string, newBranch: string) { - await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/branches`, { - headers: apiHeaders(), - data: {new_branch_name: newBranch}, - }), 'apiCreateBranch'); -} - /** Create a PR via API. Returns the PR index for subsequent operations. */ export async function apiCreatePR(requestContext: APIRequestContext, owner: string, repo: string, head: string, base: string, title: string, {headers}: {headers?: Record} = {}): Promise { let prIndex = 0; diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 42d06e2e66a..b3f728e5570 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -30,6 +30,24 @@ Gitea's private styles use `g-` prefix. .interact-bg:hover { background: var(--color-hover) !important; } .interact-bg:active { background: var(--color-active) !important; } +/* primary-color dot centered on the top-right corner of the element */ +.indicator-dot { + position: relative; +} + +.indicator-dot::after { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 9px; + height: 9px; + border-radius: 50%; + background: var(--color-primary); + border: 1px solid var(--color-secondary); + transform: translate(50%, -50%); +} + @media (max-width: 767.98px) { /* double selector so it wins over .tw-flex (old .gt-df) etc */ .not-mobile.not-mobile { diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 10c57f85f0c..e7eccd7aac1 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -14,6 +14,18 @@ max-width: calc(100vw - 32px); } +/* opt-in via createTippy's "limitSizeToViewport" */ +[data-tippy-limit-size] .tippy-box { + display: flex; + flex-direction: column; + max-width: var(--tippy-max-width, none); + max-height: var(--tippy-max-height, none); +} + +[data-tippy-limit-size] .tippy-content { + overflow: auto; +} + .tippy-box { position: relative; background-color: var(--color-menu); @@ -91,7 +103,7 @@ background: var(--color-hover); } -.tippy-box[data-theme="menu"] .item:focus { +.tippy-box[data-theme="menu"] .item:focus-visible { background: var(--color-hover); } @@ -99,6 +111,10 @@ background: var(--color-active); } +.tippy-box[data-theme="menu"] .divider { + margin: 4px 0; /* fit the menu's vertical padding */ +} + /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */ .tippy-box[data-theme="box-with-header"] { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 1c46ec3fa6d..777f38a5036 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1549,27 +1549,38 @@ tbody.commit-list { #diff-container { display: flex; + padding-top: 4px; /* for box-shadow from .diff-file-box */ gap: var(--page-spacing); } -#diff-file-boxes { +#diff-boxes-column { flex: 1; - max-width: 100%; + min-width: 0; +} + +#diff-file-boxes { display: flex; flex-direction: column; gap: 8px; } #diff-file-tree { - flex: 0 0 20%; - max-width: 380px; + flex: 0 0 256px; + min-width: 0; line-height: inherit; position: sticky; padding-top: 0; top: 47px; max-height: calc(100vh - 47px); height: 100%; - overflow-y: auto; + display: flex; + flex-direction: column; +} + +@media (min-width: 1201px) { + #diff-file-tree { + flex-basis: 320px; + } } .ui.message.unicode-escape-prompt { diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue index 7ccd5f08cbc..676290c825d 100644 --- a/web_src/js/components/DiffCommitSelector.vue +++ b/web_src/js/components/DiffCommitSelector.vue @@ -33,7 +33,7 @@ const uniqueIdShowAll = generateElemId('diff-commit-selector-show-all-'); const menuVisible = shallowRef(false); const isLoading = shallowRef(false); -const locale = shallowRef>({filter_changes_by_commit: elMount.getAttribute('data-filter_changes_by_commit')!}); +const locale = shallowRef>({filter_changes_by_commit: elMount.getAttribute('data-text-filter-changes-by-commit')!}); const commits = ref>([]); // deep, the commit objects are mutated in place const hoverActivated = shallowRef(false); const lastReviewCommitSha = shallowRef(null); diff --git a/web_src/js/components/DiffFileExtensionFilter.vue b/web_src/js/components/DiffFileExtensionFilter.vue new file mode 100644 index 00000000000..970612783f4 --- /dev/null +++ b/web_src/js/components/DiffFileExtensionFilter.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index b6628085661..1eeaaac78a3 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -1,20 +1,33 @@ {{ item.DisplayName }} - + diff --git a/web_src/js/features/repo-diff-filetree.ts b/web_src/js/features/repo-diff-filetree.ts index cc4576a846c..198bc302296 100644 --- a/web_src/js/features/repo-diff-filetree.ts +++ b/web_src/js/features/repo-diff-filetree.ts @@ -1,10 +1,11 @@ import {createApp} from 'vue'; import DiffFileTree from '../components/DiffFileTree.vue'; +import type {DiffFileTreeLocale} from '../modules/diff-file.ts'; export function initDiffFileTree() { const el = document.querySelector('#diff-file-tree'); if (!el) return; - const fileTreeView = createApp(DiffFileTree); - fileTreeView.mount(el); + const locale = JSON.parse(el.getAttribute('data-locale')!) as DiffFileTreeLocale; + createApp(DiffFileTree, {locale}).mount(el); } diff --git a/web_src/js/features/repo-diff.ts b/web_src/js/features/repo-diff.ts index 9d5e983902a..35182dafd89 100644 --- a/web_src/js/features/repo-diff.ts +++ b/web_src/js/features/repo-diff.ts @@ -12,6 +12,7 @@ import {invertFileFolding} from './file-fold.ts'; import {parseDom} from '../utils.ts'; import {registerGlobalEventFunc, registerGlobalInitFunc} from '../modules/observer.ts'; import {performFetchActionTrigger} from '../modules/fetch-action.ts'; +import {applyFiltersToFileBoxes, diffTreeStore} from '../modules/diff-file.ts'; import {initImageDiff} from './imagediff.ts'; function initDiffFileViewToggle(el: HTMLElement) { @@ -158,12 +159,11 @@ async function diffLoadMoreFiles(btn: Element): Promise { const resp = await GET(url); if (!resp.ok) return false; const respText = await resp.text(); - const respDoc = parseDom(respText, 'text/html'); + const respDoc = parseDom(respText, 'text/html'); // the response is a full HTML page, extract the new file boxes from it const respFileBoxes = respDoc.querySelector('#diff-file-boxes')!; - // the response is a full HTML page, we need to extract the relevant contents: - // * append the newly loaded file list items to the existing list const respFileBoxesChildren = Array.from(respFileBoxes.children); // "children:HTMLCollection" will be empty after replaceWith document.querySelector('#diff-incomplete')!.replaceWith(...respFileBoxesChildren); + applyFiltersToFileBoxes(diffTreeStore()); onDiffFileBodyChange(); return true; } catch (error) { diff --git a/web_src/js/modules/diff-file.test.ts b/web_src/js/modules/diff-file.test.ts index f0438538a00..47dcc3e2c54 100644 --- a/web_src/js/modules/diff-file.test.ts +++ b/web_src/js/modules/diff-file.test.ts @@ -1,51 +1,140 @@ -import {diffTreeStoreSetViewed, reactiveDiffTreeStore} from './diff-file.ts'; +import {countMatchingFiles, diffTreeStoreSetViewed, extensionFilterFromUrl, extensionFilterToUrl, filterDiffTree, getDiffTreeExtensionStats, reactiveDiffTreeStore, type DiffTreeEntry} from './diff-file.ts'; -test('diff-tree', () => { - const store = reactiveDiffTreeStore({ - 'TreeRoot': { - 'FullName': '', - 'DisplayName': '', - 'EntryMode': '', - 'IsViewed': false, - 'NameHash': '....', - 'DiffStatus': '', - 'FileIcon': '', - 'Children': [ - { - 'FullName': 'dir1', - 'DisplayName': 'dir1', - 'EntryMode': 'tree', - 'IsViewed': false, - 'NameHash': '....', - 'DiffStatus': '', - 'FileIcon': '', - 'Children': [ - { - 'FullName': 'dir1/test.txt', - 'DisplayName': 'test.txt', - 'DiffStatus': 'added', - 'NameHash': '....', - 'EntryMode': '', - 'IsViewed': false, - 'FileIcon': '', - 'Children': null, - }, - ], - }, - { - 'FullName': 'other.txt', - 'DisplayName': 'other.txt', - 'NameHash': '........', - 'DiffStatus': 'added', - 'EntryMode': '', - 'IsViewed': false, - 'FileIcon': '', - 'Children': null, - }, - ], +function file(name: string, oldName: string = ''): DiffTreeEntry { + return { + FullName: name, + OldFullName: oldName, + DisplayName: name.split('/').pop()!, + DiffStatus: 'added', + NameHash: name, + EntryMode: '', + IsViewed: false, + FileIcon: '', + Children: null, + }; +} + +function dir(name: string, children: DiffTreeEntry[]): DiffTreeEntry { + return { + FullName: name, + OldFullName: '', + DisplayName: name.split('/').pop()!, + EntryMode: 'tree', + IsViewed: false, + NameHash: name, + DiffStatus: '', + FileIcon: '', + Children: children, + }; +} + +function makeStore(children: DiffTreeEntry[]) { + return reactiveDiffTreeStore({ + TreeRoot: { + FullName: '', OldFullName: '', DisplayName: '', EntryMode: 'tree', IsViewed: false, + NameHash: 'root', DiffStatus: '', FileIcon: '', Children: children, }, }, '', ''); +} + +function visibleNames(root: DiffTreeEntry | null): string[] { + if (!root) return []; + const out: string[] = []; + const visit = (e: DiffTreeEntry) => { + if (e.EntryMode !== 'tree') out.push(e.FullName); + for (const c of e.Children ?? []) visit(c); + }; + visit(root); + return out; +} + +test('diff-tree', () => { + const store = makeStore([ + dir('dir1', [file('dir1/test.txt')]), + file('other.txt'), + ]); diffTreeStoreSetViewed(store, 'dir1/test.txt', true); expect(store.fullNameMap['dir1/test.txt'].IsViewed).toBe(true); expect(store.fullNameMap['dir1'].IsViewed).toBe(true); }); + +test('filterDiffTree', () => { + const store = makeStore([ + dir('dir1', [file('dir1/test.txt')]), + file('other.ts'), + file('other.TS'), + ]); + + store.filenameFilterQuery = 'TesT'; + expect(visibleNames(filterDiffTree(store))).toEqual(['dir1/test.txt']); + + store.filenameFilterQuery = ''; + store.activeExtensions = ['.ts']; + expect(visibleNames(filterDiffTree(store))).toEqual(['other.ts', 'other.TS']); + + store.activeExtensions = []; + expect(visibleNames(filterDiffTree(store))).toEqual([]); + + store.activeExtensions = 'all'; + expect(visibleNames(filterDiffTree(store))).toEqual(['dir1/test.txt', 'other.ts', 'other.TS']); +}); + +test('getDiffTreeExtensionStats', () => { + const store = makeStore([ + dir('dir1', [file('dir1/test.txt'), file('dir1/Makefile'), file('dir1/.gitignore')]), + file('.eslintrc.json'), // a dotfile with an extension keeps that extension + file('other.ts'), + file('other.TXT'), // case-insensitive + ]); + expect(getDiffTreeExtensionStats(store)).toEqual([ + {ext: '.json', count: 1}, + {ext: '.ts', count: 1}, + {ext: '.txt', count: 2}, + {ext: 'dotfile', count: 1}, + {ext: '', count: 1}, + ]); +}); + +test('countMatchingFiles', () => { + const store = makeStore([ + dir('dir1', [file('dir1/new-name.md', 'dir1/old-name.txt')]), + file('other.ts'), + ]); + + expect(countMatchingFiles(store)).toBe(2); + + // search query also matches the pre-rename path + store.filenameFilterQuery = 'old-name'; + expect(visibleNames(filterDiffTree(store))).toEqual(['dir1/new-name.md']); + expect(countMatchingFiles(store)).toBe(1); + + // extension filter only applies to new name + store.filenameFilterQuery = ''; + store.activeExtensions = ['.txt']; + expect(visibleNames(filterDiffTree(store))).toEqual([]); + expect(countMatchingFiles(store)).toBe(0); + store.activeExtensions = ['.md']; + expect(visibleNames(filterDiffTree(store))).toEqual(['dir1/new-name.md']); + + store.activeExtensions = ['.md', '.ts']; + expect(countMatchingFiles(store)).toBe(2); +}); + +test('extensionFilter url round-trip', () => { + const known = ['.go', '.ts', 'dotfile', '']; + const url = 'http://localhost/owner/repo/pulls/1/files?style=split'; + const roundTrip = (filter: Parameters[0]) => + extensionFilterFromUrl(new URL(extensionFilterToUrl(filter, url)).search, known); + + expect(extensionFilterToUrl('all', url)).toEqual(url); + expect(roundTrip('all')).toEqual('all'); + expect(roundTrip(['.go', ''])).toEqual(['.go', '']); + expect(roundTrip([])).toEqual([]); + + // other query parameters survive, "no extension" gets a stable token + expect(extensionFilterToUrl(['.go', ''], url)).toEqual(`${url}&file-filters%5B%5D=.go&file-filters%5B%5D=noextension`); + + // unknown extensions are dropped, selecting every known one is the same as no filter + expect(extensionFilterFromUrl('?file-filters[]=.go&file-filters[]=.nope', known)).toEqual(['.go']); + expect(extensionFilterFromUrl('?file-filters[]=.go&file-filters[]=.ts&file-filters[]=dotfile&file-filters[]=noextension', known)).toEqual('all'); +}); diff --git a/web_src/js/modules/diff-file.ts b/web_src/js/modules/diff-file.ts index 18d085b89ce..4cf8f677cbe 100644 --- a/web_src/js/modules/diff-file.ts +++ b/web_src/js/modules/diff-file.ts @@ -1,12 +1,17 @@ import {reactive} from 'vue'; import type {Reactive} from 'vue'; +import {toggleElem} from '../utils/dom.ts'; +import {trString} from './i18n.ts'; +import {basename, extname} from '../utils.ts'; const {pageData} = window.config; -export type DiffStatus = '' | 'added' | 'modified' | 'deleted' | 'renamed' | 'copied' | 'typechange'; +// matches statusFromLetter in services/gitdiff/git_diff_tree.go +export type DiffStatus = '' | 'added' | 'modified' | 'deleted' | 'renamed' | 'copied' | 'typechanged' | 'unmerged' | 'unknown'; export type DiffTreeEntry = { FullName: string, + OldFullName: string, DisplayName: string, NameHash: string, DiffStatus: DiffStatus, @@ -21,6 +26,9 @@ export type DiffFileTreeData = { TreeRoot: DiffTreeEntry, }; +// activeExtensions: 'all' = no filter (every extension passes); string[] = exact set of extensions allowed (empty = nothing passes). +type ExtensionFilter = 'all' | string[]; + type DiffFileTree = { folderIcon: string; folderOpenIcon: string; @@ -28,12 +36,34 @@ type DiffFileTree = { fullNameMap: Record fileTreeIsVisible: boolean; selectedItem: string; + filenameFilterQuery: string; + activeExtensions: ExtensionFilter; +}; + +type DiffExtensionStats = { + ext: string, + count: number, +}; + +export type DiffExtensionFilterLocale = { + filterByFileExtension: string, + fileExtensions: string, + noFileExtension: string, + dotfileExtension: string, + allFileExtensions: string, +}; + +export type DiffFileTreeLocale = DiffExtensionFilterLocale & { + filterFiles: string, + filterFilesClear: string, }; let diffTreeStoreReactive: Reactive; export function diffTreeStore() { if (!diffTreeStoreReactive) { diffTreeStoreReactive = reactiveDiffTreeStore(pageData.DiffFileTree!, pageData.FolderIcon!, pageData.FolderOpenIcon!); + const knownExtensions = getDiffTreeExtensionStats(diffTreeStoreReactive).map((stat) => stat.ext); + diffTreeStoreReactive.activeExtensions = extensionFilterFromUrl(window.location.search, knownExtensions); } return diffTreeStoreReactive; } @@ -58,25 +88,149 @@ function fillFullNameMap(map: Record, entry: DiffTreeEntr } export function reactiveDiffTreeStore(data: DiffFileTreeData, folderIcon: string, folderOpenIcon: string): Reactive { - const store = reactive({ + const store = reactive({ diffFileTree: data, folderIcon, folderOpenIcon, fileTreeIsVisible: false, selectedItem: '', + filenameFilterQuery: '', + activeExtensions: 'all', fullNameMap: {}, }); fillFullNameMap(store.fullNameMap, data.TreeRoot); return store; } +export const extDotfile = 'dotfile'; // bucket for ".gitignore" and friends, real extensions always start with a dot + +const urlParamFileFilters = 'file-filters[]'; // same parameter GitHub uses, lists the selected extensions +const urlValueNoExtension = 'noextension'; + +export function extensionFilterFromUrl(search: string, knownExtensions: string[]): ExtensionFilter { + const params = new URLSearchParams(search); + if (!params.has(urlParamFileFilters)) return 'all'; + const extensions = params.getAll(urlParamFileFilters) + .filter(Boolean) + .map((ext) => ext === urlValueNoExtension ? '' : ext) + .filter((ext) => knownExtensions.includes(ext)); + return extensions.length === knownExtensions.length ? 'all' : extensions; +} + +export function extensionFilterToUrl(filter: ExtensionFilter, url: string): string { + const parsed = new URL(url); + parsed.searchParams.delete(urlParamFileFilters); + if (filter !== 'all') { + if (!filter.length) parsed.searchParams.append(urlParamFileFilters, ''); + for (const ext of filter) parsed.searchParams.append(urlParamFileFilters, ext || urlValueNoExtension); + } + return parsed.href; +} + +function getFileExtension(filename: string): string { + const ext = extname(filename).toLowerCase(); + if (ext) return ext; + return basename(filename).startsWith('.') ? extDotfile : ''; +} + +function extensionRank(ext: string): number { + if (!ext) return 2; + return ext === extDotfile ? 1 : 0; +} + +export function getDiffTreeExtensionStats(store: Reactive): DiffExtensionStats[] { + const extensionMap = new Map(); + for (const entry of Object.values(store.fullNameMap)) { + if (entry.EntryMode === 'tree' || !entry.FullName) continue; + const ext = getFileExtension(entry.FullName); + extensionMap.set(ext, (extensionMap.get(ext) ?? 0) + 1); + } + return Array.from(extensionMap, ([ext, count]) => ({ext, count})) + .sort((a, b) => extensionRank(a.ext) - extensionRank(b.ext) || a.ext.localeCompare(b.ext)); +} + +function buildFilter(store: Reactive) { + const query = store.filenameFilterQuery.trim().toLowerCase(); + const exts = store.activeExtensions === 'all' ? null : new Set(store.activeExtensions); + if (!query && !exts) return null; + return (newName: string, oldName: string) => { + if (query && !newName.toLowerCase().includes(query) && !oldName.toLowerCase().includes(query)) return false; + return !exts || exts.has(getFileExtension(newName)); + }; +} + +// Children===null marks a file leaf; everything else (incl. the root, which has EntryMode="") is recursed into. +export function filterDiffTree(store: Reactive): DiffTreeEntry | null { + const matches = buildFilter(store); + if (!matches) return store.diffFileTree.TreeRoot; + const visit = (entry: DiffTreeEntry): DiffTreeEntry | null => { + if (entry.Children === null) return matches(entry.FullName, entry.OldFullName) ? entry : null; + const children = entry.Children.map(visit).filter((child): child is DiffTreeEntry => child !== null); + if (!children.length) return null; + return {...entry, Children: children}; + }; + return visit(store.diffFileTree.TreeRoot); +} + +export function countMatchingFiles(store: Reactive): number { + const matches = buildFilter(store); + let totalMatchingFilesCount = 0; + for (const entry of Object.values(store.fullNameMap)) { + if (entry.EntryMode === 'tree' || !entry.FullName) continue; + if (!matches || matches(entry.FullName, entry.OldFullName)) totalMatchingFilesCount++; + } + return totalMatchingFilesCount; +} + +function countEveryFileInDiff(store: Reactive): number { + let totalFilesCount = 0; + for (const entry of Object.values(store.fullNameMap)) { + if (entry.EntryMode !== 'tree' && entry.FullName) totalFilesCount++; + } + return totalFilesCount; +} + +function updateLoadProgress(loadedFiles: number, totalFiles: number) { + const el = document.querySelector('#diff-load-progress'); + if (!el) return; + el.textContent = trString(el.getAttribute('data-text-too-many-files')!, loadedFiles, totalFiles); +} + +function updateShowMoreButton(matchingBelow: number) { + const btn = document.querySelector('#diff-show-more-files'); + if (!btn) return; + if (matchingBelow > 0) { + btn.textContent = trString(btn.getAttribute('data-text-matching')!, matchingBelow); + } else { + btn.textContent = btn.getAttribute('data-text-default')!; + } +} + +export function applyFiltersToFileBoxes(store: Reactive) { + const boxes = document.querySelectorAll('#diff-file-boxes .diff-file-box[data-new-filename]'); + const matches = buildFilter(store); + if (!matches) { + for (const box of boxes) toggleElem(box, true); + toggleElem('#diff-no-matches', false); + updateShowMoreButton(0); + updateLoadProgress(boxes.length, countEveryFileInDiff(store)); + return; + } + let visibleCount = 0; + for (const box of boxes) { + const matched = matches(box.getAttribute('data-new-filename')!, box.getAttribute('data-old-filename')!); + if (matched) visibleCount++; + toggleElem(box, matched); + } + const matchingCount = countMatchingFiles(store); + updateShowMoreButton(matchingCount - visibleCount); + updateLoadProgress(boxes.length, countEveryFileInDiff(store)); + toggleElem('#diff-no-matches', matchingCount === 0); +} + function isEntryViewed(entry: DiffTreeEntry): boolean { if (entry.Children) { - let count = 0; - for (const child of entry.Children) { - if (child.IsViewed) count++; - } - return count === entry.Children.length; + return entry.Children.every((child) => child.IsViewed); } return entry.IsViewed; } diff --git a/web_src/js/modules/tippy.test.ts b/web_src/js/modules/tippy.test.ts new file mode 100644 index 00000000000..4afbe9811e0 --- /dev/null +++ b/web_src/js/modules/tippy.test.ts @@ -0,0 +1,16 @@ +import {availableSizeForPlacement} from './tippy.ts'; + +test('availableSizeForPlacement', () => { + const rect = (values: Partial) => values as DOMRect; + vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(1000); + vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(800); + + // on the placement axis it is the gap to the edge the popup opens towards, the viewport on the other + expect(availableSizeForPlacement(rect({top: 400, bottom: 432}), 'bottom-end', 0)).toEqual({width: 784, height: 560}); + expect(availableSizeForPlacement(rect({top: 400, bottom: 432}), 'top-end', 0)).toEqual({width: 784, height: 392}); + expect(availableSizeForPlacement(rect({left: 100, right: 300}), 'right', 0)).toEqual({width: 492, height: 984}); + expect(availableSizeForPlacement(rect({left: 100, right: 300}), 'left', 0)).toEqual({width: 92, height: 984}); + + // the placement offset eats into the space on that axis + expect(availableSizeForPlacement(rect({top: 400, bottom: 432}), 'bottom-end', -6).height).toEqual(554); +}); diff --git a/web_src/js/modules/tippy.ts b/web_src/js/modules/tippy.ts index c4abdb3d997..6fbaf8a6681 100644 --- a/web_src/js/modules/tippy.ts +++ b/web_src/js/modules/tippy.ts @@ -7,8 +7,11 @@ import {stripTags} from '../utils.ts'; type TippyOpts = { role?: string, theme?: 'default' | 'tooltip' | 'menu' | 'box-with-header' | 'bare', + limitSizeToViewport?: {horizontal?: boolean, vertical?: boolean}, // cap to the viewport and scroll the content } & Partial; +type PopperModifier = NonNullable['modifiers']>[number]; + const visibleInstances = new Set(); const arrowSvg = html``; @@ -20,10 +23,46 @@ function arrowPadding({placement, reference}: {placement: Placement, reference: return Math.max(0, Math.min(3, referenceLength / 2 - 8)); // 8 = half of arrow width } +const viewportPadding = 8; + +// space left on the side the popup opens towards, the viewport on the other axis +export function availableSizeForPlacement(referenceRect: DOMRect, placement: string, offset: number): {width: number, height: number} { + const gap = Math.abs(offset) + viewportPadding; + const spanWidth = window.innerWidth - viewportPadding * 2; + const spanHeight = window.innerHeight - viewportPadding * 2; + const side = placement.split('-')[0]; + if (side === 'top') return {width: spanWidth, height: referenceRect.top - gap}; + if (side === 'bottom') return {width: spanWidth, height: window.innerHeight - referenceRect.bottom - gap}; + if (side === 'left') return {width: referenceRect.left - gap, height: spanHeight}; + return {width: window.innerWidth - referenceRect.right - gap, height: spanHeight}; +} + +// popper does not constrain size, publish it for the styles. Replaced by floating-ui's "size" on migration +function sizeModifier(limit: {horizontal?: boolean, vertical?: boolean}): PopperModifier { + return { + name: 'tippyLimitSize', + enabled: true, + phase: 'beforeWrite', + requires: ['computeStyles'], // runs after "flip" and "offset", so both are final + fn({state}) { + const offset = state.modifiersData.offset?.[state.placement]; + const isVertical = state.placement.startsWith('top') || state.placement.startsWith('bottom'); + const available = availableSizeForPlacement( + state.elements.reference.getBoundingClientRect(), + state.placement, + (isVertical ? offset?.y : offset?.x) ?? 0, + ); + const {style} = state.elements.popper; + if (limit.horizontal) style.setProperty('--tippy-max-width', `${Math.max(0, Math.floor(available.width))}px`); + if (limit.vertical) style.setProperty('--tippy-max-height', `${Math.max(0, Math.floor(available.height))}px`); + }, + }; +} + export function createTippy(target: Element, opts: TippyOpts = {}): Instance { // the callback functions should be destructured from opts, // because we should use our own wrapper functions to handle them, do not let the user override them - const {onHide, onShow, onDestroy, role, theme, arrow, ...other} = opts; + const {onHide, onShow, onDestroy, role, theme, arrow, limitSizeToViewport, ...other} = opts; // CSS theme, either "default", "tooltip", "menu", "box-with-header" or "bare" const resolvedTheme = theme || role || 'default'; const resolvedArrow = arrow ?? (resolvedTheme === 'bare' ? false : arrowSvg); @@ -56,7 +95,10 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance { return onShow?.(instance); }, arrow: resolvedArrow, - popperOptions: {modifiers: [{name: 'arrow', options: {padding: arrowPadding}}]}, + popperOptions: {modifiers: [ + {name: 'arrow', options: {padding: arrowPadding}}, + ...limitSizeToViewport ? [sizeModifier(limitSizeToViewport)] : [], + ]}, // HTML role attribute, ideally the default role would be "popover" but it does not exist role: role || 'menu', theme: resolvedTheme, @@ -68,6 +110,7 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance { if (instance.props.role === 'menu') { target.setAttribute('aria-haspopup', 'true'); } + if (limitSizeToViewport) instance.popper.setAttribute('data-tippy-limit-size', ''); return instance; } diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts index bd8b96691b0..7397346b740 100644 --- a/web_src/js/svg.ts +++ b/web_src/js/svg.ts @@ -22,6 +22,7 @@ import octiconClock from '../../public/assets/img/svg/octicon-clock.svg'; import octiconCode from '../../public/assets/img/svg/octicon-code.svg'; import octiconColumns from '../../public/assets/img/svg/octicon-columns.svg'; import octiconCopy from '../../public/assets/img/svg/octicon-copy.svg'; +import octiconDash from '../../public/assets/img/svg/octicon-dash.svg'; import octiconDiffAdded from '../../public/assets/img/svg/octicon-diff-added.svg'; import octiconDiffModified from '../../public/assets/img/svg/octicon-diff-modified.svg'; import octiconDiffRemoved from '../../public/assets/img/svg/octicon-diff-removed.svg'; @@ -112,6 +113,7 @@ const svgs = { 'octicon-code': octiconCode, 'octicon-columns': octiconColumns, 'octicon-copy': octiconCopy, + 'octicon-dash': octiconDash, 'octicon-diff-added': octiconDiffAdded, 'octicon-diff-modified': octiconDiffModified, 'octicon-diff-removed': octiconDiffRemoved, diff --git a/web_src/js/utils.test.ts b/web_src/js/utils.test.ts index 26160d6cfc1..59e7d25d2ad 100644 --- a/web_src/js/utils.test.ts +++ b/web_src/js/utils.test.ts @@ -17,6 +17,9 @@ test('basename', () => { }); test('extname', () => { + expect(extname('.gitignore')).toEqual(''); + expect(extname('/path/to/.gitignore')).toEqual(''); + expect(extname('/path/to/.eslintrc.json')).toEqual('.json'); expect(extname('/path/to/file.js')).toEqual('.js'); expect(extname('/path/')).toEqual(''); expect(extname('/path')).toEqual(''); diff --git a/web_src/js/utils.ts b/web_src/js/utils.ts index 6cffdd4486f..282f9c2b9ff 100644 --- a/web_src/js/utils.ts +++ b/web_src/js/utils.ts @@ -13,12 +13,11 @@ export function basename(path: string): string { return lastSlashIndex < 0 ? path : path.substring(lastSlashIndex + 1); } -/** transform /path/to/file.ext to .ext */ +/** transform /path/to/file.ext to .ext, dotfiles like /path/to/.gitignore have no extension */ export function extname(path: string): string { - const lastSlashIndex = path.lastIndexOf('/'); const lastPointIndex = path.lastIndexOf('.'); - if (lastSlashIndex > lastPointIndex) return ''; - return lastPointIndex < 0 ? '' : path.substring(lastPointIndex); + if (lastPointIndex <= path.lastIndexOf('/') + 1) return ''; + return path.substring(lastPointIndex); } /** test whether a variable is an object */