diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-14 12:09:02 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-14 12:09:02 +0300 |
commit | 846a84f2e9d6149b00c63ccae2850421f6766bac (patch) | |
tree | a23327af14cdd705bdde5ae2ed1b8750ba04755e /app/assets/javascripts/ref | |
parent | 8e42824b115f56679b9c791570b27d6184fecad9 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/ref')
-rw-r--r-- | app/assets/javascripts/ref/components/ref_results_section.vue | 124 | ||||
-rw-r--r-- | app/assets/javascripts/ref/components/ref_selector.vue | 186 | ||||
-rw-r--r-- | app/assets/javascripts/ref/constants.js | 21 |
3 files changed, 328 insertions, 3 deletions
diff --git a/app/assets/javascripts/ref/components/ref_results_section.vue b/app/assets/javascripts/ref/components/ref_results_section.vue new file mode 100644 index 00000000000..32e916052c4 --- /dev/null +++ b/app/assets/javascripts/ref/components/ref_results_section.vue @@ -0,0 +1,124 @@ +<script> +import { GlNewDropdownHeader, GlNewDropdownItem, GlBadge, GlIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +export default { + name: 'RefResultsSection', + components: { + GlNewDropdownHeader, + GlNewDropdownItem, + GlBadge, + GlIcon, + }, + props: { + sectionTitle: { + type: String, + required: true, + }, + + totalCount: { + type: Number, + required: true, + }, + + /** + * An array of object that have the following properties: + * + * - name (String, required): The name of the ref that will be displayed + * - value (String, optional): The value that will be selected when the ref + * is selected. If not provided, `name` will be used as the value. + * For example, commits use the short SHA for `name` + * and long SHA for `value`. + * - subtitle (String, optional): Text to render underneath the name. + * For example, used to render the commit's title underneath its SHA. + * - default (Boolean, optional): Whether or not to render a "default" + * indicator next to the item. Used to indicate + * the project's default branch. + * + */ + items: { + type: Array, + required: true, + validator: items => Array.isArray(items) && items.every(item => item.name), + }, + + /** + * The currently selected ref. + * Used to render a check mark by the selected item. + * */ + selectedRef: { + type: String, + required: false, + default: '', + }, + + /** + * An error object that indicates that an error + * occurred while fetching items for this section + */ + error: { + type: Error, + required: false, + default: null, + }, + + /** The message to display if an error occurs */ + errorMessage: { + type: String, + required: false, + default: '', + }, + }, + computed: { + totalCountText() { + return this.totalCount > 999 ? s__('TotalRefCountIndicator|1000+') : `${this.totalCount}`; + }, + }, + methods: { + showCheck(item) { + return item.name === this.selectedRef || item.value === this.selectedRef; + }, + }, +}; +</script> + +<template> + <div> + <gl-new-dropdown-header> + <div class="gl-display-flex align-items-center" data-testid="section-header"> + <span class="gl-mr-2 gl-mb-1">{{ sectionTitle }}</span> + <gl-badge variant="neutral">{{ totalCountText }}</gl-badge> + </div> + </gl-new-dropdown-header> + <template v-if="error"> + <div class="gl-display-flex align-items-start text-danger gl-ml-4 gl-mr-4 gl-mb-3"> + <gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-flex-shrink-0" /> + <span>{{ errorMessage }}</span> + </div> + </template> + <template v-else> + <gl-new-dropdown-item + v-for="item in items" + :key="item.name" + @click="$emit('selected', item.value || item.name)" + > + <div class="gl-display-flex align-items-start"> + <gl-icon + name="mobile-issue-close" + class="gl-mr-2 gl-flex-shrink-0" + :class="{ 'gl-visibility-hidden': !showCheck(item) }" + /> + + <div class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column"> + <span class="gl-font-monospace">{{ item.name }}</span> + <span class="gl-text-gray-600">{{ item.subtitle }}</span> + </div> + + <gl-badge v-if="item.default" size="sm" variant="info">{{ + s__('DefaultBranchLabel|default') + }}</gl-badge> + </div> + </gl-new-dropdown-item> + </template> + </div> +</template> diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue new file mode 100644 index 00000000000..012a391a3da --- /dev/null +++ b/app/assets/javascripts/ref/components/ref_selector.vue @@ -0,0 +1,186 @@ +<script> +import { mapActions, mapGetters, mapState } from 'vuex'; +import { + GlNewDropdown, + GlNewDropdownDivider, + GlNewDropdownHeader, + GlSearchBoxByType, + GlSprintf, + GlIcon, + GlLoadingIcon, +} from '@gitlab/ui'; +import { debounce } from 'lodash'; +import createStore from '../stores'; +import { SEARCH_DEBOUNCE_MS, DEFAULT_I18N } from '../constants'; +import RefResultsSection from './ref_results_section.vue'; + +export default { + name: 'RefSelector', + store: createStore(), + components: { + GlNewDropdown, + GlNewDropdownDivider, + GlNewDropdownHeader, + GlSearchBoxByType, + GlSprintf, + GlIcon, + GlLoadingIcon, + RefResultsSection, + }, + props: { + value: { + type: String, + required: false, + default: '', + }, + projectId: { + type: String, + required: true, + }, + translations: { + type: Object, + required: false, + default: () => ({}), + }, + }, + data() { + return { + query: '', + }; + }, + computed: { + ...mapState({ + matches: state => state.matches, + lastQuery: state => state.query, + selectedRef: state => state.selectedRef, + }), + ...mapGetters(['isLoading', 'isQueryPossiblyASha']), + i18n() { + return { + ...DEFAULT_I18N, + ...this.translations, + }; + }, + showBranchesSection() { + return Boolean(this.matches.branches.totalCount > 0 || this.matches.branches.error); + }, + showTagsSection() { + return Boolean(this.matches.tags.totalCount > 0 || this.matches.tags.error); + }, + showCommitsSection() { + return Boolean(this.matches.commits.totalCount > 0 || this.matches.commits.error); + }, + showNoResults() { + return !this.showBranchesSection && !this.showTagsSection && !this.showCommitsSection; + }, + }, + created() { + this.setProjectId(this.projectId); + this.search(this.query); + }, + methods: { + ...mapActions(['setProjectId', 'setSelectedRef', 'search']), + focusSearchBox() { + this.$refs.searchBox.$el.querySelector('input').focus(); + }, + onSearchBoxInput: debounce(function search() { + this.search(this.query); + }, SEARCH_DEBOUNCE_MS), + selectRef(ref) { + this.setSelectedRef(ref); + this.$emit('input', this.selectedRef); + }, + }, +}; +</script> + +<template> + <gl-new-dropdown class="ref-selector" @shown="focusSearchBox"> + <template slot="button-content"> + <span class="gl-flex-grow-1 gl-ml-2 gl-text-gray-600" data-testid="button-content"> + <span v-if="selectedRef" class="gl-font-monospace">{{ selectedRef }}</span> + <span v-else>{{ i18n.noRefSelected }}</span> + </span> + <gl-icon name="chevron-down" /> + </template> + + <div class="gl-display-flex gl-flex-direction-column ref-selector-dropdown-content"> + <gl-new-dropdown-header> + <span class="gl-text-center gl-display-block">{{ i18n.dropdownHeader }}</span> + </gl-new-dropdown-header> + + <gl-new-dropdown-divider /> + + <gl-search-box-by-type + ref="searchBox" + v-model.trim="query" + class="gl-m-3" + :placeholder="i18n.searchPlaceholder" + @input="onSearchBoxInput" + /> + + <div class="gl-flex-grow-1 gl-overflow-y-auto"> + <gl-loading-icon v-if="isLoading" size="lg" class="gl-my-3" /> + + <div + v-else-if="showNoResults" + class="gl-text-center gl-mx-3 gl-py-3" + data-testid="no-results" + > + <gl-sprintf v-if="lastQuery" :message="i18n.noResultsWithQuery"> + <template #query> + <b class="gl-word-break-all">{{ lastQuery }}</b> + </template> + </gl-sprintf> + + <span v-else>{{ i18n.noResults }}</span> + </div> + + <template v-else> + <template v-if="showBranchesSection"> + <ref-results-section + :section-title="i18n.branches" + :total-count="matches.branches.totalCount" + :items="matches.branches.list" + :selected-ref="selectedRef" + :error="matches.branches.error" + :error-message="i18n.branchesErrorMessage" + data-testid="branches-section" + @selected="selectRef($event)" + /> + + <gl-new-dropdown-divider v-if="showTagsSection || showCommitsSection" /> + </template> + + <template v-if="showTagsSection"> + <ref-results-section + :section-title="i18n.tags" + :total-count="matches.tags.totalCount" + :items="matches.tags.list" + :selected-ref="selectedRef" + :error="matches.tags.error" + :error-message="i18n.tagsErrorMessage" + data-testid="tags-section" + @selected="selectRef($event)" + /> + + <gl-new-dropdown-divider v-if="showCommitsSection" /> + </template> + + <template v-if="showCommitsSection"> + <ref-results-section + :section-title="i18n.commits" + :total-count="matches.commits.totalCount" + :items="matches.commits.list" + :selected-ref="selectedRef" + :error="matches.commits.error" + :error-message="i18n.commitsErrorMessage" + data-testid="commits-section" + @selected="selectRef($event)" + /> + </template> + </template> + </div> + </div> + </gl-new-dropdown> +</template> diff --git a/app/assets/javascripts/ref/constants.js b/app/assets/javascripts/ref/constants.js index 524ff2380c0..ca82b951377 100644 --- a/app/assets/javascripts/ref/constants.js +++ b/app/assets/javascripts/ref/constants.js @@ -1,4 +1,19 @@ -// This eslint-disable can be removed once a second -// value is added to this file. -/* eslint-disable import/prefer-default-export */ +import { __ } from '~/locale'; + export const X_TOTAL_HEADER = 'x-total'; + +export const SEARCH_DEBOUNCE_MS = 250; + +export const DEFAULT_I18N = Object.freeze({ + dropdownHeader: __('Select Git revision'), + searchPlaceholder: __('Search by Git revision'), + noResultsWithQuery: __('No matching results for "%{query}"'), + noResults: __('No matching results'), + branchesErrorMessage: __('An error occurred while fetching branches. Retry the search.'), + tagsErrorMessage: __('An error occurred while fetching tags. Retry the search.'), + commitsErrorMessage: __('An error occurred while fetching commits. Retry the search.'), + branches: __('Branches'), + tags: __('Tags'), + commits: __('Commits'), + noRefSelected: __('No ref selected'), +}); |