aniani/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-12-04 14:46:57 -05:00
Code

Refactor RepoBranchTagSelector (#32681)

Browse Source
This commit is contained in:
wxiaoguang 2024-12-02 09:41:32 +08:00 committed by GitHub
parent def13ece7c
commit e3e32605a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 275 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/cache/cache_test.go vendored
View File

@ -43,7 +43,7 @@ func TestTest(t *testing.T) {
elapsed, err := Test() elapsed, err := Test()
assert.NoError(t, err) assert.NoError(t, err)
// mem cache should take from 300ns up to 1ms on modern hardware ... // 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) { func TestGetCache(t *testing.T) {

110
templates/repo/branch_dropdown.tmpl
View File

@ -1,87 +1,57 @@
{{/* Attributes: {{/* Attributes:
* root
* ContainerClasses * 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 */}} {{/* 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 dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
<div class="ui button branch-dropdown-button"> <div class="ui button branch-dropdown-button">
<span class="flex-text-block gt-ellipsis"> <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"}} {{svg "octicon-tag"}}
{{else}} {{else if .ShowTabBranches}}
{{svg "octicon-git-branch"}} {{svg "octicon-git-branch"}}
{{end}} {{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}} {{end}}
<strong class="tw-ml-2 tw-inline-block gt-ellipsis">{{Iif .DropdownFixedText .SelectedRefShortName}}</strong>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div> </div>

17
templates/repo/commit_page.tmpl
View File

@ -66,14 +66,15 @@
</div> </div>
<div class="content"> <div class="content">
<p id="cherry-pick-content" class="branch-dropdown"></p> <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> <input type="hidden" id="cherry-pick-type" name="cherry-pick-type"><br>
<button type="submit" id="cherry-pick-submit" class="ui primary button"></button> <button type="submit" id="cherry-pick-submit" class="ui primary button"></button>
</form> </form>

19
templates/repo/commits.tmpl
View File

@ -5,7 +5,24 @@
{{template "repo/sub_menu" .}} {{template "repo/sub_menu" .}}
<div class="repo-button-row"> <div class="repo-button-row">
<div class="repo-button-row-left"> <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"> <a href="{{.RepoLink}}/graph" class="ui basic small compact button">
{{svg "octicon-git-branch"}} {{svg "octicon-git-branch"}}
{{ctx.Locale.Tr "repo.commit_graph"}} {{ctx.Locale.Tr "repo.commit_graph"}}

17
templates/repo/home.tmpl
View File

@ -47,7 +47,22 @@
{{$isHomepage := (eq $n 0)}} {{$isHomepage := (eq $n 0)}}
<div class="repo-button-row" data-is-homepage="{{$isHomepage}}"> <div class="repo-button-row" data-is-homepage="{{$isHomepage}}">
<div class="repo-button-row-left"> <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)}} {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
{{$cmpBranch := ""}} {{$cmpBranch := ""}}
{{if ne .Repository.ID .BaseRepo.ID}} {{if ne .Repository.ID .BaseRepo.ID}}

15
templates/repo/release/list.tmpl
View File

@ -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> <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)}} {{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> <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}} {{end}}
</div> </div>
<div class="ui segment detail"> <div class="ui segment detail">

381
web_src/js/components/RepoBranchTagSelector.vue
View File

@ -1,244 +1,217 @@
<script lang="ts"> <script lang="ts">
import {createApp, nextTick} from 'vue'; import {createApp, nextTick} from 'vue';
import $ from 'jquery';
import {SvgIcon} from '../svg.ts'; import {SvgIcon} from '../svg.ts';
import {pathEscapeSegments} from '../utils/url.ts';
import {showErrorToast} from '../modules/toast.ts'; import {showErrorToast} from '../modules/toast.ts';
import {GET} from '../modules/fetch.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 = { const sfc = {
components: {SvgIcon}, 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: { 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 // 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; return items;
}, },
showNoResults() { 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 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; }).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: { watch: {
menuVisible(visible) { menuVisible(visible) {
if (visible) { if (!visible) return;
this.focusSearchField(); 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() { 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: { methods: {
selectItem(item) { selectItem(item: ListItem) {
const prev = this.getSelected(); this.menuVisible = false;
if (prev !== null) { if (this.refFormActionTemplate) {
prev.selected = false; this.currentRefType = item.refType;
} this.currentRefShortName = item.refShortName;
item.selected = true; let actionLink = this.refFormActionTemplate;
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix; actionLink = actionLink.replace('{RepoLink}', this.currentRepoLink);
if (!this.branchForm) { actionLink = actionLink.replace('{RefType}', pathEscapeSegments(item.refType));
window.location.href = url; actionLink = actionLink.replace('{RefShortName}', pathEscapeSegments(item.refShortName));
this.$el.closest('form').action = actionLink;
} else { } else {
this.isViewTree = false; let link = this.refLinkTemplate;
this.isViewTag = false; link = link.replace('{RepoLink}', this.currentRepoLink);
this.isViewBranch = false; link = link.replace('{RefType}', pathEscapeSegments(item.refType));
this.$refs.dropdownRefName.textContent = item.name; link = link.replace('{RefShortName}', pathEscapeSegments(item.refShortName));
if (this.setAction) { link = link.replace('{TreePath}', pathEscapeSegments(this.currentTreePath));
document.querySelector(`#${this.branchForm}`)?.setAttribute('action', url); window.location.href = link;
} 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;
} }
}, },
createNewBranch() { createNewRef() {
if (!this.showCreateNewBranch) return; this.$refs.createNewRefForm?.submit();
$(this.$refs.newBranchForm).trigger('submit');
}, },
focusSearchField() { focusSearchField() {
nextTick(() => { nextTick(() => {
this.$refs.searchField.focus(); 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() { 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; if (this.filteredItems[i].selected) return i;
} }
return -1; 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; 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; 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; this.menuVisible = false;
} }
}, },
handleTabSwitch(mode) { handleTabSwitch(selectedTab) {
if (this.isLoading) return; this.selectedTab = selectedTab;
this.mode = mode;
this.focusSearchField(); 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 { 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(); 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.items.push({name: result, url: pathEscapeSegments(result), branch: this.mode === 'branches', tag: this.mode === 'tags', selected}); this.allItems.push(item);
} }
this.hasListInitialized[this.mode] = true; this.tabLoadingStates[tab] = 'done';
} catch (e) { } 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) { 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); createApp(comp).mount(elRoot);
} }
} }
@ -247,13 +220,13 @@ export default sfc; // activate IDE's Vue plugin
</script> </script>
<template> <template>
<div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap"> <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"> <span class="flex-text-block gt-ellipsis">
<template v-if="release">{{ textReleaseCompare }}</template> <template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>
<template v-else> <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"/> <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> </template>
</span> </span>
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/> <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> <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"> <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
</div> </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 }} <svg-icon name="octicon-git-branch" :size="16" class-name="tw-mr-1"/>{{ textBranches }}
</a> </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 }} <svg-icon name="octicon-tag" :size="16" class-name="tw-mr-1"/>{{ textTags }}
</a> </a>
</div> </div>
<div class="branch-tag-divider"/> <div class="branch-tag-divider"/>
<div class="scrolling menu" ref="scrollContainer"> <div class="scrolling menu" ref="scrollContainer">
<svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/> <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 }} {{ textDefaultBranchLabel }}
</div> </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 --> <!-- 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> <svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
</a> </a>
</div> </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)"/>
<span v-text="textCreateTag.replace('%s', searchTerm)"/> </div>
</div> <div v-else>
<div v-show="!shouldCreateTag"> <svg-icon name="octicon-git-branch" class="tw-mr-1"/>
<svg-icon name="octicon-git-branch"/> <span v-text="textCreateBranch.replace('%s', searchTerm)"/>
<span v-text="textCreateBranch.replace('%s', searchTerm)"/> </div>
</div> <div class="text small">
<div class="text small"> {{ textCreateRefFrom.replace('%s', currentRefShortName) }}
<span v-if="isViewBranch || release">{{ textCreateBranchFrom.replace('%s', branchName) }}</span> </div>
<span v-else-if="isViewTag">{{ textCreateBranchFrom.replace('%s', tagName) }}</span> <form ref="createNewRefForm" method="post" :action="createNewRefFormActionUrl">
<span v-else>{{ textCreateBranchFrom.replace('%s', commitIdShort) }}</span>
</div>
</a>
<form ref="newBranchForm" :action="formActionUrl" method="post">
<input type="hidden" name="_csrf" :value="csrfToken"> <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> </form>
</div> </div>
</div> </div>
<div class="message" v-if="showNoResults && !isLoading"> <div class="message" v-if="showNoResults">
{{ noResults }} {{ textNoResults }}
</div> </div>
</div> </div>
</div> </div>

2
web_src/js/types.ts
View File

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