web: Even "better" hidden expandable content

To recap, a PF DataList doesn't have a built-in way to hide the
"expandable content" toggle, so on the console page the items -- which
have a mixture of expandable content and not -- don't line up.

In I33fdafb4e5b98e546c8615a3d65f52c944521cf7 I tried to fix this by
using a visibility:hidden toggle, based on ideas from the comments in
the inline github issue.

What I didn't realise is this doesn't work quite correctly on very
narrow (mobile) views.  The problem is that the class hierarchy needs
to look like

 <row>
   <control>
    <toggle button />
   </control>
   <content>
    <cell />
    <cell />
     ...
   </content>
 </row>

The reason for this is that the <content> is a grid placed *next* to
the <control>.  So when it squishes up, it should look like

 |-- |
 | > | name
 |   | <magnifying> <status>
 |   | <time>
 |---|

With my first attempt, the hidden toggle ">" had all the right
classes, but was part of the content.  This looks fine when all the
content is in a horizontal line; but when it gets to a very small page
width we end up with a hidden toggle button in a single column *above*
the name, pushing everything down

 | > hidden button <
 | name
 | <magnifying> <status>
 | <time>

This leads to a large gap between items and misalignment on small
width devices.

Upon further reflection, it has struck me that we don't *have* to use
the React compontents, and what we need to do here is build our own
datalist item from the PF classes directly, as if we were writing with
PF in HTML.  We do this here, adding the hidden to the expandable
button.

This works on all my testing, and the generated output via the
browsers console inspector looks the same as using the React
components.  Obviously if PF merge a change where we can do this via a
prop to the compontent it is much more idiomatic to React code, but
this should work fine too.

Change-Id: I2048554f46b6ef3ec5410967e00400a593c572d7

1 files changed, 16 insertions, 24 deletions

diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index f677dfbd2..8fa79a125 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -227,26 +227,6 @@ class HostTask extends React.Component {
       name = task.role.name + ': ' + name
     }
 
-    // NOTE(ianw) 2022-08-26 since we have some rows that expand and
-    // others that don't, the expansion button pushes things out of
-    // alignment.  This tries to emulate the button and then
-    // hide it.  See also:
-    //   https://github.com/patternfly/patternfly/issues/5055
-    // We might want to think about other ways to present this?
-    if (!interestingKeys) {
-      dataListCells.push(
-        <DataListCell key='padding-icon' isIcon={true}
-                      class='pf-c-data-list__item-control'>
-          <div className='pf-c-data-list__toggle'
-               style={{visibility: 'hidden'}}>
-            <Button disabled>
-              <AngleRightIcon />
-            </Button>
-          </div>
-        </DataListCell>
-      )
-    }
-
     dataListCells.push(
       <DataListCell key='name' width={4}>{name}</DataListCell>
     )
@@ -323,11 +303,23 @@ class HostTask extends React.Component {
                </DataListContent>
              </DataListItem>
     } else {
-      item = <DataListItem>
-               <DataListItemRow>
+      // We currently have to build the data-list item/row/control manually
+      // as we don't have a way to hide the toggle.  Hopefully PF will
+      // add a prop that does this so we can get rid of this, see:
+      //   https://github.com/patternfly/patternfly/issues/5055
+      item = <li className="pf-c-data-list__item">
+               <div className="pf-c-data-list__item-row">
+                 <div className="pf-c-data-list__item-control"
+                      style={{visibility: 'hidden'}}>
+                   <div className="pf-c-data-list__toggle">
+                     <Button disabled>
+                       <AngleRightIcon />
+                     </Button>
+                   </div>
+                 </div>
                  <DataListItemCells dataListCells={ dataListCells } />
-               </DataListItemRow>
-             </DataListItem>
+               </div>
+             </li>
     }
 
     const modalDescription = <Flex>