From aeba4011e2de6bd17fa8e9f147ed3ad18cf42dcd Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Tue, 6 Oct 2020 10:26:06 -0400
Subject: [PATCH] [Security Solution][Resolver] Simplify CopyableField styling
 and add comments (#79594)

---
 .../view/panels/copyable_panel_field.tsx      | 25 ++++++++++------
 .../public/resolver/view/panels/index.tsx     | 30 +++++--------------
 .../resolver/view/panels/panel_context.tsx    |  9 ------
 .../public/resolver/view/use_colors.ts        |  4 +--
 4 files changed, 26 insertions(+), 42 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/resolver/view/panels/panel_context.tsx

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/copyable_panel_field.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/copyable_panel_field.tsx
index 356dd1c73678..c3474a7724de 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/panels/copyable_panel_field.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/copyable_panel_field.tsx
@@ -9,10 +9,10 @@
 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;
@@ -20,28 +20,35 @@ interface StyledCopyableField {
 }
 
 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}
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx
index 043229dbeda6..f6fbd280e7ed 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx
+++ b/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,7 +15,6 @@ 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)
@@ -23,40 +22,27 @@ import { ResolverPanelContext } from './panel_context';
 
 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>
-  );
 });
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_context.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_context.tsx
deleted file mode 100644
index 60109c732c46..000000000000
--- a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_context.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * 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 });
diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_colors.ts b/x-pack/plugins/security_solution/public/resolver/view/use_colors.ts
index 6f0cbcb3fd87..7daf181a7b2b 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/use_colors.ts
+++ b/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,