feat(dns): Add domain validation and dropdown for DNS entry creation and updates

ts/manager.dns/classes.dnsmanager.ts

@@ -69,6 +69,16 @@ export class DnsManager {
             this.cloudlyRef.authManager.validIdentityGuard,
           ]);
 
+          // Validate domain exists if domainId is provided
+          if (reqArg.dnsEntryData.domainId) {
+            const domain = await this.cloudlyRef.domainManager.CDomain.getDomainById(reqArg.dnsEntryData.domainId);
+            if (!domain) {
+              throw new Error(`Domain with id ${reqArg.dnsEntryData.domainId} not found`);
+            }
+            // Set the zone from the domain name
+            reqArg.dnsEntryData.zone = domain.data.name;
+          }
+
           const dnsEntry = await this.CDnsEntry.createDnsEntry(reqArg.dnsEntryData);
 
           return {
@@ -87,6 +97,16 @@ export class DnsManager {
             this.cloudlyRef.authManager.validIdentityGuard,
           ]);
 
+          // Validate domain exists if domainId is provided
+          if (reqArg.dnsEntryData.domainId) {
+            const domain = await this.cloudlyRef.domainManager.CDomain.getDomainById(reqArg.dnsEntryData.domainId);
+            if (!domain) {
+              throw new Error(`Domain with id ${reqArg.dnsEntryData.domainId} not found`);
+            }
+            // Set the zone from the domain name
+            reqArg.dnsEntryData.zone = domain.data.name;
+          }
+
           const dnsEntry = await this.CDnsEntry.updateDnsEntry(
             reqArg.dnsEntryId,
             reqArg.dnsEntryData

ts_web/elements/cloudly-view-dns.ts

@@ -19,6 +19,7 @@ export class CloudlyViewDns extends DeesElement {
     secretGroups: [],
     secretBundles: [],
     dnsEntries: [],
+    domains: [],
   };
 
   constructor() {
@@ -31,6 +32,12 @@ export class CloudlyViewDns extends DeesElement {
     this.rxSubscriptions.push(subscription);
   }
 
+  async connectedCallback() {
+    super.connectedCallback();
+    // Load all data including domains and DNS entries
+    await appstate.dataState.dispatchAction(appstate.getAllDataAction, {});
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     shared.viewHostCss,
@@ -120,12 +127,15 @@ export class CloudlyViewDns extends DeesElement {
                       .value=${'A'}
                       .required=${true}>
                     </dees-input-dropdown>
-                    <dees-input-text 
+                    <dees-input-dropdown 
-                      .key=${'zone'} 
+                      .key=${'domainId'} 
-                      .label=${'Zone (Domain)'} 
+                      .label=${'Domain'} 
-                      .placeholder=${'example.com'}
+                      .options=${this.data.domains?.map(domain => ({
+                        key: domain.id,
+                        option: domain.data.name
+                      })) || []}
                       .required=${true}>
-                    </dees-input-text>
+                    </dees-input-dropdown>
                     <dees-input-text 
                       .key=${'name'} 
                       .label=${'Name'} 
@@ -186,7 +196,8 @@ export class CloudlyViewDns extends DeesElement {
                       await appstate.dataState.dispatchAction(appstate.createDnsEntryAction, {
                         dnsEntryData: {
                           type: formData.type,
-                          zone: formData.zone,
+                          domainId: formData.domainId,
+                          zone: '', // Will be set by backend from domain
                           name: formData.name || '@',
                           value: formData.value,
                           ttl: parseInt(formData.ttl) || 3600,
@@ -239,12 +250,16 @@ export class CloudlyViewDns extends DeesElement {
                       .value=${dnsEntry.data.type}
                       .required=${true}>
                     </dees-input-dropdown>
-                    <dees-input-text 
+                    <dees-input-dropdown 
-                      .key=${'zone'} 
+                      .key=${'domainId'} 
-                      .label=${'Zone (Domain)'} 
+                      .label=${'Domain'} 
-                      .value=${dnsEntry.data.zone}
+                      .options=${this.data.domains?.map(domain => ({
+                        key: domain.id,
+                        option: domain.data.name
+                      })) || []}
+                      .value=${dnsEntry.data.domainId || ''}
                       .required=${true}>
-                    </dees-input-text>
+                    </dees-input-dropdown>
                     <dees-input-text 
                       .key=${'name'} 
                       .label=${'Name'} 
@@ -306,7 +321,8 @@ export class CloudlyViewDns extends DeesElement {
                         dnsEntryData: {
                           ...dnsEntry.data,
                           type: formData.type,
-                          zone: formData.zone,
+                          domainId: formData.domainId,
+                          zone: '', // Will be set by backend from domain
                           name: formData.name || '@',
                           value: formData.value,
                           ttl: parseInt(formData.ttl) || 3600,