From 2d0d5c2cdce451e9d87ecb83d085b5198e3796c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Westerb=C3=B8?= <roger.westerbo@nhn.no>
Date: Mon, 13 Jan 2025 18:25:00 +0100
Subject: [PATCH] Preserving line breaks in description

---
 .../cluster-description.component.html        | 19 ++++++++++++-------
 .../cluster-metadata-page.component.html      |  2 +-
 src/assets/i18n/en.json                       |  3 ++-
 src/assets/i18n/no.json                       |  3 ++-
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app/clusters/components/cluster-description/cluster-description.component.html b/src/app/clusters/components/cluster-description/cluster-description.component.html
index 5d3831d..d40cfe7 100644
--- a/src/app/clusters/components/cluster-description/cluster-description.component.html
+++ b/src/app/clusters/components/cluster-description/cluster-description.component.html
@@ -1,15 +1,20 @@
-<div class="grid space-y-8 lg:gap-8 lg:space-y-0 mt-5">
+<div class="grid mt-5">
   <div class="dark:bg-darker flex items-center justify-between overflow-x-auto rounded-md bg-white p-2">
-    <div class="dark:bg-darker col-span-2 overflow-x-auto rounded-md bg-white">
-      <div class="dark:border-primary flex items-center justify-between border-b p-4">
+    <div class="dark:bg-darker col-span-2 overflow-x-auto rounded-md bg-white w-full">
+      <div class="dark:border-primary flex items-end justify-between border-b p-4">
         <h4 class="dark:text-light text-lg font-semibold text-gray-500">{{ 'common.description' | translate }}</h4>
-        <a class="dark:text-primary text-primary cursor-pointer" (click)="editRequested()">{{ 'common.edit' | translate }}</a>
+        <div class="">
+          <a class="dark:text-primary text-primary cursor-pointer" (click)="editRequested()">{{ 'common.edit' | translate }}</a>
+        </div>
       </div>
+
       <div class="overflow-x-auto">
         <div class="relative m-3">
-          <div>
-            <p>{{ cluster?.metadata?.description }}</p>
-          </div>
+          @if (cluster?.metadata?.description) {
+            <div class="whitespace-pre-line">{{ cluster?.metadata?.description }}</div>
+          } @else {
+            <div class="text-gray-500">{{ 'common.noValue' | translate }}</div>
+          }
         </div>
       </div>
     </div>
diff --git a/src/app/clusters/pages/cluster-metadata-page/cluster-metadata-page.component.html b/src/app/clusters/pages/cluster-metadata-page/cluster-metadata-page.component.html
index f339d32..abac8d6 100644
--- a/src/app/clusters/pages/cluster-metadata-page/cluster-metadata-page.component.html
+++ b/src/app/clusters/pages/cluster-metadata-page/cluster-metadata-page.component.html
@@ -68,7 +68,7 @@
                   <tr class="hover:bg-grey-light">
                     <td class="px-2 py-1 align-top">{{ 'pages.clusters.details.metadata.description' | translate }}</td>
                     <td class="px-2 py-1 font-bold">
-                      <div class="dark:bg-gray-800 bg-slate-200 p-4">
+                      <div class="dark:bg-gray-800 bg-slate-200 p-4 whitespace-pre-line">
                         {{ cluster?.metadata?.description }}
                       </div>
                     </td>
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index d593c50..a407a53 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -118,7 +118,8 @@
     "summary": "Summary",
     "report": "Report",
     "change": "Change",
-    "description": "Description"
+    "description": "Description",
+    "noValue": "No value"
   },
   "error": {
     "forbidden": "Forbidden area",
diff --git a/src/assets/i18n/no.json b/src/assets/i18n/no.json
index a3f7b47..55e6944 100644
--- a/src/assets/i18n/no.json
+++ b/src/assets/i18n/no.json
@@ -118,7 +118,8 @@
     "summary": "Sammendrag",
     "report": "Rapport",
     "change": "Change",
-    "description": "Beskrivelse"
+    "description": "Beskrivelse",
+    "noValue": "Ingen verdi"
   },
   "nav": {
     "home": "Oversikt",