Add latest changes from gitlab-org/gitlab@master

2 files changed, 18 insertions, 17 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 1bb82e1d8e6..0640faae8b7 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlModal, GlModalDirective, GlSegmentedControl } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui';
 
 import { __, s__ } from '~/locale';
 import { sortOrders, sortOrderOptions } from '../constants';
@@ -9,8 +9,9 @@ export default {
   components: {
     RequestWarning,
     GlButton,
+    GlDropdown,
+    GlDropdownItem,
     GlModal,
-    GlSegmentedControl,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -156,13 +157,19 @@ export default {
             </div>
           </div>
         </div>
-        <gl-segmented-control
+        <gl-dropdown
           v-if="displaySortOrder"
+          :text="$options.sortOrderOptions[sortOrder]"
+          right
           data-testid="performance-bar-sort-order"
-          :options="$options.sortOrderOptions"
-          :checked="sortOrder"
-          @input="changeSortOrder"
-        />
+        >
+          <gl-dropdown-item
+            v-for="option in Object.keys($options.sortOrderOptions)"
+            :key="option"
+            @click="changeSortOrder(option)"
+            >{{ $options.sortOrderOptions[option] }}</gl-dropdown-item
+          >
+        </gl-dropdown>
       </div>
       <hr />
       <table class="table gl-table">
diff --git a/app/assets/javascripts/performance_bar/constants.js b/app/assets/javascripts/performance_bar/constants.js
index 9659383edd9..09745797424 100644
--- a/app/assets/javascripts/performance_bar/constants.js
+++ b/app/assets/javascripts/performance_bar/constants.js
@@ -5,13 +5,7 @@ export const sortOrders = {
   CHRONOLOGICAL: 'chronological',
 };
 
-export const sortOrderOptions = [
-  {
-    value: sortOrders.DURATION,
-    text: s__('PerformanceBar|Sort by duration'),
-  },
-  {
-    value: sortOrders.CHRONOLOGICAL,
-    text: s__('PerformanceBar|Sort chronologically'),
-  },
-];
+export const sortOrderOptions = {
+  [sortOrders.DURATION]: s__('PerformanceBar|Sort by duration'),
+  [sortOrders.CHRONOLOGICAL]: s__('PerformanceBar|Sort chronologically'),
+};