diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue')
-rw-r--r-- | app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue | 32 |
1 files changed, 17 insertions, 15 deletions
diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue index 08d24344ffc..10bfcdc2294 100644 --- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue +++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert, GlButton, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui'; +import { GlAlert, GlButton, GlListbox, GlSprintf } from '@gitlab/ui'; import { GlAreaChart } from '@gitlab/ui/dist/charts'; import { get } from 'lodash'; import { formatDate } from '~/lib/utils/datetime_utility'; @@ -12,8 +12,7 @@ export default { GlAlert, GlAreaChart, GlButton, - GlDropdown, - GlDropdownItem, + GlListbox, GlSprintf, }, props: { @@ -96,6 +95,14 @@ export default { formattedData() { return this.sortedData.map((value) => [value.date, value.coverage]); }, + mappedCoverages() { + return this.dailyCoverageData?.map((item, index) => ({ + // A numerical index makes an item into a group header, so + // convert these to strings to get non-header GlListbox items + value: index.toString(), + text: item.group_name, + })); + }, chartData() { return [ { @@ -175,18 +182,13 @@ export default { {{ __('It seems that there is currently no available data for code coverage') }} </span> </gl-alert> - <gl-dropdown v-if="canShowData" :text="selectedDailyCoverageName"> - <gl-dropdown-item - v-for="({ group_name }, index) in dailyCoverageData" - :key="index" - :value="group_name" - is-check-item - :is-checked="index === selectedCoverageIndex" - @click="setSelectedCoverage(index)" - > - {{ group_name }} - </gl-dropdown-item> - </gl-dropdown> + <gl-listbox + v-if="canShowData" + :items="mappedCoverages" + :selected="selectedCoverageIndex.toString()" + :toggle-text="selectedDailyCoverageName" + @select="setSelectedCoverage" + /> </div> <gl-area-chart v-if="!isLoading" |