From 2f0e79e6393df13930eaa419273d24dc2ef36cfa Mon Sep 17 00:00:00 2001 From: HesterG Date: Fri, 21 Jul 2023 19:20:04 +0800 Subject: Use frontend fetch for branch dropdown component (#25719) - Send request to get branch/tag list, use loading icon when waiting for response. - Only fetch when the first time branch/tag list shows. - For backend, removed assignment to `ctx.Data["Branches"]` and `ctx.Data["Tags"]` from `context/repo.go` and passed these data wherever needed. - Changed some `v-if` to `v-show` and used native `svg` as mentioned in https://github.com/go-gitea/gitea/pull/25719#issuecomment-1631712757 to improve perfomance when there are a lot of branches. - Places Used the dropdown component: Repo Home Page Screen Shot 2023-07-06 at 12 17 51 Commits Page Screen Shot 2023-07-06 at 12 18 34 Specific commit -> operations -> cherry-pick Screen Shot 2023-07-06 at 12 23 28 Release Page Screen Shot 2023-07-06 at 12 25 05 - Demo https://github.com/go-gitea/gitea/assets/17645053/d45d266b-3eb0-465a-82f9-57f78dc5f9f3 - Note: UI of dropdown menu could be improved in another PR as it should apply to more dropdown menus. Fix #14180 --------- Co-authored-by: silverwind Co-authored-by: wxiaoguang --- web_src/js/components/RepoBranchTagSelector.vue | 95 +++++++++++++++++-------- web_src/js/modules/toast.js | 2 +- web_src/js/svg.js | 8 ++- 3 files changed, 72 insertions(+), 33 deletions(-) (limited to 'web_src/js') diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index 4fc3936244..e6e72e3886 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -11,7 +11,7 @@ -
+
@@ -20,13 +20,13 @@
- + {{ textBranches }}
+ +
{{ item.name }} - - + + +
-
+
-
+
@@ -64,12 +67,12 @@
- +
-
+
{{ noResults }}
@@ -81,6 +84,7 @@ import {createApp, nextTick} from 'vue'; import $ from 'jquery'; import {SvgIcon} from '../svg.js'; import {pathEscapeSegments} from '../utils/url.js'; +import {showErrorToast} from '../modules/toast.js'; const sfc = { components: {SvgIcon}, @@ -110,12 +114,16 @@ const sfc = { formActionUrl() { return `${this.repoLink}/branches/_new/${this.branchNameSubURL}`; }, + shouldCreateTag() { + return this.mode === 'tags'; + } }, watch: { menuVisible(visible) { if (visible) { this.focusSearchField(); + this.fetchBranchesOrTags(); } } }, @@ -139,7 +147,6 @@ const sfc = { } }); }, - methods: { selectItem(item) { const prev = this.getSelected(); @@ -246,7 +253,44 @@ const sfc = { event.preventDefault(); this.menuVisible = false; } - } + }, + handleTabSwitch(mode) { + if (this.isLoading) return; + this.mode = mode; + this.focusSearchField(); + this.fetchBranchesOrTags(); + }, + async fetchBranchesOrTags() { + if (!['branches', 'tags'].includes(this.mode) || this.isLoading) return; + // only fetch when branch/tag list has not been initialized + if (this.hasListInitialized[this.mode] || + (this.mode === 'branches' && !this.showBranchesInDropdown) || + (this.mode === 'tags' && this.noTag) + ) { + return; + } + this.isLoading = true; + try { + // the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name" + const reqUrl = `${this.repoLink}/${this.mode}/list`; + const resp = await fetch(reqUrl); + const {results} = await resp.json(); + for (const result of results) { + let selected = false; + if (this.mode === 'branches') { + selected = result === this.defaultBranch; + } else { + selected = result === (this.release ? this.release.tagName : this.defaultBranch); + } + this.items.push({name: result, url: pathEscapeSegments(result), branch: this.mode === 'branches', tag: this.mode === 'tags', selected}); + } + this.hasListInitialized[this.mode] = true; + } catch (e) { + showErrorToast(`Network error when fetching ${this.mode}, error: ${e}`); + } finally { + this.isLoading = false; + } + }, } }; @@ -258,7 +302,6 @@ export function initRepoBranchTagSelector(selector) { searchTerm: '', refNameText: '', menuVisible: false, - createTag: false, release: null, isViewTag: false, @@ -266,27 +309,15 @@ export function initRepoBranchTagSelector(selector) { 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], }; - // the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name" - - if (data.showBranchesInDropdown && data.branches) { - for (const branch of data.branches) { - data.items.push({name: branch, url: pathEscapeSegments(branch), branch: true, tag: false, selected: branch === data.defaultBranch}); - } - } - if (!data.noTag && data.tags) { - for (const tag of data.tags) { - if (data.release) { - data.items.push({name: tag, url: pathEscapeSegments(tag), branch: false, tag: true, selected: tag === data.release.tagName}); - } else { - data.items.push({name: tag, url: pathEscapeSegments(tag), branch: false, tag: true, selected: tag === data.defaultBranch}); - } - } - } - const comp = {...sfc, data() { return data }}; createApp(comp).mount(elRoot); } @@ -302,4 +333,8 @@ export default sfc; // activate IDE's Vue plugin .menu .item:hover .rss-icon { display: inline-block; } + +.scrolling.menu .loading-indicator { + height: 4em; +} diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index b0d02dc644..b5899052d4 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -1,5 +1,6 @@ import {htmlEscape} from 'escape-goat'; import {svg} from '../svg.js'; +import Toastify from 'toastify-js'; const levels = { info: { @@ -23,7 +24,6 @@ const levels = { async function showToast(message, level, {gravity, position, duration, ...other} = {}) { if (!message) return; - const {default: Toastify} = await import(/* webpackChunkName: 'toastify' */'toastify-js'); const {icon, background, duration: levelDuration} = levels[level ?? 'info']; const toast = Toastify({ diff --git a/web_src/js/svg.js b/web_src/js/svg.js index b0c55e4e37..2ef839aa21 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -185,9 +185,10 @@ export const SvgIcon = { name: {type: String, required: true}, size: {type: Number, default: 16}, className: {type: String, default: ''}, + symbolId: {type: String} }, render() { - const {svgOuter, svgInnerHtml} = svgParseOuterInner(this.name); + let {svgOuter, svgInnerHtml} = svgParseOuterInner(this.name); // https://vuejs.org/guide/extras/render-function.html#creating-vnodes // the `^` is used for attr, set SVG attributes like 'width', `aria-hidden`, `viewBox`, etc const attrs = {}; @@ -207,7 +208,10 @@ export const SvgIcon = { if (this.className) { classes.push(...this.className.split(/\s+/).filter(Boolean)); } - + if (this.symbolId) { + classes.push('gt-hidden', 'svg-symbol-container'); + svgInnerHtml = `${svgInnerHtml}`; + } // create VNode return h('svg', { ...attrs, -- cgit v1.2.3