feat(opsserver,web): replace the Angular UI and REST management layer with a TypedRequest-based ops server and bundled web frontend

ts_web/elements/sg-view-tokens.ts

@@ -0,0 +1,72 @@
+import * as appstate from '../appstate.js';
+import * as shared from './shared/index.js';
+import {
+  css,
+  cssManager,
+  customElement,
+  DeesElement,
+  html,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('sg-view-tokens')
+export class SgViewTokens extends DeesElement {
+  @state()
+  accessor tokensState: appstate.ITokensState = { tokens: [] };
+
+  @state()
+  accessor organizationsState: appstate.IOrganizationsState = {
+    organizations: [],
+    currentOrg: null,
+    repositories: [],
+    members: [],
+  };
+
+  constructor() {
+    super();
+    const tokenSub = appstate.tokensStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.tokensState = s;
+      });
+    this.rxSubscriptions.push(tokenSub);
+
+    const orgSub = appstate.organizationsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.organizationsState = s;
+      });
+    this.rxSubscriptions.push(orgSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await appstate.tokensStatePart.dispatchAction(appstate.fetchTokensAction, {});
+    await appstate.organizationsStatePart.dispatchAction(appstate.fetchOrganizationsAction, null);
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <sg-tokens-view
+        .tokens="${this.tokensState.tokens}"
+        .organizations="${this.organizationsState.organizations}"
+        @create="${(e: CustomEvent) => this.createToken(e.detail)}"
+        @revoke="${(e: CustomEvent) => this.revokeToken(e.detail.tokenId)}"
+      ></sg-tokens-view>
+    `;
+  }
+
+  private async createToken(detail: any) {
+    await appstate.tokensStatePart.dispatchAction(appstate.createTokenAction, detail);
+  }
+
+  private async revokeToken(tokenId: string) {
+    await appstate.tokensStatePart.dispatchAction(appstate.revokeTokenAction, { tokenId });
+  }
+}