Pass issuable-type in AddIssuableForm

Pass a prop called issuable-type from EpicShowApp down to
AddIssuableForm in a backward compatible way. Right now, the
issuable-type can take two values: 'epic' and 'issue' which is
needed mostly for the display purposes in the Input field which asks,
"Paste issue link" or "Paste epic link".

ee/app/assets/javascripts/epics/epic_show/components/epic_show_app.vue

@@ -328,6 +328,7 @@ export default {
         :allow-auto-complete="false"
         :path-id-separator="$options.epicsPathIdSeparator"
         :title="__('Epics')"
+        :issuable-type="__('epic')"
         css-class="js-related-epics-block"
       />
       <related-issues-root
@@ -336,6 +337,7 @@ export default {
         :can-reorder="canAdmin"
         :allow-auto-complete="false"
         :title="__('Issues')"
+        :issuable-type="__('issue')"
         css-class="js-related-issues-block"
         path-id-separator="#"
       />

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

@@ -3,6 +3,7 @@ import $ from 'jquery';
 import GfmAutoComplete from '~/gfm_auto_complete';
 import { GlLoadingIcon } from '@gitlab/ui';
 import issueToken from './issue_token.vue';
+import { autoCompleteTextMap, inputPlaceholderTextMap } from '../constants';
 
 export default {
   name: 'AddIssuableForm',
@@ -34,6 +35,11 @@ export default {
       type: String,
       required: true,
     },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
   },
 
   data() {
@@ -45,7 +51,9 @@ export default {
 
   computed: {
     inputPlaceholder() {
-      return `Paste issue link${this.allowAutoComplete ? ' or <#issue id>' : ''}`;
+      const { issuableType, allowAutoComplete } = this;
+      const allowAutoCompleteText = autoCompleteTextMap[allowAutoComplete][issuableType];
+      return `${inputPlaceholderTextMap[issuableType]}${allowAutoCompleteText}`;
     },
     isSubmitButtonDisabled() {
       return (

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

@@ -78,6 +78,10 @@ export default {
       required: false,
       default: 'Related issues',
     },
+    issuableType: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     hasRelatedIssues() {
@@ -183,6 +187,7 @@ export default {
       >
         <add-issuable-form
           :is-submitting="isSubmitting"
+          :issuable-type="issuableType"
           :input-value="inputValue"
           :pending-references="pendingReferences"
           :auto-complete-sources="autoCompleteSources"

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

@@ -28,6 +28,11 @@ import Flash from '~/flash';
 import RelatedIssuesBlock from './related_issues_block.vue';
 import RelatedIssuesStore from '../stores/related_issues_store';
 import RelatedIssuesService from '../services/related_issues_service';
+import {
+  relatedIssuesRemoveErrorMap,
+  pathIndeterminateErrorMap,
+  addRelatedIssueErrorMap,
+} from '../constants';
 
 const SPACE_FACTOR = 1;
 
@@ -61,6 +66,11 @@ export default {
       required: false,
       default: 'Related issues',
     },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
     allowAutoComplete: {
       type: Boolean,
       required: false,
@@ -110,11 +120,11 @@ export default {
           })
           .catch(res => {
             if (res && res.status !== 404) {
-              Flash('An error occurred while removing issues.');
+              Flash(relatedIssuesRemoveErrorMap[this.issuableType]);
             }
           });
       } else {
-        Flash('We could not determine the path to remove the issue');
+        Flash(pathIndeterminateErrorMap[this.issuableType]);
       }
     },
     onToggleAddRelatedIssuesForm() {
@@ -142,7 +152,7 @@ export default {
           })
           .catch(res => {
             this.isSubmitting = false;
-            let errorMessage = "We can't find an issue that matches what you are looking for.";
+            let errorMessage = addRelatedIssueErrorMap[this.issuableType];
             if (res.data && res.data.message) {
               errorMessage = res.data.message;
             }
@@ -239,6 +249,7 @@ export default {
     :input-value="inputValue"
     :auto-complete-sources="autoCompleteSources"
     :title="title"
+    :issuable-type="issuableType"
     :path-id-separator="pathIdSeparator"
     @saveReorder="saveIssueOrder"
     @toggleAddRelatedIssuesForm="onToggleAddRelatedIssuesForm"

ee/app/assets/javascripts/related_issues/constants.js

+import { __ } from '~/locale';
+
+export const autoCompleteTextMap = {
+  true: {
+    issue: __(' or <#issue id>'),
+    epic: __(' or <#epic id>'),
+  },
+  false: {
+    issue: '',
+    epic: '',
+  },
+};
+
+export const inputPlaceholderTextMap = {
+  issue: __('Paste issue link'),
+  epic: __('Paste epic link'),
+};
+
+export const relatedIssuesRemoveErrorMap = {
+  issue: __('An error occurred while removing issues.'),
+  epic: __('An error occurred while removing epics.'),
+};
+
+export const pathIndeterminateErrorMap = {
+  issue: __('We could not determine the path to remove the issue'),
+  epic: __('We could not determine the path to remove the epic'),
+};
+
+export const addRelatedIssueErrorMap = {
+  issue: __("We can't find an issue that matches what you are looking for."),
+  epic: __("We can't find an epic that matches what you are looking for."),
+};

ee/changelogs/unreleased/9125-epic-placeholder.yml

+---
+title: Pass issuable-type in AddIssuableForm
+merge_request: 9111
+author:
+type: other

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

@@ -22,6 +22,7 @@ describe('RelatedIssuesBlock', () => {
       vm = new RelatedIssuesBlock({
         propsData: {
           pathIdSeparator: '#',
+          issuableType: 'issue',
         },
       }).$mount();
     });
@@ -45,6 +46,7 @@ describe('RelatedIssuesBlock', () => {
         propsData: {
           pathIdSeparator: '#',
           isFetching: true,
+          issuableType: 'issue',
         },
       }).$mount();
     });
@@ -64,6 +66,7 @@ describe('RelatedIssuesBlock', () => {
         propsData: {
           pathIdSeparator: '#',
           canAdmin: true,
+          issuableType: 'issue',
         },
       }).$mount();
     });
@@ -79,6 +82,7 @@ describe('RelatedIssuesBlock', () => {
         propsData: {
           pathIdSeparator: '#',
           isFormVisible: true,
+          issuableType: 'issue',
         },
       }).$mount();
     });
@@ -94,6 +98,7 @@ describe('RelatedIssuesBlock', () => {
         propsData: {
           pathIdSeparator: '#',
           relatedIssues: [issuable1, issuable2],
+          issuableType: 'issue',
         },
       }).$mount();
     });
@@ -109,6 +114,7 @@ describe('RelatedIssuesBlock', () => {
         propsData: {
           pathIdSeparator: '#',
           relatedIssues: [issuable1, issuable2, issuable3, issuable4, issuable5],
+          issuableType: 'issue',
         },
       }).$mount();
     });

