feat: add more download options

src/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import DocumentDownloadPopoverSection from './DocumentDownloadPopoverSection'
 
 import DisplayContentType from '@/components/Display/DisplayContentType'
+import byteSize from '@/utils/byteSize'
 
 const props = defineProps({
   /**
@@ -43,6 +44,20 @@ const props = defineProps({
    */
   placement: {
     type: String
+  },
+  /**
+   * List of content type that can be cleaned
+   */
+  cleanableContentTypes: {
+    type: Array,
+    default: () => ['application/pdf', 'application/msword']
+  },
+  /**
+   * The maximum allowed size to download an embedded document
+   */
+  embeddedDocumentDownloadMaxSize: {
+    type: String,
+    default: '1G'
   }
 })
 
@@ -63,6 +78,38 @@ const executionWarning = computed(() => {
   const warnings = props.document.contentTypeWarning ?? {}
   return warnings[locale.value] || warnings.en
 })
+
+const documentFullUrl = computed(() => {
+  return props.document.fullUrl
+})
+
+const documentFullUrlWithoutMetadata = computed(() => {
+  return props.document.fullUrl + '&filter_metadata=true'
+})
+
+const rootDocumentFullUrl = computed(() => {
+  return props.document.fullRootUrl
+})
+
+const hasRoot = computed(() => {
+  return !!props.document.root
+})
+
+const hasCleanableContentType = computed(() => {
+  return props.cleanableContentTypes.includes(props.document.contentType)
+})
+
+const isRootTooBig = computed(() => {
+  return hasRoot.value && rootContentLength.value > maxRootContentLength.value
+})
+
+const rootContentLength = computed(() => {
+  return props.document?.root?.contentLength
+})
+
+const maxRootContentLength = computed(() => {
+  return byteSize(props.embeddedDocumentDownloadMaxSize)
+})
 </script>
 
 <template>
@@ -77,28 +124,48 @@ const executionWarning = computed(() => {
     @update:modelValue="$emit('update:modelValue')"
   >
     <div class="document-download-popover__body">
-      <icon-button icon-left="download-simple" label="Download" class="document-download-popover__body__button" />
+      <icon-button
+        :disabled="isRootTooBig"
+        :href="documentFullUrl"
+        :label="$t('documentDownloadPopover.download')"
+        icon-left="download-simple"
+        class="document-download-popover__body__button"
+      />
+      <icon-button
+        v-if="hasCleanableContentType"
+        icon-left="download-simple"
+        :href="documentFullUrlWithoutMetadata"
+        :label="$t('documentDownloadPopover.downloadWithoutMetadata')"
+        variant="outline-primary"
+        class="document-download-popover__body__button"
+      />
       <icon-button
         icon-left="download-simple"
-        label="Download without metadata"
+        :href="documentF"
+        :label="$t('documentDownloadPopover.downloadExtractText')"
         variant="outline-primary"
         class="document-download-popover__body__button"
       />
       <icon-button
+        v-if="hasRoot"
         icon-left="download-simple"
-        label="Download extract text"
+        :href="rootDocumentFullUrl"
+        :label="$t('documentDownloadPopover.downloadRoot')"
         variant="outline-primary"
         class="document-download-popover__body__button"
       />
       <div class="document-download-popover__body__sections pt-3">
-        <document-download-popover-section title="What's the document's title?" :value="document.title" />
-        <document-download-popover-section title="What's the document's type">
+        <document-download-popover-section
+          :title="$t('documentDownloadPopover.sectionTitle')"
+          :value="document.title"
+        />
+        <document-download-popover-section :title="$t('documentDownloadPopover.sectionContentType')">
           <phosphor-icon :name="document.contentTypeIcon" class="me-2" />
           <display-content-type :value="document.contentType" />
         </document-download-popover-section>
         <document-download-popover-section
           v-if="description"
-          title="Once downloaded, how do I open it ?"
+          :title="$t('documentDownloadPopover.sectionDescription')"
           :value="description"
         />
       </div>

src/lang/en.json

@@ -43,7 +43,14 @@
     "public": "Public to project members"
   },
   "documentDownloadPopover": {
-    "extensionWarning": "This document has the wrong file extension for its type. You might need to add the extension <code>{extension}</code> before you can open it."
+    "extensionWarning": "This document has the wrong file extension for its type. You might need to add the extension <code>{extension}</code> before you can open it.",
+    "download": "Download",
+    "downloadWithoutMetadata": "Download without metadata",
+    "downloadExtractText": "Download extract text",
+    "downloadRoot": "Download root",
+    "sectionTitle": "What's the document's title?",
+    "sectionContentType": "What's the document's type",
+    "sectionDescription": "Once downloaded, how do I open it ?"
   },
   "error": {
     "title": "Something's wrong here",

src/stories/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.stories.js

@@ -11,7 +11,7 @@ export default {
   args: {
     document: {
       id: 'foo',
-      title: 'Inter IKEA Investment S.à r.l._cover letter 2010-2011 tax returns.pdf',
+      title: 'tax_returns.pdf',
       standardExtension: 'pdf',
       hasStandardExtension: true,
       contentType: 'application/pdf',
@@ -27,12 +27,15 @@ export default {
     computed: {
       trigger() {
         return `btn-${this.$.uid}`
+      },
+      title() {
+        return args.document.title
       }
     },
     template: `
       <div class="p-sm-5 p-3 text-center">
         <button type="button" class="btn btn-outline-secondary" :id="trigger">
-          Hover me
+          Download <var class="text-decoration-underline">{{ title }}</var>
         </button>
         <document-download-popover v-bind="args" :target="trigger" />
       </div>
@@ -46,7 +49,7 @@ export const WithWarning = {
   args: {
     document: {
       id: 'bar',
-      title: 'Inter IKEA Investment S.à r.l._cover letter 2010-2011 tax returns.txt',
+      title: 'webpage.txt',
       contentType: 'text/html',
       standardExtension: 'html',
       hasStandardExtension: false,
@@ -56,3 +59,43 @@ export const WithWarning = {
     }
   }
 }
+
+export const WithRoot = {
+  args: {
+    document: {
+      id: 'bar',
+      title: 'attachment.pdf',
+      contentType: 'application/pdf',
+      standardExtension: 'pdf',
+      hasStandardExtension: true,
+      contentTypeDescription: types['application/pdf'].description,
+      contentTypeWarning: types['application/pdf'].warning,
+      contentTypeIcon: markRaw(PhFilePdf),
+      root: {
+        id: 'fiz',
+        title: 'email-with-subject.eml',
+        contentLength: 1e2
+      }
+    }
+  }
+}
+
+export const WithHugeRoot = {
+  args: {
+    document: {
+      id: 'bar',
+      title: 'photo.jpg',
+      contentType: 'image/jpeg',
+      standardExtension: 'jpg',
+      hasStandardExtension: true,
+      contentTypeDescription: types['image/jpeg'].description,
+      contentTypeWarning: types['image/jpeg'].warning,
+      contentTypeIcon: markRaw(PhFile),
+      root: {
+        id: 'fiz',
+        title: 'inbox.pst',
+        contentLength: 1e24
+      }
+    }
+  }
+}