fix: prevent parent onclick event trigger

Signed-off-by: eugenejahn <[email protected]>
flyteorg · Apr 30, 2022 · d205f79 · d205f79
1 parent 542307b
commit d205f79
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git 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, selectExecution } from './utils';
+import { calculateNodeExecutionRowLeftSpacing } from './utils';
 
 interface NodeExecutionRowProps {
   abortMetadata?: Admin.IAbortMetadata;
@@ -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,7 +106,9 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
     </div>
   ) : null;
 
-  const onClick = () => selectExecution(state, nodeExecution);
+  // 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
@@ -111,7 +117,7 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
         [selectedClassName]: selected,
       })}
       style={style}
-      onClick={onClick}
+      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
@@ -2,7 +2,6 @@ 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.
@@ -13,7 +12,13 @@ export const SelectNodeExecutionLink: React.FC<{
   linkText: string;
   state: NodeExecutionsTableState;
 }> = ({ className, execution, linkText, state }) => {
-  const onClick = () => selectExecution(state, execution);
+  // 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">

diff --git a/packages/zapp/console/src/components/Executions/Tables/utils.ts b/packages/zapp/console/src/components/Executions/Tables/utils.ts
@@ -4,8 +4,3 @@ 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);
-}
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';