feat(opsserver): introduce OpsServer (TypedRequest API) and new lightweight web UI; replace legacy Angular UI and add typed interfaces

ts_web/elements/ob-view-registries.ts

@@ -0,0 +1,84 @@
+import * as plugins from '../plugins.js';
+import * as shared from './shared/index.js';
+import * as appstate from '../appstate.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('ob-view-registries')
+export class ObViewRegistries extends DeesElement {
+  @state()
+  accessor registriesState: appstate.IRegistriesState = {
+    tokens: [],
+    registryStatus: null,
+  };
+
+  @state()
+  accessor currentTab: 'onebox' | 'external' = 'onebox';
+
+  constructor() {
+    super();
+
+    const registriesSub = appstate.registriesStatePart
+      .select((s) => s)
+      .subscribe((newState) => {
+        this.registriesState = newState;
+      });
+    this.rxSubscriptions.push(registriesSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css``,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await appstate.registriesStatePart.dispatchAction(
+      appstate.fetchRegistryTokensAction,
+      null,
+    );
+  }
+
+  public render(): TemplateResult {
+    switch (this.currentTab) {
+      case 'external':
+        return this.renderExternalView();
+      default:
+        return this.renderOneboxView();
+    }
+  }
+
+  private renderOneboxView(): TemplateResult {
+    return html`
+      <ob-sectionheading>Registries</ob-sectionheading>
+      <sz-registry-advertisement
+        .status=${'running'}
+        .registryUrl=${'localhost:5000'}
+        @manage-tokens=${() => {
+          // tokens are managed via the tokens view
+          appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'tokens' });
+        }}
+      ></sz-registry-advertisement>
+    `;
+  }
+
+  private renderExternalView(): TemplateResult {
+    return html`
+      <ob-sectionheading>External Registries</ob-sectionheading>
+      <sz-registry-external-view
+        .registries=${[]}
+        @add=${(e: CustomEvent) => {
+          console.log('Add external registry:', e.detail);
+        }}
+      ></sz-registry-external-view>
+    `;
+  }
+}