diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/view_document.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/view_document.tsx index 591c91a9021464..8f03ab6190af52 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/view_document.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/view_document.tsx @@ -6,7 +6,7 @@ */ import { EuiButtonIcon, EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui'; -import React, { useState } from 'react'; +import React, { useState, MouseEvent } from 'react'; import { useUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public'; import { buildDataTableRecord } from '@kbn/discover-utils'; import { UnifiedDocViewer } from '@kbn/unified-doc-viewer-plugin/public'; @@ -56,12 +56,20 @@ export const ViewDocument = ({ ping }: { ping: Ping }) => { data-test-subj="syntheticsViewDocumentButton" iconType="inspect" title={INSPECT_DOCUMENT} - onClick={() => { + onClick={(evt: MouseEvent) => { + evt.stopPropagation(); setIsFlyoutVisible(true); }} /> {isFlyoutVisible && ( - setIsFlyoutVisible(false)} ownFocus={true}> + setIsFlyoutVisible(false)} + ownFocus={true} + onClick={(evt: MouseEvent) => { + // needed to prevent propagation to the table row click + evt.stopPropagation(); + }} + >

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/journey_screenshot_preview.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/journey_screenshot_preview.tsx index 5eac5686e9923c..f16586141971dc 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/journey_screenshot_preview.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/journey_screenshot_preview.tsx @@ -61,7 +61,9 @@ export const JourneyScreenshotPreview: React.FC = ({ ); const onImgClick = useCallback( - (_evt: MouseEvent) => { + (evt: MouseEvent) => { + // needed to prevent propagation to the table row click + evt.stopPropagation(); setIsImageEverClicked(true); setIsImageDialogOpen(true); setIsImagePopoverOpen(false); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx index 7309d54aa08dac..45e1e780d1e31e 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx @@ -49,6 +49,7 @@ export const EmptyThumbnail = ({ const noDataMessage = unavailableMessage ?? SCREENSHOT_NOT_AVAILABLE; return ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
{ + // We don't want the placeholder to be clickable + e.stopPropagation(); + e.preventDefault(); + }} + onKeyDown={(e) => { + // We don't want the placeholder to be clickable + e.stopPropagation(); + }} > {isLoading && animateLoading ? ( | MouseEvent) => { + // for table row click to work evt?.stopPropagation?.(); onClose(); }} @@ -127,6 +128,10 @@ export const JourneyScreenshotDialog = ({ animateLoading={false} hasBorder={false} size={'full'} + onClick={(evt) => { + // for table row click to work + evt.stopPropagation(); + }} /> diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/test_runs_table.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/test_runs_table.tsx index 5fe46b6c52697a..de83a03ac49280 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/test_runs_table.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/test_runs_table.tsx @@ -213,7 +213,7 @@ export const TestRunsTable = ({ name: MESSAGE_LABEL, textOnly: true, css: css` - max-width: 600px; + max-width: 500px; `, render: (errorMessage: string) => ( {errorMessage?.length > 0 ? errorMessage : '-'} @@ -269,31 +269,16 @@ export const TestRunsTable = ({ return { 'data-test-subj': `row-${item.monitor.check_group}`, onClick: (evt: MouseEvent) => { - const targetElem = evt.target as HTMLElement; - const isTableRow = - targetElem.parentElement?.classList.contains('euiTableCellContent') || - targetElem.parentElement?.classList.contains('euiTableCellContent__text') || - targetElem?.classList.contains('euiTableCellContent') || - targetElem?.classList.contains('euiBadge__text'); - // we dont want to capture image click event - if ( - isTableRow && - targetElem.tagName !== 'IMG' && - targetElem.tagName !== 'path' && - targetElem.tagName !== 'BUTTON' && - !targetElem.parentElement?.classList.contains('euiLink') - ) { - if (item.monitor.type !== MONITOR_TYPES.BROWSER) { - toggleDetails(item, expandedRows, setExpandedRows); - } else { - history.push( - getTestRunDetailRelativeLink({ - monitorId, - checkGroup: item.monitor.check_group, - locationId: selectedLocation?.id, - }) - ); - } + if (item.monitor.type !== MONITOR_TYPES.BROWSER) { + toggleDetails(item, expandedRows, setExpandedRows); + } else { + history.push( + getTestRunDetailRelativeLink({ + monitorId, + checkGroup: item.monitor.check_group, + locationId: selectedLocation?.id, + }) + ); } }, }; diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_now_mode/simple/ping_list/columns/expand_row.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_now_mode/simple/ping_list/columns/expand_row.tsx index 9ef5ceacc6183b..13cef1917b1cc0 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_now_mode/simple/ping_list/columns/expand_row.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_now_mode/simple/ping_list/columns/expand_row.tsx @@ -5,16 +5,17 @@ * 2.0. */ -import React from 'react'; +import React, { Dispatch, SetStateAction, MouseEvent } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiButtonIcon } from '@elastic/eui'; import { Ping } from '../../../../../../../../common/runtime_types'; import { PingListExpandedRowComponent } from '../expanded_row'; +type PingExpandedRowMap = Record; export const toggleDetails = ( ping: Ping, - expandedRows: Record, - setExpandedRows: (update: Record) => any + expandedRows: PingExpandedRowMap, + setExpandedRows: Dispatch> ) => { // prevent expanding on row click if not expandable if (!rowShouldExpand(ping)) { @@ -48,14 +49,18 @@ export function rowShouldExpand(item: Ping) { interface Props { item: Ping; - expandedRows: Record; - setExpandedRows: (val: Record) => void; + expandedRows: PingExpandedRowMap; + setExpandedRows: Dispatch>; } export const ExpandRowColumn = ({ item, expandedRows, setExpandedRows }: Props) => { return ( toggleDetails(item, expandedRows, setExpandedRows)} + onClick={(evt: MouseEvent) => { + // for table row click + evt.stopPropagation(); + toggleDetails(item, expandedRows, setExpandedRows); + }} isDisabled={!rowShouldExpand(item)} aria-label={ expandedRows[item.docId]