Commit 9f5d028e authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '34336-related-issues-ui-polish' into 'master'

Related Issues UI Polish

Closes #2756

See merge request !2268
parents e73c1760 10566ddb
......@@ -12,10 +12,6 @@ export default {
type: String,
required: true,
},
addButtonLabel: {
type: String,
required: true,
},
pendingReferences: {
type: Array,
required: false,
......@@ -46,8 +42,12 @@ export default {
},
computed: {
inputPlaceholder() {
return 'Paste issue link or <#issue id>';
},
isSubmitButtonDisabled() {
return this.pendingReferences.length === 0 || this.isSubmitting;
return (this.inputValue.length === 0 && this.pendingReferences.length === 0)
|| this.isSubmitting;
},
},
......@@ -84,12 +84,15 @@ export default {
mounted() {
const $input = $(this.$refs.input);
new GfmAutoComplete(this.autoCompleteSources).setup($input, {
issues: true,
});
$input.on('shown-issues.atwho', this.onAutoCompleteToggled.bind(this, true));
$input.on('hidden-issues.atwho', this.onAutoCompleteToggled.bind(this, false));
$input.on('inserted-issues.atwho', this.onInput);
this.$refs.input.focus();
},
beforeDestroy() {
......@@ -126,7 +129,7 @@ export default {
type="text"
class="js-add-issuable-form-input add-issuable-form-input"
:value="inputValue"
placeholder="Search issues..."
:placeholder="inputPlaceholder"
@input="onInput"
@focus="onFocus"
@blur="onBlur" />
......@@ -140,7 +143,7 @@ export default {
class="js-add-issuable-form-add-button btn btn-new pull-left"
@click="onFormSubmit"
:disabled="isSubmitButtonDisabled">
{{ addButtonLabel }}
Add
<loadingIcon
ref="loadingIcon"
v-if="isSubmitting"
......
......@@ -119,11 +119,10 @@ export default {
</component>
<button
v-if="canRemove"
v-tooltip
ref="removeButton"
type="button"
class="js-issue-token-remove-button issue-token-remove-button"
:title="removeButtonLabel"
:aria-label="removeButtonLabel"
@click="onRemoveRequest">
<i
class="fa fa-times"
......
......@@ -76,8 +76,8 @@ export default {
hasBody() {
return this.isFormVisible || this.shouldShowTokenBody;
},
relatedIssueCount() {
return this.relatedIssues.length;
badgeLabel() {
return this.isFetching && this.relatedIssues.length === 0 ? '...' : this.relatedIssues.length;
},
hasHelpPath() {
return this.helpPath.length > 0;
......@@ -113,15 +113,13 @@ export default {
<span
class="issue-count-badge-count"
:class="{ 'has-btn': this.canAddRelatedIssues }">
{{ relatedIssueCount }}
{{ badgeLabel }}
</span>
<button
v-if="canAddRelatedIssues"
v-tooltip
ref="issueCountBadgeAddButton"
type="button"
class="js-issue-count-badge-add-button issue-count-badge-add-button btn btn-small btn-default"
title="Add an issue"
aria-label="Add an issue"
data-placement="top"
@click="toggleAddRelatedIssuesForm">
......@@ -143,7 +141,6 @@ export default {
:is-submitting="isSubmitting"
:input-value="inputValue"
:pending-references="pendingReferences"
add-button-label="Add related issues"
:auto-complete-sources="autoCompleteSources" />
</div>
<div
......
......@@ -119,7 +119,7 @@ export default {
.catch((res) => {
this.isSubmitting = false;
// eslint-disable-next-line no-new
new Flash(res.data.message || 'An error occurred while submitting related issues.');
new Flash(res.data.message || 'We can\'t find an issue that matches what you are looking for.');
});
}
},
......
......@@ -40,31 +40,45 @@ describe('AddIssuableForm', () => {
describe('with data', () => {
describe('without references', () => {
beforeEach(() => {
vm = new AddIssuableForm({
propsData: {
inputValue: '',
addButtonLabel: 'Submit',
pendingReferences: [],
},
}).$mount();
describe('without any input text', () => {
beforeEach(() => {
vm = new AddIssuableForm({
propsData: {
inputValue: '',
pendingReferences: [],
},
}).$mount();
});
it('should have disabled submit button', () => {
expect(vm.$refs.addButton.disabled).toBe(true);
expect(vm.$refs.loadingIcon).toBeUndefined();
});
});
it('should have disabled submit button', () => {
expect(vm.$refs.addButton.disabled).toBe(true);
expect(vm.$refs.loadingIcon).toBeUndefined();
describe('with input text', () => {
beforeEach(() => {
vm = new AddIssuableForm({
propsData: {
inputValue: 'foo',
pendingReferences: [],
},
}).$mount();
});
it('should not have disabled submit button', () => {
expect(vm.$refs.addButton.disabled).toBe(false);
});
});
});
describe('with references', () => {
const inputValue = 'foo #123';
const addButtonLabel = 'Add issuable';
beforeEach(() => {
vm = new AddIssuableForm({
propsData: {
inputValue,
addButtonLabel,
pendingReferences: [
issuable1.reference,
issuable2.reference,
......@@ -73,10 +87,6 @@ describe('AddIssuableForm', () => {
}).$mount();
});
it('should put button label in place', () => {
expect(vm.$refs.addButton.textContent.trim()).toEqual(addButtonLabel);
});
it('should put input value in place', () => {
expect(vm.$refs.input.value).toEqual(inputValue);
});
......@@ -84,6 +94,10 @@ describe('AddIssuableForm', () => {
it('should render pending issuables items', () => {
expect(vm.$el.querySelectorAll('.js-add-issuable-form-token-list-item').length).toEqual(2);
});
it('should not have disabled submit button', () => {
expect(vm.$refs.addButton.disabled).toBe(false);
});
});
describe('when submitting', () => {
......@@ -91,7 +105,6 @@ describe('AddIssuableForm', () => {
vm = new AddIssuableForm({
propsData: {
inputValue: '',
addButtonLabel: 'Submit',
pendingReferences: [
issuable1.reference,
issuable2.reference,
......@@ -131,7 +144,6 @@ describe('AddIssuableForm', () => {
vm = new AddIssuableForm({
propsData: {
inputValue: '',
addButtonLabel: 'Add issuable',
pendingIssuables: [
issuable1,
],
......
......@@ -64,6 +64,10 @@ describe('RelatedIssuesBlock', () => {
it('should show loading icon', () => {
expect(vm.$refs.loadingIcon).toBeDefined();
});
it('should show `...` badge count', () => {
expect(vm.badgeLabel).toBe('...');
});
});
describe('with canAddRelatedIssues=true', () => {
......
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