refactor(Jobs): replace old table with dynamic mat table

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

@@ -0,0 +1,94 @@
+import { testData } from "../../fixtures/testData";
+
+describe("Jobs general", () => {
+  beforeEach(() => {
+    cy.login(Cypress.env("username"), Cypress.env("password"));
+    cy.createDataset({
+      type: "raw",
+      dataFileSize: "small",
+      datasetName: "Jobs Dataset",
+      pid: "scicat_testing/6ED35C17-EDD4-4CD4-B917-4E49698F7532",
+      isPublished: true,
+    });
+  });
+
+  afterEach(() => {
+    cy.removeJobs();
+    cy.removeDatasets();
+  });
+
+  describe("Jobs dynamic material table", () => {
+    it("should be able to search for job in the global search", () => {
+      cy.createJob();
+
+      cy.visit("/user/jobs");
+
+      cy.get('[data-cy="text-search"]').type("embargo_period");
+      cy.get('[data-cy="search-button"]').click();
+
+      cy.get("mat-table mat-row").first().should("contain", "embargo_period");
+    });
+
+    it("should be able to change page and page size in the job table", () => {
+      cy.createJob({ emailJobInitiator: "test1@example.com" });
+      cy.createJob({ emailJobInitiator: "test2@example.com" });
+      cy.createJob({ emailJobInitiator: "test3@example.com" });
+      cy.createJob({ emailJobInitiator: "test4@example.com" });
+      cy.createJob({ emailJobInitiator: "test5@example.com" });
+      cy.createJob({ emailJobInitiator: "test6@example.com" });
+
+      cy.visit("/user/jobs");
+
+      cy.get("mat-paginator").first().find("mat-select").click({ force: true });
+      cy.get("mat-option").contains("5").click({ force: true });
+
+      cy.get("mat-paginator .mat-mdc-paginator-range-actions").contains(
+        "1 – 5",
+      );
+
+      cy.get("mat-paginator").first().find("[aria-label='Next page']").click();
+
+      cy.get("mat-paginator .mat-mdc-paginator-range-actions").contains(
+        "6 – 6",
+      );
+    });
+
+    it("should be able to change visible columns settings in the table", () => {
+      cy.createJob();
+
+      cy.visit("/user/jobs");
+
+      cy.get("dynamic-mat-table mat-header-row.header").should("exist");
+
+      cy.get("dynamic-mat-table table-menu button").click();
+      cy.get('[role="menu"] button').contains("Default setting").click();
+      cy.get("body").type("{esc}");
+
+      cy.get("dynamic-mat-table")
+        .scrollTo("right", { ensureScrollable: false })
+        .get("mat-header-row")
+        .should("contain", "Initiator");
+
+      cy.get("dynamic-mat-table table-menu button").click();
+      cy.get('[role="menu"] button').contains("Column setting").click();
+
+      cy.get('[role="menu"]')
+        .contains("Initiator")
+        .parent()
+        .find("input[type=checkbox]")
+        .uncheck();
+
+      cy.contains(".column-config-apply button.done-setting", "done").click();
+
+      cy.get("dynamic-mat-table table-menu button").click();
+      cy.get('[role="menu"] button').contains("Save table setting").click();
+
+      cy.reload();
+
+      cy.get("dynamic-mat-table")
+        .scrollTo("right", { ensureScrollable: false })
+        .get("mat-header-row")
+        .should("not.contain", "Initiator");
+    });
+  });
+});

cypress/fixtures/testData.js

@@ -174,6 +174,16 @@ export const testData = {
       },
     ],
   },
