4 files changed, 90 insertions, 12 deletions

diff --git a/web_src/js/components/RepoBranchTagDropdown.js b/web_src/js/components/RepoBranchTagDropdown.js
index e72563ff29..d55fa91b92 100644
--- a/web_src/js/components/RepoBranchTagDropdown.js
+++ b/web_src/js/components/RepoBranchTagDropdown.js
@@ -10,11 +10,22 @@ export function initRepoBranchTagDropdown(selector) {
       items: [],
       mode: $data.data('mode'),
       searchTerm: '',
+      refName: '',
       noResults: '',
       canCreateBranch: false,
       menuVisible: false,
       createTag: false,
-      active: 0
+      isViewTag: false,
+      isViewBranch: false,
+      isViewTree: false,
+      active: 0,
+      branchForm: '',
+      branchURLPrefix: '',
+      branchURLSuffix: '',
+      tagURLPrefix: '',
+      tagURLSuffix: '',
+      setAction: false,
+      submitForm: false,
     };
     $data.find('.item').each(function () {
       data.items.push({
@@ -64,6 +75,26 @@ export function initRepoBranchTagDropdown(selector) {
       beforeMount() {
         this.noResults = this.$el.getAttribute('data-no-results');
         this.canCreateBranch = this.$el.getAttribute('data-can-create-branch') === 'true';
+        this.branchForm = this.$el.getAttribute('data-branch-form');
+        switch (this.$el.getAttribute('data-view-type')) {
+          case 'tree':
+            this.isViewTree = true;
+            break;
+          case 'tag':
+            this.isViewTag = true;
+            break;
+          default:
+            this.isViewBranch = true;
+            break;
+        }
+        this.refName = this.$el.getAttribute('data-ref-name');
+        this.branchURLPrefix = this.$el.getAttribute('data-branch-url-prefix');
+        this.branchURLSuffix = this.$el.getAttribute('data-branch-url-suffix');
+        this.tagURLPrefix = this.$el.getAttribute('data-tag-url-prefix');
+        this.tagURLSuffix = this.$el.getAttribute('data-tag-url-suffix');
+        this.setAction = this.$el.getAttribute('data-set-action') === 'true';
+        this.submitForm = this.$el.getAttribute('data-submit-form') === 'true';
+
 
         document.body.addEventListener('click', (event) => {
           if (this.$el.contains(event.target)) return;
@@ -80,7 +111,32 @@ export function initRepoBranchTagDropdown(selector) {
             prev.selected = false;
           }
           item.selected = true;
-          window.location.href = item.url;
+          const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix;
+          if (this.branchForm === '') {
+            window.location.href = url;
+          } else {
+            this.isViewTree = false;
+            this.isViewTag = false;
+            this.isViewBranch = false;
+            this.$refs.dropdownRefName.textContent = item.name;
+            if (this.setAction) {
+              $(`#${this.branchForm}`).attr('action', url);
+            } else {
+              $(`#${this.branchForm} input[name="refURL"]`).val(url);
+            }
+            $(`#${this.branchForm} input[name="ref"]`).val(item.name);
+            if (item.tag) {
+              this.isViewTag = true;
+              $(`#${this.branchForm} input[name="refType"]`).val('tag');
+            } else {
+              this.isViewBranch = true;
+              $(`#${this.branchForm} input[name="refType"]`).val('branch');
+            }
+            if (this.submitForm) {
+              $(`#${this.branchForm}`).trigger('submit');
+            }
+            Vue.set(this, 'menuVisible', false);
+          }
         },
         createNewBranch() {
           if (!this.showCreateNewBranch) return;
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 84b67a68e1..45bb96c26e 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -313,9 +313,22 @@ export function initGlobalButtons() {
     alert('Nothing to hide');
   });
 
-  $('.show-modal.button').on('click', function () {
-    $($(this).data('modal')).modal('show');
-    const colorPickers = $($(this).data('modal')).find('.color-picker');
+  $('.show-modal').on('click', function () {
+    const modalDiv = $($(this).attr('data-modal'));
+    for (const attrib of this.attributes) {
+      if (!attrib.name.startsWith('data-modal-')) {
+        continue;
+      }
+      const id = attrib.name.substring(11);
+      const target = modalDiv.find(`#${id}`);
+      if (target.is('input')) {
+        target.val(attrib.value);
+      } else {
+        target.text(attrib.value);
+      }
+    }
+    modalDiv.modal('show');
+    const colorPickers = $($(this).attr('data-modal')).find('.color-picker');
     if (colorPickers.length > 0) {
       initCompColorPicker();
     }
@@ -323,10 +336,10 @@ export function initGlobalButtons() {
 
   $('.delete-post.button').on('click', function () {
     const $this = $(this);
-    $.post($this.data('request-url'), {
+    $.post($this.attr('data-request-url'), {
       _csrf: csrfToken
     }).done(() => {
-      window.location.href = $this.data('done-url');
+      window.location.href = $this.attr('data-done-url');
     });
   });
 }
diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js
index bc713a7397..946f7f90a4 100644
--- a/web_src/js/features/repo-branch.js
+++ b/web_src/js/features/repo-branch.js
@@ -1,9 +1,18 @@
 import $ from 'jquery';
 
 export function initRepoBranchButton() {
-  $('.show-create-branch-modal.button').on('click', function () {
-    $('#create-branch-form')[0].action = $('#create-branch-form').data('base-action') + $(this).data('branch-from-urlcomponent');
-    $('#modal-create-branch-from-span').text($(this).data('branch-from'));
-    $($(this).data('modal')).modal('show');
+  $('.show-create-branch-modal').on('click', function () {
+    let modalFormName = $(this).attr('data-modal-form');
+    if (!modalFormName) {
+      modalFormName = '#create-branch-form';
+    }
+    $(modalFormName)[0].action = $(modalFormName).attr('data-base-action') + $(this).attr('data-branch-from-urlcomponent');
+    let fromSpanName = $(this).attr('data-modal-from-span');
+    if (!fromSpanName) {
+      fromSpanName = '#modal-create-branch-from-span';
+    }
+
+    $(fromSpanName).text($(this).attr('data-branch-from'));
+    $($(this).attr('data-modal')).modal('show');
   });
 }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index d92a0539d0..d51dfe185c 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -436,7 +436,7 @@ export function initRepository() {
   });
 
   // File list and commits
-  if ($('.repository.file.list').length > 0 ||
+  if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 ||
     $('.repository.commits').length > 0 || $('.repository.release').length > 0) {
     initRepoBranchTagDropdown('.choose.reference .dropdown');
   }