Merge branch 'eread/migrate-vsa-stage-nav-button' into 'master'

Migrate analytics stage button away from deprecated button

Closes #219836

See merge request gitlab-org/gitlab!39560

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

 <script>
-import { GlDeprecatedButton, GlIcon, GlTooltip } from '@gitlab/ui';
+import { GlButton, GlTooltip, GlTooltipDirective } from '@gitlab/ui';
 import { approximateDuration } from '~/lib/utils/datetime_utility';
 import StageCardListItem from './stage_card_list_item.vue';
 
@@ -7,10 +7,12 @@ export default {
   name: 'StageNavItem',
   components: {
     StageCardListItem,
-    GlIcon,
-    GlDeprecatedButton,
+    GlButton,
     GlTooltip,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     isDefaultStage: {
       type: Boolean,
@@ -106,31 +108,44 @@ export default {
           <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
         </div>
         <div v-show="isHover" ref="dropdown" :class="[openMenuClasses]" class="dropdown w-25">
-          <gl-deprecated-button
+          <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"
-          >
-            <gl-icon class="icon" name="ellipsis_v" />
-          </gl-deprecated-button>
+          />
           <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
             <template v-if="isDefaultStage">
               <li>
-                <gl-deprecated-button @click="handleDropdownAction('hide', $event)">
+                <gl-button
+                  category="tertiary"
+                  data-testid="hide-btn"
+                  @click="handleDropdownAction('hide', $event)"
+                >
                   {{ __('Hide stage') }}
-                </gl-deprecated-button>
+                </gl-button>
               </li>
             </template>
             <template v-else>
               <li>
-                <gl-deprecated-button @click="handleDropdownAction('edit', $event)">
+                <gl-button
+                  category="tertiary"
+                  data-testid="edit-btn"
+                  @click="handleDropdownAction('edit', $event)"
+                >
                   {{ __('Edit stage') }}
-                </gl-deprecated-button>
+                </gl-button>
               </li>
               <li>
-                <gl-deprecated-button @click="handleDropdownAction('remove', $event)">
+                <gl-button
+                  category="tertiary"
+                  data-testid="remove-btn"
+                  @click="handleDropdownAction('remove', $event)"
+                >
                   {{ __('Remove stage') }}
-                </gl-deprecated-button>
+                </gl-button>
               </li>
             </template>
           </ul>

ee/changelogs/unreleased/eread-migrate-vsa-stage-nav-button.yml

+---
+title: Migrate analytics stage button away from deprecated button
+merge_request: 39560
+author:
+type: other

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

@@ -24,6 +24,7 @@ describe('StageNavItem', () => {
   let wrapper = null;
   const findStageTitle = () => wrapper.find({ ref: 'title' });
   const findStageMedian = () => wrapper.find({ ref: 'median' });
+  const findDropdown = () => wrapper.find({ ref: 'dropdown' });
 
   afterEach(() => {
     wrapper.destroy();
@@ -46,6 +47,26 @@ describe('StageNavItem', () => {
     it('renders the stage title', () => {
       expect(findStageTitle().text()).toEqual(title);
     });
+
+    it('renders the dropdown with edit and remove options', () => {
+      expect(findDropdown().exists()).toBe(true);
+      expect(wrapper.find('[data-testid="edit-btn"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="remove-btn"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="hide-btn"]').exists()).toBe(false);
+    });
+  });
+
+  describe('with data an a non-default state', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ props: { isDefaultStage: true } });
+    });
+
+    it('renders the dropdown with a hide option', () => {
+      expect(findDropdown().exists()).toBe(true);
+      expect(wrapper.find('[data-testid="hide-btn"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="edit-btn"]').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="remove-btn"]').exists()).toBe(false);
+    });
   });
 
   describe('with a really long name', () => {