Update sshkey page

packages/playground/src/App.vue

@@ -327,10 +327,10 @@ const routes: AppRoute[] = [
         tooltip: "Find or Publish your Flist on 0-Hub.",
       },
       {
-        title: "SSH Key",
+        title: "SSH Keys",
         icon: "mdi-key-plus",
         route: DashboardRoutes.Deploy.SSHKey,
-        tooltip: "Generate or update your SSH Key.",
+        tooltip: "Generate or update your SSH Keys.",
       },
     ],
   },

packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="" variant="tonal">
+  <v-card class="my-6" variant="tonal">
     <v-card-title>
       <v-icon>mdi-key-chain</v-icon>
       Manage SSH keys
@@ -17,7 +17,15 @@
 
     <v-card-actions>
       <VSpacer />
-      <v-btn color="primary" variant="flat" @click="openManageDialog = true" class="mr-2">Manage SSH keys</v-btn>
+      <v-btn
+        color="primary"
+        variant="flat"
+        @click="openManageDialog = true"
+        class="mr-2 my-1"
+        :disabled="sshKeysManagement.list() && sshKeysManagement.list().length === 0"
+      >
+        Manage SSH keys
+      </v-btn>
     </v-card-actions>
   </v-card>
 
@@ -38,16 +46,16 @@
 
         <v-row>
           <v-tooltip
-            v-for="_key of sshKeys"
+            v-for="_key of sshKeysManagement.list()"
             :key="_key.id"
-            :text="selectedKeys.includes(_key) ? 'Selected' : 'Not selected'"
+            :text="isKeySelected(_key) ? 'Selected' : 'Not selected'"
             location="bottom"
           >
             <template #activator="{ props }">
               <v-chip
                 class="pa-5 ml-5 mt-5"
-                :variant="selectedKeys.includes(_key) ? 'flat' : 'outlined'"
-                :color="selectedKeys.includes(_key) ? 'primary' : 'white'"
+                :variant="isKeySelected(_key) ? 'flat' : 'outlined'"
+                :color="isKeySelected(_key) ? 'primary' : 'white'"
                 v-bind="props"
                 @click="selectKey(_key)"
               >
@@ -85,8 +93,8 @@ import SshDataDialog from "@/components/ssh_keys/SshDataDialog.vue";
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
 import { DashboardRoutes } from "@/router/routes";
-import { useProfileManager } from "@/stores";
 import type { SSHKeyData } from "@/types";
+import SSHKeysManagement from "@/utils/ssh";
 
 export default defineComponent({
   name: "ManageSshDeployemnt",
@@ -98,30 +106,34 @@ export default defineComponent({
   setup(_, { emit }) {
     const defaultKeyData = { createdAt: "", id: 0, publicKey: "", name: "", isActive: false };
     const openManageDialog = ref<boolean>(false);
-    const profileManager = useProfileManager();
-    const sshKeys = profileManager.profile?.ssh as SSHKeyData[];
     const selectedKey = ref<SSHKeyData>(defaultKeyData);
     const selectedKeys = ref<SSHKeyData[]>([]);
     const isViewSSHKey = ref<boolean>(false);
+    const sshKeysManagement = new SSHKeysManagement();
 
     // Each key will be added then add `\n` as a new line.
     const selectedKeysString = ref<string>("");
 
     onMounted(() => {
-      selectedKeys.value = sshKeys.filter(_key => _key.isActive === true);
+      selectedKeys.value = sshKeysManagement.list().filter(_key => _key.isActive === true);
       handleKeys();
       emit("selectedKeys", selectedKeysString.value);
     });
 
+    const isKeySelected = (key: SSHKeyData) => {
+      return selectedKeys.value.some(selectedKey => selectedKey.id === key.id);
+    };
+
     function selectKey(key: SSHKeyData) {
-      if (selectedKeys.value.includes(key)) {
-        const index = selectedKeys.value.indexOf(key);
+      if (isKeySelected(key)) {
+        const index = selectedKeys.value.findIndex(selectedKey => selectedKey.id === key.id);
         if (index !== -1) {
           selectedKeys.value.splice(index, 1);
         }
       } else {
         selectedKeys.value.push(key);
       }
+
       handleKeys();
       emit("selectedKeys", selectedKeysString.value);
     }
@@ -167,18 +179,19 @@ export default defineComponent({
 
     return {
       openManageDialog,
-      sshKeys,
       selectedKeys,
       selectedKey,
       isViewSSHKey,
       defaultKeyData,
       selectedKeysString,
       DashboardRoutes,
+      sshKeysManagement,
 
       capitalize,
       onSelectKey,
       onCloseSelectKey,
       selectKey,
+      isKeySelected,
     };
   },
 });