[7.x] update copy styling (#79313) (#79593)

x-pack/plugins/security_solution/public/resolver/view/panel.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { createMemoryHistory, History as HistoryPackageHistoryInterface } from 'history';
-
+import copy from 'copy-to-clipboard';
 import { noAncestorsTwoChildrenWithRelatedEventsOnOrigin } from '../data_access_layer/mocks/no_ancestors_two_children_with_related_events_on_origin';
 import { Simulator } from '../test_utilities/simulator';
 // Extend jest with a custom matcher
@@ -14,6 +14,10 @@ import { urlSearch } from '../test_utilities/url_search';
 // the resolver component instance ID, used by the react code to distinguish piece of global state from those used by other resolver instances
 const resolverComponentInstanceID = 'resolverComponentInstanceID';
 
+jest.mock('copy-to-clipboard', () => {
+  return jest.fn();
+});
+
 describe(`Resolver: when analyzing a tree with no ancestors and two children and two related registry event on the origin, and when the component instance ID is ${resolverComponentInstanceID}`, () => {
   /**
    * Get (or lazily create and get) the simulator.
@@ -112,6 +116,16 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children and
         wordBreaks: 2,
       });
     });
+    it('should allow all node details to be copied', async () => {
+      const copyableFields = await simulator().resolve('resolver:panel:copyable-field');
+
+      copyableFields?.map((copyableField) => {
+        copyableField.simulate('mouseenter');
+        simulator().testSubject('clipboard').last().simulate('click');
+        expect(copy).toHaveBeenLastCalledWith(copyableField.text(), expect.any(Object));
+        copyableField.simulate('mouseleave');
+      });
+    });
   });
 
   const queryStringWithFirstChildSelected = urlSearch(resolverComponentInstanceID, {
@@ -158,6 +172,19 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children and
     ).toYieldEqualTo(3);
   });
 
+  it('should be able to copy the timestamps for all 3 nodes', async () => {
+    const copyableFields = await simulator().resolve('resolver:panel:copyable-field');
+
+    expect(copyableFields?.length).toBe(3);
+
+    copyableFields?.map((copyableField) => {
+      copyableField.simulate('mouseenter');
+      simulator().testSubject('clipboard').last().simulate('click');
+      expect(copy).toHaveBeenLastCalledWith(copyableField.text(), expect.any(Object));
+      copyableField.simulate('mouseleave');
+    });
+  });
+
   describe('when there is an item in the node list and its text has been clicked', () => {
     beforeEach(async () => {
       const nodeLinks = await simulator().resolve('resolver:node-list:node-link:title');
@@ -239,6 +266,34 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children and
             )
           ).toYieldEqualTo(2);
         });
+        describe('and when the first event link is clicked', () => {
+          beforeEach(async () => {
+            const link = await simulator().resolve(
+              'resolver:panel:node-events-in-category:event-link'
+            );
+            const first = link?.first();
+            expect(first).toBeTruthy();
+
+            if (first) {
+              first.simulate('click', { button: 0 });
+            }
+          });
+          it('should show the event detail view', async () => {
+            await expect(
+              simulator().map(() => simulator().testSubject('resolver:panel:event-detail').length)
+            ).toYieldEqualTo(1);
+          });
+          it('should allow all fields to be copied', async () => {
+            const copyableFields = await simulator().resolve('resolver:panel:copyable-field');
+
+            copyableFields?.map((copyableField) => {
+              copyableField.simulate('mouseenter');
+              simulator().testSubject('clipboard').last().simulate('click');
+              expect(copy).toHaveBeenLastCalledWith(copyableField.text(), expect.any(Object));
+              copyableField.simulate('mouseleave');
+            });
+          });
+        });
       });
     });
     describe('and when the node list link has been clicked', () => {

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

@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import { EuiToolTip, EuiPopover } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+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 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;
+  }
+`;
+
+export const CopyablePanelField = memo(
+  ({ textToCopy, content }: { textToCopy: string; content: JSX.Element | string }) => {
+    const { linkColor, copyableBackground } = useColors();
+    const [isOpen, setIsOpen] = useState(false);
+    const panelContext = useContext(ResolverPanelContext);
+
+    const onMouseEnter = () => setIsOpen(true);
+
+    const ButtonContent = memo(() => (
+      <StyledCopyableField
+        backgroundColor={panelContext.isHoveringInPanel ? copyableBackground : 'transparent'}
+        data-test-subj="resolver:panel:copyable-field"
+        activeBackgroundColor={linkColor}
+        onMouseEnter={onMouseEnter}
+      >
+        {content}
+      </StyledCopyableField>
+    ));
+
+    const onMouseLeave = () => setIsOpen(false);
+
+    return (
+      <div onMouseLeave={onMouseLeave}>
+        <EuiPopover
+          anchorPosition={'downCenter'}
+          button={<ButtonContent />}
+          closePopover={onMouseLeave}
+          hasArrow={false}
+          isOpen={isOpen}
+          panelPaddingSize="s"
+        >
+          <EuiToolTip
+            content={i18n.translate('xpack.securitySolution.resolver.panel.copyToClipboard', {
+              defaultMessage: 'Copy to Clipboard',
+            })}
+          >
+            <WithCopyToClipboard
+              data-test-subj="resolver:panel:copy-to-clipboard"
+              text={textToCopy}
+              titleSummary={textToCopy}
+            />
+          </EuiToolTip>
+        </EuiPopover>
+      </div>
+    );
+  }
+);

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

@@ -21,6 +21,7 @@ import {
   GeneratedText,
   noTimestampRetrievedText,
 } from './panel_content_utilities';
+import { CopyablePanelField } from './copyable_panel_field';
 import { Breadcrumbs } from './breadcrumbs';
 import * as eventModel from '../../../../common/endpoint/models/event';
 import * as selectors from '../../store/selectors';
@@ -156,7 +157,12 @@ function EventDetailFields({ event }: { event: SafeResolverEvent }) {
         namespace: <GeneratedText>{key}</GeneratedText>,
         descriptions: deepObjectEntries(value).map(([path, fieldValue]) => ({
           title: <GeneratedText>{path.join('.')}</GeneratedText>,
-          description: <GeneratedText>{String(fieldValue)}</GeneratedText>,
+          description: (
+            <CopyablePanelField
+              textToCopy={String(fieldValue)}
+              content={<GeneratedText>{String(fieldValue)}</GeneratedText>}
+            />
+          ),
         })),
       };
       returnValue.push(section);

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/node_detail.tsx

@@ -17,6 +17,7 @@ import { StyledDescriptionList, StyledTitle } from './styles';
 import * as selectors from '../../store/selectors';
 import * as eventModel from '../../../../common/endpoint/models/event';
 import { GeneratedText } from './panel_content_utilities';
+import { CopyablePanelField } from './copyable_panel_field';
 import { Breadcrumbs } from './breadcrumbs';
 import { processPath, processPID } from '../../models/process_event';
 import { CubeForProcess } from './cube_for_process';
@@ -131,7 +132,12 @@ const NodeDetailView = memo(function ({
       .map((entry) => {
         return {
           ...entry,
-          description: <GeneratedText>{String(entry.description)}</GeneratedText>,
+          description: (
+            <CopyablePanelField
+              textToCopy={String(entry.description)}
+              content={<GeneratedText>{String(entry.description)}</GeneratedText>}
+            />
+          ),
         };
       });
 

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

@@ -42,6 +42,7 @@ import { SafeResolverEvent } from '../../../../common/endpoint/types';
 import { ResolverAction } from '../../store/actions';
 import { useFormattedDate } from './use_formatted_date';
 import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { CopyablePanelField } from './copyable_panel_field';
 
 interface ProcessTableView {
   name?: string;
@@ -214,5 +215,9 @@ function NodeDetailLink({
 const NodeDetailTimestamp = memo(({ eventDate }: { eventDate: Date | undefined }) => {
   const formattedDate = useFormattedDate(eventDate);
 
-  return formattedDate ? <>{formattedDate}</> : getEmptyTagValue();
+  return formattedDate ? (
+    <CopyablePanelField textToCopy={formattedDate} content={formattedDate} />
+  ) : (
+    getEmptyTagValue()
+  );
 });

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,10 +10,12 @@ import { useMemo } from 'react';
 import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';
 
 type ResolverColorNames =
+  | 'copyableBackground'
   | 'descriptionText'
   | 'full'
   | 'graphControls'
   | 'graphControlsBackground'
+  | 'linkColor'
   | 'resolverBackground'
   | 'resolverEdge'
   | 'resolverEdgeText'
@@ -31,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,
@@ -42,6 +45,7 @@ export function useColors(): ColorMap {
       resolverEdgeText: isDarkMode ? theme.euiColorFullShade : theme.euiColorDarkShade,
       triggerBackingFill: `${theme.euiColorDanger}${isDarkMode ? '1F' : '0F'}`,
       pillStroke: theme.euiColorLightShade,
+      linkColor: theme.euiLinkColor,
     };
   }, [isDarkMode, theme]);
 }