Rerender deploy k8s and caprover workers on back event (#3904)

* Feature[k8s_worker]:
- add local id for k8s worker to use it as a key and rerender based on it

* Feature[caprover_worker]:
- add local id for caprover worker to use it as a key and rerender based on it

Author: 0oM4R

packages/playground/src/components/caprover_worker.vue

@@ -73,8 +73,10 @@ import type { CaproverWorker } from "../types";
 import { generateName } from "../utils/strings";
 import SelectSolutionFlavor from "./select_solution_flavor.vue";
 
+let id = 0;
 export function createWorker(name: string = generateName({ prefix: "wr" })): CaproverWorker {
   return {
+    _id: id++,
     name,
     ipv4: true,
     ipv6: false,

packages/playground/src/components/k8s_worker.vue

@@ -125,9 +125,10 @@ import Networks from "../components/networks.vue";
 import type { K8SWorker } from "../types";
 import { generateName } from "../utils/strings";
 import RootFsSize from "./root_fs_size.vue";
-
+let id = 0;
 export function createWorker(name: string = generateName({ prefix: "wr" })): K8SWorker {
   return {
+    _id: id++,
     name,
     cpu: 1,
     memory: 4096,

packages/playground/src/components/manage_caprover_worker_dialog.vue

@@ -65,7 +65,7 @@
     </template>
 
     <template #deploy>
-      <CaproverWorker v-model="worker" />
+      <CaproverWorker :key="worker._id" v-model="worker" />
     </template>
   </ManageWorkerDialog>
 
@@ -131,6 +131,7 @@ function calcDiskSize(disks: { size: number }[]) {
 
 const caproverData = ref<any>();
 function updateCaprover() {
+  worker.value = createWorker();
   if (!caproverData.value) return;
   emits("update:caprover", caproverData.value);
   caproverData.value = undefined;

packages/playground/src/components/manage_k8s_worker_dialog.vue

@@ -6,6 +6,7 @@
     @close="$emit('close')"
     @deploy="deploy"
     @delete="onDelete"
+    @back="worker = createWorker()"
   >
     <template #title>Manage Kubernetes({{ data.deploymentName }}) Workers</template>
 
@@ -43,7 +44,7 @@
     </template>
 
     <template #deploy>
-      <K8SWorker v-model="worker" />
+      <K8SWorker :key="worker._id" v-model="worker" />
     </template>
   </ManageWorkerDialog>
 </template>

packages/playground/src/types/index.ts

@@ -58,6 +58,7 @@ export interface FarmingProfileOptions {
   nuRequiredPerCu: number;
 }
 export interface K8SWorker {
+  _id: number;
   name: string;
   cpu: number;
   memory: number;
@@ -75,6 +76,7 @@ export interface K8SWorker {
 }
 
 export interface CaproverWorker {
+  _id: number;
   name: string;
   solution?: solutionFlavor;
   dedicated?: boolean;