Merge branch 'migrate-start-event-label' into 'master'

Migrate "Start event label" dropdown

See merge request gitlab-org/gitlab!43050

ee/app/assets/javascripts/analytics/cycle_analytics/components/labels_selector.vue

 <script>
 import Api from 'ee/api';
 import { debounce } from 'lodash';
-import {
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlIcon,
-  GlLoadingIcon,
-  GlSearchBoxByType,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
@@ -17,8 +11,8 @@ import { DATA_REFETCH_DELAY } from '../../shared/constants';
 export default {
   name: 'LabelsSelector',
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
     GlLoadingIcon,
     GlSearchBoxByType,
@@ -126,10 +120,10 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-dropdown class="w-100" toggle-class="overflow-hidden" :right="right">
+  <gl-dropdown class="gl-w-full" toggle-class="overflow-hidden" :right="right">
     <template #button-content>
       <slot name="label-dropdown-button">
-        <span v-if="selectedLabel">
+        <span v-if="selectedLabel" class="gl-new-dropdown-button-text">
           <span
             :style="{ backgroundColor: selectedLabel.color }"
             class="d-inline-block dropdown-label-box"
@@ -137,22 +131,21 @@ export default {
           </span>
           {{ labelTitle(selectedLabel) }}
         </span>
-        <span v-else>{{ __('Select a label') }}</span>
+        <span v-else class="gl-new-dropdown-button-text">{{ __('Select a label') }}</span>
+        <gl-icon class="dropdown-chevron" name="chevron-down" />
       </slot>
     </template>
     <template>
       <slot name="label-dropdown-list-header">
-        <gl-deprecated-dropdown-item
-          :active="!selectedLabelId.length"
-          @click.prevent="$emit('clearLabel')"
+        <gl-dropdown-item :active="!selectedLabelId.length" @click.prevent="$emit('clearLabel')"
           >{{ __('Select a label') }}
-        </gl-deprecated-dropdown-item>
+        </gl-dropdown-item>
       </slot>
       <div class="mb-3 px-3">
         <gl-search-box-by-type v-model.trim="searchTerm" class="mb-2" />
       </div>
       <div class="mb-3 px-3">
-        <gl-deprecated-dropdown-item
+        <gl-dropdown-item
           v-for="label in labels"
           :key="label.id"
           :class="{
@@ -170,7 +163,7 @@ export default {
           <span :style="{ backgroundColor: label.color }" class="d-inline-block dropdown-label-box">
           </span>
           {{ labelTitle(label) }}
-        </gl-deprecated-dropdown-item>
+        </gl-dropdown-item>
         <div v-show="loading" class="text-center">
           <gl-loading-icon :inline="true" size="md" />
         </div>
@@ -179,5 +172,5 @@ export default {
         </div>
       </div>
     </template>
-  </gl-deprecated-dropdown>
+  </gl-dropdown>
 </template>

ee/changelogs/unreleased/migrate-start-event-label.yml

+---
+title: Migrate Start event label dropdown
+merge_request: 43050
+author:
+type: other

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/labels_selector_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Value Stream Analytics LabelsSelector with no item selected will render the label selector 1`] = `
-"<gl-deprecated-dropdown-stub text=\\"\\" toggle-class=\\"overflow-hidden\\" class=\\"w-100\\">
-  <gl-deprecated-dropdown-item-stub active=\\"true\\">Select a label
-  </gl-deprecated-dropdown-item-stub>
+"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"overflow-hidden\\" class=\\"gl-w-full\\">
+  <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" active=\\"true\\">Select a label
+  </gl-dropdown-item-stub>
   <div class=\\"mb-3 px-3\\">
     <gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\" class=\\"mb-2\\"></gl-search-box-by-type-stub>
   </div>
   <div class=\\"mb-3 px-3\\">
-    <gl-deprecated-dropdown-item-stub class=\\"\\">
+    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" class=\\"\\">
       <!----> <span class=\\"d-inline-block dropdown-label-box\\" style=\\"background-color: rgb(255, 0, 0);\\"></span>
       roses
-    </gl-deprecated-dropdown-item-stub>
-    <gl-deprecated-dropdown-item-stub class=\\"\\">
+    </gl-dropdown-item-stub>
+    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" class=\\"\\">
       <!----> <span class=\\"d-inline-block dropdown-label-box\\" style=\\"background-color: rgb(255, 255, 255);\\"></span>
       some space
-    </gl-deprecated-dropdown-item-stub>
-    <gl-deprecated-dropdown-item-stub class=\\"\\">
+    </gl-dropdown-item-stub>
+    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" class=\\"\\">
       <!----> <span class=\\"d-inline-block dropdown-label-box\\" style=\\"background-color: rgb(0, 0, 255);\\"></span>
       violets
-    </gl-deprecated-dropdown-item-stub>
+    </gl-dropdown-item-stub>
     <div class=\\"text-center\\" style=\\"display: none;\\">
       <gl-loading-icon-stub label=\\"Loading\\" size=\\"md\\" color=\\"orange\\" inline=\\"true\\"></gl-loading-icon-stub>
     </div>
@@ -27,29 +27,29 @@ exports[`Value Stream Analytics LabelsSelector with no item selected will render
       No matching labels
     </div>
   </div>
-</gl-deprecated-dropdown-stub>"
+</gl-dropdown-stub>"
 `;
 
 exports[`Value Stream Analytics LabelsSelector with selectedLabelId set will render the label selector 1`] = `
-"<gl-deprecated-dropdown-stub text=\\"\\" toggle-class=\\"overflow-hidden\\" class=\\"w-100\\">
-  <gl-deprecated-dropdown-item-stub>Select a label
-  </gl-deprecated-dropdown-item-stub>
+"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"overflow-hidden\\" class=\\"gl-w-full\\">
+  <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\">Select a label
+  </gl-dropdown-item-stub>
   <div class=\\"mb-3 px-3\\">
     <gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\" class=\\"mb-2\\"></gl-search-box-by-type-stub>
   </div>
   <div class=\\"mb-3 px-3\\">
-    <gl-deprecated-dropdown-item-stub class=\\"\\">
+    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" class=\\"\\">
       <!----> <span class=\\"d-inline-block dropdown-label-box\\" style=\\"background-color: rgb(255, 0, 0);\\"></span>
       roses
-    </gl-deprecated-dropdown-item-stub>
-    <gl-deprecated-dropdown-item-stub class=\\"\\">
+    </gl-dropdown-item-stub>
+    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" class=\\"\\">
       <!----> <span class=\\"d-inline-block dropdown-label-box\\" style=\\"background-color: rgb(255, 255, 255);\\"></span>
       some space
-    </gl-deprecated-dropdown-item-stub>
-    <gl-deprecated-dropdown-item-stub active=\\"true\\" class=\\"\\">
+    </gl-dropdown-item-stub>
+    <gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" active=\\"true\\" class=\\"\\">
       <!----> <span class=\\"d-inline-block dropdown-label-box\\" style=\\"background-color: rgb(0, 0, 255);\\"></span>
       violets
-    </gl-deprecated-dropdown-item-stub>
+    </gl-dropdown-item-stub>
     <div class=\\"text-center\\" style=\\"display: none;\\">
       <gl-loading-icon-stub label=\\"Loading\\" size=\\"md\\" color=\\"orange\\" inline=\\"true\\"></gl-loading-icon-stub>
     </div>
@@ -57,5 +57,5 @@ exports[`Value Stream Analytics LabelsSelector with selectedLabelId set will ren
       No matching labels
     </div>
   </div>
-</gl-deprecated-dropdown-stub>"
+</gl-dropdown-stub>"
 `;

ee/spec/frontend/analytics/cycle_analytics/components/labels_selector_spec.js

@@ -11,7 +11,7 @@ import { groupLabels } from '../mock_data';
 const selectedLabel = groupLabels[groupLabels.length - 1];
 const findActiveItem = wrapper =>
   wrapper
-    .findAll('gl-deprecated-dropdown-item-stub')
+    .findAll('gl-dropdown-item-stub')
     .filter(d => d.attributes('active'))
     .at(0);
 

ee/spec/frontend/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem, GlSegmentedControl } from '@gitlab/ui';
+import { GlDropdownItem, GlSegmentedControl } from '@gitlab/ui';
 import TasksByTypeFilters from 'ee/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters.vue';
 import LabelsSelector from 'ee/analytics/cycle_analytics/components/labels_selector.vue';
 import {
@@ -20,7 +20,7 @@ const selectedLabelIds = [groupLabels[0].id];
 
 const findSubjectFilters = ctx => ctx.find(GlSegmentedControl);
 const findSelectedSubjectFilters = ctx => findSubjectFilters(ctx).attributes('checked');
-const findDropdownLabels = ctx => ctx.find(LabelsSelector).findAll(GlDeprecatedDropdownItem);
+const findDropdownLabels = ctx => ctx.find(LabelsSelector).findAll(GlDropdownItem);
 
 const selectLabelAtIndex = (ctx, index) => {
   findDropdownLabels(ctx)