Skip to content

Commit

Permalink
Refactor branch/tag selector to Vue SFC (#23421)
Browse files Browse the repository at this point in the history 
Follow #23394

There were many bad smells in old code. This PR only moves the code into
Vue SFC, doesn't touch the unrelated logic.

update: after
5f23218
, there should be no usage of the vue-rumtime-compiler anymore
(hopefully), so I think this PR could close #19851

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
  • Loading branch information
@wxiaoguang @lunny
wxiaoguang and lunny authored Mar 14, 2023
1 parent d56bb74 commit ac8d71f
Show file tree
Hide file tree
Showing 14 changed files with 359 additions and 309 deletions.
98 changes: 32 additions & 66 deletions templates/repo/branch_dropdown.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
{{$release := .release}}
{{$defaultBranch := $.root.BranchName}}{{if and .root.IsViewTag (not .noTag)}}{{$defaultBranch = .root.TagName}}{{end}}{{if eq $defaultBranch ""}}{{$defaultBranch = $.root.Repository.DefaultBranch}}{{end}}
{{$type := ""}}{{if and .root.IsViewTag (not .noTag)}}{{$type = "tag"}}{{else if .root.IsViewBranch}}{{$type = "branch"}}{{else}}{{$type = "tree"}}{{end}}
{{$defaultBranch := $.root.BranchName}}
{{if and .root.IsViewTag (not .noTag)}}
{{$defaultBranch = .root.TagName}}
{{end}}
{{if eq $defaultBranch ""}}
{{$defaultBranch = $.root.Repository.DefaultBranch}}
{{end}}

{{$type := ""}}
{{if and .root.IsViewTag (not .noTag)}}
{{$type = "tag"}}
{{else if .root.IsViewBranch}}
{{$type = "branch"}}
{{else}}
{{$type = "tree"}}
{{end}}

{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}

<script type="module">
Expand Down Expand Up @@ -30,8 +44,8 @@
'defaultBranch': {{$defaultBranch}},
'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}}',
'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}},
Expand All @@ -46,71 +60,23 @@
window.config.pageData.branchDropdownDataList.push(data);
</script>

<div class="fitted item choose reference">
<div class="fitted item js-branch-tag-selector">
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
<div class="ui floating filter dropdown custom">
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df">
<span class="text gt-df gt-ac gt-mr-2">
{{/* v-cloak is used to hide unnecessary elements before Vue componment is mounted */}}
<span v-cloak v-if="release">${ textReleaseCompare }</span>
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}}</span>
<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
{{if .release}}
{{.root.locale.Tr "repo.release.compare"}}
{{else}}
{{if eq $type "tag"}}
{{svg "octicon-tag"}}
{{else}}
{{svg "octicon-git-branch"}}
{{end}}
<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
{{end}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</button>
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
</div>
<template v-if="showBranchesInDropdown">
<div class="header branch-tag-choice">
<div class="ui grid">
<div class="two column row">
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
<span class="text" :class="{black: mode === 'branches'}">
{{svg "octicon-git-branch" 16 "gt-mr-2"}}${ textBranches }
</span>
</a>
<template v-if="!noTag">
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
<span class="text" :class="{black: mode === 'tags'}">
{{svg "octicon-tag" 16 "gt-mr-2"}}${ textTags }
</span>
</a>
</template>
</div>
</div>
</div>
</template>
<div class="scrolling menu" ref="scrollContainer">
<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">${ item.name }</div>
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
<a href="#" @click="createNewBranch()">
<div v-show="createTag">
<i class="reference tags icon"></i>
<span v-html="textCreateTag.replace('%s', searchTerm)"></span>
</div>
<div v-show="!createTag">
{{svg "octicon-git-branch"}}
<span v-html="textCreateBranch.replace('%s', searchTerm)"></span>
</div>
<div class="text small">
<span v-if="isViewBranch || release">${ textCreateBranchFrom.replace('%s', branchName) }</span>
<span v-else-if="isViewTag">${ textCreateBranchFrom.replace('%s', tagName) }</span>
<span v-else>${ textCreateBranchFrom.replace('%s', commitIdShort) }</span>
</div>
</a>
<form ref="newBranchForm" action="{{.root.RepoLink}}/branches/_new/{{.root.BranchNameSubURL}}" method="post">
<input type="hidden" name="_csrf" :value="csrfToken">
<input type="hidden" name="new_branch_name" v-model="searchTerm">
<input type="hidden" name="create_tag" v-model="createTag">
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
</form>
</div>
</div>
<div class="message" v-if="showNoResults">${ noResults }</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion web_src/js/components/DashboardRepoList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}" :key="repo.id">
<a class="repo-list-link gt-df gt-ac gt-sb" :href="repo.link">
<div class="item-name gt-df gt-ac gt-f1 gt-mr-2">
<svg-icon :name="repoIcon(repo)" size="16" class-name="gt-mr-2"/>
<svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
<div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
<span v-if="repo.archived">
<svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
Expand Down
7 changes: 4 additions & 3 deletions web_src/js/components/PullRequestMergeForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
-d '{"context": "test/context", "description": "description", "state": "${state}", "target_url": "http://localhost"}'
-->
<div>
<!-- eslint-disable -->
<div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"></div>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"/>

<div class="ui form" v-if="showActionForm">
<form :action="mergeForm.baseLink+'/merge'" method="post">
Expand All @@ -30,7 +30,8 @@
<button @click.prevent="clearMergeMessage" class="ui tertiary button">
{{ mergeForm.textClearMergeMessage }}
</button>
<div class="ui label"><!-- TODO: Convert to tooltip once we can use tooltips in Vue templates -->
<div class="ui label">
<!-- TODO: Convert to tooltip once we can use tooltips in Vue templates -->
{{ mergeForm.textClearMergeMessageHint }}
</div>
</template>
Expand Down
208 changes: 0 additions & 208 deletions web_src/js/components/RepoBranchTagDropdown.js
View file

This file was deleted.

Loading

0 comments on commit ac8d71f

Please sign in to comment.