diff options
Diffstat (limited to 'app/assets/javascripts/ref/components/ref_results_section.vue')
-rw-r--r-- | app/assets/javascripts/ref/components/ref_results_section.vue | 124 |
1 files changed, 124 insertions, 0 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> |