Merge pull request #303 from catenax-ng/main

Multisorting for notifications

.github/workflows/kics.yml

@@ -100,7 +100,7 @@ jobs:
         with:
           # Scanning directory .
           path: "./tx-backend"
-          exclude_queries: 2ea04bef-c769-409e-9179-ee3a50b5c0ac,6998389e-66b2-473d-8d05-c8d71ac4d04d,a8e859da-4a43-4e7f-94b8-25d6e3bf8e90,d172a060-8569-4412-8045-3560ebd477e8,2e9b6612-8f69-42e0-a5b8-ed17739c2f3a,d172a060-8569-4412-8045-3560ebd477e8,9f88c88d-824d-4d9a-b985-e22977046042,8c8261c2-19a9-4ef7-ad37-b8bc7bdd4d85,181bd815-767e-4e95-a24d-bb3c87328e19,00b78adf-b83f-419c-8ed8-c6018441dd3a
+          exclude_queries: 2ea04bef-c769-409e-9179-ee3a50b5c0ac,6998389e-66b2-473d-8d05-c8d71ac4d04d,a8e859da-4a43-4e7f-94b8-25d6e3bf8e90,d172a060-8569-4412-8045-3560ebd477e8,2e9b6612-8f69-42e0-a5b8-ed17739c2f3a,d172a060-8569-4412-8045-3560ebd477e8,9f88c88d-824d-4d9a-b985-e22977046042,8c8261c2-19a9-4ef7-ad37-b8bc7bdd4d85,181bd815-767e-4e95-a24d-bb3c87328e19,00b78adf-b83f-419c-8ed8-c6018441dd3a,86e3702f-c868-44b2-b61d-ea5316c18110
           enable_comments: true
           # Fail on HIGH severity results
           fail_on: high

CHANGELOG.md

@@ -7,10 +7,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 ### Added
 
+- added multisorting in FE for notifications
 ### Changed
 
 ### Removed
 
+- Owner filter and replaced it with the new filter query param
+
 ## [7.1.0 - 29.09.2023]
 ### Added
 - Splitscreen View with sliders on parts and otherParts View

DEPENDENCIES_BACKEND

@@ -140,7 +140,7 @@ maven/mavencentral/org.eclipse.edc/transfer-spi/0.1.3, Apache-2.0, approved, tec
 maven/mavencentral/org.eclipse.edc/transform-spi/0.1.3, Apache-2.0, approved, technology.edc
 maven/mavencentral/org.eclipse.edc/validator-spi/0.1.3, Apache-2.0, approved, technology.edc
 maven/mavencentral/org.eclipse.edc/web-spi/0.1.3, Apache-2.0, approved, technology.edc
-maven/mavencentral/org.eclipse.tractusx.irs/irs-registry-client/1.2.1-20230928.131326-5, Apache-2.0, approved, automotive.tractusx
+maven/mavencentral/org.eclipse.tractusx.irs/irs-registry-client/1.2.1-20230929.134937-6, Apache-2.0, approved, automotive.tractusx
 maven/mavencentral/org.eclipse.tractusx.traceability/tx-backend/0.0.1-SNAPSHOT, Apache-2.0, approved, automotive.tractusx
 maven/mavencentral/org.eclipse.tractusx.traceability/tx-models/0.0.1-SNAPSHOT, Apache-2.0, approved, automotive.tractusx
 maven/mavencentral/org.flywaydb/flyway-core/9.16.3, Apache-2.0, approved, #7935

DEPENDENCIES_FRONTEND

@@ -377,7 +377,7 @@ npm/npmjs/-/flat-cache/3.0.4, MIT, approved, clearlydefined
 npm/npmjs/-/flatted/3.2.5, ISC AND (ISC AND MIT), approved, #2430
 npm/npmjs/-/flatted/3.2.7, ISC AND (ISC AND MIT), approved, #2430
 npm/npmjs/-/fn.name/1.1.0, MIT, approved, clearlydefined
