Fixes #38806 - Stabilize job detail table and fix unresponsive actions

webpack/JobInvocationDetail/JobInvocationDetail.scss

@@ -74,6 +74,10 @@ section.job-additional-info {
     margin-left: 10px;
     margin-right: 15px;
   }
+
+  .pf-v5-c-table__tbody > tr.row-hidden {
+    display: none;
+  }
 }
 
 .template-invocation {

webpack/JobInvocationDetail/JobInvocationHostTable.js

@@ -61,9 +61,47 @@ const JobInvocationHostTable = ({
   const [allHostsIds, setAllHostsIds] = useState([]);
 
   // Expansive items
-  const [expandedHost, setExpandedHost] = useState([]);
+  const [expandedHost, setExpandedHost] = useState(new Set());
   const prevStatusLabel = useRef(statusLabel);
 
+  const [hostInvocationStates, setHostInvocationStates] = useState({});
+
+  const getInvocationState = hostId =>
+    hostInvocationStates[hostId] || {
+      showOutputType: { stderr: true, stdout: true, debug: true },
+      showTemplatePreview: false,
+      showCommand: false,
+    };
+
+  const updateInvocationState = (hostId, stateKey, value) => {
+    setHostInvocationStates(prevStates => {
+      const currentHostState = getInvocationState(hostId);
+
+      const newValue =
+        typeof value === 'function' ? value(currentHostState[stateKey]) : value;
+
+      return {
+        ...prevStates,
+        [hostId]: {
+          ...currentHostState,
+          [stateKey]: newValue,
+        },
+      };
+    });
+  };
+
+  const isHostExpanded = hostId => expandedHost.has(hostId);
+  const setHostExpanded = (hostId, isExpanding = true) =>
+    setExpandedHost(prevExpandedSet => {
+      const newSet = new Set(prevExpandedSet);
+      if (isExpanding) {
+        newSet.add(hostId);
+      } else {
+        newSet.delete(hostId);
+      }
+      return newSet;
+    });
+
   // Page table params
   // Parse URL
   const {
@@ -307,29 +345,18 @@ const JobInvocationHostTable = ({
     </Tr>
   );
 
-  const isHostExpanded = host => expandedHost.includes(host.id);
-
-  const setHostExpanded = (host, isExpanding = true) =>
-    setExpandedHost(prevExpanded => {
-      const otherExpandedHosts = prevExpanded.filter(h => h !== host.id);
-      return isExpanding
-        ? [...otherExpandedHosts, host.id]
-        : otherExpandedHosts;
-    });
-
   const pageHostIds = results.map(h => h.id);
 
   const areAllPageRowsExpanded =
     pageHostIds.length > 0 &&
-    pageHostIds.every(hostId => expandedHost.includes(hostId));
+    pageHostIds.every(hostId => expandedHost.has(hostId));
 
   const onExpandAll = () => {
     setExpandedHost(() => {
       if (areAllPageRowsExpanded) {
-        return [];
+        return new Set();
       }
-
-      return pageHostIds;
+      return new Set(pageHostIds);
     });
   };
 
@@ -393,54 +420,88 @@ const JobInvocationHostTable = ({
           isDeleteable={false}
           childrenOutsideTbody
         >
-          {results.map((result, rowIndex) => (
-            <Tbody key={result.id} isExpanded={isHostExpanded(result)}>
-              <Tr ouiaId={`table-row-${result.id}`}>
-                <Td
-                  expand={{
-                    rowIndex,
-                    isExpanded: isHostExpanded(result),
-                    onToggle: () =>
-                      setHostExpanded(result, !isHostExpanded(result)),
-                    expandId: 'host-expandable',
-                  }}
-                />
-                <RowSelectTd rowData={result} {...{ selectOne, isSelected }} />
-                {columnNamesKeys.map(k => (
-                  <Td key={k}>{columns[k].wrapper(result)}</Td>
-                ))}
-                <Td isActionCell>
-                  <RowActions hostID={result.id} jobID={id} />
-                </Td>
-              </Tr>
-              <Tr
-                isExpanded={isHostExpanded(result)}
-                ouiaId="table-row-expanded-sections"
-              >
-                <Td
-                  dataLabel={`${result.id}-expandable-content`}
-                  colSpan={columnNamesKeys.length + 3}
+          {results.map((result, rowIndex) => {
+            const currentInvocationState = getInvocationState(result.id);
+            return (
+              <Tbody key={result.id}>
+                <Tr ouiaId={`table-row-${result.id}`}>
+                  <Td
+                    expand={{
+                      rowIndex,
+                      isExpanded: isHostExpanded(result.id),
+                      onToggle: () =>
+                        setHostExpanded(result.id, !isHostExpanded(result.id)),
+                      expandId: 'host-expandable',
+                    }}
+                  />
+                  <RowSelectTd
+                    rowData={result}
+                    selectOne={selectOne}
+                    isSelected={isSelected}
+                  />
+                  {columnNamesKeys.map(k => (
+                    <Td key={k}>{columns[k].wrapper(result)}</Td>
+                  ))}
+                  <Td isActionCell>
+                    <RowActions hostID={result.id} jobID={id} />
+                  </Td>
+                </Tr>
+                <Tr
+                  isExpanded={isHostExpanded(result.id)}
+                  ouiaId="table-row-expanded-sections"
+                  className={!isHostExpanded(result.id) ? 'row-hidden' : ''}
                 >
-                  <ExpandableRowContent>
-                    {result.job_status === 'cancelled' ||
-                    result.job_status === 'N/A' ? (
-                      <div>
-                        {__('A task for this host has not been started')}
-                      </div>
-                    ) : (
-                      <TemplateInvocation
-                        key={`${result.id}-${result.job_status}`}
-                        hostID={result.id}
-                        jobID={id}
-                        isInTableView
-                        isExpanded={isHostExpanded(result)}
-                      />
-                    )}
-                  </ExpandableRowContent>
-                </Td>
-              </Tr>
-            </Tbody>
-          ))}
+                  <Td
+                    dataLabel={`${result.id}-expandable-content`}
+                    colSpan={columnNamesKeys.length + 3}
+                  >
+                    <ExpandableRowContent>
+                      {result.job_status === 'cancelled' ||
+                      result.job_status === 'N/A' ? (
+                        <div>
+                          {__('A task for this host has not been started')}
+                        </div>
+                      ) : (
+                        <TemplateInvocation
+                          key={result.id}
+                          hostID={result.id}
+                          jobID={id}
+                          isInTableView
+                          isExpanded={isHostExpanded(result.id)}
+                          showOutputType={currentInvocationState.showOutputType}
+                          showTemplatePreview={
+                            currentInvocationState.showTemplatePreview
+                          }
+                          showCommand={currentInvocationState.showCommand}
+                          setShowOutputType={value =>
+                            updateInvocationState(
+                              result.id,
+                              'showOutputType',
+                              value
+                            )
+                          }
+                          setShowTemplatePreview={value =>
+                            updateInvocationState(
+                              result.id,
+                              'showTemplatePreview',
+                              value
+                            )
+                          }
+                          setShowCommand={value =>
+                            updateInvocationState(
+                              result.id,
+                              'showCommand',
+                              value
+                            )
+                          }
+                        />
+                      )}
+                    </ExpandableRowContent>
+                  </Td>
+                </Tr>
+              </Tbody>
+            );
+          })}
         </Table>
       </TableIndexPage>
     </>

webpack/JobInvocationDetail/TemplateInvocation.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { ClipboardCopyButton, Alert, Skeleton } from '@patternfly/react-core';
@@ -60,6 +60,12 @@ export const TemplateInvocation = ({
   isExpanded,
   hostName,
   hostProxy,
+  showOutputType,
+  setShowOutputType,
+  showTemplatePreview,
+  setShowTemplatePreview,
+  showCommand,
+  setShowCommand,
 }) => {
   const intervalRef = useRef(null);
   const templateURL = showTemplateInvocationUrl(hostID, jobID);
@@ -74,14 +80,6 @@ export const TemplateInvocation = ({
     responseRef.current = response;
   }, [response]);
 
-  const [showOutputType, setShowOutputType] = useState({
-    stderr: true,
-    stdout: true,
-    debug: true,
-  });
-  const [showTemplatePreview, setShowTemplatePreview] = useState(false);
-  const [showCommand, setShowCommand] = useState(false);
-
   useEffect(() => {
     const dispatchFetch = () => {
       dispatch(
@@ -123,12 +121,8 @@ export const TemplateInvocation = ({
     };
   }, [isExpanded, dispatch, templateURL, hostID]);
 
-  if (!isExpanded) {
-    return null;
-  }
-
-  if ((status === STATUS.PENDING && isEmpty(response)) || !response) {
-    return <Skeleton />;
+  if (!response || (status === STATUS.PENDING && isEmpty(response))) {
+    return <Skeleton data-testid="template-invocation-skeleton" />;
   }
 
   const errorMessage =
@@ -239,6 +233,16 @@ TemplateInvocation.propTypes = {
   jobID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   isInTableView: PropTypes.bool,
   isExpanded: PropTypes.bool,
+  showOutputType: PropTypes.shape({
+    stderr: PropTypes.bool,
+    stdout: PropTypes.bool,
+    debug: PropTypes.bool,
+  }).isRequired,
+  setShowOutputType: PropTypes.func.isRequired,
+  showTemplatePreview: PropTypes.bool.isRequired,
+  setShowTemplatePreview: PropTypes.func.isRequired,
+  showCommand: PropTypes.bool.isRequired,
+  setShowCommand: PropTypes.func.isRequired,
 };
 
 TemplateInvocation.defaultProps = {

webpack/JobInvocationDetail/TemplateInvocationComponents/OutputToggleGroup.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
   ToggleGroup,
@@ -27,31 +27,49 @@ export const OutputToggleGroup = ({
   taskCancellable,
   permissions,
 }) => {
-  const handleSTDERRClick = _isSelected => {
-    setShowOutputType(prevShowOutputType => ({
-      ...prevShowOutputType,
-      stderr: _isSelected,
-    }));
-  };
+  const handleSTDERRClick = useCallback(
+    _isSelected => {
+      setShowOutputType(prevShowOutputType => ({
+        ...prevShowOutputType,
+        stderr: _isSelected,
+      }));
+    },
+    [setShowOutputType]
+  );
 
-  const handleSTDOUTClick = _isSelected => {
-    setShowOutputType(prevShowOutputType => ({
-      ...prevShowOutputType,
-      stdout: _isSelected,
-    }));
-  };
-  const handleDEBUGClick = _isSelected => {
-    setShowOutputType(prevShowOutputType => ({
-      ...prevShowOutputType,
-      debug: _isSelected,
-    }));
-  };
-  const handlePreviewTemplateClick = _isSelected => {
-    setShowTemplatePreview(_isSelected);
-  };
-  const handleCommandClick = _isSelected => {
-    setShowCommand(_isSelected);
-  };
+  const handleSTDOUTClick = useCallback(
+    _isSelected => {
+      setShowOutputType(prevShowOutputType => ({
+        ...prevShowOutputType,
+        stdout: _isSelected,
+      }));
+    },
+    [setShowOutputType]
+  );
+
+  const handleDEBUGClick = useCallback(
+    _isSelected => {
+      setShowOutputType(prevShowOutputType => ({
+        ...prevShowOutputType,
+        debug: _isSelected,
+      }));
+    },
+    [setShowOutputType]
+  );
+
+  const handlePreviewTemplateClick = useCallback(
+    _isSelected => {
+      setShowTemplatePreview(_isSelected);
+    },
+    [setShowTemplatePreview]
+  );
+
+  const handleCommandClick = useCallback(
+    _isSelected => {
+      setShowCommand(_isSelected);
+    },
+    [setShowCommand]
+  );
 
   const toggleGroupItems = {
     stderr: {