Using angular http client instead of fetch for the file download + some small css changes

src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss

@@ -4,10 +4,10 @@
 .downloads-container {
   position: relative;
   height: 100%;
+  background-color: $grey-background-color;
 
   @media screen and (min-width: $tablet) {
     max-width: unset;
-    background-color: $grey-background-color;
   }
 
 }
@@ -23,6 +23,7 @@
   flex-direction: column;
   padding: 2rem 1.25rem 1.25rem 1.25rem;
   max-width: 100vw;
+  justify-content: center;;
 
   @media screen and (min-width: $tablet) {
     max-width: unset;
@@ -47,7 +48,6 @@
 
 .resource-download {
   margin-bottom: 1.5rem;
-  margin-right: 1rem;
   border-bottom: 2px solid $grey-background-color;
   background-color: white;
   padding: 2.5rem;
@@ -63,11 +63,12 @@
     font-weight: 600;
     line-height: 1;
     font-size: 1rem;
+    word-break: break-all;
   }
 }
 
 .resource-static {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
   border-bottom: 2px solid $grey-background-color;
   background-color: white;
   padding: 2.5rem;
@@ -85,7 +86,7 @@
 }
 
 .resources-other {
-  margin-top: 1rem;
+  margin-bottom: 1.5rem;
   border-bottom: 2px solid $grey-background-color;
   background-color: white;
   padding: 2.5rem;

src/app/shared/components/download-button/download-button.component.ts

-import { Component, HostListener, Input, OnInit } from '@angular/core';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { geosource, notificationMessages } from '../../../../i18n/traductions';
 import { NotificationService } from '../../../core/services';
 
@@ -7,63 +10,34 @@ import { NotificationService } from '../../../core/services';
   templateUrl: './download-button.component.html',
   styleUrls: ['./download-button.component.scss'],
 })
-export class DownloadButtonComponent implements OnInit {
+export class DownloadButtonComponent implements OnInit, OnDestroy {
 
-  loading: boolean = false;
   @Input() url: string;
   @Input() fileName: string;
 
-  // Event fired when one tab is closed or refreshed. We abort the on-going request
-  @HostListener('window:beforeunload')
-  abortCurrentRequest() {
-    this.controller.abort();
-  }
-
-  // Variable to manage the icon display for each resource. Possible values:
-  // - 'loading': display the spinner
-  // - 'cancel': display the cross to abort the on-going request
-  // -  null: display the download icon
-  signal: AbortSignal;
-  controller: AbortController;
-  timeOut: number;
-
+  loading: boolean = false;
   abortMessage: string = geosource.downloads.abort;
   downloadMessage: string = geosource.downloads.download;
 
+  // Use this subject in order to be able to cancel the http request at any time
+  private ngUnsubscribe: Subject<void> = new Subject<void>();
+
   constructor(
     private _notificationService: NotificationService,
+    private _http: HttpClient,
   ) { }
 
-  ngOnInit() {
-    this.controller = new AbortController();
-    this.signal = this.controller.signal;
-  }
-
-  // Temporary: put back the old download method before we can use a proxy to pass credentials
-  // download() {
-  //   saveAs(this.url, this.fileName);
-  //   this._notificationService.notify(
-  //     {
-  //       type: 'success',
-  //       message: notificationMessages.general.startDownload,
-  //     },
-  //   );
-  // }
+  ngOnInit() {}
 
   download() {
     this.loading = true;
-    fetch(this.url, { signal: this.signal }).then((response) => {
-
-      if (!response.ok) {
-        throw response;
-      }
-
-      // To allow the download, get the repsons as a blob
-      return response.blob();
-    })
-      .then((blob) => {
+    this._http.get<HttpResponse<Blob>>(this.url, { responseType: 'blob', observe: 'response', withCredentials: true } as Object).pipe(
+      takeUntil(this.ngUnsubscribe),
+    ).subscribe(
+      (response) => {
+        console.log('Reponse');
         // Create a temporary link and click on it to launch the blob download
-        const url = window.URL.createObjectURL(blob);
+        const url = window.URL.createObjectURL(response.body);
         const a = document.createElement('a');
         a.href = url;
         a.rel = 'noopener';
@@ -72,9 +46,8 @@ export class DownloadButtonComponent implements OnInit {
         a.click();
         a.remove();
         this.loading = false;
-        clearTimeout(this.timeOut); // If the download is under 2000ms, we clear the ongoing timeout
-      })
-      .catch((err) => {
+      },
+      (err) => {
         let message = notificationMessages.general.failedDownloadFile;
 
         if (err && err.status) {
@@ -94,19 +67,17 @@ export class DownloadButtonComponent implements OnInit {
             },
           );
         }
-      });
+      },
+    );
   }
 
   abortDownload() {
-    this.controller.abort();
+    this.ngUnsubscribe.next();
     this.loading = false;
-
-    // Create a new for a new DOM Request
-    this.controller = new AbortController();
-    this.signal = this.controller.signal;
   }
 
   ngOnDestroy() {
-    this.controller.abort();
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
   }
 }