locale/gitlab.pot

@@ -35,6 +35,12 @@ msgstr[1] ""
 msgid " or "
 msgstr ""
 
+msgid " or <#epic id>"
+msgstr ""
+
+msgid " or <#issue id>"
+msgstr ""
+
 msgid "\"%{query}\" in projects"
 msgstr ""
 
@@ -763,6 +769,12 @@ msgstr ""
 msgid "An error occurred while removing approver"
 msgstr ""
 
+msgid "An error occurred while removing epics."
+msgstr ""
+
+msgid "An error occurred while removing issues."
+msgstr ""
+
 msgid "An error occurred while rendering KaTeX"
 msgstr ""
 
@@ -6362,6 +6374,12 @@ msgstr ""
 msgid "Password"
 msgstr ""
 
+msgid "Paste epic link"
+msgstr ""
+
+msgid "Paste issue link"
+msgstr ""
+
 msgid "Paste your public SSH key, which is usually contained in the file '~/.ssh/id_rsa.pub' and begins with 'ssh-rsa'. Don't use your private SSH key."
 msgstr ""
 
@@ -9939,6 +9957,18 @@ msgstr ""
 msgid "Want to see the data? Please ask an administrator for access."
 msgstr ""
 
+msgid "We can't find an epic that matches what you are looking for."
+msgstr ""
+
+msgid "We can't find an issue that matches what you are looking for."
+msgstr ""
+
+msgid "We could not determine the path to remove the epic"
+msgstr ""
+
+msgid "We could not determine the path to remove the issue"
+msgstr ""
+
 msgid "We detected potential spam in the %{humanized_resource_name}. Please solve the reCAPTCHA to proceed."
 msgstr ""
 
@@ -10652,6 +10682,9 @@ msgstr[1] ""
 msgid "enabled"
 msgstr ""
 
+msgid "epic"
+msgstr ""
+
 msgid "error"
 msgstr ""
 
@@ -10708,6 +10741,9 @@ msgstr ""
 msgid "is out of the hierarchy of the Group owning the template"
 msgstr ""
 
+msgid "issue"
+msgstr ""
+
 msgid "issue boards"
 msgstr ""