Fix "Add an epic" form

The "Add an epic" form in an epic wrongly showed radio buttons for
categorising the issuable as a blocking issue

changelogs/unreleased/207455-frontend-fix-epic-blform.yml

+---
+title: Fix "Add an epic" form
+merge_request: 26003
+author:
+type: fixed

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

@@ -83,6 +83,9 @@ export default {
     };
   },
   computed: {
+    isIssue() {
+      return this.issuableType === issuableTypesMap.ISSUE;
+    },
     isSubmitButtonDisabled() {
       return (
         (this.inputValue.length === 0 && this.pendingReferences.length === 0) || this.isSubmitting
@@ -123,6 +126,7 @@ export default {
 
 <template>
   <form @submit.prevent="onFormSubmit">
+    <template v-if="isIssue">
       <gl-form-group
         :label="__('The current issue')"
         label-for="linked-issue-type-radio"
@@ -139,6 +143,7 @@ export default {
       <p class="bold">
         {{ __('the following issue(s)') }}
       </p>
+    </template>
     <related-issuable-input
       ref="relatedIssuableInput"
       :focus-on-mount="true"

ee/spec/javascripts/issuable/related_issues/components/add_issuable_form_spec.js

-import { mount } from '@vue/test-utils';
-import { linkedIssueTypesMap, PathIdSeparator } from 'ee/related_issues/constants';
+import { mount, shallowMount } from '@vue/test-utils';
+import {
+  issuableTypesMap,
+  linkedIssueTypesMap,
+  PathIdSeparator,
+} from 'ee/related_issues/constants';
 import AddIssuableForm from 'ee/related_issues/components/add_issuable_form.vue';
 
 const issuable1 = {
@@ -26,6 +30,8 @@ const findFormInput = wrapper => wrapper.find('.js-add-issuable-form-input').ele
 
 const findRadioInput = (inputs, value) => inputs.filter(input => input.element.value === value)[0];
 
+const findRadioInputs = wrapper => wrapper.findAll('[name="linked-issue-type-radio"]');
+
 describe('AddIssuableForm', () => {
   let wrapper;
 
@@ -37,7 +43,7 @@ describe('AddIssuableForm', () => {
     describe('without references', () => {
       describe('without any input text', () => {
         beforeEach(() => {
-          wrapper = mount(AddIssuableForm, {
+          wrapper = shallowMount(AddIssuableForm, {
             propsData: {
               inputValue: '',
               pendingReferences: [],
@@ -54,7 +60,7 @@ describe('AddIssuableForm', () => {
 
       describe('with input text', () => {
         beforeEach(() => {
-          wrapper = mount(AddIssuableForm, {
+          wrapper = shallowMount(AddIssuableForm, {
             propsData: {
               inputValue: 'foo',
               pendingReferences: [],
@@ -95,11 +101,27 @@ describe('AddIssuableForm', () => {
       });
     });
 
+    describe('when issuable type is "issue"', () => {
+      beforeEach(() => {
+        wrapper = mount(AddIssuableForm, {
+          propsData: {
+            inputValue: '',
+            issuableType: issuableTypesMap.ISSUE,
+            pathIdSeparator,
+            pendingReferences: [],
+          },
+        });
+      });
+
+      it('shows radio inputs to allow categorisation of blocking issues', () => {
+        expect(findRadioInputs(wrapper).length).toBeGreaterThan(0);
+      });
+
       describe('form radio buttons', () => {
         let radioInputs;
 
         beforeEach(() => {
-        radioInputs = wrapper.findAll('[name="linked-issue-type-radio"]');
+          radioInputs = findRadioInputs(wrapper);
         });
 
         it('shows "relates to" option', () => {
@@ -120,16 +142,6 @@ describe('AddIssuableForm', () => {
       });
 
       describe('when the form is submitted', () => {
-      beforeEach(() => {
-        wrapper = mount(AddIssuableForm, {
-          propsData: {
-            inputValue: '',
-            pendingReferences: [],
-            pathIdSeparator,
-          },
-        });
-      });
-
         it('emits an event with a "relates_to" link type when the "relates to" radio input selected', done => {
           spyOn(wrapper.vm, '$emit');
 
@@ -190,4 +202,22 @@ describe('AddIssuableForm', () => {
         });
       });
     });
+
+    describe('when issuable type is "epic"', () => {
+      beforeEach(() => {
+        wrapper = shallowMount(AddIssuableForm, {
+          propsData: {
+            inputValue: '',
+            issuableType: issuableTypesMap.EPIC,
+            pathIdSeparator,
+            pendingReferences: [],
+          },
+        });
+      });
+
+      it('does not show radio inputs', () => {
+        expect(findRadioInputs(wrapper).length).toBe(0);
+      });
+    });
+  });
 });