diff --git a/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx b/packages/zapp/console/src/components/Executions/Tables/NodeExecutionRow.tsx index e5f7b7ed4..e1d75f2db 100644 --- 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) => { + // prevent the parent row body onClick event trigger + e.stopPropagation(); + query.refetch(); + }} > @@ -102,13 +106,18 @@ export const NodeExecutionRow: React.FC = ({ ) : 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 (
) => { + // 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 cd1b7fc58..89172d487 100644 --- 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) => { + // 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 ( {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/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';