feat: replace instruments table with the new dynamic material table

cypress/e2e/instruments/instruments-general.cy.js

@@ -0,0 +1,206 @@
+const path = require("path");
+
+import { testData } from "../../fixtures/testData";
+import { testConfig } from "../../fixtures/testData";
+import { getFormattedFileNamingDate, mergeConfig } from "../../support/utils";
+
+describe("Instruments general", () => {
+  beforeEach(() => {
+    cy.login(Cypress.env("username"), Cypress.env("password"));
+  });
+
+  after(() => {
+    cy.removeInstruments();
+  });
+
+  describe("Instruments table and details", () => {
+    it("should be able to see instrument in a table and visit the instrument details page", () => {
+      const instrument = {
+        ...testData.instrument,
+        name: "Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.get("mat-table mat-header-row").should("exist");
+
+      cy.finishedLoading();
+
+      cy.get("mat-table mat-row").should("contain", instrument.uniqueName);
+
+      cy.get("mat-cell")
+        .contains(instrument.uniqueName)
+        .closest("mat-row")
+        .contains(instrument.name)
+        .click();
+
+      cy.url().should("include", `/instruments`);
+
+      cy.contains(instrument.uniqueName);
+    });
+
+    it("instrument should have metadata and if not it should be able to add", () => {
+      const metadataName = "Instrument Metadata Name";
+      const metadataValue = "instrument metadata value";
+      const instrument = {
+        ...testData.instrument,
+        name: "Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.finishedLoading();
+
+      cy.get("mat-cell")
+        .contains(instrument.uniqueName)
+        .closest("mat-row")
+        .contains(instrument.name)
+        .click();
+
+      cy.finishedLoading();
+
+      cy.get('[data-cy="instrument-metadata-card"]').should("exist");
+
+      cy.get('[data-cy="instrument-metadata-card"] [role="tab"]')
+        .contains("Edit")
+        .click();
+
+      cy.get('[data-cy="add-new-row"]').click();
+
+      // simulate click event on the drop down
+      cy.get("mat-select[data-cy=field-type-input]").last().click(); // opens the drop down
+
+      // simulate click event on the drop down item (mat-option)
+      cy.get("mat-option")
+        .contains("string")
+        .then((option) => {
+          option[0].click();
+        });
+
+      cy.get("[data-cy=metadata-name-input]")
+        .last()
+        .focus()
+        .type(`${metadataName}{enter}`);
+      cy.get("[data-cy=metadata-value-input]")
+        .last()
+        .focus()
+        .type(`${metadataValue}{enter}`);
+
+      cy.get("button[data-cy=save-changes-button]").click();
+
+      cy.finishedLoading();
+
+      cy.reload();
+
+      cy.finishedLoading();
+
+      cy.contains(instrument.name);
+
+      cy.get('[data-cy="instrument-metadata-card"]').contains(metadataName, {
+        matchCase: true,
+      });
+      cy.get('[data-cy="instrument-metadata-card"]').contains(metadataValue, {
+        matchCase: true,
+      });
+    });
+  });
+
+  describe("Instruments dynamic material table", () => {
+    it("should be able to sort for instrument in the column sort", () => {
+      const newInstrument = {
+        ...testData.instrument,
+        name: "000 Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      const newInstrument2 = {
+        ...testData.instrument,
+        name: "001 Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      cy.createInstrument(newInstrument2);
+      cy.createInstrument(newInstrument);
+
+      cy.visit("/instruments");
+
+      cy.get("mat-table mat-row")
+        .first()
+        .should("not.contain", newInstrument.name);
+
+      cy.get(".mat-sort-header-container").contains("Name").click();
+
+      cy.get("mat-table mat-row").first().should("contain", newInstrument.name);
+
+      cy.reload();
+
+      cy.get("mat-table mat-row").first().should("contain", newInstrument.name);
+    });
+
+    it("should be able to download table data as a json", () => {
+      const instrument = {
+        ...testData.instrument,
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.get("dynamic-mat-table table-menu button").click();
+
+      cy.get('[role="menu"] button').contains("Save data").click();
+
+      cy.get('[role="menu"] button').contains("Json file").click();
+
+      const downloadsFolder = Cypress.config("downloadsFolder");
+      const tableName = "instrumentsTable";
+
+      cy.readFile(
+        path.join(
+          downloadsFolder,
+          `${tableName}${getFormattedFileNamingDate()}.json`,
+        ),
+      ).then((actualExport) => {
+        const foundInstrument = actualExport.find(
+          (instrument) => instrument.uniqueName === instrument.uniqueName,
+        );
+
+        expect(foundInstrument).to.exist;
+      });
+    });
+
+    it("should be able to download table data as a csv", () => {
+      const instrument = {
+        ...testData.instrument,
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.get("dynamic-mat-table table-menu button").click();
+
+      cy.get('[role="menu"] button').contains("Save data").click();
+
+      cy.get('[role="menu"] button').contains("CSV file").click();
+
+      const downloadsFolder = Cypress.config("downloadsFolder");
+      const tableName = "instrumentsTable";
+
+      cy.readFile(
+        path.join(
+          downloadsFolder,
+          `${tableName}${getFormattedFileNamingDate()}.csv`,
+        ),
+      ).then((actualExport) => {
+        expect(actualExport).to.contain(instrument.uniqueName);
+      });
+    });
+  });
+});

cypress/fixtures/testData.js

@@ -61,6 +61,15 @@ export const testData = {
     ownerGroup: "20170251-group",
     accessGroups: [],
   },
+  instrument: {
+    uniqueName: "ESS1-1",
+    name: "ESS1",
+    customMetadata: {
+      institute: "An immaginary intitution #1",
+      department: "An immaginary department #1",
+      main_user: "ESS",
+    },
+  },
   rawDataset: {
     principalInvestigator: "string",
     endTime: "2019-10-31T14:44:46.143Z",

cypress/support/commands.js

@@ -195,6 +195,29 @@ Cypress.Commands.add("createProposal", (proposal) => {
     });
   });
 });
+
+Cypress.Commands.add("createInstrument", (instrument) => {
+  return cy.getCookie("user").then((userCookie) => {
+    const user = JSON.parse(decodeURIComponent(userCookie.value));
+
+    cy.getToken().then((token) => {
+      cy.log("Instrument: " + JSON.stringify(instrument, null, 2));
+      cy.log("User: " + JSON.stringify(user, null, 2));
+
+      cy.request({
+        method: "POST",
+        url: lbBaseUrl + "/Instruments",
+        headers: {
+          Authorization: token,
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: instrument,
+      });
+    });
+  });
+});
+
 Cypress.Commands.add("updateProposal", (proposalId, updateProposalDto) => {
   return cy.getCookie("user").then((userCookie) => {
     const user = JSON.parse(decodeURIComponent(userCookie.value));
@@ -314,6 +337,46 @@ Cypress.Commands.add("removeProposals", () => {
   });
 });
 
+Cypress.Commands.add("removeInstruments", () => {
+  cy.login(Cypress.env("username"), Cypress.env("password"));
+  cy.getToken().then((token) => {
+    cy.request({
+      method: "GET",
+      url: lbBaseUrl + "/instruments",
+      headers: {
+        Authorization: token,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    })
+      .its("body")
+      .as("instruments");
+
+    cy.get("@instruments").then((instruments) => {
+      cy.login(
+        Cypress.env("secondaryUsername"),
+        Cypress.env("secondaryPassword"),
+      );
+      cy.getToken().then((token) => {
+        instruments.forEach((instrument) => {
+          cy.request({
+            method: "DELETE",
+            url:
+              lbBaseUrl +
+              "/instruments/" +
+              encodeURIComponent(instrument.pid),
+            headers: {
+              Authorization: token,
+              Accept: "application/json",
+              "Content-Type": "application/json",
+            },
+          });
+        });
+      });
+    });
+  });
+});
+
 Cypress.Commands.add("removeSamples", () => {
   cy.login(Cypress.env("username"), Cypress.env("password"));
   cy.getToken().then((token) => {

package.json

@@ -35,7 +35,7 @@
     "@ngrx/router-store": "^16",
     "@ngrx/store": "^16",
     "@ngx-translate/core": "^16.0.4",
-    "@scicatproject/scicat-sdk-ts-angular": "^4.13.0",
+    "@scicatproject/scicat-sdk-ts-angular": "^4.14.0",
     "autolinker": "^4.0.0",
     "deep-equal": "^2.0.5",
     "exceljs": "^4.3.0",

src/app/instruments/instrument-details/instrument-details.component.html

@@ -28,7 +28,10 @@
         </mat-card-content>
       </mat-card>
 
-      <mat-card *ngIf="instrument.customMetadata as value">
+      <mat-card
+        data-cy="instrument-metadata-card"
+        *ngIf="instrument.customMetadata as value"
+      >
         <mat-card-header class="customMetadata-header">
           <div mat-card-avatar class="section-icon">
             <mat-icon> science </mat-icon>

src/app/instruments/instruments-dashboard/instruments-dashboard.component.html

@@ -1,17 +1,18 @@
-<ng-container *ngIf="vm$ | async as vm">
-  <div fxLayout="row" fxLayout.lt-lg="column">
-    <div fxFlex="100">
-      <app-table
-        [data]="vm.instruments"
-        [columns]="tableColumns"
-        [paginate]="tablePaginate"
-        [currentPage]="vm.currentPage"
-        [dataCount]="vm.instrumentsCount"
-        [dataPerPage]="vm.instrumentsPerPage"
-        (pageChange)="onPageChange($event)"
-        (sortChange)="onSortChange($event)"
-        (rowClick)="onRowClick($event)"
-      ></app-table>
-    </div>
-  </div>
-</ng-container>
+<dynamic-mat-table
+  [tableName]="tableName"
+  [columns]="columns"
+  [pending]="pending"
+  [setting]="setting"
+  [pagingMode]="paginationMode"
+  [dataSource]="dataSource"
+  [pagination]="pagination"
+  [rowSelectionMode]="rowSelectionMode"
+  [showGlobalTextSearch]="showGlobalTextSearch"
+  (paginationChange)="onPaginationChange($event)"
+  (onRowEvent)="onRowClick($event)"
+  (settingChange)="onSettingChange($event)"
+  (onTableEvent)="onTableEvent($event)"
+  style="height: 70vh"
+  class="mat-elevation-z2"
+>
+</dynamic-mat-table>