Merge branch '213717-migrate-depreacted-dashboard-dropdown' into 'master'

Migrate dashboard dropdown to the new dropdown component

Closes #213717

See merge request gitlab-org/gitlab!38670

app/assets/javascripts/monitoring/components/dashboards_dropdown.vue

@@ -2,10 +2,10 @@
 import { mapState, mapGetters } from 'vuex';
 import {
   GlIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownDivider,
+  GlNewDropdown,
+  GlNewDropdownItem,
+  GlNewDropdownHeader,
+  GlNewDropdownDivider,
   GlSearchBoxByType,
   GlModalDirective,
 } from '@gitlab/ui';
@@ -17,10 +17,10 @@ const events = {
 export default {
   components: {
     GlIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownDivider,
+    GlNewDropdown,
+    GlNewDropdownItem,
+    GlNewDropdownHeader,
+    GlNewDropdownDivider,
     GlSearchBoxByType,
   },
   directives: {
@@ -73,16 +73,13 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-dropdown
+  <gl-new-dropdown
     toggle-class="dropdown-menu-toggle"
     menu-class="monitor-dashboard-dropdown-menu"
     :text="selectedDashboardText"
   >
     <div class="d-flex flex-column overflow-hidden">
-      <gl-deprecated-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
-        __('Dashboard')
-      }}</gl-deprecated-dropdown-header>
-      <gl-deprecated-dropdown-divider />
+      <gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header>
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"
@@ -90,33 +87,36 @@ export default {
       />
 
       <div class="flex-fill overflow-auto">
-        <gl-deprecated-dropdown-item
+        <gl-new-dropdown-item
           v-for="dashboard in starredDashboards"
           :key="dashboard.path"
-          :active="dashboard.path === selectedDashboardPath"
-          active-class="is-active"
+          :is-check-item="true"
+          :is-checked="dashboard.path === selectedDashboardPath"
           @click="selectDashboard(dashboard)"
         >
-          <div class="d-flex">
+          <div class="gl-display-flex">
+            <div class="gl-flex-grow-1 gl-min-w-0">
+              <div class="gl-word-break-all">
                 {{ dashboardDisplayName(dashboard) }}
-            <gl-icon class="text-muted ml-auto" name="star" />
               </div>
-        </gl-deprecated-dropdown-item>
-
-        <gl-deprecated-dropdown-divider
+            </div>
+            <gl-icon class="text-muted gl-flex-shrink-0" name="star" />
+          </div>
+        </gl-new-dropdown-item>
+        <gl-new-dropdown-divider
           v-if="starredDashboards.length && nonStarredDashboards.length"
           ref="starredListDivider"
         />
 
-        <gl-deprecated-dropdown-item
+        <gl-new-dropdown-item
           v-for="dashboard in nonStarredDashboards"
           :key="dashboard.path"
-          :active="dashboard.path === selectedDashboardPath"
-          active-class="is-active"
+          :is-check-item="true"
+          :is-checked="dashboard.path === selectedDashboardPath"
           @click="selectDashboard(dashboard)"
         >
           {{ dashboardDisplayName(dashboard) }}
-        </gl-deprecated-dropdown-item>
+        </gl-new-dropdown-item>
       </div>
 
       <div
@@ -127,5 +127,5 @@ export default {
         {{ __('No matching results') }}
       </div>
     </div>
-  </gl-deprecated-dropdown>
+  </gl-new-dropdown>
 </template>

app/assets/stylesheets/pages/prometheus.scss

@@ -63,8 +63,7 @@
 }
 
 .prometheus-graphs-header {
-  .monitor-environment-dropdown-header header,
-  .monitor-dashboard-dropdown-header header {
+  .monitor-environment-dropdown-header header {
     font-size: $gl-font-size;
   }
 

spec/frontend/monitoring/components/dashboards_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlNewDropdownItem, GlIcon } from '@gitlab/ui';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 
@@ -22,7 +22,7 @@ describe('DashboardsDropdown', () => {
       },
     };
 
-    return shallowMount(DashboardsDropdown, {
+    wrapper = shallowMount(DashboardsDropdown, {
       propsData: {
         ...props,
         defaultBranch,
@@ -33,8 +33,8 @@ describe('DashboardsDropdown', () => {
     });
   }
 
-  const findItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
-  const findItemAt = i => wrapper.findAll(GlDeprecatedDropdownItem).at(i);
+  const findItems = () => wrapper.findAll(GlNewDropdownItem);
+  const findItemAt = i => wrapper.findAll(GlNewDropdownItem).at(i);
   const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
   const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
   const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });
@@ -47,7 +47,7 @@ describe('DashboardsDropdown', () => {
 
   describe('when it receives dashboards data', () => {
     beforeEach(() => {
-      wrapper = createComponent();
+      createComponent();
     });
 
     it('displays an item for each dashboard', () => {
@@ -91,10 +91,22 @@ describe('DashboardsDropdown', () => {
     });
   });
 
+  describe('when a dashboard is selected', () => {
+    beforeEach(() => {
+      [mockSelectedDashboard] = starredDashboards;
+      createComponent();
+    });
+
+    it('dashboard item is selected', () => {
+      expect(findItemAt(0).props('isChecked')).toBe(true);
+      expect(findItemAt(1).props('isChecked')).toBe(false);
+    });
+  });
+
   describe('when the dashboard is missing a display name', () => {
     beforeEach(() => {
       mockDashboards = dashboardGitResponse.map(d => ({ ...d, display_name: undefined }));
-      wrapper = createComponent();
+      createComponent();
     });
 
     it('displays items with the dashboard path, with starred dashboards first', () => {
@@ -107,7 +119,7 @@ describe('DashboardsDropdown', () => {
   describe('when it receives starred dashboards', () => {
     beforeEach(() => {
       mockDashboards = starredDashboards;
-      wrapper = createComponent();
+      createComponent();
     });
 
     it('displays an item for each dashboard', () => {
@@ -128,7 +140,7 @@ describe('DashboardsDropdown', () => {
   describe('when it receives only not-starred dashboards', () => {
     beforeEach(() => {
       mockDashboards = notStarredDashboards;
-      wrapper = createComponent();
+      createComponent();
     });
 
     it('displays an item for each dashboard', () => {
@@ -147,7 +159,7 @@ describe('DashboardsDropdown', () => {
 
   describe('when a dashboard gets selected by the user', () => {
     beforeEach(() => {
-      wrapper = createComponent();
+      createComponent();
       findItemAt(1).vm.$emit('click');
     });