use v-html to use link in translations

apostrophecms · Aug 14, 2023 · e46df1b · e46df1b
1 parent f999f20
commit e46df1b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 31 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -1,9 +1,4 @@
 {
-  "import": "Import",
-  "importType": "Import {{ type }}",
-  "importModalDescriptionStart": "Importing content requires a zip file. See our",
-  "importModalDescriptionLink": "guide to importing content",
-  "importModalDescriptionEnd": "in Apostrophe.",
   "export": "Export",
   "exporting": "Exporting",
   "exportModalDescription": "You've selected {{ count }} {{ type }} for export",
@@ -13,5 +8,8 @@
   "exportModalIncludeRelated": "Include related documents",
   "exportModalIncludeChildren": "Include children of this page",
   "exportModalIncludeRelatedSettings": "Related Documents Settings",
-  "exportModalNoRelatedTypes": "No Related Types"
+  "exportModalNoRelatedTypes": "No Related Types",
+  "import": "Import",
+  "importType": "Import {{ type }}",
+  "importModalDescription": "Importing content requires a zip file. See our <a href=\"https://v3.docs.apostrophecms.org/\" target=\"_blank\">guide to importing content</a> in Apostrophe."
 }
diff --git a/modules/@apostrophecms/import-export-page/index.js b/modules/@apostrophecms/import-export-page/index.js
@@ -2,7 +2,6 @@ module.exports = {
   improve: '@apostrophecms/page',
 
   utilityOperations (self) {
-    // TODO: change to `self.options.shareDocsDisableImport === true` as set in the ticket?
     if (self.options.import === false) {
       return {};
     }
@@ -13,9 +12,7 @@ module.exports = {
           label: 'aposImportExport:import',
           modalOptions: {
             title: 'aposImportExport:importType',
-            descriptionStart: 'aposImportExport:importModalDescriptionStart',
-            descriptionLink: 'aposImportExport:importModalDescriptionLink',
-            descriptionEnd: 'aposImportExport:importModalDescriptionEnd',
+            description: 'aposImportExport:importModalDescription',
             confirmationButton: 'aposImportExport:importType',
             modal: 'AposImportModal'
           },

diff --git a/modules/@apostrophecms/import-export-piece-type/index.js b/modules/@apostrophecms/import-export-piece-type/index.js
@@ -4,7 +4,6 @@ module.exports = {
   cascades: [ 'batchOperations' ],
 
   utilityOperations (self) {
-    // TODO: change to `self.options.shareDocsDisableImport === true` as set in the ticket?
     if (self.options.import === false) {
       return {};
     }
@@ -15,9 +14,7 @@ module.exports = {
           label: 'aposImportExport:import',
           modalOptions: {
             title: 'aposImportExport:importType',
-            descriptionStart: 'aposImportExport:importModalDescriptionStart',
-            descriptionLink: 'aposImportExport:importModalDescriptionLink',
-            descriptionEnd: 'aposImportExport:importModalDescriptionEnd',
+            description: 'aposImportExport:importModalDescription',
             confirmationButton: 'aposImportExport:importType',
             modal: 'AposImportModal'
           },

diff --git a/ui/apos/components/AposImportModal.vue b/ui/apos/components/AposImportModal.vue
@@ -20,14 +20,12 @@
           >
             {{ $t(title, { type: $t(labels.plural) }) }}
           </h2>
-          <p class="apos-import__description">
-            {{ $t(descriptionStart) }}
-            <a
-              href="https://v3.docs.apostrophecms.org/"
-              target="_blank"
-            >{{ $t(descriptionLink) }}</a>
-            {{ $t(descriptionEnd) }}
-          </p>
+          <!-- eslint-disable vue/no-v-html -->
+          <p
+            class="apos-import__description"
+            v-html="$t(description)"
+          />
+          <!-- eslint-enable vue/no-v-html -->
           <AposFile
             class="apos-import__file"
             allowed-extensions=".zip"
@@ -70,15 +68,7 @@ export default {
       type: String,
       required: true
     },
-    descriptionStart: {
-      type: String,
-      required: true
-    },
-    descriptionLink: {
-      type: String,
-      required: true
-    },
-    descriptionEnd: {
+    description: {
       type: String,
       required: true
     },