diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-13 21:10:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-13 21:10:32 +0300 |
commit | 561d1f41b5803b90ef4baf0d129e28dde3fc2f25 (patch) | |
tree | eca91620c72ace1e30e339c931f65b3de78a34ba /app/assets/javascripts/pipeline_editor | |
parent | e958867b2e341329243be8db0c262233ae1238c0 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
5 files changed, 130 insertions, 40 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue index af5f77e2d64..1acf3a03e73 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue @@ -1,34 +1,77 @@ <script> -import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlIcon } from '@gitlab/ui'; +import { + GlDropdown, + GlDropdownItem, + GlDropdownSectionHeader, + GlInfiniteScroll, + GlLoadingIcon, + GlSearchBoxByType, +} from '@gitlab/ui'; import { historyPushState } from '~/lib/utils/common_utils'; import { setUrlParams } from '~/lib/utils/url_utility'; import { s__ } from '~/locale'; -import { DEFAULT_FAILURE } from '~/pipeline_editor/constants'; +import { + BRANCH_PAGINATION_LIMIT, + BRANCH_SEARCH_DEBOUNCE, + DEFAULT_FAILURE, +} from '~/pipeline_editor/constants'; import getAvailableBranches from '~/pipeline_editor/graphql/queries/available_branches.graphql'; import getCurrentBranch from '~/pipeline_editor/graphql/queries/client/current_branch.graphql'; export default { i18n: { + dropdownHeader: s__('Switch Branch'), title: s__('Branches'), fetchError: s__('Unable to fetch branch list for this project.'), }, + inputDebounce: BRANCH_SEARCH_DEBOUNCE, components: { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, - GlIcon, + GlInfiniteScroll, + GlLoadingIcon, + GlSearchBoxByType, + }, + inject: ['projectFullPath', 'totalBranches'], + props: { + paginationLimit: { + type: Number, + required: false, + default: BRANCH_PAGINATION_LIMIT, + }, + }, + data() { + return { + branches: [], + page: { + limit: this.paginationLimit, + offset: 0, + searchTerm: '', + }, + }; }, - inject: ['projectFullPath'], apollo: { - branches: { + availableBranches: { query: getAvailableBranches, variables() { return { + limit: this.page.limit, + offset: this.page.offset, projectFullPath: this.projectFullPath, + searchPattern: this.searchPattern, }; }, update(data) { - return data.project?.repository?.branches || []; + return data.project?.repository?.branchNames || []; + }, + result({ data }) { + const newBranches = data.project?.repository?.branchNames || []; + + // check that we're not re-concatenating existing fetch results + if (!this.branches.includes(newBranches[0])) { + this.branches = this.branches.concat(newBranches); + } }, error() { this.$emit('showError', { @@ -42,11 +85,37 @@ export default { }, }, computed: { - hasBranchList() { - return this.branches?.length > 0; + isBranchesLoading() { + return this.$apollo.queries.availableBranches.loading; + }, + showBranchSwitcher() { + return this.branches.length > 0 || this.page.searchTerm.length > 0; + }, + searchPattern() { + if (this.page.searchTerm === '') { + return '*'; + } + + return `*${this.page.searchTerm}*`; }, }, methods: { + // if there is no searchPattern, paginate by {paginationLimit} branches + fetchNextBranches() { + if ( + this.isBranchesLoading || + this.page.searchTerm.length > 0 || + this.branches.length === this.totalBranches + ) { + return; + } + + this.page = { + ...this.page, + limit: this.paginationLimit, + offset: this.page.offset + this.paginationLimit, + }; + }, async selectBranch(newBranch) { if (newBranch === this.currentBranch) { return; @@ -62,24 +131,53 @@ export default { this.$emit('refetchContent'); }, + setSearchTerm(newSearchTerm) { + this.branches = []; + this.page = { + limit: newSearchTerm.trim() === '' ? this.paginationLimit : this.totalBranches, + offset: 0, + searchTerm: newSearchTerm.trim(), + }; + }, }, }; </script> <template> - <gl-dropdown v-if="hasBranchList" class="gl-ml-2" :text="currentBranch" icon="branch"> + <gl-dropdown + v-if="showBranchSwitcher" + class="gl-ml-2" + :header-text="$options.i18n.dropdownHeader" + :text="currentBranch" + icon="branch" + > + <gl-search-box-by-type :debounce="$options.inputDebounce" @input="setSearchTerm" /> <gl-dropdown-section-header> - {{ this.$options.i18n.title }} + {{ $options.i18n.title }} </gl-dropdown-section-header> - <gl-dropdown-item - v-for="branch in branches" - :key="branch.name" - :is-checked="currentBranch === branch.name" - :is-check-item="true" - @click="selectBranch(branch.name)" + + <gl-infinite-scroll + :fetched-items="branches.length" + :total-items="totalBranches" + :max-list-height="250" + @bottomReached="fetchNextBranches" > - <gl-icon name="check" class="gl-visibility-hidden" /> - {{ branch.name }} - </gl-dropdown-item> + <template #items> + <gl-dropdown-item + v-for="branch in branches" + :key="branch" + :is-checked="currentBranch === branch" + :is-check-item="true" + @click="selectBranch(branch)" + > + {{ branch }} + </gl-dropdown-item> + </template> + <template #default> + <gl-dropdown-item v-if="isBranchesLoading" key="loading"> + <gl-loading-icon size="md" /> + </gl-dropdown-item> + </template> + </gl-infinite-scroll> </gl-dropdown> </template> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index dba815368eb..f0a24e0c061 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -28,3 +28,6 @@ export const COMMIT_ACTION_CREATE = 'CREATE'; export const COMMIT_ACTION_UPDATE = 'UPDATE'; export const DRAWER_EXPANDED_KEY = 'pipeline_editor_drawer_expanded'; + +export const BRANCH_PAGINATION_LIMIT = 20; +export const BRANCH_SEARCH_DEBOUNCE = '500'; diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/available_branches.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/available_branches.graphql index f162bb11d47..46e9b108b41 100644 --- a/app/assets/javascripts/pipeline_editor/graphql/queries/available_branches.graphql +++ b/app/assets/javascripts/pipeline_editor/graphql/queries/available_branches.graphql @@ -1,9 +1,12 @@ -query getAvailableBranches($projectFullPath: ID!) { - project(fullPath: $projectFullPath) @client { +query getAvailableBranches( + $limit: Int! + $offset: Int! + $projectFullPath: ID! + $searchPattern: String! +) { + project(fullPath: $projectFullPath) { repository { - branches { - name - } + branchNames(limit: $limit, offset: $offset, searchPattern: $searchPattern) } } } diff --git a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js index 1028770667a..81e75c32846 100644 --- a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js +++ b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js @@ -11,22 +11,6 @@ export const resolvers = { }), }; }, - /* eslint-disable @gitlab/require-i18n-strings */ - project() { - return { - __typename: 'Project', - repository: { - __typename: 'Repository', - branches: [ - { __typename: 'Branch', name: 'main' }, - { __typename: 'Branch', name: 'develop' }, - { __typename: 'Branch', name: 'production' }, - { __typename: 'Branch', name: 'test' }, - ], - }, - }; - }, - /* eslint-enable @gitlab/require-i18n-strings */ }, Mutation: { lintCI: (_, { endpoint, content, dry_run }) => { diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js index 361e2b64e0b..66158bdba88 100644 --- a/app/assets/javascripts/pipeline_editor/index.js +++ b/app/assets/javascripts/pipeline_editor/index.js @@ -43,6 +43,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { projectPath, projectNamespace, runnerHelpPagePath, + totalBranches, ymlHelpPagePath, } = el?.dataset; @@ -100,6 +101,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { projectPath, projectNamespace, runnerHelpPagePath, + totalBranches: parseInt(totalBranches, 10), ymlHelpPagePath, }, render(h) { |