Make whole row clickable to open TaskExecutionDetails panel

packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx

@@ -14,7 +14,7 @@ import { ExpandableExecutionError } from './ExpandableExecutionError';
 import { NodeExecutionChildren } from './NodeExecutionChildren';
 import { RowExpander } from './RowExpander';
 import { selectedClassName, useExecutionTableStyles } from './styles';
-import { calculateNodeExecutionRowLeftSpacing } from './utils';
+import { calculateNodeExecutionRowLeftSpacing, selectExecution } from './utils';
 
 interface NodeExecutionRowProps {
   abortMetadata?: Admin.IAbortMetadata;
@@ -102,13 +102,16 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
     </div>
   ) : null;
 
+  const onClick = () => selectExecution(state, nodeExecution);
+
   return (
     <div
       role="listitem"
-      className={classnames(tableStyles.row, {
+      className={classnames(tableStyles.row, tableStyles.clickableRow, {
         [selectedClassName]: selected,
       })}
       style={style}
+      onClick={onClick}
     >
       <div
         className={classnames(tableStyles.rowContent, {

packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx

@@ -2,6 +2,7 @@ import { Link } from '@material-ui/core';
 import { NodeExecution } from 'models/Execution/types';
 import * as React from 'react';
 import { NodeExecutionsTableState } from './types';
+import { selectExecution } from './utils';
 
 /** Renders a link that, when clicked, will trigger selection of the
  * given NodeExecution.
@@ -12,8 +13,8 @@ export const SelectNodeExecutionLink: React.FC<{
   linkText: string;
   state: NodeExecutionsTableState;
 }> = ({ className, execution, linkText, state }) => {
-  // use null in case if there is no execution provied - to close panel
-  const onClick = () => state.setSelectedExecution(execution?.id ?? null);
+  const onClick = () => selectExecution(state, execution);
+
   return (
     <Link component="button" className={className} onClick={onClick} variant="body1">
       {linkText}

packages/zapp/console/src/components/Executions/Tables/styles.ts

@@ -98,6 +98,9 @@ export const useExecutionTableStyles = makeStyles((theme: Theme) => ({
       backgroundColor: listhoverColor,
     },
   },
+  clickableRow: {
+    cursor: 'pointer',
+  },
   rowContent: {},
   rowColumns: {
     alignItems: 'center',

packages/zapp/console/src/components/Executions/Tables/utils.ts

@@ -4,3 +4,8 @@ import { nameColumnLeftMarginGridWidth } from './styles';
 export function calculateNodeExecutionRowLeftSpacing(level: number, spacing: Spacing) {
   return spacing(nameColumnLeftMarginGridWidth + 3 * level);
 }
+
+export function selectExecution(state, nodeExecution) {
+  // use null in case if there is no execution provied - to close panel
+  state.setSelectedExecution(nodeExecution?.id ?? null);
+}