update copy styling

elastic · Oct 2, 2020 · 023fe87 · 023fe87
1 parent b3c37cf
commit 023fe87
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 6 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx
@@ -20,6 +20,7 @@ import {
   StyledTime,
   GeneratedText,
   noTimestampRetrievedText,
+  CopyFieldButton,
 } from './panel_content_utilities';
 import { Breadcrumbs } from './breadcrumbs';
 import * as eventModel from '../../../../common/endpoint/models/event';
@@ -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: (
+            <CopyFieldButton
+              textToCopy={String(fieldValue)}
+              content={<GeneratedText>{String(fieldValue)}</GeneratedText>}
+            />
+          ),
         })),
       };
       returnValue.push(section);
@@ -178,6 +184,7 @@ function EventDetailFields({ event }: { event: SafeResolverEvent }) {
               </EuiTextColor>
             </EuiTitle>
             <EuiSpacer size="m" />
+
             <StyledDescriptionList
               type="column"
               align="left"

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx
@@ -16,7 +16,7 @@ import { EuiDescriptionListProps } from '@elastic/eui/src/components/description
 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 { CopyFieldButton, GeneratedText } from './panel_content_utilities';
 import { Breadcrumbs } from './breadcrumbs';
 import { processPath, processPID } from '../../models/process_event';
 import { CubeForProcess } from './cube_for_process';
@@ -127,7 +127,12 @@ const NodeDetailView = memo(function ({
       .map((entry) => {
         return {
           ...entry,
-          description: <GeneratedText>{String(entry.description)}</GeneratedText>,
+          description: (
+            <CopyFieldButton
+              textToCopy={String(entry.description)}
+              content={<GeneratedText>{String(entry.description)}</GeneratedText>}
+            />
+          ),
         };
       });
 

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_list.tsx b/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 { CopyFieldButton } from './panel_content_utilities';
 
 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 ? (
+    <CopyFieldButton textToCopy={formattedDate} content={formattedDate} />
+  ) : (
+    getEmptyTagValue()
+  );
 });
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
@@ -6,10 +6,16 @@
 
 /* eslint-disable react/display-name */
 
-import { EuiCode } from '@elastic/eui';
+import { EuiCode, EuiToolTip, EuiPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
+import { WithCopyToClipboard } from '../../../common/lib/clipboard/with_copy_to_clipboard';
+import { useColors } from '../use_colors';
+
+const COPY_TO_CLIPBOARD = i18n.translate('xpack.securitySolution.resolver.panel.copyToClipboard', {
+  defaultMessage: 'Copy to Clipboard',
+});
 
 /**
  * Text to use in place of an undefined timestamp value
@@ -70,3 +76,59 @@ export const StyledTime = memo(styled('time')`
   display: inline-block;
   text-align: start;
 `);
+
+interface StyledCopyableField {
+  readonly borderColor: string;
+  readonly hoverBackground: string;
+}
+
+const StyledCopyableField = styled.div<StyledCopyableField>`
+  border: 0.1em solid;
+  border-color: ${(props) => props.borderColor};
+  border-radius: 3px;
+  padding: 4px;
+
+  &:hover {
+    background-color: ${(props) => props.hoverBackground};
+    color: #fff;
+  }
+`;
+
+export const CopyFieldButton = memo(
+  ({ textToCopy, content }: { textToCopy: string; content: JSX.Element | string }) => {
+    const { linkColor, pillStroke } = useColors();
+    const [isOpen, setIsOpen] = useState(false);
+    const onMouseEnter = () => setIsOpen(true);
+
+    const buttonContent = (
+      <StyledCopyableField
+        borderColor={pillStroke}
+        hoverBackground={linkColor}
+        onMouseEnter={onMouseEnter}
+      >
+        {content}
+      </StyledCopyableField>
+    );
+
+    const onMouseLeave = () => setIsOpen(false);
+
+    return (
+      <div onMouseLeave={onMouseLeave}>
+        <EuiPopover
+          anchorPosition={'downCenter'}
+          button={buttonContent}
+          closePopover={onMouseLeave}
+          hasArrow={false}
+          isOpen={isOpen}
+        >
+          <EuiToolTip content={COPY_TO_CLIPBOARD}>
+            <WithCopyToClipboard
+              data-test-subj="resolver:panel:copy-to-clipboard"
+              text={textToCopy}
+            />
+          </EuiToolTip>
+        </EuiPopover>
+      </div>
+    );
+  }
+);
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
@@ -14,6 +14,7 @@ type ResolverColorNames =
   | 'full'
   | 'graphControls'
   | 'graphControlsBackground'
+  | 'linkColor'
   | 'resolverBackground'
   | 'resolverEdge'
   | 'resolverEdgeText'
@@ -42,6 +43,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]);
 }