match timeline behavior

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

@@ -9,38 +9,41 @@
 import { EuiToolTip, EuiPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useContext } from 'react';
 import { WithCopyToClipboard } from '../../../common/lib/clipboard/with_copy_to_clipboard';
 import { useColors } from '../use_colors';
+import { ResolverPanelContext } from './panel_context';
 
 interface StyledCopyableField {
-  readonly borderColor: string;
-  readonly hoverBackground: string;
+  readonly backgroundColor: string;
+  readonly activeBackgroundColor: string;
 }
 
 const StyledCopyableField = styled.div<StyledCopyableField>`
-  border: 0.1em solid;
-  border-color: ${(props) => props.borderColor};
+  background-color: ${(props) => props.backgroundColor};
   border-radius: 3px;
   padding: 4px;
+  transition: background 0.2s ease;
 
   &:hover {
-    background-color: ${(props) => props.hoverBackground};
+    background-color: ${(props) => props.activeBackgroundColor};
     color: #fff;
   }
 `;
 
 export const CopyablePanelField = memo(
   ({ textToCopy, content }: { textToCopy: string; content: JSX.Element | string }) => {
-    const { linkColor, pillStroke } = useColors();
+    const { linkColor, copyableBackground } = useColors();
     const [isOpen, setIsOpen] = useState(false);
+    const panelContext = useContext(ResolverPanelContext);
+
     const onMouseEnter = () => setIsOpen(true);
 
     const ButtonContent = memo(() => (
       <StyledCopyableField
-        borderColor={pillStroke}
+        backgroundColor={panelContext.isHoveringInPanel ? copyableBackground : 'transparent'}
         data-test-subj="resolver:panel:copyable-field"
-        hoverBackground={linkColor}
+        activeBackgroundColor={linkColor}
         onMouseEnter={onMouseEnter}
       >
         {content}

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

@@ -6,7 +6,7 @@
 
 /* eslint-disable react/display-name */
 
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import * as selectors from '../../store/selectors';
 import { NodeEventsInCategory } from './node_events_of_type';
@@ -15,33 +15,48 @@ 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') {
-    return <NodeDetail nodeID={params.panelParameters.nodeID} />;
+    panelViewToRender = <NodeDetail nodeID={params.panelParameters.nodeID} />;
   } else if (params.panelView === 'nodeEvents') {
-    return <NodeEvents nodeID={params.panelParameters.nodeID} />;
+    panelViewToRender = <NodeEvents nodeID={params.panelParameters.nodeID} />;
   } else if (params.panelView === 'nodeEventsInCategory') {
-    return (
+    panelViewToRender = (
       <NodeEventsInCategory
         nodeID={params.panelParameters.nodeID}
         eventCategory={params.panelParameters.eventCategory}
       />
     );
   } else if (params.panelView === 'eventDetail') {
-    return (
+    panelViewToRender = (
       <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/panels/panel_context.tsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+export const ResolverPanelContext = React.createContext({ isHoveringInPanel: false });

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

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