[8.11] [Synthetics] Fix and refactor table row click actions for test…

… runs table (#166915) (#169195)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[Synthetics] Fix and refactor table row click actions for test runs
table (#166915)](#166915)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"sourceCommit":{"committedDate":"2023-10-18T06:33:53Z","message":"[Synthetics]
Fix and refactor table row click actions for test runs table
(#166915)","sha":"1d2d6e4cc6ff9a1dcc523906995a1797dbfd5478","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:uptime","release_note:skip","v8.11.0","v8.12.0"],"number":166915,"url":"https://github.com/elastic/kibana/pull/166915","mergeCommit":{"message":"[Synthetics]
Fix and refactor table row click actions for test runs table
(#166915)","sha":"1d2d6e4cc6ff9a1dcc523906995a1797dbfd5478"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/166915","number":166915,"mergeCommit":{"message":"[Synthetics]
Fix and refactor table row click actions for test runs table
(#166915)","sha":"1d2d6e4cc6ff9a1dcc523906995a1797dbfd5478"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <shahzad31comp@gmail.com>

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<HTMLButtonElement>) => {
+          evt.stopPropagation();
           setIsFlyoutVisible(true);
         }}
       />
       {isFlyoutVisible && (
-        <EuiFlyout onClose={() => setIsFlyoutVisible(false)} ownFocus={true}>
+        <EuiFlyout
+          onClose={() => setIsFlyoutVisible(false)}
+          ownFocus={true}
+          onClick={(evt: MouseEvent) => {
+            // needed to prevent propagation to the table row click
+            evt.stopPropagation();
+          }}
+        >
           <EuiFlyoutHeader>
             <EuiTitle size="m">
               <h4>

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<StepImagePopoverProps> = ({
   );
 
   const onImgClick = useCallback(
-    (_evt: MouseEvent<HTMLImageElement>) => {
+    (evt: MouseEvent<HTMLImageElement>) => {
+      // needed to prevent propagation to the table row click
+      evt.stopPropagation();
       setIsImageEverClicked(true);
       setIsImageDialogOpen(true);
       setIsImagePopoverOpen(false);

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
     <div
       data-test-subj="stepScreenshotPlaceholder"
       role="img"
@@ -62,6 +63,15 @@ export const EmptyThumbnail = ({
         border: euiTheme.border.thin,
         ...(borderRadius ? { borderRadius } : {}),
       }}
+      onClick={(e) => {
+        // 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 ? (
         <EuiSkeletonRectangle

x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_screenshot_dialog.tsx

@@ -107,6 +107,7 @@ export const JourneyScreenshotDialog = ({
     <EuiOutsideClickDetector onOutsideClick={onClose}>
       <EuiModal
         onClose={(evt?: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLButtonElement>) => {
+          // 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();
+            }}
           />
         </ModalBodyStyled>
 

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) => (
         <EuiText size="s">{errorMessage?.length > 0 ? errorMessage : '-'}</EuiText>
@@ -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,
+            })
+          );
         }
       },
     };

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<string, JSX.Element>;
 
 export const toggleDetails = (
   ping: Ping,
-  expandedRows: Record<string, JSX.Element>,
-  setExpandedRows: (update: Record<string, JSX.Element>) => any
+  expandedRows: PingExpandedRowMap,
+  setExpandedRows: Dispatch<SetStateAction<PingExpandedRowMap>>
 ) => {
   // 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<string, JSX.Element>;
-  setExpandedRows: (val: Record<string, JSX.Element>) => void;
+  expandedRows: PingExpandedRowMap;
+  setExpandedRows: Dispatch<SetStateAction<PingExpandedRowMap>>;
 }
 export const ExpandRowColumn = ({ item, expandedRows, setExpandedRows }: Props) => {
   return (
     <EuiButtonIcon
       data-test-subj="uptimePingListExpandBtn"
-      onClick={() => toggleDetails(item, expandedRows, setExpandedRows)}
+      onClick={(evt: MouseEvent<HTMLButtonElement>) => {
+        // for table row click
+        evt.stopPropagation();
+        toggleDetails(item, expandedRows, setExpandedRows);
+      }}
       isDisabled={!rowShouldExpand(item)}
       aria-label={
         expandedRows[item.docId]