Make whole row clickable to open TaskExecutionDetails panel (#444)

* fix: issue 398 * fix: prevent parent onclick event trigger Signed-off-by: eugenejahn <[email protected]>
flyteorg · May 17, 2022 · bcc03fa · bcc03fa
1 parent 13fa646
commit bcc03fa
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git a/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx b/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx
@@ -35,7 +35,11 @@ const ChildFetchErrorIcon: React.FC<{
       disableTouchRipple={true}
       size="small"
       title={titleStrings.childGroupFetchFailed}
-      onClick={() => query.refetch()}
+      onClick={(e: React.MouseEvent<HTMLElement>) => {
+        // prevent the parent row body onClick event trigger
+        e.stopPropagation();
+        query.refetch();
+      }}
     >
       <ErrorOutline />
     </IconButton>
@@ -102,13 +106,18 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
     </div>
   ) : null;
 
+  // open the side panel for selected execution's detail
+  // use null in case if there is no execution provided - when it is null, will close side panel
+  const onClickRow = () => state.setSelectedExecution(nodeExecution?.id ?? null);
+
   return (
     <div
       role="listitem"
-      className={classnames(tableStyles.row, {
+      className={classnames(tableStyles.row, tableStyles.clickableRow, {
         [selectedClassName]: selected,
       })}
       style={style}
+      onClick={onClickRow}
     >
       <div
         className={classnames(tableStyles.rowContent, {

diff --git a/packages/zapp/console/src/components/Executions/Tables/RowExpander.tsx b/packages/zapp/console/src/components/Executions/Tables/RowExpander.tsx
@@ -14,7 +14,11 @@ export const RowExpander: React.FC<{
     disableTouchRipple={true}
     size="small"
     title={titleStrings.expandRow}
-    onClick={onClick}
+    onClick={(e: React.MouseEvent<HTMLElement>) => {
+      // prevent the parent row body onClick event trigger
+      e.stopPropagation();
+      onClick();
+    }}
   >
     {expanded ? <ExpandMore /> : <ChevronRight />}
   </IconButton>

diff --git a/packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx b/packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx
@@ -12,8 +12,14 @@ 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);
+  // open the side panel for selected execution's detail
+  const onClick = (e: React.MouseEvent<HTMLElement>) => {
+    // prevent the parent row body onClick event trigger
+    e.stopPropagation();
+    // use null in case if there is no execution provided - when it is null will close panel
+    state.setSelectedExecution(execution?.id ?? null);
+  };
+
   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
@@ -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/common/ExpandableMonospaceText.tsx b/packages/zapp/console/src/components/common/ExpandableMonospaceText.tsx
@@ -119,13 +119,20 @@ export const ExpandableMonospaceText: React.FC<ExpandableMonospaceTextProps> = (
 }) => {
   const [expanded, setExpanded] = React.useState(initialExpansionState);
   const styles = useExpandableMonospaceTextStyles();
-  const onClickExpand = () => {
+  const onClickExpand = (e: React.MouseEvent<HTMLElement>) => {
+    // prevent the parent row body onClick event trigger
+    e.stopPropagation();
+
     setExpanded(!expanded);
     if (onExpandCollapse) {
       onExpandCollapse(!expanded);
     }
   };
-  const onClickCopy = () => copyToClipboard(text);
+  const onClickCopy = (e: React.MouseEvent<HTMLElement>) => {
+    // prevent the parent row body onClick event trigger
+    e.stopPropagation();
+    copyToClipboard(text);
+  };
 
   const expandButtonText = expanded ? 'Collapse' : 'Click to expand inline';