Fix incorrect autocompletion in related items UI

Fixes a bug where `#` would autocomplete issues within
related epics UI, and `&` would autocomplete epics within
related issues UI.

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

@@ -85,6 +85,16 @@ export default {
       required: false,
       default: true,
     },
+    autoCompleteEpics: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    autoCompleteIssues: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     hasRelatedIssues() {
@@ -198,6 +208,8 @@ export default {
             :input-value="inputValue"
             :pending-references="pendingReferences"
             :auto-complete-sources="autoCompleteSources"
+            :auto-complete-epics="autoCompleteEpics"
+            :auto-complete-issues="autoCompleteIssues"
             :path-id-separator="pathIdSeparator"
             @pendingIssuableRemoveRequest="$emit('pendingIssuableRemoveRequest', $event)"
             @addIssuableFormInput="$emit('addIssuableFormInput', $event)"

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

@@ -71,6 +71,16 @@ export default {
       required: false,
       default: true,
     },
+    autoCompleteEpics: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    autoCompleteIssues: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     pathIdSeparator: {
       type: String,
       required: false,
@@ -241,6 +251,8 @@ export default {
     :is-form-visible="isFormVisible"
     :input-value="inputValue"
     :auto-complete-sources="autoCompleteSources"
+    :auto-complete-epics="autoCompleteEpics"
+    :auto-complete-issues="autoCompleteIssues"
     :issuable-type="issuableType"
     :path-id-separator="pathIdSeparator"
     :show-categorized-issues="showCategorizedIssues"

app/assets/javascripts/related_issues/index.js

@@ -21,6 +21,7 @@ export default function initRelatedIssues() {
             showCategorizedIssues: parseBoolean(
               relatedIssuesRootElement.dataset.showCategorizedIssues,
             ),
+            autoCompleteEpics: false,
           },
         }),
     });

ee/app/assets/javascripts/linked_epics/linked_epics_bundle.js

@@ -30,6 +30,7 @@ export default function initRelatedEpics() {
             showCategorizedIssues: parseBoolean(showCategorizedEpics),
             pathIdSeparator: PathIdSeparator.Epic,
             issuableType: issuableTypesMap.EPIC,
+            autoCompleteIssues: false,
           },
         }),
     });

ee/app/views/groups/epics/show.html.haml

@@ -4,6 +4,7 @@
 
 - epic_reference = @epic.to_reference
 - sub_epics_feature_available = @group.licensed_feature_available?(:subepics)
+- related_epics_feature_available = @group.licensed_feature_available?(:related_epics)
 - issuable_health_status_feature_available = @group.licensed_feature_available?(:issuable_health_status)
 - scoped_labels_feature_available = @group.licensed_feature_available?(:scoped_labels)
 
@@ -72,7 +73,7 @@
               inner_height: '600',
               child_epics: 'true' } }
 
-  - if Feature.enabled?(:related_epics_widget, @group, default_enabled: :yaml)
+  - if related_epics_feature_available && Feature.enabled?(:related_epics_widget, @group, default_enabled: :yaml)
     #js-related-epics{ data: { endpoint: group_epic_related_epic_links_path(@group, @epic),
       can_add_related_epics: "#{can?(current_user, :admin_related_epic_link, @epic)}",
       help_path: help_page_path('user/group/epics/linked_epics'),

ee/spec/features/epics/epic_related_epics_spec.rb

@@ -5,13 +5,15 @@ require 'spec_helper'
 RSpec.describe 'Related Epics', :js do
   let_it_be(:user) { create(:user) }
   let_it_be(:group) { create(:group, :public) }
+  let_it_be(:project) { create(:project, :public, group: group) }
+  let_it_be(:issue) { create(:issue, project: project) }
   let_it_be(:epic1) { create(:epic, group: group) }
   let_it_be(:epic2) { create(:epic, group: group) }
   let_it_be(:epic3) { create(:epic, group: group) }
 
-  def visit_epic
+  def visit_epic(related_epics: true)
     group.add_developer(user)
-    stub_licensed_features(epics: true, related_epics: true)
+    stub_licensed_features(epics: true, related_epics: related_epics)
     sign_in(user)
     visit group_epic_path(group, epic1)
 
@@ -92,13 +94,24 @@ RSpec.describe 'Related Epics', :js do
         page.find('#add-related-issues-form-input').native.send_keys('&')
       end
 
-      expect(page).to have_selector('#at-view-epics')
-      expect(page.find('#at-view-epics')).to have_selector('li', count: 3)
+      wait_for_requests
+
+      expect(page).to have_selector('#at-view-epics .atwho-view-ul li', count: 3)
       [epic3, epic2, epic1].each_with_index do |epic, index|
         expect(page.find("#at-view-epics li:nth-child(#{index + 1})")).to have_content("&#{epic.iid} #{epic.title}")
       end
     end
 
+    it 'epic input field does not autocomplete issues when `#` is input', :aggregate_failures do
+      page.within('.js-add-related-issues-form-area') do
+        page.find('#add-related-issues-form-input').native.send_keys('#')
+      end
+
+      wait_for_requests
+
+      expect(page).not_to have_selector('#at-view-issues .atwho-view-ul li', count: 1)
+    end
+
     it 'user can view list of added epics as tokens within input field', :aggregate_failures do
       page.within('.js-add-related-issues-form-area .add-issuable-form-input-wrapper') do
         page.find('#add-related-issues-form-input').native.send_keys("&#{epic1.iid} ")
@@ -144,4 +157,18 @@ RSpec.describe 'Related Epics', :js do
       expect(page).not_to have_selector('div[data-link-type="relates_to"]')
     end
   end
+
+  describe 'when related epics is not supported by license' do
+    before do
+      stub_feature_flags(related_epics_widget: true)
+
+      visit_epic(related_epics: false)
+    end
+
+    it 'user can not view related epics section under epic description', :aggregate_failures do
+      page.within('.js-epic-container') do
+        expect(page).not_to have_selector('#related-issues')
+      end
+    end
+  end
 end

spec/frontend/issuable/related_issues/components/related_issues_block_spec.js

@@ -6,6 +6,7 @@ import {
   issuable3,
 } from 'jest/issuable/components/related_issuable_mock_data';
 import RelatedIssuesBlock from '~/related_issues/components/related_issues_block.vue';
+import AddIssuableForm from '~/related_issues/components/add_issuable_form.vue';
 import {
   issuableTypesMap,
   linkedIssueTypesMap,
@@ -139,6 +140,7 @@ describe('RelatedIssuesBlock', () => {
           pathIdSeparator: PathIdSeparator.Issue,
           isFormVisible: true,
           issuableType: 'issue',
+          autoCompleteEpics: false,
         },
       });
     });
@@ -146,6 +148,10 @@ describe('RelatedIssuesBlock', () => {
     it('shows add related issues form', () => {
       expect(wrapper.find('.js-add-related-issues-form-area').exists()).toBe(true);
     });
+
+    it('sets `autoCompleteEpics` to false for add-issuable-form', () => {
+      expect(wrapper.find(AddIssuableForm).props('autoCompleteEpics')).toBe(false);
+    });
   });
 
   describe('showCategorizedIssues prop', () => {