Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dataset page] Add filename/extension to download attribute #117

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[Dataset page] Add filename/extension to download attribute #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73cd07d
fix(download-item): add filename with extension to download attribute
tkohr Dec 18, 2024
9bf3549
fix(download-item): use link name as filename
tkohr Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion apps/datahub-e2e/src/e2e/dataset.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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()
Expand Down
2 changes: 1 addition & 1 deletion apps/datahub/src/app/dataset/dataset-downloads/download-item/download-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 12 additions & 0 deletions apps/datahub/src/app/dataset/dataset-downloads/download-item/download-item.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
Loading