From a906468063ca605d1f1c8271d7abce3f092a0bb3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@protonmail.com>
Date: Tue, 26 Jul 2022 12:36:00 +0000
Subject: [PATCH] fix: no ssh key found

---
 .../[id]/configuration/sshkey.svelte          | 47 +++++++++++++++----
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte b/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
index 0db8cd0c4..6a1daae40 100644
--- a/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
+++ b/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
@@ -43,17 +43,44 @@
 </div>
 <div class="flex flex-col justify-center">
 	<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
-		{#each sshKeys as sshKey}
-			<div class="p-2 relative">
-				<form on:submit|preventDefault={() => handleSubmit(sshKey.id)}>
-					<button
-						type="submit"
-						class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
+		{#if sshKeys.length > 0}
+			{#each sshKeys as sshKey}
+				<div class="p-2 relative">
+					<form on:submit|preventDefault={() => handleSubmit(sshKey.id)}>
+						<button
+							type="submit"
+							class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
+						>
+							<div class="font-bold text-xl text-center truncate">{sshKey.name}</div>
+						</button>
+					</form>
+				</div>
+			{/each}
+		{:else}
+			<div class="flex-col">
+				<div class="pb-2 text-center font-bold">No SSH key found</div>
+				<div class="flex justify-center">
+					<a
+						href="/settings/ssh-keys"
+						sveltekit:prefetch
+						class="add-icon bg-sky-600 hover:bg-sky-500"
 					>
-						<div class="font-bold text-xl text-center truncate">{sshKey.name}</div>
-					</button>
-				</form>
+						<svg
+							class="w-6"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							><path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+							/></svg
+						>
+					</a>
+				</div>
 			</div>
-		{/each}
+		{/if}
 	</div>
 </div>