Improve related issues code

app/assets/javascripts/related_issues/components/add_issuable_form.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

 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', () => {