Merge branch 'eread/migrate-vsa-stage-dropdown-to-new-dropdown' into 'master'

Migrate vsa stage dropdown to new dropdown

See merge request gitlab-org/gitlab!43505

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

 <script>
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { approximateDuration } from '~/lib/utils/datetime_utility';
 import StageCardListItem from './stage_card_list_item.vue';
@@ -17,7 +17,9 @@ export default {
   name: 'StageNavItem',
   components: {
     StageCardListItem,
-    GlButton,
+    GlIcon,
+    GlDropdown,
+    GlDropdownItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -68,7 +70,7 @@ export default {
       return approximateDuration(this.value);
     },
     openMenuClasses() {
-      return this.isHover ? 'd-flex justify-content-end' : '';
+      return this.isHover ? 'gl-display-flex gl-justify-content-end' : '';
     },
     error() {
       return ERROR_NAV_ITEM_CONTENT[this.errorMessage] || ERROR_NAV_ITEM_CONTENT.fallback;
@@ -114,7 +116,7 @@ export default {
     @mouseover="handleHover(true)"
     @mouseleave="handleHover()"
   >
-    <stage-card-list-item :is-active="isActive" class="d-flex justify-space-between">
+    <stage-card-list-item :is-active="isActive" class="gl-display-flex gl-justify-space-between">
       <div
         ref="title"
         class="stage-nav-item-cell stage-name text-truncate w-50 pr-2"
@@ -124,53 +126,52 @@ export default {
           title
         }}</span>
       </div>
-      <div class="stage-nav-item-cell w-50 d-flex justify-content-between">
+      <div class="stage-nav-item-cell w-50 gl-display-flex gl-justify-content-between">
         <div ref="median" class="stage-median w-75 align-items-start">
           <span v-if="hasValue">{{ median }}</span>
           <span v-else v-gl-tooltip="{ title: errorMessage }" class="stage-empty">{{ error }}</span>
         </div>
         <div v-show="isHover" ref="dropdown" :class="[openMenuClasses]" class="dropdown w-25">
-          <gl-button
-            v-gl-tooltip
-            category="tertiary"
-            icon="ellipsis_v"
-            :title="__('More actions')"
-            class="more-actions-toggle btn btn-transparent p-0"
-            data-toggle="dropdown"
-          />
-          <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
+          <gl-dropdown
+            toggle-class="gl-p-0! gl-bg-transparent! gl-shadow-none!"
+            data-testid="more-actions-toggle"
+          >
+            <template #button-content>
+              <span
+                v-gl-tooltip
+                category="tertiary"
+                :title="__('More actions')"
+                data-toggle="dropdown"
+              >
+                <gl-icon name="ellipsis_v" />
+              </span>
+            </template>
             <template v-if="isDefaultStage">
-              <li>
-                <gl-button
-                  category="tertiary"
-                  data-testid="hide-btn"
-                  @click="handleDropdownAction('hide', $event)"
-                >
-                  {{ __('Hide stage') }}
-                </gl-button>
-              </li>
+              <gl-dropdown-item
+                category="tertiary"
+                data-testid="hide-btn"
+                @click="handleDropdownAction('hide', $event)"
+              >
+                {{ __('Hide stage') }}
+              </gl-dropdown-item>
             </template>
             <template v-else>
-              <li>
-                <gl-button
-                  category="tertiary"
-                  data-testid="edit-btn"
-                  @click="handleDropdownAction('edit', $event)"
-                >
-                  {{ __('Edit stage') }}
-                </gl-button>
-              </li>
-              <li>
-                <gl-button
-                  category="tertiary"
-                  data-testid="remove-btn"
-                  @click="handleDropdownAction('remove', $event)"
-                >
-                  {{ __('Remove stage') }}
-                </gl-button>
-              </li>
+              <gl-dropdown-item
+                category="tertiary"
+                data-testid="edit-btn"
+                @click="handleDropdownAction('edit', $event)"
+              >
+                {{ __('Edit stage') }}
+              </gl-dropdown-item>
+              <gl-dropdown-item
+                category="tertiary"
+                data-testid="remove-btn"
+                @click="handleDropdownAction('remove', $event)"
+              >
+                {{ __('Remove stage') }}
+              </gl-dropdown-item>
             </template>
-          </ul>
+          </gl-dropdown>
         </div>
       </div>
     </stage-card-list-item>

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

@@ -27,7 +27,7 @@ RSpec.describe 'Value stream analytics charts', :js do
   def toggle_more_options(stage)
     stage.hover
 
-    stage.find('.more-actions-toggle').click
+    stage.find('[data-testid="more-actions-toggle"]').click
   end
 
   before do

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

@@ -53,7 +53,7 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
   def toggle_more_options(stage)
     stage.hover
 
-    stage.find('.more-actions-toggle').click
+    find_stage_actions_btn(stage).click
   end
 
   def select_dropdown_option(name, value = start_event_identifier)
@@ -84,6 +84,10 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
             to_index: to)
   end
 
+  def find_stage_actions_btn(stage)
+    stage.find('[data-testid="more-actions-toggle"]')
+  end
+
   before do
     stub_licensed_features(cycle_analytics_for_groups: true, type_of_work_analytics: true)
 
@@ -391,9 +395,9 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
       end
 
       it "can be hidden, can't be edited or removed" do
-        expect(first_default_stage.find('.more-actions-dropdown')).to have_text(_('Hide stage'))
-        expect(first_default_stage.find('.more-actions-dropdown')).not_to have_text(_('Edit stage'))
-        expect(first_default_stage.find('.more-actions-dropdown')).not_to have_text(_('Remove stage'))
+        expect(find_stage_actions_btn(first_default_stage)).to have_text(_('Hide stage'))
+        expect(find_stage_actions_btn(first_default_stage)).not_to have_text(_('Edit stage'))
+        expect(find_stage_actions_btn(first_default_stage)).not_to have_text(_('Remove stage'))
       end
 
       context 'Hide stage' do
@@ -445,9 +449,9 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
       end
 
       it 'can not be hidden, can be edited or removed' do
-        expect(first_custom_stage.find('.more-actions-dropdown')).not_to have_text(_('Hide stage'))
-        expect(first_custom_stage.find('.more-actions-dropdown')).to have_text(_('Edit stage'))
-        expect(first_custom_stage.find('.more-actions-dropdown')).to have_text(_('Remove stage'))
+        expect(find_stage_actions_btn(first_custom_stage)).not_to have_text(_('Hide stage'))
+        expect(find_stage_actions_btn(first_custom_stage)).to have_text(_('Edit stage'))
+        expect(find_stage_actions_btn(first_custom_stage)).to have_text(_('Remove stage'))
       end
 
       it 'disappears from the stage table after being removed' do

spec/frontend/cycle_analytics/stage_nav_item_spec.js

@@ -118,7 +118,7 @@ describe('StageNavItem', () => {
       expect(wrapper.find('.stage-median').text()).toBe('Not available');
     });
     it('does not render options menu', () => {
-      expect(wrapper.find('.more-actions-toggle').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="more-actions-toggle"]').exists()).toBe(false);
     });
   });
 
@@ -135,7 +135,7 @@ describe('StageNavItem', () => {
     });
 
     it('does not render options menu', () => {
-      expect(wrapper.find('.more-actions-toggle').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="more-actions-toggle"]').exists()).toBe(false);
     });
 
     it('can not edit the stage', () => {