Merge pull request #117 from camptocamp/download-attribute-filename

[Dataset page] Add filename/extension to download attribute
camptocamp · Jan 7, 2025 · f169d92 · f169d92
2 parents 5f0f2bf + 9bf3549
commit f169d92
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/apps/datahub-e2e/src/e2e/dataset.cy.ts b/apps/datahub-e2e/src/e2e/dataset.cy.ts
@@ -245,7 +245,7 @@ describe('datasets', () => {
     beforeEach(() => {
       cy.visit('/dataset/04bcec79-5b25-4b16-b635-73115f7456e4')
     })
-    it('should download button should contain the correct link and open in new tab', () => {
+    it('should contain the correct link in download button', () => {
       cy.get('[data-cy="download-button"]')
         .first()
         .invoke('attr', 'href')
@@ -258,6 +258,25 @@ describe('datasets', () => {
         .first()
         .should('have.attr', 'target', '_blank')
     })
+    it('should contain empty download attribute for other files than json and geojson', () => {
+      cy.get('[data-cy="download-button"]')
+        .first()
+        .should('have.attr', 'download', '')
+    })
+    it('should contain download attribute with filename for json files', () => {
+      cy.get('[data-cy="download-button"]')
+        .eq(2)
+        .should(
+          'have.attr',
+          'download',
+          'insee:rectangles_200m_menage_erbm.json'
+        )
+    })
+    it('should open link in new tab as fallback (if download attribute is ignored, for not same-origin)', () => {
+      cy.get('[data-cy="download-button"]')
+        .first()
+        .should('have.attr', 'target', '_blank')
+    })
     it('should copy the link resource to clipboard when clicking on copy button', () => {
       cy.get('body').focus()
       cy.get('[data-cy="copy-button"]').first().click()

diff --git a/apps/datahub/src/app/dataset/dataset-downloads/download-item/download-item.component.html b/apps/datahub/src/app/dataset/dataset-downloads/download-item/download-item.component.html
@@ -28,7 +28,7 @@
       rel="noopener"
       [class]="'mel-primary-button font-medium text-nowrap'"
       data-cy="download-button"
-      download
+      [download]="downloadFileName"
       ><span translate>mel.dataset.download</span>
       <img src="assets/icons/download.svg" alt="download" />
     </a>

diff --git a/apps/datahub/src/app/dataset/dataset-downloads/download-item/download-item.component.ts b/apps/datahub/src/app/dataset/dataset-downloads/download-item/download-item.component.ts
@@ -12,4 +12,16 @@ export class MelDownloadItemComponent extends DownloadItemComponent {
     navigator.clipboard.writeText(this.link.url.href)
     ;(event.target as HTMLElement).blur()
   }
+
+  // note that the download attribute calling this getter only takes effect on same-origin resources
+  get downloadFileName() {
+    let completeFileName = ''
+    const fileName = this.link.name ?? 'data'
+    if (this.format === 'geojson') {
+      completeFileName = `${fileName}.geojson`
+    } else if (this.format === 'json') {
+      completeFileName = `${fileName}.json`
+    }
+    return completeFileName
+  }
 }