Merge branch 'migrate-tasks-by-type' into 'master'

Migrate tasks by type dropdown divider

See merge request gitlab-org/gitlab!44652

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

 <script>
 import Api from 'ee/api';
 import { debounce } from 'lodash';
-import { GlDropdown, GlDropdownItem, GlIcon, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownSectionHeader,
+  GlIcon,
+  GlLoadingIcon,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
@@ -13,6 +20,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
+    GlDropdownSectionHeader,
     GlIcon,
     GlLoadingIcon,
     GlSearchBoxByType,
@@ -120,7 +128,7 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown class="gl-w-full" toggle-class="overflow-hidden" :right="right">
+  <gl-dropdown class="gl-w-full" toggle-class="gl-overflow-hidden" :right="right">
     <template #button-content>
       <slot name="label-dropdown-button">
         <span v-if="selectedLabel" class="gl-new-dropdown-button-text">
@@ -135,11 +143,10 @@ export default {
         <gl-icon class="dropdown-chevron" name="chevron-down" />
       </slot>
     </template>
+
     <template>
       <slot name="label-dropdown-list-header">
-        <gl-dropdown-item :active="!selectedLabelId.length" @click.prevent="$emit('clearLabel')"
-          >{{ __('Select a label') }}
-        </gl-dropdown-item>
+        <gl-dropdown-section-header>{{ __('Select a label') }} </gl-dropdown-section-header>
       </slot>
       <div class="mb-3 px-3">
         <gl-search-box-by-type v-model.trim="searchTerm" class="mb-2" />

ee/app/assets/javascripts/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters.vue

 <script>
-import { GlDeprecatedDropdownDivider, GlSegmentedControl, GlIcon } from '@gitlab/ui';
+import { GlDropdownDivider, GlSegmentedControl, GlIcon } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { removeFlash } from '../../utils';
@@ -15,7 +15,7 @@ export default {
   name: 'TasksByTypeFilters',
   components: {
     GlSegmentedControl,
-    GlDeprecatedDropdownDivider,
+    GlDropdownDivider,
     GlIcon,
     LabelsSelector,
   },
@@ -126,7 +126,7 @@ export default {
               "
             />
           </div>
-          <gl-deprecated-dropdown-divider />
+          <gl-dropdown-divider />
           <div class="mb-3 px-3">
             <p class="font-weight-bold text-left my-2">
               {{ s__('CycleAnalytics|Select labels') }}

ee/spec/features/groups/analytics/cycle_analytics/customizable_cycle_analytics_spec.rb

@@ -74,7 +74,7 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
     end
   end
 
-  def select_dropdown_label(field, index = 2)
+  def select_dropdown_label(field, index = 1)
     page.find("[name=#{field}] .dropdown-menu").all('.dropdown-item')[index].click
   end
 
@@ -263,10 +263,10 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
           context 'with all required fields set' do
             before do
               wait_for_labels(start_field)
-              select_dropdown_label start_field, 1
+              select_dropdown_label start_field, 0
 
               wait_for_labels(end_field)
-              select_dropdown_label end_field, 2
+              select_dropdown_label end_field, 1
             end
 
             include_examples 'submits custom stage form successfully', custom_stage_with_labels_name

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-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>
+"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"gl-overflow-hidden\\" class=\\"gl-w-full\\">
+  <gl-dropdown-section-header-stub>Select a label </gl-dropdown-section-header-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>
@@ -31,9 +30,8 @@ exports[`Value Stream Analytics LabelsSelector with no item selected will render
 `;
 
 exports[`Value Stream Analytics LabelsSelector with selectedLabelId set will render the label selector 1`] = `
-"<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>
+"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"gl-overflow-hidden\\" class=\\"gl-w-full\\">
+  <gl-dropdown-section-header-stub>Select a label </gl-dropdown-section-header-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>

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

@@ -264,7 +264,7 @@ describe('CustomStageForm', () => {
             wrapper
               .find(sel.startEventLabel)
               .findAll('.dropdown-item')
-              .at(1) // item at index 0 is 'select a label'
+              .at(0)
               .trigger('click');
             return wrapper.vm.$nextTick();
           })
@@ -454,7 +454,7 @@ describe('CustomStageForm', () => {
             wrapper
               .find(sel.endEventLabel)
               .findAll('.dropdown-item')
-              .at(2) // item at index 0 is 'select a label'
+              .at(1)
               .trigger('click');
 
             return wrapper.vm.$nextTick();

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

@@ -2,6 +2,7 @@ import Vuex from 'vuex';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import { GlDropdownSectionHeader } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import createStore from 'ee/analytics/cycle_analytics/store';
 import * as getters from 'ee/analytics/cycle_analytics/store/getters';
@@ -70,10 +71,10 @@ describe('Value Stream Analytics LabelsSelector', () => {
     });
 
     it('will render with the default option selected', () => {
-      const activeItem = findActiveItem(wrapper);
+      const sectionHeader = wrapper.find(GlDropdownSectionHeader);
 
-      expect(activeItem.exists()).toBe(true);
-      expect(activeItem.text()).toEqual('Select a label');
+      expect(sectionHeader.exists()).toBe(true);
+      expect(sectionHeader.text()).toEqual('Select a label');
     });
 
     describe('with a failed request', () => {
@@ -102,7 +103,7 @@ describe('Value Stream Analytics LabelsSelector', () => {
       it('will emit the "selectLabel" event', () => {
         expect(wrapper.emitted('selectLabel')).toBeUndefined();
 
-        const elem = wrapper.findAll('.dropdown-item').at(2);
+        const elem = wrapper.findAll('.dropdown-item').at(1);
         elem.trigger('click');
 
         return wrapper.vm.$nextTick().then(() => {
@@ -110,17 +111,6 @@ describe('Value Stream Analytics LabelsSelector', () => {
           expect(wrapper.emitted('selectLabel')[0]).toContain(groupLabels[1].id);
         });
       });
-
-      it('will emit the "clearLabel" event if it is the default item', () => {
-        expect(wrapper.emitted('clearLabel')).toBeUndefined();
-
-        const elem = wrapper.findAll('.dropdown-item').at(0);
-        elem.trigger('click');
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.emitted('clearLabel').length > 0).toBe(true);
-        });
-      });
     });
   });