From b49c63c50333a507f6cdf72fbc5ad947c98f7407 Mon Sep 17 00:00:00 2001
From: Gilbert Cherrie <Gilbert.Cherrie@ibm.com>
Date: Fri, 31 May 2024 16:09:41 -0400
Subject: [PATCH] Fix survey table readability

---
 app/helpers/configuration_script_helper.rb         |  3 ++-
 app/helpers/textual_table.rb                       |  4 ++--
 .../components/miq-structured-list/index.jsx       |  4 ++--
 .../components/textual_summary/simple_table.jsx    |  7 ++++++-
 .../components/textual_summary/textual_group.jsx   |  1 +
 app/stylesheet/miq-structured-list.scss            | 14 ++++++++++++++
 app/views/configuration_script/show.html.haml      |  3 ++-
 7 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/app/helpers/configuration_script_helper.rb b/app/helpers/configuration_script_helper.rb
index 9e7acd41be5..3222c7d955d 100644
--- a/app/helpers/configuration_script_helper.rb
+++ b/app/helpers/configuration_script_helper.rb
@@ -52,7 +52,8 @@ def textual_group_surveys
     TextualTable.new(
       _("Surveys"),
       items,
-      headers
+      headers,
+      'survey-table'
     )
   end
 
diff --git a/app/helpers/textual_table.rb b/app/helpers/textual_table.rb
index 67e29ef8b31..f5f41014530 100644
--- a/app/helpers/textual_table.rb
+++ b/app/helpers/textual_table.rb
@@ -1,5 +1,5 @@
-TextualTable = Struct.new(:title, :rows, :labels) do
+TextualTable = Struct.new(:title, :rows, :labels, :className) do
   def locals
-    {:title => title, :rows => rows, :labels => labels, :component => 'SimpleTable'}
+    {:title => title, :rows => rows, :labels => labels, :component => 'SimpleTable', :className => className}
   end
 end
diff --git a/app/javascript/components/miq-structured-list/index.jsx b/app/javascript/components/miq-structured-list/index.jsx
index c64f0faaa91..d15f4ed493e 100644
--- a/app/javascript/components/miq-structured-list/index.jsx
+++ b/app/javascript/components/miq-structured-list/index.jsx
@@ -10,7 +10,7 @@ import { hasClickEvents } from './helpers';
 
 /** Component to render the items in summary pages */
 const MiqStructuredList = ({
-  title, headers, rows, mode, onClick, message,
+  title, headers, rows, mode, onClick, message, className = '',
 }) => {
   const clickEvents = hasClickEvents(mode);
 
@@ -35,7 +35,7 @@ const MiqStructuredList = ({
   };
 
   const accordionList = () => (
-    <Accordion align="start" className={classNames('miq-structured-list-accordion', mode)}>
+    <Accordion align="start" className={classNames('miq-structured-list-accordion', mode, className)}>
       <AccordionItem title={title} open>
         {simpleList()}
       </AccordionItem>
diff --git a/app/javascript/components/textual_summary/simple_table.jsx b/app/javascript/components/textual_summary/simple_table.jsx
index 7c18b250f7c..f36d267c031 100644
--- a/app/javascript/components/textual_summary/simple_table.jsx
+++ b/app/javascript/components/textual_summary/simple_table.jsx
@@ -4,10 +4,13 @@ import PropTypes from 'prop-types';
 import MiqStructuredList from '../miq-structured-list';
 
 export default function SimpleTable(props) {
-  const { rows, labels, title } = props;
+  const {
+    rows, labels, title, className,
+  } = props;
 
   return (
     <MiqStructuredList
+      className={className}
       headers={labels}
       rows={rows}
       title={title}
@@ -25,9 +28,11 @@ SimpleTable.propTypes = {
   ])),
   rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.any)),
   onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
 };
 
 SimpleTable.defaultProps = {
   rows: [],
   labels: '',
+  className: undefined,
 };
diff --git a/app/javascript/components/textual_summary/textual_group.jsx b/app/javascript/components/textual_summary/textual_group.jsx
index d8169bd5fa3..fc6697a880b 100644
--- a/app/javascript/components/textual_summary/textual_group.jsx
+++ b/app/javascript/components/textual_summary/textual_group.jsx
@@ -20,6 +20,7 @@ const renderComponent = (props) => {
     case 'SimpleTable':
       return (
         <SimpleTable
+          className={group.className}
           labels={group.labels}
           rows={group.rows}
           title={group.title}
diff --git a/app/stylesheet/miq-structured-list.scss b/app/stylesheet/miq-structured-list.scss
index 28241004939..eab4d2a798f 100644
--- a/app/stylesheet/miq-structured-list.scss
+++ b/app/stylesheet/miq-structured-list.scss
@@ -257,3 +257,17 @@
     }
   }
 }
+
+.templates-summary-page {
+  .col-lg-6 {
+    width: 100%;
+  }
+
+  .miq-structured-list-accordion {
+    width: 50%;
+  }
+  
+  .survey-table {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/app/views/configuration_script/show.html.haml b/app/views/configuration_script/show.html.haml
index e5575cb521c..d97e79c2dba 100644
--- a/app/views/configuration_script/show.html.haml
+++ b/app/views/configuration_script/show.html.haml
@@ -1,2 +1,3 @@
 = render :partial => "layouts/flash_msg"
-= render :partial => "layouts/textual_groups_generic"
+.templates-summary-page
+  = render :partial => "layouts/textual_groups_generic"