Migrate Catalog Page to UI API Wrapper

.env.local-dev

@@ -5,11 +5,11 @@ EDC_UI_ACTIVE_PROFILE=sovity-open-source
 EDC_UI_USE_FAKE_BACKEND=true
 EDC_UI_DATA_MANAGEMENT_API_URL=http://edc.fake-backend
 EDC_UI_DATA_MANAGEMENT_API_KEY=no-api-key-required-in-local-dev
-EDC_UI_CATALOG_URLS=http://existing-other-connector/v1/ids/data,http://does-not-exist-but-is-super-long-so-we-can-test/v1/ids/data, http://how-wrapping-works-in-subtext-of-catalog-url-select/v1/ids/data
+EDC_UI_CATALOG_URLS=http://existing-other-connector/api/dsp,http://does-not-exist-but-is-super-long-so-we-can-test/api/dsp, http://how-wrapping-works-in-subtext-of-catalog-url-select/api/dsp
 EDC_UI_LOGOUT_URL=https://example.com/logout
-EDC_UI_CONNECTOR_ENDPOINT=http://localhost:3000/v1/ids/data
+EDC_UI_CONNECTOR_ENDPOINT=http://localhost:3000/api/dsp
 
-EDC_UI_CONNECTOR_ID=https://example-connector-id/
+EDC_UI_CONNECTOR_ID=https://localhost:3000
 EDC_UI_CONNECTOR_NAME=example-connector-name
 EDC_UI_IDS_ID=urn:connector:example
 EDC_UI_IDS_TITLE=Example Connector Title

README.md

@@ -86,21 +86,8 @@ for a list of extensions used.
 
 ## Getting Started
 
-The fastest way to get started is to run our
-[docker-compose.yaml](docs/getting-started/docker-compose.yaml).
-
-```shell
-cd docs/getting-started
-
-# Pull latest images
-docker compose pull
-
-# On ARM64, e.g. MAC with M1, you need to cross compile your own UI image
-# (cd ../../ && docker buildx build -f "docker/Dockerfile" --platform linux/arm64 -t "ghcr.io/sovity/edc-ui:latest" .)
-
-# Runs EDC and EDC UI at localhost:11000
-docker compose up
-```
+The fastest way to get started is using our Getting Started Guide in
+[sovity EDC CE Getting Started Guide](https://github.com/sovity/edc-extensions#getting-started).
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

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.20230921.115850-main-5e87f14f",
+    "@sovity.de/edc-client": "0.20230926.105529-main-44861eac",
     "clean-deep": "^3.4.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",

src/app/app-routing.module.ts

@@ -1,12 +1,7 @@
 import {NgModule} from '@angular/core';
-import {
-  ROUTES,
-  RouterModule,
-  Routes,
-} from '@angular/router';
+import {ROUTES, RouterModule, Routes} from '@angular/router';
+import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {APP_CONFIG, AppConfig} from './core/config/app-config';
-import {PageNotFoundComponent} from "./component-library/error-404-component/page-not-found.component";
-
 
 @NgModule({
   imports: [RouterModule.forRoot([], {paramsInheritanceStrategy: 'always'})],
@@ -22,24 +17,26 @@ import {PageNotFoundComponent} from "./component-library/error-404-component/pag
         switch (config.routes) {
           case 'broker-ui':
             routes.push({
-              path: '', loadChildren: () =>
+              path: '',
+              loadChildren: () =>
                 import('./routes/broker-ui/broker-ui.module').then(
                   (m) => m.BrokerUiModule,
-                )
+                ),
             });
             break;
           case 'connector-ui':
             routes.push({
-              path: '', loadChildren: () =>
+              path: '',
+              loadChildren: () =>
                 import('./routes/connector-ui/connector-ui.module').then(
                   (m) => m.ConnectorUiModule,
-                )
+                ),
             });
             break;
           default:
             throw new Error(`Unhandled PageSet: ${config.routes}`);
         }
-        routes.push({path: '**', component: PageNotFoundComponent})
+        routes.push({path: '**', component: PageNotFoundComponent});
         return routes;
       },
     },

src/app/app.component.ts