-npm/npmjs/-/follow-redirects/1.15.2, MIT, approved, clearlydefined
+npm/npmjs/-/follow-redirects/1.15.2, MIT, approved, #10782
 npm/npmjs/-/for-each/0.3.3, MIT, approved, clearlydefined
 npm/npmjs/-/forever-agent/0.6.1, Apache-2.0, approved, clearlydefined
 npm/npmjs/-/form-data/2.3.3, MIT, approved, clearlydefined
@@ -1443,7 +1443,7 @@ npm/npmjs/@tsconfig/node16/1.0.2, MIT, approved, clearlydefined
 npm/npmjs/@tufjs/canonical-json/1.0.0, Apache-2.0 AND MIT, approved, #8047
 npm/npmjs/@tufjs/models/1.0.3, MIT, approved, #7600
 npm/npmjs/@types/aria-query/4.2.2, MIT, approved, clearlydefined
-npm/npmjs/@types/body-parser/1.19.2, MIT, approved, clearlydefined
+npm/npmjs/@types/body-parser/1.19.2, MIT, approved, #10831
 npm/npmjs/@types/bonjour/3.5.10, MIT, approved, clearlydefined
 npm/npmjs/@types/connect-history-api-fallback/1.5.0, MIT, approved, #8395
 npm/npmjs/@types/connect/3.4.35, MIT, approved, clearlydefined
@@ -1480,8 +1480,8 @@ npm/npmjs/@types/d3-timer/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/@types/d3-transition/3.0.1, MIT, approved, clearlydefined
 npm/npmjs/@types/d3-zoom/3.0.1, MIT, approved, clearlydefined
 npm/npmjs/@types/d3/7.4.0, MIT, approved, clearlydefined
-npm/npmjs/@types/debug/4.1.7, MIT, approved, clearlydefined
-npm/npmjs/@types/eslint-scope/3.7.3, MIT, approved, clearlydefined
+npm/npmjs/@types/debug/4.1.7, MIT, approved, #10817
+npm/npmjs/@types/eslint-scope/3.7.3, MIT, approved, #10812
 npm/npmjs/@types/eslint/8.4.2, MIT, approved, #2429
 npm/npmjs/@types/estree/0.0.51, MIT, approved, clearlydefined
 npm/npmjs/@types/express-serve-static-core/4.17.34, MIT, approved, #6020
@@ -1498,22 +1498,22 @@ npm/npmjs/@types/lodash-es/4.17.7, MIT, approved, clearlydefined
 npm/npmjs/@types/lodash/4.14.182, MIT, approved, #4131
 npm/npmjs/@types/lodash/4.14.194, MIT, approved, #4131
 npm/npmjs/@types/luxon/3.3.0, MIT, approved, clearlydefined
-npm/npmjs/@types/mime/1.3.2, MIT, approved, clearlydefined
-npm/npmjs/@types/mime/3.0.1, MIT, approved, clearlydefined
+npm/npmjs/@types/mime/1.3.2, MIT, approved, #10834
+npm/npmjs/@types/mime/3.0.1, MIT, approved, #10805
 npm/npmjs/@types/minimatch/5.1.2, MIT, approved, clearlydefined
-npm/npmjs/@types/minimist/1.2.2, MIT, approved, clearlydefined
+npm/npmjs/@types/minimist/1.2.2, MIT, approved, #10839
 npm/npmjs/@types/mkdirp/1.0.2, MIT, approved, clearlydefined
-npm/npmjs/@types/ms/0.7.31, MIT, approved, clearlydefined
+npm/npmjs/@types/ms/0.7.31, MIT, approved, #10811
 npm/npmjs/@types/node/14.18.34, MIT, approved, #4611
 npm/npmjs/@types/node/18.16.0, MIT, approved, #9385
 npm/npmjs/@types/node/20.2.3, MIT, approved, clearlydefined
-npm/npmjs/@types/normalize-package-data/2.4.1, MIT, approved, clearlydefined
+npm/npmjs/@types/normalize-package-data/2.4.1, MIT, approved, #10792
 npm/npmjs/@types/parse-json/4.0.0, MIT, approved, clearlydefined
 npm/npmjs/@types/qs/6.9.7, MIT, approved, clearlydefined
