From 576e0f23fa992d9a5e055c16275e65ac1f65c726 Mon Sep 17 00:00:00 2001
From: Gilbert Cherrie <32444791+GilbertCherrie@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:59:16 -0500
Subject: [PATCH] Merge pull request #9320 from
 liu-samuel/tag-list-customer-case

Making tags more readable

(cherry picked from commit 1f5c90e58ed582f6eb8211fb46b20474bdfc6c75)
---
 .../value-tags/miq-structured-list-text.jsx               | 8 ++++++--
 .../tests/__snapshots__/tag_group.test.js.snap            | 7 +++++--
 .../spec/textual_summary/tests/tag_group.test.js          | 2 +-
 app/stylesheet/miq-structured-list.scss                   | 1 +
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-text.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-text.jsx
index d49b7d8e172..6bbdd870016 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-text.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-text.jsx
@@ -4,8 +4,12 @@ import classNames from 'classnames';
 
 /** Component to print the text value inside a cell. */
 const MiqStructuredListText = ({ value }) => {
-  const text = (value === null || value === undefined ? '' : String(value));
-
+  let text;
+  if (Array.isArray(value)) {
+    text = value.join('\n');
+  } else {
+    text = (value === null || value === undefined ? '' : String(value));
+  }
   return (
     <div className={classNames(text ? 'expand' : '', 'wrap_text')}>
       {text}
diff --git a/app/javascript/spec/textual_summary/tests/__snapshots__/tag_group.test.js.snap b/app/javascript/spec/textual_summary/tests/__snapshots__/tag_group.test.js.snap
index 097d4c0756b..48247b042bd 100644
--- a/app/javascript/spec/textual_summary/tests/__snapshots__/tag_group.test.js.snap
+++ b/app/javascript/spec/textual_summary/tests/__snapshots__/tag_group.test.js.snap
@@ -782,7 +782,8 @@ exports[`TagGroup renders just fine 1`] = `
                                                               <div
                                                                 className="expand wrap_text"
                                                               >
-                                                                Policy,2
+                                                                Policy
+2
                                                               </div>
                                                             </MiqStructuredListText>
                                                           </div>
@@ -1173,7 +1174,9 @@ exports[`TagGroup renders just fine 1`] = `
                                                               <div
                                                                 className="expand wrap_text"
                                                               >
-                                                                Policy,2,3
+                                                                Policy
+2
+3
                                                               </div>
                                                             </MiqStructuredListText>
                                                           </div>
diff --git a/app/javascript/spec/textual_summary/tests/tag_group.test.js b/app/javascript/spec/textual_summary/tests/tag_group.test.js
index 59e66650134..1375ec194c2 100644
--- a/app/javascript/spec/textual_summary/tests/tag_group.test.js
+++ b/app/javascript/spec/textual_summary/tests/tag_group.test.js
@@ -36,7 +36,7 @@ describe('TagGroup', () => {
     };
 
     const wrapper = mount(<TagGroup items={tagData.items} title={tagData.title} />);
-    expect(wrapper.html()).toContain('<div class="expand wrap_text">Policy,2</div>');
+    expect(wrapper.html()).toContain('<div class="expand wrap_text">Policy\n2</div>');
     expect(wrapper.containsMatchingElement(<i className="fa fa-tag" />)).toEqual(true);
   });
 });
diff --git a/app/stylesheet/miq-structured-list.scss b/app/stylesheet/miq-structured-list.scss
index aa68d6e8bcf..0749605aaaa 100644
--- a/app/stylesheet/miq-structured-list.scss
+++ b/app/stylesheet/miq-structured-list.scss
@@ -158,6 +158,7 @@
   .wrap_text {
     width: 100%;
     word-break: break-all;
+    white-space: pre-line;
   }
 
   &.bordered-list {