From bc449107db455c514ff190dca8d63d65eef6fb54 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Wed, 12 Jul 2023 13:49:13 +0200
Subject: [PATCH 01/17] feat: migrating transfer history page to api wrapper

---
 CHANGELOG.md                                  |   2 +
 .../json/transferHistoryAssetDetails.json     |  21 +++
 fake-backend/json/transferProcess.json        | 154 +++++-------------
 fake-backend/serve.js                         |  10 ++
 .../ui-elements/ago/formatDateAgo.ts          |   6 +-
 .../api/transferProcess.service.ts            |  82 ++++------
 .../services/models/transfer-history-entry.ts |  12 ++
 .../transfer-process-asset-details.service.ts |  22 +++
 .../dashboard-page-data.service.ts            |  16 +-
 .../transfer-history-page.module.ts           |   2 +
 .../transfer-history-page.component.html      |  52 +++---
 .../transfer-history-page.component.ts        |  79 +++++++--
 src/theme.scss                                |   9 +
 13 files changed, 252 insertions(+), 215 deletions(-)
 create mode 100644 fake-backend/json/transferHistoryAssetDetails.json
 create mode 100644 src/app/core/services/models/transfer-history-entry.ts
 create mode 100644 src/app/core/services/transfer-process-asset-details.service.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd75d7f23..353928cc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Changed
 
+- Migrated transfer history page to api wrapper
+
 #### Removed
 
 #### Fixed
diff --git a/fake-backend/json/transferHistoryAssetDetails.json b/fake-backend/json/transferHistoryAssetDetails.json
new file mode 100644
index 000000000..921bc8434
--- /dev/null
+++ b/fake-backend/json/transferHistoryAssetDetails.json
@@ -0,0 +1,21 @@
+{
+  "properties": {
+    "asset:prop:id": "urn:artifact:db-rail-network-2023-jan",
+    "asset:prop:name": "Rail Network DB 2023 January",
+    "asset:prop:version": "1.1",
+    "asset:prop:originator": "https://example-connector.rail-mgmt.bahn.de/api/v1/ids/data",
+    "asset:prop:originatorOrganization": "Deutsche Bahn AG",
+    "asset:prop:keywords": "db, bahn, rail, Rail-Designer",
+    "asset:prop:contenttype": "application/json",
+    "asset:prop:description": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.",
+    "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": "Infrastructure and Logistics",
+    "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes",
+    "http://w3id.org/mds#dataModel": "my-data-model-001",
+    "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method",
+    "http://w3id.org/mds#transportMode": "Rail"
+  }
+}
diff --git a/fake-backend/json/transferProcess.json b/fake-backend/json/transferProcess.json
index a8dd205da..a6cebd57f 100644
--- a/fake-backend/json/transferProcess.json
+++ b/fake-backend/json/transferProcess.json
@@ -1,128 +1,50 @@
 [
   {
-    "createdAt": 1675344948954,
-    "updatedAt": 1675344960579,
-    "id": "be0cac12-bb43-420e-aa29-d66bb3d0e0ac",
-    "type": "CONSUMER",
-    "state": "ERROR",
-    "stateTimestamp": 1675344960579,
-    "errorDetail": "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",
-    "dataRequest": {
-      "id": "c9fec9a2-1243-4738-9576-d70bf4558687",
-      "assetId": "urn:artifact:example-asset",
-      "contractId": "my-data-offer:5816a60b-86c1-489a-b26a-ed129947f973",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
-  },
-  {
-    "createdAt": 1675346050941,
-    "updatedAt": 1675346062120,
-    "id": "81cdf4cf-8427-480f-9662-8a29d66ddd3b",
-    "type": "CONSUMER",
-    "state": "COMPLETED",
-    "stateTimestamp": 1675346062120,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "92658c7a-9485-421f-a4be-ab186e7b190e",
-      "assetId": "urn:artifact:example-asset",
-      "contractId": "my-data-offer:5816a60b-86c1-489a-b26a-ed129947f973",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "asd",
-        "type": "HttpData"
-      }
-    }
-  },
-  {
-    "createdAt": 1675346295640,
-    "updatedAt": 1675346304201,
-    "id": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
-    "type": "CONSUMER",
+    "transferProcessId": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
+    "createdDate": "2022-01-20T11:18:59.659Z",
+    "lastUpdatedDate": "2022-06-25T11:18:59.659Z",
     "state": "COMPLETED",
-    "stateTimestamp": 1675346304201,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "101eb0ff-8a1c-4879-a9d3-02a378a4f7c7",
-      "assetId": "urn:artifact:example-asset",
-      "contractId": "my-data-offer:5816a60b-86c1-489a-b26a-ed129947f973",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "contractAgreementId": "db-rail-network-2023-jan-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "direction": "outgoing",
+    "counterPartyConnectorEndpoint": "https://sovity-demo4-mds/api/v1/ids/data",
+    "assetName": "Rail Network DB 2023 January",
+    "assetId": "urn:artifact:db-rail-network-2023-jan",
+    "errorMessage": null
   },
   {
-    "createdAt": 1675346968148,
-    "updatedAt": 1675346969520,
-    "id": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
-    "type": "PROVIDER",
-    "state": "IN_PROGRESS",
-    "stateTimestamp": 1675346969520,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "de881e9a-3ea8-4f05-9318-1aef45601581",
-      "assetId": "urn:artifact:pallene-asset",
-      "contractId": "pallene-asset-def:80de309c-0f0a-4eaf-a169-727c0ca6575b",
-      "connectorId": "urn:connector:edc"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "transferProcessId": "1317d0da-cdc6-42ab-b54b-1f90bcfed508",
+    "createdDate": "2022-03-20T11:18:59.659Z",
+    "lastUpdatedDate": "2022-03-25T11:18:59.659Z",
+    "state": "ERROR",
+    "contractAgreementId": "charging-stations-–-walkthrough-cd:5816a60b-86c1-489a-b26a-ed129947f973",
+    "direction": "outgoing",
+    "counterPartyConnectorEndpoint": "http://edc2:11003/api/v1/ids/data",
+    "assetName": "Charging Stations – Walkthrough",
+    "assetId": "urn:artifact:charging-stations-–-walkthrough",
+    "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"
   },
   {
-    "createdAt": 1675346958929,
-    "updatedAt": 1675347017414,
-    "id": "8a31794f-d6be-449a-a037-eed8c63424df",
-    "type": "CONSUMER",
-    "state": "ERROR",
-    "stateTimestamp": 1675347017414,
-    "errorDetail": "TransferProcessManager: attempt #8 failed to send transfer. Retry limit exceeded, TransferProcess 8a31794f-d6be-449a-a037-eed8c63424df moves to ERROR state. Cause: org.eclipse.edc.spi.EdcException: Received class de.fraunhofer.iais.eis.RejectionMessageImpl but expected [class de.fraunhofer.iais.eis.RequestInProcessMessageImpl].",
-    "dataRequest": {
-      "id": "ba2dca23-ed46-496e-b121-1556958a7ec6",
-      "assetId": "urn:artifact:pallene-asset",
-      "contractId": "pallene-asset-def:80de309c-0f0a-4eaf-a169-727c0ca6575b",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "transferProcessId": "81cdf4cf-8427-480f-9662-8a29d66ddd3b",
+    "createdDate": "2022-03-25T11:18:59.659Z",
+    "lastUpdatedDate": "2022-11-20T11:18:59.659Z",
+    "state": "COMPLETED",
+    "contractAgreementId": "domain-search-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
+    "direction": "incoming",
+    "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
+    "assetName": "Domain Search",
+    "assetId": "urn:artifact:domain-search",
+    "errorMessage": null
   },
   {
-    "createdAt": 1675347001981,
-    "updatedAt": 1675347005464,
-    "id": "d25328ce-bbf4-4623-991b-63b2b529f259",
-    "type": "PROVIDER",
+    "transferProcessId": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
+    "createdDate": "2023-01-29T11:18:59.659Z",
+    "lastUpdatedDate": "2023-02-29T11:18:59.659Z",
     "state": "IN_PROGRESS",
-    "stateTimestamp": 1675347005464,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "7cf62113-67e8-4e17-935c-14ba0e2592d6",
-      "assetId": "urn:artifact:pallene-asset",
-      "contractId": "pallene-asset-def:80de309c-0f0a-4eaf-a169-727c0ca6575b",
-      "connectorId": "urn:connector:edc"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "contractAgreementId": "bitcoin-data-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "direction": "outgoing",
+    "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
+    "assetName": "Bitcoin Data",
+    "assetId": "urn:artifact:bitcoin-data",
+    "errorMessage": null
   }
 ]
diff --git a/fake-backend/serve.js b/fake-backend/serve.js
index c774409c5..94d8a3262 100644
--- a/fake-backend/serve.js
+++ b/fake-backend/serve.js
@@ -73,6 +73,16 @@ app.get('/api/v1/data/last-commit-info', (req, res) => {
   res.json(lastCommitInfo);
 });
 
