Add latest changes from gitlab-org/gitlab@master

1 files changed, 27 insertions, 27 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
index 040fce1bec2..aed27b5ea51 100644
--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/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">
-            {{ dashboardDisplayName(dashboard) }}
-            <gl-icon class="text-muted ml-auto" name="star" />
+          <div class="gl-display-flex">
+            <div class="gl-flex-grow-1 gl-min-w-0">
+              <div class="gl-word-break-all">
+                {{ dashboardDisplayName(dashboard) }}
+              </div>
+            </div>
+            <gl-icon class="text-muted gl-flex-shrink-0" name="star" />
           </div>
-        </gl-deprecated-dropdown-item>
-
-        <gl-deprecated-dropdown-divider
+        </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>