From 542307b8956eac88772ac6c09cde5f706d1da831 Mon Sep 17 00:00:00 2001
From: eugenejahn <eugenejahnjahn@gmail.com>
Date: Fri, 29 Apr 2022 11:01:40 -0700
Subject: [PATCH] fix: issue 398

Signed-off-by: eugenejahn <eugenejahnjahn@gmail.com>
---
 .../src/components/Executions/Tables/NodeExecutionRow.tsx  | 7 +++++--
 .../Executions/Tables/SelectNodeExecutionLink.tsx          | 5 +++--
 .../console/src/components/Executions/Tables/styles.ts     | 3 +++
 .../zapp/console/src/components/Executions/Tables/utils.ts | 5 +++++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx b/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx
index e5f7b7ed4..abf1662b1 100644
--- a/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx
+++ b/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, {
diff --git a/packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx b/packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx
index cd1b7fc58..5ed0fdef1 100644
--- a/packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx
+++ b/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}
diff --git a/packages/zapp/console/src/components/Executions/Tables/styles.ts b/packages/zapp/console/src/components/Executions/Tables/styles.ts
index 723bea525..4e5709100 100644
--- a/packages/zapp/console/src/components/Executions/Tables/styles.ts
+++ b/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',
diff --git a/packages/zapp/console/src/components/Executions/Tables/utils.ts b/packages/zapp/console/src/components/Executions/Tables/utils.ts
index d0d4eb796..574851242 100644
--- a/packages/zapp/console/src/components/Executions/Tables/utils.ts
+++ b/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);
+}