-npm/npmjs/@types/range-parser/1.2.4, MIT, approved, clearlydefined
+npm/npmjs/@types/range-parser/1.2.4, MIT, approved, #10795
 npm/npmjs/@types/retry/0.12.0, MIT, approved, clearlydefined
 npm/npmjs/@types/semver/7.3.13, MIT, approved, #4668
-npm/npmjs/@types/send/0.17.1, MIT, approved, clearlydefined
+npm/npmjs/@types/send/0.17.1, MIT, approved, #10832
 npm/npmjs/@types/serve-index/1.9.1, MIT, approved, clearlydefined
 npm/npmjs/@types/serve-static/1.15.1, MIT, approved, #9188
 npm/npmjs/@types/set-cookie-parser/2.4.2, MIT, approved, clearlydefined

frontend/src/app/mocks/services/investigations-mock/investigations.model.ts

@@ -20,7 +20,7 @@
  ********************************************************************************/
 
 import type { NotificationResponse } from '@shared/model/notification.model';
-import { NotificationStatus } from '@shared/model/notification.model';
+import { NotificationStatus, NotificationType } from '@shared/model/notification.model';
 import { Severity } from '@shared/model/severity.model';
 import { getRandomAsset } from '../parts-mock/partsAsPlanned/partsAsPlanned.model';
 import { MOCK_part_1 } from '../parts-mock/partsAsPlanned/partsAsPlanned.test.model';
@@ -73,6 +73,7 @@ export const buildMockInvestigations = (
       targetDate: `2022-${numberToString(month)}-${numberToString(day + 1)}T11:34:12Z`,
       assetIds: [MOCK_part_1.id, getRandomAsset().id, getRandomAsset().id, getRandomAsset().id],
       errorMessage: errorInvestigation,
+      notificationType: NotificationType.INVESTIGATION,
     };
   });
 

frontend/src/app/mocks/services/otherParts-mock/otherParts.handler.ts