@@ -7,7 +7,6 @@ import {FaviconService} from './core/services/favicon.service';
   templateUrl: './app.component.html',
 })
 export class AppComponent implements OnInit {
-
   constructor(
     @Inject(APP_CONFIG) private config: AppConfig,
     private faviconService: FaviconService,

src/app/app.module.ts

@@ -22,12 +22,7 @@ import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {provideAppConfig} from './core/config/app-config-initializer';
-import {provideAppConfigProperty} from './core/config/app-config-injection-utils';
 import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
-import {
-  API_KEY,
-  CONNECTOR_DATAMANAGEMENT_API,
-} from './core/services/api/legacy-managent-api-client';
 
 @NgModule({
   imports: [
@@ -61,10 +56,6 @@ import {
   providers: [
     provideAppConfig(),
 
-    // Provide individual properties of config for better Angular Component APIs
-    provideAppConfigProperty(CONNECTOR_DATAMANAGEMENT_API, 'managementApiUrl'),
-    provideAppConfigProperty(API_KEY, 'managementApiKey'),
-
     {provide: HTTP_INTERCEPTORS, multi: true, useClass: ApiKeyInterceptor},
 
     {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},

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

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Asset} from '../../../core/services/models/asset';
-import {ContractOffer} from '../../../core/services/models/contract-offer';
+import {DataOffer} from '../../../core/services/models/data-offer';
 import {BrokerDataOffer} from '../../../routes/broker-ui/catalog-page/catalog-page/mapping/broker-data-offer';
 import {ContractAgreementCardMapped} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
 import {AssetDetailDialogData} from './asset-detail-dialog-data';
@@ -26,9 +26,9 @@ export class AssetDetailDialogDataService {
     };
   }
 
-  contractOfferDetails(contractOffer: ContractOffer): AssetDetailDialogData {
-    let asset = contractOffer.asset;
-    let contractPolicy = contractOffer.policy;
+  dataOfferDetails(dataOffer: DataOffer): AssetDetailDialogData {
+    let asset = dataOffer.asset;
+    let contractPolicy = dataOffer.contractOffers[0].policy;
 
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(asset, null),
@@ -40,9 +40,9 @@ export class AssetDetailDialogDataService {
     ].filter((it) => it.properties.length);
 
     return {
-      type: 'contract-offer',
-      asset: contractOffer.asset,
-      contractOffer,
+      type: 'data-offer',
+      asset: dataOffer.asset,
+      dataOffer,
       propertyGridGroups,
     };
   }
@@ -51,17 +51,14 @@ export class AssetDetailDialogDataService {
     contractAgreement: ContractAgreementCardMapped,
   ): AssetDetailDialogData {
     let asset = contractAgreement.asset;
-    let contractPolicy = JSON.parse(
-      contractAgreement.contractPolicy.policyJsonLd,
-    );
 
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildContractAgreementGroup(
         contractAgreement,
       ),
       this.assetPropertyGridGroupBuilder.buildPolicyGroup(
         asset,
-        contractPolicy,
+        contractAgreement.contractPolicy,
       ),
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(
         asset,
@@ -89,7 +86,7 @@ export class AssetDetailDialogDataService {
       ),
       this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroup(asset),
       ...dataOffer.contractOffers.map((contractOffer, i) =>
-        this.assetPropertyGridGroupBuilder.buildContractOfferGroup(
+        this.assetPropertyGridGroupBuilder.buildBrokerContractOfferGroup(
           asset,
           contractOffer,
           i,

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

@@ -1,18 +1,18 @@
 import {Asset} from 'src/app/core/services/models/asset';
-import {ContractOffer} from '../../../core/services/models/contract-offer';
+import {DataOffer} from '../../../core/services/models/data-offer';
 import {BrokerDataOffer} from '../../../routes/broker-ui/catalog-page/catalog-page/mapping/broker-data-offer';
 import {ContractAgreementCardMapped} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
 import {PropertyGridGroup} from '../../property-grid/property-grid-group/property-grid-group';
 
 export interface AssetDetailDialogData {
   type:
     | 'asset-details'
-    | 'contract-offer'
+    | 'data-offer'
     | 'contract-agreement'
     | 'broker-data-offer';
   propertyGridGroups: PropertyGridGroup[];
   asset: Asset;
-  contractOffer?: ContractOffer;
+  dataOffer?: DataOffer;
   contractAgreement?: ContractAgreementCardMapped;
   brokerDataOffer?: BrokerDataOffer;
   showDeleteButton?: boolean;

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html

@@ -1,20 +1,22 @@
 <div class="mat-card-header" mat-dialog-title removeClass="mat-dialog-title">
-  <mat-icon *ngIf="data.type === 'asset-details'" class="mat-icon-[40px]">
+  <mat-icon *ngIf="data.type === 'asset-details'" class="mat-card-avatar-icon">
     upload
   </mat-icon>
   <icon-with-online-status
     *ngIf="data.type === 'broker-data-offer'"
     mainIcon="sim_card"
     [onlineStatus]="data.brokerDataOffer!!.connectorOnlineStatus">
   </icon-with-online-status>
-  <mat-icon *ngIf="data.type === 'contract-agreement'" class="mat-icon-[40px]">
+  <mat-icon
+    *ngIf="data.type === 'contract-agreement'"
+    class="mat-card-avatar-icon">
     {{
       data.contractAgreement!!.direction === 'PROVIDING' ? 'upload' : 'download'
     }}
   </mat-icon>
   <contract-offer-icon
-    *ngIf="data.type === 'contract-offer'"
-    [contractOffer]="data.contractOffer!"></contract-offer-icon>
+    *ngIf="data.type === 'data-offer'"
+    [dataOffer]="data.dataOffer!"></contract-offer-icon>
   <div class="mat-card-header-text">
     <div class="mat-card-title">
       {{ asset.name }}
@@ -29,8 +31,8 @@
   <!-- Progress Bar -->
   <mat-progress-bar
     *ngIf="
-      (data.type === 'contract-offer' &&
-        contractNegotiationService.isBusy(data.contractOffer!)) ||
+      (data.type === 'data-offer' &&
+        contractNegotiationService.isBusy(data.dataOffer!.contractOffers[0])) ||
       (data.type === 'contract-agreement' &&
         data.contractAgreement!.isInProgress)
     "
@@ -81,7 +83,7 @@
       </button>
 
       <button
-        *ngIf="data.type === 'contract-offer'"
+        *ngIf="data.type === 'data-offer'"
         mat-raised-button
         color="primary"
         [disabled]="negotiationState != 'ready'"

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

@@ -6,8 +6,8 @@ import {
 } from '@angular/material/dialog';
 import {Observable, Subject, isObservable} from 'rxjs';
 import {filter, finalize, takeUntil} from 'rxjs/operators';
-import {ContractNegotiationService} from '../../../core/services/api/contract-negotiation.service';
 import {EdcApiService} from '../../../core/services/api/edc-api.service';
+import {ContractNegotiationService} from '../../../core/services/contract-negotiation.service';
 import {Asset} from '../../../core/services/models/asset';
 import {NotificationService} from '../../../core/services/notification.service';
 import {ContractAgreementTransferDialogData} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-transfer-dialog/contract-agreement-transfer-dialog-data';
@@ -40,13 +40,16 @@ export class AssetDetailDialogComponent implements OnDestroy {
   loading = false;
 
   get negotiationState(): 'ready' | 'negotiating' | 'negotiated' {
-    const contractOffer = this.data.contractOffer!;
-    if (this.contractNegotiationService.isNegotiated(contractOffer)) {
+    const dataOffer = this.data.dataOffer!;
+    let contractOffer = dataOffer.contractOffers[0];
+    let isNegotiated =
+      this.contractNegotiationService.isNegotiated(contractOffer);
+    if (isNegotiated) {
       return 'negotiated';
-    } else if (this.contractNegotiationService.isBusy(contractOffer)) {
-      return 'negotiating';
     }
-    return 'ready';
+
+    let isBusy = this.contractNegotiationService.isBusy(contractOffer);
+    return isBusy ? 'negotiating' : 'ready';
   }
 
   constructor(
@@ -85,7 +88,10 @@ export class AssetDetailDialogComponent implements OnDestroy {
   }
 
   onNegotiateClick() {
-    this.contractNegotiationService.negotiate(this.data.contractOffer!);
+    this.contractNegotiationService.negotiate(
+      this.data.dataOffer!,
+      this.data.dataOffer!.contractOffers[0],
+    );
   }
 
   onTransferClick() {