Commit 5c3a7184 authored by Pedro Moreira da Silva's avatar Pedro Moreira da Silva Committed by Martin Wortschack

Migrate MR rebase button to GitLab UI

parent 4b56e4cf
<script>
/* eslint-disable vue/no-v-html */
import { GlLoadingIcon } from '@gitlab/ui';
import { GlButton } from '@gitlab/ui';
import { escape } from 'lodash';
import simplePoll from '../../../lib/utils/simple_poll';
import eventHub from '../../event_hub';
......@@ -12,7 +12,7 @@ export default {
name: 'MRWidgetRebase',
components: {
statusIcon,
GlLoadingIcon,
GlButton,
},
props: {
mr: {
......@@ -109,29 +109,29 @@ export default {
<div class="rebase-state-find-class-convention media media-body space-children">
<template v-if="mr.rebaseInProgress || isMakingRequest">
<span class="bold">{{ __('Rebase in progress') }}</span>
<span class="bold" data-testid="rebase-message">{{ __('Rebase in progress') }}</span>
</template>
<template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch">
<span class="bold" v-html="fastForwardMergeText"></span>
<span class="bold" data-testid="rebase-message" v-html="fastForwardMergeText"></span>
</template>
<template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
<div
class="accept-merge-holder clearfix js-toggle-container accept-action media space-children"
>
<button
:disabled="isMakingRequest"
type="button"
class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
<gl-button
:loading="isMakingRequest"
variant="success"
class="qa-mr-rebase-button"
@click="rebase"
>
<gl-loading-icon v-if="isMakingRequest" />{{ __('Rebase') }}
</button>
<span v-if="!rebasingError" class="bold">{{
{{ __('Rebase') }}
</gl-button>
<span v-if="!rebasingError" class="bold" data-testid="rebase-message">{{
__(
'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
)
}}</span>
<span v-else class="bold danger">{{ rebasingError }}</span>
<span v-else class="bold danger" data-testid="rebase-message">{{ rebasingError }}</span>
</div>
</template>
</div>
......
......@@ -6,6 +6,10 @@ import component from '~/vue_merge_request_widget/components/states/mr_widget_re
describe('Merge request widget rebase component', () => {
let Component;
let vm;
const findRebaseMessageEl = () => vm.$el.querySelector('[data-testid="rebase-message"]');
const findRebaseMessageElText = () => findRebaseMessageEl().textContent.trim();
beforeEach(() => {
Component = Vue.extend(component);
});
......@@ -21,9 +25,7 @@ describe('Merge request widget rebase component', () => {
service: {},
});
expect(
vm.$el.querySelector('.rebase-state-find-class-convention span').textContent.trim(),
).toContain('Rebase in progress');
expect(findRebaseMessageElText()).toContain('Rebase in progress');
});
});
......@@ -39,9 +41,7 @@ describe('Merge request widget rebase component', () => {
});
it('it should render rebase button and warning message', () => {
const text = vm.$el
.querySelector('.rebase-state-find-class-convention span')
.textContent.trim();
const text = findRebaseMessageElText();
expect(text).toContain('Fast-forward merge is not possible.');
expect(text.replace(/\s\s+/g, ' ')).toContain(
......@@ -53,9 +53,7 @@ describe('Merge request widget rebase component', () => {
vm.rebasingError = 'Something went wrong!';
Vue.nextTick(() => {
expect(
vm.$el.querySelector('.rebase-state-find-class-convention span').textContent.trim(),
).toContain('Something went wrong!');
expect(findRebaseMessageElText()).toContain('Something went wrong!');
done();
});
});
......@@ -72,9 +70,7 @@ describe('Merge request widget rebase component', () => {
service: {},
});
const text = vm.$el
.querySelector('.rebase-state-find-class-convention span')
.textContent.trim();
const text = findRebaseMessageElText();
expect(text).toContain('Fast-forward merge is not possible.');
expect(text).toContain('Rebase the source branch onto');
......@@ -93,7 +89,7 @@ describe('Merge request widget rebase component', () => {
service: {},
});
const elem = vm.$el.querySelector('.rebase-state-find-class-convention span');
const elem = findRebaseMessageEl();
expect(elem.innerHTML).toContain(
`Fast-forward merge is not possible. Rebase the source branch onto <span class="label-branch">${targetBranch}</span> to allow this merge request to be merged.`,
......
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