[Security solutions][Intelligence] Upgrade ioc flyout

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

@@ -10,7 +10,10 @@ import { render } from '@testing-library/react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { DocumentDetailsContext } from '../../shared/context';
 import { JsonTab } from './json_tab';
-import { JSON_TAB_CONTENT_TEST_ID, JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID } from './test_ids';
+import {
+  JSON_TAB_CONTENT_TEST_ID,
+  JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID,
+} from '../../shared/test_ids';
 
 jest.mock('@elastic/eui', () => ({
   ...jest.requireActual('@elastic/eui'),

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

@@ -5,88 +5,23 @@
  * 2.0.
  */
 
-import React, { memo, useEffect, useRef, useState } from 'react';
-import { JsonCodeEditor } from '@kbn/unified-doc-viewer-plugin/public';
-import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { JSON_TAB_CONTENT_TEST_ID, JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID } from './test_ids';
+import React, { memo } from 'react';
 import { useDocumentDetailsContext } from '../../shared/context';
-
-const FLYOUT_BODY_PADDING = 24;
-const COPY_TO_CLIPBOARD_BUTTON_HEIGHT = 24;
-const FLYOUT_FOOTER_HEIGHT = 72;
+import { JsonTab as SharedJsonTab } from '../../../shared/components/json_tab';
+import { PREFIX } from '../../../shared/test_ids';
 
 /**
  * Json view displayed in the document details expandable flyout right section
  */
 export const JsonTab = memo(() => {
   const { searchHit, isRulePreview } = useDocumentDetailsContext();
-  const jsonValue = JSON.stringify(searchHit, null, 2);
-
-  const flexGroupElement = useRef<HTMLDivElement>(null);
-  const [editorHeight, setEditorHeight] = useState<number>();
-
-  useEffect(() => {
-    const topPosition = flexGroupElement?.current?.getBoundingClientRect().top || 0;
-    const footerOffset = isRulePreview ? 0 : FLYOUT_FOOTER_HEIGHT;
-    const height =
-      window.innerHeight -
-      topPosition -
-      COPY_TO_CLIPBOARD_BUTTON_HEIGHT -
-      FLYOUT_BODY_PADDING -
-      footerOffset;
-
-    if (height === 0) {
-      return;
-    }
-
-    setEditorHeight(height);
-  }, [setEditorHeight, isRulePreview]);
 
   return (
-    <EuiFlexGroup
-      ref={flexGroupElement}
-      direction="column"
-      gutterSize="none"
-      data-test-subj={JSON_TAB_CONTENT_TEST_ID}
-    >
-      <EuiFlexItem>
-        <EuiFlexGroup justifyContent={'flexEnd'}>
-          <EuiFlexItem grow={false}>
-            <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={copy}
-                  onKeyDown={copy}
-                >
-                  <FormattedMessage
-                    id="xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonLabel"
-                    defaultMessage="Copy to clipboard"
-                  />
-                </EuiButtonEmpty>
-              )}
-            </EuiCopy>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <JsonCodeEditor
-          json={searchHit as unknown as Record<string, unknown>}
-          height={editorHeight}
-          hasLineNumbers={true}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <SharedJsonTab
+      value={searchHit as unknown as Record<string, unknown>}
+      showFooterOffset={isRulePreview}
+      data-test-subj={PREFIX}
+    />
   );
 });
 

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/test_ids.ts

@@ -9,5 +9,3 @@ import { PREFIX } from '../../../shared/test_ids';
 
 export const TABLE_TAB_CONTENT_TEST_ID = `${PREFIX}DocumentTable` as const;
 export const TABLE_TAB_SEARCH_INPUT_TEST_ID = `${PREFIX}DocumentTableSearchInput` as const;
-export const JSON_TAB_CONTENT_TEST_ID = 'jsonView' as const;
-export const JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID = `${PREFIX}JsonTabCopyToClipboard` as const;

x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx

@@ -13,10 +13,8 @@ import { FLYOUT_BODY_TEST_ID } from './test_ids';
 import { DocumentDetailsContext } from '../../../document_details/shared/context';
 import { mockContextValue } from '../../../document_details/shared/mocks/mock_context';
 import userEvent from '@testing-library/user-event';
-import {
-  JSON_TAB_CONTENT_TEST_ID,
-  TABLE_TAB_CONTENT_TEST_ID,
-} from '../../../document_details/right/tabs/test_ids';
+import { TABLE_TAB_CONTENT_TEST_ID } from '../../../document_details/right/tabs/test_ids';
+import { JSON_TAB_CONTENT_TEST_ID } from '../../../shared/components/json_tab';
 
 describe('AssetDocumentTab', () => {
   it('renders', () => {

x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { JsonCodeEditor } from '@kbn/unified-doc-viewer-plugin/public';
+import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { PREFIX } from '../test_ids';
+
+export const JSON_TAB_CONTENT_TEST_ID = 'jsonView' as const;
+export const JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID = `${PREFIX}JsonTabCopyToClipboard` as const;
+
+// import { useDocumentDetailsContext } from './context';
+
+const FLYOUT_BODY_PADDING = 24;
+const COPY_TO_CLIPBOARD_BUTTON_HEIGHT = 24;
+const FLYOUT_FOOTER_HEIGHT = 72;
+
+export interface JsonTabProps {
+  /**
+   * The data-test-subj to prefix the component one's
+   */
+  ['data-test-subj']?: string;
+  /**
+   * Use to influence the height of the JsonCodeEditor (in some place the flyout does not have a footer).
+   */
+  showFooterOffset: boolean;
+  /**
+   * Json value to render in the JsonCodeEditor
+   */
+  value: Record<string, unknown>;
+}
+
+/**
+ * Json view displayed in the document details expandable flyout right section and in the indicator flyout.
+ */
+export const JsonTab = memo(
+  ({ value, showFooterOffset, 'data-test-subj': dataTestSubj }: JsonTabProps) => {
+    const jsonValue = JSON.stringify(value, null, 2);
+
+    const flexGroupElement = useRef<HTMLDivElement>(null);
+    const [editorHeight, setEditorHeight] = useState<number>();
+
+    useEffect(() => {
+      const topPosition = flexGroupElement?.current?.getBoundingClientRect().top || 0;
+      const footerOffset = showFooterOffset ? 0 : FLYOUT_FOOTER_HEIGHT;
+      const height =
+        window.innerHeight -
+        topPosition -
+        COPY_TO_CLIPBOARD_BUTTON_HEIGHT -
+        FLYOUT_BODY_PADDING -
+        footerOffset;
+
+      if (height === 0) {
+        return;
+      }
+
+      setEditorHeight(height);
+    }, [setEditorHeight, showFooterOffset]);
+
+    return (
+      <EuiFlexGroup
+        ref={flexGroupElement}
+        direction="column"
+        gutterSize="none"
+        data-test-subj={`${dataTestSubj}${JSON_TAB_CONTENT_TEST_ID}`}
+      >
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent={'flexEnd'}>
+            <EuiFlexItem grow={false}>
+              <EuiCopy textToCopy={jsonValue}>
+                {(copy) => (
+                  <EuiButtonEmpty
+                    iconType={'copyClipboard'}
+                    size={'xs'}
+                    aria-label={i18n.translate(
+                      'xpack.securitySolution.flyout.shared.jsonTab.copyToClipboardButtonAriaLabel',
+                      {
+                        defaultMessage: 'Copy to clipboard',
+                      }
+                    )}
+                    data-test-subj={`${dataTestSubj}${JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID}`}
+                    onClick={copy}
+                    onKeyDown={copy}
+                  >
+                    <FormattedMessage
+                      id="xpack.securitySolution.flyout.shared.jsonTab.copyToClipboardButtonLabel"
+                      defaultMessage="Copy to clipboard"
+                    />
+                  </EuiButtonEmpty>
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <JsonCodeEditor json={value} height={editorHeight} hasLineNumbers={true} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+);
+
+JsonTab.displayName = 'JsonTab';

x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx

@@ -12,7 +12,12 @@ import { css, euiStyled } from '@kbn/kibana-react-plugin/common';
 import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator';
 import { IndicatorFieldValue } from '../common/field_value';
 import { IndicatorFieldLabel } from '../common/field_label';
-import { IndicatorValueActions } from './indicator_value_actions';
+import {
+  CellActionsMode,
+  SecurityCellActions,
+  SecurityCellActionsTrigger,
+} from '../../../../../common/components/cell_actions';
+import { getIndicatorFieldAndValue } from '../../utils/field_value';
 
 /**
  * Show actions wrapper on hover. This is a helper component, limited only to Block
@@ -56,24 +61,23 @@ export const IndicatorBlock: FC<IndicatorBlockProps> = ({
   indicator,
   'data-test-subj': dataTestSubj,
 }) => {
+  const { key, value } = getIndicatorFieldAndValue(indicator, field);
+
   return (
     <EuiPanel {...panelProps}>
-      <VisibleOnHover data-test-subj={`${dataTestSubj}Item`}>
+      <SecurityCellActions
+        data={{ field: key, value }}
+        mode={CellActionsMode.HOVER_DOWN}
+        triggerId={SecurityCellActionsTrigger.DEFAULT}
+      >
         <EuiText>
           <IndicatorFieldLabel field={field} />
         </EuiText>
         <EuiSpacer size="s" />
         <EuiText size="s">
           <IndicatorFieldValue indicator={indicator} field={field} />
-          <span className="actionsWrapper">
-            <IndicatorValueActions
-              indicator={indicator}
-              field={field}
-              data-test-subj={dataTestSubj}
-            />
-          </span>
         </EuiText>
-      </VisibleOnHover>
+      </SecurityCellActions>
     </EuiPanel>
   );
 };