From e7279592c6b7a3240f1238ca723d55c9739e0d8e Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Mon, 27 May 2024 13:44:27 +0300
Subject: [PATCH 1/4] fix: some input.el are refs and other regular html fix:
 input.status might be ref

---
 .../src/components/weblet_layout.vue           | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 5f05c59514..404f41974e 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -202,7 +202,7 @@ function validateBeforeDeploy(fn: () => void) {
     const inputs = form.inputs as unknown as InputValidatorService[];
 
     for (const input of inputs) {
-      const status = input.status;
+      const status = typeof input.status === "string" ? input.status : (input.status as any)?.value;
       if (status === ValidatorStatus.Invalid) {
         errorInput = [i, input.$el];
         break out;
@@ -217,7 +217,14 @@ function validateBeforeDeploy(fn: () => void) {
   }
 
   if (errorInput) {
-    const [tab, input] = errorInput;
+    const [tab, __input] = errorInput;
+
+    const input =
+      __input && typeof __input === "object" && "value" in __input && __input.value instanceof HTMLElement
+        ? __input.value
+        : __input instanceof HTMLElement
+        ? __input
+        : null;
 
     if (!input || !__setTab) {
       return;
@@ -227,7 +234,12 @@ function validateBeforeDeploy(fn: () => void) {
 
     // Timeout so the ui gets render before scroll
     setTimeout(() => {
-      const _input = input.querySelector("textarea") || input.querySelector("input") || input;
+      const _input = input.querySelector("textarea") || input.querySelector("input") || null;
+      if (!(_input instanceof HTMLElement)) {
+        return;
+      }
+
+      console.log({ errorInput });
       document.addEventListener("scrollend", () => _input.focus(), { once: true });
       _input.scrollIntoView({ behavior: "smooth", block: "center" });
     }, 250);

From 932422c62adf00eebb3cbedae1ce7a98dcd16e9c Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Mon, 27 May 2024 13:57:43 +0300
Subject: [PATCH 2/4] - fix: add d-tabs(config) to tf_algorand solution - fix:
 add d-tabs(config) to tf_casperlabs solution - fix: add d-tabs(config) to
 tf_funkwhale solution - fix: add d-tabs(config) to tf_nextcloud solution -
 fix: add d-tabs(config) to tf_node_pilot solution - fix: add d-tabs(config)
 to tf_peertube solution - fix: add d-tabs(config) to tf_staticwebsite
 solution - fix: add d-tabs(config) to tf_subsquid solution - fix: add
 d-tabs(config) to tf_umbrel solution - fix: add d-tabs(config) to
 tf_wordpress solution

---
 packages/playground/src/weblets/tf_algorand.vue      | 8 +++-----
 packages/playground/src/weblets/tf_casperlabs.vue    | 5 ++---
 packages/playground/src/weblets/tf_funkwhale.vue     | 5 ++---
 packages/playground/src/weblets/tf_nextcloud.vue     | 5 ++---
 packages/playground/src/weblets/tf_node_pilot.vue    | 5 ++---
 packages/playground/src/weblets/tf_peertube.vue      | 5 ++---
 packages/playground/src/weblets/tf_staticwebsite.vue | 5 ++---
 packages/playground/src/weblets/tf_subsquid.vue      | 5 ++---
 packages/playground/src/weblets/tf_umbrel.vue        | 8 +++-----
 packages/playground/src/weblets/tf_wordpress.vue     | 5 ++---
 10 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 8031f1b81c..12c2ec8e9f 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -11,7 +11,7 @@
     title-image="images/icons/algorand.png"
   >
     <template #title>Deploy a Algorand Instance </template>
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -171,7 +171,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
@@ -184,15 +184,13 @@ import { computed, type Ref, ref, watch } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useGrid, useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { type Flist, ProjectName, type Validators } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const lastRoundInput = ref();
-const profileManager = useProfileManager();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/algorand-latest.flist",
   entryPoint: "/sbin/zinit init",
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 88dbfb659a..1fb732fa13 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Casperlabs Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -62,7 +62,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -86,7 +86,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 
 const name = ref(generateName({ prefix: "cl" }));
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 1d4ae6a8ce..8826e483e0 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Funkwhale Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -114,7 +114,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -138,7 +138,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "fw" }));
 const username = ref("admin");
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 6c711a035f..a058f835bf 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Nextcloud All-in-One Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -61,7 +61,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -85,7 +85,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 
 const name = ref(generateName({ prefix: "nc" }));
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index cd344575cc..1732013166 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -11,7 +11,7 @@
     title-image="images/icons/vm.png"
   >
     <template #title>Deploy a Node Pilot</template>
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -58,7 +58,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -77,7 +77,6 @@ import { type Flist, ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { generateName } from "../utils/strings";
 const layout = useLayout();
-const valid = ref(false);
 const name = ref(generateName({ prefix: "np" }));
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index ca75c06f3d..28039475a2 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -12,7 +12,7 @@
     title-image="images/icons/peertube.png"
   >
     <template #title>Deploy a Peertube Instance</template>
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -88,7 +88,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -111,7 +111,6 @@ import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/ga
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "pt" }));
 const email = ref(profileManager.profile?.email || "");
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index 4e123ab7d2..006b415e8a 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Static Website Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -90,7 +90,7 @@
         v-model="selectionDetails"
       />
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -113,7 +113,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "sw" }));
 const gitUrl = ref("");
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 6a12be674b..757a36824e 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Subsquid Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -74,7 +74,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -98,7 +98,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "ss" }));
 const endpoint = ref("");
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index af73144676..dc866d3c7e 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy an Umbrel Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -108,7 +108,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -123,7 +123,7 @@ import { manual } from "@/utils/manual";
 
 import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useGrid, useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
@@ -132,8 +132,6 @@ import rootFs from "../utils/root_fs";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
-const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "um" }));
 const username = ref("admin");
 const password = ref(generatePassword());
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index e4f7ce353c..24aab1346c 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Wordpress Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -115,7 +115,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -140,7 +140,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "wp" }));
 const username = ref("admin");

From 9cca1c9e8780fd1a5bf5eef7bbf4ddec764c9730 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Tue, 28 May 2024 14:29:58 +0300
Subject: [PATCH 3/4] fix: add d-tabs(config) to freeflow solution

---
 packages/playground/src/weblets/freeflow.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 09808f48fc..4b51bccaec 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -13,7 +13,7 @@
   >
     <template #title>Deploy a Freeflow Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="threebotName"
         :rules="[
@@ -72,7 +72,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -95,7 +95,6 @@ import { deployGatewayName, rollbackDeployment } from "../utils/gateway";
 import { normalizeError } from "../utils/helpers";
 
 const layout = useLayout();
-const valid = ref(false);
 
 const threebotName = ref<string>("");
 const solution = ref() as Ref<SolutionFlavor>;

From 7641474a61cf7f9f2a138b60373d3cf641a9c006 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Sun, 2 Jun 2024 17:56:53 +0300
Subject: [PATCH 4/4] chore: remove logs

---
 packages/playground/src/components/weblet_layout.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 404f41974e..bba9ec0895 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -239,7 +239,6 @@ function validateBeforeDeploy(fn: () => void) {
         return;
       }
 
-      console.log({ errorInput });
       document.addEventListener("scrollend", () => _input.focus(), { once: true });
       _input.scrollIntoView({ behavior: "smooth", block: "center" });
     }, 250);