[Security Solution] make copytoclipboard component more generic (#170700

)

x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_actions.tsx

@@ -7,10 +7,10 @@
 
 import type { VFC } from 'react';
 import React, { memo } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButtonIcon, EuiCopy, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { copyFunction } from '../../../shared/utils/copy_to_clipboard';
 import { FLYOUT_URL_PARAM } from '../../shared/hooks/url/use_sync_flyout_state_with_url';
-import { CopyToClipboard } from '../../../shared/components/copy_to_clipboard';
 import { useGetAlertDetailsFlyoutLink } from '../../../../timelines/components/side_panel/event_details/use_get_alert_details_flyout_link';
 import { useBasicDataFromDetailsData } from '../../../../timelines/components/side_panel/event_details/helpers';
 import { useRightPanelContext } from '../context';
@@ -31,26 +31,32 @@ export const HeaderActions: VFC = memo(() => {
 
   const showShareAlertButton = isAlert && alertDetailsLink;
 
+  const modifier = (value: string) => {
+    const query = new URLSearchParams(window.location.search);
+    return `${value}&${FLYOUT_URL_PARAM}=${query.get(FLYOUT_URL_PARAM)}`;
+  };
+
   return (
     <EuiFlexGroup direction="row" justifyContent="flexEnd">
       {showShareAlertButton && (
         <EuiFlexItem grow={false}>
-          <CopyToClipboard
-            rawValue={alertDetailsLink}
-            modifier={(value: string) => {
-              const query = new URLSearchParams(window.location.search);
-              return `${value}&${FLYOUT_URL_PARAM}=${query.get(FLYOUT_URL_PARAM)}`;
-            }}
-            iconType={'share'}
-            color={'text'}
-            ariaLabel={i18n.translate(
-              'xpack.securitySolution.flyout.right.header.shareButtonAriaLabel',
-              {
-                defaultMessage: 'Share Alert',
-              }
+          <EuiCopy textToCopy={alertDetailsLink}>
+            {(copy) => (
+              <EuiButtonIcon
+                iconType={'share'}
+                color={'text'}
+                aria-label={i18n.translate(
+                  'xpack.securitySolution.flyout.right.header.shareButtonAriaLabel',
+                  {
+                    defaultMessage: 'Share Alert',
+                  }
+                )}
+                data-test-subj={SHARE_BUTTON_TEST_ID}
+                onClick={() => copyFunction(copy, alertDetailsLink, modifier)}
+                onKeyDown={() => copyFunction(copy, alertDetailsLink, modifier)}
+              />
             )}
-            data-test-subj={SHARE_BUTTON_TEST_ID}
-          />
+          </EuiCopy>
         </EuiFlexItem>
       )}
     </EuiFlexGroup>

x-pack/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx

@@ -8,10 +8,10 @@
 import type { FC } from 'react';
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { JsonCodeEditor } from '@kbn/unified-doc-viewer-plugin/public';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { CopyToClipboard } from '../../../shared/components/copy_to_clipboard';
+import { copyFunction } from '../../../shared/utils/copy_to_clipboard';
 import { JSON_TAB_CONTENT_TEST_ID, JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID } from './test_ids';
 import { useRightPanelContext } from '../context';
 
@@ -48,31 +48,35 @@ export const JsonTab: FC = memo(() => {
   return (
     <EuiFlexGroup
       ref={flexGroupElement}
-      direction={'column'}
-      gutterSize={'none'}
+      direction="column"
+      gutterSize="none"
       data-test-subj={JSON_TAB_CONTENT_TEST_ID}
     >
       <EuiFlexItem>
         <EuiFlexGroup justifyContent={'flexEnd'}>
           <EuiFlexItem grow={false}>
-            <CopyToClipboard
-              rawValue={jsonValue}
-              text={
-                <FormattedMessage
-                  id="xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonLabel"
-                  defaultMessage="Copy to clipboard"
-                />
-              }
-              iconType={'copyClipboard'}
-              size={'xs'}
-              ariaLabel={i18n.translate(
-                'xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonAriaLabel',
-                {
-                  defaultMessage: 'Copy to clipboard',
-                }
+            <EuiCopy textToCopy={jsonValue}>
+              {(copy) => (
+                <EuiButtonEmpty
+                  iconType={'copyClipboard'}
+                  size={'xs'}
+                  aria-label={i18n.translate(
+                    'xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonAriaLabel',
+                    {
+                      defaultMessage: 'Copy to clipboard',
+                    }
+                  )}
+                  data-test-subj={JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID}
+                  onClick={() => copyFunction(copy, jsonValue)}
+                  onKeyDown={() => copyFunction(copy, jsonValue)}
+                >
+                  <FormattedMessage
+                    id="xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonLabel"
+                    defaultMessage="Copy to clipboard"
+                  />
+                </EuiButtonEmpty>
               )}
-              data-test-subj={JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID}
-            />
+            </EuiCopy>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>