Commit 155cd4da authored by Coung Ngo's avatar Coung Ngo Committed by Phil Hughes

Improve related issues code

parent bea71761
......@@ -205,7 +205,7 @@ export default {
:disabled="isSubmitButtonDisabled"
:loading="isSubmitting"
type="submit"
class="js-add-issuable-form-add-button float-left"
class="float-left"
data-qa-selector="add_issue_button"
>
{{ __('Add') }}
......
......@@ -111,7 +111,6 @@ export default {
:disabled="removeDisabled"
data-testid="removeBtn"
type="button"
class="js-issue-token-remove-button"
@click="onRemoveRequest"
>
<gl-icon name="close" />
......
......@@ -107,9 +107,6 @@ export default {
onAutoCompleteToggled(isOpen) {
this.isAutoCompleteOpen = isOpen;
},
onInputWrapperClick() {
this.$refs.input.focus();
},
onInput() {
const { value } = this.$refs.input;
const caretPos = this.$refs.input.selectionStart;
......@@ -185,26 +182,23 @@ export default {
<div
ref="issuableFormWrapper"
:class="{ focus: isInputFocused }"
class="add-issuable-form-input-wrapper form-control gl-field-error-outline"
class="add-issuable-form-input-wrapper form-control gl-field-error-outline gl-h-auto gl-p-3 gl-pb-2"
role="button"
@click="onIssuableFormWrapperClick"
>
<ul class="add-issuable-form-input-token-list">
<!--
We need to ensure this key changes any time the pendingReferences array is updated
else two consecutive pending ref strings in an array with the same name will collide
and cause odd behavior when one is removed.
-->
<ul
class="gl-display-flex gl-flex-wrap gl-align-items-baseline gl-list-style-none gl-m-0 gl-p-0"
>
<li
v-for="(reference, index) in references"
:key="`related-issues-token-${reference}`"
class="js-add-issuable-form-token-list-item add-issuable-form-token-list-item"
:key="reference"
class="gl-max-w-full gl-mb-2 gl-mr-2"
>
<issue-token
:id-key="index"
:display-reference="reference.text || reference"
:can-remove="true"
:is-condensed="true"
can-remove
is-condensed
:path-id-separator="pathIdSeparator"
event-namespace="pendingIssuable"
@pendingIssuableRemoveRequest="
......@@ -214,14 +208,15 @@ export default {
"
/>
</li>
<li class="add-issuable-form-input-list-item">
<li class="gl-mb-2 gl-flex-grow-1">
<input
:id="inputId"
ref="input"
:value="inputValue"
:placeholder="inputPlaceholder"
:aria-label="inputPlaceholder"
type="text"
class="js-add-issuable-form-input add-issuable-form-input"
class="gl-w-full gl-border-none gl-outline-0"
data-qa-selector="add_issue_field"
autocomplete="off"
@input="onInput"
......
......@@ -746,33 +746,14 @@
}
}
.add-issuable-form-input-token-list {
display: flex;
flex-wrap: wrap;
align-items: baseline;
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
.add-issuable-form-token-list-item {
max-width: 100%;
margin-bottom: $gl-vert-padding;
margin-right: 5px;
}
.add-issuable-form-input-list-item {
flex: 1;
min-width: 200px;
margin-bottom: $gl-vert-padding;
}
.add-issuable-form-input {
width: 100%;
border: 0;
.add-issuable-form-input-wrapper {
&.focus {
border-color: $blue-300;
box-shadow: 0 0 4px $dropdown-input-focus-shadow;
}
&:focus {
outline: none;
.gl-show-field-errors &.form-control:not(textarea) {
height: auto;
}
}
......
......@@ -31,21 +31,6 @@
}
}
.add-issuable-form-input-wrapper {
height: auto;
padding: $gl-vert-padding $gl-vert-padding 0 $gl-input-padding;
&.focus,
&.focus:hover {
border-color: $blue-300;
box-shadow: 0 0 4px $dropdown-input-focus-shadow;
}
.gl-show-field-errors &.form-control:not(textarea) {
height: auto;
}
}
.limit-container-width {
.epic-page-container .issuable-details,
.emoji-list-container {
......
......@@ -73,12 +73,10 @@ RSpec.describe 'Epic Issues', :js do
def add_issues(references)
find(".related-items-tree-container .js-add-epics-issues-button").click
find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an existing issue').click
find('.related-items-tree-container .js-add-issuable-form-input').set(references)
# When adding long references, for some reason the input gets stuck
# waiting for more text. Send a keystroke before clicking the button to
# get out of this mode.
find('.related-items-tree-container .js-add-issuable-form-input').send_keys(:tab)
find('.related-items-tree-container .js-add-issuable-form-add-button').click
fill_in 'Paste issue link', with: "#{references} "
within '.add-item-form-container' do
click_button 'Add'
end
wait_for_requests
end
......@@ -86,10 +84,10 @@ RSpec.describe 'Epic Issues', :js do
def add_epics(references)
find('.related-items-tree-container .js-add-epics-issues-button').click
find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an existing epic').click
find('.related-items-tree-container .js-add-issuable-form-input').set(references)
find('.related-items-tree-container .js-add-issuable-form-input').send_keys(:tab)
find('.related-items-tree-container .js-add-issuable-form-add-button').click
fill_in 'Paste epic link', with: "#{references} "
within '.add-item-form-container' do
click_button 'Add'
end
wait_for_requests
end
......
......@@ -40,7 +40,7 @@ RSpec.describe 'Epic show', :js do
page.within('.js-epic-tabs-content #tree') do
find('.js-add-epics-issues-button .dropdown-toggle').click
click_button button_name
find('.js-add-issuable-form-input').native.send_keys(input_character)
fill_in "Paste #{type} link", with: input_character
wait_for_requests
end
end
......
......@@ -52,9 +52,9 @@ RSpec.describe 'Related issues', :js do
context 'with "Relates to", "Blocks", "Is blocked by" groupings' do
def add_linked_issue(issue, radio_input_value)
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set "#{issue.to_reference(project)} "
fill_in 'Paste issue link', with: "#{issue.to_reference(project)} "
find("input[name=\"linked-issue-type-radio\"][value=\"#{radio_input_value}\"]").click
find('.js-add-issuable-form-add-button').click
click_button 'Add'
wait_for_requests
end
......
......@@ -231,8 +231,8 @@ RSpec.describe 'Related issues', :js do
it 'add related issue' do
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set "#{issue_b.to_reference(project)} "
find('.js-add-issuable-form-add-button').click
fill_in 'Paste issue link', with: "#{issue_b.to_reference(project)} "
click_button 'Add'
wait_for_requests
......@@ -248,8 +248,8 @@ RSpec.describe 'Related issues', :js do
it 'add cross-project related issue' do
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set "#{issue_project_b_a.to_reference(project)} "
find('.js-add-issuable-form-add-button').click
fill_in 'Paste issue link', with: "#{issue_project_b_a.to_reference(project)} "
click_button 'Add'
wait_for_requests
......@@ -262,8 +262,8 @@ RSpec.describe 'Related issues', :js do
it 'pressing enter should submit the form' do
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set "#{issue_project_b_a.to_reference(project)} "
find('.js-add-issuable-form-input').native.send_key(:enter)
fill_in 'Paste issue link', with: "#{issue_project_b_a.to_reference(project)} "
find_field('Paste issue link').native.send_key(:enter)
wait_for_requests
......@@ -276,9 +276,9 @@ RSpec.describe 'Related issues', :js do
it 'disallows duplicate entries' do
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set 'duplicate duplicate duplicate'
fill_in 'Paste issue link', with: 'duplicate duplicate duplicate'
items = all('.js-add-issuable-form-token-list-item')
items = all('.issue-token')
expect(items.count).to eq(1)
expect(items[0].text).to eq('duplicate')
......@@ -289,28 +289,34 @@ RSpec.describe 'Related issues', :js do
it 'allows us to remove pending issues' do
# Tests against https://gitlab.com/gitlab-org/gitlab/issues/11625
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set 'issue1 issue2 issue3 '
fill_in 'Paste issue link', with: 'issue1 issue2 issue3 '
items = all('.js-add-issuable-form-token-list-item')
items = all('.issue-token')
expect(items.count).to eq(3)
expect(items[0].text).to eq('issue1')
expect(items[1].text).to eq('issue2')
expect(items[2].text).to eq('issue3')
# Remove pending issues left to right to make sure none get stuck
items[0].find('.js-issue-token-remove-button').click
items = all('.js-add-issuable-form-token-list-item')
within items[0] do
click_button 'Remove'
end
items = all('.issue-token')
expect(items.count).to eq(2)
expect(items[0].text).to eq('issue2')
expect(items[1].text).to eq('issue3')
items[0].find('.js-issue-token-remove-button').click
items = all('.js-add-issuable-form-token-list-item')
within items[0] do
click_button 'Remove'
end
items = all('.issue-token')
expect(items.count).to eq(1)
expect(items[0].text).to eq('issue3')
items[0].find('.js-issue-token-remove-button').click
items = all('.js-add-issuable-form-token-list-item')
within items[0] do
click_button 'Remove'
end
items = all('.issue-token')
expect(items.count).to eq(0)
end
end
......@@ -352,8 +358,8 @@ RSpec.describe 'Related issues', :js do
it 'add related issue' do
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set "##{issue_d.iid} "
find('.js-add-issuable-form-add-button').click
fill_in 'Paste issue link', with: "##{issue_d.iid} "
click_button 'Add'
wait_for_requests
......@@ -368,8 +374,8 @@ RSpec.describe 'Related issues', :js do
it 'add invalid related issue' do
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set "#9999999 "
find('.js-add-issuable-form-add-button').click
fill_in 'Paste issue link', with: '#9999999 '
click_button 'Add'
wait_for_requests
......@@ -383,8 +389,8 @@ RSpec.describe 'Related issues', :js do
it 'add unauthorized related issue' do
click_button 'Add a related issue'
find('.js-add-issuable-form-input').set "#{issue_project_unauthorized_a.to_reference(project)} "
find('.js-add-issuable-form-add-button').click
fill_in 'Paste issue link', with: "#{issue_project_unauthorized_a.to_reference(project)} "
click_button 'Add'
wait_for_requests
......
import { mount, shallowMount } from '@vue/test-utils';
import AddIssuableForm from '~/related_issues/components/add_issuable_form.vue';
import IssueToken from '~/related_issues/components/issue_token.vue';
import { issuableTypesMap, linkedIssueTypesMap, PathIdSeparator } from '~/related_issues/constants';
const issuable1 = {
......@@ -22,7 +23,7 @@ const issuable2 = {
const pathIdSeparator = PathIdSeparator.Issue;
const findFormInput = (wrapper) => wrapper.find('.js-add-issuable-form-input').element;
const findFormInput = (wrapper) => wrapper.find('input').element;
const findRadioInput = (inputs, value) =>
inputs.filter((input) => input.element.value === value)[0];
......@@ -105,11 +106,11 @@ describe('AddIssuableForm', () => {
});
it('should put input value in place', () => {
expect(findFormInput(wrapper).value).toEqual(inputValue);
expect(findFormInput(wrapper).value).toBe(inputValue);
});
it('should render pending issuables items', () => {
expect(wrapper.findAll('.js-add-issuable-form-token-list-item').length).toEqual(2);
expect(wrapper.findAllComponents(IssueToken)).toHaveLength(2);
});
it('should not have disabled submit button', () => {
......
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