Merge pull request #9199 from GilbertCherrie/fix_surveys_table

Fix survey table readability

app/helpers/configuration_script_helper.rb

@@ -52,7 +52,8 @@ def textual_group_surveys
     TextualTable.new(
       _("Surveys"),
       items,
-      headers
+      headers,
+      'survey-table'
     )
   end
 

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

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>

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

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}

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%;
+  }
+}

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"