@serve.zone/dcrouter 13.0.4 → 13.0.6

package/ts_web/elements/ops-view-security.ts

@@ -192,7 +192,7 @@ export class OpsViewSecurity extends DeesElement {
 
   public render() {
     return html`
-      <ops-sectionheading>Security</ops-sectionheading>
+      <dees-heading level="2">Security</dees-heading>
       
       <div class="tabs">
         <button 

package/ts_web/elements/ops-view-sourceprofiles.ts

@@ -64,7 +64,7 @@ export class OpsViewSourceProfiles extends DeesElement {
     ];
 
     return html`
-      <ops-sectionheading>Source Profiles</ops-sectionheading>
+      <dees-heading level="2">Source Profiles</dees-heading>
       <div class="profilesContainer">
         <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
         <dees-table

package/ts_web/elements/ops-view-targetprofiles.ts

@@ -77,7 +77,7 @@ export class OpsViewTargetProfiles extends DeesElement {
     ];
 
     return html`
-      <ops-sectionheading>Target Profiles</ops-sectionheading>
+      <dees-heading level="2">Target Profiles</dees-heading>
       <div class="profilesContainer">
         <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
         <dees-table
@@ -148,17 +148,27 @@ export class OpsViewTargetProfiles extends DeesElement {
     `;
   }
 
+  private getRouteCandidates() {
+    const routeState = appstate.routeManagementStatePart.getState();
+    const routes = routeState?.mergedRoutes || [];
+    return routes
+      .filter((mr) => mr.route.name)
+      .map((mr) => ({ viewKey: mr.route.name! }));
+  }
+
   private async showCreateProfileDialog() {
     const { DeesModal } = await import('@design.estate/dees-catalog');
+    const routeCandidates = this.getRouteCandidates();
+
     DeesModal.createAndShow({
       heading: 'Create Target Profile',
       content: html`
         <dees-form>
           <dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
           <dees-input-text .key=${'description'} .label=${'Description'}></dees-input-text>
-          <dees-input-text .key=${'domains'} .label=${'Domains (comma-separated, e.g. *.example.com)'} ></dees-input-text>
-          <dees-input-text .key=${'targets'} .label=${'Targets (comma-separated host:port, e.g. 10.0.0.1:443)'}></dees-input-text>
-          <dees-input-text .key=${'routeRefs'} .label=${'Route Refs (comma-separated route names/IDs)'}></dees-input-text>
+          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets (host:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true}></dees-input-list>
+          <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true}></dees-input-list>
         </dees-form>
       `,
       menuOptions: [
@@ -172,30 +182,26 @@ export class OpsViewTargetProfiles extends DeesElement {
             const data = await form.collectFormData();
             if (!data.name) return;
 
-            const domains = data.domains
-              ? String(data.domains).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : undefined;
-            const targets = data.targets
-              ? String(data.targets).split(',').map((s: string) => {
-                  const trimmed = s.trim();
-                  const lastColon = trimmed.lastIndexOf(':');
-                  if (lastColon === -1) return null;
-                  return {
-                    host: trimmed.substring(0, lastColon),
-                    port: parseInt(trimmed.substring(lastColon + 1), 10),
-                  };
-                }).filter((t): t is { host: string; port: number } => t !== null && !isNaN(t.port))
-              : undefined;
-            const routeRefs = data.routeRefs
-              ? String(data.routeRefs).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : undefined;
+            const domains: string[] = Array.isArray(data.domains) ? data.domains : [];
+            const targetStrings: string[] = Array.isArray(data.targets) ? data.targets : [];
+            const targets = targetStrings
+              .map((s: string) => {
+                const lastColon = s.lastIndexOf(':');
+                if (lastColon === -1) return null;
+                return {
+                  host: s.substring(0, lastColon),
+                  port: parseInt(s.substring(lastColon + 1), 10),
+                };
+              })
+              .filter((t): t is { host: string; port: number } => t !== null && !isNaN(t.port));
+            const routeRefs: string[] = Array.isArray(data.routeRefs) ? data.routeRefs : [];
 
             await appstate.targetProfilesStatePart.dispatchAction(appstate.createTargetProfileAction, {
               name: String(data.name),
               description: data.description ? String(data.description) : undefined,
-              domains,
-              targets,
-              routeRefs,
+              domains: domains.length > 0 ? domains : undefined,
+              targets: targets.length > 0 ? targets : undefined,
+              routeRefs: routeRefs.length > 0 ? routeRefs : undefined,
             });
             modalArg.destroy();
           },
@@ -205,20 +211,22 @@ export class OpsViewTargetProfiles extends DeesElement {
   }
 
   private async showEditProfileDialog(profile: interfaces.data.ITargetProfile) {
-    const currentDomains = profile.domains?.join(', ') ?? '';
-    const currentTargets = profile.targets?.map(t => `${t.host}:${t.port}`).join(', ') ?? '';
-    const currentRouteRefs = profile.routeRefs?.join(', ') ?? '';
+    const currentDomains = profile.domains || [];
+    const currentTargets = profile.targets?.map(t => `${t.host}:${t.port}`) || [];
+    const currentRouteRefs = profile.routeRefs || [];
 
     const { DeesModal } = await import('@design.estate/dees-catalog');
+    const routeCandidates = this.getRouteCandidates();
+
     DeesModal.createAndShow({
       heading: `Edit Profile: ${profile.name}`,
       content: html`
         <dees-form>
           <dees-input-text .key=${'name'} .label=${'Name'} .value=${profile.name}></dees-input-text>
           <dees-input-text .key=${'description'} .label=${'Description'} .value=${profile.description || ''}></dees-input-text>
-          <dees-input-text .key=${'domains'} .label=${'Domains (comma-separated, e.g. *.example.com)'} .value=${currentDomains}></dees-input-text>
-          <dees-input-text .key=${'targets'} .label=${'Targets (comma-separated host:port, e.g. 10.0.0.1:443)'} .value=${currentTargets}></dees-input-text>
-          <dees-input-text .key=${'routeRefs'} .label=${'Route Refs (comma-separated route names/IDs)'} .value=${currentRouteRefs}></dees-input-text>
+          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true} .value=${currentDomains}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets (host:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true} .value=${currentTargets}></dees-input-list>
+          <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true} .value=${currentRouteRefs}></dees-input-list>
         </dees-form>
       `,
       menuOptions: [
@@ -231,24 +239,19 @@ export class OpsViewTargetProfiles extends DeesElement {
             if (!form) return;
             const data = await form.collectFormData();
 
-            const domains = data.domains
-              ? String(data.domains).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : [];
-            const targets = data.targets
-              ? String(data.targets).split(',').map((s: string) => {
-                  const trimmed = s.trim();
-                  if (!trimmed) return null;
-                  const lastColon = trimmed.lastIndexOf(':');
-                  if (lastColon === -1) return null;
-                  return {
-                    host: trimmed.substring(0, lastColon),
-                    port: parseInt(trimmed.substring(lastColon + 1), 10),
-                  };
-                }).filter((t): t is { host: string; port: number } => t !== null && !isNaN(t.port))
-              : [];
-            const routeRefs = data.routeRefs
-              ? String(data.routeRefs).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : [];
+            const domains: string[] = Array.isArray(data.domains) ? data.domains : [];
+            const targetStrings: string[] = Array.isArray(data.targets) ? data.targets : [];
+            const targets = targetStrings
+              .map((s: string) => {
+                const lastColon = s.lastIndexOf(':');
+                if (lastColon === -1) return null;
+                return {
+                  host: s.substring(0, lastColon),
+                  port: parseInt(s.substring(lastColon + 1), 10),
+                };
+              })
+              .filter((t): t is { host: string; port: number } => t !== null && !isNaN(t.port));
+            const routeRefs: string[] = Array.isArray(data.routeRefs) ? data.routeRefs : [];
 
             await appstate.targetProfilesStatePart.dispatchAction(appstate.updateTargetProfileAction, {
               id: profile.id,

package/ts_web/elements/ops-view-vpn.ts

@@ -221,7 +221,7 @@ export class OpsViewVpn extends DeesElement {
     ];
 
     return html`
-      <ops-sectionheading>VPN</ops-sectionheading>
+      <dees-heading level="2">VPN</dees-heading>
       <div class="vpnContainer">
 
       ${this.vpnState.newClientConfig ? html`

package/ts_web/elements/shared/index.ts

@@ -1,2 +1 @@
-export * from './css.js';
-export * from './ops-sectionheading.js';
+export * from './css.js';

package/dist_ts_web/elements/shared/ops-sectionheading.d.ts

@@ -1,5 +0,0 @@
-import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
-export declare class OpsSectionHeading extends DeesElement {
-    static styles: import("@design.estate/dees-element").CSSResult[];
-    render(): TemplateResult;
-}

package/dist_ts_web/elements/shared/ops-sectionheading.js

@@ -1,82 +0,0 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
-let OpsSectionHeading = (() => {
-    let _classDecorators = [customElement('ops-sectionheading')];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = DeesElement;
-    var OpsSectionHeading = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            OpsSectionHeading = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static styles = [
-            cssManager.defaultStyles,
-            css `
-      :host {
-        display: block;
-        margin-bottom: 24px;
-      }
-
-      .heading {
-        font-family: 'Cal Sans', 'Inter', sans-serif;
-        font-size: 28px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#111', '#fff')};
-        margin: 0;
-        padding: 0;
-      }
-    `,
-        ];
-        render() {
-            return html `
-      <h1 class="heading">
-        <slot></slot>
-      </h1>
-    `;
-        }
-        static {
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-    };
-    return OpsSectionHeading = _classThis;
-})();
-export { OpsSectionHeading };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BzLXNlY3Rpb25oZWFkaW5nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3NoYXJlZC9vcHMtc2VjdGlvbmhlYWRpbmcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsR0FBRyxFQUNILFVBQVUsRUFDVixhQUFhLEVBQ2IsSUFBSSxFQUVMLE1BQU0sNkJBQTZCLENBQUM7SUFHeEIsaUJBQWlCOzRCQUQ3QixhQUFhLENBQUMsb0JBQW9CLENBQUM7Ozs7c0JBQ0csV0FBVztpQ0FBbkIsU0FBUSxXQUFXOzs7O1lBQWxELDZLQTJCQzs7OztRQTFCUSxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLFVBQVUsQ0FBQyxhQUFhO1lBQ3hCLEdBQUcsQ0FBQTs7Ozs7Ozs7OztpQkFVVSxVQUFVLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUM7Ozs7S0FJOUM7U0FDRixDQUFDO1FBRUssTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBOzs7O0tBSVYsQ0FBQztRQUNKLENBQUM7O1lBMUJVLHVEQUFpQjs7Ozs7U0FBakIsaUJBQWlCIn0=

package/ts_web/elements/shared/ops-sectionheading.ts

@@ -1,38 +0,0 @@
-import {
-  DeesElement,
-  css,
-  cssManager,
-  customElement,
-  html,
-  type TemplateResult
-} from '@design.estate/dees-element';
-
-@customElement('ops-sectionheading')
-export class OpsSectionHeading extends DeesElement {
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        margin-bottom: 24px;
-      }
-
-      .heading {
-        font-family: 'Cal Sans', 'Inter', sans-serif;
-        font-size: 28px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#111', '#fff')};
-        margin: 0;
-        padding: 0;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <h1 class="heading">
-        <slot></slot>
-      </h1>
-    `;
-  }
-}