[SIEM] Updating copy to clipboard toast to not contain content copied (#36492) (#36719)

## Summary

Updated `Copy to Clipboard` action to no longer show the text being copied within the toast to prevent giant toasts and overflow issues.

Issue details: https://github.com/elastic/ingest-dev/issues/416

New Toast:
<img src="https://user-images.githubusercontent.com/2946766/57556935-9ca48780-7335-11e9-9fbe-1476cf7e9b6d.png" width=200>
Old Toast: 
<img src="https://user-images.githubusercontent.com/2946766/57556947-a4642c00-7335-11e9-9202-b9d358f8a5f5.png" width=200>




### Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

- [ ] ~This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)~
- [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)
- [ ] ~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~
- [ ] ~[Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~
- [ ] ~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~

### For maintainers

- [ ] ~This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~
- [ ] ~This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~

x-pack/plugins/siem/public/components/event_details/columns.tsx

@@ -53,7 +53,7 @@ export const getColumns = (eventId: string) => [
         hoverContent={
           <HoverActionsContainer data-test-subj="hover-actions-container">
             <EuiToolTip content={i18n.COPY_TO_CLIPBOARD}>
-              <WithCopyToClipboard text={field} titleSummary={i18n.FIELD} />
+              <WithCopyToClipboard text={field} titleSummary={i18n.FIELD.toLowerCase()} />
             </EuiToolTip>
           </HoverActionsContainer>
         }
@@ -79,7 +79,7 @@ export const getColumns = (eventId: string) => [
                 hoverContent={
                   <HoverActionsContainer data-test-subj="hover-actions-container">
                     <EuiToolTip content={i18n.COPY_TO_CLIPBOARD}>
-                      <WithCopyToClipboard text={value} titleSummary={i18n.VALUE} />
+                      <WithCopyToClipboard text={value} titleSummary={i18n.VALUE.toLowerCase()} />
                     </EuiToolTip>
                   </HoverActionsContainer>
                 }

x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx

@@ -36,7 +36,7 @@ export const NoteCardBody = pure<{ rawNote: string }>(({ rawNote }) => (
       hoverContent={
         <HoverActionsContainer data-test-subj="hover-actions-container">
           <EuiToolTip content={i18n.COPY_TO_CLIPBOARD}>
-            <WithCopyToClipboard text={rawNote} titleSummary={i18n.NOTE(1)} />
+            <WithCopyToClipboard text={rawNote} titleSummary={i18n.NOTE(1).toLowerCase()} />
           </EuiToolTip>
         </HoverActionsContainer>
       }

x-pack/plugins/siem/public/components/timeline/expandable_event/index.tsx

@@ -87,7 +87,10 @@ export const ExpandableEvent = pure<Props>(
                   {showHoverContent ? (
                     <HoverActionsContainer data-test-subj="hover-actions-container">
                       <EuiToolTip content={i18n.COPY_TO_CLIPBOARD}>
-                        <WithCopyToClipboard text={stringifiedEvent} titleSummary={i18n.EVENT} />
+                        <WithCopyToClipboard
+                          text={stringifiedEvent}
+                          titleSummary={i18n.EVENT.toLowerCase()}
+                        />
                       </EuiToolTip>
                     </HoverActionsContainer>
                   ) : null}

x-pack/plugins/siem/public/lib/clipboard/clipboard.tsx

@@ -4,10 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiGlobalToastList, EuiIcon, EuiText, Toast } from '@elastic/eui';
+import { EuiGlobalToastList, Toast } from '@elastic/eui';
 import copy from 'copy-to-clipboard';
 import * as React from 'react';
-import styled from 'styled-components';
 import uuid from 'uuid';
 
 import * as i18n from './translations';
@@ -16,34 +15,15 @@ export type OnCopy = (
   { content, isSuccess }: { content: string | number; isSuccess: boolean }
 ) => void;
 
-const ToastContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  user-select: none;
-`;
-
-const CopyClipboardIcon = styled(EuiIcon)`
-  margin-right: 5px;
-`;
-
 interface GetSuccessToastParams {
-  content: string | number;
   titleSummary?: string;
 }
 
-const getSuccessToast = ({ content, titleSummary }: GetSuccessToastParams): Toast => ({
+const getSuccessToast = ({ titleSummary }: GetSuccessToastParams): Toast => ({
   id: `copy-success-${uuid.v4()}`,
   color: 'success',
-  text: (
-    <ToastContainer>
-      <CopyClipboardIcon type="copyClipboard" size="m" />
-      <EuiText>
-        {i18n.COPIED} <code>{content}</code> {i18n.TO_THE_CLIPBOARD}
-      </EuiText>
-    </ToastContainer>
-  ),
-  title: `${i18n.COPIED} ${titleSummary || content}`,
+  iconType: 'copyClipboard',
+  title: `${i18n.COPIED} ${titleSummary} ${i18n.TO_THE_CLIPBOARD}`,
 });
 
 interface Props {
@@ -103,7 +83,7 @@ export class Clipboard extends React.PureComponent<Props, State> {
 
     if (isSuccess) {
       this.setState({
-        toasts: [...this.state.toasts, getSuccessToast({ content, titleSummary })],
+        toasts: [...this.state.toasts, getSuccessToast({ titleSummary })],
       });
     }
   };