Update dashboard deprecated environment dropdowns

As part of our efforts to keep our components up to date,
update environment dropdowns to the GlNewDropdown component.

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

@@ -3,11 +3,10 @@ import { debounce } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import {
   GlButton,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownDivider,
+  GlNewDropdown,
   GlLoadingIcon,
+  GlNewDropdownItem,
+  GlNewDropdownHeader,
   GlSearchBoxByType,
   GlModalDirective,
   GlTooltipDirective,
@@ -29,11 +28,11 @@ export default {
   components: {
     Icon,
     GlButton,
-    GlDeprecatedDropdown,
+    GlNewDropdown,
     GlLoadingIcon,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownDivider,
+    GlNewDropdownItem,
+    GlNewDropdownHeader,
+
     GlSearchBoxByType,
 
     DateTimePicker,
@@ -112,6 +111,9 @@ export default {
     showRearrangePanelsBtn() {
       return !this.shouldShowEmptyState && this.rearrangePanelsAvailable;
     },
+    environmentDropdownText() {
+      return this.currentEnvironmentName ?? '';
+    },
     displayUtc() {
       return this.dashboardTimezone === timezones.UTC;
     },
@@ -176,31 +178,30 @@ export default {
     <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
 
     <div class="mb-2 pr-2 d-flex d-sm-block">
-      <gl-deprecated-dropdown
+      <gl-new-dropdown
         id="monitor-environments-dropdown"
         ref="monitorEnvironmentsDropdown"
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
         toggle-class="dropdown-menu-toggle"
         menu-class="monitor-environment-dropdown-menu"
-        :text="currentEnvironmentName"
+        :text="environmentDropdownText"
       >
         <div class="d-flex flex-column overflow-hidden">
-          <gl-deprecated-dropdown-header class="monitor-environment-dropdown-header text-center">
-            {{ __('Environment') }}
-          </gl-deprecated-dropdown-header>
-          <gl-deprecated-dropdown-divider />
+          <gl-new-dropdown-header>{{ __('Environment') }}</gl-new-dropdown-header>
           <gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" />
+
           <gl-loading-icon v-if="environmentsLoading" :inline="true" />
           <div v-else class="flex-fill overflow-auto">
-            <gl-deprecated-dropdown-item
+            <gl-new-dropdown-item
               v-for="environment in filteredEnvironments"
               :key="environment.id"
-              :active="environment.name === currentEnvironmentName"
-              active-class="is-active"
+              :is-check-item="true"
+              :is-checked="environment.name === currentEnvironmentName"
               :href="getEnvironmentPath(environment.id)"
-              >{{ environment.name }}</gl-deprecated-dropdown-item
             >
+              {{ environment.name }}
+            </gl-new-dropdown-item>
           </div>
           <div
             v-show="shouldShowEnvironmentsDropdownNoMatchedMsg"
@@ -210,7 +211,7 @@ export default {
             {{ __('No matching results') }}
           </div>
         </div>
-      </gl-deprecated-dropdown>
+      </gl-new-dropdown>
     </div>
 
     <div class="mb-2 pr-2 d-flex d-sm-block">

app/assets/stylesheets/pages/prometheus.scss

@@ -63,10 +63,6 @@
 }
 
 .prometheus-graphs-header {
-  .monitor-environment-dropdown-header header {
-    font-size: $gl-font-size;
-  }
-
   .monitor-environment-dropdown-menu,
   .monitor-dashboard-dropdown-menu {
     &.show {

changelogs/unreleased/213717-update-environments-dropdowns.yml

+---
+title: Improve environment dropdowns in operations metrics dashboard and highlight
+  selected environment
+merge_request: 39303
+author:
+type: changed

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -32,26 +32,24 @@ exports[`Dashboard template matches the default snapshot 1`] = `
     <div
       class="mb-2 pr-2 d-flex d-sm-block"
     >
-      <gl-deprecated-dropdown-stub
+      <gl-new-dropdown-stub
+        category="tertiary"
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
+        headertext=""
         id="monitor-environments-dropdown"
         menu-class="monitor-environment-dropdown-menu"
+        size="medium"
         text="production"
-        toggle-class="dropdown-menu-toggle"
+        toggleclass="dropdown-menu-toggle"
+        variant="default"
       >
         <div
           class="d-flex flex-column overflow-hidden"
         >
-          <gl-deprecated-dropdown-header-stub
-            class="monitor-environment-dropdown-header text-center"
-          >
-            
-          Environment
-        
-          </gl-deprecated-dropdown-header-stub>
-           
-          <gl-deprecated-dropdown-divider-stub />
+          <gl-new-dropdown-header-stub>
+            Environment
+          </gl-new-dropdown-header-stub>
            
           <gl-search-box-by-type-stub
             class="m-2"
@@ -71,7 +69,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         
           </div>
         </div>
-      </gl-deprecated-dropdown-stub>
+      </gl-new-dropdown-stub>
     </div>
      
     <div

spec/frontend/monitoring/components/dashboard_header_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
-import { GlDeprecatedDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlNewDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import RefreshButton from '~/monitoring/components/refresh_button.vue';
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
@@ -31,7 +31,7 @@ describe('Dashboard header', () => {
   const findDashboardDropdown = () => wrapper.find(DashboardsDropdown);
 
   const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
-  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDeprecatedDropdownItem);
+  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlNewDropdownItem);
   const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType);
   const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
   const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);
@@ -116,7 +116,7 @@ describe('Dashboard header', () => {
       });
 
       it('there are no environments listed', () => {
-        expect(findEnvsDropdownItems().length).toBe(0);
+        expect(findEnvsDropdownItems()).toHaveLength(0);
       });
     });
 
@@ -145,12 +145,17 @@ describe('Dashboard header', () => {
         });
       });
 
-      it('renders the environments dropdown with an active element', () => {
-        const selectedItems = findEnvsDropdownItems().filter(
-          item => item.attributes('active') === 'true',
-        );
+      it('environments dropdown items can be checked', () => {
+        const items = findEnvsDropdownItems();
+        const checkItems = findEnvsDropdownItems().filter(item => item.props('isCheckItem'));
 
-        expect(selectedItems.length).toBe(1);
+        expect(items).toHaveLength(checkItems.length);
+      });
+
+      it('checks the currently selected environment', () => {
+        const selectedItems = findEnvsDropdownItems().filter(item => item.props('isChecked'));
+
+        expect(selectedItems).toHaveLength(1);
         expect(selectedItems.at(0).text()).toBe(currentEnvironmentName);
       });
 
@@ -160,7 +165,7 @@ describe('Dashboard header', () => {
         setSearchTerm(searchTerm);
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(findEnvsDropdownItems().length).toBe(resultEnvs.length);
+          expect(findEnvsDropdownItems()).toHaveLength(resultEnvs.length);
         });
       });
 
@@ -169,7 +174,7 @@ describe('Dashboard header', () => {
         setSearchTerm(searchTerm);
 
         return wrapper.vm.$nextTick(() => {
-          expect(findEnvsDropdownItems().length).toBe(environmentData.length);
+          expect(findEnvsDropdownItems()).toHaveLength(environmentData.length);
         });
       });