@@ -29,9 +29,9 @@ import { supplierPartsAsPlannedAssets } from './supplierPartsAsPlanned.model';
 export const otherPartsAsBuiltHandlers = [
   rest.get(`*${environment.apiUrl}/assets/as-built`, (req, res, ctx) => {
     const pagination = extractPagination(req);
-    const owner = req.url.searchParams.get('owner');
+    const ownerSearchQuery = req.url.searchParams.get('filter').replace("owner,EQUAL,", "");
 
-    switch (owner) {
+    switch (ownerSearchQuery) {
       case 'SUPPLIER':
         return res(ctx.status(200), ctx.json(mockSupplierAssets));
 
@@ -44,7 +44,7 @@ export const otherPartsAsBuiltHandlers = [
 
 export const otherPartsAsBuiltHandlersTest = [
   rest.get(`*${environment.apiUrl}/assets/as-built`, (req, res, ctx) => {
-    const owner = req.url.searchParams.get('owner');
+    const owner = req.url.searchParams.get('filter').replace("owner,EQUAL,", "");
 
     switch (owner) {
       case 'SUPPLIER':
@@ -60,7 +60,7 @@ export const otherPartsAsBuiltHandlersTest = [
 export const otherPartsAsPlannedHandlers = [
   rest.get(`*${environment.apiUrl}/assets/as-planned`, (req, res, ctx) => {
     const pagination = extractPagination(req);
-    const owner = req.url.searchParams.get('owner');
+    const owner = req.url.searchParams.get('filter').replace("owner,EQUAL,", "");
 
     switch (owner) {
       case 'SUPPLIER':
@@ -76,7 +76,7 @@ export const otherPartsAsPlannedHandlers = [
 export const otherPartsAsPlannedHandlersTest = [
   rest.get(`*${environment.apiUrl}/assets/as-planned`, (req, res, ctx) => {
     const pagination = extractPagination(req);
-    const owner = req.url.searchParams.get('owner');
+    const owner = req.url.searchParams.get('filter').replace("owner,EQUAL,", "");
 
     switch (owner) {
       case 'SUPPLIER':

frontend/src/app/modules/page/alerts/core/alerts.facade.ts

@@ -47,7 +47,7 @@ export class AlertsFacade {
     return this.alertsService.getAlert(id);
   }
 
-  public setReceivedAlerts(page = 0, pageSize = 50, sorting: TableHeaderSort = null): void {
+  public setReceivedAlerts(page = 0, pageSize = 50, sorting: TableHeaderSort[] = []): void {
     this.alertReceivedSubscription?.unsubscribe();
     this.alertReceivedSubscription = this.alertsService
       .getReceivedAlerts(page, pageSize, sorting)
@@ -57,7 +57,7 @@ export class AlertsFacade {
       });
   }
 
-  public setQueuedAndRequestedAlerts(page = 0, pageSize = 50, sorting: TableHeaderSort = null): void {
+  public setQueuedAndRequestedAlerts(page = 0, pageSize = 50, sorting: TableHeaderSort[] = []): void {
     this.alertQueuedAndRequestedSubscription?.unsubscribe();
     this.alertQueuedAndRequestedSubscription = this.alertsService
       .getCreatedAlerts(page, pageSize, sorting)

frontend/src/app/modules/page/alerts/presentation/alerts.component.html

@@ -28,9 +28,11 @@
   [receivedNotifications$]="alertsReceived$"
   [translationContext]="TranslationContext.COMMONALERT"
   [receivedOptionalColumns]="['severity', 'createdBy']"
-  [receivedSortableColumns]="{status: true, createdDate: true, severity: true, createdBy: true}"
+  [receivedMultiSortList]="alertReceivedSortList"
+  [receivedSortableColumns]="{description: true, status: true, createdDate: true, severity: true, createdBy: true}"
   [queuedAndRequestedOptionalColumns]="['severity', 'sendTo']"
-  [queuedAndRequestedSortableColumns]="{status: true, createdDate: true, severity: true, sendTo: true}"
+  [queuedAndRequestedSortableColumns]="{description: true, status: true, createdDate: true, severity: true, sendTo: true}"
+  [queuedAndRequestedMultiSortList]="alertQueuedAndRequestedSortList"
   (onReceivedTableConfigChanged)="onReceivedTableConfigChange($event)"
   (onQueuedAndRequestedTableConfigChanged)="onQueuedAndRequestedTableConfigChange($event)"
   (selected)="openDetailPage($event)"

frontend/src/app/modules/page/alerts/presentation/alerts.component.spec.ts

@@ -65,4 +65,96 @@ describe('AlertsComponent', () => {
     expect(await waitFor(() => screen.getByText('Alert No 20'))).toBeInTheDocument();
     expect(await waitFor(() => screen.getByText('Alert No 84'))).toBeInTheDocument();
   });
+
+  it('should sort received alerts after column status', async () => {
+    const { fixture } = await renderAlerts();
+    const alertsComponent =  fixture.componentInstance;
+
+    let setTableFunctionSpy = spyOn<any>(alertsComponent, "setTableSortingList").and.callThrough();
+    let statusColumnHeader = await screen.findByText('table.column.status');
+    await waitFor(() => {fireEvent.click(statusColumnHeader);}, {timeout: 3000});
+
+
+    expect(setTableFunctionSpy).toHaveBeenCalledWith(['status', 'asc'], "received" );
+
+    expect(alertsComponent['alertReceivedSortList']).toEqual([["status", "asc"]]);
+  });
+
+  it('should sort queued and requested alerts after column status', async () => {
+    const { fixture } = await renderAlerts();
+    const alertsComponent =  fixture.componentInstance;
+
+    fireEvent.click(await waitFor(() => screen.getByText('commonAlert.tabs.queuedAndRequested')));
+
+    let setTableFunctionSpy = spyOn<any>(alertsComponent, "setTableSortingList").and.callThrough();
+    let statusColumnHeader = await screen.findByText('table.column.status');
+    await waitFor(() => {fireEvent.click(statusColumnHeader);}, {timeout: 3000});
+
+
+    expect(setTableFunctionSpy).toHaveBeenCalledWith(['status', 'asc'], "queued-and-requested" );
+
+    expect(alertsComponent['alertQueuedAndRequestedSortList']).toEqual([["status", "asc"]]);
+  });
+
+
+  it('should multisort after column description and status', async () => {
+    const { fixture } = await renderAlerts();
+    const alertsComponent =  fixture.componentInstance;
+
+    let setTableFunctionSpy = spyOn<any>(alertsComponent, "setTableSortingList").and.callThrough();
+    let descriptionColumnHeader = await screen.findByText('table.column.description');
+    await waitFor(() => {fireEvent.click(descriptionColumnHeader);}, {timeout: 3000});
+    let statusHeader = await screen.findByText('table.column.status')
+
+    await waitFor(() => {fireEvent.keyDown(statusHeader, {
+      ctrlKey: true,
+      charCode: 17
+    })})
+    expect(alertsComponent['ctrlKeyState']).toBeTruthy();
+    await waitFor(() => {
+      fireEvent.click(statusHeader)
+    });
+
+    await waitFor(() => {fireEvent.keyUp(statusHeader, {
+      ctrlKey: true,
+      charCode: 17
+    })})
+
+    await waitFor(() => {fireEvent.click(statusHeader)});
+
+
+    expect(setTableFunctionSpy).toHaveBeenCalledWith(['description', 'asc'], "received" );
+    expect(setTableFunctionSpy).toHaveBeenCalledWith(['status', 'asc'], "received" );
+    expect(alertsComponent['alertReceivedSortList']).toEqual([["description", "asc"], ["status", "desc"]]);
+  });
+
+  it('should reset sorting after third click', async () => {
+    const { fixture } = await renderAlerts();
+    const alertsComponent =  fixture.componentInstance;
+
+    let descriptionColumnHeader = await screen.findByText('table.column.description');
+    await waitFor(() => {fireEvent.click(descriptionColumnHeader);}, {timeout: 3000});
+    let statusColumnHeader = await screen.findByText('table.column.status')
+
+    await waitFor(() => {fireEvent.keyDown(statusColumnHeader, {
+      ctrlKey: true,
+      charCode: 17
+    })})
+
+    await waitFor(() => {
+      fireEvent.click(statusColumnHeader)
+    });
+
+    await waitFor(() => {fireEvent.keyUp(statusColumnHeader, {
+      ctrlKey: true,
+      charCode: 17
+    })})
+
+    await waitFor(() => {fireEvent.click(statusColumnHeader)});
+
+    await waitFor(() => {fireEvent.click(statusColumnHeader)});
+
+    expect(alertsComponent['alertReceivedSortList']).toEqual([]);
+  });
+
 });

frontend/src/app/modules/page/alerts/presentation/alerts.component.ts

@@ -17,19 +17,20 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ALERT_BASE_ROUTE, getRoute } from '@core/known-route';
 import { AlertDetailFacade } from '@page/alerts/core/alert-detail.facade';
 import { AlertHelperService } from '@page/alerts/core/alert-helper.service';
 import { AlertsFacade } from '@page/alerts/core/alerts.facade';
+import { NotificationMenuActionsAssembler } from '@shared/assembler/notificationMenuActions.assembler';
 import { NotificationCommonModalComponent } from '@shared/components/notification-common-modal/notification-common-modal.component';
-import { MenuActionConfig, TableEventConfig } from '@shared/components/table/table.model';
+import { MenuActionConfig, TableEventConfig, TableHeaderSort } from '@shared/components/table/table.model';
+import { TableSortingUtil } from '@shared/components/table/tableSortingUtil';
 import { NotificationTabInformation } from '@shared/model/notification-tab-information';
-import { Notification } from '@shared/model/notification.model';
+import { Notification, NotificationStatusGroup } from '@shared/model/notification.model';
 import { TranslationContext } from '@shared/model/translation-context.model';
 import { Subscription } from 'rxjs';
-import {NotificationMenuActionsAssembler} from "@shared/assembler/notificationMenuActions.assembler";
 
 @Component({
   selector: 'app-alerts',
@@ -44,6 +45,10 @@ export class AlertsComponent {
 
   public menuActionsConfig: MenuActionConfig<Notification>[];
 
+  public alertReceivedSortList: TableHeaderSort[] = [];
+  public alertQueuedAndRequestedSortList: TableHeaderSort[] = [];
+  private ctrlKeyState: boolean = false;
+
   private paramSubscription: Subscription;
 
   private pagination: TableEventConfig = { page: 0, pageSize: 50, sorting: ['createdDate' , 'desc'] };
@@ -58,13 +63,20 @@ export class AlertsComponent {
     ) {
         this.alertsReceived$ = this.alertsFacade.alertsReceived$;
         this.alertsQueuedAndRequested$ = this.alertsFacade.alertsQueuedAndRequested$;
+
+      window.addEventListener('keydown', (event) => {
+        this.ctrlKeyState = event.ctrlKey;
+      });
+      window.addEventListener('keyup', (event) => {
+        this.ctrlKeyState = event.ctrlKey;
+      });
     }
 
   public ngOnInit(): void {
     this.paramSubscription = this.route.queryParams.subscribe(params => {
       this.pagination.page = params?.pageNumber;
-      this.alertsFacade.setReceivedAlerts(this.pagination.page, this.pagination.pageSize, this.pagination.sorting);
-      this.alertsFacade.setQueuedAndRequestedAlerts(this.pagination.page, this.pagination.pageSize, this.pagination.sorting);
+      this.alertsFacade.setReceivedAlerts(this.pagination.page, this.pagination.pageSize, this.alertReceivedSortList);
+      this.alertsFacade.setQueuedAndRequestedAlerts(this.pagination.page, this.pagination.pageSize, this.alertQueuedAndRequestedSortList);
     })
   }
 
@@ -83,12 +95,14 @@ export class AlertsComponent {
 
   public onReceivedTableConfigChange(pagination: TableEventConfig) {
     this.pagination = pagination;
-    this.alertsFacade.setReceivedAlerts(this.pagination.page, this.pagination.pageSize, this.pagination.sorting);
+    this.setTableSortingList(pagination.sorting, NotificationStatusGroup.RECEIVED);
+    this.alertsFacade.setReceivedAlerts(this.pagination.page, this.pagination.pageSize, this.alertReceivedSortList);
   }
 
   public onQueuedAndRequestedTableConfigChange(pagination: TableEventConfig) {
     this.pagination = pagination;
-    this.alertsFacade.setQueuedAndRequestedAlerts(this.pagination.page, this.pagination.pageSize, this.pagination.sorting);
+    this.setTableSortingList(pagination.sorting, NotificationStatusGroup.QUEUED_AND_REQUESTED);
+    this.alertsFacade.setQueuedAndRequestedAlerts(this.pagination.page, this.pagination.pageSize, this.alertQueuedAndRequestedSortList);
   }
 
   public openDetailPage(notification: Notification): void {
@@ -103,5 +117,11 @@ export class AlertsComponent {
     this.ngOnInit();
   }
 
+  private setTableSortingList(sorting: TableHeaderSort, notificationTable: NotificationStatusGroup): void {
+    const tableSortList = notificationTable === NotificationStatusGroup.RECEIVED ?
+      this.alertReceivedSortList : this.alertQueuedAndRequestedSortList;
+    TableSortingUtil.setTableSortingList(sorting, tableSortList, this.ctrlKeyState);
+  }
+
   protected readonly TranslationContext = TranslationContext;
 }

frontend/src/app/modules/page/dashboard/abstraction/dashboard.facade.ts

@@ -89,7 +89,7 @@ export class DashboardFacade {
 
   private setInvestigations(): void {
     this.investigationSubscription?.unsubscribe();
-    this.investigationSubscription = this.investigationsService.getReceivedInvestigations(0, 5, null).subscribe({
+    this.investigationSubscription = this.investigationsService.getReceivedInvestigations(0, 5, []).subscribe({
       next: data => this.dashboardState.setInvestigation({ data }),
       error: (error: Error) => this.dashboardState.setInvestigation({ error }),
     });