feat: add attachments accepted formats and show success and error notification on each action

cypress/integration/datasets-attachment.spec.js

@@ -1,24 +1,20 @@
 /// <reference types="Cypress" />
+var path = require("path");
 
-describe("Datasets", () => {
+describe("Dataset attachments", () => {
   beforeEach(() => {
     cy.login(Cypress.config("username"), Cypress.config("password"));
 
-    cy.createDataset("raw");
-
     cy.intercept("POST", "/api/v3/Datasets/**/*").as("upload");
   });
 
-  afterEach(() => {
-    cy.login(
-      Cypress.config("secondaryUsername"),
-      Cypress.config("secondaryPassword")
-    );
+  after(() => {
     cy.removeDatasets();
   });
 
-  describe("Add Attachment", () => {
+  describe("Attachment tests", () => {
     it("should go to dataset details and add an attachment using the dropzone", () => {
+      cy.createDataset("raw");
       cy.visit("/datasets");
 
       cy.get(".dataset-table mat-table mat-header-row").should("exist");
@@ -55,12 +51,73 @@ describe("Datasets", () => {
       cy.wait("@upload").then(({ request, response }) => {
         expect(request.method).to.eq("POST");
         expect(response.statusCode).to.eq(201);
+
+        cy.get(".snackbar-success").should("exist");
       });
 
       cy.get(".attachment-card #caption").should(
         "have.value",
         "SciCatLogo.png"
       );
     });
+
+    it("should be able to download dataset attachment", () => {
+      cy.visit("/datasets");
+
+      cy.get(".dataset-table mat-table mat-header-row").should("exist");
+
+      cy.finishedLoading();
+
+      cy.get('input[type="search"][data-placeholder="Text Search"]')
+        .clear()
+        .type("Cypress");
+
+      cy.isLoading();
+
+      cy.finishedLoading();
+
+      cy.get(".mat-row").contains("Cypress Dataset").first().click();
+
+      cy.isLoading();
+
+      cy.finishedLoading();
+
+      cy.get(".mat-tab-link").contains("Attachments").click();
+
+      cy.get(".download-button").click();
+
+      const downloadsFolder = Cypress.config("downloadsFolder");
+      cy.readFile(path.join(downloadsFolder, "SciCatLogo.png")).should("exist");
+    });
+
+    it("should be able to delete dataset attachment", () => {
+      cy.visit("/datasets");
+
+      cy.get(".dataset-table mat-table mat-header-row").should("exist");
+
+      cy.finishedLoading();
+
+      cy.get('input[type="search"][data-placeholder="Text Search"]')
+        .clear()
+        .type("Cypress");
+
+      cy.isLoading();
+
+      cy.finishedLoading();
+
+      cy.get(".mat-row").contains("Cypress Dataset").first().click();
+
+      cy.isLoading();
+
+      cy.finishedLoading();
+
+      cy.get(".mat-tab-link").contains("Attachments").click();
+
+      cy.get(".delete-button").click();
+
+      cy.get(".attachment-card #caption").should("not.exist");
+
+      cy.get(".snackbar-success").should("exist");
+    });
   });
 });

src/app/app.module.ts

@@ -1,84 +1,90 @@
-import { userReducer } from "state-management/reducers/user.reducer";
-import { AppComponent } from "./app.component";
-import { AppConfigModule } from "app-config.module";
-import { AppRoutingModule, routes } from "app-routing/app-routing.module";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { BrowserModule, Title } from "@angular/platform-browser";
-import { EffectsModule } from "@ngrx/effects";
-import { HttpClientModule } from "@angular/common/http";
-import { APP_INITIALIZER, NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { SampleApi, SDKBrowserModule } from "shared/sdk/index";
-import { StoreModule } from "@ngrx/store";
-import { UserApi } from "shared/sdk/services";
-import { routerReducer } from "@ngrx/router-store";
-import { extModules } from "./build-specifics";
-import { MatNativeDateModule } from "@angular/material/core";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { MatSnackBarModule } from "@angular/material/snack-bar";
-import { LayoutModule } from "_layout/layout.module";
-import { AppConfigService } from "app-config.service";
-import { AppThemeService } from "app-theme.service";
-
-const appConfigInitializerFn = (appConfig: AppConfigService) => {
-  return () => appConfig.loadAppConfig();
-};
-
-const appThemeInitializerFn = (appTheme: AppThemeService) => {
-  return () => appTheme.loadTheme();
-};
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    AppConfigModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    BrowserModule,
-    HttpClientModule,
-    LayoutModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    SDKBrowserModule.forRoot(),
-    StoreModule.forRoot(
-      { router: routerReducer, users: userReducer },
-      {
-        runtimeChecks: {
-          strictStateImmutability: false,
-          strictActionImmutability: false,
-          strictStateSerializability: false,
-          strictActionSerializability: false,
-        },
-      }
-    ),
-    extModules,
-    RouterModule.forRoot(routes, {
-      useHash: false,
-      relativeLinkResolution: "legacy",
-    }),
-    EffectsModule.forRoot([]),
-  ],
-  exports: [MatNativeDateModule],
-  providers: [
-    AppConfigService,
-    {
-      provide: APP_INITIALIZER,
-      useFactory: appConfigInitializerFn,
-      multi: true,
-      deps: [AppConfigService],
-    },
-    {
-      provide: APP_INITIALIZER,
-      useFactory: appThemeInitializerFn,
-      multi: true,
-      deps: [AppThemeService],
-    },
-    AppThemeService,
-    UserApi,
-    SampleApi,
-    Title,
-    MatNativeDateModule,
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule { }
+import { userReducer } from "state-management/reducers/user.reducer";
+import { AppComponent } from "./app.component";
+import { AppConfigModule } from "app-config.module";
+import { AppRoutingModule, routes } from "app-routing/app-routing.module";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { BrowserModule, Title } from "@angular/platform-browser";
+import { EffectsModule } from "@ngrx/effects";
+import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
+import { APP_INITIALIZER, NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { SampleApi, SDKBrowserModule } from "shared/sdk/index";
+import { StoreModule } from "@ngrx/store";
+import { UserApi } from "shared/sdk/services";
+import { routerReducer } from "@ngrx/router-store";
+import { extModules } from "./build-specifics";
+import { MatNativeDateModule } from "@angular/material/core";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { LayoutModule } from "_layout/layout.module";
+import { AppConfigService } from "app-config.service";
+import { AppThemeService } from "app-theme.service";
+import { SnackbarInterceptor } from "shared/interceptors/snackbar.interceptor";
+
+const appConfigInitializerFn = (appConfig: AppConfigService) => {
+  return () => appConfig.loadAppConfig();
+};
+
+const appThemeInitializerFn = (appTheme: AppThemeService) => {
+  return () => appTheme.loadTheme();
+};
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    AppConfigModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    BrowserModule,
+    HttpClientModule,
+    LayoutModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+    SDKBrowserModule.forRoot(),
+    StoreModule.forRoot(
+      { router: routerReducer, users: userReducer },
+      {
+        runtimeChecks: {
+          strictStateImmutability: false,
+          strictActionImmutability: false,
+          strictStateSerializability: false,
+          strictActionSerializability: false,
+        },
+      }
+    ),
+    extModules,
+    RouterModule.forRoot(routes, {
+      useHash: false,
+      relativeLinkResolution: "legacy",
+    }),
+    EffectsModule.forRoot([]),
+  ],
+  exports: [MatNativeDateModule],
+  providers: [
+    AppConfigService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appConfigInitializerFn,
+      multi: true,
+      deps: [AppConfigService],
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appThemeInitializerFn,
+      multi: true,
+      deps: [AppThemeService],
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: SnackbarInterceptor,
+      multi: true,
+    },
+    AppThemeService,
+    UserApi,
+    SampleApi,
+    Title,
+    MatNativeDateModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

src/app/shared/interceptors/snackbar.interceptor.ts

@@ -0,0 +1,46 @@
+import { Injectable } from "@angular/core";
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor,
+  HttpResponse,
+} from "@angular/common/http";
+import { Observable, throwError } from "rxjs";
+import { catchError, tap } from "rxjs/operators";
+import { MatSnackBar } from "@angular/material/snack-bar";
+
+@Injectable()
+export class SnackbarInterceptor implements HttpInterceptor {
+  constructor(private snackBar: MatSnackBar) {}
+
+  intercept(
+    request: HttpRequest<unknown>,
+    next: HttpHandler
+  ): Observable<HttpEvent<unknown>> {
+    return next.handle(request).pipe(
+      tap((e) => {
+        if (
+          request.method == "POST" ||
+          request.method == "PUT" ||
+          request.method == "PATCH" ||
+          request.method == "DELETE"
+        ) {
+          if (e instanceof HttpResponse && (e.status == 200 || e.status == 201)) {
+            this.snackBar.open("Success", "close", {
+              duration: 3000,
+              panelClass: "snackbar-success",
+            });
+          }
+        }
+      }),
+      catchError((error) => {
+        this.snackBar.open("Error occurred", "close", {
+          duration: 3000,
+          panelClass: "snackbar-error",
+        });
+        return throwError(error);
+      })
+    );
+  }
+}