+  job: {
+    emailJobInitiator: "user@example.com",
+    type: "embargo_period",
+    jobParams: { dataset: "scicat_testing/6ED35C17-EDD4-4CD4-B917-4E49698F7532" },
+    datasetList: [
+      { pid: "scicat_testing/6ED35C17-EDD4-4CD4-B917-4E49698F7532", files: [] },
+    ],
+    jobStatusMessage: "jobSubmitted",
+    jobResultObject: {},
+  },
 };
 
 export const testConfig = {
@@ -366,7 +376,7 @@ export const defaultDatasetsColumnsList = [
   "Size",
   "Creation Time",
   "Image",
-  "Proposal Id"
+  "Proposal Id",
 ];
 
 export const personalizedDatasetsColumnsList = [
@@ -377,5 +387,5 @@ export const personalizedDatasetsColumnsList = [
   "Creation Time",
   "Proposal Id",
   "Start Time",
-  "End Time"
+  "End Time",
 ];

cypress/support/commands.js

@@ -244,6 +244,34 @@ Cypress.Commands.add("createSample", (sample) => {
   });
 });
 
+Cypress.Commands.add("createJob", (overwrites = {}) => {
+  return cy.getCookie("user").then((userCookie) => {
+    const user = JSON.parse(decodeURIComponent(userCookie.value));
+
+    cy.getToken().then((token) => {
+      cy.log("Job: " + JSON.stringify(overwrites, null, 2));
+      cy.log("User: " + JSON.stringify(user, null, 2));
+
+      const job = {
+        ...testData.job,
+        emailJobInitiator: user.email,
+        ...overwrites,
+      };
+
+      cy.request({
+        method: "POST",
+        url: lbBaseUrl + "/jobs",
+        headers: {
+          Authorization: token,
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: job,
+      });
+    });
+  });
+});
+
 Cypress.Commands.add("updateProposal", (proposalId, updateProposalDto) => {
   return cy.getCookie("user").then((userCookie) => {
     const user = JSON.parse(decodeURIComponent(userCookie.value));
@@ -445,6 +473,51 @@ Cypress.Commands.add("removeSamples", () => {
   });
 });
 
+Cypress.Commands.add("removeJobs", () => {
+  cy.login(Cypress.env("username"), Cypress.env("password"));
+  cy.getToken().then((token) => {
+    const fields = { type: "embargo_period" };
+    const limits = { limit: 10, skip: 0, sort: { type: "asc" } };
+
+    cy.request({
+      method: "GET",
+      url:
+        lbBaseUrl +
+        "/jobs/fullquery?fields=" +
+        encodeURIComponent(JSON.stringify(fields)) +
+        "&limits=" +
+        encodeURIComponent(JSON.stringify(limits)),
+      headers: {
+        Authorization: token,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    })
+      .its("body")
+      .as("jobs");
+
+    cy.login(
+      Cypress.env("secondaryUsername"),
+      Cypress.env("secondaryPassword"),
+    );
+    cy.getToken().then((token) => {
+      cy.get("@jobs").then((jobs) => {
+        jobs.forEach((job) => {
+          cy.request({
+            method: "DELETE",
+            url: lbBaseUrl + `/jobs/${encodeURIComponent(job.id)}`,
+            headers: {
+              Authorization: token,
+              Accept: "application/json",
+              "Content-Type": "application/json",
+            },
+          });
+        });
+      });
+    });
+  });
+});
+
 Cypress.Commands.add("initializeElasticSearch", (index) => {
   cy.login(Cypress.env("username"), Cypress.env("password"));
   cy.getToken().then((token) => {

src/app/jobs/jobs-dashboard-new/jobs-dashboard-new.component.html

@@ -1,7 +1,22 @@
-<shared-table
+<dynamic-mat-table
+  [tableName]="tableName"
+  [columns]="columns"
   [dataSource]="dataSource"
-  [columnsdef]="columns"
-  [pageSize]="5"
-  (rowClick)="onRowClick($event)"
+  [pagination]="pagination"
+  [pagingMode]="paginationMode"
+  [setting]="setting"
+  [pending]="pending"
+  [rowSelectionMode]="rowSelectionMode"
+  [showGlobalTextSearch]="true"
+  [globalTextSearch]="globalTextSearch"
+  [globalTextSearchPlaceholder]="'Initiator, Type, Parameters...'"
+  (globalTextSearchChange)="onGlobalTextSearchChange($event)"
+  (globalTextSearchApply)="onGlobalTextSearchAction()"
+  (onRowEvent)="onRowEvent($event)"
+  (settingChange)="onSettingChange($event)"
+  (paginationChange)="onPaginationChange($event)"
+  [emptyMessage]="'No jobs available'"
+  [emptyIcon]="'folder'"
+  class="mat-elevation-z2"
 >
-</shared-table>
+</dynamic-mat-table>

src/app/jobs/jobs-dashboard-new/jobs-dashboard-new.component.spec.ts

@@ -1,49 +1,50 @@
-import { NO_ERRORS_SCHEMA } from "@angular/compiler";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-import { ActivatedRoute, Router } from "@angular/router";
+import { JobsDashboardNewComponent } from "./jobs-dashboard-new.component";
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+import { Router } from "@angular/router";
 import { AppConfigService } from "app-config.service";
-import {
-  MockActivatedRoute,
-  MockAppConfigService,
-  MockAuthService,
-  MockHttp,
-  MockRouter,
-} from "shared/MockStubs";
+import { ScicatDataService } from "shared/services/scicat-data-service";
 import { ExportExcelService } from "shared/services/export-excel.service";
-import { JobsDashboardNewComponent } from "./jobs-dashboard-new.component";
-import { SharedTableModule } from "shared/modules/shared-table/shared-table.module";
-import { SharedScicatFrontendModule } from "shared/shared.module";
-import { HttpClient } from "@angular/common/http";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { InternalStorage } from "shared/services/auth/base.storage";
-import { AuthService } from "shared/services/auth/auth.service";
-import { provideLuxonDateAdapter } from "@angular/material-luxon-adapter";
+import { RowEventType } from "shared/modules/dynamic-material-table/models/table-row.model";
+import { provideMockStore } from "@ngrx/store/testing";
+import { selectJobsDashboardPageViewModel } from "state-management/selectors/jobs.selectors";
+
+const getConfig = () => ({});
 
 describe("JobsDashboardNewComponent", () => {
   let component: JobsDashboardNewComponent;
   let fixture: ComponentFixture<JobsDashboardNewComponent>;
 
-  beforeEach(waitForAsync(() => {
-    const appconfig = new MockAppConfigService(null);
-    const authService = new MockAuthService();
+  const router = {
+    navigateByUrl: jasmine.createSpy("navigateByUrl"),
+  };
+
+  const jobsVm = {
+    jobs: [],
+    count: 0,
+    filters: {
+      skip: 0,
+      limit: 5,
+      sortField: "creationTime:desc",
+      mode: undefined,
+    },
+    tableSettings: { columns: [] },
+  };
 
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
       declarations: [JobsDashboardNewComponent],
-      imports: [
-        SharedTableModule,
-        SharedScicatFrontendModule,
-        BrowserAnimationsModule,
-      ],
       providers: [
-        { provide: ActivatedRoute, useClass: MockActivatedRoute },
+        { provide: Router, useValue: router },
+        { provide: AppConfigService, useValue: { getConfig } },
+        { provide: ScicatDataService, useValue: {} },
         { provide: ExportExcelService, useValue: {} },
-        { provide: Router, useClass: MockRouter },
-        { provide: HttpClient, useClass: MockHttp },
-        { provide: AppConfigService, useValue: appconfig },
-        { provide: AuthService, useValue: authService },
-        { provide: InternalStorage },
-        provideLuxonDateAdapter(),
+        provideMockStore({
+          selectors: [
+            { selector: selectJobsDashboardPageViewModel, value: jobsVm },
+          ],
+        }),
       ],
     }).compileComponents();
   }));
@@ -61,4 +62,19 @@ describe("JobsDashboardNewComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  describe("#onRowEvent", () => {
+    it("should navigate to a Job detail", () => {
+      const job = { jobId: "job-1" };
+      const id = encodeURIComponent(job.jobId);
+
+      component.onRowEvent({
+        event: RowEventType.RowClick,
+        sender: { row: job },
+      } as any);
+
+      expect(router.navigateByUrl).toHaveBeenCalledTimes(1);
+      expect(router.navigateByUrl).toHaveBeenCalledWith("/user/jobs/" + id);
+    });
+  });
 });