Commit 4c6d860e authored by ameliabauerly's avatar ameliabauerly Committed by Dhiraj Bodicherla

Replace deprecated button in metrics dashboard

This MR replaces gl-deprecated button with
gl-button in the metrics dashboard header component
parent 169b8ece
......@@ -3,8 +3,6 @@ import { debounce } from 'lodash';
import { mapActions, mapState, mapGetters } from 'vuex';
import {
GlButton,
GlIcon,
GlDeprecatedButton,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDeprecatedDropdownHeader,
......@@ -39,8 +37,6 @@ export default {
components: {
Icon,
GlButton,
GlIcon,
GlDeprecatedButton,
GlDeprecatedDropdown,
GlLoadingIcon,
GlDeprecatedDropdownItem,
......@@ -305,38 +301,37 @@ export default {
selectedDashboard.starred ? $options.i18n.unstarDashboard : $options.i18n.starDashboard
"
>
<gl-deprecated-button
<gl-button
ref="toggleStarBtn"
class="w-100"
:disabled="isUpdatingStarredValue"
variant="default"
:icon="selectedDashboard.starred ? 'star' : 'star-o'"
@click="toggleStarredValue()"
>
<gl-icon :name="selectedDashboard.starred ? 'star' : 'star-o'" />
</gl-deprecated-button>
/>
</div>
</div>
<div v-if="showRearrangePanelsBtn" class="mb-2 mr-2 d-flex">
<gl-deprecated-button
<gl-button
:pressed="isRearrangingPanels"
variant="default"
class="flex-grow-1 js-rearrange-button"
@click="toggleRearrangingPanels"
>
{{ __('Arrange charts') }}
</gl-deprecated-button>
</gl-button>
</div>
<div v-if="addingMetricsAvailable" class="mb-2 mr-2 d-flex d-sm-block">
<gl-deprecated-button
<gl-button
ref="addMetricBtn"
v-gl-modal="$options.modalIds.addMetric"
variant="outline-success"
variant="default"
data-qa-selector="add_metric_button"
class="flex-grow-1"
>
{{ $options.i18n.addMetric }}
</gl-deprecated-button>
</gl-button>
<gl-modal
ref="addMetricModal"
:modal-id="$options.modalIds.addMetric"
......@@ -350,18 +345,19 @@ export default {
/>
</form>
<div slot="modal-footer">
<gl-deprecated-button @click="hideAddMetricModal">
<gl-button @click="hideAddMetricModal">
{{ __('Cancel') }}
</gl-deprecated-button>
<gl-deprecated-button
</gl-button>
<gl-button
ref="submitCustomMetricsFormBtn"
v-track-event="getAddMetricTrackingOptions()"
:disabled="!formIsValid"
variant="success"
category="primary"
@click="submitCustomMetricsForm"
>
{{ __('Save changes') }}
</gl-deprecated-button>
</gl-button>
</div>
</gl-modal>
</div>
......@@ -370,28 +366,29 @@ export default {
v-if="selectedDashboard && selectedDashboard.can_edit"
class="mb-2 mr-2 d-flex d-sm-block"
>
<gl-deprecated-button
<gl-button
class="flex-grow-1 js-edit-link"
:href="selectedDashboard.project_blob_path"
data-qa-selector="edit_dashboard_button"
>
{{ __('Edit dashboard') }}
</gl-deprecated-button>
</gl-button>
</div>
<div
v-if="externalDashboardUrl && externalDashboardUrl.length"
class="mb-2 mr-2 d-flex d-sm-block"
>
<gl-deprecated-button
<gl-button
class="flex-grow-1 js-external-dashboard-link"
variant="primary"
variant="info"
category="primary"
:href="externalDashboardUrl"
target="_blank"
rel="noopener noreferrer"
>
{{ __('View full dashboard') }} <icon name="external-link" />
</gl-deprecated-button>
</gl-button>
</div>
<!-- This separator should be displayed only if at least one of the action menu or settings button are displayed -->
......
---
title: Replace deprecated buttons in dashboard header
merge_request: 38830
author:
type: other
......@@ -106,16 +106,13 @@ exports[`Dashboard template matches the default snapshot 1`] = `
class="flex-grow-1"
title="Star dashboard"
>
<gl-deprecated-button-stub
<gl-button-stub
category="tertiary"
class="w-100"
size="md"
icon="star-o"
size="medium"
variant="default"
>
<gl-icon-stub
name="star-o"
size="16"
/>
</gl-deprecated-button-stub>
</div>
</div>
......
import { shallowMount, mount } from '@vue/test-utils';
import Tracking from '~/tracking';
import { ESC_KEY, ESC_KEY_IE11 } from '~/lib/utils/keys';
import { GlModal, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
import { GlModal, GlButton } from '@gitlab/ui';
import { objectToQuery } from '~/lib/utils/url_utility';
import VueDraggable from 'vuedraggable';
import MockAdapter from 'axios-mock-adapter';
......@@ -448,7 +448,6 @@ describe('Dashboard', () => {
describe('star dashboards', () => {
const findToggleStar = () => findDashboardHeader().find({ ref: 'toggleStarBtn' });
const findToggleStarIcon = () => findToggleStar().find(GlIcon);
beforeEach(() => {
createShallowWrapper();
......@@ -502,7 +501,7 @@ describe('Dashboard', () => {
});
it('toggle star button shows an unstarred state', () => {
expect(findToggleStarIcon().attributes('name')).toBe('star-o');
expect(findToggleStar().attributes('icon')).toBe('star-o');
});
});
......@@ -519,7 +518,7 @@ describe('Dashboard', () => {
});
it('toggle star button shows a starred state', () => {
expect(findToggleStarIcon().attributes('name')).toBe('star');
expect(findToggleStar().attributes('icon')).toBe('star');
});
});
});
......@@ -900,7 +899,7 @@ describe('Dashboard', () => {
const externalDashboardButton = wrapper.find('.js-external-dashboard-link');
expect(externalDashboardButton.exists()).toBe(true);
expect(externalDashboardButton.is(GlDeprecatedButton)).toBe(true);
expect(externalDashboardButton.is(GlButton)).toBe(true);
expect(externalDashboardButton.text()).toContain('View full dashboard');
});
});
......
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