Commit 4eb0c803 authored by Simon Knox's avatar Simon Knox

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
parents b63f1584 31bb6342
<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>
......
---
title: Migrate analytics stage button away from deprecated button
merge_request: 39560
author:
type: other
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment