From 149313e8580f21b18f8cdfca0f56547dbd508930 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 30 Jun 2025 15:32:46 +0300
Subject: [PATCH 1/5] Fix subdomains name duplicates

---
 .../src/components/manage_gateway_dialog.vue  | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index f26561d14c..73ff969882 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -8,9 +8,7 @@
       @update:model-value="$emit('close')"
     >
       <weblet-layout ref="layout" @back="onBack">
-        <template #title>
-          Manage Domains ({{ vm ? vm.name : k8s?.masters[0].name }})
-        </template>
+        <template #title> Manage Domains ({{ vm ? vm.name : k8s?.masters[0].name }}) </template>
         <v-tabs v-model="gatewayTab" align-tabs="center" color="secondary" class="mb-6" :disabled="deleting">
           <v-tab>Domains List</v-tab>
           <v-tab>Add new domain</v-tab>
@@ -35,9 +33,7 @@
 
         <v-dialog v-model="failedDomainDialog" max-width="400px" scrollable attach="#modals">
           <v-card>
-            <v-card-title class="bg-warning">
-              Failed Domains
-            </v-card-title>
+            <v-card-title class="bg-warning"> Failed Domains </v-card-title>
             <v-card-text>
               <ul style="list-style: square">
                 <li v-for="gw in failedToListGws" :key="gw">
@@ -110,7 +106,7 @@
               <v-text-field v-model="networkName" label="Network name" readonly v-bind="props" />
             </copy-input-wrapper>
 
-            <copy-input-wrapper #="{ props }" :data="(selectedIPAddress as any)">
+            <copy-input-wrapper #="{ props }" :data="selectedIPAddress as any">
               <v-text-field v-model="selectedIPAddress" :readonly="true" label="Selected IP Address" v-bind="props" />
             </copy-input-wrapper>
 
@@ -155,9 +151,7 @@
         </div>
 
         <template #footer-actions>
-          <v-btn color="anchor" @click="$emit('close')">
-            Close
-          </v-btn>
+          <v-btn color="anchor" @click="$emit('close')"> Close </v-btn>
           <v-btn
             v-if="gatewayTab === 0"
             color="error"
@@ -166,9 +160,7 @@
           >
             Delete
           </v-btn>
-          <v-btn v-else color="secondary" :disabled="!valid" @click="deployGateway">
-            Add
-          </v-btn>
+          <v-btn v-else color="secondary" :disabled="!valid" @click="deployGateway"> Add </v-btn>
         </template>
       </weblet-layout>
     </v-dialog>
@@ -184,9 +176,7 @@
         </v-card-text>
 
         <v-card-actions class="justify-end mb-1 mr-2">
-          <v-btn color="anchor" @click="requestDelete = false">
-            Cancel
-          </v-btn>
+          <v-btn color="anchor" @click="requestDelete = false"> Cancel </v-btn>
           <v-btn
             color="error"
             :disabled="loadingGateways || deleting"
@@ -304,6 +294,13 @@ export default {
       return networks.value.find(net => net.value === selectedIPAddress.value)?.title === NetworkInterfaces.WireGuard;
     });
     watch(selectedK8SNodeName, getSupportedNetworks, { deep: true });
+
+    watch(dialogVisible, newValue => {
+      if (newValue) {
+        suggestName();
+      }
+    });
+
     const tableHeaders = ref([
       { title: "Name", key: "name" },
       { title: "Contract ID", key: "contractId" },

From 4f187f44ad55974b4a9b7dc50e52f10051edcae3 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 30 Jun 2025 15:38:11 +0300
Subject: [PATCH 2/5] Update the subdomain name when tab changes

---
 packages/playground/src/components/manage_gateway_dialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 73ff969882..98365ae18f 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -295,8 +295,8 @@ export default {
     });
     watch(selectedK8SNodeName, getSupportedNetworks, { deep: true });
 
-    watch(dialogVisible, newValue => {
-      if (newValue) {
+    watch(gatewayTab, newValue => {
+      if (newValue === 1) {
         suggestName();
       }
     });

From 975c119fce741cf660a4e88f6c7b40fe6e7f1fe5 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 30 Jun 2025 15:53:43 +0300
Subject: [PATCH 3/5] Refactor the watch when dialog fire and when the tab
 change

---
 .../playground/src/components/manage_gateway_dialog.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 98365ae18f..88d09e8682 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -295,8 +295,11 @@ export default {
     });
     watch(selectedK8SNodeName, getSupportedNetworks, { deep: true });
 
-    watch(gatewayTab, newValue => {
-      if (newValue === 1) {
+    watch([dialogVisible, gatewayTab], ([newDialogVisible, newGatewayTab], [oldDialogVisible, oldGatewayTab]) => {
+      const dialogJustOpened = newDialogVisible && !oldDialogVisible;
+      const switchedToAddTab = newGatewayTab === 1 && oldGatewayTab !== 1;
+
+      if (dialogJustOpened || switchedToAddTab) {
         suggestName();
       }
     });

From bc904db1ca5165beb529ab968388e0aa76fea866 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 2 Jul 2025 11:26:41 +0300
Subject: [PATCH 4/5] Append random suffix to the subdomain name

---
 packages/playground/src/components/manage_gateway_dialog.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 88d09e8682..a63f850696 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -501,7 +501,8 @@ export default {
           grid.config.twinId;
         prefix.value = oldPrefix.value + props.vm.name;
       }
-      subdomain.value = generateName({ prefix: prefix.value }, 4).toLowerCase();
+      const randomSuffix = generateName({}, 2);
+      subdomain.value = `${prefix.value}${randomSuffix}`.toLowerCase();
     }
 
     const subdomainRules = [

From 846d2cfa54a15099ea1454a146dd0b815aeb9e33 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 7 Jul 2025 13:13:32 +0300
Subject: [PATCH 5/5] Replace the watcher with event approach

---
 .../src/components/manage_gateway_dialog.vue  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index a63f850696..0d05d95229 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -9,7 +9,14 @@
     >
       <weblet-layout ref="layout" @back="onBack">
         <template #title> Manage Domains ({{ vm ? vm.name : k8s?.masters[0].name }}) </template>
-        <v-tabs v-model="gatewayTab" align-tabs="center" color="secondary" class="mb-6" :disabled="deleting">
+        <v-tabs
+          v-model="gatewayTab"
+          align-tabs="center"
+          color="secondary"
+          class="mb-6"
+          :disabled="deleting"
+          @update:model-value="onTabChange"
+        >
           <v-tab>Domains List</v-tab>
           <v-tab>Add new domain</v-tab>
         </v-tabs>
@@ -295,14 +302,11 @@ export default {
     });
     watch(selectedK8SNodeName, getSupportedNetworks, { deep: true });
 
-    watch([dialogVisible, gatewayTab], ([newDialogVisible, newGatewayTab], [oldDialogVisible, oldGatewayTab]) => {
-      const dialogJustOpened = newDialogVisible && !oldDialogVisible;
-      const switchedToAddTab = newGatewayTab === 1 && oldGatewayTab !== 1;
-
-      if (dialogJustOpened || switchedToAddTab) {
+    function onTabChange(newTab: unknown) {
+      if (newTab === 1) {
         suggestName();
       }
-    });
+    }
 
     const tableHeaders = ref([
       { title: "Name", key: "name" },
@@ -546,6 +550,7 @@ export default {
       getSupportedNetworks,
       formatDomainName,
       onBack,
+      onTabChange,
       getDomainNode,
       tableHeaders,
       subdomainRules,