diff options
Diffstat (limited to 'app/assets/javascripts/search/sidebar/components/language_filter/index.vue')
| -rw-r--r-- | app/assets/javascripts/search/sidebar/components/language_filter/index.vue | 121 |
1 files changed, 63 insertions, 58 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/language_filter/index.vue b/app/assets/javascripts/search/sidebar/components/language_filter/index.vue index 40b50f657f0..c10b14bd116 100644 --- a/app/assets/javascripts/search/sidebar/components/language_filter/index.vue +++ b/app/assets/javascripts/search/sidebar/components/language_filter/index.vue @@ -2,10 +2,9 @@ import { GlButton, GlAlert, GlForm } from '@gitlab/ui'; import { mapState, mapActions, mapGetters } from 'vuex'; import { __, s__, sprintf } from '~/locale'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { HR_DEFAULT_CLASSES, ONLY_SHOW_MD } from '../../constants'; import { convertFiltersData } from '../../utils'; -import CheckboxFilter from '../checkbox_filter.vue'; +import CheckboxFilter from './checkbox_filter.vue'; import { trackShowMore, trackShowHasOverMax, @@ -14,7 +13,7 @@ import { TRACKING_ACTION_SELECT, } from './tracking'; -import { DEFAULT_ITEM_LENGTH, MAX_ITEM_LENGTH } from './data'; +import { DEFAULT_ITEM_LENGTH, MAX_ITEM_LENGTH, languageFilterData } from './data'; export default { name: 'LanguageFilter', @@ -24,7 +23,6 @@ export default { GlAlert, GlForm, }, - mixins: [glFeatureFlagsMixin()], data() { return { showAll: false, @@ -65,22 +63,25 @@ export default { hasOverMax() { return this.languageAggregationBuckets.length > MAX_ITEM_LENGTH; }, - dividerClasses() { + dividerClassesTop() { return [...HR_DEFAULT_CLASSES, ...ONLY_SHOW_MD]; }, + dividerClassesBottom() { + return [...HR_DEFAULT_CLASSES, 'gl-mt-5']; + }, hasQueryFilters() { return this.queryLanguageFilters.length > 0; }, }, async created() { - await this.fetchLanguageAggregation(); + await this.fetchAllAggregation(); }, methods: { ...mapActions([ 'applyQuery', 'resetLanguageQuery', 'resetLanguageQueryWithRedirect', - 'fetchLanguageAggregation', + 'fetchAllAggregation', ]), onShowMore() { this.showAll = true; @@ -108,69 +109,73 @@ export default { }, HR_DEFAULT_CLASSES, TRACKING_ACTION_SELECT, + languageFilterData, }; </script> <template> - <gl-form - v-if="hasBuckets" - class="gl-pt-5 gl-md-pt-0 language-filter-checkbox" - @submit.prevent="submitQuery" - > - <hr v-if="!useNewNavigation" :class="dividerClasses" /> - <div - v-if="!aggregations.error" - class="gl-overflow-x-hidden gl-overflow-y-auto" - :class="{ 'language-filter-max-height': showAll }" + <div> + <gl-form + v-if="hasBuckets" + class="gl-m-5 gl-my-0 language-filter-checkbox" + @submit.prevent="submitQuery" > - <checkbox-filter - :filters-data="filtersData" - :tracking-namespace="$options.TRACKING_ACTION_SELECT" - /> - <span v-if="showAll && hasOverMax" data-testid="has-over-max-text">{{ - $options.i18n.showingMax - }}</span> - </div> - <gl-alert v-else class="gl-mx-5" variant="danger" :dismissible="false">{{ - $options.i18n.loadError - }}</gl-alert> - <div v-if="hasShowMore && !showAll" class="gl-px-5 language-filter-show-all"> - <gl-button - data-testid="show-more-button" - category="tertiary" - variant="link" - size="small" - button-text-classes="gl-font-sm" - @click="onShowMore" - > - {{ $options.i18n.showMore }} - </gl-button> - </div> - <div v-if="!aggregations.error"> - <hr v-if="!useNewNavigation" :class="$options.HR_DEFAULT_CLASSES" /> + <hr v-if="!useNewNavigation" :class="dividerClassesTop" /> + <h5 class="gl-mt-0 gl-mb-5" :class="{ 'gl-font-sm': useNewNavigation }"> + {{ $options.languageFilterData.header }} + </h5> <div - class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-mt-4 gl-mx-5" + v-if="!aggregations.error" + class="gl-overflow-x-hidden gl-overflow-y-auto" + :class="{ 'language-filter-max-height': showAll }" > + <checkbox-filter + :filters-data="filtersData" + :tracking-namespace="$options.TRACKING_ACTION_SELECT" + /> + <span v-if="showAll && hasOverMax" data-testid="has-over-max-text">{{ + $options.i18n.showingMax + }}</span> + </div> + <gl-alert v-else class="gl-mx-5" variant="danger" :dismissible="false">{{ + $options.i18n.loadError + }}</gl-alert> + <div v-if="hasShowMore && !showAll" class="gl-px-5 language-filter-show-all"> <gl-button - category="primary" - variant="confirm" - type="submit" - :disabled="!sidebarDirty" - data-testid="apply-button" - > - {{ $options.i18n.apply }} - </gl-button> - <gl-button + data-testid="show-more-button" category="tertiary" variant="link" size="small" - :disabled="!hasQueryFilters && !sidebarDirty" - data-testid="reset-button" - @click="cleanResetFilters" + button-text-classes="gl-font-sm" + @click="onShowMore" > - {{ $options.i18n.reset }} + {{ $options.i18n.showMore }} </gl-button> </div> - </div> - </gl-form> + <div v-if="!aggregations.error"> + <hr v-if="!useNewNavigation" :class="dividerClassesBottom" /> + <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-mt-4"> + <gl-button + category="primary" + variant="confirm" + type="submit" + :disabled="!sidebarDirty" + data-testid="apply-button" + > + {{ $options.i18n.apply }} + </gl-button> + <gl-button + v-if="hasQueryFilters && sidebarDirty" + category="tertiary" + variant="link" + size="small" + data-testid="reset-button" + @click="cleanResetFilters" + > + {{ $options.i18n.reset }} + </gl-button> + </div> + </div> + </gl-form> + </div> </template> |