feat: broker can initialize connector endpoint filters from query par…

…ams (#683)

CHANGELOG.md

@@ -18,6 +18,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Minor
 
+- Broker UI: Added query params for the connector endpoints filter
+
 #### Patch
 
 #### Deployment Migration Notes

src/app/core/services/api/fake-backend/broker-fake-impl/catalog-fake-impl.ts

@@ -112,6 +112,20 @@ export const getCatalogPage = (query: CatalogPageQuery): CatalogPageResult => {
             {id: '', title: ''},
           ],
         },
+        {
+          id: 'connectorEndpoint',
+          title: 'Connector',
+          values: [
+            {
+              id: 'https://example-connector/api/dsp',
+              title: 'https://example-connector/api/dsp',
+            },
+            {
+              id: 'https://example-connector2/api/dsp',
+              title: 'https://example-connector2/api/dsp',
+            },
+          ],
+        },
       ],
     },
     paginationMetadata: {

src/app/routes/broker-ui/catalog-page/catalog-page/catalog-page.component.ts

@@ -1,6 +1,7 @@
 import {Component, HostBinding, OnDestroy, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {PageEvent} from '@angular/material/paginator';
+import {ActivatedRoute, Params, Router} from '@angular/router';
 import {BehaviorSubject, Subject} from 'rxjs';
 import {filter, map, takeUntil} from 'rxjs/operators';
 import {Store} from '@ngxs/store';
@@ -14,6 +15,7 @@ import {
 } from '../../../../component-library/catalog/view-selection/view-mode-enum';
 import {BrokerServerApiService} from '../../../../core/services/api/broker-server-api.service';
 import {FilterBoxItem} from '../filter-box/filter-box-item';
+import {FilterBoxModel} from '../filter-box/filter-box-model';
 import {FilterBoxVisibleState} from '../filter-box/filter-box-visible-state';
 import {CatalogActiveFilterPill} from '../state/catalog-active-filter-pill';
 import {CatalogPage} from '../state/catalog-page-actions';
@@ -50,10 +52,13 @@ export class CatalogPageComponent implements OnInit, OnDestroy {
     private assetDetailDialogService: AssetDetailDialogService,
     private brokerServerApiService: BrokerServerApiService,
     private store: Store,
+    private route: ActivatedRoute,
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
     this.store.dispatch(CatalogPage.Reset);
+    this.setConnectorEndpointFiltersFromQueryParamsOnce();
     this.startListeningToStore();
     this.startEmittingSearchText();
     this.startEmittingSortBy();
@@ -98,6 +103,49 @@ export class CatalogPageComponent implements OnInit, OnDestroy {
       });
   }
 
+  private setConnectorEndpointFiltersFromQueryParamsOnce() {
+    const connectorEndpoints = this.parseConnectorEndpoints(
+      this.route.snapshot.queryParams,
+    );
+    if (!connectorEndpoints?.length) {
+      return;
+    }
+
+    this.store.dispatch(
+      new CatalogPage.AddFilterBox(
+        this.buildConnectorEndpointFilterBoxModel(connectorEndpoints),
+      ),
+    );
+    this.expandedFilterId = 'connectorEndpoint';
+    // remove query params from url
+    this.router.navigate([]);
+  }
+
+  private parseConnectorEndpoints(params: Params): string[] {
+    if (!('connectorEndpoint' in params)) {
+      return [];
+    }
+    const endpoints = params.connectorEndpoint;
+    return Array.isArray(endpoints) ? [...new Set(endpoints)] : [endpoints];
+  }
+
+  private buildConnectorEndpointFilterBoxModel(
+    endpoints: string[],
+  ): FilterBoxModel {
+    const items: FilterBoxItem[] = endpoints.map((x) => ({
+      type: 'ITEM',
+      id: x,
+      label: x,
+    }));
+    return {
+      id: 'connectorEndpoint',
+      title: 'Connector',
+      selectedItems: items,
+      availableItems: items,
+      searchText: '',
+    };
+  }
+
   onDataOfferClick(dataOffer: CatalogDataOfferMapped) {
     const data =
       this.assetDetailDialogDataService.brokerDataOfferDetails(dataOffer);

src/app/routes/broker-ui/catalog-page/state/catalog-page-actions.ts

@@ -1,5 +1,6 @@
 import {CatalogPageSortingItem} from '@sovity.de/broker-server-client';
 import {FilterBoxItem} from '../filter-box/filter-box-item';
+import {FilterBoxModel} from '../filter-box/filter-box-model';
 import {CatalogActiveFilterPill} from './catalog-active-filter-pill';
 
 export namespace CatalogPage {
@@ -35,6 +36,12 @@ export namespace CatalogPage {
     constructor(public sorting: CatalogPageSortingItem | null) {}
   }
 
+  export class AddFilterBox {
+    static readonly type = `[${tag}] Add Filter Box`;
+
+    constructor(public filterBox: FilterBoxModel) {}
+  }
+
   export class UpdateFilterSelectedItems {
     static readonly type = `[${tag}] Update a Filter's selected Items`;
 

src/app/routes/broker-ui/catalog-page/state/catalog-page-state.ts

@@ -102,6 +102,25 @@ export class CatalogPageState implements OnDestroy {
     ctx.dispatch(CatalogPage.NeedFetch);
   }
 
+  @Action(CatalogPage.AddFilterBox)
+  onAddFilterBox(ctx: Ctx, action: CatalogPage.AddFilterBox) {
+    const state = ctx.getState();
+    if (action.filterBox.id in state.filters) {
+      return;
+    }
+    ctx.setState(
+      this._recalculateActiveFilterItems({
+        ...state,
+        filters: {
+          ...state.filters,
+          [action.filterBox.id]: FilterBoxVisibleState.buildVisibleState(
+            action.filterBox,
+          ),
+        },
+      }),
+    );
+  }
+
   @Action(CatalogPage.UpdateFilterSelectedItems)
   onUpdateFilterSelectedItems(
     ctx: Ctx,