Skip to content

G
gitlab-ce
Commit 11942424 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch 'cngo-improve-related-issues-code' into 'master' 

Improve related issues code

See merge request gitlab-org/gitlab!71409
parents 09e33a2c 155cd4da
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 97 deletions
app/assets/javascripts/related_issues/components/add_issuable_form.vue
View file @ 11942424
......@@ -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') }}
......
app/assets/javascripts/related_issues/components/issue_token.vue
View file @ 11942424
......@@ -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" />
......
app/assets/javascripts/related_issues/components/related_issuable_input.vue
View file @ 11942424
......@@ -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"
......
app/assets/stylesheets/pages/issuable.scss
View file @ 11942424
......@@ -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;
}
}
......
ee/app/assets/stylesheets/pages/issuable.scss
View file @ 11942424
......@@ -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 {
......
ee/spec/features/epics/epic_issues_spec.rb
View file @ 11942424
......@@ -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
......
ee/spec/features/epics/epic_show_spec.rb
View file @ 11942424
......@@ -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
......
ee/spec/features/issues/related_issues_spec.rb
View file @ 11942424
......@@ -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
......
spec/features/issues/related_issues_spec.rb
View file @ 11942424
......@@ -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
......
spec/frontend/issuable/related_issues/components/add_issuable_form_spec.js
View file @ 11942424
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7