1 files changed, 29 insertions, 40 deletions

diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue
index 1c88f8dfdca..b0af3612e05 100644
--- a/app/assets/javascripts/issuable/components/csv_export_modal.vue
+++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue
@@ -1,9 +1,14 @@
 <script>
 import { GlButton, GlModal, GlSprintf, GlIcon } from '@gitlab/ui';
+import { __, n__ } from '~/locale';
 import { ISSUABLE_TYPE } from '../constants';
 
 export default {
-  name: 'CsvExportModal',
+  i18n: {
+    exportText: __(
+      'The CSV export will be created in the background. Once finished, it will be sent to %{email} in an attachment.',
+    ),
+  },
   components: {
     GlButton,
     GlModal,
@@ -32,53 +37,39 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      issuableName: this.issuableType === ISSUABLE_TYPE.issues ? 'issues' : 'merge requests',
-    };
+  computed: {
+    isIssue() {
+      return this.issuableType === ISSUABLE_TYPE.issues;
+    },
+    exportText() {
+      return this.isIssue ? __('Export issues') : __('Export merge requests');
+    },
+    issuableCountText() {
+      return this.isIssue
+        ? n__('1 issue selected', '%d issues selected', this.issuableCount)
+        : n__('1 merge request selected', '%d merge requests selected', this.issuableCount);
+    },
   },
-  issueableType: ISSUABLE_TYPE,
 };
 </script>
 
 <template>
-  <gl-modal :modal-id="modalId" body-class="gl-p-0!" data-qa-selector="export_issuable_modal">
-    <template #modal-title>
-      <gl-sprintf :message="__('Export %{name}')">
-        <template #name>{{ issuableName }}</template>
-      </gl-sprintf>
-    </template>
+  <gl-modal
+    :modal-id="modalId"
+    body-class="gl-p-0!"
+    :title="exportText"
+    data-qa-selector="export_issuable_modal"
+  >
     <div
-      v-if="issuableCount > -1"
       class="gl-justify-content-start gl-align-items-center gl-p-4 gl-border-b-solid gl-border-1 gl-border-gray-50"
     >
       <gl-icon name="check" class="gl-color-green-400" />
-      <strong class="gl-m-3">
-        <gl-sprintf
-          v-if="issuableType === $options.issueableType.issues"
-          :message="n__('1 issue selected', '%d issues selected', issuableCount)"
-        >
-          <template #issuableCount>{{ issuableCount }}</template>
-        </gl-sprintf>
-        <gl-sprintf
-          v-else
-          :message="n__('1 merge request selected', '%d merge requests selected', issuableCount)"
-        >
-          <template #issuableCount>{{ issuableCount }}</template>
-        </gl-sprintf>
-      </strong>
+      <strong class="gl-m-3">{{ issuableCountText }}</strong>
     </div>
     <div class="modal-text gl-px-4 gl-py-5">
-      <gl-sprintf
-        :message="
-          __(
-            `The CSV export will be created in the background. Once finished, it will be sent to %{strongStart}${email}%{strongEnd} in an attachment.`,
-          )
-        "
-      >
-        <template #strong="{ content }">
-          <strong>{{ content }}</strong>
+      <gl-sprintf :message="$options.i18n.exportText">
+        <template #email>
+          <strong>{{ email }}</strong>
         </template>
       </gl-sprintf>
     </div>
@@ -92,9 +83,7 @@ export default {
         data-track-action="click_button"
         :data-track-label="`export_${issuableType}_csv`"
       >
-        <gl-sprintf :message="__('Export %{name}')">
-          <template #name>{{ issuableName }}</template>
-        </gl-sprintf>
+        {{ exportText }}
       </gl-button>
     </template>
   </gl-modal>