Fix #11625 - Can't delete related issues if it has more than 3 links

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

@@ -143,7 +143,7 @@ export default {
         -->
         <li
           v-for="(reference, index) in pendingReferences"
-          :key="`related-issues-token-${index}`"
+          :key="`related-issues-token-${reference}`"
           class="js-add-issuable-form-token-list-item add-issuable-form-token-list-item"
         >
           <issue-token

ee/app/assets/javascripts/related_issues/stores/related_issues_store.js

@@ -24,7 +24,9 @@ class RelatedIssuesStore {
   }
 
   setPendingReferences(issues) {
-    this.state.pendingReferences = issues;
+    // Remove duplicates but retain order.
+    // If you don't do this, Vue will be confused by duplicates and refuse to delete them all.
+    this.state.pendingReferences = issues.filter((ref, idx) => issues.indexOf(ref) === idx);
   }
 
   removePendingRelatedIssue(indexToRemove) {

ee/changelogs/unreleased/61312-cant-delete-related-issues-2.yml

+---
+title: Fixed a bug where removing related issues could get stuck
+merge_request: 12316
+author:
+type: fixed

ee/spec/features/issuables/related_issues_spec.rb

@@ -295,6 +295,46 @@ describe 'Related issues', :js do
           expect(items[0].text).to eq(issue_project_b_a.title)
           expect(find('.js-related-issues-header-issue-count')).to have_content('1')
         end
+
+        it 'disallows duplicate entries' do
+          find('.js-issue-count-badge-add-button').click
+          find('.js-add-issuable-form-input').set 'duplicate duplicate duplicate'
+
+          items = all('.js-add-issuable-form-token-list-item')
+          expect(items.count).to eq(1)
+          expect(items[0].text).to eq('duplicate')
+
+          # Pending issues aren't counted towards the related issue count
+          expect(find('.js-related-issues-header-issue-count')).to have_content('0')
+        end
+
+        it 'allows us to remove pending issues' do
+          # Tests against https://gitlab.com/gitlab-org/gitlab-ee/issues/11625
+          find('.js-issue-count-badge-add-button').click
+          find('.js-add-issuable-form-input').set 'issue1 issue2 issue3 '
+
+          items = all('.js-add-issuable-form-token-list-item')
+          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')
+          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')
+          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')
+          expect(items.count).to eq(0)
+        end
       end
 
       context 'with existing related issues' do