Commit 324efaa3 authored by Jacques Erasmus's avatar Jacques Erasmus Committed by Peter Hegman

Show fork suggestion when replacing or deleting a blob

Shows a fork suggestion when a user tries to delete or replace a blob
parent 951313ad
<script>
import { GlButtonGroup, GlButton, GlModalDirective } from '@gitlab/ui';
import { GlButtonGroup, GlButton } from '@gitlab/ui';
import { uniqueId } from 'lodash';
import { sprintf, __ } from '~/locale';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -20,9 +20,6 @@ export default {
DeleteBlobModal,
LockButton: () => import('ee_component/repository/components/lock_button.vue'),
},
directives: {
GlModal: GlModalDirective,
},
mixins: [getRefMixin, glFeatureFlagMixin()],
inject: {
targetBranch: {
......@@ -73,6 +70,10 @@ export default {
type: Boolean,
required: true,
},
showForkSuggestion: {
type: Boolean,
required: true,
},
},
computed: {
replaceModalId() {
......@@ -91,6 +92,16 @@ export default {
return this.canLock ? 'lock_button' : 'disabled_lock_button';
},
},
methods: {
showModal(modalId) {
if (this.showForkSuggestion) {
this.$emit('fork');
return;
}
this.$refs[modalId].show();
},
},
};
</script>
......@@ -107,14 +118,15 @@ export default {
data-testid="lock"
:data-qa-selector="lockBtnQASelector"
/>
<gl-button v-gl-modal="replaceModalId" data-testid="replace">
<gl-button data-testid="replace" @click="showModal(replaceModalId)">
{{ $options.i18n.replace }}
</gl-button>
<gl-button v-gl-modal="deleteModalId" data-testid="delete">
<gl-button data-testid="delete" @click="showModal(deleteModalId)">
{{ $options.i18n.delete }}
</gl-button>
</gl-button-group>
<upload-blob-modal
:ref="replaceModalId"
:modal-id="replaceModalId"
:modal-title="replaceModalTitle"
:commit-message="replaceModalTitle"
......@@ -126,6 +138,7 @@ export default {
:primary-btn-text="$options.i18n.replacePrimaryBtnText"
/>
<delete-blob-modal
:ref="deleteModalId"
:modal-id="deleteModalId"
:modal-title="deleteModalTitle"
:delete-path="deletePath"
......
......@@ -280,6 +280,8 @@ export default {
:project-path="projectPath"
:is-locked="Boolean(pathLockedByUser)"
:can-lock="canLock"
:show-fork-suggestion="showForkSuggestion"
@fork="setForkTarget('ide')"
/>
</template>
</blob-header>
......
......@@ -146,6 +146,9 @@ export default {
/* eslint-enable dot-notation */
},
methods: {
show() {
this.$refs[this.modalId].show();
},
submitForm(e) {
e.preventDefault(); // Prevent modal from closing
this.form.showValidation = true;
......@@ -164,6 +167,7 @@ export default {
<template>
<gl-modal
:ref="modalId"
v-bind="$attrs"
data-testid="modal-delete"
:modal-id="modalId"
......
......@@ -32,6 +32,7 @@ export default {
class="gl-mr-3"
category="secondary"
variant="confirm"
data-method="post"
:href="forkPath"
data-testid="fork"
>
......
......@@ -136,6 +136,9 @@ export default {
},
},
methods: {
show() {
this.$refs[this.modalId].show();
},
setFile(file) {
this.file = file;
......@@ -206,6 +209,7 @@ export default {
<template>
<gl-form>
<gl-modal
:ref="modalId"
:modal-id="modalId"
:title="modalTitle"
:action-primary="primaryOptions"
......
......@@ -13,6 +13,7 @@ const DEFAULT_PROPS = {
projectPath: 'some/project/path',
isLocked: false,
canLock: true,
showForkSuggestion: false,
};
const DEFAULT_INJECT = {
......
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
import DeleteBlobModal from '~/repository/components/delete_blob_modal.vue';
import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
......@@ -16,6 +15,7 @@ const DEFAULT_PROPS = {
projectPath: 'some/project/path',
isLocked: false,
canLock: true,
showForkSuggestion: false,
};
const DEFAULT_INJECT = {
......@@ -27,7 +27,7 @@ describe('BlobButtonGroup component', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = shallowMount(BlobButtonGroup, {
wrapper = mountExtended(BlobButtonGroup, {
propsData: {
...DEFAULT_PROPS,
...props,
......@@ -35,9 +35,6 @@ describe('BlobButtonGroup component', () => {
provide: {
...DEFAULT_INJECT,
},
directives: {
GlModal: createMockDirective(),
},
});
};
......@@ -47,7 +44,8 @@ describe('BlobButtonGroup component', () => {
const findDeleteBlobModal = () => wrapper.findComponent(DeleteBlobModal);
const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
const findReplaceButton = () => wrapper.find('[data-testid="replace"]');
const findDeleteButton = () => wrapper.findByTestId('delete');
const findReplaceButton = () => wrapper.findByTestId('replace');
it('renders component', () => {
createComponent();
......@@ -63,6 +61,8 @@ describe('BlobButtonGroup component', () => {
describe('buttons', () => {
beforeEach(() => {
createComponent();
jest.spyOn(findUploadBlobModal().vm, 'show');
jest.spyOn(findDeleteBlobModal().vm, 'show');
});
it('renders both the replace and delete button', () => {
......@@ -75,10 +75,37 @@ describe('BlobButtonGroup component', () => {
});
it('triggers the UploadBlobModal from the replace button', () => {
const { value } = getBinding(findReplaceButton().element, 'gl-modal');
const modalId = findUploadBlobModal().props('modalId');
findReplaceButton().trigger('click');
expect(findUploadBlobModal().vm.show).toHaveBeenCalled();
});
it('triggers the DeleteBlobModal from the delete button', () => {
findDeleteButton().trigger('click');
expect(findDeleteBlobModal().vm.show).toHaveBeenCalled();
});
describe('showForkSuggestion set to true', () => {
beforeEach(() => {
createComponent({ showForkSuggestion: true });
jest.spyOn(findUploadBlobModal().vm, 'show');
jest.spyOn(findDeleteBlobModal().vm, 'show');
});
it('does not trigger the UploadBlobModal from the replace button', () => {
findReplaceButton().trigger('click');
expect(findUploadBlobModal().vm.show).not.toHaveBeenCalled();
expect(wrapper.emitted().fork).toBeTruthy();
});
it('does not trigger the DeleteBlobModal from the delete button', () => {
findDeleteButton().trigger('click');
expect(modalId).toEqual(value);
expect(findDeleteBlobModal().vm.show).not.toHaveBeenCalled();
expect(wrapper.emitted().fork).toBeTruthy();
});
});
});
......
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