Commit 089884db authored by David O'Regan's avatar David O'Regan Committed by Kushal Pandya

Migrate merge conflicts modal

Migrate merge conflicts widget
modal from old HAML to
new GL Modal component
parent 4050f448
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import ciIcon from '../../vue_shared/components/ci_icon.vue';
export default {
components: {
ciIcon,
GlButton,
GlLoadingIcon,
},
props: {
......@@ -32,21 +33,23 @@ export default {
};
</script>
<template>
<div class="d-flex align-self-start">
<div class="gl-display-flex gl-align-self-start">
<div class="square s24 h-auto d-flex-center gl-mr-3">
<div v-if="isLoading" class="mr-widget-icon d-inline-flex">
<gl-loading-icon size="md" class="mr-loading-icon d-inline-flex" />
<div v-if="isLoading" class="mr-widget-icon gl-display-inline-flex">
<gl-loading-icon size="md" class="mr-loading-icon gl-display-inline-flex" />
</div>
<ci-icon v-else :status="statusObj" :size="24" />
</div>
<button
<gl-button
v-if="showDisabledButton"
type="button"
class="js-disabled-merge-button btn btn-success btn-sm"
disabled="true"
category="primary"
variant="success"
class="js-disabled-merge-button"
:disabled="true"
>
{{ s__('mrWidget|Merge') }}
</button>
</gl-button>
</div>
</template>
<script>
import $ from 'jquery';
import { escape } from 'lodash';
import { GlButton, GlModalDirective } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
import StatusIcon from '../mr_widget_status_icon.vue';
......@@ -9,6 +10,10 @@ export default {
name: 'MRWidgetConflicts',
components: {
StatusIcon,
GlButton,
},
directives: {
GlModalDirective,
},
props: {
/* TODO: This is providing all store and service down when it
......@@ -89,22 +94,21 @@ To merge this request, first rebase locally.`)
</span>
</span>
<span v-if="showResolveButton" ref="popover">
<a
<gl-button
:href="mr.conflictResolutionPath"
:disabled="mr.sourceBranchProtected"
class="js-resolve-conflicts-button btn btn-default btn-sm"
class="js-resolve-conflicts-button"
>
{{ s__('mrWidget|Resolve conflicts') }}
</a>
</gl-button>
</span>
<button
<gl-button
v-if="mr.canMerge"
class="js-merge-locally-button btn btn-default btn-sm"
data-toggle="modal"
data-target="#modal_merge_info"
v-gl-modal-directive="'modal-merge-info'"
class="js-merge-locally-button"
>
{{ s__('mrWidget|Merge locally') }}
</button>
</gl-button>
</template>
</div>
</div>
......
---
title: Make How to merge modal in merge requests widget conform to correct modal styling
merge_request: 48370
author:
type: changed
......@@ -194,7 +194,7 @@ describe('MRWidgetConflicts', () => {
});
it('sets resolve button as disabled', () => {
expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe('disabled');
expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe('true');
});
it('renders popover', () => {
......
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