Multiple GitGraph improvements: Exclude PR heads, Add branch/PR links, Show only certain branches, (#12766)

* Multiple GitGraph improvements.

Add backend support for excluding PRs, selecting branches and files.

Fix #10327

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Only show refs in dropdown we display on the graph

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* use flexbox for ui header

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Move Hide Pull Request button to the dropdown

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Add SHA and user pictures

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix test

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix test 2

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fixes

* async

* more tweaks

* use tabs in tmpl

Signed-off-by: Andrew Thornton <art27@cantab.net>

* remove commented thing

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix linting

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Update web_src/js/features/gitgraph.js

Co-authored-by: silverwind <me@silverwind.io>

* graph tweaks

* more tweaks

* add title

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix loading indicator z-index and position

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lauris BH <lauris@nix.lv>

1 files changed, 51 insertions, 0 deletions

diff --git a/web_src/js/features/gitgraph.js b/web_src/js/features/gitgraph.js
index 655cfb77c2..570d16059f 100644
--- a/web_src/js/features/gitgraph.js
+++ b/web_src/js/features/gitgraph.js
@@ -46,6 +46,57 @@ export default async function initGitGraph() {
       window.history.replaceState({}, '', window.location.pathname);
     }
   });
+  const url = new URL(window.location);
+  const params = url.searchParams;
+  const updateGraph = async () => {
+    const queryString = params.toString();
+    const ajaxUrl = new URL(url);
+    ajaxUrl.searchParams.set('div-only', 'true');
+    window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
+    $('#pagination').empty();
+    $('#rel-container').addClass('hide');
+    $('#rev-container').addClass('hide');
+    $('#loading-indicator').removeClass('hide');
+
+    const div = $(await $.ajax(String(ajaxUrl)));
+    $('#pagination').html(div.find('#pagination').html());
+    $('#rel-container').html(div.find('#rel-container').html());
+    $('#rev-container').html(div.find('#rev-container').html());
+    $('#loading-indicator').addClass('hide');
+    $('#rel-container').removeClass('hide');
+    $('#rev-container').removeClass('hide');
+  };
+  const dropdownSelected = params.getAll('branch');
+  if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') {
+    dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
+  }
+
+  $('#flow-select-refs-dropdown').dropdown('set selected', dropdownSelected);
+  $('#flow-select-refs-dropdown').dropdown({
+    clearable: true,
+    onRemove(toRemove) {
+      if (toRemove === '...flow-hide-pr-refs') {
+        params.delete('hide-pr-refs');
+      } else {
+        const branches = params.getAll('branch');
+        params.delete('branch');
+        for (const branch of branches) {
+          if (branch !== toRemove) {
+            params.append('branch', branch);
+          }
+        }
+      }
+      updateGraph();
+    },
+    onAdd(toAdd) {
+      if (toAdd === '...flow-hide-pr-refs') {
+        params.set('hide-pr-refs', true);
+      } else {
+        params.append('branch', toAdd);
+      }
+      updateGraph();
+    },
+  });
   $('#git-graph-container').on('mouseenter', '#rev-list li', (e) => {
     const flow = $(e.currentTarget).data('flow');
     if (flow === 0) return;