2021-07-14 12:09:23 +00:00
|
|
|
<script>
|
2021-07-26 15:08:30 +00:00
|
|
|
import { GlModal, GlFormGroup, GlFormInput, GlFormTextarea, GlToggle, GlForm } from '@gitlab/ui';
|
2021-07-14 12:09:23 +00:00
|
|
|
import csrf from '~/lib/utils/csrf';
|
|
|
|
import { __ } from '~/locale';
|
2021-08-04 18:09:57 +00:00
|
|
|
import validation from '~/vue_shared/directives/validation';
|
2021-07-14 12:09:23 +00:00
|
|
|
import {
|
|
|
|
SECONDARY_OPTIONS_TEXT,
|
|
|
|
COMMIT_LABEL,
|
|
|
|
TARGET_BRANCH_LABEL,
|
|
|
|
TOGGLE_CREATE_MR_LABEL,
|
2021-08-12 09:09:05 +00:00
|
|
|
COMMIT_MESSAGE_SUBJECT_MAX_LENGTH,
|
|
|
|
COMMIT_MESSAGE_BODY_MAX_LENGTH,
|
2021-07-14 12:09:23 +00:00
|
|
|
} from '../constants';
|
|
|
|
|
2021-08-04 18:09:57 +00:00
|
|
|
const initFormField = ({ value, required = true, skipValidation = false }) => ({
|
|
|
|
value,
|
|
|
|
required,
|
|
|
|
state: skipValidation ? true : null,
|
|
|
|
feedback: null,
|
|
|
|
});
|
|
|
|
|
2021-07-14 12:09:23 +00:00
|
|
|
export default {
|
|
|
|
csrf,
|
|
|
|
components: {
|
|
|
|
GlModal,
|
|
|
|
GlFormGroup,
|
|
|
|
GlFormInput,
|
|
|
|
GlFormTextarea,
|
|
|
|
GlToggle,
|
2021-07-26 15:08:30 +00:00
|
|
|
GlForm,
|
2021-07-14 12:09:23 +00:00
|
|
|
},
|
|
|
|
i18n: {
|
|
|
|
PRIMARY_OPTIONS_TEXT: __('Delete file'),
|
|
|
|
SECONDARY_OPTIONS_TEXT,
|
|
|
|
COMMIT_LABEL,
|
|
|
|
TARGET_BRANCH_LABEL,
|
|
|
|
TOGGLE_CREATE_MR_LABEL,
|
2021-08-11 09:10:00 +00:00
|
|
|
COMMIT_MESSAGE_HINT: __(
|
|
|
|
'Try to keep the first line under 52 characters and the others under 72.',
|
|
|
|
),
|
2021-07-14 12:09:23 +00:00
|
|
|
},
|
2021-08-04 18:09:57 +00:00
|
|
|
directives: {
|
|
|
|
validation: validation(),
|
|
|
|
},
|
2021-07-14 12:09:23 +00:00
|
|
|
props: {
|
|
|
|
modalId: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
modalTitle: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
deletePath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
commitMessage: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
targetBranch: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
originalBranch: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
canPushCode: {
|
|
|
|
type: Boolean,
|
|
|
|
required: true,
|
|
|
|
},
|
2021-11-26 12:12:49 +00:00
|
|
|
canPushToBranch: {
|
|
|
|
type: Boolean,
|
|
|
|
required: true,
|
|
|
|
},
|
2021-07-14 12:09:23 +00:00
|
|
|
emptyRepo: {
|
|
|
|
type: Boolean,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
2021-08-04 18:09:57 +00:00
|
|
|
const form = {
|
|
|
|
state: false,
|
|
|
|
showValidation: false,
|
|
|
|
fields: {
|
|
|
|
// fields key must match case of form name for validation directive to work
|
|
|
|
commit_message: initFormField({ value: this.commitMessage }),
|
|
|
|
branch_name: initFormField({ value: this.targetBranch }),
|
|
|
|
},
|
|
|
|
};
|
2021-07-14 12:09:23 +00:00
|
|
|
return {
|
|
|
|
loading: false,
|
|
|
|
createNewMr: true,
|
|
|
|
error: '',
|
2021-08-04 18:09:57 +00:00
|
|
|
form,
|
2021-07-14 12:09:23 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
primaryOptions() {
|
|
|
|
return {
|
|
|
|
text: this.$options.i18n.PRIMARY_OPTIONS_TEXT,
|
|
|
|
attributes: [
|
|
|
|
{
|
|
|
|
variant: 'danger',
|
|
|
|
loading: this.loading,
|
2021-08-04 18:09:57 +00:00
|
|
|
disabled: this.loading || !this.form.state,
|
2021-07-14 12:09:23 +00:00
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
cancelOptions() {
|
|
|
|
return {
|
|
|
|
text: this.$options.i18n.SECONDARY_OPTIONS_TEXT,
|
|
|
|
attributes: [
|
|
|
|
{
|
|
|
|
disabled: this.loading,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
showCreateNewMrToggle() {
|
2021-10-29 03:12:09 +00:00
|
|
|
return this.canPushCode && this.form.fields.branch_name.value !== this.originalBranch;
|
2021-07-14 12:09:23 +00:00
|
|
|
},
|
|
|
|
formCompleted() {
|
2021-10-29 03:12:09 +00:00
|
|
|
return this.form.fields.commit_message.value && this.form.fields.branch_name.value;
|
2021-07-14 12:09:23 +00:00
|
|
|
},
|
2021-08-11 09:10:00 +00:00
|
|
|
showHint() {
|
2021-10-29 03:12:09 +00:00
|
|
|
const splitCommitMessageByLineBreak = this.form.fields.commit_message.value
|
2021-08-11 09:10:00 +00:00
|
|
|
.trim()
|
|
|
|
.split('\n');
|
|
|
|
const [firstLine, ...otherLines] = splitCommitMessageByLineBreak;
|
|
|
|
|
2021-08-12 09:09:05 +00:00
|
|
|
const hasFirstLineExceedMaxLength = firstLine.length > COMMIT_MESSAGE_SUBJECT_MAX_LENGTH;
|
2021-08-11 09:10:00 +00:00
|
|
|
|
|
|
|
const hasOtherLineExceedMaxLength =
|
|
|
|
Boolean(otherLines.length) &&
|
2021-08-12 09:09:05 +00:00
|
|
|
otherLines.some((text) => text.length > COMMIT_MESSAGE_BODY_MAX_LENGTH);
|
2021-08-11 09:10:00 +00:00
|
|
|
|
|
|
|
return (
|
2021-10-29 03:12:09 +00:00
|
|
|
!this.form.fields.commit_message.feedback &&
|
2021-08-11 09:10:00 +00:00
|
|
|
(hasFirstLineExceedMaxLength || hasOtherLineExceedMaxLength)
|
|
|
|
);
|
|
|
|
},
|
2021-08-04 18:09:57 +00:00
|
|
|
/* eslint-enable dot-notation */
|
2021-07-14 12:09:23 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2022-01-10 21:16:38 +00:00
|
|
|
show() {
|
|
|
|
this.$refs[this.modalId].show();
|
|
|
|
},
|
2021-07-14 12:09:23 +00:00
|
|
|
submitForm(e) {
|
|
|
|
e.preventDefault(); // Prevent modal from closing
|
2021-08-04 18:09:57 +00:00
|
|
|
this.form.showValidation = true;
|
|
|
|
|
|
|
|
if (!this.form.state) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-07-14 12:09:23 +00:00
|
|
|
this.loading = true;
|
2021-08-04 18:09:57 +00:00
|
|
|
this.form.showValidation = false;
|
2021-07-26 15:08:30 +00:00
|
|
|
this.$refs.form.$el.submit();
|
2021-07-14 12:09:23 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<gl-modal
|
2022-01-10 21:16:38 +00:00
|
|
|
:ref="modalId"
|
2021-07-26 15:08:30 +00:00
|
|
|
v-bind="$attrs"
|
|
|
|
data-testid="modal-delete"
|
2021-07-14 12:09:23 +00:00
|
|
|
:modal-id="modalId"
|
|
|
|
:title="modalTitle"
|
|
|
|
:action-primary="primaryOptions"
|
|
|
|
:action-cancel="cancelOptions"
|
|
|
|
@primary="submitForm"
|
|
|
|
>
|
2021-08-04 18:09:57 +00:00
|
|
|
<gl-form ref="form" novalidate :action="deletePath" method="post">
|
2021-07-14 12:09:23 +00:00
|
|
|
<input type="hidden" name="_method" value="delete" />
|
|
|
|
<input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
|
|
|
|
<template v-if="emptyRepo">
|
2021-10-29 03:12:09 +00:00
|
|
|
<input type="hidden" name="branch_name" :value="originalBranch" class="js-branch-name" />
|
2021-07-14 12:09:23 +00:00
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<input type="hidden" name="original_branch" :value="originalBranch" />
|
2021-11-26 12:12:49 +00:00
|
|
|
<input
|
|
|
|
v-if="createNewMr || !canPushToBranch"
|
|
|
|
type="hidden"
|
|
|
|
name="create_merge_request"
|
|
|
|
value="1"
|
|
|
|
/>
|
2021-08-04 18:09:57 +00:00
|
|
|
<gl-form-group
|
|
|
|
:label="$options.i18n.COMMIT_LABEL"
|
|
|
|
label-for="commit_message"
|
|
|
|
:invalid-feedback="form.fields['commit_message'].feedback"
|
|
|
|
>
|
|
|
|
<gl-form-textarea
|
|
|
|
v-model="form.fields['commit_message'].value"
|
|
|
|
v-validation:[form.showValidation]
|
|
|
|
name="commit_message"
|
2021-11-24 12:10:21 +00:00
|
|
|
data-qa-selector="commit_message_field"
|
2021-08-04 18:09:57 +00:00
|
|
|
:state="form.fields['commit_message'].state"
|
|
|
|
:disabled="loading"
|
|
|
|
required
|
|
|
|
/>
|
2021-08-11 09:10:00 +00:00
|
|
|
<p v-if="showHint" class="form-text gl-text-gray-600" data-testid="hint">
|
|
|
|
{{ $options.i18n.COMMIT_MESSAGE_HINT }}
|
|
|
|
</p>
|
2021-07-14 12:09:23 +00:00
|
|
|
</gl-form-group>
|
|
|
|
<gl-form-group
|
|
|
|
v-if="canPushCode"
|
|
|
|
:label="$options.i18n.TARGET_BRANCH_LABEL"
|
|
|
|
label-for="branch_name"
|
2021-08-04 18:09:57 +00:00
|
|
|
:invalid-feedback="form.fields['branch_name'].feedback"
|
2021-07-14 12:09:23 +00:00
|
|
|
>
|
2021-08-04 18:09:57 +00:00
|
|
|
<gl-form-input
|
|
|
|
v-model="form.fields['branch_name'].value"
|
|
|
|
v-validation:[form.showValidation]
|
|
|
|
:state="form.fields['branch_name'].state"
|
|
|
|
:disabled="loading"
|
|
|
|
name="branch_name"
|
|
|
|
required
|
|
|
|
/>
|
2021-07-14 12:09:23 +00:00
|
|
|
</gl-form-group>
|
|
|
|
<gl-toggle
|
|
|
|
v-if="showCreateNewMrToggle"
|
|
|
|
v-model="createNewMr"
|
|
|
|
:disabled="loading"
|
|
|
|
:label="$options.i18n.TOGGLE_CREATE_MR_LABEL"
|
|
|
|
/>
|
|
|
|
</template>
|
2021-07-26 15:08:30 +00:00
|
|
|
</gl-form>
|
2021-07-14 12:09:23 +00:00
|
|
|
</gl-modal>
|
|
|
|
</template>
|