Merge branch...

Merge branch 'Replace-GlDeprecatedDropdown-with-GlDropdown-in-ee/app/assets/javascripts/insights/components/insights.vue' into 'master'

GlDeprecateddropdown to Gldropdown in EE/app/assets/javascripts/insights/components/insights.vue

See merge request gitlab-org/gitlab!41442

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

----
-title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-ee/app/assets/javascripts/geo_node_form-and-ee/app/assets/javascripts/geo_replicable
-merge_request: 41438
-author: nuwe1
-type: other

ee/app/assets/javascripts/insights/components/insights.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import {
-  GlAlert,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlEmptyState,
-  GlLoadingIcon,
-} from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlDropdownItem, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { EMPTY_STATE_TITLE, EMPTY_STATE_DESCRIPTION, EMPTY_STATE_SVG_PATH } from '../constants';
 import InsightsPage from './insights_page.vue';
 
@@ -16,8 +10,8 @@ export default {
     GlLoadingIcon,
     InsightsPage,
     GlEmptyState,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     endpoint: {
@@ -130,22 +124,20 @@ export default {
       </gl-alert>
     </div>
     <div v-else-if="configPresent" class="insights-wrapper">
-      <gl-deprecated-dropdown
-        class="js-insights-dropdown w-100"
+      <gl-dropdown
+        class="js-insights-dropdown gl-w-full"
         data-qa-selector="insights_dashboard_dropdown"
-        menu-class="w-100 mw-100"
-        toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
+        toggle-class="dropdown-menu-toggle gl-w-full gl-field-error-outline"
         :text="__('Select Page')"
         :disabled="pageLoading"
       >
-        <gl-deprecated-dropdown-item
+        <gl-dropdown-item
           v-for="page in pages"
           :key="page.scope"
-          class="w-100"
           @click="onChangePage(page.scope)"
-          >{{ page.name }}</gl-deprecated-dropdown-item
+          >{{ page.name }}</gl-dropdown-item
         >
-      </gl-deprecated-dropdown>
+      </gl-dropdown>
       <gl-alert v-if="notice != ''">
         {{ notice }}
       </gl-alert>

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

+---
+title: Replace `GlDeprecatedDropdown` with `GlDropdown` in `ee/app/assets/javascripts/insights/components/insights.vue`
+merge_request: 41442
+author: nuwe1
+type: other

ee/spec/frontend/insights/components/insights_spec.js

@@ -6,7 +6,7 @@ import { TEST_HOST } from 'helpers/test_constants';
 import Insights from 'ee/insights/components/insights.vue';
 import { createStore } from 'ee/insights/stores';
 import { pageInfo } from 'ee_jest/insights/mock_data';
-import { GlAlert, GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlEmptyState } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlDropdownItem, GlEmptyState } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -86,18 +86,18 @@ describe('Insights component', () => {
 
       it('has the correct nav tabs', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).exists()).toBe(true);
+        expect(wrapper.find(GlDropdown).exists()).toBe(true);
         expect(
           wrapper
-            .find(GlDeprecatedDropdown)
-            .find(GlDeprecatedDropdownItem)
+            .find(GlDropdown)
+            .find(GlDropdownItem)
             .text(),
         ).toBe(title);
       });
 
       it('should not disable the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).attributes().disabled).toBeUndefined();
+        expect(wrapper.find(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
 
@@ -117,18 +117,18 @@ describe('Insights component', () => {
 
       it('has the correct nav tabs', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).exists()).toBe(true);
+        expect(wrapper.find(GlDropdown).exists()).toBe(true);
         expect(
           wrapper
-            .find(GlDeprecatedDropdown)
-            .find(GlDeprecatedDropdownItem)
+            .find(GlDropdown)
+            .find(GlDropdownItem)
             .text(),
         ).toBe(title);
       });
 
       it('disables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).attributes()).toMatchObject({ disabled: 'true' });
+        expect(wrapper.find(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
 
@@ -152,7 +152,7 @@ describe('Insights component', () => {
 
       it('enables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).attributes()).toMatchObject({ disabled: 'true' });
+        expect(wrapper.find(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
 
@@ -175,7 +175,7 @@ describe('Insights component', () => {
 
       it('disables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).attributes()).toMatchObject({ disabled: 'true' });
+        expect(wrapper.find(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
 
@@ -199,7 +199,7 @@ describe('Insights component', () => {
 
       it('enables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).attributes().disabled).toBeUndefined();
+        expect(wrapper.find(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
 
@@ -223,7 +223,7 @@ describe('Insights component', () => {
 
       it('enables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDeprecatedDropdown).attributes().disabled).toBeUndefined();
+        expect(wrapper.find(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
   });
@@ -243,7 +243,7 @@ describe('Insights component', () => {
 
     it('does not display dropdown', async () => {
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlDeprecatedDropdown).exists()).toBe(false);
+      expect(wrapper.find(GlDropdown).exists()).toBe(false);
     });
   });
 
@@ -262,7 +262,7 @@ describe('Insights component', () => {
 
     it('does not display dropdown', async () => {
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlDeprecatedDropdown).exists()).toBe(false);
+      expect(wrapper.find(GlDropdown).exists()).toBe(false);
     });
   });