feat: add document download popover

Author: pirhoo

components.d.ts

@@ -64,7 +64,7 @@ declare module 'vue' {
     ColumnFilterBadge: typeof import('./src/components/ColumnFilterBadge.vue')['default']
     ColumnFilterDropdown: typeof import('./src/components/ColumnFilterDropdown.vue')['default']
     ContentTypeBadge: typeof import('./src/components/ContentTypeBadge.vue')['default']
-    copy: typeof import('./src/components/PageTable/PageTableTh copy.vue')['default']
+    copy: typeof import('./src/components/Document/DocumentDownloadPopover copy.vue')['default']
     DismissableAlert: typeof import('./src/components/Dismissable/DismissableAlert.vue')['default']
     DismissableToastBody: typeof import('./src/components/Dismissable/DismissableToastBody.vue')['default']
     DisplayContentLength: typeof import('./src/components/Display/DisplayContentLength.vue')['default']
@@ -104,6 +104,8 @@ declare module 'vue' {
     DocumentContentSlice: typeof import('./src/components/DocumentContentSlice.vue')['default']
     DocumentContentSlicePlaceholder: typeof import('./src/components/DocumentContentSlicePlaceholder.vue')['default']
     DocumentContentSlices: typeof import('./src/components/DocumentContentSlices.vue')['default']
+    DocumentDownloadPopover: typeof import('./src/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.vue')['default']
+    DocumentDownloadPopoverSection: typeof import('./src/components/Document/DocumentDownloadPopover/DocumentDownloadPopoverSection.vue')['default']
     DocumentGlobalSearchTermsTags: typeof import('./src/components/DocumentGlobalSearchTermsTags.vue')['default']
     DocumentInModal: typeof import('./src/components/DocumentInModal.vue')['default']
     DocumentLocalSearch: typeof import('./src/components/Document/DocumentLocalSearch/DocumentLocalSearch.vue')['default']

src/components/Document/DocumentActionsGroup/DocumentActionsGroup.vue

@@ -22,10 +22,11 @@
         @click="clickShare"
       />
       <document-actions-group-entry
+        ref="downloadButton"
         icon="download"
         :label="$t('documentActionsGroup.download')"
-        :disabled="isDownloadAllowed"
-        :tooltip-placement="tooltipPlacement"
+        :disabled="!isDownloadAllowed"
+        hide-tooltip
         @click="clickDownload"
       />
       <document-actions-group-entry
@@ -34,12 +35,19 @@
         :tooltip-placement="tooltipPlacement"
         @click="clickExpand"
       />
+      <document-download-popover :target="downloadButton" :document="document" :placement="tooltipPlacement" />
     </slot>
   </div>
 </template>
 
 <script setup>
-import DocumentActionsGroupEntry from '@/components/Document/DocumentActionsGroup/DocumentActionsGroupEntry'
+import { ref } from 'vue'
+
+import DocumentActionsGroupEntry from './DocumentActionsGroupEntry'
+
+import DocumentDownloadPopover from '@/components/Document/DocumentDownloadPopover/DocumentDownloadPopover'
+
+const downloadButton = ref(null)
 
 defineProps({
   /**

src/components/Document/DocumentActionsGroup/DocumentActionsGroupEntry.vue

@@ -6,6 +6,7 @@
     :icon-left-hover-weight="iconHoverWeight"
     :label="label"
     hide-label
+    :hide-tooltip="hideTooltip"
     :tooltip-placement="tooltipPlacement"
     square
     variant="outline-tertiary"
@@ -50,6 +51,12 @@ const props = defineProps({
   fill: {
     type: Boolean
   },
+  /**
+   * Hide the button tooltip
+   */
+  hideTooltip: {
+    type: Boolean
+  },
   /**
    * Class to apply to the action button when document is fill
    */

src/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { computed } from 'vue'
+import { PhosphorIcon } from '@icij/murmur-next'
+import { useI18n } from 'vue-i18n'
+
+import DocumentDownloadPopoverSection from './DocumentDownloadPopoverSection'
+
+import DisplayContentType from '@/components/Display/DisplayContentType'
+
+const props = defineProps({
+  /**
+   * The selected document
+   */
+  document: {
+    type: Object
+  },
+  /**
+   * The target element
+   */
+  target: {
+    type: Object
+  },
+  /**
+   * Toggle value when the popover is open
+   */
+  modelValue: {
+    type: Boolean
+  },
+  /**
+   * True if the popover is open manually
+   */
+  manual: {
+    type: Boolean
+  },
+  /**
+   * Disable auto close
+   */
+  noAutoClose: {
+    type: Boolean
+  },
+  /**
+   * The placement of the popover
+   */
+  placement: {
+    type: String
+  }
+})
+
+const { locale, t } = useI18n()
+
+const extensionWarning = computed(() => {
+  const { standardExtension: extension } = props.document
+  return t('documentDownloadPopover.extensionWarning', { extension })
+})
+
+const description = computed(() => {
+  const descriptions = props.document.contentTypeDescription ?? {}
+  const description = descriptions[locale.value] || descriptions.en
+  return props.document.hasStandardExtension ? description : `${description} <strong>${extensionWarning.value}</strong>`
+})
+
+const executionWarning = computed(() => {
+  const warnings = props.document.contentTypeWarning ?? {}
+  return warnings[locale.value] || warnings.en
+})
+</script>
+
+<template>
+  <b-popover
+    teleport-to="body"
+    :target="target"
+    :manual="manual"
+    :model-value="modelValue"
+    :no-auto-close="noAutoClose"
+    :placement="placement"
+    custom-class="document-download-popover"
+    @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
+        icon-left="download-simple"
+        label="Download without metadata"
+        variant="outline-primary"
+        class="document-download-popover__body__button"
+      />
+      <icon-button
+        icon-left="download-simple"
+        label="Download extract text"
+        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">
+          <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 ?"
+          :value="description"
+        />
+      </div>
+    </div>
+  </b-popover>
+</template>
+
+<style lang="scss">
+.document-download-popover {
+  width: 100%;
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: $spacer-sm;
+
+    &__button {
+      white-space: nowrap;
+      align-self: flex-start;
+    }
+
+    &__sections {
+      margin-top: $spacer;
+      display: flex;
+      flex-direction: column;
+      gap: $spacer-xl;
+    }
+  }
+}
+</style>

src/components/Document/DocumentDownloadPopover/DocumentDownloadPopoverSection.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  title: {
+    type: String
+  },
+  value: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <section class="document-download-popover-section">
+    <div class="document-download-popover-section__title pb-2 text-tertiary-emphasis fst-italic">
+      {{ title }}
+    </div>
+    <div class="document-download-popover-section__value text-primary-emphasis">
+      <slot><span v-html="value"></span></slot>
+    </div>
+  </section>
+</template>

src/components/PageTable/PageTable.vue

@@ -37,6 +37,7 @@ const classList = computed(() => {
 
 <style lang="scss" scoped>
 .page-table {
+  vertical-align: middle;
   font-size: math.div(14, 16) * 1rem;
 
   &__select {

src/components/PageTable/PageTableTh.vue

@@ -70,7 +70,7 @@ const labelClassList = computed(() => {
 
 <style lang="scss" scoped>
 .page-table-th {
-  vertical-align: $table-cell-vertical-align;
+  vertical-align: middle;
 
   &--compact {
     width: 2rem;

src/lang/en.json

@@ -42,6 +42,9 @@
     "private": "Private to you",
     "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."
+  },
   "error": {
     "title": "Something's wrong here",
     "description": "An error has occurred. Please try again later or contact your administrator if the problem persists.",

src/main.scss

@@ -218,11 +218,6 @@ $value in $theme-colors {
     border-radius: inherit;
     overflow: hidden;
   }
-
-  &.bs-popover-bottom > .popover-arrow::after,
-  &.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
-    border-bottom-color: $popover-header-bg;
-  }
 }
 
 html[data-bs-theme] body .Toastify {

src/stories/components/Document/DocumentActionsGroup/DocumentActionsGroup.stories.js

@@ -1,37 +1,44 @@
-import IconButton from '@/components/IconButton'
+import { markRaw } from 'vue'
+import { PhFilePdf } from '@phosphor-icons/vue'
+
+import types from '@/utils/types.json'
 import DocumentActionsGroup from '@/components/Document/DocumentActionsGroup/DocumentActionsGroup'
 
 export default {
   components: { DocumentActionsGroup },
   title: 'Components/Document/DocumentActionsGroup',
-  component: IconButton,
+  component: DocumentActionsGroup,
   tags: ['autodocs'],
-  render: (args) => ({
-    components: {
-      DocumentActionsGroup
-    },
-    setup() {
-      return {
-        args
-      }
-    },
-    template: `
-      <document-actions-group v-bind="args" >
-      </document-actions-group>
-    `
-  })
-}
-
-export const Default = {
   args: {
     document: {
-      id: 'test'
+      id: '5f5b3b3b-7b3b-4b3b-8b3b-3b3b3b3b3b3b',
+      title: 'Inter IKEA Investment S.à r.l._cover letter 2010-2011 tax returns.pdf',
+      extractionLevel: 0,
+      project: 'banana-papers',
+      creationDate: new Date(),
+      inlineFullUrl: 'https://i.imgur.com/ns9ThQx.jpeg',
+      path: '/vault/ns9ThQx.jpeg',
+      tags: ['foo', 'bar', 'baz'],
+      language: 'ENGLISH',
+      contentLength: 23e4,
+      contentTextLength: 14e3,
+      isSupportedImage: true,
+      highlights: [
+        'Lorem ispum dolor sit <mark>IKEA</mark> amet.',
+        'Consectetur <mark>IKEA</mark> adipiscing elit.',
+        'Sed do eiusmod tempor incididunt ut labore et <mark>IKEA</mark> dolore magna aliqua.'
+      ],
+      contentType: 'application/pdf',
+      contentTypeDescription: types['application/pdf'].description,
+      contentTypeIcon: markRaw(PhFilePdf)
     },
     vertical: false,
-    tooltipPlacement: 'top',
+    tooltipPlacement: 'bottom',
     isStarred: false,
-    isDownloadAllowed: false,
+    isDownloadAllowed: true,
     selectMode: true,
     selected: false
   }
 }
+
+export const Default = {}

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

@@ -0,0 +1,58 @@
+import { markRaw } from 'vue'
+import { PhFile, PhFilePdf } from '@phosphor-icons/vue'
+
+import DocumentDownloadPopover from '@/components/Document/DocumentDownloadPopover/DocumentDownloadPopover'
+import types from '@/utils/types.json'
+
+export default {
+  component: DocumentDownloadPopover,
+  title: 'Components/Document/DocumentDownloadPopover/DocumentDownloadPopover',
+  tags: ['autodocs'],
+  args: {
+    document: {
+      id: 'foo',
+      title: 'Inter IKEA Investment S.à r.l._cover letter 2010-2011 tax returns.pdf',
+      standardExtension: 'pdf',
+      hasStandardExtension: true,
+      contentType: 'application/pdf',
+      contentTypeDescription: types['application/pdf'].description,
+      contentTypeIcon: markRaw(PhFilePdf)
+    }
+  },
+  render: (args) => ({
+    components: {
+      DocumentDownloadPopover
+    },
+    setup: () => ({ args }),
+    computed: {
+      trigger() {
+        return `btn-${this.$.uid}`
+      }
+    },
+    template: `
+      <div class="p-sm-5 p-3 text-center">
+        <button type="button" class="btn btn-outline-secondary" :id="trigger">
+          Hover me
+        </button>
+        <document-download-popover v-bind="args" :target="trigger" />
+      </div>
+    `
+  })
+}
+
+export const Default = {}
+
+export const WithWarning = {
+  args: {
+    document: {
+      id: 'bar',
+      title: 'Inter IKEA Investment S.à r.l._cover letter 2010-2011 tax returns.txt',
+      contentType: 'text/html',
+      standardExtension: 'html',
+      hasStandardExtension: false,
+      contentTypeDescription: types['text/html'].description,
+      contentTypeWarning: types['text/html'].warning,
+      contentTypeIcon: markRaw(PhFile)
+    }
+  }
+}