feat(#2192): add download button in asset management overview (#2224)

* Added Asset Download button * Updated to use FileSaver
apache · Nov 27, 2023 · 3ba4f77 · 3ba4f77
1 parent 2762997
commit 3ba4f77
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/ui/cypress/tests/assetManagement/createAsset.spec.ts b/ui/cypress/tests/assetManagement/createAsset.spec.ts
@@ -89,9 +89,36 @@ describe('Creates a new adapter, add to assets and export assets', () => {
         cy.dataCy('import-button').click();
 
         // Check if import was successful
+        cy.visit('#/connect');
+        cy.dataCy('adapters-table').children().should('have.length', 1);
         cy.visit('#/assets');
         cy.dataCy('assets-table').should('have.length', 1);
+
+        // Export Asset via Assets page
+        cy.dataCy('download').click();
+
+        // Delete Adapter and Asset
+        cy.visit('#/connect');
+        cy.dataCy('delete-adapter').click();
+        cy.dataCy('delete-adapter-confirmation').click();
+
+        cy.visit('#/assets');
+        cy.dataCy('delete').click();
+
+        // Import downloaded Asset
+        cy.visit('#/configuration/export');
+        cy.dataCy('import-application-data-button').click();
+        cy.get('input[type="file"]').selectFile(
+            'cypress/downloads/assetExport.zip',
+            { force: true },
+        );
+        cy.dataCy('next-import-button').click();
+        cy.dataCy('import-button').click();
+
+        // Check if import was successful
         cy.visit('#/connect');
         cy.dataCy('adapters-table').children().should('have.length', 1);
+        cy.visit('#/assets');
+        cy.dataCy('assets-table').should('have.length', 1);
     });
 });
diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.html b/ui/src/app/assets/components/asset-overview/asset-overview.component.html
@@ -198,6 +198,18 @@ <h5>
                                                     >delete</i
                                                 >
                                             </button>
+                                            <button
+                                                color="accent"
+                                                mat-icon-button
+                                                matTooltip="Download asset"
+                                                data-cy="download"
+                                                matTooltipPosition="above"
+                                                (click)="downloadAsset(asset)"
+                                            >
+                                                <i class="material-icons"
+                                                    >download</i
+                                                >
+                                            </button>
                                         </span>
                                     </div>
                                 </td>

diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
@@ -32,6 +32,9 @@ import { SpAssetRoutes } from '../../assets.routes';
 import { AssetUploadDialogComponent } from '../../dialog/asset-upload/asset-upload-dialog.component';
 import { Router } from '@angular/router';
 import { SpCreateAssetDialogComponent } from '../../dialog/create-asset/create-asset-dialog.component';
+import { DataExportService } from '../../../configuration/export/data-export.service';
+import { mergeMap } from 'rxjs/operators';
+import { saveAs } from 'file-saver';
 
 @Component({
     selector: 'sp-asset-overview-component',
@@ -50,6 +53,7 @@ export class SpAssetOverviewComponent implements OnInit {
         private breadcrumbService: SpBreadcrumbService,
         private dialogService: DialogService,
         private router: Router,
+        private dataExportService: DataExportService,
     ) {}
 
     ngOnInit(): void {
@@ -147,4 +151,18 @@ export class SpAssetOverviewComponent implements OnInit {
                 this.loadAssets();
             });
     }
+
+    downloadAsset(asset: SpAssetModel) {
+        this.dataExportService
+            .getExportPreview([asset._id])
+            .pipe(
+                mergeMap(preview =>
+                    this.dataExportService.triggerExport(preview),
+                ),
+            )
+            .subscribe((data: Blob) => {
+                const blob = new Blob([data], { type: 'application/zip' });
+                saveAs(blob, 'assetExport');
+            });
+    }
 }