+const transferHistoryAssetDetails = json(
+  'json/transferHistoryAssetDetails.json',
+);
+app.get(
+  '/api/v1/data/transfer-history-page/transfer-processes/urn:artifact:db-rail-network-2023-jan/asset',
+  (req, res) => {
+    res.json(transferHistoryAssetDetails);
+  },
+);
+
 const catalog1 = json('json/catalog1.json');
 const catalog2 = json('json/catalog2.json');
 app.get('/api/v1/data/catalog', (req, res) => {
diff --git a/src/app/component-library/ui-elements/ago/formatDateAgo.ts b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
index cc9de19f5..c9332e898 100644
--- a/src/app/component-library/ui-elements/ago/formatDateAgo.ts
+++ b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
@@ -4,10 +4,12 @@ import {formatDistanceToNow} from 'date-fns';
  * Formats date as "{n} {timeUnit} ago" or "in {n} {timeUnit}s".
  * @param date date
  */
-export function formatDateAgo(date?: Date | null): string {
+export function formatDateAgo(date?: Date | string | null): string {
   if (!date) {
     return '';
   }
-
+  if (typeof date === 'string') {
+    date = new Date(date);
+  }
   return formatDistanceToNow(date, {addSuffix: true});
 }
diff --git a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
index 250d7e3d6..9c807865a 100644
--- a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
+++ b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
@@ -13,34 +13,22 @@
  */
 
 /* tslint:disable:no-unused-variable member-ordering */
-import {
-  HttpClient,
-  HttpContext,
-  HttpEvent,
-  HttpHeaders,
-  HttpParameterCodec,
-  HttpParams,
-  HttpResponse,
-} from '@angular/common/http';
-import {Inject, Injectable, Optional} from '@angular/core';
-import {Observable} from 'rxjs';
-import {Configuration} from '../configuration';
-import {CustomHttpParameterCodec} from '../encoder';
+import { HttpClient, HttpContext, HttpEvent, HttpHeaders, HttpParameterCodec, HttpParams, HttpResponse } from '@angular/common/http';
+import { Inject, Injectable, Optional } from '@angular/core';
+import { Observable } from 'rxjs';
 // @ts-ignore
-import {TransferId} from '../model/transferId';
+import { TransferProcessDto } from "../../../../core/services/models/transfer-history-entry";
+import { Configuration } from '../configuration';
+import { CustomHttpParameterCodec } from '../encoder';
 // @ts-ignore
-import {TransferProcessDto} from '../model/transferProcessDto';
+import { TransferId } from '../model/transferId';
 // @ts-ignore
-import {TransferRequestDto} from '../model/transferRequestDto';
+import { TransferRequestDto } from '../model/transferRequestDto';
 // @ts-ignore
-import {TransferState} from '../model/transferState';
+import { TransferState } from '../model/transferState';
 // @ts-ignore
-import {
-  API_KEY,
-  BASE_PATH,
-  COLLECTION_FORMATS,
-  CONNECTOR_DATAMANAGEMENT_API,
-} from '../variables';
+import { API_KEY, BASE_PATH, COLLECTION_FORMATS, CONNECTOR_DATAMANAGEMENT_API } from '../variables';
+
 
 @Injectable({
   providedIn: 'root',
@@ -132,25 +120,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any>;
   public cancelTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<any>>;
   public cancelTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<any>>;
   public cancelTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -220,25 +208,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -316,7 +304,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<Array<TransferProcessDto>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -326,7 +314,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -336,7 +324,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -346,7 +334,7 @@ export class TransferProcessService {
     sortField?: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     let localVarQueryParameters = new HttpParams({encoder: this.encoder});
     if (offset !== undefined && offset !== null) {
@@ -445,25 +433,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<TransferProcessDto>;
   public getTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -532,25 +520,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<TransferState>;
   public getTransferProcessState(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -619,25 +607,25 @@ export class TransferProcessService {
     transferRequestDto?: TransferRequestDto,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<TransferId>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     let localVarHeaders = this.defaultHeaders;
 
diff --git a/src/app/core/services/models/transfer-history-entry.ts b/src/app/core/services/models/transfer-history-entry.ts
new file mode 100644
index 000000000..5f9e7560d
--- /dev/null
+++ b/src/app/core/services/models/transfer-history-entry.ts
@@ -0,0 +1,12 @@
+export interface TransferProcessDto {
+  id: string;
+  createdDate: Date;
+  lastUpdatedDate: Date;
+  state: string;
+  contractAgreementId: string;
+  direction: string;
+  counterPartyConnectorEndpoint: string;
+  assetName: string;
+  assetId: string;
+  errorMessage?: string;
+}
diff --git a/src/app/core/services/transfer-process-asset-details.service.ts b/src/app/core/services/transfer-process-asset-details.service.ts
new file mode 100644
index 000000000..63c71b5cb
--- /dev/null
+++ b/src/app/core/services/transfer-process-asset-details.service.ts
@@ -0,0 +1,22 @@
+import {HttpClient} from '@angular/common/http';
+import {Inject, Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {APP_CONFIG, AppConfig} from '../config/app-config';
+import {AssetDto} from './models/asset-dto';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TransferProcessAssetDetailsService {
+  constructor(
+    private http: HttpClient,
+    @Inject(APP_CONFIG) public config: AppConfig,
+  ) {}
+
+  getTransferProcessAssetDetails(
+    transferProcessId: string,
+  ): Observable<AssetDto> {
+    const url = `${this.config.managementApiUrl}/transfer-history-page/transfer-processes/${transferProcessId}/asset`;
+    return this.http.get<AssetDto>(url);
+  }
+}
diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
index d5d0a360f..eb32d715b 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
@@ -8,17 +8,19 @@ import {
   ContractAgreementService,
   ContractDefinitionService,
   PolicyService,
-  TransferProcessDto,
   TransferProcessService,
 } from '../../../../core/services/api/legacy-managent-api-client';
-import {ConnectorInfoPropertyGridGroupBuilder} from '../../../../core/services/connector-info-property-grid-group-builder';
+import {
+  ConnectorInfoPropertyGridGroupBuilder
+} from '../../../../core/services/connector-info-property-grid-group-builder';
 import {LastCommitInfoService} from '../../../../core/services/last-commit-info.service';
 import {Fetched} from '../../../../core/services/models/fetched';
+import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
 import {TransferProcessStates} from '../../../../core/services/models/transfer-process-states';
-import {TransferProcessUtils} from '../../../../core/services/transfer-process-utils';
 import {DonutChartData} from '../dashboard-donut-chart/donut-chart-data';
 import {DashboardPageData, defaultDashboardData} from './dashboard-page-data';
 
+
 @Injectable({providedIn: 'root'})
 export class DashboardPageDataService {
   constructor(
@@ -29,10 +31,10 @@ export class DashboardPageDataService {
     private catalogApiUrlService: CatalogApiUrlService,
     private transferProcessService: TransferProcessService,
     private assetService: AssetService,
-    private transferProcessUtils: TransferProcessUtils,
     private lastCommitInfoService: LastCommitInfoService,
     private connectorInfoPropertyGridGroupBuilder: ConnectorInfoPropertyGridGroupBuilder,
-  ) {}
+  ) {
+  }
 
   /**
    * Fetch {@link DashboardPageData}.
@@ -141,8 +143,8 @@ export class DashboardPageDataService {
   ): DonutChartData {
     const filteredTransfers =
       direction === 'incoming'
-        ? transfers.filter((it) => this.transferProcessUtils.isIncoming(it))
-        : transfers.filter((it) => this.transferProcessUtils.isOutgoing(it));
+        ? transfers.filter((it) => it.direction === "incoming")
+        : transfers.filter((it) => it.direction === "outgoing");
 
     // Use the keys of the TransferProcessesStates Enum as order
     const order = Object.keys(TransferProcessStates);
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
index 94c9def77..20ef1e147 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
@@ -9,6 +9,7 @@ import {RouterModule} from '@angular/router';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
 import {UiElementsModule} from '../../../component-library/ui-elements/ui-elements.module';
 import {TransferHistoryPageComponent} from './transfer-history-page/transfer-history-page.component';
+import {CatalogModule} from "../../../component-library/catalog/catalog.module";
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import {TransferHistoryPageComponent} from './transfer-history-page/transfer-his
     MatIconModule,
 
     // EDC UI Modules
+    CatalogModule,
     PipesAndDirectivesModule,
     UiElementsModule,
   ],
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index ca8f7cf08..7084ce54c 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -36,15 +36,29 @@
       class="transfer-history-table"
       mat-table
       [dataSource]="transferProcessesList.data.transferProcesses">
-      <ng-container matColumnDef="id">
-        <th *matHeaderCellDef mat-header-cell scope="col">ID</th>
-        <td *matCellDef="let item" mat-cell>{{ item.id }}</td>
+      <ng-container matColumnDef="direction">
+        <th *matHeaderCellDef mat-header-cell scope="col">Direction</th>
+        <td *matCellDef="let item" mat-cell>
+          <mat-icon mat-table-avatar>
+            {{ item.direction === 'outgoing' ? 'upload' : 'download' }}
+          </mat-icon>
+        </td>
       </ng-container>
 
-      <ng-container matColumnDef="creationDate">
-        <th *matHeaderCellDef mat-header-cell scope="col">Created</th>
+      <ng-container matColumnDef="assetId">
+        <th *matHeaderCellDef mat-header-cell scope="col">Asset</th>
         <td *matCellDef="let item" mat-cell>
-          {{ asDate(item.createdAt) }}
+          <div *ngIf="item.direction === 'outgoing'">
+            <a
+              class="link"
+              href="javascript:void(0)"
+              (click)="onAssetDetailsClick(item.assetId)">
+              {{ item.assetName ?? item.assetId }}
+            </a>
+          </div>
+          <div *ngIf="item.direction === 'incoming'">
+            {{ item.assetName ?? item.assetId }}
+          </div>
         </td>
       </ng-container>
 
@@ -52,32 +66,19 @@
         <th *matHeaderCellDef mat-header-cell scope="col">State</th>
         <td *matCellDef="let item" mat-cell>{{ item.state }}</td>
       </ng-container>
-
       <ng-container matColumnDef="lastUpdated">
         <th *matHeaderCellDef mat-header-cell scope="col">Last updated</th>
         <td *matCellDef="let item" mat-cell>
-          {{ asDate(item.stateTimestamp) }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="connectorId">
-        <th *matHeaderCellDef mat-header-cell scope="col">Connector ID</th>
-        <td *matCellDef="let item" mat-cell>
-          {{ item.dataRequest.connectorId }}
+          <ago [date]="item.lastUpdatedDate"></ago>
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="assetId">
-        <th *matHeaderCellDef mat-header-cell scope="col">Asset ID</th>
+      <ng-container matColumnDef="counterPartyConnectorEndpoint">
+        <th *matHeaderCellDef mat-header-cell scope="col">
+          Counter-party Connector Endpoint
+        </th>
         <td *matCellDef="let item" mat-cell>
-          {{ item.dataRequest.assetId }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="contractId">
-        <th *matHeaderCellDef mat-header-cell scope="col">Contract ID</th>
-        <td *matCellDef="let item" mat-cell>
-          {{ item.dataRequest.contractId }}
+          {{ item.counterPartyConnectorEndpoint }}
         </td>
       </ng-container>
 
@@ -92,7 +93,6 @@
           </a>
         </td>
       </ng-container>
-
       <tr
         *matHeaderRowDef="columns"
         class="transfer-history-table-header"
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 29248c0e9..6044531f9 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -1,17 +1,27 @@
 import {Component, OnInit} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
+import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {
+  AssetDetailDialogDataService
+} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
+import {
+  AssetDetailDialogComponent
+} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
 import {
   ConfirmDialogModel,
   ConfirmationDialogComponent,
 } from '../../../../component-library/confirmation-dialog/confirmation-dialog/confirmation-dialog.component';
 import {JsonDialogComponent} from '../../../../component-library/json-dialog/json-dialog/json-dialog.component';
 import {JsonDialogData} from '../../../../component-library/json-dialog/json-dialog/json-dialog.data';
-import {
-  TransferProcessDto,
-  TransferProcessService,
-} from '../../../../core/services/api/legacy-managent-api-client';
+import {TransferProcessService} from '../../../../core/services/api/legacy-managent-api-client';
+import {AssetPropertyMapper} from '../../../../core/services/asset-property-mapper';
+import {Asset} from '../../../../core/services/models/asset';
 import {Fetched} from '../../../../core/services/models/fetched';
+import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
+import {NotificationService} from '../../../../core/services/notification.service';
+import {TransferProcessAssetDetailsService} from '../../../../core/services/transfer-process-asset-details.service';
+
 
 @Component({
   selector: 'transfer-history-page',
@@ -20,13 +30,11 @@ import {Fetched} from '../../../../core/services/models/fetched';
 })
 export class TransferHistoryPageComponent implements OnInit {
   columns: string[] = [
-    'id',
-    'creationDate',
+    'direction',
+    'assetId',
     'state',
     'lastUpdated',
-    'connectorId',
-    'assetId',
-    'contractId',
+    'counterPartyConnectorEndpoint',
     'details',
   ];
   transferProcessesList: Fetched<{
@@ -35,12 +43,17 @@ export class TransferHistoryPageComponent implements OnInit {
 
   constructor(
     private transferProcessService: TransferProcessService,
+    private transferProcessAssetDetailsService: TransferProcessAssetDetailsService,
+    private assetDetailDialogDataService: AssetDetailDialogDataService,
+    private assetPropertyMapper: AssetPropertyMapper,
+    private notificationService: NotificationService,
     private dialog: MatDialog,
-  ) {}
+  ) {
+  }
 
   onTransferHistoryDetailsClick(item: TransferProcessDto) {
     const data: JsonDialogData = {
-      title: item.id,
+      title: item.assetName ?? item.assetId,
       subtitle: 'Transfer History Details',
       icon: 'assignment',
       objectForJson: item,
@@ -48,6 +61,42 @@ export class TransferHistoryPageComponent implements OnInit {
     this.dialog.open(JsonDialogComponent, {data});
   }
 
+  loadingAssetDetails(assetId: string): Observable<Fetched<Asset>> {
+    return this.transferProcessAssetDetailsService
+      .getTransferProcessAssetDetails(assetId)
+      .pipe(map((asset) =>
+          this.assetPropertyMapper.buildAssetFromProperties(
+            asset.properties,
+          ),
+        ),
+        Fetched.wrap({
+          failureMessage: 'Failed fetching asset details!',
+        }),
+      );
+  }
+
+  buildAssetDetailsDialog(fetchedAssetData: Fetched<Asset>) {
+    fetchedAssetData.match({
+      ifOk: assetData => {
+        this.dialog.open(AssetDetailDialogComponent, {
+          data: this.assetDetailDialogDataService.assetDetails(assetData, false),
+          maxHeight: '90vh',
+        });
+      }, ifError: error => {
+        console.log(error)
+        this.notificationService.showError(error.failureMessage);
+      },
+      ifLoading: () => {
+      }
+    });
+  }
+
+  onAssetDetailsClick(assetId: string) {
+    this.loadingAssetDetails(assetId).subscribe((fetchedAssetData) => {
+      this.buildAssetDetailsDialog(fetchedAssetData)
+    })
+  }
+
   ngOnInit(): void {
     this.loadTransferProcesses();
   }
@@ -79,9 +128,9 @@ export class TransferHistoryPageComponent implements OnInit {
       .getAllTransferProcesses(0, 10_000_000)
       .pipe(
         map((transferProcesses) => ({
-          transferProcesses: transferProcesses.sort(function (a, b) {
+          transferProcesses: [...transferProcesses].sort(function (a, b) {
             return (
-              b.createdTimestamp?.valueOf()! - a.createdTimestamp?.valueOf()!
+              new Date(b.lastUpdatedDate)?.valueOf()! - new Date(a.lastUpdatedDate)?.valueOf()!
             );
           }),
         })),
@@ -94,8 +143,4 @@ export class TransferHistoryPageComponent implements OnInit {
           (this.transferProcessesList = transferProcessesList),
       );
   }
-
-  asDate(epochMillis?: number) {
-    return epochMillis ? new Date(epochMillis).toLocaleDateString() : '';
-  }
 }
diff --git a/src/theme.scss b/src/theme.scss
index 7c00a9bad..8fa616c73 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -20,6 +20,7 @@ $custom-typography: mat.define-typography-config(
     sovityColors.$link-color
   );
 }
+
 .theme-mds {
   @include mat.all-component-themes(mdsColors.$theme);
   @include themeGeneratedVars.theme-vars(
@@ -41,6 +42,14 @@ mat-icon[mat-card-avatar] {
   line-height: 40px;
 }
 
+// Fix Icon sizes used in table avatars
+mat-icon[mat-table-avatar] {
+  font-size: 30px;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+
 // Fix mat-chips exploding out and/or having multiline exploding strings
 mat-chip {
   max-width: 100%;

From 4a112037cd98bcd4cbcc039f1d3b90180ffe5b41 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Wed, 12 Jul 2023 14:09:07 +0200
Subject: [PATCH 02/17] chore: run format and cleaned test data

---
 .../json/transferHistoryAssetDetails.json     | 22 ++---
 fake-backend/json/transferProcess.json        | 24 +++---
 fake-backend/serve.js                         |  2 +-
 .../api/transferProcess.service.ts            | 82 +++++++++++--------
 .../contract-agreement-page.service.ts        |  1 -
 .../dashboard-page-data.service.ts            | 12 +--
 .../transfer-history-page.module.ts           |  2 +-
 .../transfer-history-page.component.html      |  2 +-
 .../transfer-history-page.component.ts        | 45 +++++-----
 9 files changed, 98 insertions(+), 94 deletions(-)

diff --git a/fake-backend/json/transferHistoryAssetDetails.json b/fake-backend/json/transferHistoryAssetDetails.json
index 921bc8434..1ee0d5755 100644
--- a/fake-backend/json/transferHistoryAssetDetails.json
+++ b/fake-backend/json/transferHistoryAssetDetails.json
@@ -1,21 +1,21 @@
 {
   "properties": {
-    "asset:prop:id": "urn:artifact:db-rail-network-2023-jan",
-    "asset:prop:name": "Rail Network DB 2023 January",
+    "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.rail-mgmt.bahn.de/api/v1/ids/data",
-    "asset:prop:originatorOrganization": "Deutsche Bahn AG",
-    "asset:prop:keywords": "db, bahn, rail, Rail-Designer",
+    "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": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.",
+    "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": "Infrastructure and Logistics",
-    "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes",
-    "http://w3id.org/mds#dataModel": "my-data-model-001",
-    "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method",
-    "http://w3id.org/mds#transportMode": "Rail"
+    "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"
   }
 }
diff --git a/fake-backend/json/transferProcess.json b/fake-backend/json/transferProcess.json
index a6cebd57f..3a23605e5 100644
--- a/fake-backend/json/transferProcess.json
+++ b/fake-backend/json/transferProcess.json
@@ -4,11 +4,11 @@
     "createdDate": "2022-01-20T11:18:59.659Z",
     "lastUpdatedDate": "2022-06-25T11:18:59.659Z",
     "state": "COMPLETED",
-    "contractAgreementId": "db-rail-network-2023-jan-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "contractAgreementId": "test-asset-1-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
     "direction": "outgoing",
     "counterPartyConnectorEndpoint": "https://sovity-demo4-mds/api/v1/ids/data",
-    "assetName": "Rail Network DB 2023 January",
-    "assetId": "urn:artifact:db-rail-network-2023-jan",
+    "assetName": "Test Asset 1",
+    "assetId": "urn:artifact:test-asset-1",
     "errorMessage": null
   },
   {
@@ -16,11 +16,11 @@
     "createdDate": "2022-03-20T11:18:59.659Z",
     "lastUpdatedDate": "2022-03-25T11:18:59.659Z",
     "state": "ERROR",
-    "contractAgreementId": "charging-stations-–-walkthrough-cd:5816a60b-86c1-489a-b26a-ed129947f973",
+    "contractAgreementId": "test-asset-2-cd:5816a60b-86c1-489a-b26a-ed129947f973",
     "direction": "outgoing",
     "counterPartyConnectorEndpoint": "http://edc2:11003/api/v1/ids/data",
-    "assetName": "Charging Stations – Walkthrough",
-    "assetId": "urn:artifact:charging-stations-–-walkthrough",
+    "assetName": "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"
   },
   {
@@ -28,11 +28,11 @@
     "createdDate": "2022-03-25T11:18:59.659Z",
     "lastUpdatedDate": "2022-11-20T11:18:59.659Z",
     "state": "COMPLETED",
-    "contractAgreementId": "domain-search-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
+    "contractAgreementId": "test-asset-3-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
     "direction": "incoming",
     "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
-    "assetName": "Domain Search",
-    "assetId": "urn:artifact:domain-search",
+    "assetName": "Test Asset 3",
+    "assetId": "urn:artifact:test-asset-3",
     "errorMessage": null
   },
   {
@@ -40,11 +40,11 @@
     "createdDate": "2023-01-29T11:18:59.659Z",
     "lastUpdatedDate": "2023-02-29T11:18:59.659Z",
     "state": "IN_PROGRESS",
-    "contractAgreementId": "bitcoin-data-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "contractAgreementId": "test-asset-4-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
     "direction": "outgoing",
     "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
-    "assetName": "Bitcoin Data",
-    "assetId": "urn:artifact:bitcoin-data",
+    "assetName": "Test Asset 4",
+    "assetId": "urn:artifact:test-asset-4",
     "errorMessage": null
   }
 ]
diff --git a/fake-backend/serve.js b/fake-backend/serve.js
index 94d8a3262..eaa07ed46 100644
--- a/fake-backend/serve.js
+++ b/fake-backend/serve.js
@@ -77,7 +77,7 @@ const transferHistoryAssetDetails = json(
   'json/transferHistoryAssetDetails.json',
 );
 app.get(
-  '/api/v1/data/transfer-history-page/transfer-processes/urn:artifact:db-rail-network-2023-jan/asset',
+  '/api/v1/data/transfer-history-page/transfer-processes/339b2a27-3b66-49f5-8b43-6a400d5914b5/asset',
   (req, res) => {
     res.json(transferHistoryAssetDetails);
   },
diff --git a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
index 9c807865a..3a6bc83f4 100644
--- a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
+++ b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
@@ -13,22 +13,34 @@
  */
 
 /* tslint:disable:no-unused-variable member-ordering */
-import { HttpClient, HttpContext, HttpEvent, HttpHeaders, HttpParameterCodec, HttpParams, HttpResponse } from '@angular/common/http';
-import { Inject, Injectable, Optional } from '@angular/core';
-import { Observable } from 'rxjs';
+import {
+  HttpClient,
+  HttpContext,
+  HttpEvent,
+  HttpHeaders,
+  HttpParameterCodec,
+  HttpParams,
+  HttpResponse,
+} from '@angular/common/http';
+import {Inject, Injectable, Optional} from '@angular/core';
+import {Observable} from 'rxjs';
 // @ts-ignore
-import { TransferProcessDto } from "../../../../core/services/models/transfer-history-entry";
-import { Configuration } from '../configuration';
-import { CustomHttpParameterCodec } from '../encoder';
+import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
+import {Configuration} from '../configuration';
+import {CustomHttpParameterCodec} from '../encoder';
 // @ts-ignore
-import { TransferId } from '../model/transferId';
+import {TransferId} from '../model/transferId';
 // @ts-ignore
-import { TransferRequestDto } from '../model/transferRequestDto';
+import {TransferRequestDto} from '../model/transferRequestDto';
 // @ts-ignore
-import { TransferState } from '../model/transferState';
+import {TransferState} from '../model/transferState';
 // @ts-ignore
-import { API_KEY, BASE_PATH, COLLECTION_FORMATS, CONNECTOR_DATAMANAGEMENT_API } from '../variables';
-
+import {
+  API_KEY,
+  BASE_PATH,
+  COLLECTION_FORMATS,
+  CONNECTOR_DATAMANAGEMENT_API,
+} from '../variables';
 
 @Injectable({
   providedIn: 'root',
@@ -120,25 +132,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any>;
   public cancelTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<any>>;
   public cancelTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<any>>;
   public cancelTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -208,25 +220,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -304,7 +316,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<Array<TransferProcessDto>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -314,7 +326,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -324,7 +336,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -334,7 +346,7 @@ export class TransferProcessService {
     sortField?: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     let localVarQueryParameters = new HttpParams({encoder: this.encoder});
     if (offset !== undefined && offset !== null) {
@@ -433,25 +445,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<TransferProcessDto>;
   public getTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -520,25 +532,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<TransferState>;
   public getTransferProcessState(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -607,25 +619,25 @@ export class TransferProcessService {
     transferRequestDto?: TransferRequestDto,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<TransferId>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     let localVarHeaders = this.defaultHeaders;
 
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts
index 2ac9782bc..313f34443 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts
@@ -13,7 +13,6 @@ import {ContractAgreementCardMapped} from '../contract-agreement-cards/contract-
 import {ContractAgreementCardMappedService} from '../contract-agreement-cards/contract-agreement-card-mapped.service';
 import {ContractAgreementPageData} from './contract-agreement-page.data';
 
-
 @Injectable({providedIn: 'root'})
 export class ContractAgreementPageService {
   constructor(
diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
index eb32d715b..5941f5466 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
@@ -10,9 +10,7 @@ import {
   PolicyService,
   TransferProcessService,
 } from '../../../../core/services/api/legacy-managent-api-client';
-import {
-  ConnectorInfoPropertyGridGroupBuilder
-} from '../../../../core/services/connector-info-property-grid-group-builder';
+import {ConnectorInfoPropertyGridGroupBuilder} from '../../../../core/services/connector-info-property-grid-group-builder';
 import {LastCommitInfoService} from '../../../../core/services/last-commit-info.service';
 import {Fetched} from '../../../../core/services/models/fetched';
 import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
@@ -20,7 +18,6 @@ import {TransferProcessStates} from '../../../../core/services/models/transfer-p
 import {DonutChartData} from '../dashboard-donut-chart/donut-chart-data';
 import {DashboardPageData, defaultDashboardData} from './dashboard-page-data';
 
-
 @Injectable({providedIn: 'root'})
 export class DashboardPageDataService {
   constructor(
@@ -33,8 +30,7 @@ export class DashboardPageDataService {
     private assetService: AssetService,
     private lastCommitInfoService: LastCommitInfoService,
     private connectorInfoPropertyGridGroupBuilder: ConnectorInfoPropertyGridGroupBuilder,
-  ) {
-  }
+  ) {}
 
   /**
    * Fetch {@link DashboardPageData}.
@@ -143,8 +139,8 @@ export class DashboardPageDataService {
   ): DonutChartData {
     const filteredTransfers =
       direction === 'incoming'
-        ? transfers.filter((it) => it.direction === "incoming")
-        : transfers.filter((it) => it.direction === "outgoing");
+        ? transfers.filter((it) => it.direction === 'incoming')
+        : transfers.filter((it) => it.direction === 'outgoing');
 
     // Use the keys of the TransferProcessesStates Enum as order
     const order = Object.keys(TransferProcessStates);
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
index 20ef1e147..ddd278cc3 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
@@ -6,10 +6,10 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatTableModule} from '@angular/material/table';
 import {RouterModule} from '@angular/router';
+import {CatalogModule} from '../../../component-library/catalog/catalog.module';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
 import {UiElementsModule} from '../../../component-library/ui-elements/ui-elements.module';
 import {TransferHistoryPageComponent} from './transfer-history-page/transfer-history-page.component';
-import {CatalogModule} from "../../../component-library/catalog/catalog.module";
 
 @NgModule({
   imports: [
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index 7084ce54c..30c9f84d0 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -52,7 +52,7 @@
             <a
               class="link"
               href="javascript:void(0)"
-              (click)="onAssetDetailsClick(item.assetId)">
+              (click)="onAssetDetailsClick(item.transferProcessId)">
               {{ item.assetName ?? item.assetId }}
             </a>
           </div>
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 6044531f9..3d22b5a47 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -2,12 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
-import {
-  AssetDetailDialogDataService
-} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {
-  AssetDetailDialogComponent
-} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
+import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
 import {
   ConfirmDialogModel,
   ConfirmationDialogComponent,
@@ -22,7 +18,6 @@ import {TransferProcessDto} from '../../../../core/services/models/transfer-hist
 import {NotificationService} from '../../../../core/services/notification.service';
 import {TransferProcessAssetDetailsService} from '../../../../core/services/transfer-process-asset-details.service';
 
-
 @Component({
   selector: 'transfer-history-page',
   templateUrl: './transfer-history-page.component.html',
@@ -48,8 +43,7 @@ export class TransferHistoryPageComponent implements OnInit {
     private assetPropertyMapper: AssetPropertyMapper,
     private notificationService: NotificationService,
     private dialog: MatDialog,
-  ) {
-  }
+  ) {}
 
   onTransferHistoryDetailsClick(item: TransferProcessDto) {
     const data: JsonDialogData = {
@@ -64,10 +58,9 @@ export class TransferHistoryPageComponent implements OnInit {
   loadingAssetDetails(assetId: string): Observable<Fetched<Asset>> {
     return this.transferProcessAssetDetailsService
       .getTransferProcessAssetDetails(assetId)
-      .pipe(map((asset) =>
-          this.assetPropertyMapper.buildAssetFromProperties(
-            asset.properties,
-          ),
+      .pipe(
+        map((asset) =>
+          this.assetPropertyMapper.buildAssetFromProperties(asset.properties),
         ),
         Fetched.wrap({
           failureMessage: 'Failed fetching asset details!',
@@ -77,24 +70,27 @@ export class TransferHistoryPageComponent implements OnInit {
 
   buildAssetDetailsDialog(fetchedAssetData: Fetched<Asset>) {
     fetchedAssetData.match({
-      ifOk: assetData => {
+      ifOk: (assetData) => {
         this.dialog.open(AssetDetailDialogComponent, {
-          data: this.assetDetailDialogDataService.assetDetails(assetData, false),
+          data: this.assetDetailDialogDataService.assetDetails(
+            assetData,
+            false,
+          ),
           maxHeight: '90vh',
         });
-      }, ifError: error => {
-        console.log(error)
+      },
+      ifError: (error) => {
+        console.log(error);
         this.notificationService.showError(error.failureMessage);
       },
-      ifLoading: () => {
-      }
+      ifLoading: () => {},
     });
   }
 
-  onAssetDetailsClick(assetId: string) {
-    this.loadingAssetDetails(assetId).subscribe((fetchedAssetData) => {
-      this.buildAssetDetailsDialog(fetchedAssetData)
-    })
+  onAssetDetailsClick(transferProcessId: string) {
+    this.loadingAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
+      this.buildAssetDetailsDialog(fetchedAssetData);
+    });
   }
 
   ngOnInit(): void {
@@ -130,7 +126,8 @@ export class TransferHistoryPageComponent implements OnInit {
         map((transferProcesses) => ({
           transferProcesses: [...transferProcesses].sort(function (a, b) {
             return (
-              new Date(b.lastUpdatedDate)?.valueOf()! - new Date(a.lastUpdatedDate)?.valueOf()!
+              new Date(b.lastUpdatedDate)?.valueOf()! -
+              new Date(a.lastUpdatedDate)?.valueOf()!
             );
           }),
         })),

From b254b7689eb67719ecd2f6510d22210422c8225f Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Wed, 19 Jul 2023 10:07:30 +0200
Subject: [PATCH 03/17] chore: minor type additions and removing blank lines

---
 src/app/component-library/ui-elements/ago/date-input.ts       | 2 ++
 src/app/component-library/ui-elements/ago/formatDateAgo.ts    | 3 ++-
 .../transfer-history-page.component.html                      | 4 ----
 .../transfer-history-page/transfer-history-page.component.ts  | 4 ++--
 4 files changed, 6 insertions(+), 7 deletions(-)
 create mode 100644 src/app/component-library/ui-elements/ago/date-input.ts

diff --git a/src/app/component-library/ui-elements/ago/date-input.ts b/src/app/component-library/ui-elements/ago/date-input.ts
new file mode 100644
index 000000000..02aef95cd
--- /dev/null
+++ b/src/app/component-library/ui-elements/ago/date-input.ts
@@ -0,0 +1,2 @@
+export type DateInput = Date | string | null
+
diff --git a/src/app/component-library/ui-elements/ago/formatDateAgo.ts b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
index c9332e898..c26cc9a74 100644
--- a/src/app/component-library/ui-elements/ago/formatDateAgo.ts
+++ b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
@@ -1,10 +1,11 @@
 import {formatDistanceToNow} from 'date-fns';
+import {DateInput} from "./date-input";
 
 /**
  * Formats date as "{n} {timeUnit} ago" or "in {n} {timeUnit}s".
  * @param date date
  */
-export function formatDateAgo(date?: Date | string | null): string {
+export function formatDateAgo(date?: DateInput): string {
   if (!date) {
     return '';
   }
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index 30c9f84d0..c5d7c4f32 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -44,7 +44,6 @@
           </mat-icon>
         </td>
       </ng-container>
-
       <ng-container matColumnDef="assetId">
         <th *matHeaderCellDef mat-header-cell scope="col">Asset</th>
         <td *matCellDef="let item" mat-cell>
@@ -61,7 +60,6 @@
           </div>
         </td>
       </ng-container>
-
       <ng-container matColumnDef="state">
         <th *matHeaderCellDef mat-header-cell scope="col">State</th>
         <td *matCellDef="let item" mat-cell>{{ item.state }}</td>
@@ -72,7 +70,6 @@
           <ago [date]="item.lastUpdatedDate"></ago>
         </td>
       </ng-container>
-
       <ng-container matColumnDef="counterPartyConnectorEndpoint">
         <th *matHeaderCellDef mat-header-cell scope="col">
           Counter-party Connector Endpoint
@@ -81,7 +78,6 @@
           {{ item.counterPartyConnectorEndpoint }}
         </td>
       </ng-container>
-
       <ng-container matColumnDef="details">
         <th *matHeaderCellDef mat-header-cell scope="col">Details</th>
         <td *matCellDef="let item" mat-cell>
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 3d22b5a47..cadfce9bd 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -55,7 +55,7 @@ export class TransferHistoryPageComponent implements OnInit {
     this.dialog.open(JsonDialogComponent, {data});
   }
 
-  loadingAssetDetails(assetId: string): Observable<Fetched<Asset>> {
+  loadAssetDetails(assetId: string): Observable<Fetched<Asset>> {
     return this.transferProcessAssetDetailsService
       .getTransferProcessAssetDetails(assetId)
       .pipe(
@@ -88,7 +88,7 @@ export class TransferHistoryPageComponent implements OnInit {
   }
 
   onAssetDetailsClick(transferProcessId: string) {
-    this.loadingAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
+    this.loadAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
       this.buildAssetDetailsDialog(fetchedAssetData);
     });
   }

From 4dfa4c5170fabe05612aaa6cae7bb21d994c33e2 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Wed, 12 Jul 2023 13:49:13 +0200
Subject: [PATCH 04/17] feat: migrating transfer history page to api wrapper

---
 CHANGELOG.md                                  |   2 +
 .../json/transferHistoryAssetDetails.json     |  21 +++
 fake-backend/json/transferProcess.json        | 154 +++++-------------
 fake-backend/serve.js                         |  10 ++
 .../ui-elements/ago/formatDateAgo.ts          |   6 +-
 .../api/transferProcess.service.ts            |  82 ++++------
 .../services/models/transfer-history-entry.ts |  12 ++
 .../transfer-process-asset-details.service.ts |  22 +++
 .../dashboard-page-data.service.ts            |  16 +-
 .../transfer-history-page.module.ts           |   2 +
 .../transfer-history-page.component.html      |  52 +++---
 .../transfer-history-page.component.ts        |  79 +++++++--
 src/theme.scss                                |   9 +
 13 files changed, 252 insertions(+), 215 deletions(-)
 create mode 100644 fake-backend/json/transferHistoryAssetDetails.json
 create mode 100644 src/app/core/services/models/transfer-history-entry.ts
 create mode 100644 src/app/core/services/transfer-process-asset-details.service.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c606c36b4..cd447da65 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Changed
 
+- Migrated transfer history page to api wrapper
+
 #### Removed
 
 #### Fixed
diff --git a/fake-backend/json/transferHistoryAssetDetails.json b/fake-backend/json/transferHistoryAssetDetails.json
new file mode 100644
index 000000000..921bc8434
--- /dev/null
+++ b/fake-backend/json/transferHistoryAssetDetails.json
@@ -0,0 +1,21 @@
+{
+  "properties": {
+    "asset:prop:id": "urn:artifact:db-rail-network-2023-jan",
+    "asset:prop:name": "Rail Network DB 2023 January",
+    "asset:prop:version": "1.1",
+    "asset:prop:originator": "https://example-connector.rail-mgmt.bahn.de/api/v1/ids/data",
+    "asset:prop:originatorOrganization": "Deutsche Bahn AG",
+    "asset:prop:keywords": "db, bahn, rail, Rail-Designer",
+    "asset:prop:contenttype": "application/json",
+    "asset:prop:description": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.",
+    "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": "Infrastructure and Logistics",
+    "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes",
+    "http://w3id.org/mds#dataModel": "my-data-model-001",
+    "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method",
+    "http://w3id.org/mds#transportMode": "Rail"
+  }
+}
diff --git a/fake-backend/json/transferProcess.json b/fake-backend/json/transferProcess.json
index a8dd205da..a6cebd57f 100644
--- a/fake-backend/json/transferProcess.json
+++ b/fake-backend/json/transferProcess.json
@@ -1,128 +1,50 @@
 [
   {
-    "createdAt": 1675344948954,
-    "updatedAt": 1675344960579,
-    "id": "be0cac12-bb43-420e-aa29-d66bb3d0e0ac",
-    "type": "CONSUMER",
-    "state": "ERROR",
-    "stateTimestamp": 1675344960579,
-    "errorDetail": "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",
-    "dataRequest": {
-      "id": "c9fec9a2-1243-4738-9576-d70bf4558687",
-      "assetId": "urn:artifact:example-asset",
-      "contractId": "my-data-offer:5816a60b-86c1-489a-b26a-ed129947f973",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
-  },
-  {
-    "createdAt": 1675346050941,
-    "updatedAt": 1675346062120,
-    "id": "81cdf4cf-8427-480f-9662-8a29d66ddd3b",
-    "type": "CONSUMER",
-    "state": "COMPLETED",
-    "stateTimestamp": 1675346062120,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "92658c7a-9485-421f-a4be-ab186e7b190e",
-      "assetId": "urn:artifact:example-asset",
-      "contractId": "my-data-offer:5816a60b-86c1-489a-b26a-ed129947f973",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "asd",
-        "type": "HttpData"
-      }
-    }
-  },
-  {
-    "createdAt": 1675346295640,
-    "updatedAt": 1675346304201,
-    "id": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
-    "type": "CONSUMER",
+    "transferProcessId": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
+    "createdDate": "2022-01-20T11:18:59.659Z",
+    "lastUpdatedDate": "2022-06-25T11:18:59.659Z",
     "state": "COMPLETED",
-    "stateTimestamp": 1675346304201,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "101eb0ff-8a1c-4879-a9d3-02a378a4f7c7",
-      "assetId": "urn:artifact:example-asset",
-      "contractId": "my-data-offer:5816a60b-86c1-489a-b26a-ed129947f973",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "contractAgreementId": "db-rail-network-2023-jan-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "direction": "outgoing",
+    "counterPartyConnectorEndpoint": "https://sovity-demo4-mds/api/v1/ids/data",
+    "assetName": "Rail Network DB 2023 January",
+    "assetId": "urn:artifact:db-rail-network-2023-jan",
+    "errorMessage": null
   },
   {
-    "createdAt": 1675346968148,
-    "updatedAt": 1675346969520,
-    "id": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
-    "type": "PROVIDER",
-    "state": "IN_PROGRESS",
-    "stateTimestamp": 1675346969520,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "de881e9a-3ea8-4f05-9318-1aef45601581",
-      "assetId": "urn:artifact:pallene-asset",
-      "contractId": "pallene-asset-def:80de309c-0f0a-4eaf-a169-727c0ca6575b",
-      "connectorId": "urn:connector:edc"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "transferProcessId": "1317d0da-cdc6-42ab-b54b-1f90bcfed508",
+    "createdDate": "2022-03-20T11:18:59.659Z",
+    "lastUpdatedDate": "2022-03-25T11:18:59.659Z",
+    "state": "ERROR",
+    "contractAgreementId": "charging-stations-–-walkthrough-cd:5816a60b-86c1-489a-b26a-ed129947f973",
+    "direction": "outgoing",
+    "counterPartyConnectorEndpoint": "http://edc2:11003/api/v1/ids/data",
+    "assetName": "Charging Stations – Walkthrough",
+    "assetId": "urn:artifact:charging-stations-–-walkthrough",
+    "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"
   },
   {
-    "createdAt": 1675346958929,
-    "updatedAt": 1675347017414,
-    "id": "8a31794f-d6be-449a-a037-eed8c63424df",
-    "type": "CONSUMER",
-    "state": "ERROR",
-    "stateTimestamp": 1675347017414,
-    "errorDetail": "TransferProcessManager: attempt #8 failed to send transfer. Retry limit exceeded, TransferProcess 8a31794f-d6be-449a-a037-eed8c63424df moves to ERROR state. Cause: org.eclipse.edc.spi.EdcException: Received class de.fraunhofer.iais.eis.RejectionMessageImpl but expected [class de.fraunhofer.iais.eis.RequestInProcessMessageImpl].",
-    "dataRequest": {
-      "id": "ba2dca23-ed46-496e-b121-1556958a7ec6",
-      "assetId": "urn:artifact:pallene-asset",
-      "contractId": "pallene-asset-def:80de309c-0f0a-4eaf-a169-727c0ca6575b",
-      "connectorId": "consumer"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "transferProcessId": "81cdf4cf-8427-480f-9662-8a29d66ddd3b",
+    "createdDate": "2022-03-25T11:18:59.659Z",
+    "lastUpdatedDate": "2022-11-20T11:18:59.659Z",
+    "state": "COMPLETED",
+    "contractAgreementId": "domain-search-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
+    "direction": "incoming",
+    "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
+    "assetName": "Domain Search",
+    "assetId": "urn:artifact:domain-search",
+    "errorMessage": null
   },
   {
-    "createdAt": 1675347001981,
-    "updatedAt": 1675347005464,
-    "id": "d25328ce-bbf4-4623-991b-63b2b529f259",
-    "type": "PROVIDER",
+    "transferProcessId": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
+    "createdDate": "2023-01-29T11:18:59.659Z",
+    "lastUpdatedDate": "2023-02-29T11:18:59.659Z",
     "state": "IN_PROGRESS",
-    "stateTimestamp": 1675347005464,
-    "errorDetail": null,
-    "dataRequest": {
-      "id": "7cf62113-67e8-4e17-935c-14ba0e2592d6",
-      "assetId": "urn:artifact:pallene-asset",
-      "contractId": "pallene-asset-def:80de309c-0f0a-4eaf-a169-727c0ca6575b",
-      "connectorId": "urn:connector:edc"
-    },
-    "dataDestination": {
-      "properties": {
-        "baseUrl": "https://webhook.site/ab9ba683-77d3-4d66-9c79-03b9724927eb",
-        "type": "HttpData"
-      }
-    }
+    "contractAgreementId": "bitcoin-data-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "direction": "outgoing",
+    "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
+    "assetName": "Bitcoin Data",
+    "assetId": "urn:artifact:bitcoin-data",
+    "errorMessage": null
   }
 ]
diff --git a/fake-backend/serve.js b/fake-backend/serve.js
index c774409c5..94d8a3262 100644
--- a/fake-backend/serve.js
+++ b/fake-backend/serve.js
@@ -73,6 +73,16 @@ app.get('/api/v1/data/last-commit-info', (req, res) => {
   res.json(lastCommitInfo);
 });
 
+const transferHistoryAssetDetails = json(
+  'json/transferHistoryAssetDetails.json',
+);
+app.get(
+  '/api/v1/data/transfer-history-page/transfer-processes/urn:artifact:db-rail-network-2023-jan/asset',
+  (req, res) => {
+    res.json(transferHistoryAssetDetails);
+  },
+);
+
 const catalog1 = json('json/catalog1.json');
 const catalog2 = json('json/catalog2.json');
 app.get('/api/v1/data/catalog', (req, res) => {
diff --git a/src/app/component-library/ui-elements/ago/formatDateAgo.ts b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
index cc9de19f5..c9332e898 100644
--- a/src/app/component-library/ui-elements/ago/formatDateAgo.ts
+++ b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
@@ -4,10 +4,12 @@ import {formatDistanceToNow} from 'date-fns';
  * Formats date as "{n} {timeUnit} ago" or "in {n} {timeUnit}s".
  * @param date date
  */
-export function formatDateAgo(date?: Date | null): string {
+export function formatDateAgo(date?: Date | string | null): string {
   if (!date) {
     return '';
   }
-
+  if (typeof date === 'string') {
+    date = new Date(date);
+  }
   return formatDistanceToNow(date, {addSuffix: true});
 }
diff --git a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
index 250d7e3d6..9c807865a 100644
--- a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
+++ b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
@@ -13,34 +13,22 @@
  */
 
 /* tslint:disable:no-unused-variable member-ordering */
-import {
-  HttpClient,
-  HttpContext,
-  HttpEvent,
-  HttpHeaders,
-  HttpParameterCodec,
-  HttpParams,
-  HttpResponse,
-} from '@angular/common/http';
-import {Inject, Injectable, Optional} from '@angular/core';
-import {Observable} from 'rxjs';
-import {Configuration} from '../configuration';
-import {CustomHttpParameterCodec} from '../encoder';
+import { HttpClient, HttpContext, HttpEvent, HttpHeaders, HttpParameterCodec, HttpParams, HttpResponse } from '@angular/common/http';
+import { Inject, Injectable, Optional } from '@angular/core';
+import { Observable } from 'rxjs';
 // @ts-ignore
-import {TransferId} from '../model/transferId';
+import { TransferProcessDto } from "../../../../core/services/models/transfer-history-entry";
+import { Configuration } from '../configuration';
+import { CustomHttpParameterCodec } from '../encoder';
 // @ts-ignore
-import {TransferProcessDto} from '../model/transferProcessDto';
+import { TransferId } from '../model/transferId';
 // @ts-ignore
-import {TransferRequestDto} from '../model/transferRequestDto';
+import { TransferRequestDto } from '../model/transferRequestDto';
 // @ts-ignore
-import {TransferState} from '../model/transferState';
+import { TransferState } from '../model/transferState';
 // @ts-ignore
-import {
-  API_KEY,
-  BASE_PATH,
-  COLLECTION_FORMATS,
-  CONNECTOR_DATAMANAGEMENT_API,
-} from '../variables';
+import { API_KEY, BASE_PATH, COLLECTION_FORMATS, CONNECTOR_DATAMANAGEMENT_API } from '../variables';
+
 
 @Injectable({
   providedIn: 'root',
@@ -132,25 +120,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any>;
   public cancelTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<any>>;
   public cancelTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<any>>;
   public cancelTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -220,25 +208,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -316,7 +304,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<Array<TransferProcessDto>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -326,7 +314,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -336,7 +324,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -346,7 +334,7 @@ export class TransferProcessService {
     sortField?: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     let localVarQueryParameters = new HttpParams({encoder: this.encoder});
     if (offset !== undefined && offset !== null) {
@@ -445,25 +433,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<TransferProcessDto>;
   public getTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -532,25 +520,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<TransferState>;
   public getTransferProcessState(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -619,25 +607,25 @@ export class TransferProcessService {
     transferRequestDto?: TransferRequestDto,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<TransferId>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpResponse<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<HttpEvent<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
+    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
   ): Observable<any> {
     let localVarHeaders = this.defaultHeaders;
 
diff --git a/src/app/core/services/models/transfer-history-entry.ts b/src/app/core/services/models/transfer-history-entry.ts
new file mode 100644
index 000000000..5f9e7560d
--- /dev/null
+++ b/src/app/core/services/models/transfer-history-entry.ts
@@ -0,0 +1,12 @@
+export interface TransferProcessDto {
+  id: string;
+  createdDate: Date;
+  lastUpdatedDate: Date;
+  state: string;
+  contractAgreementId: string;
+  direction: string;
+  counterPartyConnectorEndpoint: string;
+  assetName: string;
+  assetId: string;
+  errorMessage?: string;
+}
diff --git a/src/app/core/services/transfer-process-asset-details.service.ts b/src/app/core/services/transfer-process-asset-details.service.ts
new file mode 100644
index 000000000..63c71b5cb
--- /dev/null
+++ b/src/app/core/services/transfer-process-asset-details.service.ts
@@ -0,0 +1,22 @@
+import {HttpClient} from '@angular/common/http';
+import {Inject, Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {APP_CONFIG, AppConfig} from '../config/app-config';
+import {AssetDto} from './models/asset-dto';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TransferProcessAssetDetailsService {
+  constructor(
+    private http: HttpClient,
+    @Inject(APP_CONFIG) public config: AppConfig,
+  ) {}
+
+  getTransferProcessAssetDetails(
+    transferProcessId: string,
+  ): Observable<AssetDto> {
+    const url = `${this.config.managementApiUrl}/transfer-history-page/transfer-processes/${transferProcessId}/asset`;
+    return this.http.get<AssetDto>(url);
+  }
+}
diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
index d5d0a360f..eb32d715b 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
@@ -8,17 +8,19 @@ import {
   ContractAgreementService,
   ContractDefinitionService,
   PolicyService,
-  TransferProcessDto,
   TransferProcessService,
 } from '../../../../core/services/api/legacy-managent-api-client';
-import {ConnectorInfoPropertyGridGroupBuilder} from '../../../../core/services/connector-info-property-grid-group-builder';
+import {
+  ConnectorInfoPropertyGridGroupBuilder
+} from '../../../../core/services/connector-info-property-grid-group-builder';
 import {LastCommitInfoService} from '../../../../core/services/last-commit-info.service';
 import {Fetched} from '../../../../core/services/models/fetched';
+import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
 import {TransferProcessStates} from '../../../../core/services/models/transfer-process-states';
-import {TransferProcessUtils} from '../../../../core/services/transfer-process-utils';
 import {DonutChartData} from '../dashboard-donut-chart/donut-chart-data';
 import {DashboardPageData, defaultDashboardData} from './dashboard-page-data';
 
+
 @Injectable({providedIn: 'root'})
 export class DashboardPageDataService {
   constructor(
@@ -29,10 +31,10 @@ export class DashboardPageDataService {
     private catalogApiUrlService: CatalogApiUrlService,
     private transferProcessService: TransferProcessService,
     private assetService: AssetService,
-    private transferProcessUtils: TransferProcessUtils,
     private lastCommitInfoService: LastCommitInfoService,
     private connectorInfoPropertyGridGroupBuilder: ConnectorInfoPropertyGridGroupBuilder,
-  ) {}
+  ) {
+  }
 
   /**
    * Fetch {@link DashboardPageData}.
@@ -141,8 +143,8 @@ export class DashboardPageDataService {
   ): DonutChartData {
     const filteredTransfers =
       direction === 'incoming'
-        ? transfers.filter((it) => this.transferProcessUtils.isIncoming(it))
-        : transfers.filter((it) => this.transferProcessUtils.isOutgoing(it));
+        ? transfers.filter((it) => it.direction === "incoming")
+        : transfers.filter((it) => it.direction === "outgoing");
 
     // Use the keys of the TransferProcessesStates Enum as order
     const order = Object.keys(TransferProcessStates);
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
index 94c9def77..20ef1e147 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
@@ -9,6 +9,7 @@ import {RouterModule} from '@angular/router';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
 import {UiElementsModule} from '../../../component-library/ui-elements/ui-elements.module';
 import {TransferHistoryPageComponent} from './transfer-history-page/transfer-history-page.component';
+import {CatalogModule} from "../../../component-library/catalog/catalog.module";
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import {TransferHistoryPageComponent} from './transfer-history-page/transfer-his
     MatIconModule,
 
     // EDC UI Modules
+    CatalogModule,
     PipesAndDirectivesModule,
     UiElementsModule,
   ],
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index ca8f7cf08..7084ce54c 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -36,15 +36,29 @@
       class="transfer-history-table"
       mat-table
       [dataSource]="transferProcessesList.data.transferProcesses">
-      <ng-container matColumnDef="id">
-        <th *matHeaderCellDef mat-header-cell scope="col">ID</th>
-        <td *matCellDef="let item" mat-cell>{{ item.id }}</td>
+      <ng-container matColumnDef="direction">
+        <th *matHeaderCellDef mat-header-cell scope="col">Direction</th>
+        <td *matCellDef="let item" mat-cell>
+          <mat-icon mat-table-avatar>
+            {{ item.direction === 'outgoing' ? 'upload' : 'download' }}
+          </mat-icon>
+        </td>
       </ng-container>
 
-      <ng-container matColumnDef="creationDate">
-        <th *matHeaderCellDef mat-header-cell scope="col">Created</th>
+      <ng-container matColumnDef="assetId">
+        <th *matHeaderCellDef mat-header-cell scope="col">Asset</th>
         <td *matCellDef="let item" mat-cell>
-          {{ asDate(item.createdAt) }}
+          <div *ngIf="item.direction === 'outgoing'">
+            <a
+              class="link"
+              href="javascript:void(0)"
+              (click)="onAssetDetailsClick(item.assetId)">
+              {{ item.assetName ?? item.assetId }}
+            </a>
+          </div>
+          <div *ngIf="item.direction === 'incoming'">
+            {{ item.assetName ?? item.assetId }}
+          </div>
         </td>
       </ng-container>
 
@@ -52,32 +66,19 @@
         <th *matHeaderCellDef mat-header-cell scope="col">State</th>
         <td *matCellDef="let item" mat-cell>{{ item.state }}</td>
       </ng-container>
-
       <ng-container matColumnDef="lastUpdated">
         <th *matHeaderCellDef mat-header-cell scope="col">Last updated</th>
         <td *matCellDef="let item" mat-cell>
-          {{ asDate(item.stateTimestamp) }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="connectorId">
-        <th *matHeaderCellDef mat-header-cell scope="col">Connector ID</th>
-        <td *matCellDef="let item" mat-cell>
-          {{ item.dataRequest.connectorId }}
+          <ago [date]="item.lastUpdatedDate"></ago>
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="assetId">
-        <th *matHeaderCellDef mat-header-cell scope="col">Asset ID</th>
+      <ng-container matColumnDef="counterPartyConnectorEndpoint">
+        <th *matHeaderCellDef mat-header-cell scope="col">
+          Counter-party Connector Endpoint
+        </th>
         <td *matCellDef="let item" mat-cell>
-          {{ item.dataRequest.assetId }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="contractId">
-        <th *matHeaderCellDef mat-header-cell scope="col">Contract ID</th>
-        <td *matCellDef="let item" mat-cell>
-          {{ item.dataRequest.contractId }}
+          {{ item.counterPartyConnectorEndpoint }}
         </td>
       </ng-container>
 
@@ -92,7 +93,6 @@
           </a>
         </td>
       </ng-container>
-
       <tr
         *matHeaderRowDef="columns"
         class="transfer-history-table-header"
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 29248c0e9..6044531f9 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -1,17 +1,27 @@
 import {Component, OnInit} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
+import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {
+  AssetDetailDialogDataService
+} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
+import {
+  AssetDetailDialogComponent
+} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
 import {
   ConfirmDialogModel,
   ConfirmationDialogComponent,
 } from '../../../../component-library/confirmation-dialog/confirmation-dialog/confirmation-dialog.component';
 import {JsonDialogComponent} from '../../../../component-library/json-dialog/json-dialog/json-dialog.component';
 import {JsonDialogData} from '../../../../component-library/json-dialog/json-dialog/json-dialog.data';
-import {
-  TransferProcessDto,
-  TransferProcessService,
-} from '../../../../core/services/api/legacy-managent-api-client';
+import {TransferProcessService} from '../../../../core/services/api/legacy-managent-api-client';
+import {AssetPropertyMapper} from '../../../../core/services/asset-property-mapper';
+import {Asset} from '../../../../core/services/models/asset';
 import {Fetched} from '../../../../core/services/models/fetched';
+import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
+import {NotificationService} from '../../../../core/services/notification.service';
+import {TransferProcessAssetDetailsService} from '../../../../core/services/transfer-process-asset-details.service';
+
 
 @Component({
   selector: 'transfer-history-page',
@@ -20,13 +30,11 @@ import {Fetched} from '../../../../core/services/models/fetched';
 })
 export class TransferHistoryPageComponent implements OnInit {
   columns: string[] = [
-    'id',
-    'creationDate',
+    'direction',
+    'assetId',
     'state',
     'lastUpdated',
-    'connectorId',
-    'assetId',
-    'contractId',
+    'counterPartyConnectorEndpoint',
     'details',
   ];
   transferProcessesList: Fetched<{
@@ -35,12 +43,17 @@ export class TransferHistoryPageComponent implements OnInit {
 
   constructor(
     private transferProcessService: TransferProcessService,
+    private transferProcessAssetDetailsService: TransferProcessAssetDetailsService,
+    private assetDetailDialogDataService: AssetDetailDialogDataService,
+    private assetPropertyMapper: AssetPropertyMapper,
+    private notificationService: NotificationService,
     private dialog: MatDialog,
-  ) {}
+  ) {
+  }
 
   onTransferHistoryDetailsClick(item: TransferProcessDto) {
     const data: JsonDialogData = {
-      title: item.id,
+      title: item.assetName ?? item.assetId,
       subtitle: 'Transfer History Details',
       icon: 'assignment',
       objectForJson: item,
@@ -48,6 +61,42 @@ export class TransferHistoryPageComponent implements OnInit {
     this.dialog.open(JsonDialogComponent, {data});
   }
 
+  loadingAssetDetails(assetId: string): Observable<Fetched<Asset>> {
+    return this.transferProcessAssetDetailsService
+      .getTransferProcessAssetDetails(assetId)
+      .pipe(map((asset) =>
+          this.assetPropertyMapper.buildAssetFromProperties(
+            asset.properties,
+          ),
+        ),
+        Fetched.wrap({
+          failureMessage: 'Failed fetching asset details!',
+        }),
+      );
+  }
+
+  buildAssetDetailsDialog(fetchedAssetData: Fetched<Asset>) {
+    fetchedAssetData.match({
+      ifOk: assetData => {
+        this.dialog.open(AssetDetailDialogComponent, {
+          data: this.assetDetailDialogDataService.assetDetails(assetData, false),
+          maxHeight: '90vh',
+        });
+      }, ifError: error => {
+        console.log(error)
+        this.notificationService.showError(error.failureMessage);
+      },
+      ifLoading: () => {
+      }
+    });
+  }
+
+  onAssetDetailsClick(assetId: string) {
+    this.loadingAssetDetails(assetId).subscribe((fetchedAssetData) => {
+      this.buildAssetDetailsDialog(fetchedAssetData)
+    })
+  }
+
   ngOnInit(): void {
     this.loadTransferProcesses();
   }
@@ -79,9 +128,9 @@ export class TransferHistoryPageComponent implements OnInit {
       .getAllTransferProcesses(0, 10_000_000)
       .pipe(
         map((transferProcesses) => ({
-          transferProcesses: transferProcesses.sort(function (a, b) {
+          transferProcesses: [...transferProcesses].sort(function (a, b) {
             return (
-              b.createdTimestamp?.valueOf()! - a.createdTimestamp?.valueOf()!
+              new Date(b.lastUpdatedDate)?.valueOf()! - new Date(a.lastUpdatedDate)?.valueOf()!
             );
           }),
         })),
@@ -94,8 +143,4 @@ export class TransferHistoryPageComponent implements OnInit {
           (this.transferProcessesList = transferProcessesList),
       );
   }
-
-  asDate(epochMillis?: number) {
-    return epochMillis ? new Date(epochMillis).toLocaleDateString() : '';
-  }
 }
diff --git a/src/theme.scss b/src/theme.scss
index 7c00a9bad..8fa616c73 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -20,6 +20,7 @@ $custom-typography: mat.define-typography-config(
     sovityColors.$link-color
   );
 }
+
 .theme-mds {
   @include mat.all-component-themes(mdsColors.$theme);
   @include themeGeneratedVars.theme-vars(
@@ -41,6 +42,14 @@ mat-icon[mat-card-avatar] {
   line-height: 40px;
 }
 
+// Fix Icon sizes used in table avatars
+mat-icon[mat-table-avatar] {
+  font-size: 30px;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+
 // Fix mat-chips exploding out and/or having multiline exploding strings
 mat-chip {
   max-width: 100%;

From 5e7b91a106dd1da9243df2ecdc1bb1498f8b4f12 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Wed, 12 Jul 2023 14:09:07 +0200
Subject: [PATCH 05/17] chore: run format and cleaned test data

---
 .../json/transferHistoryAssetDetails.json     | 22 ++---
 fake-backend/json/transferProcess.json        | 24 +++---
 fake-backend/serve.js                         |  2 +-
 .../api/transferProcess.service.ts            | 82 +++++++++++--------
 .../contract-agreement-page.service.ts        |  1 -
 .../dashboard-page-data.service.ts            | 12 +--
 .../transfer-history-page.module.ts           |  2 +-
 .../transfer-history-page.component.html      |  2 +-
 .../transfer-history-page.component.ts        | 45 +++++-----
 9 files changed, 98 insertions(+), 94 deletions(-)

diff --git a/fake-backend/json/transferHistoryAssetDetails.json b/fake-backend/json/transferHistoryAssetDetails.json
index 921bc8434..1ee0d5755 100644
--- a/fake-backend/json/transferHistoryAssetDetails.json
+++ b/fake-backend/json/transferHistoryAssetDetails.json
@@ -1,21 +1,21 @@
 {
   "properties": {
-    "asset:prop:id": "urn:artifact:db-rail-network-2023-jan",
-    "asset:prop:name": "Rail Network DB 2023 January",
+    "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.rail-mgmt.bahn.de/api/v1/ids/data",
-    "asset:prop:originatorOrganization": "Deutsche Bahn AG",
-    "asset:prop:keywords": "db, bahn, rail, Rail-Designer",
+    "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": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.",
+    "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": "Infrastructure and Logistics",
-    "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes",
-    "http://w3id.org/mds#dataModel": "my-data-model-001",
-    "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method",
-    "http://w3id.org/mds#transportMode": "Rail"
+    "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"
   }
 }
diff --git a/fake-backend/json/transferProcess.json b/fake-backend/json/transferProcess.json
index a6cebd57f..3a23605e5 100644
--- a/fake-backend/json/transferProcess.json
+++ b/fake-backend/json/transferProcess.json
@@ -4,11 +4,11 @@
     "createdDate": "2022-01-20T11:18:59.659Z",
     "lastUpdatedDate": "2022-06-25T11:18:59.659Z",
     "state": "COMPLETED",
-    "contractAgreementId": "db-rail-network-2023-jan-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "contractAgreementId": "test-asset-1-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
     "direction": "outgoing",
     "counterPartyConnectorEndpoint": "https://sovity-demo4-mds/api/v1/ids/data",
-    "assetName": "Rail Network DB 2023 January",
-    "assetId": "urn:artifact:db-rail-network-2023-jan",
+    "assetName": "Test Asset 1",
+    "assetId": "urn:artifact:test-asset-1",
     "errorMessage": null
   },
   {
@@ -16,11 +16,11 @@
     "createdDate": "2022-03-20T11:18:59.659Z",
     "lastUpdatedDate": "2022-03-25T11:18:59.659Z",
     "state": "ERROR",
-    "contractAgreementId": "charging-stations-–-walkthrough-cd:5816a60b-86c1-489a-b26a-ed129947f973",
+    "contractAgreementId": "test-asset-2-cd:5816a60b-86c1-489a-b26a-ed129947f973",
     "direction": "outgoing",
     "counterPartyConnectorEndpoint": "http://edc2:11003/api/v1/ids/data",
-    "assetName": "Charging Stations – Walkthrough",
-    "assetId": "urn:artifact:charging-stations-–-walkthrough",
+    "assetName": "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"
   },
   {
@@ -28,11 +28,11 @@
     "createdDate": "2022-03-25T11:18:59.659Z",
     "lastUpdatedDate": "2022-11-20T11:18:59.659Z",
     "state": "COMPLETED",
-    "contractAgreementId": "domain-search-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
+    "contractAgreementId": "test-asset-3-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
     "direction": "incoming",
     "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
-    "assetName": "Domain Search",
-    "assetId": "urn:artifact:domain-search",
+    "assetName": "Test Asset 3",
+    "assetId": "urn:artifact:test-asset-3",
     "errorMessage": null
   },
   {
@@ -40,11 +40,11 @@
     "createdDate": "2023-01-29T11:18:59.659Z",
     "lastUpdatedDate": "2023-02-29T11:18:59.659Z",
     "state": "IN_PROGRESS",
-    "contractAgreementId": "bitcoin-data-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
+    "contractAgreementId": "test-asset-4-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
     "direction": "outgoing",
     "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
-    "assetName": "Bitcoin Data",
-    "assetId": "urn:artifact:bitcoin-data",
+    "assetName": "Test Asset 4",
+    "assetId": "urn:artifact:test-asset-4",
     "errorMessage": null
   }
 ]
diff --git a/fake-backend/serve.js b/fake-backend/serve.js
index 94d8a3262..eaa07ed46 100644
--- a/fake-backend/serve.js
+++ b/fake-backend/serve.js
@@ -77,7 +77,7 @@ const transferHistoryAssetDetails = json(
   'json/transferHistoryAssetDetails.json',
 );
 app.get(
-  '/api/v1/data/transfer-history-page/transfer-processes/urn:artifact:db-rail-network-2023-jan/asset',
+  '/api/v1/data/transfer-history-page/transfer-processes/339b2a27-3b66-49f5-8b43-6a400d5914b5/asset',
   (req, res) => {
     res.json(transferHistoryAssetDetails);
   },
diff --git a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
index 9c807865a..3a6bc83f4 100644
--- a/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
+++ b/src/app/core/services/api/legacy-managent-api-client/api/transferProcess.service.ts
@@ -13,22 +13,34 @@
  */
 
 /* tslint:disable:no-unused-variable member-ordering */
-import { HttpClient, HttpContext, HttpEvent, HttpHeaders, HttpParameterCodec, HttpParams, HttpResponse } from '@angular/common/http';
-import { Inject, Injectable, Optional } from '@angular/core';
-import { Observable } from 'rxjs';
+import {
+  HttpClient,
+  HttpContext,
+  HttpEvent,
+  HttpHeaders,
+  HttpParameterCodec,
+  HttpParams,
+  HttpResponse,
+} from '@angular/common/http';
+import {Inject, Injectable, Optional} from '@angular/core';
+import {Observable} from 'rxjs';
 // @ts-ignore
-import { TransferProcessDto } from "../../../../core/services/models/transfer-history-entry";
-import { Configuration } from '../configuration';
-import { CustomHttpParameterCodec } from '../encoder';
+import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
+import {Configuration} from '../configuration';
+import {CustomHttpParameterCodec} from '../encoder';
 // @ts-ignore
-import { TransferId } from '../model/transferId';
+import {TransferId} from '../model/transferId';
 // @ts-ignore
-import { TransferRequestDto } from '../model/transferRequestDto';
+import {TransferRequestDto} from '../model/transferRequestDto';
 // @ts-ignore
-import { TransferState } from '../model/transferState';
+import {TransferState} from '../model/transferState';
 // @ts-ignore
-import { API_KEY, BASE_PATH, COLLECTION_FORMATS, CONNECTOR_DATAMANAGEMENT_API } from '../variables';
-
+import {
+  API_KEY,
+  BASE_PATH,
+  COLLECTION_FORMATS,
+  CONNECTOR_DATAMANAGEMENT_API,
+} from '../variables';
 
 @Injectable({
   providedIn: 'root',
@@ -120,25 +132,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any>;
   public cancelTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<any>>;
   public cancelTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<any>>;
   public cancelTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -208,25 +220,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<any>>;
   public deprovisionTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -304,7 +316,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<Array<TransferProcessDto>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -314,7 +326,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -324,7 +336,7 @@ export class TransferProcessService {
     sortField?: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<Array<TransferProcessDto>>>;
   public getAllTransferProcesses(
     offset?: number,
@@ -334,7 +346,7 @@ export class TransferProcessService {
     sortField?: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     let localVarQueryParameters = new HttpParams({encoder: this.encoder});
     if (offset !== undefined && offset !== null) {
@@ -433,25 +445,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<TransferProcessDto>;
   public getTransferProcess(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<TransferProcessDto>>;
   public getTransferProcess(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -520,25 +532,25 @@ export class TransferProcessService {
     id: string,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<TransferState>;
   public getTransferProcessState(
     id: string,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<TransferState>>;
   public getTransferProcessState(
     id: string,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     if (id === null || id === undefined) {
       throw new Error(
@@ -607,25 +619,25 @@ export class TransferProcessService {
     transferRequestDto?: TransferRequestDto,
     observe?: 'body',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<TransferId>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'response',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpResponse<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe?: 'events',
     reportProgress?: boolean,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<HttpEvent<TransferId>>;
   public initiateTransfer(
     transferRequestDto?: TransferRequestDto,
     observe: any = 'body',
     reportProgress: boolean = false,
-    options?: { httpHeaderAccept?: 'application/json'; context?: HttpContext },
+    options?: {httpHeaderAccept?: 'application/json'; context?: HttpContext},
   ): Observable<any> {
     let localVarHeaders = this.defaultHeaders;
 
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts
index 2ac9782bc..313f34443 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts
@@ -13,7 +13,6 @@ import {ContractAgreementCardMapped} from '../contract-agreement-cards/contract-
 import {ContractAgreementCardMappedService} from '../contract-agreement-cards/contract-agreement-card-mapped.service';
 import {ContractAgreementPageData} from './contract-agreement-page.data';
 
-
 @Injectable({providedIn: 'root'})
 export class ContractAgreementPageService {
   constructor(
diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
index eb32d715b..5941f5466 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
@@ -10,9 +10,7 @@ import {
   PolicyService,
   TransferProcessService,
 } from '../../../../core/services/api/legacy-managent-api-client';
-import {
-  ConnectorInfoPropertyGridGroupBuilder
-} from '../../../../core/services/connector-info-property-grid-group-builder';
+import {ConnectorInfoPropertyGridGroupBuilder} from '../../../../core/services/connector-info-property-grid-group-builder';
 import {LastCommitInfoService} from '../../../../core/services/last-commit-info.service';
 import {Fetched} from '../../../../core/services/models/fetched';
 import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
@@ -20,7 +18,6 @@ import {TransferProcessStates} from '../../../../core/services/models/transfer-p
 import {DonutChartData} from '../dashboard-donut-chart/donut-chart-data';
 import {DashboardPageData, defaultDashboardData} from './dashboard-page-data';
 
-
 @Injectable({providedIn: 'root'})
 export class DashboardPageDataService {
   constructor(
@@ -33,8 +30,7 @@ export class DashboardPageDataService {
     private assetService: AssetService,
     private lastCommitInfoService: LastCommitInfoService,
     private connectorInfoPropertyGridGroupBuilder: ConnectorInfoPropertyGridGroupBuilder,
-  ) {
-  }
+  ) {}
 
   /**
    * Fetch {@link DashboardPageData}.
@@ -143,8 +139,8 @@ export class DashboardPageDataService {
   ): DonutChartData {
     const filteredTransfers =
       direction === 'incoming'
-        ? transfers.filter((it) => it.direction === "incoming")
-        : transfers.filter((it) => it.direction === "outgoing");
+        ? transfers.filter((it) => it.direction === 'incoming')
+        : transfers.filter((it) => it.direction === 'outgoing');
 
     // Use the keys of the TransferProcessesStates Enum as order
     const order = Object.keys(TransferProcessStates);
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
index 20ef1e147..ddd278cc3 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
@@ -6,10 +6,10 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatTableModule} from '@angular/material/table';
 import {RouterModule} from '@angular/router';
+import {CatalogModule} from '../../../component-library/catalog/catalog.module';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
 import {UiElementsModule} from '../../../component-library/ui-elements/ui-elements.module';
 import {TransferHistoryPageComponent} from './transfer-history-page/transfer-history-page.component';
-import {CatalogModule} from "../../../component-library/catalog/catalog.module";
 
 @NgModule({
   imports: [
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index 7084ce54c..30c9f84d0 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -52,7 +52,7 @@
             <a
               class="link"
               href="javascript:void(0)"
-              (click)="onAssetDetailsClick(item.assetId)">
+              (click)="onAssetDetailsClick(item.transferProcessId)">
               {{ item.assetName ?? item.assetId }}
             </a>
           </div>
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 6044531f9..3d22b5a47 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -2,12 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
-import {
-  AssetDetailDialogDataService
-} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {
-  AssetDetailDialogComponent
-} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
+import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
 import {
   ConfirmDialogModel,
   ConfirmationDialogComponent,
@@ -22,7 +18,6 @@ import {TransferProcessDto} from '../../../../core/services/models/transfer-hist
 import {NotificationService} from '../../../../core/services/notification.service';
 import {TransferProcessAssetDetailsService} from '../../../../core/services/transfer-process-asset-details.service';
 
-
 @Component({
   selector: 'transfer-history-page',
   templateUrl: './transfer-history-page.component.html',
@@ -48,8 +43,7 @@ export class TransferHistoryPageComponent implements OnInit {
     private assetPropertyMapper: AssetPropertyMapper,
     private notificationService: NotificationService,
     private dialog: MatDialog,
-  ) {
-  }
+  ) {}
 
   onTransferHistoryDetailsClick(item: TransferProcessDto) {
     const data: JsonDialogData = {
@@ -64,10 +58,9 @@ export class TransferHistoryPageComponent implements OnInit {
   loadingAssetDetails(assetId: string): Observable<Fetched<Asset>> {
     return this.transferProcessAssetDetailsService
       .getTransferProcessAssetDetails(assetId)
-      .pipe(map((asset) =>
-          this.assetPropertyMapper.buildAssetFromProperties(
-            asset.properties,
-          ),
+      .pipe(
+        map((asset) =>
+          this.assetPropertyMapper.buildAssetFromProperties(asset.properties),
         ),
         Fetched.wrap({
           failureMessage: 'Failed fetching asset details!',
@@ -77,24 +70,27 @@ export class TransferHistoryPageComponent implements OnInit {
 
   buildAssetDetailsDialog(fetchedAssetData: Fetched<Asset>) {
     fetchedAssetData.match({
-      ifOk: assetData => {
+      ifOk: (assetData) => {
         this.dialog.open(AssetDetailDialogComponent, {
-          data: this.assetDetailDialogDataService.assetDetails(assetData, false),
+          data: this.assetDetailDialogDataService.assetDetails(
+            assetData,
+            false,
+          ),
           maxHeight: '90vh',
         });
-      }, ifError: error => {
-        console.log(error)
+      },
+      ifError: (error) => {
+        console.log(error);
         this.notificationService.showError(error.failureMessage);
       },
-      ifLoading: () => {
-      }
+      ifLoading: () => {},
     });
   }
 
-  onAssetDetailsClick(assetId: string) {
-    this.loadingAssetDetails(assetId).subscribe((fetchedAssetData) => {
-      this.buildAssetDetailsDialog(fetchedAssetData)
-    })
+  onAssetDetailsClick(transferProcessId: string) {
+    this.loadingAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
+      this.buildAssetDetailsDialog(fetchedAssetData);
+    });
   }
 
   ngOnInit(): void {
@@ -130,7 +126,8 @@ export class TransferHistoryPageComponent implements OnInit {
         map((transferProcesses) => ({
           transferProcesses: [...transferProcesses].sort(function (a, b) {
             return (
-              new Date(b.lastUpdatedDate)?.valueOf()! - new Date(a.lastUpdatedDate)?.valueOf()!
+              new Date(b.lastUpdatedDate)?.valueOf()! -
+              new Date(a.lastUpdatedDate)?.valueOf()!
             );
           }),
         })),

From 50cff68da0c7f0d00f8cb9d6e1d4c062e90570ca Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Wed, 19 Jul 2023 10:07:30 +0200
Subject: [PATCH 06/17] chore: minor type additions and removing blank lines

---
 src/app/component-library/ui-elements/ago/date-input.ts       | 2 ++
 src/app/component-library/ui-elements/ago/formatDateAgo.ts    | 3 ++-
 .../transfer-history-page.component.html                      | 4 ----
 .../transfer-history-page/transfer-history-page.component.ts  | 4 ++--
 4 files changed, 6 insertions(+), 7 deletions(-)
 create mode 100644 src/app/component-library/ui-elements/ago/date-input.ts

diff --git a/src/app/component-library/ui-elements/ago/date-input.ts b/src/app/component-library/ui-elements/ago/date-input.ts
new file mode 100644
index 000000000..02aef95cd
--- /dev/null
+++ b/src/app/component-library/ui-elements/ago/date-input.ts
@@ -0,0 +1,2 @@
+export type DateInput = Date | string | null
+
diff --git a/src/app/component-library/ui-elements/ago/formatDateAgo.ts b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
index c9332e898..c26cc9a74 100644
--- a/src/app/component-library/ui-elements/ago/formatDateAgo.ts
+++ b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
@@ -1,10 +1,11 @@
 import {formatDistanceToNow} from 'date-fns';
+import {DateInput} from "./date-input";
 
 /**
  * Formats date as "{n} {timeUnit} ago" or "in {n} {timeUnit}s".
  * @param date date
  */
-export function formatDateAgo(date?: Date | string | null): string {
+export function formatDateAgo(date?: DateInput): string {
   if (!date) {
     return '';
   }
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index 30c9f84d0..c5d7c4f32 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -44,7 +44,6 @@
           </mat-icon>
         </td>
       </ng-container>
-
       <ng-container matColumnDef="assetId">
         <th *matHeaderCellDef mat-header-cell scope="col">Asset</th>
         <td *matCellDef="let item" mat-cell>
@@ -61,7 +60,6 @@
           </div>
         </td>
       </ng-container>
-
       <ng-container matColumnDef="state">
         <th *matHeaderCellDef mat-header-cell scope="col">State</th>
         <td *matCellDef="let item" mat-cell>{{ item.state }}</td>
@@ -72,7 +70,6 @@
           <ago [date]="item.lastUpdatedDate"></ago>
         </td>
       </ng-container>
-
       <ng-container matColumnDef="counterPartyConnectorEndpoint">
         <th *matHeaderCellDef mat-header-cell scope="col">
           Counter-party Connector Endpoint
@@ -81,7 +78,6 @@
           {{ item.counterPartyConnectorEndpoint }}
         </td>
       </ng-container>
-
       <ng-container matColumnDef="details">
         <th *matHeaderCellDef mat-header-cell scope="col">Details</th>
         <td *matCellDef="let item" mat-cell>
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 3d22b5a47..cadfce9bd 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -55,7 +55,7 @@ export class TransferHistoryPageComponent implements OnInit {
     this.dialog.open(JsonDialogComponent, {data});
   }
 
-  loadingAssetDetails(assetId: string): Observable<Fetched<Asset>> {
+  loadAssetDetails(assetId: string): Observable<Fetched<Asset>> {
     return this.transferProcessAssetDetailsService
       .getTransferProcessAssetDetails(assetId)
       .pipe(
@@ -88,7 +88,7 @@ export class TransferHistoryPageComponent implements OnInit {
   }
 
   onAssetDetailsClick(transferProcessId: string) {
-    this.loadingAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
+    this.loadAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
       this.buildAssetDetailsDialog(fetchedAssetData);
     });
   }

From 344a48af4a4cd5f2364f09cbe2c5757588a7545d Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Tue, 8 Aug 2023 13:56:52 +0200
Subject: [PATCH 07/17] chore: update in the edc-api.service.ts to consume new
 wrapper endpoints

---
 package-lock.json                            |  8 ++++----
 package.json                                 |  2 +-
 src/app/core/services/api/edc-api.service.ts | 16 ++++++++++++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2de53cb25..5e622a098 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@ng-apimock/core": "^3.11.0",
         "@ngxs/store": "^3.8.1",
         "@sovity.de/broker-server-client": "0.20230712.71619-main-a4860cff",
-        "@sovity.de/edc-client": "0.20230711.54203-main-f9c4b8f7",
+        "@sovity.de/edc-client": "0.20230807.130256-main-c3447970",
         "clean-deep": "^3.4.0",
         "date-fns": "^2.30.0",
         "dotenv": "^16.3.1",
@@ -3598,9 +3598,9 @@
       "integrity": "sha512-305vHJj38Ma9x9YADM3SJh3sdqePeLcrUB1hHlYsuPdx7wYe9vwgb503KYStJ+5iN/ojP2xu8k6Unt+y+Bu5iQ=="
     },
     "node_modules/@sovity.de/edc-client": {
-      "version": "0.20230711.54203-main-f9c4b8f7",
-      "resolved": "https://registry.npmjs.org/@sovity.de/edc-client/-/edc-client-0.20230711.54203-main-f9c4b8f7.tgz",
-      "integrity": "sha512-Ant1q0cYZ4d30b9GoJfDS+B2VRlrfp1jsUfl417nmLiZxibyQw6wQoEsmaJNiFqX4YsDpe0xsZ67uHNApw+mYg=="
+      "version": "0.20230807.130256-main-c3447970",
+      "resolved": "https://registry.npmjs.org/@sovity.de/edc-client/-/edc-client-0.20230807.130256-main-c3447970.tgz",
+      "integrity": "sha512-Jxr04o4WggVmfgYx87oy4QieDRebkTPoxd27soXzGtrK8IdVm994aqMJZzUjs99bBi1eqXF2nIUQ3nZHoZUObQ=="
     },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index cfdef4fc8..aa13b8600 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@ng-apimock/core": "^3.11.0",
     "@ngxs/store": "^3.8.1",
     "@sovity.de/broker-server-client": "0.20230712.71619-main-a4860cff",
-    "@sovity.de/edc-client": "0.20230711.54203-main-f9c4b8f7",
+    "@sovity.de/edc-client": "0.20230807.130256-main-c3447970",
     "clean-deep": "^3.4.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",
diff --git a/src/app/core/services/api/edc-api.service.ts b/src/app/core/services/api/edc-api.service.ts
index 3d9ae9b1f..06d85459f 100644
--- a/src/app/core/services/api/edc-api.service.ts
+++ b/src/app/core/services/api/edc-api.service.ts
@@ -1,11 +1,13 @@
 import {Inject, Injectable} from '@angular/core';
 import {Observable, from} from 'rxjs';
 import {
+  AssetDto,
   ConnectorLimits,
   ContractAgreementPage,
   ContractAgreementTransferRequest,
   EdcClient,
-  IdResponseDto,
+  IdResponse,
+  TransferHistoryPage,
   buildEdcClient,
 } from '@sovity.de/edc-client';
 import {APP_CONFIG, AppConfig} from '../../config/app-config';
@@ -27,12 +29,22 @@ export class EdcApiService {
 
   initiateTranfer(
     contractAgreementTransferRequest: ContractAgreementTransferRequest,
-  ): Observable<IdResponseDto> {
+  ): Observable<IdResponse> {
     return from(
       this.edcClient.uiApi.initiateTransfer({contractAgreementTransferRequest}),
     );
   }
 
+  getTransferHistoryPage(): Observable<TransferHistoryPage> {
+    return from(this.edcClient.uiApi.transferHistoryPageEndpoint());
+  }
+
+  getTransferProcessAsset(transferProcessId: string): Observable<AssetDto> {
+    return from(
+      this.edcClient.uiApi.getTransferProcessAsset({transferProcessId}),
+    );
+  }
+
   getEnterpriseEditionConnectorLimits(): Observable<ConnectorLimits> {
     return from(this.edcClient.enterpriseEditionApi.connectorLimits());
   }

From f796b4c6a127aac22f9566fd0366b7d00ae37b41 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Tue, 8 Aug 2023 16:28:13 +0200
Subject: [PATCH 08/17] chore: updated the test data and renamed transfer
 history page objects in the transfer-history-page.component

---
 fake-backend/json/transferHistoryPage.json    | 68 +++++++++++++++++++
 fake-backend/json/transferProcess.json        | 50 --------------
 fake-backend/serve.js                         | 30 ++++----
 .../services/models/transfer-history-entry.ts | 12 ----
 .../transfer-process-asset-details.service.ts | 22 ------
 ...act-agreement-transfer-dialog.component.ts |  2 +-
 .../dashboard-page-data.service.ts            | 28 ++++----
 .../transfer-history-page.component.html      |  8 +--
 .../transfer-history-page.component.ts        | 61 ++++++-----------
 9 files changed, 120 insertions(+), 161 deletions(-)
 create mode 100644 fake-backend/json/transferHistoryPage.json
 delete mode 100644 fake-backend/json/transferProcess.json
 delete mode 100644 src/app/core/services/models/transfer-history-entry.ts
 delete mode 100644 src/app/core/services/transfer-process-asset-details.service.ts

diff --git a/fake-backend/json/transferHistoryPage.json b/fake-backend/json/transferHistoryPage.json
new file mode 100644
index 000000000..5d7e88703
--- /dev/null
+++ b/fake-backend/json/transferHistoryPage.json
@@ -0,0 +1,68 @@
+{
+  "transferEntries": [
+    {
+      "transferProcessId": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
+      "createdDate": "2022-01-20T11:18:59.659Z",
+      "lastUpdatedDate": "2022-06-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": "Test Asset 1",
+      "assetId": "urn:artifact:test-asset-1",
+      "errorMessage": null
+    },
+    {
+      "transferProcessId": "1317d0da-cdc6-42ab-b54b-1f90bcfed508",
+      "createdDate": "2022-03-20T11:18:59.659Z",
+      "lastUpdatedDate": "2022-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": "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": "Test Asset 3",
+      "assetId": "urn:artifact:test-asset-3",
+      "errorMessage": null
+    },
+    {
+      "transferProcessId": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
+      "createdDate": "2023-01-29T11:18:59.659Z",
+      "lastUpdatedDate": "2023-02-29T11: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
+    }
+  ]
+}
diff --git a/fake-backend/json/transferProcess.json b/fake-backend/json/transferProcess.json
deleted file mode 100644
index 3a23605e5..000000000
--- a/fake-backend/json/transferProcess.json
+++ /dev/null
@@ -1,50 +0,0 @@
-[
-  {
-    "transferProcessId": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
-    "createdDate": "2022-01-20T11:18:59.659Z",
-    "lastUpdatedDate": "2022-06-25T11:18:59.659Z",
-    "state": "COMPLETED",
-    "contractAgreementId": "test-asset-1-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
-    "direction": "outgoing",
-    "counterPartyConnectorEndpoint": "https://sovity-demo4-mds/api/v1/ids/data",
-    "assetName": "Test Asset 1",
-    "assetId": "urn:artifact:test-asset-1",
-    "errorMessage": null
-  },
-  {
-    "transferProcessId": "1317d0da-cdc6-42ab-b54b-1f90bcfed508",
-    "createdDate": "2022-03-20T11:18:59.659Z",
-    "lastUpdatedDate": "2022-03-25T11:18:59.659Z",
-    "state": "ERROR",
-    "contractAgreementId": "test-asset-2-cd:5816a60b-86c1-489a-b26a-ed129947f973",
-    "direction": "outgoing",
-    "counterPartyConnectorEndpoint": "http://edc2:11003/api/v1/ids/data",
-    "assetName": "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": "COMPLETED",
-    "contractAgreementId": "test-asset-3-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
-    "direction": "incoming",
-    "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
-    "assetName": "Test Asset 3",
-    "assetId": "urn:artifact:test-asset-3",
-    "errorMessage": null
-  },
-  {
-    "transferProcessId": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
-    "createdDate": "2023-01-29T11:18:59.659Z",
-    "lastUpdatedDate": "2023-02-29T11:18:59.659Z",
-    "state": "IN_PROGRESS",
-    "contractAgreementId": "test-asset-4-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
-    "direction": "outgoing",
-    "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
-    "assetName": "Test Asset 4",
-    "assetId": "urn:artifact:test-asset-4",
-    "errorMessage": null
-  }
-]
diff --git a/fake-backend/serve.js b/fake-backend/serve.js
index eaa07ed46..0eb8a137d 100644
--- a/fake-backend/serve.js
+++ b/fake-backend/serve.js
@@ -58,11 +58,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);
@@ -73,16 +68,6 @@ app.get('/api/v1/data/last-commit-info', (req, res) => {
   res.json(lastCommitInfo);
 });
 
-const transferHistoryAssetDetails = json(
-  'json/transferHistoryAssetDetails.json',
-);
-app.get(
-  '/api/v1/data/transfer-history-page/transfer-processes/339b2a27-3b66-49f5-8b43-6a400d5914b5/asset',
-  (req, res) => {
-    res.json(transferHistoryAssetDetails);
-  },
-);
-
 const catalog1 = json('json/catalog1.json');
 const catalog2 = json('json/catalog2.json');
 app.get('/api/v1/data/catalog', (req, res) => {
@@ -116,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) => {
diff --git a/src/app/core/services/models/transfer-history-entry.ts b/src/app/core/services/models/transfer-history-entry.ts
deleted file mode 100644
index 5f9e7560d..000000000
--- a/src/app/core/services/models/transfer-history-entry.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface TransferProcessDto {
-  id: string;
-  createdDate: Date;
-  lastUpdatedDate: Date;
-  state: string;
-  contractAgreementId: string;
-  direction: string;
-  counterPartyConnectorEndpoint: string;
-  assetName: string;
-  assetId: string;
-  errorMessage?: string;
-}
diff --git a/src/app/core/services/transfer-process-asset-details.service.ts b/src/app/core/services/transfer-process-asset-details.service.ts
deleted file mode 100644
index 63c71b5cb..000000000
--- a/src/app/core/services/transfer-process-asset-details.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {HttpClient} from '@angular/common/http';
-import {Inject, Injectable} from '@angular/core';
-import {Observable} from 'rxjs';
-import {APP_CONFIG, AppConfig} from '../config/app-config';
-import {AssetDto} from './models/asset-dto';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class TransferProcessAssetDetailsService {
-  constructor(
-    private http: HttpClient,
-    @Inject(APP_CONFIG) public config: AppConfig,
-  ) {}
-
-  getTransferProcessAssetDetails(
-    transferProcessId: string,
-  ): Observable<AssetDto> {
-    const url = `${this.config.managementApiUrl}/transfer-history-page/transfer-processes/${transferProcessId}/asset`;
-    return this.http.get<AssetDto>(url);
-  }
-}
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
index d75e770b4..c22f27f7e 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
@@ -146,7 +146,7 @@ export class ContractAgreementTransferDialogComponent implements OnDestroy {
       type: 'PARAMS_ONLY',
       params: {
         contractAgreementId: this.data.contractId,
-        properties: transferRequestProperties,
+        privateProperties: transferRequestProperties,
         dataSinkProperties,
       },
     };
diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
index 5941f5466..0d98301a3 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
@@ -8,25 +8,25 @@ import {
   ContractAgreementService,
   ContractDefinitionService,
   PolicyService,
-  TransferProcessService,
 } from '../../../../core/services/api/legacy-managent-api-client';
 import {ConnectorInfoPropertyGridGroupBuilder} from '../../../../core/services/connector-info-property-grid-group-builder';
 import {LastCommitInfoService} from '../../../../core/services/last-commit-info.service';
 import {Fetched} from '../../../../core/services/models/fetched';
-import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
 import {TransferProcessStates} from '../../../../core/services/models/transfer-process-states';
 import {DonutChartData} from '../dashboard-donut-chart/donut-chart-data';
 import {DashboardPageData, defaultDashboardData} from './dashboard-page-data';
+import {EdcApiService} from "../../../../core/services/api/edc-api.service";
+import {TransferHistoryEntry} from "@sovity.de/edc-client";
 
 @Injectable({providedIn: 'root'})
 export class DashboardPageDataService {
   constructor(
+    private edcApiService: EdcApiService,
     private catalogBrowserService: ContractOfferService,
     private contractDefinitionService: ContractDefinitionService,
     private contractAgreementService: ContractAgreementService,
     private policyService: PolicyService,
     private catalogApiUrlService: CatalogApiUrlService,
-    private transferProcessService: TransferProcessService,
     private assetService: AssetService,
     private lastCommitInfoService: LastCommitInfoService,
     private connectorInfoPropertyGridGroupBuilder: ConnectorInfoPropertyGridGroupBuilder,
@@ -116,35 +116,34 @@ export class DashboardPageDataService {
   }
 
   private transferProcessKpis(): Observable<Partial<DashboardPageData>> {
-    return this.transferProcessService
-      .getAllTransferProcesses(0, 10_000_000)
+    return this.edcApiService.getTransferHistoryPage()
       .pipe(
         Fetched.wrap({
           failureMessage: 'Failed fetching transfer processes.',
         }),
         map((transferData) => ({
           incomingTransfersChart: transferData.map((it) =>
-            this.buildTransferChart(it, 'incoming'),
+            this.buildTransferChart(it.transferEntries, 'CONSUMING'),
           ),
           outgoingTransfersChart: transferData.map((it) =>
-            this.buildTransferChart(it, 'outgoing'),
+            this.buildTransferChart(it.transferEntries, 'PROVIDING'),
           ),
         })),
       );
   }
 
   private buildTransferChart(
-    transfers: TransferProcessDto[],
-    direction: 'incoming' | 'outgoing',
+    transfers: TransferHistoryEntry[],
+    direction: 'CONSUMING' | 'PROVIDING',
   ): DonutChartData {
     const filteredTransfers =
-      direction === 'incoming'
-        ? transfers.filter((it) => it.direction === 'incoming')
-        : transfers.filter((it) => it.direction === 'outgoing');
+      direction === 'CONSUMING'
+        ? transfers.filter((it) => it.direction === 'CONSUMING')
+        : transfers.filter((it) => it.direction === 'PROVIDING');
 
     // Use the keys of the TransferProcessesStates Enum as order
     const order = Object.keys(TransferProcessStates);
-    const states = [...new Set(filteredTransfers.map((it) => it.state))].sort(
+    const states = [...new Set(filteredTransfers.map((it) => it.state.name))].sort(
       (a, b) => order.indexOf(a) - order.indexOf(b),
     );
 
@@ -155,7 +154,7 @@ export class DashboardPageDataService {
     const defaultColor = '#bd7ebe';
 
     const amountsByState = states.map(
-      (state) => filteredTransfers.filter((it) => it.state === state).length,
+      (state) => filteredTransfers.filter((it) => it.state.name === state).length,
     );
 
     return {
@@ -163,7 +162,6 @@ export class DashboardPageDataService {
       totalValue: filteredTransfers.length,
       isEmpty: !filteredTransfers.length,
       emptyMessage: `No ${direction} transfer processes.`,
-
       labels: states,
       datasets: [
         {
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index c5d7c4f32..905118d80 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -40,14 +40,14 @@
         <th *matHeaderCellDef mat-header-cell scope="col">Direction</th>
         <td *matCellDef="let item" mat-cell>
           <mat-icon mat-table-avatar>
-            {{ item.direction === 'outgoing' ? 'upload' : 'download' }}
+            {{ item.direction === 'PROVIDING' ? 'upload' : 'download' }}
           </mat-icon>
         </td>
       </ng-container>
       <ng-container matColumnDef="assetId">
         <th *matHeaderCellDef mat-header-cell scope="col">Asset</th>
         <td *matCellDef="let item" mat-cell>
-          <div *ngIf="item.direction === 'outgoing'">
+          <div *ngIf="item.direction === 'PROVIDING'">
             <a
               class="link"
               href="javascript:void(0)"
@@ -55,14 +55,14 @@
               {{ item.assetName ?? item.assetId }}
             </a>
           </div>
-          <div *ngIf="item.direction === 'incoming'">
+          <div *ngIf="item.direction === 'CONSUMING'">
             {{ item.assetName ?? item.assetId }}
           </div>
         </td>
       </ng-container>
       <ng-container matColumnDef="state">
         <th *matHeaderCellDef mat-header-cell scope="col">State</th>
-        <td *matCellDef="let item" mat-cell>{{ item.state }}</td>
+        <td *matCellDef="let item" mat-cell>{{ item.state.name }}</td>
       </ng-container>
       <ng-container matColumnDef="lastUpdated">
         <th *matHeaderCellDef mat-header-cell scope="col">Last updated</th>
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index cadfce9bd..46aa938c9 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -2,21 +2,21 @@ import {Component, OnInit} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
-import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {TransferHistoryEntry} from '@sovity.de/edc-client';
 import {
-  ConfirmDialogModel,
-  ConfirmationDialogComponent,
-} from '../../../../component-library/confirmation-dialog/confirmation-dialog/confirmation-dialog.component';
+  AssetDetailDialogDataService
+} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
+import {
+  AssetDetailDialogComponent
+} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
 import {JsonDialogComponent} from '../../../../component-library/json-dialog/json-dialog/json-dialog.component';
 import {JsonDialogData} from '../../../../component-library/json-dialog/json-dialog/json-dialog.data';
-import {TransferProcessService} from '../../../../core/services/api/legacy-managent-api-client';
+import {EdcApiService} from '../../../../core/services/api/edc-api.service';
 import {AssetPropertyMapper} from '../../../../core/services/asset-property-mapper';
 import {Asset} from '../../../../core/services/models/asset';
 import {Fetched} from '../../../../core/services/models/fetched';
-import {TransferProcessDto} from '../../../../core/services/models/transfer-history-entry';
 import {NotificationService} from '../../../../core/services/notification.service';
-import {TransferProcessAssetDetailsService} from '../../../../core/services/transfer-process-asset-details.service';
+
 
 @Component({
   selector: 'transfer-history-page',
@@ -33,19 +33,19 @@ export class TransferHistoryPageComponent implements OnInit {
     'details',
   ];
   transferProcessesList: Fetched<{
-    transferProcesses: Array<TransferProcessDto>;
+    transferProcesses: Array<TransferHistoryEntry>;
   }> = Fetched.empty();
 
   constructor(
-    private transferProcessService: TransferProcessService,
-    private transferProcessAssetDetailsService: TransferProcessAssetDetailsService,
+    private edcApiService: EdcApiService,
     private assetDetailDialogDataService: AssetDetailDialogDataService,
     private assetPropertyMapper: AssetPropertyMapper,
     private notificationService: NotificationService,
     private dialog: MatDialog,
-  ) {}
+  ) {
+  }
 
-  onTransferHistoryDetailsClick(item: TransferProcessDto) {
+  onTransferHistoryDetailsClick(item: TransferHistoryEntry) {
     const data: JsonDialogData = {
       title: item.assetName ?? item.assetId,
       subtitle: 'Transfer History Details',
@@ -55,9 +55,8 @@ export class TransferHistoryPageComponent implements OnInit {
     this.dialog.open(JsonDialogComponent, {data});
   }
 
-  loadAssetDetails(assetId: string): Observable<Fetched<Asset>> {
-    return this.transferProcessAssetDetailsService
-      .getTransferProcessAssetDetails(assetId)
+  loadAssetDetails(transferProcessId: string): Observable<Fetched<Asset>> {
+    return this.edcApiService.getTransferProcessAsset(transferProcessId)
       .pipe(
         map((asset) =>
           this.assetPropertyMapper.buildAssetFromProperties(asset.properties),
@@ -83,7 +82,8 @@ export class TransferHistoryPageComponent implements OnInit {
         console.log(error);
         this.notificationService.showError(error.failureMessage);
       },
-      ifLoading: () => {},
+      ifLoading: () => {
+      },
     });
   }
 
@@ -97,34 +97,11 @@ export class TransferHistoryPageComponent implements OnInit {
     this.loadTransferProcesses();
   }
 
-  onDeprovision(transferProcess: TransferProcessDto): void {
-    const dialogData = new ConfirmDialogModel(
-      'Confirm deprovision',
-      `Deprovisioning resources for transfer [${transferProcess.id}] will take some time and once started, it cannot be stopped.`,
-    );
-    dialogData.confirmColor = 'warn';
-    dialogData.confirmText = 'Confirm';
-    dialogData.cancelText = 'Abort';
-    const ref = this.dialog.open(ConfirmationDialogComponent, {
-      maxWidth: '20%',
-      data: dialogData,
-    });
-
-    ref.afterClosed().subscribe((res) => {
-      if (res) {
-        this.transferProcessService
-          .deprovisionTransferProcess(transferProcess.id)
-          .subscribe(() => this.loadTransferProcesses());
-      }
-    });
-  }
-
   loadTransferProcesses() {
-    this.transferProcessService
-      .getAllTransferProcesses(0, 10_000_000)
+    this.edcApiService.getTransferHistoryPage()
       .pipe(
         map((transferProcesses) => ({
-          transferProcesses: [...transferProcesses].sort(function (a, b) {
+          transferProcesses: [...transferProcesses.transferEntries].sort(function (a, b) {
             return (
               new Date(b.lastUpdatedDate)?.valueOf()! -
               new Date(a.lastUpdatedDate)?.valueOf()!

From a1a0702ac0997a7e718f0f86a550f1940df22fe4 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Thu, 10 Aug 2023 10:41:23 +0200
Subject: [PATCH 09/17] chore: minor refactorings - renaming variables and
 removing unwanted sort functions

---
 fake-backend/json/transferHistoryPage.json    | 12 ++++++------
 package-lock.json                             |  8 ++++----
 package.json                                  |  2 +-
 .../ui-elements/ago/ago.pipe.ts               |  2 +-
 .../ui-elements/ago/date-input.ts             |  3 +--
 ...act-agreement-transfer-dialog.component.ts |  4 ++--
 .../dashboard-page-data.service.ts            | 19 +++++++++----------
 .../transfer-history-page.component.ts        |  7 +------
 8 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/fake-backend/json/transferHistoryPage.json b/fake-backend/json/transferHistoryPage.json
index 5d7e88703..3bde33bc2 100644
--- a/fake-backend/json/transferHistoryPage.json
+++ b/fake-backend/json/transferHistoryPage.json
@@ -2,8 +2,8 @@
   "transferEntries": [
     {
       "transferProcessId": "339b2a27-3b66-49f5-8b43-6a400d5914b5",
-      "createdDate": "2022-01-20T11:18:59.659Z",
-      "lastUpdatedDate": "2022-06-25T11:18:59.659Z",
+      "createdDate": "2023-03-20T11:18:59.659Z",
+      "lastUpdatedDate": "2023-07-25T11:18:59.659Z",
       "state": {
         "code": 800,
         "name": "COMPLETED",
@@ -18,8 +18,8 @@
     },
     {
       "transferProcessId": "1317d0da-cdc6-42ab-b54b-1f90bcfed508",
-      "createdDate": "2022-03-20T11:18:59.659Z",
-      "lastUpdatedDate": "2022-03-25T11:18:59.659Z",
+      "createdDate": "2023-01-20T11:18:59.659Z",
+      "lastUpdatedDate": "2023-03-25T11:18:59.659Z",
       "state": {
         "code": -1,
         "name": "ERROR",
@@ -50,8 +50,8 @@
     },
     {
       "transferProcessId": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
-      "createdDate": "2023-01-29T11:18:59.659Z",
-      "lastUpdatedDate": "2023-02-29T11:18:59.659Z",
+      "createdDate": "2022-01-29T11:18:59.659Z",
+      "lastUpdatedDate": "2022-02-29T11:18:59.659Z",
       "state": {
         "code": 600,
         "name": "IN_PROGRESS",
diff --git a/package-lock.json b/package-lock.json
index 5e622a098..417802229 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@ng-apimock/core": "^3.11.0",
         "@ngxs/store": "^3.8.1",
         "@sovity.de/broker-server-client": "0.20230712.71619-main-a4860cff",
-        "@sovity.de/edc-client": "0.20230807.130256-main-c3447970",
+        "@sovity.de/edc-client": "0.20230810.82616-main-89593380",
         "clean-deep": "^3.4.0",
         "date-fns": "^2.30.0",
         "dotenv": "^16.3.1",
@@ -3598,9 +3598,9 @@
       "integrity": "sha512-305vHJj38Ma9x9YADM3SJh3sdqePeLcrUB1hHlYsuPdx7wYe9vwgb503KYStJ+5iN/ojP2xu8k6Unt+y+Bu5iQ=="
     },
     "node_modules/@sovity.de/edc-client": {
-      "version": "0.20230807.130256-main-c3447970",
-      "resolved": "https://registry.npmjs.org/@sovity.de/edc-client/-/edc-client-0.20230807.130256-main-c3447970.tgz",
-      "integrity": "sha512-Jxr04o4WggVmfgYx87oy4QieDRebkTPoxd27soXzGtrK8IdVm994aqMJZzUjs99bBi1eqXF2nIUQ3nZHoZUObQ=="
+      "version": "0.20230810.82616-main-89593380",
+      "resolved": "https://registry.npmjs.org/@sovity.de/edc-client/-/edc-client-0.20230810.82616-main-89593380.tgz",
+      "integrity": "sha512-yRrEPYCv38H0ug/6Vc+bF0gVyCivQrV3cRMYvyVMh89VBJ+zof3QRE6R+yuu3GdJX/kQEuAoaxniA2BzSgSZTw=="
     },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index aa13b8600..785b21949 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@ng-apimock/core": "^3.11.0",
     "@ngxs/store": "^3.8.1",
     "@sovity.de/broker-server-client": "0.20230712.71619-main-a4860cff",
-    "@sovity.de/edc-client": "0.20230807.130256-main-c3447970",
+    "@sovity.de/edc-client": "0.20230810.82616-main-89593380",
     "clean-deep": "^3.4.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",
diff --git a/src/app/component-library/ui-elements/ago/ago.pipe.ts b/src/app/component-library/ui-elements/ago/ago.pipe.ts
index 947f447b4..cc3afa363 100644
--- a/src/app/component-library/ui-elements/ago/ago.pipe.ts
+++ b/src/app/component-library/ui-elements/ago/ago.pipe.ts
@@ -12,7 +12,7 @@ export class AgoPipe implements PipeTransform {
 
   transform(date?: Date | null): Observable<string> {
     return this.interval$.pipe(
-      map(() => formatDateAgo(date)),
+      map(() => formatDateAgo(date!)),
       distinctUntilChanged(),
     );
   }
diff --git a/src/app/component-library/ui-elements/ago/date-input.ts b/src/app/component-library/ui-elements/ago/date-input.ts
index 02aef95cd..83c854788 100644
--- a/src/app/component-library/ui-elements/ago/date-input.ts
+++ b/src/app/component-library/ui-elements/ago/date-input.ts
@@ -1,2 +1 @@
-export type DateInput = Date | string | null
-
+export type DateInput = Date | string
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
index c22f27f7e..b9e11f814 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog.component.ts
@@ -133,7 +133,7 @@ export class ContractAgreementTransferDialogComponent implements OnDestroy {
       };
     }
 
-    let transferRequestProperties =
+    let transferProcessProperties =
       this.httpRequestParamsMapper.encodeHttpProxyTransferRequestProperties(
         this.data.asset,
         value,
@@ -146,7 +146,7 @@ export class ContractAgreementTransferDialogComponent implements OnDestroy {
       type: 'PARAMS_ONLY',
       params: {
         contractAgreementId: this.data.contractId,
-        privateProperties: transferRequestProperties,
+        transferProcessProperties,
         dataSinkProperties,
       },
     };
diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
index 0d98301a3..78bff7044 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
@@ -1,22 +1,24 @@
 import {Injectable} from '@angular/core';
 import {Observable, combineLatest, merge, of, scan} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {TransferHistoryEntry} from '@sovity.de/edc-client';
 import {CatalogApiUrlService} from '../../../../core/services/api/catalog-api-url.service';
 import {ContractOfferService} from '../../../../core/services/api/contract-offer.service';
+import {EdcApiService} from '../../../../core/services/api/edc-api.service';
 import {
   AssetService,
   ContractAgreementService,
   ContractDefinitionService,
   PolicyService,
 } from '../../../../core/services/api/legacy-managent-api-client';
-import {ConnectorInfoPropertyGridGroupBuilder} from '../../../../core/services/connector-info-property-grid-group-builder';
+import {
+  ConnectorInfoPropertyGridGroupBuilder
+} from '../../../../core/services/connector-info-property-grid-group-builder';
 import {LastCommitInfoService} from '../../../../core/services/last-commit-info.service';
 import {Fetched} from '../../../../core/services/models/fetched';
-import {TransferProcessStates} from '../../../../core/services/models/transfer-process-states';
 import {DonutChartData} from '../dashboard-donut-chart/donut-chart-data';
 import {DashboardPageData, defaultDashboardData} from './dashboard-page-data';
-import {EdcApiService} from "../../../../core/services/api/edc-api.service";
-import {TransferHistoryEntry} from "@sovity.de/edc-client";
+
 
 @Injectable({providedIn: 'root'})
 export class DashboardPageDataService {
@@ -30,7 +32,8 @@ export class DashboardPageDataService {
     private assetService: AssetService,
     private lastCommitInfoService: LastCommitInfoService,
     private connectorInfoPropertyGridGroupBuilder: ConnectorInfoPropertyGridGroupBuilder,
-  ) {}
+  ) {
+  }
 
   /**
    * Fetch {@link DashboardPageData}.
@@ -141,11 +144,7 @@ export class DashboardPageDataService {
         ? transfers.filter((it) => it.direction === 'CONSUMING')
         : transfers.filter((it) => it.direction === 'PROVIDING');
 
-    // Use the keys of the TransferProcessesStates Enum as order
-    const order = Object.keys(TransferProcessStates);
-    const states = [...new Set(filteredTransfers.map((it) => it.state.name))].sort(
-      (a, b) => order.indexOf(a) - order.indexOf(b),
-    );
+    const states = [...new Set(filteredTransfers.sort((a, b) => a.state.code - b.state.code).map((it) => it.state.name))]
 
     const colorsByState = new Map<string, string>();
     colorsByState.set('IN_PROGRESS', '#7eb0d5');
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 46aa938c9..256c34f55 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -101,12 +101,7 @@ export class TransferHistoryPageComponent implements OnInit {
     this.edcApiService.getTransferHistoryPage()
       .pipe(
         map((transferProcesses) => ({
-          transferProcesses: [...transferProcesses.transferEntries].sort(function (a, b) {
-            return (
-              new Date(b.lastUpdatedDate)?.valueOf()! -
-              new Date(a.lastUpdatedDate)?.valueOf()!
-            );
-          }),
+          transferProcesses: [...transferProcesses.transferEntries]
         })),
         Fetched.wrap({
           failureMessage: 'Failed fetching transfer history.',

From aa248a3883e7be6195a10e7800a0bd8e56a24e04 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Mon, 14 Aug 2023 10:29:05 +0200
Subject: [PATCH 10/17] chore: adding icons as per transfer process states and
 minor refactorings

---
 src/app/core/services/api/edc-api.service.ts  | 16 ++++++++--
 .../transfer-history-page.module.ts           |  4 +++
 .../transfer-history-page.component.html      | 30 +++++++++++++++---
 .../transfer-history-page.component.ts        | 31 ++++++-------------
 src/theme.scss                                |  8 -----
 5 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/app/core/services/api/edc-api.service.ts b/src/app/core/services/api/edc-api.service.ts
index 38bc9d3c2..63b33b753 100644
--- a/src/app/core/services/api/edc-api.service.ts
+++ b/src/app/core/services/api/edc-api.service.ts
@@ -1,6 +1,7 @@
 import {Inject, Injectable} from '@angular/core';
 import {Observable, from} from 'rxjs';
 import {
+  AssetDto,
   AssetPage,
   ConnectorLimits,
   ContractAgreementPage,
@@ -8,6 +9,7 @@ import {
   EdcClient,
   IdResponse,
   IdResponseDto,
+  TransferHistoryPage,
   buildEdcClient,
 } from '@sovity.de/edc-client';
 import {AssetCreateRequest} from '@sovity.de/edc-client/dist/generated/models/AssetCreateRequest';
@@ -34,9 +36,7 @@ export class EdcApiService {
     return from(this.edcClient.uiApi.assetPage());
   }
 
-  deleteAsset(
-    assetId: string,
-  ): Observable<IdResponseDto> {
+  deleteAsset(assetId: string): Observable<IdResponseDto> {
     return from(this.edcClient.uiApi.deleteAsset({assetId}));
   }
 
@@ -52,6 +52,16 @@ export class EdcApiService {
     );
   }
 
+  getTransferHistoryPage(): Observable<TransferHistoryPage> {
+    return from(this.edcClient.uiApi.transferHistoryPageEndpoint());
+  }
+
+  getTransferProcessAsset(transferProcessId: string): Observable<AssetDto> {
+    return from(
+      this.edcClient.uiApi.getTransferProcessAsset({transferProcessId}),
+    );
+  }
+
   getEnterpriseEditionConnectorLimits(): Observable<ConnectorLimits> {
     return from(this.edcClient.enterpriseEditionApi.connectorLimits());
   }
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
index ddd278cc3..7cc31f9ac 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
@@ -4,7 +4,9 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatTableModule} from '@angular/material/table';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {RouterModule} from '@angular/router';
 import {CatalogModule} from '../../../component-library/catalog/catalog.module';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
@@ -27,6 +29,8 @@ import {TransferHistoryPageComponent} from './transfer-history-page/transfer-his
 
     // EDC UI Modules
     CatalogModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
     PipesAndDirectivesModule,
     UiElementsModule,
   ],
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index 905118d80..f1d920882 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -39,7 +39,7 @@
       <ng-container matColumnDef="direction">
         <th *matHeaderCellDef mat-header-cell scope="col">Direction</th>
         <td *matCellDef="let item" mat-cell>
-          <mat-icon mat-table-avatar>
+          <mat-icon class="mat-icon-[28px]">
             {{ item.direction === 'PROVIDING' ? 'upload' : 'download' }}
           </mat-icon>
         </td>
@@ -52,17 +52,39 @@
               class="link"
               href="javascript:void(0)"
               (click)="onAssetDetailsClick(item.transferProcessId)">
-              {{ item.assetName ?? item.assetId }}
+              {{ item.assetName }}
             </a>
           </div>
           <div *ngIf="item.direction === 'CONSUMING'">
-            {{ item.assetName ?? item.assetId }}
+            {{ item.assetName }}
           </div>
         </td>
       </ng-container>
       <ng-container matColumnDef="state">
         <th *matHeaderCellDef mat-header-cell scope="col">State</th>
-        <td *matCellDef="let item" mat-cell>{{ item.state.name }}</td>
+        <td *matCellDef="let item" mat-cell>
+          <div class="flex flex-row space-x-[5px]">
+            {{ item.state.name }}
+            {{
+              item.state.name === 'CUSTOM' ? ' (' + item.state.code + ')' : ''
+            }}
+            <!-- Error Icon -->
+            <mat-icon
+              *ngIf="item.state.simplifiedState === 'ERROR'"
+              class="text-warn mat-icon-[14px]"
+              [matTooltip]="item.errorMessage!!"
+              >warning
+            </mat-icon>
+            <!-- Progress Spinner -->
+            <mat-progress-spinner
+              *ngIf="item.state.simplifiedState === 'RUNNING'"
+              class="mat-icon-[14px]"
+              diameter="14"
+              color="primary"
+              mode="indeterminate">
+            </mat-progress-spinner>
+          </div>
+        </td>
       </ng-container>
       <ng-container matColumnDef="lastUpdated">
         <th *matHeaderCellDef mat-header-cell scope="col">Last updated</th>
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 256c34f55..db2a808f8 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -55,44 +55,33 @@ export class TransferHistoryPageComponent implements OnInit {
     this.dialog.open(JsonDialogComponent, {data});
   }
 
-  loadAssetDetails(transferProcessId: string): Observable<Fetched<Asset>> {
+  loadAssetDetails(transferProcessId: string): Observable<Asset> {
     return this.edcApiService.getTransferProcessAsset(transferProcessId)
       .pipe(
         map((asset) =>
           this.assetPropertyMapper.buildAssetFromProperties(asset.properties),
         ),
-        Fetched.wrap({
-          failureMessage: 'Failed fetching asset details!',
-        }),
       );
   }
 
-  buildAssetDetailsDialog(fetchedAssetData: Fetched<Asset>) {
-    fetchedAssetData.match({
-      ifOk: (assetData) => {
+  onAssetDetailsClick(transferProcessId: string) {
+    this.loadAssetDetails(transferProcessId).subscribe({
+      next: (asset) => {
         this.dialog.open(AssetDetailDialogComponent, {
           data: this.assetDetailDialogDataService.assetDetails(
-            assetData,
+            asset,
             false,
           ),
           maxHeight: '90vh',
         });
       },
-      ifError: (error) => {
-        console.log(error);
-        this.notificationService.showError(error.failureMessage);
-      },
-      ifLoading: () => {
+      error: (error) => {
+        console.error('Failed to fetch asset details!', error);
+        this.notificationService.showError("Failed to fetch asset details!");
       },
     });
   }
 
-  onAssetDetailsClick(transferProcessId: string) {
-    this.loadAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
-      this.buildAssetDetailsDialog(fetchedAssetData);
-    });
-  }
-
   ngOnInit(): void {
     this.loadTransferProcesses();
   }
@@ -100,8 +89,8 @@ export class TransferHistoryPageComponent implements OnInit {
   loadTransferProcesses() {
     this.edcApiService.getTransferHistoryPage()
       .pipe(
-        map((transferProcesses) => ({
-          transferProcesses: [...transferProcesses.transferEntries]
+        map((transferHistoryPage) => ({
+          transferProcesses: transferHistoryPage.transferEntries
         })),
         Fetched.wrap({
           failureMessage: 'Failed fetching transfer history.',
diff --git a/src/theme.scss b/src/theme.scss
index 8fa616c73..c15940f0a 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -42,14 +42,6 @@ mat-icon[mat-card-avatar] {
   line-height: 40px;
 }
 
-// Fix Icon sizes used in table avatars
-mat-icon[mat-table-avatar] {
-  font-size: 30px;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-}
-
 // Fix mat-chips exploding out and/or having multiline exploding strings
 mat-chip {
   max-width: 100%;

From 52dd8f9c4be2543f99ab278e725ebce4dd6765d6 Mon Sep 17 00:00:00 2001
From: Richard Treier <richard.treier@sovity.de>
Date: Mon, 14 Aug 2023 12:23:41 +0200
Subject: [PATCH 11/17] fix: invalid date in test data

---
 fake-backend/json/transferHistoryPage.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fake-backend/json/transferHistoryPage.json b/fake-backend/json/transferHistoryPage.json
index 3bde33bc2..408e16fd5 100644
--- a/fake-backend/json/transferHistoryPage.json
+++ b/fake-backend/json/transferHistoryPage.json
@@ -51,7 +51,7 @@
     {
       "transferProcessId": "47240a35-d8fc-41d9-b020-07b87f3cc7b6",
       "createdDate": "2022-01-29T11:18:59.659Z",
-      "lastUpdatedDate": "2022-02-29T11:18:59.659Z",
+      "lastUpdatedDate": "2022-02-24T11:18:59.659Z",
       "state": {
         "code": 600,
         "name": "IN_PROGRESS",

From 24f5007bb68ea6487e9e59d24db4e6514214f692 Mon Sep 17 00:00:00 2001
From: Richard Treier <richard.treier@sovity.de>
Date: Mon, 14 Aug 2023 13:20:57 +0200
Subject: [PATCH 12/17] fix: dialog headers not working in transfer history
 page

---
 src/app/app.component.html                    | 11 +++
 src/app/app.module.ts                         |  2 +
 .../asset-detail-dialog.service.ts            | 29 ++++++++
 .../catalog/catalog.module.ts                 |  7 +-
 .../json-dialog/json-dialog.module.ts         |  4 ++
 .../json-dialog/json-dialog.service.ts        | 23 +++++++
 src/app/core/utils/mat-dialog-utils.ts        | 26 +++++++
 .../catalog-page/catalog-page.component.ts    | 19 +++--
 .../asset-page/asset-page.component.ts        | 32 +++++----
 .../catalog-browser-page.component.ts         | 16 ++---
 .../contract-agreement-page.component.ts      | 20 ++----
 .../asset-select/asset-select.component.ts    | 22 +++---
 .../contract-definition-cards.component.ts    | 31 +++++----
 .../transfer-history-page.module.ts           | 14 ++--
 .../transfer-history-page.component.ts        | 69 ++++++++++---------
 15 files changed, 213 insertions(+), 112 deletions(-)
 create mode 100644 src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts
 create mode 100644 src/app/component-library/json-dialog/json-dialog/json-dialog.service.ts
 create mode 100644 src/app/core/utils/mat-dialog-utils.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0680b43f9..8f67d6fb5 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2a7043b76..cd65d149f 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts
new file mode 100644
index 000000000..86e249d03
--- /dev/null
+++ b/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
+   * @param until$ observable that controls the lifetime of the dialog
+   */
+  open(
+    data: AssetDetailDialogData,
+    until$: Observable<any> = NEVER,
+  ): Observable<AssetDetailDialogResult | undefined> {
+    return showDialogUntil(
+      this.dialog,
+      AssetDetailDialogComponent,
+      {data, maxHeight: '90vh'},
+      until$,
+    );
+  }
+}
diff --git a/src/app/component-library/catalog/catalog.module.ts b/src/app/component-library/catalog/catalog.module.ts
index 987959124..0a94bc9a5 100644
--- a/src/app/component-library/catalog/catalog.module.ts
+++ b/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 {}
diff --git a/src/app/component-library/json-dialog/json-dialog.module.ts b/src/app/component-library/json-dialog/json-dialog.module.ts
index ebe434722..d0d7e19f5 100644
--- a/src/app/component-library/json-dialog/json-dialog.module.ts
+++ b/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 {}
diff --git a/src/app/component-library/json-dialog/json-dialog/json-dialog.service.ts b/src/app/component-library/json-dialog/json-dialog/json-dialog.service.ts
new file mode 100644
index 000000000..a69767db3
--- /dev/null
+++ b/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$);
+  }
+}
diff --git a/src/app/core/utils/mat-dialog-utils.ts b/src/app/core/utils/mat-dialog-utils.ts
new file mode 100644
index 000000000..a7d8968c5
--- /dev/null
+++ b/src/app/core/utils/mat-dialog-utils.ts
@@ -0,0 +1,26 @@
+import {ComponentType} from '@angular/cdk/portal';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {Observable} from 'rxjs';
+
+/**
+ * Method for launching Angular Material Dialogs with the lifetime of the dialog being handled by a until$ observable
+ *
+ * @param dialogService MatDialog
+ * @param dialog ComponentType
+ * @param config MatDialogConfig
+ * @param until$ Observable that controls the lifetime of the dialog
+ * @return afterClosed Observable
+ */
+export function showDialogUntil<T, R>(
+  dialogService: MatDialog,
+  dialog: ComponentType<any>,
+  config: MatDialogConfig<T>,
+  until$: Observable<unknown>,
+): Observable<R | undefined> {
+  let ref = dialogService.open(dialog, config);
+  until$.subscribe({
+    next: () => ref.close(),
+    complete: () => ref.close(),
+  });
+  return ref.afterClosed();
+}
diff --git a/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts b/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts
index ddf10861b..4e8426fc3 100644
--- a/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts
+++ b/src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts
@@ -1,14 +1,12 @@
 import {Component, HostBinding, OnDestroy, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatDialog} from '@angular/material/dialog';
 import {PageEvent} from '@angular/material/paginator';
 import {BehaviorSubject, Subject} from 'rxjs';
-import {map, takeUntil} from 'rxjs/operators';
+import {filter, map, takeUntil} from 'rxjs/operators';
 import {Store} from '@ngxs/store';
 import {CatalogPageSortingItem} from '@sovity.de/broker-server-client';
 import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {AssetDetailDialogResult} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-result';
-import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {FilterValueSelectItem} from '../filter-value-select/filter-value-select-item';
 import {FilterValueSelectVisibleState} from '../filter-value-select/filter-value-select-visible-state';
 import {CatalogActiveFilterPill} from '../state/catalog-active-filter-pill';
@@ -35,7 +33,7 @@ export class CatalogPageComponent implements OnInit, OnDestroy {
 
   constructor(
     private assetDetailDialogDataService: AssetDetailDialogDataService,
-    private matDialog: MatDialog,
+    private assetDetailDialogService: AssetDetailDialogService,
     private store: Store,
   ) {}
 
@@ -84,12 +82,11 @@ export class CatalogPageComponent implements OnInit, OnDestroy {
   onDataOfferClick(dataOffer: BrokerDataOffer) {
     const data =
       this.assetDetailDialogDataService.brokerDataOfferDetails(dataOffer);
-    const ref = this.matDialog.open(AssetDetailDialogComponent, {data});
-    ref.afterClosed().subscribe((result: AssetDetailDialogResult) => {
-      if (result?.refreshList) {
-        this.fetch$.next(null);
-      }
-    });
+
+    this.assetDetailDialogService
+      .open(data, this.ngOnDestroy$)
+      .pipe(filter((it) => !!it?.refreshList))
+      .subscribe(() => this.fetch$.next(null));
   }
 
   ngOnDestroy$ = new Subject();
diff --git a/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts b/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts
index a0d0483b4..6cbecece7 100644
--- a/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts
+++ b/src/app/routes/connector-ui/asset-page/asset-page/asset-page.component.ts
@@ -1,10 +1,9 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
-import {BehaviorSubject} from 'rxjs';
-import {map, switchMap} from 'rxjs/operators';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {filter, map, switchMap} from 'rxjs/operators';
 import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {AssetDetailDialogResult} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-result';
-import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {EdcApiService} from '../../../../core/services/api/edc-api.service';
 import {AssetPropertyMapper} from '../../../../core/services/asset-property-mapper';
 import {Asset} from '../../../../core/services/models/asset';
@@ -22,7 +21,7 @@ export interface AssetList {
   templateUrl: './asset-page.component.html',
   styleUrls: ['./asset-page.component.scss'],
 })
-export class AssetPageComponent implements OnInit {
+export class AssetPageComponent implements OnInit, OnDestroy {
   assetList: Fetched<AssetList> = Fetched.empty();
   searchText = '';
   private fetch$ = new BehaviorSubject(null);
@@ -30,6 +29,7 @@ export class AssetPageComponent implements OnInit {
   constructor(
     private edcApiService: EdcApiService,
     private assetDetailDialogDataService: AssetDetailDialogDataService,
+    private assetDetailDialogService: AssetDetailDialogService,
     private dialog: MatDialog,
     private assetPropertyMapper: AssetPropertyMapper,
   ) {}
@@ -75,18 +75,20 @@ export class AssetPageComponent implements OnInit {
 
   onAssetClick(asset: Asset) {
     const data = this.assetDetailDialogDataService.assetDetails(asset, true);
-    const ref = this.dialog.open(AssetDetailDialogComponent, {
-      data,
-      maxHeight: '90vh',
-    });
-    ref.afterClosed().subscribe((result: AssetDetailDialogResult) => {
-      if (result?.refreshList) {
-        this.refresh();
-      }
-    });
+    this.assetDetailDialogService
+      .open(data, this.ngOnDestroy$)
+      .pipe(filter((it) => !!it?.refreshList))
+      .subscribe(() => this.refresh());
   }
 
   private refresh() {
     this.fetch$.next(null);
   }
+
+  ngOnDestroy$ = new Subject();
+
+  ngOnDestroy() {
+    this.ngOnDestroy$.next(null);
+    this.ngOnDestroy$.complete();
+  }
 }
diff --git a/src/app/routes/connector-ui/catalog-browser-page/catalog-browser-page/catalog-browser-page.component.ts b/src/app/routes/connector-ui/catalog-browser-page/catalog-browser-page/catalog-browser-page.component.ts
index 299f5118e..aff1fe0fd 100644
--- a/src/app/routes/connector-ui/catalog-browser-page/catalog-browser-page/catalog-browser-page.component.ts
+++ b/src/app/routes/connector-ui/catalog-browser-page/catalog-browser-page/catalog-browser-page.component.ts
@@ -8,10 +8,9 @@ import {
   distinctUntilChanged,
   sampleTime,
 } from 'rxjs';
-import {map} from 'rxjs/operators';
+import {filter, map} from 'rxjs/operators';
 import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {AssetDetailDialogResult} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-result';
-import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {CatalogApiUrlService} from '../../../../core/services/api/catalog-api-url.service';
 import {ContractOffer} from '../../../../core/services/models/contract-offer';
 import {value$} from '../../../../core/utils/form-group-utils';
@@ -35,6 +34,7 @@ export class CatalogBrowserPageComponent implements OnInit, OnDestroy {
 
   constructor(
     private assetDetailDialogDataService: AssetDetailDialogDataService,
+    private assetDetailDialogService: AssetDetailDialogService,
     private catalogBrowserPageService: CatalogBrowserPageService,
     private catalogApiUrlService: CatalogApiUrlService,
     private matDialog: MatDialog,
@@ -56,12 +56,10 @@ export class CatalogBrowserPageComponent implements OnInit, OnDestroy {
   onContractOfferClick(contractOffer: ContractOffer) {
     const data =
       this.assetDetailDialogDataService.contractOfferDetails(contractOffer);
-    const ref = this.matDialog.open(AssetDetailDialogComponent, {data});
-    ref.afterClosed().subscribe((result: AssetDetailDialogResult) => {
-      if (result?.refreshList) {
-        this.fetch$.next(null);
-      }
-    });
+    this.assetDetailDialogService
+      .open(data, this.ngOnDestroy$)
+      .pipe(filter((it) => !!it?.refreshList))
+      .subscribe(() => this.fetch$.next(null));
   }
 
   onShowFetchDetails() {
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts
index 0074d3756..bafeb9d35 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts
@@ -1,6 +1,5 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatDialog} from '@angular/material/dialog';
 import {
   BehaviorSubject,
   Observable,
@@ -12,8 +11,7 @@ import {
 } from 'rxjs';
 import {filter, map, takeUntil} from 'rxjs/operators';
 import {AssetDetailDialogDataService} from 'src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {AssetDetailDialogData} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data';
-import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {Fetched} from '../../../../core/services/models/fetched';
 import {value$} from '../../../../core/utils/form-group-utils';
 import {filterNotNull} from '../../../../core/utils/rxjs-utils';
@@ -36,7 +34,7 @@ export class ContractAgreementPageComponent implements OnInit, OnDestroy {
 
   constructor(
     private assetDetailDialogDataService: AssetDetailDialogDataService,
-    private matDialog: MatDialog,
+    private assetDetailDialogService: AssetDetailDialogService,
     private contractAgreementPageService: ContractAgreementPageService,
   ) {}
 
@@ -50,16 +48,10 @@ export class ContractAgreementPageComponent implements OnInit, OnDestroy {
   }
 
   onContractAgreementClick(card: ContractAgreementCardMapped) {
-    const data$: Observable<AssetDetailDialogData> = this.card$(
-      card.contractAgreementId,
-    ).pipe(
-      map((it) =>
-        this.assetDetailDialogDataService.contractAgreementDetails(it),
-      ),
-    );
-    this.matDialog.open(AssetDetailDialogComponent, {
-      data: data$,
-      maxHeight: '90vh',
+    this.card$(card.contractAgreementId).subscribe((card) => {
+      const data =
+        this.assetDetailDialogDataService.contractAgreementDetails(card);
+      return this.assetDetailDialogService.open(data, this.ngOnDestroy$);
     });
   }
 
diff --git a/src/app/routes/connector-ui/contract-definition-page/asset-select/asset-select.component.ts b/src/app/routes/connector-ui/contract-definition-page/asset-select/asset-select.component.ts
index 4f1cb8e9f..66ea5f4e6 100644
--- a/src/app/routes/connector-ui/contract-definition-page/asset-select/asset-select.component.ts
+++ b/src/app/routes/connector-ui/contract-definition-page/asset-select/asset-select.component.ts
@@ -1,15 +1,15 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnDestroy} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatDialog} from '@angular/material/dialog';
+import {Subject} from 'rxjs';
 import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {Asset} from '../../../../core/services/models/asset';
 
 @Component({
   selector: 'asset-select',
   templateUrl: './asset-select.component.html',
 })
-export class AssetSelectComponent {
+export class AssetSelectComponent implements OnDestroy {
   @Input()
   label!: string;
 
@@ -21,14 +21,18 @@ export class AssetSelectComponent {
 
   constructor(
     private assetDetailDialogDataService: AssetDetailDialogDataService,
-    private matDialog: MatDialog,
+    private assetDetailDialogService: AssetDetailDialogService,
   ) {}
 
   onAssetClick(asset: Asset) {
     const data = this.assetDetailDialogDataService.assetDetails(asset, false);
-    this.matDialog.open(AssetDetailDialogComponent, {
-      data,
-      maxHeight: '90vh',
-    });
+    this.assetDetailDialogService.open(data, this.ngOnDestroy$);
+  }
+
+  ngOnDestroy$ = new Subject();
+
+  ngOnDestroy() {
+    this.ngOnDestroy$.next(null);
+    this.ngOnDestroy$.complete();
   }
 }
diff --git a/src/app/routes/connector-ui/contract-definition-page/contract-definition-cards/contract-definition-cards.component.ts b/src/app/routes/connector-ui/contract-definition-page/contract-definition-cards/contract-definition-cards.component.ts
index 37eb25c0f..11d31fff6 100644
--- a/src/app/routes/connector-ui/contract-definition-page/contract-definition-cards/contract-definition-cards.component.ts
+++ b/src/app/routes/connector-ui/contract-definition-page/contract-definition-cards/contract-definition-cards.component.ts
@@ -3,14 +3,14 @@ import {
   EventEmitter,
   HostBinding,
   Input,
+  OnDestroy,
   Output,
 } from '@angular/core';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
-import {EMPTY} from 'rxjs';
-import {catchError, filter, map, tap} from 'rxjs/operators';
+import {EMPTY, Subject} from 'rxjs';
+import {catchError, filter, tap} from 'rxjs/operators';
 import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {AssetDetailDialogResult} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-result';
-import {AssetDetailDialogComponent} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
+import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {ConfirmDialogModel} from '../../../../component-library/confirmation-dialog/confirmation-dialog/confirmation-dialog.component';
 import {JsonDialogComponent} from '../../../../component-library/json-dialog/json-dialog/json-dialog.component';
 import {JsonDialogData} from '../../../../component-library/json-dialog/json-dialog/json-dialog.data';
@@ -27,7 +27,7 @@ import {ContractDefinitionCard} from './contract-definition-card';
   selector: 'contract-definition-cards',
   templateUrl: './contract-definition-cards.component.html',
 })
-export class ContractDefinitionCardsComponent {
+export class ContractDefinitionCardsComponent implements OnDestroy {
   @HostBinding('class.flex')
   @HostBinding('class.flex-wrap')
   @HostBinding('class.gap-[10px]')
@@ -44,6 +44,7 @@ export class ContractDefinitionCardsComponent {
 
   constructor(
     private assetDetailDialogDataService: AssetDetailDialogDataService,
+    private assetDetailDialogService: AssetDetailDialogService,
     private matDialog: MatDialog,
     private contractDefinitionService: ContractDefinitionService,
     private notificationService: NotificationService,
@@ -61,16 +62,9 @@ export class ContractDefinitionCardsComponent {
 
   onAssetClick(asset: Asset) {
     const data = this.assetDetailDialogDataService.assetDetails(asset, false);
-    const ref = this.matDialog.open(AssetDetailDialogComponent, {
-      data,
-      maxHeight: '90vh',
-    });
-    ref
-      .afterClosed()
-      .pipe(
-        map((it) => it as AssetDetailDialogResult | null),
-        filter((it) => !!it?.refreshList),
-      )
+    this.assetDetailDialogService
+      .open(data, this.ngOnDestroy$)
+      .pipe(filter((it) => !!it?.refreshList))
       .subscribe(() => this.deleteDone.emit());
   }
 
@@ -107,4 +101,11 @@ export class ContractDefinitionCardsComponent {
 
     dialogRef = this.matDialog.open(JsonDialogComponent, {data});
   }
+
+  ngOnDestroy$ = new Subject();
+
+  ngOnDestroy() {
+    this.ngOnDestroy$.next(null);
+    this.ngOnDestroy$.complete();
+  }
 }
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
index 7cc31f9ac..070f0b122 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts
@@ -2,6 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
@@ -9,6 +11,7 @@ import {MatTableModule} from '@angular/material/table';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {RouterModule} from '@angular/router';
 import {CatalogModule} from '../../../component-library/catalog/catalog.module';
+import {JsonDialogModule} from '../../../component-library/json-dialog/json-dialog.module';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
 import {UiElementsModule} from '../../../component-library/ui-elements/ui-elements.module';
 import {TransferHistoryPageComponent} from './transfer-history-page/transfer-history-page.component';
@@ -23,14 +26,17 @@ import {TransferHistoryPageComponent} from './transfer-history-page/transfer-his
 
     // Angular Material
     MatButtonModule,
-    MatTableModule,
-    MatPaginatorModule,
+    MatCardModule,
+    MatDialogModule,
     MatIconModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    MatTooltipModule,
 
     // EDC UI Modules
     CatalogModule,
-    MatProgressSpinnerModule,
-    MatTooltipModule,
+    JsonDialogModule,
     PipesAndDirectivesModule,
     UiElementsModule,
   ],
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index db2a808f8..0b2d54754 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -1,29 +1,22 @@
-import {Component, OnInit} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
-import {Observable} from 'rxjs';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Observable, Subject} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {TransferHistoryEntry} from '@sovity.de/edc-client';
-import {
-  AssetDetailDialogDataService
-} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
-import {
-  AssetDetailDialogComponent
-} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.component';
-import {JsonDialogComponent} from '../../../../component-library/json-dialog/json-dialog/json-dialog.component';
-import {JsonDialogData} from '../../../../component-library/json-dialog/json-dialog/json-dialog.data';
+import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
+import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
+import {JsonDialogService} from '../../../../component-library/json-dialog/json-dialog/json-dialog.service';
 import {EdcApiService} from '../../../../core/services/api/edc-api.service';
 import {AssetPropertyMapper} from '../../../../core/services/asset-property-mapper';
 import {Asset} from '../../../../core/services/models/asset';
 import {Fetched} from '../../../../core/services/models/fetched';
 import {NotificationService} from '../../../../core/services/notification.service';
 
-
 @Component({
   selector: 'transfer-history-page',
   templateUrl: './transfer-history-page.component.html',
   styleUrls: ['./transfer-history-page.component.scss'],
 })
-export class TransferHistoryPageComponent implements OnInit {
+export class TransferHistoryPageComponent implements OnInit, OnDestroy {
   columns: string[] = [
     'direction',
     'assetId',
@@ -39,24 +32,27 @@ export class TransferHistoryPageComponent implements OnInit {
   constructor(
     private edcApiService: EdcApiService,
     private assetDetailDialogDataService: AssetDetailDialogDataService,
+    private assetDetailDialogService: AssetDetailDialogService,
     private assetPropertyMapper: AssetPropertyMapper,
     private notificationService: NotificationService,
-    private dialog: MatDialog,
-  ) {
-  }
+    private jsonDialogService: JsonDialogService,
+  ) {}
 
   onTransferHistoryDetailsClick(item: TransferHistoryEntry) {
-    const data: JsonDialogData = {
-      title: item.assetName ?? item.assetId,
-      subtitle: 'Transfer History Details',
-      icon: 'assignment',
-      objectForJson: item,
-    };
-    this.dialog.open(JsonDialogComponent, {data});
+    this.jsonDialogService.showJsonDetailDialog(
+      {
+        title: item.assetName ?? item.assetId,
+        subtitle: 'Transfer History Details',
+        icon: 'assignment',
+        objectForJson: item,
+      },
+      this.ngOnDestroy$,
+    );
   }
 
   loadAssetDetails(transferProcessId: string): Observable<Asset> {
-    return this.edcApiService.getTransferProcessAsset(transferProcessId)
+    return this.edcApiService
+      .getTransferProcessAsset(transferProcessId)
       .pipe(
         map((asset) =>
           this.assetPropertyMapper.buildAssetFromProperties(asset.properties),
@@ -67,17 +63,15 @@ export class TransferHistoryPageComponent implements OnInit {
   onAssetDetailsClick(transferProcessId: string) {
     this.loadAssetDetails(transferProcessId).subscribe({
       next: (asset) => {
-        this.dialog.open(AssetDetailDialogComponent, {
-          data: this.assetDetailDialogDataService.assetDetails(
-            asset,
-            false,
-          ),
-          maxHeight: '90vh',
-        });
+        const data = this.assetDetailDialogDataService.assetDetails(
+          asset,
+          false,
+        );
+        this.assetDetailDialogService.open(data, this.ngOnDestroy$);
       },
       error: (error) => {
         console.error('Failed to fetch asset details!', error);
-        this.notificationService.showError("Failed to fetch asset details!");
+        this.notificationService.showError('Failed to fetch asset details!');
       },
     });
   }
@@ -87,10 +81,11 @@ export class TransferHistoryPageComponent implements OnInit {
   }
 
   loadTransferProcesses() {
-    this.edcApiService.getTransferHistoryPage()
+    this.edcApiService
+      .getTransferHistoryPage()
       .pipe(
         map((transferHistoryPage) => ({
-          transferProcesses: transferHistoryPage.transferEntries
+          transferProcesses: transferHistoryPage.transferEntries,
         })),
         Fetched.wrap({
           failureMessage: 'Failed fetching transfer history.',
@@ -101,4 +96,10 @@ export class TransferHistoryPageComponent implements OnInit {
           (this.transferProcessesList = transferProcessesList),
       );
   }
+
+  ngOnDestroy$ = new Subject();
+  ngOnDestroy() {
+    this.ngOnDestroy$.next(null);
+    this.ngOnDestroy$.complete();
+  }
 }

From a9a8b4b2a0c46a4a1ed21d8b0bc922289cf22094 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Mon, 14 Aug 2023 15:58:05 +0200
Subject: [PATCH 13/17] chore: adding polling to the transfer history page

---
 .../transfer-history-page.component.html      | 73 +++++++++++--------
 .../transfer-history-page.component.ts        | 44 ++++++++---
 src/styles.scss                               |  2 +
 src/theme-colors.mds.scss                     |  2 +-
 4 files changed, 79 insertions(+), 42 deletions(-)

diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index f1d920882..2a21b7c93 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -1,16 +1,15 @@
 <div id="wrapper">
-  <button mat-raised-button color="primary" (click)="loadTransferProcesses()">
-    <mat-icon>cached</mat-icon>
-    Refresh
-  </button>
-  <mat-paginator
-    *ngIf="transferProcessesList.isReady"
-    [hidePageSize]="true"
-    [disabled]="true"
-    [pageSize]="transferProcessesList.data.transferProcesses.length"
-    [length]="
-      transferProcessesList.data.transferProcesses.length
-    "></mat-paginator>
+  <div class="flex flex-row">
+    <div class="grow"></div>
+    <mat-paginator
+      *ngIf="transferProcessesList.isReady"
+      [hidePageSize]="true"
+      [disabled]="true"
+      [pageSize]="transferProcessesList.data.transferProcesses.length"
+      [length]="
+        transferProcessesList.data.transferProcesses.length
+      "></mat-paginator>
+  </div>
   <div class="flex flex-row justify-center">
     <loading-state
       *ngIf="transferProcessesList.isLoading"
@@ -37,16 +36,28 @@
       mat-table
       [dataSource]="transferProcessesList.data.transferProcesses">
       <ng-container matColumnDef="direction">
-        <th *matHeaderCellDef mat-header-cell scope="col">Direction</th>
-        <td *matCellDef="let item" mat-cell>
+        <th *matHeaderCellDef class="w-[50px]" mat-header-cell scope="col">
+          Direction
+        </th>
+        <td *matCellDef="let item" class="w-[50px]" mat-cell>
           <mat-icon class="mat-icon-[28px]">
             {{ item.direction === 'PROVIDING' ? 'upload' : 'download' }}
           </mat-icon>
         </td>
       </ng-container>
+      <ng-container matColumnDef="lastUpdated">
+        <th *matHeaderCellDef class="w-[150px]" mat-header-cell scope="col">
+          Last updated
+        </th>
+        <td *matCellDef="let item" class="w-[150px]" mat-cell>
+          <ago [date]="item.lastUpdatedDate"></ago>
+        </td>
+      </ng-container>
       <ng-container matColumnDef="assetId">
-        <th *matHeaderCellDef mat-header-cell scope="col">Asset</th>
-        <td *matCellDef="let item" mat-cell>
+        <th *matHeaderCellDef class="w-[300px]" mat-header-cell scope="col">
+          Asset
+        </th>
+        <td *matCellDef="let item" class="w-[300px]" mat-cell>
           <div *ngIf="item.direction === 'PROVIDING'">
             <a
               class="link"
@@ -61,13 +72,17 @@
         </td>
       </ng-container>
       <ng-container matColumnDef="state">
-        <th *matHeaderCellDef mat-header-cell scope="col">State</th>
-        <td *matCellDef="let item" mat-cell>
-          <div class="flex flex-row space-x-[5px]">
-            {{ item.state.name }}
-            {{
-              item.state.name === 'CUSTOM' ? ' (' + item.state.code + ')' : ''
-            }}
+        <th *matHeaderCellDef class="w-[150px]" mat-header-cell scope="col">
+          State
+        </th>
+        <td *matCellDef="let item" class="w-[150px]" mat-cell>
+          <div class="flex flex-row items-center space-x-[5px]">
+            <span>
+              {{ item.state.name }}
+              {{
+                item.state.name === 'CUSTOM' ? ' (' + item.state.code + ')' : ''
+              }}
+            </span>
             <!-- Error Icon -->
             <mat-icon
               *ngIf="item.state.simplifiedState === 'ERROR'"
@@ -86,12 +101,6 @@
           </div>
         </td>
       </ng-container>
-      <ng-container matColumnDef="lastUpdated">
-        <th *matHeaderCellDef mat-header-cell scope="col">Last updated</th>
-        <td *matCellDef="let item" mat-cell>
-          <ago [date]="item.lastUpdatedDate"></ago>
-        </td>
-      </ng-container>
       <ng-container matColumnDef="counterPartyConnectorEndpoint">
         <th *matHeaderCellDef mat-header-cell scope="col">
           Counter-party Connector Endpoint
@@ -101,8 +110,10 @@
         </td>
       </ng-container>
       <ng-container matColumnDef="details">
-        <th *matHeaderCellDef mat-header-cell scope="col">Details</th>
-        <td *matCellDef="let item" mat-cell>
+        <th *matHeaderCellDef class="w-[100px]" mat-header-cell scope="col">
+          Details
+        </th>
+        <td *matCellDef="let item" class="w-[100px]" mat-cell>
           <a
             class="link"
             href="javascript:void(0)"
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 0b2d54754..10304bc80 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -1,7 +1,15 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {Observable, Subject} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {TransferHistoryEntry} from '@sovity.de/edc-client';
+import {
+  EMPTY,
+  Observable,
+  Subject,
+  concat,
+  interval,
+  skip,
+  switchMap,
+} from 'rxjs';
+import {catchError, map} from 'rxjs/operators';
+import {TransferHistoryEntry, TransferHistoryPage} from '@sovity.de/edc-client';
 import {AssetDetailDialogDataService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service';
 import {AssetDetailDialogService} from '../../../../component-library/catalog/asset-detail-dialog/asset-detail-dialog.service';
 import {JsonDialogService} from '../../../../component-library/json-dialog/json-dialog/json-dialog.service';
@@ -19,9 +27,9 @@ import {NotificationService} from '../../../../core/services/notification.servic
 export class TransferHistoryPageComponent implements OnInit, OnDestroy {
   columns: string[] = [
     'direction',
+    'lastUpdated',
     'assetId',
     'state',
-    'lastUpdated',
     'counterPartyConnectorEndpoint',
     'details',
   ];
@@ -81,15 +89,30 @@ export class TransferHistoryPageComponent implements OnInit, OnDestroy {
   }
 
   loadTransferProcesses() {
-    this.edcApiService
-      .getTransferHistoryPage()
-      .pipe(
-        map((transferHistoryPage) => ({
-          transferProcesses: transferHistoryPage.transferEntries,
-        })),
+    const initialRequest: Observable<Fetched<TransferHistoryPage>> =
+      this.edcApiService.getTransferHistoryPage().pipe(
         Fetched.wrap({
           failureMessage: 'Failed fetching transfer history.',
         }),
+      );
+
+    const polling: Observable<Fetched<TransferHistoryPage>> = interval(
+      5_000,
+    ).pipe(
+      skip(1),
+      switchMap(() =>
+        this.edcApiService
+          .getTransferHistoryPage()
+          .pipe(catchError(() => EMPTY)),
+      ),
+      map((data) => Fetched.ready(data)),
+    );
+
+    return concat(initialRequest, polling)
+      .pipe(
+        Fetched.map((transferHistoryPage) => ({
+          transferProcesses: transferHistoryPage.transferEntries,
+        })),
       )
       .subscribe(
         (transferProcessesList) =>
@@ -98,6 +121,7 @@ export class TransferHistoryPageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy$ = new Subject();
+
   ngOnDestroy() {
     this.ngOnDestroy$.next(null);
     this.ngOnDestroy$.complete();
diff --git a/src/styles.scss b/src/styles.scss
index b8c120796..8f87760e3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -166,6 +166,7 @@ body {
 }
 
 .mat-icon-\[28px\] {
+  margin-top: 8px;
   font-size: 28px !important;
   width: 28px !important;
   height: 28px !important;
@@ -189,6 +190,7 @@ body {
     padding-bottom: 0 !important;
   }
 }
+
 .max-two-lines-list-item .mat-list-text {
   display: -webkit-box !important;
   -webkit-line-clamp: 2;
diff --git a/src/theme-colors.mds.scss b/src/theme-colors.mds.scss
index 94e074215..fe5c811d3 100644
--- a/src/theme-colors.mds.scss
+++ b/src/theme-colors.mds.scss
@@ -37,7 +37,7 @@ $theme-colors-primary: (
   ),
 );
 
-$link-color: darken (map.get($theme-colors-primary, 500), 5%);
+$link-color: darken(map.get($theme-colors-primary, 500), 15%);
 
 $theme-colors-accent: (
   50: #ffffff,

From 0b092b750d3af915015b71b545fddb3a9b10059f Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Mon, 14 Aug 2023 16:16:46 +0200
Subject: [PATCH 14/17] chore: updating the dashboard page component to get
 data from transfer history endpoint (api wrapper)

---
 .../dashboard-page-data.service.ts            | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
index 36c569bc3..a1cd01f8d 100644
--- a/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
+++ b/src/app/routes/connector-ui/dashboard-page/dashboard-page/dashboard-page-data.service.ts
@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
 import {Observable, combineLatest, merge, of, scan} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {TransferHistoryEntry} from '@sovity.de/edc-client';
 import {CatalogApiUrlService} from '../../../../core/services/api/catalog-api-url.service';
 import {ContractOfferService} from '../../../../core/services/api/contract-offer.service';
 import {EdcApiService} from '../../../../core/services/api/edc-api.service';
@@ -8,19 +9,16 @@ import {
   ContractAgreementService,
   ContractDefinitionService,
   PolicyService,
-  TransferProcessDto,
-  TransferProcessService,
 } from '../../../../core/services/api/legacy-managent-api-client';
 import {
   ConnectorInfoPropertyGridGroupBuilder
 } from '../../../../core/services/connector-info-property-grid-group-builder';
 import {LastCommitInfoService} from '../../../../core/services/last-commit-info.service';
 import {Fetched} from '../../../../core/services/models/fetched';
-import {TransferProcessStates} from '../../../../core/services/models/transfer-process-states';
-import {TransferProcessUtils} from '../../../../core/services/transfer-process-utils';
 import {DonutChartData} from '../dashboard-donut-chart/donut-chart-data';
 import {DashboardPageData, defaultDashboardData} from './dashboard-page-data';
 
+
 @Injectable({providedIn: 'root'})
 export class DashboardPageDataService {
   constructor(
@@ -30,11 +28,10 @@ export class DashboardPageDataService {
     private contractAgreementService: ContractAgreementService,
     private policyService: PolicyService,
     private catalogApiUrlService: CatalogApiUrlService,
-    private transferProcessService: TransferProcessService,
-    private transferProcessUtils: TransferProcessUtils,
     private lastCommitInfoService: LastCommitInfoService,
     private connectorInfoPropertyGridGroupBuilder: ConnectorInfoPropertyGridGroupBuilder,
-  ) {}
+  ) {
+  }
 
   /**
    * Fetch {@link DashboardPageData}.
@@ -120,37 +117,32 @@ export class DashboardPageDataService {
   }
 
   private transferProcessKpis(): Observable<Partial<DashboardPageData>> {
-    return this.transferProcessService
-      .getAllTransferProcesses(0, 10_000_000)
+    return this.edcApiService.getTransferHistoryPage()
       .pipe(
         Fetched.wrap({
           failureMessage: 'Failed fetching transfer processes.',
         }),
         map((transferData) => ({
           incomingTransfersChart: transferData.map((it) =>
-            this.buildTransferChart(it, 'incoming'),
+            this.buildTransferChart(it.transferEntries, 'CONSUMING'),
           ),
           outgoingTransfersChart: transferData.map((it) =>
-            this.buildTransferChart(it, 'outgoing'),
+            this.buildTransferChart(it.transferEntries, 'PROVIDING'),
           ),
         })),
       );
   }
 
   private buildTransferChart(
-    transfers: TransferProcessDto[],
-    direction: 'incoming' | 'outgoing',
+    transfers: TransferHistoryEntry[],
+    direction: 'CONSUMING' | 'PROVIDING',
   ): DonutChartData {
     const filteredTransfers =
-      direction === 'incoming'
-        ? transfers.filter((it) => this.transferProcessUtils.isIncoming(it))
-        : transfers.filter((it) => this.transferProcessUtils.isOutgoing(it));
-
-    // Use the keys of the TransferProcessesStates Enum as order
-    const order = Object.keys(TransferProcessStates);
-    const states = [...new Set(filteredTransfers.map((it) => it.state))].sort(
-      (a, b) => order.indexOf(a) - order.indexOf(b),
-    );
+      direction === 'CONSUMING'
+        ? transfers.filter((it) => it.direction === 'CONSUMING')
+        : transfers.filter((it) => it.direction === 'PROVIDING');
+
+    const states = [...new Set(filteredTransfers.sort((a, b) => a.state.code - b.state.code).map((it) => it.state.name))]
 
     const colorsByState = new Map<string, string>();
     colorsByState.set('IN_PROGRESS', '#7eb0d5');
@@ -159,7 +151,7 @@ export class DashboardPageDataService {
     const defaultColor = '#bd7ebe';
 
     const amountsByState = states.map(
-      (state) => filteredTransfers.filter((it) => it.state === state).length,
+      (state) => filteredTransfers.filter((it) => it.state.name === state).length,
     );
 
     return {

From dbbb1f2cb223149acffba98f8f72f281f1a77646 Mon Sep 17 00:00:00 2001
From: AnurosePrakash <anurose.prakash@sovity.de>
Date: Mon, 14 Aug 2023 17:10:26 +0200
Subject: [PATCH 15/17] chore: updating icons on
 transfer-history-page.component.html

---
 .../transfer-history-page.component.html            | 13 +++++++------
 .../transfer-history-page.component.ts              |  2 +-
 src/styles.scss                                     | 11 +++++++++++
 src/theme-colors.mds.scss                           |  2 +-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
index 2a21b7c93..173ad5af6 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html
@@ -53,17 +53,18 @@
           <ago [date]="item.lastUpdatedDate"></ago>
         </td>
       </ng-container>
-      <ng-container matColumnDef="assetId">
-        <th *matHeaderCellDef class="w-[300px]" mat-header-cell scope="col">
-          Asset
-        </th>
-        <td *matCellDef="let item" class="w-[300px]" mat-cell>
+      <ng-container matColumnDef="assetName">
+        <th *matHeaderCellDef mat-header-cell scope="col">Asset</th>
+        <td *matCellDef="let item" mat-cell>
           <div *ngIf="item.direction === 'PROVIDING'">
             <a
               class="link"
               href="javascript:void(0)"
               (click)="onAssetDetailsClick(item.transferProcessId)">
-              {{ item.assetName }}
+              <mat-icon class="mat-icon-[14px]">open_in_new</mat-icon>
+              <div>
+                {{ item.assetName }}
+              </div>
             </a>
           </div>
           <div *ngIf="item.direction === 'CONSUMING'">
diff --git a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
index 10304bc80..b5e8bfc9f 100644
--- a/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
+++ b/src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts
@@ -28,7 +28,7 @@ export class TransferHistoryPageComponent implements OnInit, OnDestroy {
   columns: string[] = [
     'direction',
     'lastUpdated',
-    'assetId',
+    'assetName',
     'state',
     'counterPartyConnectorEndpoint',
     'details',
diff --git a/src/styles.scss b/src/styles.scss
index 8f87760e3..48c7cf76a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -103,6 +103,8 @@ body {
 .link {
   color: var(--link-color);
   text-decoration: none;
+  display: flex;
+  align-items: center;
 
   &:hover,
   &:focus {
@@ -145,6 +147,7 @@ body {
 }
 
 .mat-icon-\[14px\] {
+  margin-right: 5px;
   font-size: 14px !important;
   width: 14px !important;
   height: 14px !important;
@@ -165,6 +168,14 @@ body {
   line-height: 12px !important;
 }
 
+.mat-icon-\[18px\] {
+  margin-top: 5px;
+  font-size: 18px !important;
+  width: 18px !important;
+  height: 18px !important;
+  line-height: 18px !important;
+}
+
 .mat-icon-\[28px\] {
   margin-top: 8px;
   font-size: 28px !important;
diff --git a/src/theme-colors.mds.scss b/src/theme-colors.mds.scss
index fe5c811d3..50c938a39 100644
--- a/src/theme-colors.mds.scss
+++ b/src/theme-colors.mds.scss
@@ -37,7 +37,7 @@ $theme-colors-primary: (
   ),
 );
 
-$link-color: darken(map.get($theme-colors-primary, 500), 15%);
+$link-color: darken (map.get($theme-colors-primary, 500), 15%);
 
 $theme-colors-accent: (
   50: #ffffff,

From acadb0f4981b1772856bdaf969b3fc86aa9fc16c Mon Sep 17 00:00:00 2001
From: Richard Treier <richard.treier@sovity.de>
Date: Mon, 14 Aug 2023 17:18:46 +0200
Subject: [PATCH 16/17] fix: issues with contract agreement page's asset detail
 dialog

---
 fake-backend/json/transferHistoryPage.json           |  6 +++---
 .../asset-detail-dialog.service.ts                   |  4 ++--
 .../contract-agreement-page.component.ts             | 12 +++++++-----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/fake-backend/json/transferHistoryPage.json b/fake-backend/json/transferHistoryPage.json
index 408e16fd5..c023acf9a 100644
--- a/fake-backend/json/transferHistoryPage.json
+++ b/fake-backend/json/transferHistoryPage.json
@@ -12,7 +12,7 @@
       "contractAgreementId": "test-asset-1-cd:f52a5d30-6356-4a55-a75a-3c45d7a88c3e",
       "direction": "CONSUMING",
       "counterPartyConnectorEndpoint": "https://sovity-demo4-mds/api/v1/ids/data",
-      "assetName": "Test Asset 1",
+      "assetName": "urn:artifact:test-asset-1",
       "assetId": "urn:artifact:test-asset-1",
       "errorMessage": null
     },
@@ -28,7 +28,7 @@
       "contractAgreementId": "test-asset-2-cd:5816a60b-86c1-489a-b26a-ed129947f973",
       "direction": "CONSUMING",
       "counterPartyConnectorEndpoint": "http://edc2:11003/api/v1/ids/data",
-      "assetName": "Test Asset 2",
+      "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"
     },
@@ -44,7 +44,7 @@
       "contractAgreementId": "test-asset-3-cd:6ebbc301-9b1e-4cd7-9f17-97b5b7867531",
       "direction": "CONSUMING",
       "counterPartyConnectorEndpoint": "https://sovity-demo2-edc/api/v1/ids/data",
-      "assetName": "Test Asset 3",
+      "assetName": "urn:artifact:test-asset-3",
       "assetId": "urn:artifact:test-asset-3",
       "errorMessage": null
     },
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts
index 86e249d03..b77e88687 100644
--- a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts
+++ b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.service.ts
@@ -12,11 +12,11 @@ export class AssetDetailDialogService {
 
   /**
    * Shows an Asset Detail Dialog until until$ emits / completes
-   * @param data Asset Detail Dialog data
+   * @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,
+    data: AssetDetailDialogData | Observable<AssetDetailDialogData>,
     until$: Observable<any> = NEVER,
   ): Observable<AssetDetailDialogResult | undefined> {
     return showDialogUntil(
diff --git a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts
index bafeb9d35..c12b53356 100644
--- a/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts
+++ b/src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.component.ts
@@ -48,11 +48,13 @@ export class ContractAgreementPageComponent implements OnInit, OnDestroy {
   }
 
   onContractAgreementClick(card: ContractAgreementCardMapped) {
-    this.card$(card.contractAgreementId).subscribe((card) => {
-      const data =
-        this.assetDetailDialogDataService.contractAgreementDetails(card);
-      return this.assetDetailDialogService.open(data, this.ngOnDestroy$);
-    });
+    const data$ = this.card$(card.contractAgreementId).pipe(
+      map((card) =>
+        this.assetDetailDialogDataService.contractAgreementDetails(card),
+      ),
+    );
+
+    return this.assetDetailDialogService.open(data$, this.ngOnDestroy$);
   }
 
   refresh() {

From 132b00d52f8177bcac3fa297191bbd7a8adb6d29 Mon Sep 17 00:00:00 2001
From: Richard Treier <richard.treier@sovity.de>
Date: Mon, 14 Aug 2023 17:24:10 +0200
Subject: [PATCH 17/17] chore: fix formatDateAgo nullability

---
 src/app/component-library/ui-elements/ago/ago.pipe.ts      | 2 +-
 src/app/component-library/ui-elements/ago/formatDateAgo.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/component-library/ui-elements/ago/ago.pipe.ts b/src/app/component-library/ui-elements/ago/ago.pipe.ts
index cc3afa363..947f447b4 100644
--- a/src/app/component-library/ui-elements/ago/ago.pipe.ts
+++ b/src/app/component-library/ui-elements/ago/ago.pipe.ts
@@ -12,7 +12,7 @@ export class AgoPipe implements PipeTransform {
 
   transform(date?: Date | null): Observable<string> {
     return this.interval$.pipe(
-      map(() => formatDateAgo(date!)),
+      map(() => formatDateAgo(date)),
       distinctUntilChanged(),
     );
   }
diff --git a/src/app/component-library/ui-elements/ago/formatDateAgo.ts b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
index c26cc9a74..99209c52c 100644
--- a/src/app/component-library/ui-elements/ago/formatDateAgo.ts
+++ b/src/app/component-library/ui-elements/ago/formatDateAgo.ts
@@ -1,13 +1,13 @@
 import {formatDistanceToNow} from 'date-fns';
-import {DateInput} from "./date-input";
+import {DateInput} from './date-input';
 
 /**
  * Formats date as "{n} {timeUnit} ago" or "in {n} {timeUnit}s".
  * @param date date
  */
-export function formatDateAgo(date?: DateInput): string {
+export function formatDateAgo(date?: DateInput | null): string {
   if (!date) {
-    return '';
+    return 'never';
   }
   if (typeof date === 'string') {
     date = new Date(date);