Add "Go to file", "Delete Directory" to repo file list page (#35911)

/claim #35898 Resolves #35898 ### Summary of key changes: 1. Add file name search/Go to file functionality to repo button row. 2. Add backend functionality to delete directory 3. Add context menu for directories with functionality to copy path & delete a directory 4. Move Add/Upload file dropdown to right for parity with Github UI 5. Add tree view to the edit/upload UI --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-12-02 13:59:48 +09:00 · 2025-11-30 06:58:15 +03:00
parent b54af8811e
commit 7d6861ac54
33 changed files with 671 additions and 489 deletions
--- a/web_src/js/components/RepoFileSearch.vue
+++ b/web_src/js/components/RepoFileSearch.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import { ref, computed, watch, nextTick, useTemplateRef, onMounted, onUnmounted } from 'vue';
+import {generateElemId} from '../utils/dom.ts';
+import { GET } from '../modules/fetch.ts';
+import { filterRepoFilesWeighted } from '../features/repo-findfile.ts';
+import { pathEscapeSegments } from '../utils/url.ts';
+import { SvgIcon } from '../svg.ts';
+import {throttle} from 'throttle-debounce';
+
+const props = defineProps({
+  repoLink: { type: String, required: true },
+  currentRefNameSubURL: { type: String, required: true },
+  treeListUrl: { type: String, required: true },
+  noResultsText: { type: String, required: true },
+  placeholder: { type: String, required: true },
+});
+
+const refElemInput = useTemplateRef<HTMLInputElement>('searchInput');
+const refElemPopup = useTemplateRef<HTMLElement>('searchPopup');
+
+const searchQuery = ref('');
+const allFiles = ref<string[]>([]);
+const selectedIndex = ref(0);
+const isLoadingFileList = ref(false);
+const hasLoadedFileList = ref(false);
+
+const showPopup = computed(() => searchQuery.value.length > 0);
+
+const filteredFiles = computed(() => {
+  if (!searchQuery.value) return [];
+  return filterRepoFilesWeighted(allFiles.value, searchQuery.value);
+});
+
+const applySearchQuery = throttle(300, () => {
+  searchQuery.value = refElemInput.value.value;
+  selectedIndex.value = 0;
+});
+
+const handleSearchInput = () => {
+  loadFileListForSearch();
+  applySearchQuery();
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    clearSearch();
+    return;
+  }
+  if (!searchQuery.value || filteredFiles.value.length === 0) return;
+
+  const handleSelectedItem = (idx: number) => {
+    e.preventDefault();
+    selectedIndex.value = idx;
+    const el = refElemPopup.value.querySelector(`.file-search-results > :nth-child(${idx+1} of .item)`);
+    el?.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+  };
+
+  if (e.key === 'ArrowDown') {
+    handleSelectedItem(Math.min(selectedIndex.value + 1, filteredFiles.value.length - 1));
+  } else if (e.key === 'ArrowUp') {
+    handleSelectedItem(Math.max(selectedIndex.value - 1, 0))
+  } else if (e.key === 'Enter') {
+    e.preventDefault();
+    const selectedFile = filteredFiles.value[selectedIndex.value];
+    if (selectedFile) {
+      handleSearchResultClick(selectedFile.matchResult.join(''));
+    }
+  }
+};
+
+const clearSearch = () => {
+  searchQuery.value = '';
+  refElemInput.value.value = '';
+};
+
+
+const handleClickOutside = (e: MouseEvent) => {
+  if (!searchQuery.value) return;
+
+  const target = e.target as HTMLElement;
+  const clickInside = refElemInput.value.contains(target) || refElemPopup.value.contains(target);
+  if (!clickInside) clearSearch();
+};
+
+const loadFileListForSearch = async () => {
+  if (hasLoadedFileList.value || isLoadingFileList.value) return;
+
+  isLoadingFileList.value = true;
+  try {
+    const response = await GET(props.treeListUrl);
+    allFiles.value = await response.json();
+    hasLoadedFileList.value = true;
+  } finally {
+    isLoadingFileList.value = false;
+  }
+};
+
+function handleSearchResultClick(filePath: string) {
+  clearSearch();
+  window.location.href = `${props.repoLink}/src/${pathEscapeSegments(props.currentRefNameSubURL)}/${pathEscapeSegments(filePath)}`;
+}
+
+const updatePosition = () => {
+  if (!showPopup.value) return;
+
+  const rectInput = refElemInput.value.getBoundingClientRect();
+  const rectPopup = refElemPopup.value.getBoundingClientRect();
+  const docElem = document.documentElement;
+  const style = refElemPopup.value.style;
+  style.top = `${docElem.scrollTop + rectInput.bottom + 4}px`;
+  if (rectInput.x + rectPopup.width < docElem.clientWidth) {
+    // enough space to align left with the input
+    style.left = `${docElem.scrollLeft + rectInput.x}px`;
+  } else {
+    // no enough space, align right from the viewport right edge minus page margin
+    const leftPos = docElem.scrollLeft + docElem.getBoundingClientRect().width - rectPopup.width;
+    style.left = `calc(${leftPos}px - var(--page-margin-x))`;
+  }
+};
+
+onMounted(() => {
+  const searchPopupId = generateElemId('file-search-popup-');
+  refElemPopup.value.setAttribute('id', searchPopupId);
+  refElemInput.value.setAttribute('aria-controls', searchPopupId);
+  document.addEventListener('click', handleClickOutside);
+  window.addEventListener('resize', updatePosition);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  window.removeEventListener('resize', updatePosition);
+});
+
+// Position search results below the input
+watch([searchQuery, filteredFiles], async () => {
+  if (searchQuery.value) {
+    await nextTick();
+    updatePosition();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div class="ui small input">
+      <input
+        ref="searchInput" :placeholder="placeholder" autocomplete="off"
+        role="combobox" aria-autocomplete="list" :aria-expanded="searchQuery ? 'true' : 'false'"
+        @input="handleSearchInput" @keydown="handleKeyDown"
+      >
+    </div>
+
+    <Teleport to="body">
+      <div v-show="showPopup" ref="searchPopup" class="file-search-popup">
+        <!-- always create the popup by v-show above to avoid null ref, only create the popup content if the popup should be displayed to save memory -->
+        <template v-if="showPopup">
+          <div v-if="filteredFiles.length" role="listbox" class="file-search-results flex-items-block">
+            <div
+              v-for="(result, idx) in filteredFiles" :key="result.matchResult.join('')"
+              :class="['item', { 'selected': idx === selectedIndex }]"
+              role="option" :aria-selected="idx === selectedIndex" @click="handleSearchResultClick(result.matchResult.join(''))"
+              @mouseenter="selectedIndex = idx" :title="result.matchResult.join('')"
+            >
+              <SvgIcon name="octicon-file" class="file-icon"/>
+              <span class="full-path">
+                <span v-for="(part, index) in result.matchResult" :key="index">{{ part }}</span>
+              </span>
+            </div>
+          </div>
+          <div v-else-if="isLoadingFileList">
+            <div class="is-loading"/>
+          </div>
+          <div v-else class="tw-p-4">
+            {{ props.noResultsText }}
+          </div>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.file-search-popup {
+  position: absolute;
+  background: var(--color-box-body);
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  width: max-content;
+  max-height: min(calc(100vw - 20px), 300px);
+  max-width: min(calc(100vw - 40px), 600px);
+  overflow-y: auto;
+}
+
+.file-search-popup .is-loading {
+  width: 200px;
+  height: 200px;
+}
+
+.file-search-results .item {
+  align-items: flex-start;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.file-search-results .item:last-child {
+  border-bottom: none;
+}
+
+.file-search-results .item:hover,
+.file-search-results .item.selected {
+  background-color: var(--color-hover);
+}
+
+.file-search-results .item .file-icon {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.file-search-results .item .full-path {
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+.file-search-results .item .full-path :nth-child(even) {
+  color: var(--color-red);
+  font-weight: var(--font-weight-semibold);
+}
+</style>
--- a/web_src/js/features/repo-findfile.ts
+++ b/web_src/js/features/repo-findfile.ts
@@ -1,13 +1,8 @@
-import {svg} from '../svg.ts';
-import {toggleElem} from '../utils/dom.ts';
-import {pathEscapeSegments} from '../utils/url.ts';
-import {GET} from '../modules/fetch.ts';
+import {createApp} from 'vue';
+import RepoFileSearch from '../components/RepoFileSearch.vue';
+import {registerGlobalInitFunc} from '../modules/observer.ts';

 const threshold = 50;
-let files: Array<string> = [];
-let repoFindFileInput: HTMLInputElement;
-let repoFindFileTableBody: HTMLElement;
-let repoFindFileNoResult: HTMLElement;

 // return the case-insensitive sub-match result as an array:  [unmatched, matched, unmatched, matched, ...]
 // res[even] is unmatched, res[odd] is matched, see unit tests for examples
@@ -73,48 +68,14 @@ export function filterRepoFilesWeighted(files: Array<string>, filter: string) {
  return filterResult;
 }

-function filterRepoFiles(filter: string) {
-  const treeLink = repoFindFileInput.getAttribute('data-url-tree-link');
-  repoFindFileTableBody.innerHTML = '';
-
-  const filterResult = filterRepoFilesWeighted(files, filter);
-
-  toggleElem(repoFindFileNoResult, !filterResult.length);
-  for (const r of filterResult) {
-    const row = document.createElement('tr');
-    const cell = document.createElement('td');
-    const a = document.createElement('a');
-    a.setAttribute('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`);
-    a.innerHTML = svg('octicon-file', 16, 'tw-mr-2');
-    row.append(cell);
-    cell.append(a);
-    for (const [index, part] of r.matchResult.entries()) {
-      const span = document.createElement('span');
-      // safely escape by using textContent
-      span.textContent = part;
-      span.title = span.textContent;
-      // if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
-      // the matchResult[odd] is matched and highlighted to red.
-      if (index % 2 === 1) span.classList.add('ui', 'text', 'red');
-      a.append(span);
-    }
-    repoFindFileTableBody.append(row);
-  }
-}
-
-async function loadRepoFiles() {
-  const response = await GET(repoFindFileInput.getAttribute('data-url-data-link'));
-  files = await response.json();
-  filterRepoFiles(repoFindFileInput.value);
-}
-
-export function initFindFileInRepo() {
-  repoFindFileInput = document.querySelector('#repo-file-find-input');
-  if (!repoFindFileInput) return;
-
-  repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody');
-  repoFindFileNoResult = document.querySelector('#repo-find-file-no-result');
-  repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value));
-
-  loadRepoFiles();
+export function initRepoFileSearch() {
+  registerGlobalInitFunc('initRepoFileSearch', (el) => {
+    createApp(RepoFileSearch, {
+      repoLink: el.getAttribute('data-repo-link'),
+      currentRefNameSubURL: el.getAttribute('data-current-ref-name-sub-url'),
+      treeListUrl: el.getAttribute('data-tree-list-url'),
+      noResultsText: el.getAttribute('data-no-results-text'),
+      placeholder: el.getAttribute('data-placeholder'),
+    }).mount(el);
+  });
 }
--- a/web_src/js/features/repo-view-file-tree.ts
+++ b/web_src/js/features/repo-view-file-tree.ts
@@ -6,8 +6,12 @@ import {registerGlobalEventFunc} from '../modules/observer.ts';

 const {appSubUrl} = window.config;

+function isUserSignedIn() {
+  return Boolean(document.querySelector('#navbar .user-menu'));
+}
+
 async function toggleSidebar(btn: HTMLElement) {
-  const elToggleShow = document.querySelector('.repo-view-file-tree-toggle-show');
+  const elToggleShow = document.querySelector('.repo-view-file-tree-toggle[data-toggle-action="show"]');
  const elFileTreeContainer = document.querySelector('.repo-view-file-tree-container');
  const shouldShow = btn.getAttribute('data-toggle-action') === 'show';
  toggleElem(elFileTreeContainer, shouldShow);
@@ -15,7 +19,7 @@ async function toggleSidebar(btn: HTMLElement) {

  // FIXME: need to remove "full height" style from parent element

-  if (!elFileTreeContainer.hasAttribute('data-user-is-signed-in')) return;
+  if (!isUserSignedIn()) return;
  await POST(`${appSubUrl}/user/settings/update_preferences`, {
    data: {codeViewShowFileTree: shouldShow},
  });
--- a/web_src/js/index-domready.ts
+++ b/web_src/js/index-domready.ts
@@ -16,7 +16,7 @@ import {initMarkupAnchors} from './markup/anchors.ts';
 import {initNotificationCount} from './features/notification.ts';
 import {initRepoIssueContentHistory} from './features/repo-issue-content.ts';
 import {initStopwatch} from './features/stopwatch.ts';
-import {initFindFileInRepo} from './features/repo-findfile.ts';
+import {initRepoFileSearch} from './features/repo-findfile.ts';
 import {initMarkupContent} from './markup/content.ts';
 import {initRepoFileView} from './features/file-view.ts';
 import {initUserAuthOauth2, initUserCheckAppUrl} from './features/user-auth.ts';
@@ -101,7 +101,7 @@ const initPerformanceTracer = callInitFunctions([
  initSshKeyFormParser,
  initStopwatch,
  initTableSort,
-  initFindFileInRepo,
+  initRepoFileSearch,
  initCopyContent,

  initAdminCommon,