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 5d59880d4971a2fff129f4de4a92229451a5944e..a9079f91f508c52a744bec32201d56a1694b7e6a 100644
--- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
+++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
@@ -1,11 +1,5 @@
<script>
-import {
- GlAlert,
- GlDeprecatedDropdown,
- GlDeprecatedDropdownItem,
- GlIcon,
- GlSprintf,
-} from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { get } from 'lodash';
@@ -17,9 +11,8 @@ export default {
components: {
GlAlert,
GlAreaChart,
- GlDeprecatedDropdown,
- GlDeprecatedDropdownItem,
- GlIcon,
+ GlDropdown,
+ GlDropdownItem,
GlSprintf,
},
props: {
@@ -140,25 +133,18 @@ export default {
{{ __('It seems that there is currently no available data for code coverage') }}
</span>
</gl-alert>
- <gl-deprecated-dropdown v-if="canShowData" :text="selectedDailyCoverageName">
- <gl-deprecated-dropdown-item
+ <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="true"
+ :is-checked="index === selectedCoverageIndex"
@click="setSelectedCoverage(index)"
>
- <div class="gl-display-flex">
- <gl-icon
- v-if="index === selectedCoverageIndex"
- name="mobile-issue-close"
- class="gl-absolute"
- />
- <span class="gl-display-flex align-items-center ml-4">
- {{ group_name }}
- </span>
- </div>
- </gl-deprecated-dropdown-item>
- </gl-deprecated-dropdown>
+ {{ group_name }}
+ </gl-dropdown-item>
+ </gl-dropdown>
</div>
<gl-area-chart
v-if="!isLoading"
diff --git a/changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-pa.yml b/changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-pa.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8638d5786058e2dc63b728d3f97a02ecd1ea8ffd
--- /dev/null
+++ b/changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-pa.yml
@@ -0,0 +1,5 @@
+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
+merge_request: 41423
+author: nuwe1
+type: other
diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
index 211f4ea20f56e425361bd538fd080304efac0c6e..8ccad7d5c228ae38e23e149bca5078fa4c17a871 100644
--- a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
+++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
@@ -9,65 +9,54 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
<!---->
- <gl-deprecated-dropdown-stub
+ <gl-dropdown-stub
+ category="tertiary"
+ headertext=""
+ size="medium"
text="rspec"
+ variant="default"
>
- <gl-deprecated-dropdown-item-stub
+ <gl-dropdown-item-stub
+ avatarurl=""
+ iconcolor=""
+ iconname=""
+ iconrightname=""
+ ischecked="true"
+ ischeckitem="true"
+ secondarytext=""
value="rspec"
>
- <div
- class="gl-display-flex"
- >
- <gl-icon-stub
- class="gl-absolute"
- name="mobile-issue-close"
- size="16"
- />
-
- <span
- class="gl-display-flex align-items-center ml-4"
- >
-
- rspec
-
- </span>
- </div>
- </gl-deprecated-dropdown-item-stub>
- <gl-deprecated-dropdown-item-stub
+
+ rspec
+
+ </gl-dropdown-item-stub>
+ <gl-dropdown-item-stub
+ avatarurl=""
+ iconcolor=""
+ iconname=""
+ iconrightname=""
+ ischeckitem="true"
+ secondarytext=""
value="cypress"
>
- <div
- class="gl-display-flex"
- >
- <!---->
-
- <span
- class="gl-display-flex align-items-center ml-4"
- >
-
- cypress
-
- </span>
- </div>
- </gl-deprecated-dropdown-item-stub>
- <gl-deprecated-dropdown-item-stub
+
+ cypress
+
+ </gl-dropdown-item-stub>
+ <gl-dropdown-item-stub
+ avatarurl=""
+ iconcolor=""
+ iconname=""
+ iconrightname=""
+ ischeckitem="true"
+ secondarytext=""
value="karma"
>
- <div
- class="gl-display-flex"
- >
- <!---->
-
- <span
- class="gl-display-flex align-items-center ml-4"
- >
-
- karma
-
- </span>
- </div>
- </gl-deprecated-dropdown-item-stub>
- </gl-deprecated-dropdown-stub>
+
+ karma
+
+ </gl-dropdown-item-stub>
+ </gl-dropdown-stub>
</div>
<gl-area-chart-stub
diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
index 8884f7815ab37d607f7b176fb9760d3f371de757..4a60c7fd509e58beaca18c5044b2bba5b14f52d4 100644
--- a/spec/frontend/pages/projects/graphs/code_coverage_spec.js
+++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
@@ -1,6 +1,6 @@
import MockAdapter from 'axios-mock-adapter';
import { shallowMount } from '@vue/test-utils';
-import { GlAlert, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import waitForPromises from 'helpers/wait_for_promises';
@@ -17,7 +17,7 @@ describe('Code Coverage', () => {
const findAlert = () => wrapper.find(GlAlert);
const findAreaChart = () => wrapper.find(GlAreaChart);
- const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+ const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
const findFirstDropdownItem = () => findAllDropdownItems().at(0);
const findSecondDropdownItem = () => findAllDropdownItems().at(1);
@@ -124,7 +124,7 @@ describe('Code Coverage', () => {
});
it('renders the dropdown with all custom names as options', () => {
- expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeDefined();
+ expect(wrapper.find(GlDropdown).exists()).toBeDefined();
expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length);
expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name);
});
@@ -145,16 +145,8 @@ describe('Code Coverage', () => {
await wrapper.vm.$nextTick();
- expect(
- findFirstDropdownItem()
- .find(GlIcon)
- .exists(),
- ).toBe(false);
- expect(
- findSecondDropdownItem()
- .find(GlIcon)
- .exists(),
- ).toBe(true);
+ expect(findFirstDropdownItem().attributes('ischecked')).toBeFalsy();
+ expect(findSecondDropdownItem().attributes('ischecked')).toBeTruthy();
});
it('updates the graph data when selecting a different option in dropdown', async () => {