Merge pull request #3026 from threefoldtech/development_fix_sshkey_issue

Prevent recursive component tree by displaying SSH keys alert

Author: AhmedHanafy725

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

@@ -134,7 +134,9 @@ export default defineComponent({
       selectedKeys.value = sshKeysManagement.list().filter(_key => _key.isActive === true);
       // TODO: Remove the below `selectedKeys.value = [selectedKeys.value[0]];` to make the user select more than one key
       // after fixing this issue: https://github.com/threefoldtech/tf-images/issues/231
-      selectedKeys.value = [selectedKeys.value[0]];
+      if (selectedKeys.value.length) {
+        selectedKeys.value = [selectedKeys.value[0]];
+      }
       handleKeys();
       emit("selectedKeys", selectedKeysString.value);
     });
@@ -173,7 +175,9 @@ export default defineComponent({
     }
 
     function handleKeys() {
-      selectedKeysString.value = selectedKeys.value.map(_key => _key.publicKey).join("\n\n");
+      if (selectedKeys.value.length) {
+        selectedKeysString.value = selectedKeys.value.map(_key => _key.publicKey).join("\n\n");
+      }
     }
 
     /* interact with form_validator */

packages/playground/src/components/view_layout.vue

@@ -6,8 +6,10 @@
     />
 
     <template v-if="requireSSH && !ssh">
-      <VAlert variant="tonal" type="error" :text="title + ' requires public ssh key.'" class="mb-4" />
-      <SshkeyView />
+      <VAlert variant="tonal" type="error" class="mb-4">
+        {{ title }} requires a public SSH key. You can generate or import it from the
+        <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH Keys</router-link> page.
+      </VAlert>
     </template>
     <slot v-else :key="tick" />
 
@@ -21,12 +23,11 @@
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRoute } from "vue-router";
 
+import { DashboardRoutes } from "@/router/routes";
 import { useProfileManager } from "@/stores";
-import SshkeyView from "@/views/sshkey_view.vue";
 
 export default {
   name: "ViewLayout",
-  components: { SshkeyView },
   setup() {
     const route = useRoute();
     const profileManager = useProfileManager();
@@ -55,6 +56,7 @@ export default {
       requireSSH: computed(() => route.meta.requireSSH),
       tick,
       viewLayoutContainer,
+      DashboardRoutes,
     };
   },
 };