Commit 2168c304 authored by Paul Slaughter's avatar Paul Slaughter

Merge branch '224139-merge-request-approval-button-style-inadvertently-changed' into 'master'

Resolve "Merge request approval button style inadvertently changed"

Closes #29151 and #224139

See merge request gitlab-org/gitlab!35213
parents 39348805 943d5c98
<script>
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlButton } from '@gitlab/ui';
import createFlash, { hideFlash } from '~/flash';
import { s__ } from '~/locale';
import eventHub from '~/vue_merge_request_widget/event_hub';
......@@ -21,7 +21,6 @@ export default {
ApprovalsFooter,
ApprovalsAuth,
GlButton,
GlLoadingIcon,
},
props: {
mr: {
......@@ -85,10 +84,9 @@ export default {
action() {
// Use the default approve action, only if we aren't using the auth component for it
if (this.showApprove) {
const inverted = this.isApproved;
return {
text: this.approvalText,
inverted,
category: this.isApproved ? 'secondary' : 'primary',
variant: 'info',
action: () => this.approve(),
};
......@@ -96,7 +94,7 @@ export default {
return {
text: s__('mrWidget|Revoke approval'),
variant: 'warning',
inverted: true,
category: 'secondary',
action: () => this.unapprove(),
};
}
......@@ -210,13 +208,12 @@ export default {
<gl-button
v-if="action"
:variant="action.variant"
:class="{ 'btn-inverted': action.inverted }"
category="secondary"
:category="action.category"
:loading="isApproving"
class="mr-3"
data-qa-selector="approve_button"
@click="action.action"
>
<gl-loading-icon v-if="isApproving" inline />
{{ action.text }}
</gl-button>
<approvals-summary-optional
......
---
title: Fix visual regression for MR approve button
merge_request: 35213
author:
type: fixed
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { GlButton } from '@gitlab/ui';
import Approvals from 'ee/vue_merge_request_widget/components/approvals/approvals.vue';
import ApprovalsSummary from 'ee/vue_merge_request_widget/components/approvals/approvals_summary.vue';
import ApprovalsSummaryOptional from 'ee/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue';
......@@ -62,8 +62,8 @@ describe('EE MRWidget approvals', () => {
return !action.exists()
? null
: {
variant: action.attributes('variant'),
inverted: action.classes('btn-inverted'),
variant: action.props('variant'),
category: action.props('category'),
text: action.text(),
};
};
......@@ -186,7 +186,7 @@ describe('EE MRWidget approvals', () => {
expect(findActionData()).toEqual({
variant: 'info',
text: 'Approve',
inverted: false,
category: 'primary',
});
});
});
......@@ -203,11 +203,11 @@ describe('EE MRWidget approvals', () => {
waitForTick(done);
});
it('approve action (with inverted) is rendered', () => {
it('approve action (with inverted style) is rendered', () => {
expect(findActionData()).toEqual({
variant: 'info',
text: 'Approve',
inverted: true,
category: 'secondary',
});
});
});
......@@ -223,7 +223,7 @@ describe('EE MRWidget approvals', () => {
expect(findActionData()).toEqual({
variant: 'info',
text: 'Approve additionally',
inverted: true,
category: 'secondary',
});
});
});
......@@ -239,13 +239,13 @@ describe('EE MRWidget approvals', () => {
service.approveMergeRequest.and.callFake(() => new Promise(() => {}));
const action = findAction();
expect(action.find(GlLoadingIcon).exists()).toBe(false);
expect(action.props('loading')).toBe(false);
action.vm.$emit('click');
tick()
.then(() => {
expect(action.find(GlLoadingIcon).exists()).toBe(true);
expect(action.props('loading')).toBe(true);
})
.then(done)
.catch(done.fail);
......@@ -360,7 +360,7 @@ describe('EE MRWidget approvals', () => {
expect(findActionData()).toEqual({
variant: 'warning',
text: 'Revoke approval',
inverted: true,
category: 'secondary',
});
});
......
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