Merge branch '233590-migrate-dropdown-on-productivity-analytics-page' into 'master'

Migrating deprecated dropdown buttons on the productivity analytics page

Closes #233590

See merge request gitlab-org/gitlab!42480

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -3,8 +3,8 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import {
   GlEmptyState,
   GlLoadingIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownItem,
   GlButton,
   GlTooltipDirective,
   GlIcon,
@@ -24,8 +24,8 @@ export default {
   components: {
     GlEmptyState,
     GlLoadingIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlColumnChart,
     GlButton,
     GlIcon,
@@ -300,12 +300,12 @@ export default {
             >
               <strong class="mr-2">{{ __('Sort by') }}</strong>
               <div class="d-flex">
-                <gl-deprecated-dropdown
+                <gl-dropdown
                   class="mr-2 flex-grow"
                   toggle-class="dropdown-menu-toggle"
                   :text="sortFieldDropdownLabel"
                 >
-                  <gl-deprecated-dropdown-item
+                  <gl-dropdown-item
                     v-for="metric in tableSortOptions"
                     :key="metric.key"
                     active-class="is-active"
@@ -322,8 +322,8 @@ export default {
                       />
                       {{ metric.label }}
                     </span>
-                  </gl-deprecated-dropdown-item>
-                </gl-deprecated-dropdown>
+                  </gl-dropdown-item>
+                </gl-dropdown>
                 <gl-button v-gl-tooltip.hover :title="sortTooltipTitle" @click="toggleSortOrder">
                   <gl-icon :name="sortIcon" />
                 </gl-button>

ee/app/assets/javascripts/analytics/productivity_analytics/components/metric_chart.vue

 <script>
 import { isEmpty } from 'lodash';
-import {
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlLoadingIcon,
-  GlAlert,
-  GlIcon,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlAlert, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 export default {
   name: 'MetricChart',
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlLoadingIcon,
     GlAlert,
     GlIcon,
@@ -96,14 +90,14 @@ export default {
     <template v-else>
       <gl-alert v-if="infoMessage" :dismissible="false">{{ infoMessage }}</gl-alert>
       <template v-else>
-        <gl-deprecated-dropdown
+        <gl-dropdown
           v-if="hasMetricTypes"
           class="mb-4 metric-dropdown"
           toggle-class="dropdown-menu-toggle w-100"
           menu-class="w-100 mw-100"
           :text="metricDropdownLabel"
         >
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-for="metric in metricTypes"
             :key="metric.key"
             active-class="is-active"
@@ -122,8 +116,8 @@ export default {
               />
               {{ metric.label }}
             </span>
-          </gl-deprecated-dropdown-item>
-        </gl-deprecated-dropdown>
+          </gl-dropdown-item>
+        </gl-dropdown>
         <p v-if="description" class="text-muted">{{ description }}</p>
         <div ref="chart">
           <slot v-if="hasChartData"></slot>

ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import MergeRequestTableRow from './mr_table_row.vue';
 import Pagination from '~/vue_shared/components/pagination_links.vue';
 
 export default {
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
     MergeRequestTableRow,
     Pagination,
@@ -64,13 +64,13 @@ export default {
             <div class="d-flex">
               <span class="d-none d-md-flex metric-col">{{ __('Time to merge') }}</span>
 
-              <gl-deprecated-dropdown
+              <gl-dropdown
                 class="w-100 metric-col"
                 toggle-class="dropdown-menu-toggle w-100"
                 menu-class="w-100 mw-100"
                 :text="metricDropdownLabel"
               >
-                <gl-deprecated-dropdown-item
+                <gl-dropdown-item
                   v-for="option in columnOptions"
                   :key="option.key"
                   active-class="is-active"
@@ -87,8 +87,8 @@ export default {
                     />
                     {{ option.label }}
                   </span>
-                </gl-deprecated-dropdown-item>
-              </gl-deprecated-dropdown>
+                </gl-dropdown-item>
+              </gl-dropdown>
             </div>
           </div>
         </div>

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -22,15 +22,24 @@ exports[`MetricChart component template when isLoading is false and chartData is
 <div>
   <!---->
    
-  <gl-deprecated-dropdown-stub
+  <gl-dropdown-stub
+    category="tertiary"
     class="mb-4 metric-dropdown"
+    headertext=""
     menu-class="w-100 mw-100"
+    size="medium"
     text="Please select a metric"
-    toggle-class="dropdown-menu-toggle w-100"
+    toggleclass="dropdown-menu-toggle w-100"
+    variant="default"
   >
-    <gl-deprecated-dropdown-item-stub
+    <gl-dropdown-item-stub
       active-class="is-active"
+      avatarurl=""
       class="w-100"
+      iconcolor=""
+      iconname=""
+      iconrightname=""
+      secondarytext=""
     >
       <span
         class="d-flex"
@@ -46,10 +55,15 @@ exports[`MetricChart component template when isLoading is false and chartData is
             Time from last commit to merge
           
       </span>
-    </gl-deprecated-dropdown-item-stub>
-    <gl-deprecated-dropdown-item-stub
+    </gl-dropdown-item-stub>
+    <gl-dropdown-item-stub
       active-class="is-active"
+      avatarurl=""
       class="w-100"
+      iconcolor=""
+      iconname=""
+      iconrightname=""
+      secondarytext=""
     >
       <span
         class="d-flex"
@@ -65,8 +79,8 @@ exports[`MetricChart component template when isLoading is false and chartData is
             Time from first comment to last commit
           
       </span>
-    </gl-deprecated-dropdown-item-stub>
-  </gl-deprecated-dropdown-stub>
+    </gl-dropdown-item-stub>
+  </gl-dropdown-stub>
    
   <!---->
    

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap

@@ -36,15 +36,24 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
               Time to merge
             </span>
              
-            <gl-deprecated-dropdown-stub
+            <gl-dropdown-stub
+              category="tertiary"
               class="w-100 metric-col"
+              headertext=""
               menu-class="w-100 mw-100"
+              size="medium"
               text="Time from first comment to last commit"
-              toggle-class="dropdown-menu-toggle w-100"
+              toggleclass="dropdown-menu-toggle w-100"
+              variant="default"
             >
-              <gl-deprecated-dropdown-item-stub
+              <gl-dropdown-item-stub
                 active-class="is-active"
+                avatarurl=""
                 class="w-100"
+                iconcolor=""
+                iconname=""
+                iconrightname=""
+                secondarytext=""
               >
                 <span
                   class="d-flex"
@@ -58,10 +67,15 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   Time from first commit until first comment
                 
                 </span>
-              </gl-deprecated-dropdown-item-stub>
-              <gl-deprecated-dropdown-item-stub
+              </gl-dropdown-item-stub>
+              <gl-dropdown-item-stub
                 active-class="is-active"
+                avatarurl=""
                 class="w-100"
+                iconcolor=""
+                iconname=""
+                iconrightname=""
+                secondarytext=""
               >
                 <span
                   class="d-flex"
@@ -75,10 +89,15 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   Time from first comment to last commit
                 
                 </span>
-              </gl-deprecated-dropdown-item-stub>
-              <gl-deprecated-dropdown-item-stub
+              </gl-dropdown-item-stub>
+              <gl-dropdown-item-stub
                 active-class="is-active"
+                avatarurl=""
                 class="w-100"
+                iconcolor=""
+                iconname=""
+                iconrightname=""
+                secondarytext=""
               >
                 <span
                   class="d-flex"
@@ -92,8 +111,8 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   Time from last commit to merge
                 
                 </span>
-              </gl-deprecated-dropdown-item-stub>
-            </gl-deprecated-dropdown-stub>
+              </gl-dropdown-item-stub>
+            </gl-dropdown-stub>
           </div>
         </div>
       </div>

ee/spec/frontend/analytics/productivity_analytics/components/app_spec.js

@@ -8,13 +8,7 @@ import MergeRequestTable from 'ee/analytics/productivity_analytics/components/mr
 import { getStoreConfig } from 'ee/analytics/productivity_analytics/store';
 import { chartKeys } from 'ee/analytics/productivity_analytics/constants';
 import { TEST_HOST } from 'helpers/test_constants';
-import {
-  GlEmptyState,
-  GlLoadingIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlButton,
-} from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import UrlSyncMixin from 'ee/analytics/shared/mixins/url_sync_mixin';
 import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
@@ -107,7 +101,7 @@ describe('ProductivityApp component', () => {
   const findCommitBasedMetricChart = () => wrapper.find({ ref: 'commitBasedChart' });
   const findScatterplotMetricChart = () => wrapper.find({ ref: 'scatterplot' });
   const findMrTableSortSection = () => wrapper.find('.js-mr-table-sort');
-  const findSortFieldDropdown = () => findMrTableSortSection().find(GlDeprecatedDropdown);
+  const findSortFieldDropdown = () => findMrTableSortSection().find(GlDropdown);
   const findSortOrderToggle = () => findMrTableSortSection().find(GlButton);
   const findMrTableSection = () => wrapper.find('.js-mr-table');
   const findMrTable = () => findMrTableSection().find(MergeRequestTable);
@@ -459,7 +453,7 @@ describe('ProductivityApp component', () => {
 
                     it('should change the sort field', () => {
                       findSortFieldDropdown()
-                        .findAll(GlDeprecatedDropdownItem)
+                        .findAll(GlDropdownItem)
                         .at(0)
                         .vm.$emit('click');
 

ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
-import {
-  GlLoadingIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlAlert,
-  GlIcon,
-} from '@gitlab/ui';
+import { GlLoadingIcon, GlDropdown, GlDropdownItem, GlAlert, GlIcon } from '@gitlab/ui';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 describe('MetricChart component', () => {
@@ -44,8 +38,8 @@ describe('MetricChart component', () => {
 
   const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
   const findInfoMessage = () => wrapper.find(GlAlert);
-  const findMetricDropdown = () => wrapper.find(GlDeprecatedDropdown);
-  const findMetricDropdownItems = () => findMetricDropdown().findAll(GlDeprecatedDropdownItem);
+  const findMetricDropdown = () => wrapper.find(GlDropdown);
+  const findMetricDropdownItems = () => findMetricDropdown().findAll(GlDropdownItem);
   const findChartSlot = () => wrapper.find({ ref: 'chart' });
 
   describe('template', () => {

ee/spec/frontend/analytics/productivity_analytics/components/mr_table_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MergeRequestTable from 'ee/analytics/productivity_analytics/components/mr_table.vue';
 import MergeRequestTableRow from 'ee/analytics/productivity_analytics/components/mr_table_row.vue';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { mockMergeRequests } from '../mock_data';
 
 describe('MergeRequestTable component', () => {
@@ -27,8 +27,8 @@ describe('MergeRequestTable component', () => {
 
   const findMergeRequestTableRows = () => wrapper.findAll(MergeRequestTableRow);
   const findTableHeader = () => wrapper.find('.table-row-header');
-  const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
-  const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
   const findFirstDropdownItem = () => findDropdownItems().at(0);
 
   beforeEach(() => {