Commit 9cab6514 authored by Samantha Ming's avatar Samantha Ming Committed by Jacques Erasmus

Add hint text for delete blob modal

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/335743
parent d1ba3580
...@@ -33,6 +33,9 @@ export default { ...@@ -33,6 +33,9 @@ export default {
COMMIT_LABEL, COMMIT_LABEL,
TARGET_BRANCH_LABEL, TARGET_BRANCH_LABEL,
TOGGLE_CREATE_MR_LABEL, TOGGLE_CREATE_MR_LABEL,
COMMIT_MESSAGE_HINT: __(
'Try to keep the first line under 52 characters and the others under 72.',
),
}, },
directives: { directives: {
validation: validation(), validation: validation(),
...@@ -118,6 +121,26 @@ export default { ...@@ -118,6 +121,26 @@ export default {
formCompleted() { formCompleted() {
return this.form.fields['commit_message'].value && this.form.fields['branch_name'].value; return this.form.fields['commit_message'].value && this.form.fields['branch_name'].value;
}, },
showHint() {
const commitMessageSubjectMaxLength = 52;
const commitMessageBodyMaxLength = 72;
const splitCommitMessageByLineBreak = this.form.fields['commit_message'].value
.trim()
.split('\n');
const [firstLine, ...otherLines] = splitCommitMessageByLineBreak;
const hasFirstLineExceedMaxLength = firstLine.length > commitMessageSubjectMaxLength;
const hasOtherLineExceedMaxLength =
Boolean(otherLines.length) &&
otherLines.some((text) => text.length > commitMessageBodyMaxLength);
return (
!this.form.fields['commit_message'].feedback &&
(hasFirstLineExceedMaxLength || hasOtherLineExceedMaxLength)
);
},
/* eslint-enable dot-notation */ /* eslint-enable dot-notation */
}, },
methods: { methods: {
...@@ -173,6 +196,9 @@ export default { ...@@ -173,6 +196,9 @@ export default {
:disabled="loading" :disabled="loading"
required required
/> />
<p v-if="showHint" class="form-text gl-text-gray-600" data-testid="hint">
{{ $options.i18n.COMMIT_MESSAGE_HINT }}
</p>
</gl-form-group> </gl-form-group>
<gl-form-group <gl-form-group
v-if="canPushCode" v-if="canPushCode"
......
...@@ -39,6 +39,14 @@ describe('DeleteBlobModal', () => { ...@@ -39,6 +39,14 @@ describe('DeleteBlobModal', () => {
const findForm = () => findModal().findComponent(GlForm); const findForm = () => findModal().findComponent(GlForm);
const findCommitTextarea = () => findForm().findComponent(GlFormTextarea); const findCommitTextarea = () => findForm().findComponent(GlFormTextarea);
const findTargetInput = () => findForm().findComponent(GlFormInput); const findTargetInput = () => findForm().findComponent(GlFormInput);
const findCommitHint = () => wrapper.find('[data-testid="hint"]');
const fillForm = async (inputValue = {}) => {
const { targetText, commitText } = inputValue;
await findTargetInput().vm.$emit('input', targetText);
await findCommitTextarea().vm.$emit('input', commitText);
};
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
...@@ -126,6 +134,36 @@ describe('DeleteBlobModal', () => { ...@@ -126,6 +134,36 @@ describe('DeleteBlobModal', () => {
); );
}); });
describe('hint', () => {
const targetText = 'some target branch';
const hintText = 'Try to keep the first line under 52 characters and the others under 72.';
const charsGenerator = (length) => 'lorem'.repeat(length);
beforeEach(async () => {
createFullComponent();
await nextTick();
});
it.each`
commitText | exist | desc
${charsGenerator(53)} | ${true} | ${'first line length > 52'}
${`lorem\n${charsGenerator(73)}`} | ${true} | ${'other line length > 72'}
${charsGenerator(52)} | ${true} | ${'other line length = 52'}
${`lorem\n${charsGenerator(72)}`} | ${true} | ${'other line length = 72'}
${`lorem`} | ${false} | ${'first line length < 53'}
${`lorem\nlorem`} | ${false} | ${'other line length < 53'}
`('displays hint $exist for $desc', async ({ commitText, exist }) => {
await fillForm({ targetText, commitText });
if (!exist) {
expect(findCommitHint().exists()).toBe(false);
return;
}
expect(findCommitHint().text()).toBe(hintText);
});
});
describe('form submission', () => { describe('form submission', () => {
let submitSpy; let submitSpy;
...@@ -139,13 +177,6 @@ describe('DeleteBlobModal', () => { ...@@ -139,13 +177,6 @@ describe('DeleteBlobModal', () => {
submitSpy.mockRestore(); submitSpy.mockRestore();
}); });
const fillForm = async (inputValue = {}) => {
const { targetText, commitText } = inputValue;
await findTargetInput().vm.$emit('input', targetText);
await findCommitTextarea().vm.$emit('input', commitText);
};
describe('invalid form', () => { describe('invalid form', () => {
beforeEach(async () => { beforeEach(async () => {
await fillForm({ targetText: '', commitText: '' }); await fillForm({ targetText: '', commitText: '' });
......
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