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,22 +126,24 @@ export default {
 
 <template>
   <form @submit.prevent="onFormSubmit">
-    <gl-form-group
-      :label="__('The current issue')"
-      label-for="linked-issue-type-radio"
-      label-class="label-bold"
-      class="mb-2"
-    >
-      <gl-form-radio-group
-        id="linked-issue-type-radio"
-        v-model="linkedIssueType"
-        :options="linkedIssueTypes"
-        :checked="linkedIssueType"
-      />
-    </gl-form-group>
-    <p class="bold">
-      {{ __('the following issue(s)') }}
-    </p>
+    <template v-if="isIssue">
+      <gl-form-group
+        :label="__('The current issue')"
+        label-for="linked-issue-type-radio"
+        label-class="label-bold"
+        class="mb-2"
+      >
+        <gl-form-radio-group
+          id="linked-issue-type-radio"
+          v-model="linkedIssueType"
+          :options="linkedIssueTypes"
+          :checked="linkedIssueType"
+        />
+      </gl-form-group>
+      <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,99 +101,123 @@ describe('AddIssuableForm', () => {
       });
     });
 
-    describe('form radio buttons', () => {
-      let radioInputs;
-
+    describe('when issuable type is "issue"', () => {
       beforeEach(() => {
-        radioInputs = wrapper.findAll('[name="linked-issue-type-radio"]');
+        wrapper = mount(AddIssuableForm, {
+          propsData: {
+            inputValue: '',
+            issuableType: issuableTypesMap.ISSUE,
+            pathIdSeparator,
+            pendingReferences: [],
+          },
+        });
       });
 
-      it('shows "relates to" option', () => {
-        expect(findRadioInput(radioInputs, linkedIssueTypesMap.RELATES_TO)).not.toBeNull();
+      it('shows radio inputs to allow categorisation of blocking issues', () => {
+        expect(findRadioInputs(wrapper).length).toBeGreaterThan(0);
       });
 
-      it('shows "blocks" option', () => {
-        expect(findRadioInput(radioInputs, linkedIssueTypesMap.BLOCKS)).not.toBeNull();
-      });
+      describe('form radio buttons', () => {
+        let radioInputs;
 
-      it('shows "is blocked by" option', () => {
-        expect(findRadioInput(radioInputs, linkedIssueTypesMap.IS_BLOCKED_BY)).not.toBeNull();
-      });
+        beforeEach(() => {
+          radioInputs = findRadioInputs(wrapper);
+        });
 
-      it('shows 3 options in total', () => {
-        expect(radioInputs.length).toBe(3);
-      });
-    });
+        it('shows "relates to" option', () => {
+          expect(findRadioInput(radioInputs, linkedIssueTypesMap.RELATES_TO)).not.toBeNull();
+        });
 
-    describe('when the form is submitted', () => {
-      beforeEach(() => {
-        wrapper = mount(AddIssuableForm, {
-          propsData: {
-            inputValue: '',
-            pendingReferences: [],
-            pathIdSeparator,
-          },
+        it('shows "blocks" option', () => {
+          expect(findRadioInput(radioInputs, linkedIssueTypesMap.BLOCKS)).not.toBeNull();
+        });
+
+        it('shows "is blocked by" option', () => {
+          expect(findRadioInput(radioInputs, linkedIssueTypesMap.IS_BLOCKED_BY)).not.toBeNull();
+        });
+
+        it('shows 3 options in total', () => {
+          expect(radioInputs.length).toBe(3);
         });
       });
 
-      it('emits an event with a "relates_to" link type when the "relates to" radio input selected', done => {
-        spyOn(wrapper.vm, '$emit');
+      describe('when the form is submitted', () => {
+        it('emits an event with a "relates_to" link type when the "relates to" radio input selected', done => {
+          spyOn(wrapper.vm, '$emit');
 
-        wrapper.vm.linkedIssueType = linkedIssueTypesMap.RELATES_TO;
-        wrapper.vm.onFormSubmit();
+          wrapper.vm.linkedIssueType = linkedIssueTypesMap.RELATES_TO;
+          wrapper.vm.onFormSubmit();
 
-        wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
-            pendingReferences: '',
-            linkedIssueType: linkedIssueTypesMap.RELATES_TO,
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
+              pendingReferences: '',
+              linkedIssueType: linkedIssueTypesMap.RELATES_TO,
+            });
+            done();
           });
-          done();
         });
-      });
 
-      it('emits an event with a "blocks" link type when the "blocks" radio input selected', done => {
-        spyOn(wrapper.vm, '$emit');
+        it('emits an event with a "blocks" link type when the "blocks" radio input selected', done => {
+          spyOn(wrapper.vm, '$emit');
 
-        wrapper.vm.linkedIssueType = linkedIssueTypesMap.BLOCKS;
-        wrapper.vm.onFormSubmit();
+          wrapper.vm.linkedIssueType = linkedIssueTypesMap.BLOCKS;
+          wrapper.vm.onFormSubmit();
 
-        wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
-            pendingReferences: '',
-            linkedIssueType: linkedIssueTypesMap.BLOCKS,
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
+              pendingReferences: '',
+              linkedIssueType: linkedIssueTypesMap.BLOCKS,
+            });
+            done();
           });
-          done();
         });
-      });
 
-      it('emits an event with a "is_blocked_by" link type when the "is blocked by" radio input selected', done => {
-        spyOn(wrapper.vm, '$emit');
+        it('emits an event with a "is_blocked_by" link type when the "is blocked by" radio input selected', done => {
+          spyOn(wrapper.vm, '$emit');
 
-        wrapper.vm.linkedIssueType = linkedIssueTypesMap.IS_BLOCKED_BY;
-        wrapper.vm.onFormSubmit();
+          wrapper.vm.linkedIssueType = linkedIssueTypesMap.IS_BLOCKED_BY;
+          wrapper.vm.onFormSubmit();
 
-        wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
-            pendingReferences: '',
-            linkedIssueType: linkedIssueTypesMap.IS_BLOCKED_BY,
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
+              pendingReferences: '',
+              linkedIssueType: linkedIssueTypesMap.IS_BLOCKED_BY,
+            });
+            done();
           });
-          done();
         });
-      });
 
-      it('shows error message when error is present', done => {
-        const itemAddFailureMessage = 'Something went wrong while submitting.';
-        wrapper.setProps({
-          hasError: true,
-          itemAddFailureMessage,
+        it('shows error message when error is present', done => {
+          const itemAddFailureMessage = 'Something went wrong while submitting.';
+          wrapper.setProps({
+            hasError: true,
+            itemAddFailureMessage,
+          });
+
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.find('.gl-field-error').exists()).toBe(true);
+            expect(wrapper.find('.gl-field-error').text()).toContain(itemAddFailureMessage);
+            done();
+          });
         });
+      });
+    });
 
-        wrapper.vm.$nextTick(() => {
-          expect(wrapper.find('.gl-field-error').exists()).toBe(true);
-          expect(wrapper.find('.gl-field-error').text()).toContain(itemAddFailureMessage);
-          done();
+    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);
+      });
     });
   });
 });