From d205f795abdd9957aaa893c365a9bcffd201f5b8 Mon Sep 17 00:00:00 2001 From: eugenejahn Date: Fri, 29 Apr 2022 21:49:00 -0700 Subject: [PATCH] fix: prevent parent onclick event trigger Signed-off-by: eugenejahn --- .../Executions/Tables/NodeExecutionRow.tsx | 14 ++++++++++---- .../components/Executions/Tables/RowExpander.tsx | 6 +++++- .../Executions/Tables/SelectNodeExecutionLink.tsx | 9 +++++++-- .../src/components/Executions/Tables/utils.ts | 5 ----- .../components/common/ExpandableMonospaceText.tsx | 11 +++++++++-- 5 files changed, 31 insertions(+), 14 deletions(-) diff --git a/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx b/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx index abf1662b1..e1d75f2db 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, 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) => { + // prevent the parent row body onClick event trigger + e.stopPropagation(); + query.refetch(); + }} > @@ -102,7 +106,9 @@ export const NodeExecutionRow: React.FC = ({ ) : 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 (
= ({ [selectedClassName]: selected, })} style={style} - onClick={onClick} + onClick={onClickRow} >
) => { + // prevent the parent row body onClick event trigger + e.stopPropagation(); + onClick(); + }} > {expanded ? : } diff --git a/packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx b/packages/zapp/console/src/components/Executions/Tables/SelectNodeExecutionLink.tsx index 5ed0fdef1..89172d487 100644 --- 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) => { + // 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 ( diff --git a/packages/zapp/console/src/components/Executions/Tables/utils.ts b/packages/zapp/console/src/components/Executions/Tables/utils.ts index 574851242..d0d4eb796 100644 --- 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 index 7e32f8bbc..c6a47805c 100644 --- 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 = ( }) => { const [expanded, setExpanded] = React.useState(initialExpansionState); const styles = useExpandableMonospaceTextStyles(); - const onClickExpand = () => { + const onClickExpand = (e: React.MouseEvent) => { + // 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) => { + // prevent the parent row body onClick event trigger + e.stopPropagation(); + copyToClipboard(text); + }; const expandButtonText = expanded ? 'Collapse' : 'Click to expand inline';