Refactor RepoBranchTagSelector (#32681)

modules/cache/cache_test.go

@@ -43,7 +43,7 @@ func TestTest(t *testing.T) {
 	elapsed, err := Test()
 	assert.NoError(t, err)
 	// mem cache should take from 300ns up to 1ms on modern hardware ...
-	assert.Less(t, elapsed, SlowCacheThreshold)
+	assert.Less(t, elapsed, time.Millisecond)
 }
 
 func TestGetCache(t *testing.T) {

templates/repo/branch_dropdown.tmpl

@@ -1,87 +1,57 @@
 {{/* Attributes:
-* root
 * ContainerClasses
-* (TODO: search "branch_dropdown" in the template directory)
+* Repository
+* CurrentRefType: eg. "branch", "tag"
+* CurrentRefShortName: eg. "master", "v1.0"
+* CurrentTreePath
+* RefLinkTemplate: redirect to the link when a branch/tag is selected
+* RefFormActionTemplate: change the parent form's action when a branch/tag is selected
+* DropdownFixedText: the text to show in the dropdown (mainly used by "release page"), if empty, the text will be the branch/tag name
+* ShowTabBranches
+* ShowTabTagsTab
+* AllowCreateNewRef
+
+Search "repo/branch_dropdown" in the template directory to find all occurrences.
 */}}
-{{$defaultSelectedRefName := $.root.BranchName}}
+<div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}"
-{{if and .root.IsViewTag (not .noTag)}}
+	data-text-release-compare="{{ctx.Locale.Tr "repo.release.compare"}}"
-	{{$defaultSelectedRefName = .root.TagName}}
+	data-text-branches="{{ctx.Locale.Tr "repo.branches"}}"
-{{end}}
+	data-text-tags="{{ctx.Locale.Tr "repo.tags"}}"
-{{if eq $defaultSelectedRefName ""}}
+	data-text-filter-branch="{{ctx.Locale.Tr "repo.pulls.filter_branch"}}"
-	{{$defaultSelectedRefName = $.root.Repository.DefaultBranch}}
+	data-text-filter-tag="{{ctx.Locale.Tr "repo.find_tag"}}"
-{{end}}
+	data-text-default-branch-label="{{ctx.Locale.Tr "repo.default_branch_label"}}"
+	data-text-create-tag="{{ctx.Locale.Tr "repo.tag.create_tag"}}"
+	data-text-create-branch="{{ctx.Locale.Tr "repo.branch.create_branch"}}"
+	data-text-create-ref-from="{{ctx.Locale.Tr "repo.branch.create_from"}}"
+	data-text-no-results="{{ctx.Locale.Tr "no_results_found"}}"
 
-{{$type := ""}}
+	data-current-repo-default-branch="{{.Repository.DefaultBranch}}"
-{{if and .root.IsViewTag (not .noTag)}}
+	data-current-repo-link="{{.Repository.Link}}"
-	{{$type = "tag"}}
+	data-current-tree-path="{{.CurrentTreePath}}"
-{{else if .root.IsViewBranch}}
+	data-current-ref-type="{{.CurrentRefType}}"
-	{{$type = "branch"}}
+	data-current-ref-short-name="{{.CurrentRefShortName}}"
-{{else}}
-	{{$type = "tree"}}
-{{end}}
 
-{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
+	data-ref-link-template="{{.RefLinkTemplate}}"
+	data-ref-form-action-template="{{.RefFormActionTemplate}}"
+	data-dropdown-fixed-text="{{.DropdownFixedText}}"
+	data-show-tab-branches="{{.ShowTabBranches}}"
+	data-show-tab-tags="{{.ShowTabTags}}"
+	data-allow-create-new-ref="{{.AllowCreateNewRef}}"
 
-<script type="module">
+	data-enable-feed="{{ctx.RootData.EnableFeed}}"
-	const data = {
+>
-		'textReleaseCompare': {{ctx.Locale.Tr "repo.release.compare"}},
-		'textCreateTag': {{ctx.Locale.Tr "repo.tag.create_tag"}},
-		'textCreateBranch': {{ctx.Locale.Tr "repo.branch.create_branch"}},
-		'textCreateBranchFrom': {{ctx.Locale.Tr "repo.branch.create_from"}},
-		'textBranches': {{ctx.Locale.Tr "repo.branches"}},
-		'textTags': {{ctx.Locale.Tr "repo.tags"}},
-		'textDefaultBranchLabel': {{ctx.Locale.Tr "repo.default_branch_label"}},
-
-		'mode': '{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}',
-		'showBranchesInDropdown': {{$showBranchesInDropdown}},
-		'searchFieldPlaceholder': '{{if $.noTag}}{{ctx.Locale.Tr "repo.pulls.filter_branch"}}{{else if $showBranchesInDropdown}}{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}{{else}}{{ctx.Locale.Tr "repo.find_tag"}}{{end}}...',
-		'branchForm': {{$.branchForm}},
-		'disableCreateBranch': {{if .disableCreateBranch}}{{.disableCreateBranch}}{{else}}{{not .root.CanCreateBranch}}{{end}},
-		'setAction': {{.setAction}},
-		'submitForm': {{.submitForm}},
-		'viewType': {{$type}},
-		'refName': {{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}},
-		'commitIdShort': {{ShortSha .root.CommitID}},
-		'tagName': {{.root.TagName}},
-		'branchName': {{.root.BranchName}},
-		'noTag': {{.noTag}},
-		'defaultSelectedRefName': {{$defaultSelectedRefName}},
-		'repoDefaultBranch': {{.root.Repository.DefaultBranch}},
-		'enableFeed': {{.root.EnableFeed}},
-		'rssURLPrefix': '{{$.root.RepoLink}}/rss/branch/',
-		'branchURLPrefix': '{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}',
-		'branchURLSuffix': '{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
-		'tagURLPrefix': '{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if .release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}',
-		'tagURLSuffix': '{{if .tagURLSuffix}}{{.tagURLSuffix}}{{else if .release}}...{{if .release.IsDraft}}{{PathEscapeSegments .release.Target}}{{else}}{{if .release.TagName}}{{PathEscapeSegments .release.TagName}}{{else}}{{PathEscapeSegments .release.Sha1}}{{end}}{{end}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
-		'repoLink': {{.root.RepoLink}},
-		'treePath': {{.root.TreePath}},
-		'branchNameSubURL': {{.root.BranchNameSubURL}},
-		'noResults': {{ctx.Locale.Tr "no_results_found"}},
-	};
-	{{if .release}}
-	data.release = {
-		'tagName': {{.release.TagName}},
-	};
-	{{end}}
-	window.config.pageData.branchDropdownDataList = window.config.pageData.branchDropdownDataList || [];
-	window.config.pageData.branchDropdownDataList.push(data);
-</script>
-
-<div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}">
 	{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
 	<div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
 		<div class="ui button branch-dropdown-button">
 			<span class="flex-text-block gt-ellipsis">
-				{{if .release}}
+				{{if not .DropdownFixedText}}
-					{{ctx.Locale.Tr "repo.release.compare"}}
+					{{if .ShowTabTags}}
-				{{else}}
-					{{if eq $type "tag"}}
 						{{svg "octicon-tag"}}
-					{{else}}
+					{{else if .ShowTabBranches}}
 						{{svg "octicon-git-branch"}}
 					{{end}}
-					<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
 				{{end}}
+				<strong class="tw-ml-2 tw-inline-block gt-ellipsis">{{Iif .DropdownFixedText .SelectedRefShortName}}</strong>
 			</span>
 			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</div>

templates/repo/commit_page.tmpl

@@ -66,14 +66,15 @@
 										</div>
 										<div class="content">
 											<p id="cherry-pick-content" class="branch-dropdown"></p>
-											{{template "repo/branch_dropdown" dict "root" .
+
-												"noTag" true "disableCreateBranch" true
+											<form method="get">
-												"branchForm" "branch-dropdown-form"
+												{{template "repo/branch_dropdown" dict
-												"branchURLPrefix" (printf "%s/_cherrypick/%s/" $.RepoLink .CommitID) "branchURLSuffix" ""
+													"Repository" .Repository
-												"setAction" true "submitForm" true}}
+													"ShowTabBranches" true
-											<form method="get" action="{{$.RepoLink}}/_cherrypick/{{.CommitID}}/{{if $.BranchName}}{{PathEscapeSegments $.BranchName}}{{else}}{{PathEscapeSegments $.Repository.DefaultBranch}}{{end}}" id="branch-dropdown-form">
+													"CurrentRefType" "branch"
-												<input type="hidden" name="ref" value="{{if $.BranchName}}{{$.BranchName}}{{else}}{{$.Repository.DefaultBranch}}{{end}}">
+													"CurrentRefShortName" (Iif $.BranchName $.Repository.DefaultBranch)
-												<input type="hidden" name="refType" value="branch">
+													"RefFormActionTemplate" (print "{RepoLink}/_cherrypick/" .CommitID "/{RefShortName}")
+												}}
 												<input type="hidden" id="cherry-pick-type" name="cherry-pick-type"><br>
 												<button type="submit" id="cherry-pick-submit" class="ui primary button"></button>
 											</form>

templates/repo/commits.tmpl

@@ -5,7 +5,24 @@
 		{{template "repo/sub_menu" .}}
 		<div class="repo-button-row">
 			<div class="repo-button-row-left">
-				{{template "repo/branch_dropdown" dict "root" .}}
+
+				{{$branchDropdownCurrentRefType := "branch"}}
+				{{$branchDropdownCurrentRefShortName := .BranchName}}
+				{{if .IsViewTag}}
+					{{$branchDropdownCurrentRefType := "tag"}}
+					{{$branchDropdownCurrentRefShortName := .TagName}}
+				{{end}}
+				{{template "repo/branch_dropdown" dict
+					"Repository" .Repository
+					"ShowTabBranches" true
+					"ShowTabTags" true
+					"CurrentRefType" $branchDropdownCurrentRefType
+					"CurrentRefShortName" $branchDropdownCurrentRefShortName
+					"CurrentTreePath" .TreePath
+					"RefLinkTemplate" "{RepoLink}/commits/{RefType}/{RefShortName}/{TreePath}"
+					"AllowCreateNewRef" .CanCreateBranch
+				}}
+
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
 					{{svg "octicon-git-branch"}}
 					{{ctx.Locale.Tr "repo.commit_graph"}}

templates/repo/home.tmpl

@@ -47,7 +47,22 @@
 		{{$isHomepage := (eq $n 0)}}
 		<div class="repo-button-row" data-is-homepage="{{$isHomepage}}">
 			<div class="repo-button-row-left">
-				{{template "repo/branch_dropdown" dict "root" .}}
+				{{$branchDropdownCurrentRefType := "branch"}}
+				{{$branchDropdownCurrentRefShortName := .BranchName}}
+				{{if .IsViewTag}}
+					{{$branchDropdownCurrentRefType := "tag"}}
+					{{$branchDropdownCurrentRefShortName := .TagName}}
+				{{end}}
+				{{template "repo/branch_dropdown" dict
+					"Repository" .Repository
+					"ShowTabBranches" true
+					"ShowTabTags" true
+					"CurrentRefType" $branchDropdownCurrentRefType
+					"CurrentRefShortName" $branchDropdownCurrentRefShortName
+					"CurrentTreePath" .TreePath
+					"RefLinkTemplate" "{RepoLink}/src/{RefType}/{RefShortName}/{TreePath}"
+					"AllowCreateNewRef" .CanCreateBranch
+				}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 					{{$cmpBranch := ""}}
 					{{if ne .Repository.ID .BaseRepo.ID}}

templates/repo/release/list.tmpl

@@ -12,7 +12,20 @@
 						<a class="muted" href="{{if not (and $release.Sha1 ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode))}}#{{else}}{{$.RepoLink}}/src/tag/{{$release.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "tw-mr-1"}}{{$release.TagName}}</a>
 						{{if and $release.Sha1 ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode)}}
 							<a class="muted tw-font-mono" href="{{$.RepoLink}}/src/commit/{{$release.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha $release.Sha1}}</a>
-							{{template "repo/branch_dropdown" dict "root" $ "release" $release}}
+							{{$compareTarget := ""}}
+							{{if $release.IsDraft}}
+									{{$compareTarget = $release.Target}}
+							{{else if $release.TagName}}
+									{{$compareTarget = $release.TagName}}
+							{{else}}
+								{{$compareTarget = $release.Sha1}}
+							{{end}}
+							{{template "repo/branch_dropdown" dict
+								"Repository" $.Repository
+								"ShowTabTags" true
+								"DropdownFixedText" (ctx.Locale.Tr "repo.release.compare")
+								"RefLinkTemplate" (print "{RepoLink}/compare/{RefShortName}..." (PathEscapeSegments $compareTarget))
+							}}
 						{{end}}
 					</div>
 					<div class="ui segment detail">

web_src/js/components/RepoBranchTagSelector.vue

@@ -1,244 +1,217 @@
 <script lang="ts">
 import {createApp, nextTick} from 'vue';
-import $ from 'jquery';
 import {SvgIcon} from '../svg.ts';
-import {pathEscapeSegments} from '../utils/url.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {GET} from '../modules/fetch.ts';
+import {pathEscapeSegments} from '../utils/url.ts';
+import type {GitRefType} from '../types.ts';
+
+type ListItem = {
+  selected: boolean;
+  refShortName: string;
+  refType: GitRefType;
+  rssFeedLink: string;
+};
+
+type SelectedTab = 'branches' | 'tags';
+
+type TabLoadingStates = Record<SelectedTab, '' | 'loading' | 'done'>
+
+let currentElRoot: HTMLElement;
 
 const sfc = {
   components: {SvgIcon},
 
-  // no `data()`, at the moment, the `data()` is provided by the init code, which is not ideal and should be fixed in the future
-
   computed: {
-    filteredItems() {
+    searchFieldPlaceholder() {
-      const items = this.items.filter((item) => {
+      return this.selectedTab === 'branches' ? this.textFilterBranch : this.textFilterTag;
-        return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) &&
+    },
-          (!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
+    filteredItems(): ListItem[] {
+      const searchTermLower = this.searchTerm.toLowerCase();
+      const items = this.allItems.filter((item: ListItem) => {
+        const typeMatched = (this.selectedTab === 'branches' && item.refType === 'branch') || (this.selectedTab === 'tags' && item.refType === 'tag');
+        if (!typeMatched) return false;
+        if (!this.searchTerm) return true; // match all
+        return item.refShortName.toLowerCase().includes(searchTermLower);
       });
 
       // TODO: fix this anti-pattern: side-effects-in-computed-properties
-      this.active = !items.length && this.showCreateNewBranch ? 0 : -1;
+      this.activeItemIndex = !items.length && this.showCreateNewRef ? 0 : -1;
       return items;
     },
     showNoResults() {
-      return !this.filteredItems.length && !this.showCreateNewBranch;
+      if (this.tabLoadingStates[this.selectedTab] !== 'done') return false;
+      return !this.filteredItems.length && !this.showCreateNewRef;
     },
-    showCreateNewBranch() {
+    showCreateNewRef() {
-      if (this.disableCreateBranch || !this.searchTerm) {
+      if (!this.allowCreateNewRef || !this.searchTerm) {
         return false;
       }
-      return !this.items.filter((item) => {
+      return !this.allItems.filter((item: ListItem) => {
-        return item.name.toLowerCase() === this.searchTerm.toLowerCase();
+        return item.refShortName === this.searchTerm; // FIXME: not quite right here, it mixes "branch" and "tag" names
       }).length;
     },
-    formActionUrl() {
+    createNewRefFormActionUrl() {
-      return `${this.repoLink}/branches/_new/${this.branchNameSubURL}`;
+      return `${this.currentRepoLink}/branches/_new/${this.currentRefType}/${pathEscapeSegments(this.currentRefShortName)}`;
-    },
-    shouldCreateTag() {
-      return this.mode === 'tags';
     },
   },
 
   watch: {
     menuVisible(visible) {
-      if (visible) {
+      if (!visible) return;
       this.focusSearchField();
-        this.fetchBranchesOrTags();
+      this.loadTabItems();
-      }
     },
   },
 
+  data() {
+    const elRoot = currentElRoot;
+    const shouldShowTabBranches = elRoot.getAttribute('data-show-tab-branches') === 'true';
+    return {
+      csrfToken: window.config.csrfToken,
+      allItems: [] as ListItem[],
+      selectedTab: (shouldShowTabBranches ? 'branches' : 'tags') as SelectedTab,
+      searchTerm: '',
+      menuVisible: false,
+      activeItemIndex: 0,
+      tabLoadingStates: {} as TabLoadingStates,
+
+      textReleaseCompare: elRoot.getAttribute('data-text-release-compare'),
+      textBranches: elRoot.getAttribute('data-text-branches'),
+      textTags: elRoot.getAttribute('data-text-tags'),
+      textFilterBranch: elRoot.getAttribute('data-text-filter-branch'),
+      textFilterTag: elRoot.getAttribute('data-text-filter-tag'),
+      textDefaultBranchLabel: elRoot.getAttribute('data-text-default-branch-label'),
+      textCreateTag: elRoot.getAttribute('data-text-create-tag'),
+      textCreateBranch: elRoot.getAttribute('data-text-create-branch'),
+      textCreateRefFrom: elRoot.getAttribute('data-text-create-ref-from'),
+      textNoResults: elRoot.getAttribute('data-text-no-results'),
+
+      currentRepoDefaultBranch: elRoot.getAttribute('data-current-repo-default-branch'),
+      currentRepoLink: elRoot.getAttribute('data-current-repo-link'),
+      currentTreePath: elRoot.getAttribute('data-current-tree-path'),
+      currentRefType: elRoot.getAttribute('data-current-ref-type'),
+      currentRefShortName: elRoot.getAttribute('data-current-ref-short-name'),
+
+      refLinkTemplate: elRoot.getAttribute('data-ref-link-template'),
+      refFormActionTemplate: elRoot.getAttribute('data-ref-form-action-template'),
+      dropdownFixedText: elRoot.getAttribute('data-dropdown-fixed-text'),
+      showTabBranches: shouldShowTabBranches,
+      showTabTags: elRoot.getAttribute('data-show-tab-tags') === 'true',
+      allowCreateNewRef: elRoot.getAttribute('data-allow-create-new-ref') === 'true',
+
+      enableFeed: elRoot.getAttribute('data-enable-feed') === 'true',
+    };
+  },
+
   beforeMount() {
-    if (this.viewType === 'tree') {
+    document.body.addEventListener('click', (e) => {
-      this.isViewTree = true;
+      if (this.$el.contains(e.target)) return;
-      this.refNameText = this.commitIdShort;
+      if (this.menuVisible) this.menuVisible = false;
-    } else if (this.viewType === 'tag') {
-      this.isViewTag = true;
-      this.refNameText = this.tagName;
-    } else {
-      this.isViewBranch = true;
-      this.refNameText = this.branchName;
-    }
-
-    document.body.addEventListener('click', (event) => {
-      if (this.$el.contains(event.target)) return;
-      if (this.menuVisible) {
-        this.menuVisible = false;
-      }
     });
   },
   methods: {
-    selectItem(item) {
+    selectItem(item: ListItem) {
-      const prev = this.getSelected();
-      if (prev !== null) {
-        prev.selected = false;
-      }
-      item.selected = true;
-      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) {
-          document.querySelector(`#${this.branchForm}`)?.setAttribute('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');
-        }
       this.menuVisible = false;
+      if (this.refFormActionTemplate) {
+        this.currentRefType = item.refType;
+        this.currentRefShortName = item.refShortName;
+        let actionLink = this.refFormActionTemplate;
+        actionLink = actionLink.replace('{RepoLink}', this.currentRepoLink);
+        actionLink = actionLink.replace('{RefType}', pathEscapeSegments(item.refType));
+        actionLink = actionLink.replace('{RefShortName}', pathEscapeSegments(item.refShortName));
+        this.$el.closest('form').action = actionLink;
+      } else {
+        let link = this.refLinkTemplate;
+        link = link.replace('{RepoLink}', this.currentRepoLink);
+        link = link.replace('{RefType}', pathEscapeSegments(item.refType));
+        link = link.replace('{RefShortName}', pathEscapeSegments(item.refShortName));
+        link = link.replace('{TreePath}', pathEscapeSegments(this.currentTreePath));
+        window.location.href = link;
       }
     },
-    createNewBranch() {
+    createNewRef() {
-      if (!this.showCreateNewBranch) return;
+      this.$refs.createNewRefForm?.submit();
-      $(this.$refs.newBranchForm).trigger('submit');
     },
     focusSearchField() {
       nextTick(() => {
         this.$refs.searchField.focus();
       });
     },
-    getSelected() {
-      for (let i = 0, j = this.items.length; i < j; ++i) {
-        if (this.items[i].selected) return this.items[i];
-      }
-      return null;
-    },
     getSelectedIndexInFiltered() {
-      for (let i = 0, j = this.filteredItems.length; i < j; ++i) {
+      for (let i = 0; i < this.filteredItems.length; ++i) {
         if (this.filteredItems[i].selected) return i;
       }
       return -1;
     },
-    scrollToActive() {
+    getActiveItem() {
-      let el = this.$refs[`listItem${this.active}`]; // eslint-disable-line no-jquery/variable-pattern
+      const el = this.$refs[`listItem${this.activeItemIndex}`]; // eslint-disable-line no-jquery/variable-pattern
-      if (!el || !el.length) return;
+      return (el && el.length) ? el[0] : null;
-      if (Array.isArray(el)) {
-        el = el[0];
-      }
-
-      const cont = this.$refs.scrollContainer;
-      if (el.offsetTop < cont.scrollTop) {
-        cont.scrollTop = el.offsetTop;
-      } else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) {
-        cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight;
-      }
     },
-    keydown(event) {
+    keydown(e) {
-      if (event.keyCode === 40) { // arrow down
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        event.preventDefault();
+        e.preventDefault();
 
-        if (this.active === -1) {
+        if (this.activeItemIndex === -1) {
-          this.active = this.getSelectedIndexInFiltered();
+          this.activeItemIndex = this.getSelectedIndexInFiltered();
         }
-
+        const nextIndex = e.key === 'ArrowDown' ? this.activeItemIndex + 1 : this.activeItemIndex - 1;
-        if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) {
+        if (nextIndex < 0) {
           return;
         }
-        this.active++;
+        if (nextIndex + (this.showCreateNewRef ? 0 : 1) > this.filteredItems.length) {
-        this.scrollToActive();
-      } else if (event.keyCode === 38) { // arrow up
-        event.preventDefault();
-
-        if (this.active === -1) {
-          this.active = this.getSelectedIndexInFiltered();
-        }
-
-        if (this.active <= 0) {
           return;
         }
-        this.active--;
+        this.activeItemIndex = nextIndex;
-        this.scrollToActive();
+        this.getActiveItem().scrollIntoView({block: 'nearest'});
-      } else if (event.keyCode === 13) { // enter
+      } else if (e.key === 'Enter') {
-        event.preventDefault();
+        e.preventDefault();
-
+        this.getActiveItem()?.click();
-        if (this.active >= this.filteredItems.length) {
+      } else if (e.key === 'Escape') {
-          this.createNewBranch();
+        e.preventDefault();
-        } else if (this.active >= 0) {
-          this.selectItem(this.filteredItems[this.active]);
-        }
-      } else if (event.keyCode === 27) { // escape
-        event.preventDefault();
         this.menuVisible = false;
       }
     },
-    handleTabSwitch(mode) {
+    handleTabSwitch(selectedTab) {
-      if (this.isLoading) return;
+      this.selectedTab = selectedTab;
-      this.mode = mode;
       this.focusSearchField();
-      this.fetchBranchesOrTags();
+      this.loadTabItems();
     },
-    async fetchBranchesOrTags() {
+    async loadTabItems() {
-      if (!['branches', 'tags'].includes(this.mode) || this.isLoading) return;
+      const tab = this.selectedTab;
-      // only fetch when branch/tag list has not been initialized
+      if (this.tabLoadingStates[tab] === 'loading' || this.tabLoadingStates[tab] === 'done') return;
-      if (this.hasListInitialized[this.mode] ||
+
-        (this.mode === 'branches' && !this.showBranchesInDropdown) ||
+      const refType = this.selectedTab === 'branches' ? 'branch' : 'tag';
-        (this.mode === 'tags' && this.noTag)
+      this.tabLoadingStates[tab] = 'loading';
-      ) {
-        return;
-      }
-      this.isLoading = true;
       try {
-        const resp = await GET(`${this.repoLink}/${this.mode}/list`);
+        const url = refType === 'branch' ? `${this.currentRepoLink}/branches/list` : `${this.currentRepoLink}/tags/list`;
+        const resp = await GET(url);
         const {results} = await resp.json();
-        for (const result of results) {
+        for (const refShortName of results) {
-          let selected = false;
+          const item: ListItem = {
-          if (this.mode === 'branches') {
+            refType,
-            selected = result === this.defaultSelectedRefName;
+            refShortName,
-          } else {
+            selected: refType === this.currentRefType && refShortName === this.currentRefShortName,
-            selected = result === (this.release ? this.release.tagName : this.defaultSelectedRefName);
+            rssFeedLink: `${this.currentRepoLink}/rss/${refType}/${pathEscapeSegments(refShortName)}`,
+          };
+          this.allItems.push(item);
         }
-          this.items.push({name: result, url: pathEscapeSegments(result), branch: this.mode === 'branches', tag: this.mode === 'tags', selected});
+        this.tabLoadingStates[tab] = 'done';
-        }
-        this.hasListInitialized[this.mode] = true;
       } catch (e) {
-        showErrorToast(`Network error when fetching ${this.mode}, error: ${e}`);
+        this.tabLoadingStates[tab] = '';
-      } finally {
+        showErrorToast(`Network error when fetching items for ${tab}, error: ${e}`);
-        this.isLoading = false;
+        console.error(e);
       }
     },
   },
 };
 
 export function initRepoBranchTagSelector(selector) {
-  for (const [elIndex, elRoot] of document.querySelectorAll(selector).entries()) {
+  for (const elRoot of document.querySelectorAll(selector)) {
-    const data = {
+    // it is very hacky, but it is the only way to pass the elRoot to the "data()" function
-      csrfToken: window.config.csrfToken,
+    // it could be improved in the future to do more rewriting.
-      items: [],
+    currentElRoot = elRoot;
-      searchTerm: '',
+    const comp = {...sfc};
-      refNameText: '',
-      menuVisible: false,
-      release: null,
-
-      isViewTag: false,
-      isViewBranch: false,
-      isViewTree: false,
-
-      active: 0,
-      isLoading: false,
-      // This means whether branch list/tag list has initialized
-      hasListInitialized: {
-        'branches': false,
-        'tags': false,
-      },
-      ...window.config.pageData.branchDropdownDataList[elIndex],
-    };
-
-    const comp = {...sfc, data() { return data }};
     createApp(comp).mount(elRoot);
   }
 }
@@ -247,13 +220,13 @@ export default sfc; // activate IDE's Vue plugin
 </script>
 <template>
   <div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
-    <div class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
+    <div tabindex="0" class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible">
       <span class="flex-text-block gt-ellipsis">
-        <template v-if="release">{{ textReleaseCompare }}</template>
+        <template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>
         <template v-else>
-          <svg-icon v-if="isViewTag" name="octicon-tag"/>
+          <svg-icon v-if="currentRefType === 'tag'" name="octicon-tag"/>
           <svg-icon v-else name="octicon-git-branch"/>
-          <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</strong>
+          <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
         </template>
       </span>
       <svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
@@ -263,54 +236,50 @@ export default sfc; // activate IDE's Vue plugin
         <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
         <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
       </div>
-      <div v-if="showBranchesInDropdown" class="branch-tag-tab">
+      <div v-if="showTabBranches" class="branch-tag-tab">
-        <a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
+        <a class="branch-tag-item muted" :class="{active: selectedTab === 'branches'}" href="#" @click="handleTabSwitch('branches')">
           <svg-icon name="octicon-git-branch" :size="16" class-name="tw-mr-1"/>{{ textBranches }}
         </a>
-        <a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
+        <a v-if="showTabTags" class="branch-tag-item muted" :class="{active: selectedTab === 'tags'}" href="#" @click="handleTabSwitch('tags')">
           <svg-icon name="octicon-tag" :size="16" class-name="tw-mr-1"/>{{ textTags }}
         </a>
       </div>
       <div class="branch-tag-divider"/>
       <div class="scrolling menu" ref="scrollContainer">
         <svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
-        <div class="loading-indicator is-loading" v-if="isLoading"/>
+        <div class="loading-indicator is-loading" v-if="tabLoadingStates[selectedTab] === 'loading'"/>
-        <div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">
+        <div v-for="(item, index) in filteredItems" :key="item.refShortName" class="item" :class="{selected: item.selected, active: activeItemIndex === index}" @click="selectItem(item)" :ref="'listItem' + index">
-          {{ item.name }}
+          {{ item.refShortName }}
-          <div class="ui label" v-if="item.name===repoDefaultBranch && mode === 'branches'">
+          <div class="ui label" v-if="item.refType === 'branch' && item.refShortName === currentRepoDefaultBranch">
             {{ textDefaultBranchLabel }}
           </div>
-          <a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
+          <a v-if="enableFeed && selectedTab === 'branches'" role="button" class="rss-icon" target="_blank" @click.stop :href="item.rssFeedLink">
             <!-- creating a lot of Vue component is pretty slow, so we use a static SVG here -->
             <svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
           </a>
         </div>
-        <div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
+        <div class="item" v-if="showCreateNewRef" :class="{active: activeItemIndex === filteredItems.length}" :ref="'listItem' + filteredItems.length" @click="createNewRef()">
-          <a href="#" @click="createNewBranch()">
+          <div v-if="selectedTab === 'tags'">
-            <div v-show="shouldCreateTag">
+            <svg-icon name="octicon-tag" class="tw-mr-1"/>
-              <i class="reference tags icon"/>
             <span v-text="textCreateTag.replace('%s', searchTerm)"/>
           </div>
-            <div v-show="!shouldCreateTag">
+          <div v-else>
-              <svg-icon name="octicon-git-branch"/>
+            <svg-icon name="octicon-git-branch" class="tw-mr-1"/>
             <span v-text="textCreateBranch.replace('%s', searchTerm)"/>
           </div>
           <div class="text small">
-              <span v-if="isViewBranch || release">{{ textCreateBranchFrom.replace('%s', branchName) }}</span>
+            {{ textCreateRefFrom.replace('%s', currentRefShortName) }}
-              <span v-else-if="isViewTag">{{ textCreateBranchFrom.replace('%s', tagName) }}</span>
-              <span v-else>{{ textCreateBranchFrom.replace('%s', commitIdShort) }}</span>
           </div>
-          </a>
+          <form ref="createNewRefForm" method="post" :action="createNewRefFormActionUrl">
-          <form ref="newBranchForm" :action="formActionUrl" method="post">
             <input type="hidden" name="_csrf" :value="csrfToken">
-            <input type="hidden" name="new_branch_name" v-model="searchTerm">
+            <input type="hidden" name="new_branch_name" :value="searchTerm">
-            <input type="hidden" name="create_tag" v-model="shouldCreateTag">
+            <input type="hidden" name="create_tag" :value="String(selectedTab === 'tags')">
-            <input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
+            <input type="hidden" name="current_path" :value="currentTreePath">
           </form>
         </div>
       </div>
-      <div class="message" v-if="showNoResults && !isLoading">
+      <div class="message" v-if="showNoResults">
-        {{ noResults }}
+        {{ textNoResults }}
       </div>
     </div>
   </div>

web_src/js/types.ts

@@ -59,3 +59,5 @@ export type FomanticInitFunction = {
   settings?: Record<string, any>,
   (...args: any[]): any,
 }
+
+export type GitRefType = 'branch' | 'tag';