Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

4 files changed, 52 insertions, 5 deletions

diff --git a/app/assets/javascripts/related_issues/components/add_issuable_form.vue b/app/assets/javascripts/related_issues/components/add_issuable_form.vue
index f936c03c5d3..9ee2e7a4ffd 100644
--- a/app/assets/javascripts/related_issues/components/add_issuable_form.vue
+++ b/app/assets/javascripts/related_issues/components/add_issuable_form.vue
@@ -9,6 +9,8 @@ import {
   linkedIssueTypesMap,
   addRelatedIssueErrorMap,
   addRelatedItemErrorMap,
+  issuablesFormCategoryHeaderTextMap,
+  issuablesFormInputTextMap,
 } from '../constants';
 import RelatedIssuableInput from './related_issuable_input.vue';
 
@@ -134,6 +136,12 @@ export default {
         epics: mergeUrlParams({ confidential_only: true }, this.autoCompleteSources.epics),
       };
     },
+    issuableCategoryHeaderText() {
+      return issuablesFormCategoryHeaderTextMap[this.issuableType];
+    },
+    issuableInputText() {
+      return issuablesFormInputTextMap[this.issuableType];
+    },
   },
   methods: {
     onPendingIssuableRemoveRequest(params) {
@@ -162,7 +170,7 @@ export default {
   <form @submit.prevent="onFormSubmit">
     <template v-if="showCategorizedIssues">
       <gl-form-group
-        :label="__('The current issue')"
+        :label="issuableCategoryHeaderText"
         label-for="linked-issue-type-radio"
         label-class="label-bold"
         class="mb-2"
@@ -175,7 +183,7 @@ export default {
         />
       </gl-form-group>
       <p class="bold">
-        {{ __('the following issue(s)') }}
+        {{ issuableInputText }}
       </p>
     </template>
     <related-issuable-input
diff --git a/app/assets/javascripts/related_issues/components/related_issues_block.vue b/app/assets/javascripts/related_issues/components/related_issues_block.vue
index 94535e1b8c9..bc97fab9ad2 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_block.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue
@@ -5,6 +5,9 @@ import {
   issuableQaClassMap,
   linkedIssueTypesMap,
   linkedIssueTypesTextMap,
+  issuablesBlockHeaderTextMap,
+  issuablesBlockHelpTextMap,
+  issuablesBlockAddButtonTextMap,
 } from '../constants';
 import AddIssuableForm from './add_issuable_form.vue';
 import RelatedIssuesList from './related_issues_list.vue';
@@ -105,6 +108,15 @@ export default {
     hasBody() {
       return this.isFormVisible || this.shouldShowTokenBody;
     },
+    headerText() {
+      return issuablesBlockHeaderTextMap[this.issuableType];
+    },
+    helpLinkText() {
+      return issuablesBlockHelpTextMap[this.issuableType];
+    },
+    addIssuableButtonText() {
+      return issuablesBlockAddButtonTextMap[this.issuableType];
+    },
     badgeLabel() {
       return this.isFetching && this.relatedIssues.length === 0 ? '...' : this.relatedIssues.length;
     },
@@ -138,13 +150,14 @@ export default {
             href="#related-issues"
             aria-hidden="true"
           />
-          <slot name="header-text">{{ __('Linked issues') }}</slot>
+          <slot name="header-text">{{ headerText }}</slot>
           <gl-link
             v-if="hasHelpPath"
             :href="helpPath"
             target="_blank"
             class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-500"
-            :aria-label="__('Read more about related issues')"
+            data-testid="help-link"
+            :aria-label="helpLinkText"
           >
             <gl-icon name="question" :size="12" />
           </gl-link>
@@ -160,7 +173,7 @@ export default {
               v-if="canAdmin"
               data-qa-selector="related_issues_plus_button"
               icon="plus"
-              :aria-label="__('Add a related issue')"
+              :aria-label="addIssuableButtonText"
               :class="qaClass"
               @click="$emit('toggleAddRelatedIssuesForm', $event)"
             />
diff --git a/app/assets/javascripts/related_issues/constants.js b/app/assets/javascripts/related_issues/constants.js
index 89eae069a24..f911468d8f1 100644
--- a/app/assets/javascripts/related_issues/constants.js
+++ b/app/assets/javascripts/related_issues/constants.js
@@ -104,3 +104,28 @@ export const PathIdSeparator = {
   Epic: '&',
   Issue: '#',
 };
+
+export const issuablesBlockHeaderTextMap = {
+  [issuableTypesMap.ISSUE]: __('Linked issues'),
+  [issuableTypesMap.EPIC]: __('Linked epics'),
+};
+
+export const issuablesBlockHelpTextMap = {
+  [issuableTypesMap.ISSUE]: __('Read more about related issues'),
+  [issuableTypesMap.EPIC]: __('Read more about related epics'),
+};
+
+export const issuablesBlockAddButtonTextMap = {
+  [issuableTypesMap.ISSUE]: __('Add a related issue'),
+  [issuableTypesMap.EPIC]: __('Add a related epic'),
+};
+
+export const issuablesFormCategoryHeaderTextMap = {
+  [issuableTypesMap.ISSUE]: __('The current issue'),
+  [issuableTypesMap.EPIC]: __('The current epic'),
+};
+
+export const issuablesFormInputTextMap = {
+  [issuableTypesMap.ISSUE]: __('the following issue(s)'),
+  [issuableTypesMap.EPIC]: __('the following epic(s)'),
+};
diff --git a/app/assets/javascripts/related_issues/index.js b/app/assets/javascripts/related_issues/index.js
index 0ee99df1455..35858be90b2 100644
--- a/app/assets/javascripts/related_issues/index.js
+++ b/app/assets/javascripts/related_issues/index.js
@@ -8,6 +8,7 @@ export default function initRelatedIssues() {
     // eslint-disable-next-line no-new
     new Vue({
       el: relatedIssuesRootElement,
+      name: 'RelatedIssuesRoot',
       components: {
         relatedIssuesRoot: RelatedIssuesRoot,
       },