From 7d37d55e8845aa1e4fb716e59c96ea0018923433 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Sun, 21 Apr 2024 09:21:51 +0200
Subject: [PATCH] Enhancements: - Removed the hard-coded cost balance and make
 it variable instead - Updated the @click:row event - Removed unneeded alert
 message

---
 .../playground/src/components/ssh_keys/SshFormDialog.vue   | 7 ++-----
 packages/playground/src/components/ssh_keys/SshTable.vue   | 7 +------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/playground/src/components/ssh_keys/SshFormDialog.vue b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
index e27d6dd7e9..ff93261dbe 100644
--- a/packages/playground/src/components/ssh_keys/SshFormDialog.vue
+++ b/packages/playground/src/components/ssh_keys/SshFormDialog.vue
@@ -32,7 +32,7 @@
 
             <v-alert width="95%" class="mb-4" type="info">
               {{ $props.dialogType === SSHCreationMethod.Generate ? "Generating" : "Importing" }}
-              a new SSH key will cost you up to 0.01 TFT
+              a new SSH key will cost you up to {{ sshKeysManagement.updateCost }} TFT
             </v-alert>
 
             <div v-if="$props.dialogType === SSHCreationMethod.Generate" class="create">
@@ -98,14 +98,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { defineComponent, type PropType, ref, watch } from "vue";
 import { onMounted } from "vue";
 
 import { type Profile, useProfileManager } from "@/stores/profile_manager";
 import { SSHCreationMethod, type SSHKeyData } from "@/types";
-import { createCustomToast, ToastType } from "@/utils/custom_toast";
 import { type Balance, getGrid, loadBalance } from "@/utils/grid";
-import { isEnoughBalance } from "@/utils/helpers";
 import SSHKeysManagement from "@/utils/ssh";
 
 const props = defineProps({
@@ -145,7 +143,6 @@ const sshKey = ref<string>("");
 const keyName = ref<string>("");
 const createdKey = ref<SSHKeyData | null>(null); // Initialize createdKey with null
 const balance = ref<Balance>();
-const hasEnoughBalance = computed(() => isEnoughBalance(balance.value, 0.01));
 const loadingBalance = ref<boolean>(false);
 let interval: any;
 
diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
index 692b10a916..bebad19004 100644
--- a/packages/playground/src/components/ssh_keys/SshTable.vue
+++ b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -8,11 +8,6 @@
     </div>
 
     <div class="table mt-3">
-      <v-alert type="info">
-        Clicking on the <strong>Active</strong> or <strong>Inactive</strong> status will toggle the
-        <strong>activation</strong>/<strong>deactivation</strong> of the key.
-      </v-alert>
-
       <v-data-table
         show-select
         :no-data-text="capitalize(`No keys found.`)"
@@ -22,7 +17,7 @@
         :headers="headers"
         :items="sshKeys"
         loading-text="Loading..."
-        @click:row="(_, { item }) => $emit('view', item.raw)"
+        @click:row="(_: MouseEvent, { item }: any) => $emit('view', item.raw)"
       >
         <template #loading>
           <div class="w-100 text-center" v-if="loading && loadingMessage">