[Security Solution][Resolver] Simplify CopyableField styling and add …

…comments (#79594)

x-pack/plugins/security_solution/public/resolver/view/panels/copyable_panel_field.tsx

@@ -9,39 +9,46 @@
 import { EuiToolTip, EuiPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import React, { memo, useState, useContext } from 'react';
+import React, { memo, useState } from 'react';
 import { WithCopyToClipboard } from '../../../common/lib/clipboard/with_copy_to_clipboard';
 import { useColors } from '../use_colors';
-import { ResolverPanelContext } from './panel_context';
+import { StyledPanel } from '../styles';
 
 interface StyledCopyableField {
   readonly backgroundColor: string;
   readonly activeBackgroundColor: string;
 }
 
 const StyledCopyableField = styled.div<StyledCopyableField>`
-  background-color: ${(props) => props.backgroundColor};
   border-radius: 3px;
   padding: 4px;
   transition: background 0.2s ease;
 
-  &:hover {
-    background-color: ${(props) => props.activeBackgroundColor};
-    color: #fff;
+  ${StyledPanel}:hover & {
+    background-color: ${(props) => props.backgroundColor};
+
+    &:hover {
+      background-color: ${(props) => props.activeBackgroundColor};
+      color: #fff;
+    }
   }
 `;
 
+/**
+ * Field that behaves similarly to the current implementation of copyable fields in timeline as of 7.10
+ * When the panel is hovered, these fields will show a gray background
+ * When you then hover over these fields they will show a blue background and a tooltip with a copy button will appear
+ */
 export const CopyablePanelField = memo(
   ({ textToCopy, content }: { textToCopy: string; content: JSX.Element | string }) => {
-    const { linkColor, copyableBackground } = useColors();
+    const { linkColor, copyableFieldBackground } = useColors();
     const [isOpen, setIsOpen] = useState(false);
-    const panelContext = useContext(ResolverPanelContext);
 
     const onMouseEnter = () => setIsOpen(true);
 
     const ButtonContent = memo(() => (
       <StyledCopyableField
-        backgroundColor={panelContext.isHoveringInPanel ? copyableBackground : 'transparent'}
+        backgroundColor={copyableFieldBackground}
         data-test-subj="resolver:panel:copyable-field"
         activeBackgroundColor={linkColor}
         onMouseEnter={onMouseEnter}

x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx

@@ -6,7 +6,7 @@
 
 /* eslint-disable react/display-name */
 
-import React, { memo, useState } from 'react';
+import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
 import * as selectors from '../../store/selectors';
 import { NodeEventsInCategory } from './node_events_of_type';
@@ -15,48 +15,34 @@ import { NodeDetail } from './node_detail';
 import { NodeList } from './node_list';
 import { EventDetail } from './event_detail';
 import { PanelViewAndParameters } from '../../types';
-import { ResolverPanelContext } from './panel_context';
 
 /**
  * Show the panel that matches the `panelViewAndParameters` (derived from the browser's location.search)
  */
 
 export const PanelRouter = memo(function () {
   const params: PanelViewAndParameters = useSelector(selectors.panelViewAndParameters);
-  const [isHoveringInPanel, updateIsHoveringInPanel] = useState(false);
-
-  const triggerPanelHover = () => updateIsHoveringInPanel(true);
-  const stopPanelHover = () => updateIsHoveringInPanel(false);
-
-  /* The default 'Event List' / 'List of all processes' view */
-  let panelViewToRender = <NodeList />;
-
   if (params.panelView === 'nodeDetail') {
-    panelViewToRender = <NodeDetail nodeID={params.panelParameters.nodeID} />;
+    return <NodeDetail nodeID={params.panelParameters.nodeID} />;
   } else if (params.panelView === 'nodeEvents') {
-    panelViewToRender = <NodeEvents nodeID={params.panelParameters.nodeID} />;
+    return <NodeEvents nodeID={params.panelParameters.nodeID} />;
   } else if (params.panelView === 'nodeEventsInCategory') {
-    panelViewToRender = (
+    return (
       <NodeEventsInCategory
         nodeID={params.panelParameters.nodeID}
         eventCategory={params.panelParameters.eventCategory}
       />
     );
   } else if (params.panelView === 'eventDetail') {
-    panelViewToRender = (
+    return (
       <EventDetail
         nodeID={params.panelParameters.nodeID}
         eventID={params.panelParameters.eventID}
         eventCategory={params.panelParameters.eventCategory}
       />
     );
+  } else {
+    /* The default 'Event List' / 'List of all processes' view */
+    return <NodeList />;
   }
-
-  return (
-    <ResolverPanelContext.Provider value={{ isHoveringInPanel }}>
-      <div onMouseEnter={triggerPanelHover} onMouseLeave={stopPanelHover}>
-        {panelViewToRender}
-      </div>
-    </ResolverPanelContext.Provider>
-  );
 });

x-pack/plugins/security_solution/public/resolver/view/use_colors.ts

@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';
 
 type ResolverColorNames =
-  | 'copyableBackground'
+  | 'copyableFieldBackground'
   | 'descriptionText'
   | 'full'
   | 'graphControls'
@@ -33,7 +33,7 @@ export function useColors(): ColorMap {
   const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
   return useMemo(() => {
     return {
-      copyableBackground: theme.euiColorLightShade,
+      copyableFieldBackground: theme.euiColorLightShade,
       descriptionText: theme.euiTextColor,
       full: theme.euiColorFullShade,
       graphControls: theme.euiColorDarkestShade,