Feature: Find files in repo (#15028)

* Create finding files page ui in repo page

* Get tree entries for find repo files.

* Move find files JS to individual file.

* gen swagger.

* Add enry.IsVendor to exclude entries

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

5 files changed, 118 insertions, 1 deletions

diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js
new file mode 100644
index 0000000000..700a7fe693
--- /dev/null
+++ b/web_src/js/features/repo-findfile.js
@@ -0,0 +1,67 @@
+import $ from 'jquery';
+
+import {svg} from '../svg.js';
+import {strSubMatch} from '../utils.js';
+const {csrf} = window.config;
+
+const threshold = 50;
+let files = [];
+let $repoFindFileInput, $repoFindFileTableBody, $repoFindFileNoResult;
+
+function filterRepoFiles(filter) {
+  const treeLink = $repoFindFileInput.attr('data-url-tree-link');
+  $repoFindFileTableBody.empty();
+
+  const fileRes = [];
+  if (filter) {
+    for (let i = 0; i < files.length && fileRes.length < threshold; i++) {
+      const subMatch = strSubMatch(files[i], filter);
+      if (subMatch.length > 1) {
+        fileRes.push(subMatch);
+      }
+    }
+  } else {
+    for (let i = 0; i < files.length && i < threshold; i++) {
+      fileRes.push([files[i]]);
+    }
+  }
+
+  const tmplRow = `<tr><td><a></a></td></tr>`;
+
+  $repoFindFileNoResult.toggle(fileRes.length === 0);
+  for (const matchRes of fileRes) {
+    const $row = $(tmplRow);
+    const $a = $row.find('a');
+    $a.attr('href', `${treeLink}/${matchRes.join('')}`);
+    const $octiconFile = $(svg('octicon-file')).addClass('mr-3');
+    $a.append($octiconFile);
+    // if the target file path is "abc/xyz", to search "bx", then the matchRes is ['a', 'b', 'c/', 'x', 'yz']
+    // the matchRes[odd] is matched and highlighted to red.
+    for (let j = 0; j < matchRes.length; j++) {
+      if (!matchRes[j]) continue;
+      const $span = $('<span>').text(matchRes[j]);
+      if (j % 2 === 1) $span.addClass('ui text red');
+      $a.append($span);
+    }
+    $repoFindFileTableBody.append($row);
+  }
+}
+
+async function loadRepoFiles() {
+  files = await $.ajax({
+    url: $repoFindFileInput.attr('data-url-data-link'),
+    headers: {'X-Csrf-Token': csrf}
+  });
+  filterRepoFiles($repoFindFileInput.val());
+}
+
+export function initFindFileInRepo() {
+  $repoFindFileInput = $('#repo-file-find-input');
+  if (!$repoFindFileInput.length) return;
+
+  $repoFindFileTableBody = $('#repo-find-file-table tbody');
+  $repoFindFileNoResult = $('#repo-find-file-no-result');
+  $repoFindFileInput.on('input', () => filterRepoFiles($repoFindFileInput.val()));
+
+  loadRepoFiles();
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 4343c2d965..b6a1aee779 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -21,6 +21,7 @@ import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationCount, initNotificationsTable} from './features/notification.js';
 import {initRepoIssueContentHistory} from './features/repo-issue-content.js';
 import {initStopwatch} from './features/stopwatch.js';
+import {initFindFileInRepo} from './features/repo-findfile.js';
 import {initCommentContent, initMarkupContent} from './markup/content.js';
 
 import {initUserAuthLinkAccountView, initUserAuthOauth2} from './features/user-auth.js';
@@ -124,6 +125,7 @@ $(document).ready(() => {
   initSshKeyFormParser();
   initStopwatch();
   initTableSort();
+  initFindFileInRepo();
 
   initAdminCommon();
   initAdminEmails();
diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index 77aa1e7ca7..926f0a5d05 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -15,6 +15,7 @@ import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
 import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
+import octiconFile from '../../public/img/svg/octicon-file.svg';
 
 import Vue from 'vue';
 
@@ -36,6 +37,7 @@ export const svgs = {
   'octicon-repo-forked': octiconRepoForked,
   'octicon-repo-template': octiconRepoTemplate,
   'octicon-triangle-down': octiconTriangleDown,
+  'octicon-file': octiconFile,
 };
 
 const parser = new DOMParser();
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 86a64b8b75..67f8f1cc98 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -58,3 +58,35 @@ export function parseIssueHref(href) {
   const [_, owner, repo, type, index] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];
   return {owner, repo, type, index};
 }
+
+// return the sub-match result as an array:  [unmatched, matched, unmatched, matched, ...]
+// res[even] is unmatched, res[odd] is matched, see unit tests for examples
+export function strSubMatch(full, sub) {
+  const res = [''];
+  let i = 0, j = 0;
+  for (; i < sub.length && j < full.length;) {
+    while (j < full.length) {
+      if (sub[i] === full[j]) {
+        if (res.length % 2 !== 0) res.push('');
+        res[res.length - 1] += full[j];
+        j++;
+        i++;
+      } else {
+        if (res.length % 2 === 0) res.push('');
+        res[res.length - 1] += full[j];
+        j++;
+        break;
+      }
+    }
+  }
+  if (i !== sub.length) {
+    // if the sub string doesn't match the full, only return the full as unmatched.
+    return [full];
+  }
+  if (j < full.length) {
+    // append remaining chars from full to result as unmatched
+    if (res.length % 2 === 0) res.push('');
+    res[res.length - 1] += full.substring(j);
+  }
+  return res;
+}
diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js
index 3f6f921079..acf3f1ece3 100644
--- a/web_src/js/utils.test.js
+++ b/web_src/js/utils.test.js
@@ -1,5 +1,5 @@
 import {
-  basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref,
+  basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch,
 } from './utils.js';
 
 test('basename', () => {
@@ -84,3 +84,17 @@ test('parseIssueHref', () => {
   expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
   expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined});
 });
+
+
+test('strSubMatch', () => {
+  expect(strSubMatch('abc', '')).toEqual(['abc']);
+  expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']);
+  expect(strSubMatch('abc', 'b')).toEqual(['a', 'b', 'c']);
+  expect(strSubMatch('abc', 'c')).toEqual(['ab', 'c']);
+  expect(strSubMatch('abc', 'ac')).toEqual(['', 'a', 'b', 'c']);
+  expect(strSubMatch('abc', 'z')).toEqual(['abc']);
+  expect(strSubMatch('abc', 'az')).toEqual(['abc']);
+
+  expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']);
+  expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']);
+});