From 122a9f3e8f4d5f494f3c4512dc1c34395ebca056 Mon Sep 17 00:00:00 2001
From: Thomas Junk <thomas.junk@intevation.de>
Date: Thu, 14 Sep 2023 10:33:12 +0200
Subject: [PATCH] refactor: Key value separated into own element

---
 src/lib/singleview/KeyValues.svelte           | 22 +++++
 src/lib/singleview/general/General.svelte     | 98 ++++++++++++-------
 .../vulnerability/GeneralSection.svelte       | 55 +++++------
 .../vulnerabilities/vulnerability/ID.svelte   | 23 +----
 4 files changed, 111 insertions(+), 87 deletions(-)
 create mode 100644 src/lib/singleview/KeyValues.svelte

diff --git a/src/lib/singleview/KeyValues.svelte b/src/lib/singleview/KeyValues.svelte
new file mode 100644
index 0000000..aa56d1c
--- /dev/null
+++ b/src/lib/singleview/KeyValues.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  export let keys: Array<String>;
+  export let values: any;
+</script>
+
+{#each keys as key, index}
+  <table>
+    <tbody>
+      <tr><td class="key">{key}</td><td class="value">{values[index]}</td></tr>
+    </tbody>
+  </table>
+{/each}
+
+<style>
+  .key {
+    padding: 0.2rem;
+    width: 21rem;
+  }
+  .value {
+    padding: 0.2rem;
+  }
+</style>
diff --git a/src/lib/singleview/general/General.svelte b/src/lib/singleview/general/General.svelte
index 9209f7d..ebd24b5 100644
--- a/src/lib/singleview/general/General.svelte
+++ b/src/lib/singleview/general/General.svelte
@@ -37,36 +37,62 @@
 </script>
 
 <div class="documentdata">
-  <dl>
-    <dt>ID</dt>
-    <dd>{id}</dd>
-    <dt>CSAF-Version</dt>
-    <dd>{csafVersion}</dd>
-    <dt>TLP</dt>
-    <dd><span class={tlpStyle}>{tlp}&nbsp;</span></dd>
-    <dt>Category</dt>
-    <dd>{category}</dd>
-    <dt>Title</dt>
-    <dd>{title}</dd>
-    <dt>Publisher name</dt>
-    <dd>{publisherName}</dd>
-    <dt>Publisher category</dt>
-    <dd>{publisherCategory}</dd>
-    <dt>Publisher namespace</dt>
-    <dd>{publisherNamespace}</dd>
-    <dt>Language</dt>
-    <dd>{lang}&nbsp;</dd>
-    <dt>Published</dt>
-    <dd>{published}</dd>
-    <dt>Last update</dt>
-    <dd>{lastUpdate}</dd>
-    <dt>Tracking Version</dt>
-    <dd>{trackingVersion}</dd>
+  <table>
+    <tr>
+      <td class="key">ID</td>
+      <td class="value">{id}</td>
+    </tr>
+    <tr>
+      <td class="key">CSAF-Version</td>
+      <td class="value">{csafVersion}</td>
+    </tr>
+    <tr>
+      <td class="key">TLP</td>
+      <td class="value"><span class={tlpStyle}>{tlp}&nbsp;</span></td>
+    </tr>
+    <tr>
+      <td class="key">Category</td>
+      <td class="value">{category}</td>
+    </tr>
+    <tr>
+      <td class="key">Title</td>
+      <td class="value">{title}</td>
+    </tr>
+    <tr>
+      <td class="key">Publisher name</td>
+      <td class="value">{publisherName}</td>
+    </tr>
+    <tr>
+      <td class="key">Publisher category</td>
+      <td class="value">{publisherCategory}</td>
+    </tr>
+    <tr>
+      <td class="key">Publisher namespace</td>
+      <td class="value">{publisherNamespace}</td>
+    </tr>
+    <tr>
+      <td class="key">Language</td>
+      <td class="value">{lang}</td>
+    </tr>
+    <tr>
+      <td class="key">Published</td>
+      <td class="value">{published}</td>
+    </tr>
+    <tr>
+      <td class="key">Last update</td>
+      <td class="value">{lastUpdate}</td>
+    </tr>
+    <tr>
+      <td class="key">Tracking Version</td>
+      <td class="value">{trackingVersion}</td>
+    </tr>
     {#if $appStore.doc?.status !== Status.final}
-      <dt>Status</dt>
-      <dd>{status}</dd>
+      <tr>
+        <td class="key">Status</td>
+        <td class="value">{status}</td>
+      </tr>
     {/if}
-  </dl>
+  </table>
 </div>
 
 {#if $appStore.doc?.isRevisionHistoryPresent}
@@ -98,6 +124,13 @@
 {/if}
 
 <style>
+  .key {
+    width: 21rem;
+    padding: 0.2rem;
+  }
+  .value {
+    padding: 0.2rem;
+  }
   .revisionhistorysection {
     margin-left: 3rem;
   }
@@ -110,15 +143,6 @@
     width: 40vw;
     min-width: 70rem;
   }
-  dt {
-    float: left;
-    clear: left;
-    width: 21rem;
-    font-weight: 100;
-  }
-  dd {
-    margin-bottom: 0.1em;
-  }
   .tlpclear {
     background: #000;
     color: #fff;
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte b/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte
index 8c28c8c..af21b81 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/GeneralSection.svelte
@@ -1,36 +1,27 @@
 <script lang="ts">
-  export let vulnerability: any;
-</script>
+  import KeyValues from "$lib/singleview/KeyValues.svelte";
 
-<dl>
-  {#if vulnerability.title}
-    <dt>Title</dt>
-    <dd>{vulnerability.title}</dd>
-  {/if}
-  {#if vulnerability.cwe}
-    <dt>CWE ID</dt>
-    <dd>{vulnerability.cwe.id}</dd>
-    <dt>CWE Name</dt>
-    <dd>{vulnerability.cwe.name}</dd>
-  {/if}
-  {#if vulnerability.discovery_date}
-    <dt>Discovery date</dt>
-    <dd>{vulnerability.discovery_date}</dd>
-  {/if}
-  {#if vulnerability.release_date}
-    <dt>Release date</dt>
-    <dd>{vulnerability.release_date}</dd>
-  {/if}
-</dl>
-
-<style>
-  dt {
-    float: left;
-    clear: left;
-    font-weight: 100;
-    width: 14rem;
+  export let vulnerability: any;
+  const keys: Array<String> = [];
+  const values: any = [];
+  if (vulnerability.title) {
+    keys.push("Title");
+    values.push(vulnerability.title);
   }
-  dd {
-    margin-bottom: 0.1em;
+  if (vulnerability.cwe) {
+    keys.push("CWE ID");
+    keys.push("CWE Name");
+    values.push(vulnerability.cwe.id);
+    values.push(vulnerability.cwe.name);
   }
-</style>
+  if (vulnerability.discovery_date) {
+    keys.push("Discovery date");
+    values.push(vulnerability.discovery_date);
+  }
+  if (vulnerability.release_date) {
+    keys.push("Release date");
+    values.push(vulnerability.release_date);
+  }
+</script>
+
+<KeyValues {keys} {values} />
diff --git a/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte b/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte
index 92c6d5f..3207b39 100644
--- a/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte
+++ b/src/lib/singleview/vulnerabilities/vulnerability/ID.svelte
@@ -1,27 +1,14 @@
 <script lang="ts">
   import Collapsible from "$lib/Collapsible.svelte";
+  import KeyValues from "$lib/singleview/KeyValues.svelte";
   export let vulnerability: any;
 </script>
 
 <Collapsible header="IDs" level="4">
   {#each vulnerability.ids as vulnerabilityID}
-    <dl>
-      <dt>Systemname</dt>
-      <dd>{vulnerabilityID.system_name}</dd>
-      <dt>Text</dt>
-      <dd>{vulnerabilityID.text}</dd>
-    </dl>
+    <KeyValues
+      keys={["Systemname", "Text"]}
+      values={[vulnerabilityID.system_name, vulnerabilityID.text]}
+    />
   {/each}
 </Collapsible>
-
-<style>
-  dt {
-    float: left;
-    clear: left;
-    font-weight: 100;
-    width: 14rem;
-  }
-  dd {
-    margin-bottom: 0.1em;
-  }
-</style>