Refactor i18n into $options object

* Use $options.i18n

ee/app/assets/javascripts/security_dashboard/components/pipeline/security_reports_summary.vue

@@ -12,7 +12,7 @@ import { getFormattedSummary } from 'ee/security_dashboard/helpers';
 import Modal from 'ee/vue_shared/security_reports/components/dast_modal.vue';
 import AccessorUtilities from '~/lib/utils/accessor';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
-import { s__, __ } from '~/locale';
+import { s__, __, n__ } from '~/locale';
 import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
 import { extractSecurityReportArtifacts } from '~/vue_shared/security_reports/utils';
 import {
@@ -45,6 +45,16 @@ export default {
       default: () => [],
     },
   },
+  i18n: {
+    scannedResources: s__('SecurityReports|scanned resources'),
+    scanDetails: s__('SecurityReports|Scan details'),
+    downloadUrls: s__('SecurityReports|Download scanned URLs'),
+    downloadResults: s__('SecurityReports|Download results'),
+    hideDetails: __('Hide details'),
+    showDetails: __('Show details'),
+    vulnerabilities: (count) => n__('%d vulnerability', '%d vulnerabilities', count),
+    scannedUrls: (count) => n__('%d URL scanned', '%d URLs scanned', count),
+  },
   data() {
     return {
       isVisible: true,
@@ -52,7 +62,7 @@ export default {
   },
   computed: {
     collapseButtonLabel() {
-      return this.isVisible ? __('Hide details') : __('Show details');
+      return this.isVisible ? this.$options.i18n.hideDetails : this.$options.i18n.showDetails;
     },
     formattedSummary() {
       return getFormattedSummary(this.summary);
@@ -96,7 +106,7 @@ export default {
     },
     buildDastArtifacts(scanSummary) {
       const csvArtifact = {
-        name: s__('SecurityReports|scanned resources'),
+        name: this.$options.i18n.scannedResources,
         path: this.downloadLink(scanSummary),
         reportType: REPORT_TYPE_DAST,
       };
@@ -112,7 +122,7 @@ export default {
     <template #header>
       <div class="row">
         <div class="col-7">
-          <strong>{{ s__('SecurityReports|Scan details') }}</strong>
+          <strong>{{ $options.i18n.scanDetails }}</strong>
         </div>
         <div v-if="localStorageUsable" class="col-5 gl-text-right">
           <gl-button
@@ -130,11 +140,7 @@ export default {
           {{ scanType }}
         </div>
         <div class="col-4">
-          <gl-sprintf
-            :message="
-              n__('%d vulnerability', '%d vulnerabilities', scanSummary.vulnerabilitiesCount)
-            "
-          />
+          <gl-sprintf :message="$options.i18n.vulnerabilities(scanSummary.vulnerabilitiesCount)" />
         </div>
         <div class="col-4">
           <template v-if="scanSummary.scannedResourcesCount !== undefined">
@@ -145,14 +151,12 @@ export default {
               size="small"
               data-testid="modal-button"
             >
-              {{ s__('SecurityReports|Download scanned URLs') }}
+              {{ $options.i18n.downloadUrls }}
             </gl-button>
 
             <template v-else>
               (<gl-sprintf
-                :message="
-                  n__('%d URL scanned', '%d URLs scanned', scanSummary.scannedResourcesCount)
-                "
+                :message="$options.i18n.scannedUrls(scanSummary.scannedResourcesCount)"
               />)
             </template>
 
@@ -166,7 +170,7 @@ export default {
 
           <template v-else-if="hasDastArtifactDownload(scanSummary)">
             <security-report-download-dropdown
-              :text="s__('SecurityReports|Download results')"
+              :text="$options.i18n.downloadResults"
               :artifacts="buildDastArtifacts(scanSummary)"
               data-testid="download-link"
             />
@@ -174,7 +178,7 @@ export default {
 
           <security-report-download-dropdown
             v-else
-            :text="s__('SecurityReports|Download results')"
+            :text="$options.i18n.downloadResults"
             :artifacts="findArtifacts(scanType)"
           />
         </div>

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -8,7 +8,7 @@ import {
   GlModalDirective,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, n__, __ } from '~/locale';
 import { componentNames } from 'ee/reports/components/issue_body';
 import { fetchPolicies } from '~/lib/graphql';
 import { mrStates } from '~/mr_popover/constants';
@@ -249,6 +249,18 @@ export default {
       required: true,
     },
   },
+  i18n: {
+    scannedResources: s__('SecurityReports|scanned resources'),
+    viewReport: s__('ciReport|View full report'),
+    divergedFromTargetBranch: __(
+      'Security report is out of date. Please update your branch with the latest changes from the target branch (%{targetBranchName})',
+    ),
+    baseSecurityReportOutOfDate: __(
+      'Security report is out of date. Run %{newPipelineLinkStart}a new pipeline%{newPipelineLinkEnd} for the target branch (%{targetBranchName})',
+    ),
+    viewDetails: __('View details'),
+    scannedUrls: (count) => n__('%d URL scanned', '%d URLs scanned', count),
+  },
   componentNames,
   computed: {
     ...mapState([
@@ -356,7 +368,7 @@ export default {
     dastCsvArtifacts() {
       return [
         {
-          name: s__('SecurityReports|scanned resources'),
+          name: this.$options.i18n.scannedResources,
           path: this.dastDownloadLink,
           reportType: REPORT_TYPE_DAST,
         },
@@ -493,7 +505,7 @@ export default {
         icon="external-link"
         class="gl-mr-3 report-btn"
       >
-        {{ s__('ciReport|View full report') }}
+        {{ $options.i18n.viewReport }}
       </gl-button>
     </template>
 
@@ -501,11 +513,7 @@ export default {
       <div class="gl-text-gray-700 gl-font-sm">
         <gl-sprintf
           v-if="hasDivergedFromTargetBranch"
-          :message="
-            __(
-              'Security report is out of date. Please update your branch with the latest changes from the target branch (%{targetBranchName})',
-            )
-          "
+          :message="$options.i18n.divergedFromTargetBranch"
         >
           <template #targetBranchName>
             <gl-link class="gl-font-sm" :href="targetBranchTreePath">{{ targetBranch }}</gl-link>
@@ -514,11 +522,7 @@ export default {
 
         <gl-sprintf
           v-else-if="isBaseSecurityReportOutOfDate"
-          :message="
-            __(
-              'Security report is out of date. Run %{newPipelineLinkStart}a new pipeline%{newPipelineLinkEnd} for the target branch (%{targetBranchName})',
-            )
-          "
+          :message="$options.i18n.baseSecurityReportOutOfDate"
         >
           <template #newPipelineLink="{ content }">
             <gl-link class="gl-font-sm" :href="`${newPipelinePath}?ref=${targetBranch}`">{{
@@ -617,10 +621,10 @@ export default {
 
             <template v-if="hasDastScannedResources">
               <div class="text-nowrap">
-                {{ n__('%d URL scanned', '%d URLs scanned', dastSummary.scannedResourcesCount) }}
+                {{ $options.i18n.scannedUrls(dastSummary.scannedResourcesCount) }}
               </div>
               <gl-link v-gl-modal.dastUrl class="ml-2" data-testid="dast-ci-job-link">
-                {{ __('View details') }}
+                {{ $options.i18n.viewDetails }}
               </gl-link>
               <dast-modal
                 :scanned-urls="dastSummary.scannedResources.nodes"