feat: migrate dashboard to API Wrapper, move some asset properties to…

… backend (#506)

.env.local-dev

@@ -3,20 +3,8 @@
 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_MANAGEMENT_API_URL=http://edc.fake-backend
+EDC_UI_MANAGEMENT_API_KEY=no-api-key-required-in-local-dev
 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/api/dsp
-
-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
-EDC_UI_IDS_DESCRIPTION=This is an example sovity EDC UI in local dev.
-EDC_UI_CURATOR_URL=https://example.com
-EDC_UI_CURATOR_ORGANIZATION_NAME=Example GmbH
-EDC_UI_DAPS_OAUTH_TOKEN_URL=https://example-daps.com/token
-EDC_UI_DAPS_OAUTH_JWKS_URL=https://example-daps.com/jwks.json
-EDC_UI_MAINTAINER_URL=https://example.com
-EDC_UI_MAINTAINER_ORGANIZATION_NAME=Example GmbH

CHANGELOG.md

@@ -14,25 +14,46 @@ the detailed section referring to by linking pull requests or issues.
 
 ### Detailed Changes
 
-#### Added
+#### Major
+
+- Switched to semantic versioning
+- Migrated transfer history page to the api wrapper
+- Migrated contract definition page to the api wrapper
+- Migrated policy definition page to the api wrapper
+- Migrated asset page to the api wrapper
+- Migrated dashboard page to the api wrapper
+
+#### Minor
 
 - Added custom 404 pages to connector and broker ui
+- New Asset Property "Participant ID"
 
-#### Fixed
+#### Patch
 
 - Removed 404-causing login polling from broker UI
-- Migrated transfer history page to api wrapper
-- Migrated contract definition page to api wrapper
-- Migrated policy definition page to api wrapper
-- Migrated asset page to api wrapper
-- Broker: Fixed popularity not logged when clicking on a data offer.
+- Renamed button from cancel to close in json-dialogs
+- Broker: Fixed popularity not logged when clicking on a data offer
 - Broker: Fixed missing name in legal notice
 
-#### Removed
-
-#### Fixed
-
-- Renamed button from cancel to close in json-dialogs
+#### Deployment Migration Notes
+
+- The following ENV Vars were changed:
+  - ~~`EDC_UI_DATA_MANAGEMENT_API_URL`~~ became `EDC_UI_MANAGEMENT_API_URL`
+  - ~~`EDC_UI_DATA_MANAGEMENT_API_KEY`~~ became `EDC_UI_MANAGEMENT_API_KEY`
+- The following ENV Vars were removed and should not be specified anymore:
+  - `EDC_UI_CONNECTOR_ID`
+  - `EDC_UI_CONNECTOR_NAME`
+  - `EDC_UI_CURATOR_ORGANIZATION_NAME`
+  - `EDC_UI_CURATOR_URL`
+  - `EDC_UI_DAPS_OAUTH_JWKS_URL`
+  - `EDC_UI_DAPS_OAUTH_TOKEN_URL`
+  - `EDC_UI_IDS_DESCRIPTION`
+  - `EDC_UI_IDS_ID`
+  - `EDC_UI_IDS_TITLE`
+  - `EDC_UI_MAINTAINER_ORGANIZATION_NAME`
+  - `EDC_UI_MAINTAINER_URL`
+  - `EDC_UI_ASSET_PROP_ORIGINATOR_ORGANIZATION`
+  - `EDC_UI_ASSET_PROP_ORIGINATOR`
 
 ## [v0.0.1-milestone-8-sovity12] 12.07.2023
 
@@ -191,7 +212,7 @@ information is now displayed.
 
 #### Changed
 
-- Marked `EDC_UI_DATA_MANAGEMENT_API_URL` as deprecated in favor of
+- Marked `EDC_UI_MANAGEMENT_API_URL` as deprecated in favor of
   `EDC_UI_MANAGEMENT_API_URL`.
 - Marked `EDC_UI_DATA_MANAGEMENT_API_KEY` as deprecated in favor of
   `EDC_UI_MANAGEMENT_API_KEY`.

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.20230926.151824-main-fdf8eb66",
+    "@sovity.de/edc-client": "0.20231006.85703-main-5ece112d",
     "clean-deep": "^3.4.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",

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

@@ -27,7 +27,7 @@ export class AssetDetailDialogDataService {
   }
 
   dataOfferDetails(dataOffer: DataOffer): AssetDetailDialogData {
-    let asset = dataOffer.asset;
+    const asset = dataOffer.asset;
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(asset, null),
       this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroup(asset),
@@ -44,15 +44,15 @@ export class AssetDetailDialogDataService {
   contractAgreementDetails(
     contractAgreement: ContractAgreementCardMapped,
   ): AssetDetailDialogData {
-    let asset = contractAgreement.asset;
+    const asset = contractAgreement.asset;
 
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildContractAgreementGroup(
         contractAgreement,
       ),
       this.assetPropertyGridGroupBuilder.buildContractPolicyGroup(
         contractAgreement.contractPolicy,
-        asset.name,
+        asset.title,
       ),
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(
         asset,
@@ -70,7 +70,7 @@ export class AssetDetailDialogDataService {
   }
 
   brokerDataOfferDetails(dataOffer: BrokerDataOffer): AssetDetailDialogData {
-    let asset = dataOffer.asset;
+    const asset = dataOffer.asset;
 
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildBrokerDataOfferGroup(dataOffer),

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

@@ -19,7 +19,7 @@
     [dataOffer]="data.dataOffer!"></contract-offer-icon>
   <div class="mat-card-header-text">
     <div class="mat-card-title">
-      {{ asset.name }}
+      {{ asset.title }}
     </div>
     <div class="mat-card-subtitle">
       {{ asset.creatorOrganizationName }}

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

@@ -108,10 +108,7 @@ export class AssetDetailDialogComponent implements OnDestroy {
   }
 
   private confirmDelete(): Observable<boolean> {
-    const dialogData = ConfirmDialogModel.forDelete(
-      'asset',
-      `"${this.asset.name}"`,
-    );
+    const dialogData = ConfirmDialogModel.forDelete('asset', this.asset.title);
     const ref = this.matDialog.open(ConfirmationDialogComponent, {
       maxWidth: '20%',
       data: dialogData,

src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts

@@ -66,6 +66,11 @@ export class AssetPropertyGridGroupBuilder {
         label: 'Organization',
         ...this.propertyGridUtils.guessValue(asset.creatorOrganizationName),
       },
+      {
+        icon: 'category',
+        label: 'Participant ID',
+        ...this.propertyGridUtils.guessValue(asset.participantId),
+      },
       {
         icon: 'category',
         label: 'Content Type',
@@ -154,15 +159,15 @@ export class AssetPropertyGridGroupBuilder {
     total: number,
   ) {
     const groupLabel = `Contract Offer ${total > 1 ? i + 1 : ''}`;
-    let properties: PropertyGridField[] = [
+    const properties: PropertyGridField[] = [
       {
         icon: 'policy',
         label: 'Contract Policy',
         text: 'Show Policy Details',
         onclick: () =>
           this.jsonDialogService.showJsonDetailDialog({
             title: `${groupLabel} Contract Policy)`,
-            subtitle: asset.name,
+            subtitle: asset.title,
             icon: 'policy',
             objectForJson: JSON.parse(
               contractOffer.contractPolicy.legacyPolicy ?? 'null',
@@ -186,7 +191,7 @@ export class AssetPropertyGridGroupBuilder {
   }
 
   buildContractAgreementGroup(contractAgreement: ContractAgreementCardMapped) {
-    let properties: PropertyGridField[] = [
+    const properties: PropertyGridField[] = [
       {
         icon: 'category',
         label: 'Signed',

src/app/component-library/catalog/asset-detail-dialog/policy-property-field-builder.ts

@@ -16,8 +16,9 @@ export class PolicyPropertyFieldBuilder {
     policyDetailDialogTitle: string,
     policyDetailDialogSubtitle: string,
   ): PropertyGridField[] {
-    let constraints = this.policyCardBuilder.buildPolicyCardConstraints(policy);
-    let irregularities = policy.errors;
+    const constraints =
+      this.policyCardBuilder.buildPolicyCardConstraints(policy);
+    const irregularities = policy.errors;
     return [
       {
         icon: 'policy',

src/app/component-library/catalog/contract-offer-mini-list/contract-offer-mini-list.component.html

@@ -23,7 +23,9 @@
     [columns]="3"
     [props]="contractOffer.properties"></property-grid>
 
-  <div *ngIf="contractOffers.length > 1" class="flex flex-row mt-[15px]">
+  <div
+    *ngIf="contractOffers.length > 1"
+    class="flex flex-row justify-end mt-[15px]">
     <button
       mat-raised-button
       color="primary"

src/app/component-library/catalog/data-offer-cards/data-offer-cards.component.html

@@ -9,7 +9,7 @@
           class="link"
           href="javascript:void(0)"
           (click)="dataOfferClick.emit(dataOffer)">
-          {{ asset.name }}
+          {{ asset.title }}
         </a>
       </mat-card-title>
       <mat-card-subtitle>{{ asset.creatorOrganizationName }}</mat-card-subtitle>

src/app/component-library/data-address/data-address-type-select/data-address-type-select-items.ts

@@ -4,7 +4,7 @@ import {DataAddressTypeSelectMode} from './data-address-type-select-mode';
 export const dataAddressTypeSelectItems = (
   type: DataAddressTypeSelectMode,
 ): DataAddressTypeSelectItem[] => {
-  let items: DataAddressTypeSelectItem[] = [
+  const items: DataAddressTypeSelectItem[] = [
     {
       id: 'Http',
       label: 'REST-API Endpoint',

src/app/core/config/app-config-initializer.ts

@@ -9,7 +9,7 @@ let appConfig: AppConfig | null = null;
 export async function loadAppConfig(): Promise<AppConfig> {
   const merger = new AppConfigMerger();
   const builder = new AppConfigBuilder();
-  const fetcher = new AppConfigFetcher(merger, builder);
+  const fetcher = new AppConfigFetcher(merger);
   return fetcher
     .fetchEffectiveConfig('/assets/config/app-config.json', null)
     .then((json) => builder.buildAppConfig(json))

src/app/core/config/app-config-properties.ts

@@ -17,7 +17,7 @@ export const AppConfigProperties = {
    *
    * This allows an EDC Backend Extension to provide EDC UI configuration
    *
-   * If this URL is relative, it will be appended to the {@link AppConfigProperties.dataManagementApiUrl}.
+   * If this URL is relative, it will be appended to the {@link AppConfigProperties.managementApiUrl}.
    *
    * The JSON should be a {@link Record<string, string>}
    */
@@ -45,106 +45,13 @@ export const AppConfigProperties = {
    */
   logoutUrl: 'EDC_UI_LOGOUT_URL',
 
-  /**
-   * Current Connector Endpoint.
-   * When creating assets, this is added as asset property.
-   */
-  connectorEndpoint: 'EDC_UI_CONNECTOR_ENDPOINT',
-
   /**
    * Pre-configured Other Connector Endpoints to be used in catalog browser, comma separated.
    */
   catalogUrls: 'EDC_UI_CATALOG_URLS',
 
-  /**
-   * Connector ID, usually https://hostname of EDC backend.
-   *
-   * E.g. contained in DAT Claim "referringConnector".
-   * And will be used to realize the connector restricted policy.
-   */
-  connectorId: 'EDC_UI_CONNECTOR_ID',
-
-  /**
-   * Connector Name, e.g. used by broker extension
-   */
-  connectorName: 'EDC_UI_CONNECTOR_NAME',
-
-  /**
-   * Connector IDS ID, e.g. urn:connector:sth
-   */
-  connectorIdsId: 'EDC_UI_IDS_ID',
-
-  /**
-   * Connector Title, e.g. "Sovity Test Connector 001"
-   */
-  connectorIdsTitle: 'EDC_UI_IDS_TITLE',
-
-  /**
-   * Connector Description Text
-   */
-  connectorIdsDescription: 'EDC_UI_IDS_DESCRIPTION',
-
-  /**
-   * DAPS OAUTH Token URL
-   */
-  dapsOauthTokenUrl: 'EDC_UI_DAPS_OAUTH_TOKEN_URL',
-
-  /**
-   * DAPS OAUTH JWKS URL
-   */
-  dapsOauthJwksUrl: 'EDC_UI_DAPS_OAUTH_JWKS_URL',
-
-  /**
-   * Curator Organization Homepage
-   */
-  curatorUrl: 'EDC_UI_CURATOR_URL',
-
-  /**
-   * Curator Organization Name.
-   * When creating assets, this is added as asset property.
-   */
-  curatorOrganizationName: 'EDC_UI_CURATOR_ORGANIZATION_NAME',
-
-  /**
-   * Maintainer Organization Homepage
-   */
-  maintainerUrl: 'EDC_UI_MAINTAINER_URL',
-
-  /**
-   * Maintainer Organization Name.
-   */
-  maintainerOrganizationName: 'EDC_UI_MAINTAINER_ORGANIZATION_NAME',
-
   /**
    * Whether to use the fake backend (local development).
    */
   useFakeBackend: 'EDC_UI_USE_FAKE_BACKEND',
-
-  /**
-   * Same as {@link connectorEndpoint}.
-   *
-   * @deprecated Use {@link connectorEndpoint} instead.
-   */
-  _legacyConnectorEndpoint: 'EDC_UI_ASSET_PROP_ORIGINATOR',
-
-  /**
-   * Same as {@link curatorOrganizationName}.
-   *
-   * @deprecated Use {@link curatorOrganizationName} instead.
-   */
-  _legacyCuratorOrganizationName: 'EDC_UI_ASSET_PROP_ORIGINATOR_ORGANIZATION',
-
-  /**
-   * Same as {@link managementApiUrl}.
-   *
-   * @deprecated Use {@link managementApiUrl} instead.
-   */
-  _legacyManagementApiUrl: 'EDC_UI_DATA_MANAGEMENT_API_URL',
-
-  /**
-   * Same as {@link managementApiKey}.
-   *
-   * @deprecated Use {@link managementApiKey} instead.
-   */
-  _legacyManagementApiKey: 'EDC_UI_DATA_MANAGEMENT_API_KEY',
 };