From a12417d4e9c8dc304f6cdf71a523a3898c499bd8 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Fri, 23 Jun 2023 21:27:55 +0200
Subject: [PATCH] Added copy button to error messages

---
 frontend/src/components/blankstate.svelte |  4 ++--
 frontend/src/components/grid.svelte       | 19 ++++++++++++++++++-
 frontend/src/components/tabbar.svelte     |  3 ++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/blankstate.svelte b/frontend/src/components/blankstate.svelte
index d4463ce..5d12d5c 100644
--- a/frontend/src/components/blankstate.svelte
+++ b/frontend/src/components/blankstate.svelte
@@ -18,7 +18,7 @@
     {/if}
 
     <p class="title">{title}</p>
-    <p>{label}</p>
+    <p class="label">{label}</p>
 
     <slot />
   </div>
@@ -38,7 +38,7 @@
     height: 150px;
     width: auto;
   }
-  .content :global(svg) {
+  .content > :global(svg) {
     height: 40px;
     width: auto;
   }
diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte
index 879e6bb..060f361 100644
--- a/frontend/src/components/grid.svelte
+++ b/frontend/src/components/grid.svelte
@@ -1,6 +1,8 @@
 <script>
+  import { onDestroy } from 'svelte';
   import BlankState from './blankstate.svelte';
   import GridItems from './grid-items.svelte';
+  import Icon from './icon.svelte';
 
   export let columns = [];
   export let items = [];
@@ -16,6 +18,17 @@
   export let errorTitle = '';
   export let errorDescription = '';
   export let busy = false;
+
+  let copySucceeded = false;
+  let timeout;
+
+  async function copyErrorDescription() {
+    await navigator.clipboard.writeText(errorDescription);
+    copySucceeded = true;
+    timeout = setTimeout(() => copySucceeded = false, 1500);
+  }
+
+  onDestroy(() => clearTimeout(timeout));
 </script>
 
 <div class="grid">
@@ -33,7 +46,11 @@
   {#if busy}
     <BlankState label={(busy === true) ? 'Loading…' : busy} icon="loading" />
   {:else if errorTitle || errorDescription}
-    <BlankState title={errorTitle} label={errorDescription} icon="!" />
+    <BlankState title={errorTitle} label={errorDescription} icon="!">
+      <button class="button-small" on:click={copyErrorDescription}>
+        <Icon name={copySucceeded ? 'check' : 'clipboard'} /> Copy error message
+      </button>
+    </BlankState>
   {:else}
     <table>
       {#if showHeaders && columns.some(col => col.title)}
diff --git a/frontend/src/components/tabbar.svelte b/frontend/src/components/tabbar.svelte
index 0fc1def..31b297c 100644
--- a/frontend/src/components/tabbar.svelte
+++ b/frontend/src/components/tabbar.svelte
@@ -61,7 +61,7 @@
   }
   li {
     display: inline-block;
-    flex-grow: 1;
+    flex: 1;
     position: relative;
   }
 
@@ -101,6 +101,7 @@
     border-color: #00008b;
     cursor: not-allowed;
   }
+
   nav.tabs.multiline button.tab .label {
     display: block;
     margin-top: 4px;