Replace GlDeprecatedDropdown with GlDropdown in code_coverage.vue

app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue

 <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"

changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-pa.yml

+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
+merge_request: 41423
+author: nuwe1
+type: other

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

spec/frontend/pages/projects/graphs/code_coverage_spec.js

 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 () => {