feat: migrate transfer history page to API Wrapper (#351)

---------

Co-authored-by: Richard Treier <richard.treier@sovity.de>

CHANGELOG.md

@@ -22,6 +22,8 @@ the detailed section referring to by linking pull requests or issues.
 
 - Removed 404-causing login polling from broker UI
 
+- Migrated transfer history page to api wrapper
+
 #### Removed
 
 #### Fixed

fake-backend/json/transferHistoryAssetDetails.json

@@ -0,0 +1,21 @@
+{
+  "properties": {
+    "asset:prop:id": "urn:artifact:test-asset-1",
+    "asset:prop:name": "Test Asset 1",
+    "asset:prop:version": "1.1",
+    "asset:prop:originator": "https://example-connector.de/api/v1/ids/data",
+    "asset:prop:originatorOrganization": "Organization",
+    "asset:prop:keywords": "test, example",
+    "asset:prop:contenttype": "application/json",
+    "asset:prop:description": "Test asset for checking asset fetch in transfer history page",
+    "asset:prop:language": "https://w3id.org/idsa/code/EN",
+    "asset:prop:publisher": "https://my.cool-api.gg/about",
+    "asset:prop:standardLicense": "https://my.cool-api.gg/license",
+    "asset:prop:endpointDocumentation": "https://my.cool-api.gg/docs",
+    "http://w3id.org/mds#dataCategory": "Example",
+    "http://w3id.org/mds#dataSubcategory": "example-data",
+    "http://w3id.org/mds#dataModel": "data-model-001",
+    "http://w3id.org/mds#geoReferenceMethod": "example-reference-method",
+    "http://w3id.org/mds#transportMode": "Mode"
+  }
+}

fake-backend/json/transferHistoryPage.json

@@ -0,0 +1,68 @@
+{
+  "transferEntries": [
+    {
+      "transferProcessId": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
+      "createdDate": "2023-03-20T11:18:59.659Z",
+      "lastUpdatedDate": "2023-07-25T11:18:59.659Z",
+      "state": {
+        "code": 800,
+        "name": "COMPLETED",
+        "simplifiedState": "OK"
+      },
+      "contractAgreementId": "test-asset-1-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+      "direction": "CONSUMING",
+      "counterPartyConnectorEndpoint": "https://sovity-demo4-mds/api/v1/ids/data",
+      "assetName": "urn:artifact:test-asset-1",
+      "assetId": "urn:artifact:test-asset-1",
+      "errorMessage": null
+    },
+    {
+      "transferProcessId": "1317d0da-cdc6-42ab-b54b-1f90bcfed508",
+      "createdDate": "2023-01-20T11:18:59.659Z",
+      "lastUpdatedDate": "2023-03-25T11:18:59.659Z",
+      "state": {
+        "code": -1,
+        "name": "ERROR",
+        "simplifiedState": "ERROR"
+      },
+      "contractAgreementId": "test-asset-2-cd:5816a60b-86c1-489a-b26a-ed129947f973",
+      "direction": "CONSUMING",
+      "counterPartyConnectorEndpoint": "http://edc2:11003/api/v1/ids/data",
+      "assetName": "urn:artifact:test-asset-2",
+      "assetId": "urn:artifact:test-asset-2",
+      "errorMessage": "TransferProcessManager: attempt #8 failed to send transfer. Retry limit exceeded, TransferProcess 1317d0da-cdc6-42ab-b54b-1f90bcfed508 moves to ERROR state. Cause: java.net.SocketException: Connection reset"
+    },
+    {
+      "transferProcessId": "81cdf4cf-8427-480f-9662-8a29d66ddd3b",
+      "createdDate": "2022-03-25T11:18:59.659Z",
+      "lastUpdatedDate": "2022-11-20T11:18:59.659Z",
+      "state": {
+        "code": 800,
+        "name": "COMPLETED",
+        "simplifiedState": "OK"
+      },
+      "contractAgreementId": "test-asset-3-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
+      "direction": "CONSUMING",
+      "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
+      "assetName": "urn:artifact:test-asset-3",
+      "assetId": "urn:artifact:test-asset-3",
+      "errorMessage": null
+    },
+    {
+      "transferProcessId": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
+      "createdDate": "2022-01-29T11:18:59.659Z",
+      "lastUpdatedDate": "2022-02-24T11:18:59.659Z",
+      "state": {
+        "code": 600,
+        "name": "IN_PROGRESS",
+        "simplifiedState": "RUNNING"
+      },
+      "contractAgreementId": "test-asset-4-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+      "direction": "PROVIDING",
+      "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
+      "assetName": "Test Asset 4",
+      "assetId": "urn:artifact:test-asset-4",
+      "errorMessage": null
+    }
+  ]
+}

fake-backend/serve.js

@@ -53,11 +53,6 @@ app.get('/api/v1/data/contractdefinitions', (req, res) => {
   res.json(contractDefinitions);
 });
 
-const transferProcess = json('json/transferProcess.json');
-app.get('/api/v1/data/transferprocess', (req, res) => {
-  res.json(transferProcess);
-});
-
 const contractAgreements = json('json/contractAgreements.json');
 app.get('/api/v1/data/contractagreements', (req, res) => {
   res.json(contractAgreements);
@@ -106,6 +101,21 @@ app.get('/api/v1/data/wrapper/ui/pages/contract-agreement-page', (_, res) => {
   res.json(contractAgreementPage);
 });
 
+const transferProcess = json('json/transferHistoryPage.json');
+app.get('/api/v1/data/wrapper/ui/pages/transfer-history-page', (req, res) => {
+  res.json(transferProcess);
+});
+
+const transferHistoryAssetDetails = json(
+  'json/transferHistoryAssetDetails.json',
+);
+app.get(
+  '/api/v1/data/wrapper/ui/pages/transfer-history-page/transfer-processes/47240a35-d8fc-41d9-b020-07b87f3cc7b6/asset',
+  (req, res) => {
+    res.json(transferHistoryAssetDetails);
+  },
+);
+
 // Connector Limits
 const connectorLimits = json('json/connectorLimits.json');
 app.get('/api/v1/data/wrapper/ee/connector-limits', (_, res) => {

src/app/app.component.html

@@ -1 +1,12 @@
 <router-outlet></router-outlet>
+
+<!--
+    Our dialog headers use the mat-card-header style classes
+
+    For some reason, if MatCard component is not used somewhere in the DOM, 
+    the styles are omitted, making some of our dialogs look broken until a 
+    page is loaded that does.
+ -->
+<div style="display: none">
+  <mat-card><mat-card-header></mat-card-header></mat-card>
+</div>

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MAT_DATE_LOCALE, MatNativeDateModule} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatDialogModule} from '@angular/material/dialog';
@@ -37,6 +38,7 @@ import {
 
     // Angular Material
     MatButtonModule,
+    MatCardModule,
     MatDatepickerModule,
     MatDialogModule,
     MatIconModule,

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts

@@ -0,0 +1,29 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {NEVER, Observable} from 'rxjs';
+import {showDialogUntil} from '../../../core/utils/mat-dialog-utils';
+import {AssetDetailDialogData} from './asset-detail-dialog-data';
+import {AssetDetailDialogResult} from './asset-detail-dialog-result';
+import {AssetDetailDialogComponent} from './asset-detail-dialog.component';
+
+@Injectable()
+export class AssetDetailDialogService {
+  constructor(private dialog: MatDialog) {}
+
+  /**
+   * Shows an Asset Detail Dialog until until$ emits / completes
+   * @param data Asset Detail Dialog data, or a stream if there's a need to refresh the data
+   * @param until$ observable that controls the lifetime of the dialog
+   */
+  open(
+    data: AssetDetailDialogData | Observable<AssetDetailDialogData>,
+    until$: Observable<any> = NEVER,
+  ): Observable<AssetDetailDialogResult | undefined> {
+    return showDialogUntil(
+      this.dialog,
+      AssetDetailDialogComponent,
+      {data, maxHeight: '90vh'},
+      until$,
+    );
+  }
+}

src/app/component-library/catalog/catalog.module.ts

@@ -13,6 +13,7 @@ import {PropertyGridModule} from '../property-grid/property-grid.module';
 import {UiElementsModule} from '../ui-elements/ui-elements.module';
 import {AssetDetailDialogDataService} from './asset-detail-dialog/asset-detail-dialog-data.service';
 import {AssetDetailDialogComponent} from './asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogService} from './asset-detail-dialog/asset-detail-dialog.service';
 import {AssetPropertyGridGroupBuilder} from './asset-detail-dialog/asset-property-grid-group-builder';
 import {ContractOfferCardsComponent} from './contract-offer-cards/contract-offer-cards.component';
 import {ContractOfferIconComponent} from './contract-offer-icon/contract-offer-icon.component';
@@ -53,6 +54,10 @@ import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/tra
     TransferHistoryMiniListComponent,
     IconWithOnlineStatusComponent,
   ],
-  providers: [AssetPropertyGridGroupBuilder, AssetDetailDialogDataService],
+  providers: [
+    AssetPropertyGridGroupBuilder,
+    AssetDetailDialogDataService,
+    AssetDetailDialogService,
+  ],
 })
 export class CatalogModule {}

src/app/component-library/json-dialog/json-dialog.module.ts

@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
@@ -10,6 +11,7 @@ import {NgxJsonViewerModule} from 'ngx-json-viewer';
 import {ConfirmationDialogModule} from '../confirmation-dialog/confirmation-dialog.module';
 import {PipesAndDirectivesModule} from '../pipes-and-directives/pipes-and-directives.module';
 import {JsonDialogComponent} from './json-dialog/json-dialog.component';
+import {JsonDialogService} from './json-dialog/json-dialog.service';
 
 @NgModule({
   imports: [
@@ -19,6 +21,7 @@ import {JsonDialogComponent} from './json-dialog/json-dialog.component';
 
     // Angular Material
     MatButtonModule,
+    MatCardModule,
     MatCheckboxModule,
     MatDialogModule,
     MatIconModule,
@@ -32,6 +35,7 @@ import {JsonDialogComponent} from './json-dialog/json-dialog.component';
     ConfirmationDialogModule,
   ],
   declarations: [JsonDialogComponent],
+  providers: [JsonDialogService],
   exports: [JsonDialogComponent],
 })
 export class JsonDialogModule {}

src/app/component-library/json-dialog/json-dialog/json-dialog.service.ts

@@ -0,0 +1,23 @@
+import {Injectable} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {NEVER, Observable} from 'rxjs';
+import {showDialogUntil} from '../../../core/utils/mat-dialog-utils';
+import {JsonDialogComponent} from './json-dialog.component';
+import {JsonDialogData} from './json-dialog.data';
+
+@Injectable()
+export class JsonDialogService {
+  constructor(private dialog: MatDialog) {}
+
+  /**
+   * Shows JSON Detail Dialog until until$ emits / completes
+   * @param data json detail dialog data
+   * @param until$ observable that controls the lifetime of the dialog
+   */
+  showJsonDetailDialog(
+    data: JsonDialogData,
+    until$: Observable<any> = NEVER,
+  ): Observable<unknown> {
+    return showDialogUntil(this.dialog, JsonDialogComponent, {data}, until$);
+  }
+}

src/app/component-library/ui-elements/ago/date-input.ts

@@ -0,0 +1 @@
+export type DateInput = Date | string