Merge pull request #9320 from liu-samuel/tag-list-customer-case

Making tags more readable

Author: GilbertCherrie

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}

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>

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);
   });
 });

app/stylesheet/miq-structured-list.scss

@@ -158,6 +158,7 @@
   .wrap_text {
     width: 100%;
     word-break: break-all;
+    white-space: pre-line;
   }
 
   &.bordered-list {