feat: allow querying capabilities matching a given qualifier pattern

closes: #188

projects/app/workbench-application-platform/dev-tools-app/src/app/dev-tools/dev-tools-routing.module.ts

@@ -10,12 +10,13 @@
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ApplicationListComponent } from './application-list/application-list.component';
+import { DevToolsComponent } from './dev-tools/dev-tools.component';
 import { ApplicationViewComponent } from './application-view/application-view.component';
 import { OutletCapabilityExecPopupComponent } from './outlet-capability-exec-popup/outlet-capability-exec-popup.component';
 
 const routes: Routes = [
-  {path: 'application-list', component: ApplicationListComponent},
+  {path: '', component: DevToolsComponent},
+  {path: 'application-list', component: DevToolsComponent},
   {path: 'application/:symbolicName', component: ApplicationViewComponent},
   {path: 'view-capability/:id', component: OutletCapabilityExecPopupComponent},
   {path: 'popup-capability/:id', component: OutletCapabilityExecPopupComponent},

projects/app/workbench-application-platform/dev-tools-app/src/app/dev-tools/dev-tools.module.ts

@@ -15,7 +15,7 @@ import { SciAccordionModule, SciFilterFieldModule, SciListModule, SciParamsEnter
 import { DevToolsRoutingModule } from './dev-tools-routing.module';
 import { ReactiveFormsModule } from '@angular/forms';
 import { WorkbenchApplicationModule } from '@scion/workbench-application.angular';
-import { ApplicationListComponent } from './application-list/application-list.component';
+import { DevToolsComponent } from './dev-tools/dev-tools.component';
 import { ApplicationListItemComponent } from './application-list-item/application-list-item.component';
 import { ApplicationViewComponent } from './application-view/application-view.component';
 import { CapabilityAccordionItemComponent } from './capability-accordion-item/capability-accordion-item.component';
@@ -27,7 +27,7 @@ import { OutletCapabilityExecPopupComponent } from './outlet-capability-exec-pop
 
 @NgModule({
   declarations: [
-    ApplicationListComponent,
+    DevToolsComponent,
     ApplicationListItemComponent,
     ApplicationViewComponent,
     CapabilityAccordionItemComponent,

projects/app/workbench-application-platform/dev-tools-app/src/app/dev-tools/dev-tools/dev-tools.component.html

@@ -0,0 +1,54 @@
+<section [class.expanded]="appListPanelExpanded">
+  <header (click)="toggleAppListPanel()">
+    <h2>Application List</h2>
+    <span class="toggle material-icons"></span>
+  </header>
+
+  <sci-viewport class="app-list">
+    <sci-list (filter)="onFilter($event)">
+      <ng-template *ngFor="let manifest of manifests$ | async; trackBy: trackByFn" sciListItem [key]="manifest.symbolicName">
+        <app-application-list-item [manifest]="manifest"></app-application-list-item>
+      </ng-template>
+    </sci-list>
+  </sci-viewport>
+</section>
+
+<section [class.expanded]="capabilityLookupPanelExpanded">
+  <header (click)="toggleCapabilityLookupPanel()">
+    <h2>Lookup Capabilities</h2>
+    <span class="toggle material-icons"></span>
+  </header>
+
+  <sci-viewport class="lookup-capabilities">
+    <input [formControl]="form.get(CAPABILITY_LOOKUP_TYPE)" placeholder="Enter capability type" list="capability-types">
+    <sci-params-enter class="qualifier" [title]="'Qualifier'" [paramsFormArray]="form.get(CAPABILITY_LOOKUP_QUALIFIER)" [addable]="true" [removable]="true"></sci-params-enter>
+    <button class="search" (click)="onLookupClick()" [disabled]="!form.valid">Lookup</button>
+
+    <output *ngIf="capabilityLookupResult$ | async as capabilities">
+      <h3>Capabilities matching the type and qualifier:</h3>
+      <sci-accordion *ngIf="capabilities.length else notFound">
+        <ng-container *ngFor="let capability of capabilities">
+          <ng-template sciAccordionItem [panel]="panel">
+            <app-capability-accordion-item [capability]="capability"></app-capability-accordion-item>
+          </ng-template>
+
+          <ng-template #panel>
+            <app-capability-accordion-panel [capability]="capability"></app-capability-accordion-panel>
+          </ng-template>
+        </ng-container>
+      </sci-accordion>
+      <ng-template #notFound>
+        No capabilities found.
+      </ng-template>
+    </output>
+  </sci-viewport>
+</section>
+
+<datalist id="capability-types">
+  <option [value]="PlatformCapabilityTypes.View">
+  <option [value]="PlatformCapabilityTypes.Popup">
+  <option [value]="PlatformCapabilityTypes.Activity">
+  <option [value]="PlatformCapabilityTypes.MessageBox">
+  <option [value]="PlatformCapabilityTypes.Notification">
+  <option [value]="PlatformCapabilityTypes.ManifestRegistry">
+</datalist>

projects/app/workbench-application-platform/dev-tools-app/src/app/dev-tools/dev-tools/dev-tools.component.scss

@@ -0,0 +1,79 @@
+@import 'common';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: app-padding();
+
+  > section {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &:not(:first-of-type) {
+      margin-top: 1.75em;
+    }
+
+    &:not(.expanded) {
+      flex: none;
+    }
+
+    > header {
+      flex: none;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+
+      > h2 {
+        flex: auto;
+        font-size: 1.25em;
+        margin-top: 0;
+      }
+
+      > span.toggle {
+        flex: none;
+        margin-left: .5em;
+        user-select: none;
+
+        &::after {
+          content: 'expand_more'
+        }
+      }
+    }
+
+    &.expanded > header > span.toggle::after {
+      content: 'expand_less';
+    }
+
+    &:not(.expanded) > sci-viewport {
+      height: 0;
+    }
+
+    > sci-viewport.app-list, sci-viewport.lookup-capabilities {
+      flex: auto;
+
+      &.lookup-capabilities {
+        --grid-template-rows: min-content min-content min-content 1fr;
+        --gap: .5em 0;
+
+        output {
+          flex: auto;
+          margin-top: 1em;
+          display: flex;
+          flex-direction: column;
+
+          > h3 {
+            flex: none;
+          }
+
+          > sci-accordion {
+            flex: auto;
+            min-height: 10em;
+          }
+        }
+      }
+    }
+  }
+}

projects/app/workbench-application-platform/dev-tools-app/src/app/dev-tools/dev-tools/dev-tools.component.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+import { Component, TrackByFunction } from '@angular/core';
+import { BehaviorSubject, combineLatest, MonoTypeOperatorFunction, Observable, OperatorFunction } from 'rxjs';
+import { PlatformCapabilityTypes, Capability, Manifest, ManifestRegistryService, Qualifier } from '@scion/workbench-application.core';
+import { map } from 'rxjs/operators';
+import { PARAM_NAME, PARAM_VALUE, SciParamsEnterComponent, toFilterRegExp } from '@scion/app/common';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+const CAPABILITY_LOOKUP_TYPE = 'type';
+const CAPABILITY_LOOKUP_QUALIFIER = 'qualifier';
+
+@Component({
+  selector: 'app-dev-tools',
+  templateUrl: './dev-tools.component.html',
+  styleUrls: ['./dev-tools.component.scss'],
+})
+export class DevToolsComponent {
+
+  public readonly CAPABILITY_LOOKUP_TYPE = CAPABILITY_LOOKUP_TYPE;
+  public readonly CAPABILITY_LOOKUP_QUALIFIER = CAPABILITY_LOOKUP_QUALIFIER;
+
+  public readonly PlatformCapabilityTypes = PlatformCapabilityTypes;
+
+  public form: FormGroup;
+  public manifests$: Observable<Manifest[]>;
+
+  public appListPanelExpanded = true;
+  public capabilityLookupPanelExpanded = false;
+  public capabilityLookupResult$: Observable<Capability[]>;
+
+  private _appListFilter$ = new BehaviorSubject<string>(null);
+
+  constructor(formBuilder: FormBuilder, private _manifestRegistryService: ManifestRegistryService) {
+    this.form = formBuilder.group({
+      [CAPABILITY_LOOKUP_TYPE]: formBuilder.control([], Validators.required),
+      [CAPABILITY_LOOKUP_QUALIFIER]: formBuilder.array([
+        formBuilder.group({
+          [PARAM_NAME]: formBuilder.control('*'),
+          [PARAM_VALUE]: formBuilder.control('*'),
+        })
+      ]),
+    });
+
+    this.manifests$ = combineLatest([this._appListFilter$, this._manifestRegistryService.manifests$])
+      .pipe(
+        filterManifests(),
+        sortManifests(),
+      );
+  }
+
+  public onLookupClick(): void {
+    const type = this.form.get(CAPABILITY_LOOKUP_TYPE).value;
+    const qualifier: Qualifier = SciParamsEnterComponent.toParams(this.form.get(CAPABILITY_LOOKUP_QUALIFIER) as FormArray);
+    this.capabilityLookupResult$ = this._manifestRegistryService.capabilities$(type, qualifier);
+  }
+
+  public toggleAppListPanel(): void {
+    this.appListPanelExpanded = !this.appListPanelExpanded;
+  }
+
+  public toggleCapabilityLookupPanel(): void {
+    this.capabilityLookupPanelExpanded = !this.capabilityLookupPanelExpanded;
+  }
+
+  public onFilter(filterText: string): void {
+    this._appListFilter$.next(filterText);
+  }
+
+  public trackByFn: TrackByFunction<Manifest> = (index: number, manifest: Manifest): any => {
+    return manifest.symbolicName;
+  };
+}
+
+function filterManifests(): OperatorFunction<[string, Manifest[]], Manifest[]> {
+  return map(([filter, manifests]: [string, Manifest[]]): Manifest[] => {
+    if (!filter) {
+      return manifests;
+    }
+
+    const filterRegExp = toFilterRegExp(filter);
+    return manifests.filter(manifest => filterRegExp.test(manifest.name) || filterRegExp.test(manifest.symbolicName));
+  });
+}
+
+function sortManifests(): MonoTypeOperatorFunction<Manifest[]> {
+  return map((manifests: Manifest[]): Manifest[] => [...manifests].sort((mf1, mf2) => mf1.name.localeCompare(mf2.name)));
+}

projects/app/workbench-application-platform/dev-tools-app/src/assets/manifest.json

@@ -28,6 +28,19 @@
         "title": "Application manifests"
       }
     },
+    {
+      "type": "view",
+      "qualifier": {
+        "entity": "dev-tools"
+      },
+      "private": false,
+      "description": "Provides DevTools for workbench application platform.",
+      "properties": {
+        "path": "dev-tools",
+        "title": "DevTools",
+        "heading": "Workbench Application Platform"
+      }
+    },
     {
       "type": "view",
       "qualifier": {