Remove deep from profile & public IP watchers, refactor weblet layout watcher (#4454)

Author: zaelgohary

packages/playground/src/components/weblet_layout.vue

@@ -353,18 +353,15 @@ const onlyIPV4TftPrice = ref<number>();
 const onlyIPV4UsdPrice = ref<number>();
 
 watch(
-  () => [props.cpu, props.memory, props.disk, props.ipv4, props.dedicated, props.selectedNode],
-  debounce((value, oldValue) => {
-    if (
-      oldValue &&
-      value[0] === oldValue[0] &&
-      value[1] === oldValue[1] &&
-      value[2] === oldValue[2] &&
-      value[3] === oldValue[3] &&
-      value[4] === oldValue[4] &&
-      value[5] === oldValue[5]
-    )
-      return;
+  [
+    () => props.cpu,
+    () => props.memory,
+    () => props.disk,
+    () => props.ipv4,
+    () => props.dedicated,
+    () => props.selectedNode,
+  ],
+  debounce(() => {
     shouldUpdateCost.value = true;
   }, 500),
   { immediate: true },

packages/playground/src/dashboard/components/public_ips_table.vue

@@ -18,7 +18,7 @@
       show-select
       return-object
       @update:options="
-        (options: any ) => {
+        (options: any) => {
           page = options.page;
           pageSize = options.itemsPerPage;
           getFarmPublicIp(true, { page, size: pageSize });
@@ -27,9 +27,7 @@
     >
       <template #top>
         <v-alert>
-          <h4 class="text-center font-weight-medium">
-            Public IPs
-          </h4>
+          <h4 class="text-center font-weight-medium">Public IPs</h4>
         </v-alert>
       </template>
       <template #[`item.ip`]="{ item }">
@@ -70,9 +68,7 @@
           <v-divider />
         </v-card-text>
         <v-card-actions class="justify-end mb-1 mr-2">
-          <v-btn color="anchor" @click="showDialogue = false">
-            Close
-          </v-btn>
+          <v-btn color="anchor" @click="showDialogue = false"> Close </v-btn>
           <v-btn
             text="Delete"
             :loading="isRemoving"
@@ -186,7 +182,7 @@ export default {
           farmId: props.farmId,
         }));
         const modelItems = items.value.map(item => plainToInstance(RemoveFarmIPModel, item));
-        await gridStore.grid.farms.removeFarmIps({ips:modelItems});
+        await gridStore.grid.farms.removeFarmIps({ ips: modelItems });
         setTimeout(async () => {
           await getFarmPublicIp(true, { page: page.value, size: pageSize.value });
           createCustomToast("IP is deleted successfully!", ToastType.success);
@@ -209,7 +205,6 @@ export default {
           await getFarmPublicIp(true, { page: page.value, size: pageSize.value });
         }, 20000);
       },
-      { deep: true },
     );
     return {
       gridStore,

packages/playground/src/weblets/profile_manager.vue

@@ -261,7 +261,7 @@ watch(
       balance.value = undefined;
     }
   },
-  { immediate: true, deep: true },
+  { immediate: true },
 );
 
 function logout() {