From 178b865a2618143896a01d038cca0322edd961f7 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Fri, 1 Aug 2025 16:55:37 +0100 Subject: [PATCH 01/16] Compress highlights table --- .../indicators/components/flyout/fields_table.tsx | 1 + .../components/flyout/highlighted_values_table.tsx | 13 ++++++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx index e185e9e43b6a8..e55b0e484f2d5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx @@ -73,6 +73,7 @@ export const IndicatorFieldsTable: FC = ({ columns={columns} sorting={true} data-test-subj={dataTestSubj} + compressed /> ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx index acb492520d955..97d5bfe93afe7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx @@ -10,6 +10,7 @@ import type { Indicator } from '../../../../../../common/threat_intelligence/typ import { RawIndicatorFieldId } from '../../../../../../common/threat_intelligence/types/indicator'; import { unwrapValue } from '../../utils/unwrap_value'; import { IndicatorFieldsTable } from './fields_table'; +import { EuiPanel } from '@elastic/eui'; /** * Pick indicator fields starting with the indicator type @@ -45,10 +46,12 @@ export const HighlightedValuesTable: FC = ({ ); return ( - + + + ); }; From d2fc70ff53ba51230211c952e6cef8de6bd350a6 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Tue, 5 Aug 2025 13:37:11 +0100 Subject: [PATCH 02/16] Improve flyout table --- .../components/flyout/fields_table.tsx | 77 +++++++++++++------ 1 file changed, 53 insertions(+), 24 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx index e55b0e484f2d5..d6471d790612c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx @@ -6,14 +6,24 @@ */ import type { EuiBasicTableColumn } from '@elastic/eui'; -import { EuiInMemoryTable } from '@elastic/eui'; +import { EuiInMemoryTable, useEuiFontSize } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import type { FC } from 'react'; import React, { useMemo } from 'react'; +import { css } from '@emotion/react'; import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { IndicatorFieldValue } from '../common/field_value'; -import { IndicatorValueActions } from './indicator_value_actions'; +import { unwrapValue } from '../../utils/unwrap_value'; +import { + CellActionsMode, + SecurityCellActions, + SecurityCellActionsTrigger, +} from '../../../../../common/components/cell_actions'; +interface TableItem { + key: string; + value: string | null; +} export interface IndicatorFieldsTableProps { fields: string[]; indicator: Indicator; @@ -25,6 +35,7 @@ export const IndicatorFieldsTable: FC = ({ indicator, 'data-test-subj': dataTestSubj, }) => { + const smallFontSize = useEuiFontSize('xs').fontSize; const columns = useMemo( () => [ @@ -35,7 +46,7 @@ export const IndicatorFieldsTable: FC = ({ defaultMessage="Field" /> ), - render: (field: string) => field, + render: (item: TableItem) => item.key, }, { name: ( @@ -44,36 +55,54 @@ export const IndicatorFieldsTable: FC = ({ defaultMessage="Value" /> ), - render: (field: string) => , + render: (item: TableItem) => ( + + + + ), }, + ] as Array>, + [indicator] + ); + + const search = useMemo( + () => ({ + box: { + schema: true, + incremental: true, + }, + }), + [] + ); + + const items = useMemo(() => { + return fields.toSorted().reduce((acc, field) => { + return [ + ...acc, { - actions: [ - { - render: (field: string) => ( - - ), - width: '72px', - }, - ], + key: field, + value: unwrapValue(indicator, field), }, - // @ts-expect-error - EuiBasicTable wants an array of objects, but will accept strings if coerced - ] as Array>, - [indicator, dataTestSubj] - ); + ]; + }, []); + }, [fields, indicator]); return ( ); }; From c2bce153500d0fee9b5ff50952edae95c44d25d6 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Tue, 5 Aug 2025 14:57:05 +0100 Subject: [PATCH 03/16] Update json view --- .../indicators/components/flyout/json_tab.tsx | 27 ++++++++++++++++--- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx index b0a078e5a530a..fa46b2fafcd3e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx @@ -7,7 +7,8 @@ import type { FC } from 'react'; import React from 'react'; -import { EuiCodeBlock } from '@elastic/eui'; +import { Global, css } from '@emotion/react'; +import { JsonCodeEditor } from '@kbn/unified-doc-viewer-plugin/public'; import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { IndicatorEmptyPrompt } from './empty_prompt'; import { CODE_BLOCK_TEST_ID } from './test_ids'; @@ -27,8 +28,26 @@ export const IndicatorsFlyoutJson: FC = ({ indicator return Object.keys(indicator).length === 0 ? ( ) : ( - - {JSON.stringify(indicator, null, 2)} - + <> + {/** + * Sets the height of the tab container (in flyout.tsx) to 100% + * to allow the json editor to be rendered at full height. + * Without this, the height of the editor would be 0 and it wouldn't + * be visible on the page + */} + + } + hasLineNumbers={true} + data-test-subj={CODE_BLOCK_TEST_ID} + height={'100%'} + /> + ); }; From 25e0b66be8446599953a9d8ae9fb43170f6de8b5 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 5 Aug 2025 14:27:50 +0000 Subject: [PATCH 04/16] [CI] Auto-commit changed files from 'node scripts/eslint_all_files --no-cache --fix' --- .../indicators/components/flyout/highlighted_values_table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx index 97d5bfe93afe7..187e295bb6c90 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx @@ -6,11 +6,11 @@ */ import React, { useMemo, type FC } from 'react'; +import { EuiPanel } from '@elastic/eui'; import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { RawIndicatorFieldId } from '../../../../../../common/threat_intelligence/types/indicator'; import { unwrapValue } from '../../utils/unwrap_value'; import { IndicatorFieldsTable } from './fields_table'; -import { EuiPanel } from '@elastic/eui'; /** * Pick indicator fields starting with the indicator type From 968acdf9d116a831c8b5eb2bdc58b33414c0c5ca Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Mon, 18 Aug 2025 14:21:53 +0100 Subject: [PATCH 05/16] Move options from useMemo to module's scope --- .../components/flyout/fields_table.tsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx index d6471d790612c..e0f723bd66577 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import type { EuiBasicTableColumn } from '@elastic/eui'; +import type { EuiBasicTableColumn, EuiSearchBarProps } from '@elastic/eui'; import { EuiInMemoryTable, useEuiFontSize } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import type { FC } from 'react'; @@ -20,6 +20,13 @@ import { SecurityCellActionsTrigger, } from '../../../../../common/components/cell_actions'; +const euiTableSearchOptions: EuiSearchBarProps = { + box: { + schema: true, + incremental: true, + }, +}; + interface TableItem { key: string; value: string | null; @@ -69,16 +76,6 @@ export const IndicatorFieldsTable: FC = ({ [indicator] ); - const search = useMemo( - () => ({ - box: { - schema: true, - incremental: true, - }, - }), - [] - ); - const items = useMemo(() => { return fields.toSorted().reduce((acc, field) => { return [ @@ -102,7 +99,7 @@ export const IndicatorFieldsTable: FC = ({ font-size: ${smallFontSize}; } `} - search={search} + search={euiTableSearchOptions} /> ); }; From 68849ffe884c37208ea398b3fe3be22ae1a6b3f3 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Mon, 18 Aug 2025 14:22:06 +0100 Subject: [PATCH 06/16] Remove IndicatorValueActions --- .../indicators/components/flyout/block.tsx | 44 ++++--- .../indicator_value_actions.stories.tsx | 47 ------- .../flyout/indicator_value_actions.test.tsx | 79 ------------ .../flyout/indicator_value_actions.tsx | 120 ------------------ 4 files changed, 25 insertions(+), 265 deletions(-) delete mode 100644 x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.stories.tsx delete mode 100644 x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.test.tsx delete mode 100644 x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.tsx diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx index 3475b305474cb..2ab363e3bf32e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx +++ b/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,25 @@ export const IndicatorBlock: FC = ({ indicator, 'data-test-subj': dataTestSubj, }) => { + const { key, value } = getIndicatorFieldAndValue(indicator, field); + return ( - - - - - - - - - - - - - - + + + + + + + + + + + + + ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.stories.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.stories.tsx deleted file mode 100644 index c8397eb70b8e4..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - * 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 from 'react'; -import type { StoryFn } from '@storybook/react'; -import { StoryProvidersComponent } from '../../../../mocks/story_providers'; -import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; -import { generateMockFileIndicator } from '../../../../../../common/threat_intelligence/types/indicator'; -import { IndicatorValueActions } from './indicator_value_actions'; -import { IndicatorsFlyoutContext } from '../../hooks/use_flyout_context'; - -export default { - title: 'IndicatorValueActions', -}; - -const indicator: Indicator = generateMockFileIndicator(); -const field: string = 'threat.indicator.name'; - -export const Default: StoryFn = () => { - const context = { - kqlBarIntegration: true, - }; - return ( - - - - - - ); -}; - -export const WithoutFilterInOut: StoryFn = () => { - const context = { - kqlBarIntegration: false, - }; - return ( - - - - - - ); -}; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.test.tsx deleted file mode 100644 index 2eb0e08a32410..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.test.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* - * 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 from 'react'; -import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; -import { generateMockFileIndicator } from '../../../../../../common/threat_intelligence/types/indicator'; -import { render } from '@testing-library/react'; -import { IndicatorValueActions } from './indicator_value_actions'; -import { IndicatorsFlyoutContext } from '../../hooks/use_flyout_context'; -import { TestProvidersComponent } from '../../../../mocks/test_providers'; -import { - COPY_TO_CLIPBOARD_BUTTON_TEST_ID, - FILTER_IN_BUTTON_TEST_ID, - FILTER_OUT_BUTTON_TEST_ID, - POPOVER_BUTTON_TEST_ID, - TIMELINE_BUTTON_TEST_ID, -} from './test_ids'; - -const TEST_ID = 'test'; - -describe('IndicatorValueActions', () => { - const indicator: Indicator = generateMockFileIndicator(); - - it('should return null if field and value are invalid', () => { - const field: string = 'invalid'; - const context = { - kqlBarIntegration: true, - }; - const { container } = render( - - - - ); - expect(container).toBeEmptyDOMElement(); - }); - - it('should only render add to timeline and copy to clipboard', () => { - const field: string = 'threat.indicator.name'; - const context = { - kqlBarIntegration: true, - }; - const { getByTestId } = render( - - - - - - ); - - const addToTimelineTestId = `${TEST_ID}${TIMELINE_BUTTON_TEST_ID}`; - const copyToClipboardTestId = `${TEST_ID}${COPY_TO_CLIPBOARD_BUTTON_TEST_ID}`; - expect(getByTestId(addToTimelineTestId)).toBeInTheDocument(); - expect(getByTestId(copyToClipboardTestId)).toBeInTheDocument(); - }); - - it('should render filter in/out and dropdown for add to timeline and copy to clipboard', () => { - const field: string = 'threat.indicator.name'; - const context = { - kqlBarIntegration: false, - }; - const { getByTestId } = render( - - - - - - ); - const filterInTestId = `${TEST_ID}${FILTER_IN_BUTTON_TEST_ID}`; - const filterOutTestId = `${TEST_ID}${FILTER_OUT_BUTTON_TEST_ID}`; - const popoverTestId = `${TEST_ID}${POPOVER_BUTTON_TEST_ID}`; - expect(getByTestId(filterInTestId)).toBeInTheDocument(); - expect(getByTestId(filterOutTestId)).toBeInTheDocument(); - expect(getByTestId(popoverTestId)).toBeInTheDocument(); - }); -}); diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.tsx deleted file mode 100644 index 0ea11018da1ac..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/indicator_value_actions.tsx +++ /dev/null @@ -1,120 +0,0 @@ -/* - * 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 type { FC } from 'react'; -import React, { useState } from 'react'; -import { - EuiButtonIcon, - EuiContextMenuPanel, - EuiFlexGroup, - EuiPopover, - EuiToolTip, -} from '@elastic/eui'; -import { useIndicatorsFlyoutContext } from '../../hooks/use_flyout_context'; -import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; -import { FilterInButtonIcon } from '../../../query_bar/components/filter_in'; -import { FilterOutButtonIcon } from '../../../query_bar/components/filter_out'; -import { - AddToTimelineButtonIcon, - AddToTimelineContextMenu, -} from '../../../timeline/components/add_to_timeline'; -import { fieldAndValueValid, getIndicatorFieldAndValue } from '../../utils/field_value'; -import { CopyToClipboardButtonIcon, CopyToClipboardContextMenu } from '../common/copy_to_clipboard'; -import { - COPY_TO_CLIPBOARD_BUTTON_TEST_ID, - FILTER_IN_BUTTON_TEST_ID, - FILTER_OUT_BUTTON_TEST_ID, - POPOVER_BUTTON_TEST_ID, - TIMELINE_BUTTON_TEST_ID, -} from './test_ids'; -import { MORE_ACTIONS_BUTTON_LABEL } from './translations'; - -interface IndicatorValueActions { - /** - * Indicator complete object. - */ - indicator: Indicator; - /** - * Indicator field used for the filter in/out and add to timeline feature. - */ - field: string; - /** - * Used for unit and e2e tests. - */ - ['data-test-subj']?: string; -} - -/** - * This component render a set of actions for the user. - * Currently used in the indicators flyout (overview and table tabs). - * - * It gets a readOnly boolean from context, that drives what is displayed. - * - in the cases view usage, we only display add to timeline and copy to clipboard. - * - in the indicators table usave, we display all options - */ -export const IndicatorValueActions: FC = ({ - indicator, - field, - 'data-test-subj': dataTestSubj, -}) => { - const { kqlBarIntegration } = useIndicatorsFlyoutContext(); - - const [isPopoverOpen, setPopover] = useState(false); - - const { key, value } = getIndicatorFieldAndValue(indicator, field); - if (!fieldAndValueValid(key, value)) { - return null; - } - - const filterInTestId = `${dataTestSubj}${FILTER_IN_BUTTON_TEST_ID}`; - const filterOutTestId = `${dataTestSubj}${FILTER_OUT_BUTTON_TEST_ID}`; - const timelineTestId = `${dataTestSubj}${TIMELINE_BUTTON_TEST_ID}`; - const copyToClipboardTestId = `${dataTestSubj}${COPY_TO_CLIPBOARD_BUTTON_TEST_ID}`; - const popoverTestId = `${dataTestSubj}${POPOVER_BUTTON_TEST_ID}`; - - if (kqlBarIntegration) { - return ( - - - - - ); - } - - const popoverItems = [ - , - , - ]; - - return ( - - - - - setPopover((prevIsPopoverOpen) => !prevIsPopoverOpen)} - css={{ height: '100%' }} - /> - - } - isOpen={isPopoverOpen} - closePopover={() => setPopover(false)} - panelPaddingSize="none" - anchorPosition="downLeft" - > - - - - ); -}; From 0e4b7d7457abca0cd1a74870cf748f6f3a555554 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Tue, 19 Aug 2025 15:04:05 +0100 Subject: [PATCH 07/16] Refactor JsonTab to be reusable --- .../right/tabs/json_tab.test.tsx | 5 +- .../document_details/right/tabs/json_tab.tsx | 78 +-------------- .../document_details/right/tabs/test_ids.ts | 2 - .../document_details/shared/json_tab.tsx | 97 +++++++++++++++++++ .../document_details/shared/test_ids.ts | 11 +++ .../tabs/asset_document.test.tsx | 6 +- .../components/flyout/json_tab.test.tsx | 4 +- .../indicators/components/flyout/json_tab.tsx | 27 +----- .../indicators/components/flyout/test_ids.ts | 3 - 9 files changed, 122 insertions(+), 111 deletions(-) create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/json_tab.tsx create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx index 47055c7bde2ae..168fe2da511fc 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx +++ b/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'), diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx index a3cbe3cf20322..4f4a002b847ec 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx @@ -5,89 +5,17 @@ * 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/json_tab'; /** * 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(null); - const [editorHeight, setEditorHeight] = useState(); - - 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 ( - - - - - - {(copy) => ( - - - - )} - - - - - - } - height={editorHeight} - hasLineNumbers={true} - /> - - - ); + return ; }); JsonTab.displayName = 'JsonTab'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/test_ids.ts b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/test_ids.ts index ca894c99b5ffe..25fec217a7ccb 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/test_ids.ts +++ b/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; diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/json_tab.tsx new file mode 100644 index 0000000000000..4c93429b10f67 --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/json_tab.tsx @@ -0,0 +1,97 @@ +/* + * 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 { JSON_TAB_CONTENT_TEST_ID, JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID } from './test_ids'; +import type { SearchHit } from '../../../../common/search_strategy/common'; + +// import { useDocumentDetailsContext } from './context'; + +const FLYOUT_BODY_PADDING = 24; +const COPY_TO_CLIPBOARD_BUTTON_HEIGHT = 24; +const FLYOUT_FOOTER_HEIGHT = 72; + +/** + * Json view displayed in the document details expandable flyout right section + */ +export const JsonTab = memo( + ({ searchHit, isRulePreview }: { searchHit: SearchHit; isRulePreview: boolean }) => { + const jsonValue = JSON.stringify(searchHit, null, 2); + + const flexGroupElement = useRef(null); + const [editorHeight, setEditorHeight] = useState(); + + 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 ( + + + + + + {(copy) => ( + + + + )} + + + + + + } + height={editorHeight} + hasLineNumbers={true} + /> + + + ); + } +); + +JsonTab.displayName = 'JsonTab'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts new file mode 100644 index 0000000000000..4ab85ca44df80 --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts @@ -0,0 +1,11 @@ +/* + * 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 { PREFIX } from '../../shared/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; diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx index f7c46963ba201..7ac15b1dcda97 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx +++ b/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 '../../../document_details/shared/test_ids'; describe('AssetDocumentTab', () => { it('renders', () => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx index 98904dd5644c5..251c06046121e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx @@ -12,7 +12,7 @@ import type { Indicator } from '../../../../../../common/threat_intelligence/typ import { generateMockIndicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { IndicatorsFlyoutJson } from './json_tab'; import { EMPTY_PROMPT_TEST_ID } from './empty_prompt'; -import { CODE_BLOCK_TEST_ID } from './test_ids'; +import { JSON_TAB_CONTENT_TEST_ID } from '../../../../../flyout/document_details/shared/test_ids'; const mockIndicator: Indicator = generateMockIndicator(); @@ -24,7 +24,7 @@ describe('', () => { ); - expect(getByTestId(CODE_BLOCK_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(JSON_TAB_CONTENT_TEST_ID)).toBeInTheDocument(); }); it('should render error message on invalid indicator', () => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx index fa46b2fafcd3e..cbe085a4debd7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx @@ -7,11 +7,10 @@ import type { FC } from 'react'; import React from 'react'; -import { Global, css } from '@emotion/react'; -import { JsonCodeEditor } from '@kbn/unified-doc-viewer-plugin/public'; import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { IndicatorEmptyPrompt } from './empty_prompt'; -import { CODE_BLOCK_TEST_ID } from './test_ids'; +import { JsonTab } from '../../../../../flyout/document_details/shared/json_tab'; +import type { SearchHit } from '../../../../../../common/search_strategy'; export interface IndicatorsFlyoutJsonProps { /** @@ -28,26 +27,6 @@ export const IndicatorsFlyoutJson: FC = ({ indicator return Object.keys(indicator).length === 0 ? ( ) : ( - <> - {/** - * Sets the height of the tab container (in flyout.tsx) to 100% - * to allow the json editor to be rendered at full height. - * Without this, the height of the editor would be 0 and it wouldn't - * be visible on the page - */} - - } - hasLineNumbers={true} - data-test-subj={CODE_BLOCK_TEST_ID} - height={'100%'} - /> - + ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts index d9a8ac51dc358..16099035d4958 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts @@ -24,9 +24,6 @@ export const ADD_TO_EXISTING_CASE_TEST_ID = 'tiIndicatorFlyoutAddToExistingCaseC export const ADD_TO_NEW_CASE_TEST_ID = 'tiIndicatorFlyoutAddToNewCaseContextMenu'; export const ADD_TO_BLOCK_LIST_TEST_ID = 'tiIndicatorFlyoutAddToBlockListContextMenu'; -/* Json Tab */ -export const CODE_BLOCK_TEST_ID = 'tiFlyoutJsonCodeBlock'; - /* Table Tab */ export const FLYOUT_TABLE_TEST_ID = 'tiFlyoutTable'; From 18fef14b41ae8e45f116b2d99b7210244f776899 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Tue, 26 Aug 2025 14:52:18 +0100 Subject: [PATCH 08/16] Apply PR feedback --- .../document_details/right/tabs/json_tab.tsx | 11 ++++- .../document_details/shared/test_ids.ts | 11 ----- .../shared/json_tab.tsx | 45 ++++++++++++------- .../components/flyout/fields_table.tsx | 2 + .../indicators/components/flyout/json_tab.tsx | 11 +++-- .../components/flyout/overview_tab.tsx | 2 +- 6 files changed, 49 insertions(+), 33 deletions(-) delete mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts rename x-pack/solutions/security/plugins/security_solution/public/flyout/{document_details => }/shared/json_tab.tsx (64%) diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx index 4f4a002b847ec..cfbca7a0eb96c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx @@ -7,7 +7,8 @@ import React, { memo } from 'react'; import { useDocumentDetailsContext } from '../../shared/context'; -import { JsonTab as SharedJsonTab } from '../../shared/json_tab'; +import { JsonTab as SharedJsonTab } from '../../../shared/json_tab'; +import { PREFIX } from '../../../shared/test_ids'; /** * Json view displayed in the document details expandable flyout right section @@ -15,7 +16,13 @@ import { JsonTab as SharedJsonTab } from '../../shared/json_tab'; export const JsonTab = memo(() => { const { searchHit, isRulePreview } = useDocumentDetailsContext(); - return ; + return ( + } + showFooterOffset={isRulePreview} + data-test-subj={PREFIX} + /> + ); }); JsonTab.displayName = 'JsonTab'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts deleted file mode 100644 index 4ab85ca44df80..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/test_ids.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* - * 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 { PREFIX } from '../../shared/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; diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/json_tab.tsx similarity index 64% rename from x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/json_tab.tsx rename to x-pack/solutions/security/plugins/security_solution/public/flyout/shared/json_tab.tsx index 4c93429b10f67..fc74165f77ec3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/json_tab.tsx @@ -11,8 +11,10 @@ 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 type { SearchHit } from '../../../../common/search_strategy/common'; +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'; @@ -20,19 +22,34 @@ 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; +} + /** - * Json view displayed in the document details expandable flyout right section + * Json view displayed in the document details expandable flyout right section and in the indicator flyout. */ export const JsonTab = memo( - ({ searchHit, isRulePreview }: { searchHit: SearchHit; isRulePreview: boolean }) => { - const jsonValue = JSON.stringify(searchHit, null, 2); + ({ value, showFooterOffset, 'data-test-subj': dataTestSubj }: JsonTabProps) => { + const jsonValue = JSON.stringify(value, null, 2); const flexGroupElement = useRef(null); const [editorHeight, setEditorHeight] = useState(); useEffect(() => { const topPosition = flexGroupElement?.current?.getBoundingClientRect().top || 0; - const footerOffset = isRulePreview ? 0 : FLYOUT_FOOTER_HEIGHT; + const footerOffset = showFooterOffset ? 0 : FLYOUT_FOOTER_HEIGHT; const height = window.innerHeight - topPosition - @@ -45,14 +62,14 @@ export const JsonTab = memo( } setEditorHeight(height); - }, [setEditorHeight, isRulePreview]); + }, [setEditorHeight, showFooterOffset]); return ( @@ -63,17 +80,17 @@ export const JsonTab = memo( iconType={'copyClipboard'} size={'xs'} aria-label={i18n.translate( - 'xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonAriaLabel', + 'xpack.securitySolution.flyout.shared.jsonTab.copyToClipboardButtonAriaLabel', { defaultMessage: 'Copy to clipboard', } )} - data-test-subj={JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID} + data-test-subj={`${dataTestSubj}${JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID}`} onClick={copy} onKeyDown={copy} > @@ -83,11 +100,7 @@ export const JsonTab = memo( - } - height={editorHeight} - hasLineNumbers={true} - /> + ); diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx index e0f723bd66577..75b4f06e50831 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx @@ -54,6 +54,7 @@ export const IndicatorFieldsTable: FC = ({ /> ), render: (item: TableItem) => item.key, + width: '30%', }, { name: ( @@ -71,6 +72,7 @@ export const IndicatorFieldsTable: FC = ({ ), + width: '70%', }, ] as Array>, [indicator] diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx index cbe085a4debd7..13c440a57363e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx @@ -9,8 +9,9 @@ import type { FC } from 'react'; import React from 'react'; import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { IndicatorEmptyPrompt } from './empty_prompt'; -import { JsonTab } from '../../../../../flyout/document_details/shared/json_tab'; -import type { SearchHit } from '../../../../../../common/search_strategy'; +import { JsonTab } from '../../../../../flyout/shared/json_tab'; + +const FLYOUT_JSON_TEST_ID = 'indicators-flyout'; export interface IndicatorsFlyoutJsonProps { /** @@ -27,6 +28,10 @@ export const IndicatorsFlyoutJson: FC = ({ indicator return Object.keys(indicator).length === 0 ? ( ) : ( - + } + showFooterOffset={false} + data-test-subj={FLYOUT_JSON_TEST_ID} + /> ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/overview_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/overview_tab.tsx index d16949ef11bc6..2643925458f74 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/overview_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/overview_tab.tsx @@ -96,7 +96,7 @@ export const IndicatorsFlyoutOverview: FC = ({ - +
From 20e31025982162c9400c1899a4bccf1ab8df98f4 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Thu, 28 Aug 2025 17:33:49 +0100 Subject: [PATCH 09/16] Apply PR feedback --- .../document_details/right/tabs/json_tab.tsx | 2 +- .../tabs/asset_document.test.tsx | 2 +- .../shared/{ => components}/json_tab.tsx | 2 +- .../indicators/components/flyout/block.tsx | 32 +++++++++---------- .../components/flyout/fields_table.tsx | 3 ++ .../flyout/highlighted_values_table.tsx | 1 + .../indicators/components/flyout/json_tab.tsx | 2 +- .../indicators/components/flyout/test_ids.ts | 7 ---- 8 files changed, 23 insertions(+), 28 deletions(-) rename x-pack/solutions/security/plugins/security_solution/public/flyout/shared/{ => components}/json_tab.tsx (98%) diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx index cfbca7a0eb96c..222b9c5c4cebe 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.tsx @@ -7,7 +7,7 @@ import React, { memo } from 'react'; import { useDocumentDetailsContext } from '../../shared/context'; -import { JsonTab as SharedJsonTab } from '../../../shared/json_tab'; +import { JsonTab as SharedJsonTab } from '../../../shared/components/json_tab'; import { PREFIX } from '../../../shared/test_ids'; /** diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx index 7ac15b1dcda97..f823c6e452698 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx @@ -14,7 +14,7 @@ import { DocumentDetailsContext } from '../../../document_details/shared/context import { mockContextValue } from '../../../document_details/shared/mocks/mock_context'; import userEvent from '@testing-library/user-event'; import { TABLE_TAB_CONTENT_TEST_ID } from '../../../document_details/right/tabs/test_ids'; -import { JSON_TAB_CONTENT_TEST_ID } from '../../../document_details/shared/test_ids'; +import { JSON_TAB_CONTENT_TEST_ID } from '../../../shared/components/json_tab'; describe('AssetDocumentTab', () => { it('renders', () => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx similarity index 98% rename from x-pack/solutions/security/plugins/security_solution/public/flyout/shared/json_tab.tsx rename to x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx index fc74165f77ec3..d997d618a5257 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx @@ -11,7 +11,7 @@ import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem } from '@elastic/eui import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { PREFIX } from './test_ids'; +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; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx index 2ab363e3bf32e..893d54312e589 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx @@ -64,22 +64,20 @@ export const IndicatorBlock: FC = ({ const { key, value } = getIndicatorFieldAndValue(indicator, field); return ( - - - - - - - - - - - - - + + + + + + + + + + + ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx index 75b4f06e50831..32954f9fef2ce 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/fields_table.tsx @@ -35,12 +35,14 @@ export interface IndicatorFieldsTableProps { fields: string[]; indicator: Indicator; ['data-test-subj']?: string; + compressed?: boolean; } export const IndicatorFieldsTable: FC = ({ fields, indicator, 'data-test-subj': dataTestSubj, + compressed, }) => { const smallFontSize = useEuiFontSize('xs').fontSize; const columns = useMemo( @@ -102,6 +104,7 @@ export const IndicatorFieldsTable: FC = ({ } `} search={euiTableSearchOptions} + compressed={compressed} /> ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx index 187e295bb6c90..a860ceab2d89c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/highlighted_values_table.tsx @@ -51,6 +51,7 @@ export const HighlightedValuesTable: FC = ({ indicator={indicator} fields={highlightedFields} data-test-subj={dataTestSubj} + compressed /> ); diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx index 13c440a57363e..a050057a5b1c0 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx @@ -9,7 +9,7 @@ import type { FC } from 'react'; import React from 'react'; import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { IndicatorEmptyPrompt } from './empty_prompt'; -import { JsonTab } from '../../../../../flyout/shared/json_tab'; +import { JsonTab } from '../../../../../flyout/shared/components/json_tab'; const FLYOUT_JSON_TEST_ID = 'indicators-flyout'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts index 16099035d4958..7fdcbcab5d214 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/test_ids.ts @@ -10,13 +10,6 @@ export const INDICATORS_FLYOUT_TITLE_TEST_ID = 'tiIndicatorFlyoutTitle'; export const INDICATORS_FLYOUT_SUBTITLE_TEST_ID = 'tiIndicatorFlyoutSubtitle'; export const INDICATORS_FLYOUT_TABS_TEST_ID = 'tiIndicatorFlyoutTabs'; -/* Indicator Value Actions */ -export const TIMELINE_BUTTON_TEST_ID = 'TimelineButton'; -export const FILTER_IN_BUTTON_TEST_ID = 'FilterInButton'; -export const FILTER_OUT_BUTTON_TEST_ID = 'FilterOutButton'; -export const COPY_TO_CLIPBOARD_BUTTON_TEST_ID = 'CopyToClipboardButton'; -export const POPOVER_BUTTON_TEST_ID = 'PopoverButton'; - /* Take Action */ export const TAKE_ACTION_BUTTON_TEST_ID = 'tiIndicatorFlyoutTakeActionButton'; export const INVESTIGATE_IN_TIMELINE_TEST_ID = 'tiIndicatorFlyoutInvestigateInTimelineContextMenu'; From e0e0a4f6c655c18cf91333f939c38561f6b5d219 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Fri, 29 Aug 2025 11:42:30 +0100 Subject: [PATCH 10/16] Applh PR feedback --- .../right/tabs/json_tab.test.tsx | 2 +- .../indicators/components/flyout/block.tsx | 22 ------------------- .../components/flyout/json_tab.test.tsx | 2 +- 3 files changed, 2 insertions(+), 24 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx index 168fe2da511fc..dfa1a2512a787 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx @@ -13,7 +13,7 @@ import { JsonTab } from './json_tab'; import { JSON_TAB_CONTENT_TEST_ID, JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID, -} from '../../shared/test_ids'; +} from '../../../shared/components/json_tab'; jest.mock('@elastic/eui', () => ({ ...jest.requireActual('@elastic/eui'), diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx index 893d54312e589..263e0c5a89899 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx @@ -8,7 +8,6 @@ import { EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; import type { FC } from 'react'; import React from 'react'; -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'; @@ -19,27 +18,6 @@ import { } 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 - */ -const VisibleOnHover = euiStyled.div` - ${({ theme }) => css` - & { - height: 100%; - } - - & .actionsWrapper { - visibility: hidden; - display: inline-block; - margin-inline-start: ${theme.eui.euiSizeS}; - } - - &:hover .actionsWrapper { - visibility: visible; - } - `} -`; - const panelProps = { color: 'subdued' as const, hasShadow: false, diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx index 251c06046121e..bd8380aa67fb7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx @@ -12,7 +12,7 @@ import type { Indicator } from '../../../../../../common/threat_intelligence/typ import { generateMockIndicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { IndicatorsFlyoutJson } from './json_tab'; import { EMPTY_PROMPT_TEST_ID } from './empty_prompt'; -import { JSON_TAB_CONTENT_TEST_ID } from '../../../../../flyout/document_details/shared/test_ids'; +import { JSON_TAB_CONTENT_TEST_ID } from '../../../../../flyout/shared/components/json_tab'; const mockIndicator: Indicator = generateMockIndicator(); From ff711a58f927dfa024fecbebdee90e2b56ad01d3 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Tue, 2 Sep 2025 10:02:42 +0100 Subject: [PATCH 11/16] Fix translations --- .../plugins/private/translations/translations/de-DE.json | 2 -- .../plugins/private/translations/translations/fr-FR.json | 2 -- .../plugins/private/translations/translations/ja-JP.json | 2 -- .../plugins/private/translations/translations/zh-CN.json | 2 -- 4 files changed, 8 deletions(-) diff --git a/x-pack/platform/plugins/private/translations/translations/de-DE.json b/x-pack/platform/plugins/private/translations/translations/de-DE.json index 41fe14b59043a..7c6e75fc5bb79 100644 --- a/x-pack/platform/plugins/private/translations/translations/de-DE.json +++ b/x-pack/platform/plugins/private/translations/translations/de-DE.json @@ -38203,8 +38203,6 @@ "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage": "Der Untersuchungsleitfaden ist in der Warnungsvorschau nicht verfügbar.", "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewTitle": "Untersuchungsleitfaden", "xpack.securitySolution.flyout.right.investigation.sectionTitle": "Untersuchung", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonAriaLabel": "In die Zwischenablage kopieren", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonLabel": "In die Zwischenablage kopieren", "xpack.securitySolution.flyout.right.network.networkPreviewTitle": "Netzwerkdetails anzeigen", "xpack.securitySolution.flyout.right.notes.addNoteButtonLabel": "Notiz hinzufügen", "xpack.securitySolution.flyout.right.notes.fetchNotesErrorLabel": "Fehler beim Abrufen von Anmerkungen", diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json index c63c5b9295f13..ac1868641adca 100644 --- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json +++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json @@ -38307,8 +38307,6 @@ "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage": "Le guide d'investigation n'est pas disponible dans l'aperçu des alertes.", "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewTitle": "Guide d'investigation", "xpack.securitySolution.flyout.right.investigation.sectionTitle": "Investigation", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonAriaLabel": "Copier dans le presse-papiers", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonLabel": "Copier dans le presse-papiers", "xpack.securitySolution.flyout.right.network.networkPreviewTitle": "Aperçu des détails du réseau", "xpack.securitySolution.flyout.right.notes.addNoteButtonLabel": "Ajouter la note", "xpack.securitySolution.flyout.right.notes.fetchNotesErrorLabel": "Erreur lors de la récupération des notes", diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json index 6032bcece3850..1c4c8ae79e2ed 100644 --- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json +++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json @@ -38351,8 +38351,6 @@ "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage": "調査ガイドはアラートプレビューでは使用できません。", "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewTitle": "調査ガイド", "xpack.securitySolution.flyout.right.investigation.sectionTitle": "調査", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonAriaLabel": "クリップボードにコピー", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonLabel": "クリップボードにコピー", "xpack.securitySolution.flyout.right.network.networkPreviewTitle": "ネットワーク詳細をプレビュー", "xpack.securitySolution.flyout.right.notes.addNoteButtonLabel": "メモを追加", "xpack.securitySolution.flyout.right.notes.fetchNotesErrorLabel": "メモの取得エラー", diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json index 4a49a71faafe5..84688729eee87 100644 --- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json +++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json @@ -38335,8 +38335,6 @@ "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewMessage": "调查指南在告警预览中不可用。", "xpack.securitySolution.flyout.right.investigation.investigationGuide.previewTitle": "调查指南", "xpack.securitySolution.flyout.right.investigation.sectionTitle": "调查", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonAriaLabel": "复制到剪贴板", - "xpack.securitySolution.flyout.right.jsonTab.copyToClipboardButtonLabel": "复制到剪贴板", "xpack.securitySolution.flyout.right.network.networkPreviewTitle": "预览网络详情", "xpack.securitySolution.flyout.right.notes.addNoteButtonLabel": "添加备注", "xpack.securitySolution.flyout.right.notes.fetchNotesErrorLabel": "提取备注时出错", From 22e7f2f3c737f381d31a56f4e77af3caddfb9ef8 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Thu, 4 Sep 2025 14:25:32 +0100 Subject: [PATCH 12/16] Fix unit tests --- .../flyout/document_details/right/tabs/json_tab.test.tsx | 5 +++-- .../user_details_left/tabs/asset_document.test.tsx | 3 ++- .../modules/indicators/components/flyout/json_tab.test.tsx | 4 ++-- .../modules/indicators/components/flyout/json_tab.tsx | 2 +- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx index dfa1a2512a787..73d636993ca36 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/tabs/json_tab.test.tsx @@ -14,6 +14,7 @@ import { JSON_TAB_CONTENT_TEST_ID, JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID, } from '../../../shared/components/json_tab'; +import { PREFIX } from '../../../shared/test_ids'; jest.mock('@elastic/eui', () => ({ ...jest.requireActual('@elastic/eui'), @@ -40,13 +41,13 @@ describe('', () => { it('should render json code editor component', () => { const { getByTestId } = renderJsonTab(); - expect(getByTestId(JSON_TAB_CONTENT_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(PREFIX + JSON_TAB_CONTENT_TEST_ID)).toBeInTheDocument(); }); it('should copy to clipboard', () => { const { getByTestId } = renderJsonTab(); - const copyToClipboardButton = getByTestId(JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID); + const copyToClipboardButton = getByTestId(PREFIX + JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID); expect(copyToClipboardButton).toBeInTheDocument(); }); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx index f823c6e452698..c17230da10a17 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_details_left/tabs/asset_document.test.tsx @@ -15,6 +15,7 @@ import { mockContextValue } from '../../../document_details/shared/mocks/mock_co import userEvent from '@testing-library/user-event'; import { TABLE_TAB_CONTENT_TEST_ID } from '../../../document_details/right/tabs/test_ids'; import { JSON_TAB_CONTENT_TEST_ID } from '../../../shared/components/json_tab'; +import { PREFIX } from '../../../shared/test_ids'; describe('AssetDocumentTab', () => { it('renders', () => { @@ -52,7 +53,7 @@ describe('AssetDocumentTab', () => { await userEvent.click(getByTitle('JSON')); - expect(getByTestId(JSON_TAB_CONTENT_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(PREFIX + JSON_TAB_CONTENT_TEST_ID)).toBeInTheDocument(); }); it('should select table tab when path tab is table', async () => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx index bd8380aa67fb7..d7a42c6538d41 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.test.tsx @@ -10,7 +10,7 @@ import { render } from '@testing-library/react'; import { TestProvidersComponent } from '../../../../mocks/test_providers'; import type { Indicator } from '../../../../../../common/threat_intelligence/types/indicator'; import { generateMockIndicator } from '../../../../../../common/threat_intelligence/types/indicator'; -import { IndicatorsFlyoutJson } from './json_tab'; +import { FLYOUT_JSON_TEST_ID, IndicatorsFlyoutJson } from './json_tab'; import { EMPTY_PROMPT_TEST_ID } from './empty_prompt'; import { JSON_TAB_CONTENT_TEST_ID } from '../../../../../flyout/shared/components/json_tab'; @@ -24,7 +24,7 @@ describe('', () => { ); - expect(getByTestId(JSON_TAB_CONTENT_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(FLYOUT_JSON_TEST_ID + JSON_TAB_CONTENT_TEST_ID)).toBeInTheDocument(); }); it('should render error message on invalid indicator', () => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx index a050057a5b1c0..65557d1001fa8 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/json_tab.tsx @@ -11,7 +11,7 @@ import type { Indicator } from '../../../../../../common/threat_intelligence/typ import { IndicatorEmptyPrompt } from './empty_prompt'; import { JsonTab } from '../../../../../flyout/shared/components/json_tab'; -const FLYOUT_JSON_TEST_ID = 'indicators-flyout'; +export const FLYOUT_JSON_TEST_ID = 'indicators-flyout'; export interface IndicatorsFlyoutJsonProps { /** From d6f51e486ddb360989f12ca241161dd187052566 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Fri, 5 Sep 2025 13:27:10 +0100 Subject: [PATCH 13/16] Fix cypress tests --- .../public/flyout/shared/components/json_tab.tsx | 4 +--- .../modules/indicators/components/flyout/block.tsx | 2 +- .../expandable_flyout/alert_details_right_panel_json_tab.ts | 4 +++- .../cypress/screens/threat_intelligence/indicators.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx index d997d618a5257..5c9274577dd01 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/json_tab.tsx @@ -11,10 +11,8 @@ 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; +export const JSON_TAB_COPY_TO_CLIPBOARD_BUTTON_TEST_ID = `JsonTabCopyToClipboard` as const; // import { useDocumentDetailsContext } from './context'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx index 263e0c5a89899..d90a067cd5768 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/threat_intelligence/modules/indicators/components/flyout/block.tsx @@ -42,7 +42,7 @@ export const IndicatorBlock: FC = ({ const { key, value } = getIndicatorFieldAndValue(indicator, field); return ( - + Date: Mon, 8 Sep 2025 19:08:06 +0100 Subject: [PATCH 14/16] Fix cypress tests --- .../threat_intelligence/indicators.cy.ts | 3 +-- .../screens/threat_intelligence/indicators.ts | 14 +++++++------- .../cypress/tasks/threat_intelligence/common.ts | 2 +- .../tasks/threat_intelligence/query_bar.ts | 17 ++++++++++++----- 4 files changed, 21 insertions(+), 15 deletions(-) diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/indicators.cy.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/indicators.cy.ts index e59e6e100d26f..e889088468c96 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/indicators.cy.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/indicators.cy.ts @@ -184,8 +184,7 @@ describe('Single indicator', { tags: ['@ess'] }, () => { navigateToFlyoutJsonTab(); - cy.get(FLYOUT_JSON).should('contain.text', 'threat.indicator.type'); - cy.get(FLYOUT_JSON).should('contain.text', '"@timestamp": "2022-06-02T13:29:47.677Z",'); + cy.get(FLYOUT_JSON).should('contain.text', '2022-06-02T13:29:47.677Z'); }); }); diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts index ae7dd5f35606d..21fe9e791a66b 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts @@ -36,7 +36,7 @@ export const INDICATORS_TABLE_LAST_SEEN_COLUMN_HEADER = getDataTestSubjectSelect export const INDICATORS_TABLE_INDICATOR_LAST_SEEN_CELL = '[data-gridcell-column-id="threat.indicator.last_seen"]'; export const TABLE_CONTROLS = getDataTestSubjectSelector('dataGridControls'); -export const INDICATOR_TYPE_CELL = `[role="gridcell"][data-gridcell-column-id="threat.indicator.type"]`; +export const INDICATOR_TYPE_CELL = `[role="gridcell"][data-gridcell-column-id^="threat"]`; export const INDICATORS_TABLE_CELL_FILTER_IN_BUTTON = `${getDataTestSubjectSelector( 'tiIndicatorsTableCellFilterInButton' )} button`; @@ -56,19 +56,19 @@ export const FLYOUT_TABS = getDataTestSubjectSelector('tiIndicatorFlyoutTabs'); export const FLYOUT_TABLE = getDataTestSubjectSelector('tiFlyoutTable'); export const FLYOUT_JSON = getDataTestSubjectSelector('indicators-flyoutjsonView'); export const FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_IN_BUTTON = getDataTestSubjectSelector( - 'tiFlyoutOverviewTableRowFilterInButton' + 'actionItem-security-default-cellActions-filterIn' ); export const FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_OUT_BUTTON = getDataTestSubjectSelector( - 'tiFlyoutOverviewTableRowFilterOutButton' + 'actionItem-security-default-cellActions-filterOut' ); export const FLYOUT_OVERVIEW_HIGH_LEVEL_BLOCK_ITEM = getDataTestSubjectSelector( 'tiFlyoutOverviewHighLevelBlocksItem' ); export const FLYOUT_OVERVIEW_TAB_BLOCKS_FILTER_IN_BUTTON = getDataTestSubjectSelector( - 'tiFlyoutOverviewHighLevelBlocksFilterInButton' + 'actionItem-security-default-cellActions-filterIn' ); export const FLYOUT_OVERVIEW_TAB_BLOCKS_FILTER_OUT_BUTTON = getDataTestSubjectSelector( - 'tiFlyoutOverviewHighLevelBlocksFilterOutButton' + 'actionItem-security-default-cellActions-filterOut' ); export const FLYOUT_OVERVIEW_HIGHLIGHTED_FIELDS_TABLE = getDataTestSubjectSelector( 'tiFlyoutOverviewTableRow' @@ -80,10 +80,10 @@ export const FLYOUT_BLOCK_MORE_ACTIONS_BUTTON = `${getDataTestSubjectSelector( 'tiFlyoutOverviewHighLevelBlocksPopoverButton' )} button`; export const FLYOUT_TABLE_TAB_ROW_FILTER_IN_BUTTON = getDataTestSubjectSelector( - 'tiFlyoutTableFilterInButton' + 'actionItem-security-default-cellActions-filterIn' ); export const FLYOUT_TABLE_TAB_ROW_FILTER_OUT_BUTTON = getDataTestSubjectSelector( - 'tiFlyoutTableFilterOutButton' + 'actionItem-security-default-cellActions-filterOut' ); export const FLYOUT_TAKE_ACTION_BUTTON = getDataTestSubjectSelector( diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts index ab80cca467f04..016e30c035494 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts @@ -109,7 +109,7 @@ export const openBarchartPopoverMenu = () => { export const clickAction = (propertySelector: string, rowIndex: number, actionSelector: string) => { recurse( () => { - cy.get(propertySelector).eq(rowIndex).realHover(); + cy.get(propertySelector).filter(':visible').eq(rowIndex).realHover(); return cy.get(actionSelector).first(); }, ($el) => $el.is(':visible') diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts index 5a5fb1dfe06d2..5de04acbabb25 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts @@ -21,7 +21,6 @@ import { FLYOUT_OVERVIEW_TAB_BLOCKS_FILTER_OUT_BUTTON, FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_IN_BUTTON, FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_OUT_BUTTON, - FLYOUT_TABLE_TAB_ROW_FILTER_IN_BUTTON, FLYOUT_TABLE_TAB_ROW_FILTER_OUT_BUTTON, FLYOUT_OVERVIEW_HIGH_LEVEL_BLOCK_ITEM, } from '../../screens/threat_intelligence/indicators'; @@ -46,14 +45,14 @@ export const filterOutFromBarChartLegend = () => { * Filter in value by clicking on the menu item within an indicators table cell */ export const filterInFromTableCell = () => { - clickAction(INDICATOR_TYPE_CELL, 10, INDICATORS_TABLE_CELL_FILTER_IN_BUTTON); + clickAction(INDICATOR_TYPE_CELL, 15, INDICATORS_TABLE_CELL_FILTER_IN_BUTTON); }; /** * Filter out value by clicking on the menu item within an indicators table cell */ export const filterOutFromTableCell = () => { - clickAction(INDICATOR_TYPE_CELL, 10, INDICATORS_TABLE_CELL_FILTER_OUT_BUTTON); + clickAction(INDICATOR_TYPE_CELL, 15, INDICATORS_TABLE_CELL_FILTER_OUT_BUTTON); }; /** @@ -104,12 +103,20 @@ export const filterOutFromFlyoutOverviewTable = () => { * Filter in value from indicators flyout overview tab table */ export const filterInFromFlyoutTableTab = () => { - cy.get(FLYOUT_TABLE_TAB_ROW_FILTER_IN_BUTTON).first().click(); + clickAction( + '[data-test-subj^="cellActions-renderContent-"]', + 0, + FLYOUT_OVERVIEW_TAB_BLOCKS_FILTER_IN_BUTTON + ); }; /** * Filter out value from indicators flyout overview tab table */ export const filterOutFromFlyoutTableTab = () => { - cy.get(FLYOUT_TABLE_TAB_ROW_FILTER_OUT_BUTTON).first().click(); + clickAction( + '[data-test-subj^="cellActions-renderContent-"]', + 0, + FLYOUT_TABLE_TAB_ROW_FILTER_OUT_BUTTON + ); }; From 2093bbac64e35cd2da014ee99d2b8752a4c92d2e Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Wed, 17 Sep 2025 14:45:54 +0100 Subject: [PATCH 15/16] Fix CI --- .../cypress/screens/threat_intelligence/indicators.ts | 6 ------ .../cypress/screens/threat_intelligence/timeline.ts | 4 +--- .../cypress/tasks/threat_intelligence/timeline.ts | 7 +++---- 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts index 21fe9e791a66b..8812398abb097 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts @@ -73,15 +73,9 @@ export const FLYOUT_OVERVIEW_TAB_BLOCKS_FILTER_OUT_BUTTON = getDataTestSubjectSe export const FLYOUT_OVERVIEW_HIGHLIGHTED_FIELDS_TABLE = getDataTestSubjectSelector( 'tiFlyoutOverviewTableRow' ); -export const FLYOUT_TABLE_MORE_ACTIONS_BUTTON = `${getDataTestSubjectSelector( - 'tiFlyoutOverviewTableRowPopoverButton' -)} button`; export const FLYOUT_BLOCK_MORE_ACTIONS_BUTTON = `${getDataTestSubjectSelector( 'tiFlyoutOverviewHighLevelBlocksPopoverButton' )} button`; -export const FLYOUT_TABLE_TAB_ROW_FILTER_IN_BUTTON = getDataTestSubjectSelector( - 'actionItem-security-default-cellActions-filterIn' -); export const FLYOUT_TABLE_TAB_ROW_FILTER_OUT_BUTTON = getDataTestSubjectSelector( 'actionItem-security-default-cellActions-filterOut' ); diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/timeline.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/timeline.ts index ed1adb33f5392..0bf3b61d94378 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/timeline.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/timeline.ts @@ -20,9 +20,7 @@ export const TIMELINE_DATA_PROVIDERS_WRAPPER = getDataTestSubjectSelector(`dataP export const TIMELINE_DRAGGABLE_ITEM = getDataTestSubjectSelector(`providerContainer`); export const TIMELINE_AND_OR_BADGE = getDataTestSubjectSelector(`and-or-badge`); export const CLOSE_TIMELINE_BTN = '[data-test-subj="timeline-modal-header-close-button"]'; -export const FLYOUT_OVERVIEW_TAB_TABLE_ROW_TIMELINE_BUTTON = getDataTestSubjectSelector( - 'tiFlyoutOverviewTableRowTimelineButton' -); + export const FLYOUT_OVERVIEW_TAB_BLOCKS_TIMELINE_BUTTON = getDataTestSubjectSelector( 'tiFlyoutOverviewHighLevelBlocksTimelineButton' ); diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts index be4e7e618b6eb..53125b94b3c3d 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts @@ -9,7 +9,6 @@ import { clickAction, openBarchartPopoverMenu } from './common'; import { CLOSE_TIMELINE_BTN, FLYOUT_INVESTIGATE_IN_TIMELINE_ITEM, - FLYOUT_OVERVIEW_TAB_TABLE_ROW_TIMELINE_BUTTON, INDICATORS_TABLE_CELL_TIMELINE_BUTTON, INDICATORS_TABLE_INVESTIGATE_IN_TIMELINE_BUTTON_ICON, UNTITLED_TIMELINE_BUTTON, @@ -18,7 +17,6 @@ import { BARCHART_TIMELINE_BUTTON, FLYOUT_BLOCK_MORE_ACTIONS_BUTTON, FLYOUT_OVERVIEW_HIGH_LEVEL_BLOCK_ITEM, - FLYOUT_TABLE_MORE_ACTIONS_BUTTON, INDICATOR_TYPE_CELL, } from '../../screens/threat_intelligence/indicators'; @@ -54,8 +52,9 @@ export const closeTimeline = () => { * Add data to timeline from flyout overview tab table */ export const addToTimelineFromFlyoutOverviewTabTable = () => { - cy.get(FLYOUT_TABLE_MORE_ACTIONS_BUTTON).first().click(); - cy.get(FLYOUT_OVERVIEW_TAB_TABLE_ROW_TIMELINE_BUTTON).first().click(); + cy.get(`[data-test-subj^="cellActions-renderContent-"]`).first().trigger('mouseover'); + cy.get(`[data-test-subj="showExtraActionsButton"]`).click(); + cy.get(`[data-test-subj="actionItem-security-default-cellActions-addToTimeline"]`).click(); }; /** From d51f056691fa2d8c6cfb80f63f9958045a499131 Mon Sep 17 00:00:00 2001 From: Nicholas Peretti Date: Thu, 18 Sep 2025 20:02:03 +0100 Subject: [PATCH 16/16] Fix Cypress tests --- .../threat_intelligence/timeline.cy.ts | 16 +++++++++------- .../screens/threat_intelligence/indicators.ts | 7 +++---- .../tasks/threat_intelligence/common.ts | 2 +- .../tasks/threat_intelligence/query_bar.ts | 6 ++++-- .../tasks/threat_intelligence/timeline.ts | 18 ++++++++++++++---- 5 files changed, 31 insertions(+), 18 deletions(-) diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/timeline.cy.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/timeline.cy.ts index 691dc1926a454..0791280bde561 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/timeline.cy.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/e2e/investigations/threat_intelligence/timeline.cy.ts @@ -49,7 +49,7 @@ describe('Timeline', { tags: ['@ess'] }, () => { openTimeline(); cy.get(TIMELINE_DATA_PROVIDERS_WRAPPER).within(() => { - cy.get(TIMELINE_AND_OR_BADGE).should('be.visible').and('have.length', 3); + cy.get(TIMELINE_AND_OR_BADGE).filter(':visible').should('be.visible').and('have.length', 1); cy.get(TIMELINE_DRAGGABLE_ITEM).should('contain.text', 'threat.feed.name: "AbuseCH Malware"'); }); closeTimeline(); @@ -57,12 +57,12 @@ describe('Timeline', { tags: ['@ess'] }, () => { cy.log('add to timeline when clicking in an indicator flyout overview tab table row'); openFlyout(); - addToTimelineFromFlyoutOverviewTabTable(); + addToTimelineFromFlyoutOverviewTabTable('threat.indicator.file.hash.md5'); closeFlyout(); openTimeline(); cy.get(TIMELINE_DATA_PROVIDERS_WRAPPER).within(() => { - cy.get(TIMELINE_AND_OR_BADGE).should('be.visible').and('have.length', 5); + cy.get(TIMELINE_AND_OR_BADGE).filter(':visible').should('be.visible').and('have.length', 2); cy.get(TIMELINE_DRAGGABLE_ITEM).should( 'contain.text', 'threat.indicator.file.hash.md5: "a7f997be65f62fdbe5ec076f0fe207f7"' @@ -80,9 +80,11 @@ describe('Timeline', { tags: ['@ess'] }, () => { closeFlyout(); openTimeline(); - cy.get(TIMELINE_DATA_PROVIDERS_WRAPPER).within(() => { - cy.get(TIMELINE_AND_OR_BADGE).should('be.visible').and('have.length', 5); - }); + cy.get(TIMELINE_DATA_PROVIDERS_WRAPPER) + .filter(':visible') + .within(() => { + cy.get(TIMELINE_AND_OR_BADGE).filter(':visible').should('be.visible').and('have.length', 3); + }); closeTimeline(); @@ -92,7 +94,7 @@ describe('Timeline', { tags: ['@ess'] }, () => { openTimeline(); cy.get(TIMELINE_DATA_PROVIDERS_WRAPPER).within(() => { - cy.get(TIMELINE_AND_OR_BADGE).should('be.visible').and('have.length', 7); + cy.get(TIMELINE_AND_OR_BADGE).filter(':visible').should('be.visible').and('have.length', 4); cy.get(TIMELINE_DRAGGABLE_ITEM).should('contain.text', 'threat.indicator.type: "file"'); }); diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts index 8812398abb097..5b494b1e4928d 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/threat_intelligence/indicators.ts @@ -36,7 +36,7 @@ export const INDICATORS_TABLE_LAST_SEEN_COLUMN_HEADER = getDataTestSubjectSelect export const INDICATORS_TABLE_INDICATOR_LAST_SEEN_CELL = '[data-gridcell-column-id="threat.indicator.last_seen"]'; export const TABLE_CONTROLS = getDataTestSubjectSelector('dataGridControls'); -export const INDICATOR_TYPE_CELL = `[role="gridcell"][data-gridcell-column-id^="threat"]`; +export const INDICATOR_TYPE_CELL = `[role="gridcell"][data-gridcell-column-id="threat.indicator.type"]`; export const INDICATORS_TABLE_CELL_FILTER_IN_BUTTON = `${getDataTestSubjectSelector( 'tiIndicatorsTableCellFilterInButton' )} button`; @@ -73,9 +73,8 @@ export const FLYOUT_OVERVIEW_TAB_BLOCKS_FILTER_OUT_BUTTON = getDataTestSubjectSe export const FLYOUT_OVERVIEW_HIGHLIGHTED_FIELDS_TABLE = getDataTestSubjectSelector( 'tiFlyoutOverviewTableRow' ); -export const FLYOUT_BLOCK_MORE_ACTIONS_BUTTON = `${getDataTestSubjectSelector( - 'tiFlyoutOverviewHighLevelBlocksPopoverButton' -)} button`; +export const FLYOUT_BLOCK_MORE_ACTIONS_BUTTON = + getDataTestSubjectSelector('showExtraActionsButton'); export const FLYOUT_TABLE_TAB_ROW_FILTER_OUT_BUTTON = getDataTestSubjectSelector( 'actionItem-security-default-cellActions-filterOut' ); diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts index 016e30c035494..f1e78aedc9706 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts @@ -109,7 +109,7 @@ export const openBarchartPopoverMenu = () => { export const clickAction = (propertySelector: string, rowIndex: number, actionSelector: string) => { recurse( () => { - cy.get(propertySelector).filter(':visible').eq(rowIndex).realHover(); + cy.get(propertySelector).filter(':visible').eq(rowIndex).trigger('mouseover'); return cy.get(actionSelector).first(); }, ($el) => $el.is(':visible') diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts index 5de04acbabb25..79637efc560d9 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/query_bar.ts @@ -89,14 +89,16 @@ export const filterOutFromFlyoutBlockItem = () => { * Filter in value from indicators flyout overview tab table */ export const filterInFromFlyoutOverviewTable = () => { - cy.get(FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_IN_BUTTON).first().click(); + cy.get(`[data-test-subj^="cellActions-renderContent-"]`).first().trigger('mouseover'); + cy.get(FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_IN_BUTTON).click(); }; /** * Filter out value from indicators flyout overview tab table */ export const filterOutFromFlyoutOverviewTable = () => { - cy.get(FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_OUT_BUTTON).first().click(); + cy.get(`[data-test-subj^="cellActions-renderContent-"]`).first().trigger('mouseover'); + cy.get(FLYOUT_OVERVIEW_TAB_TABLE_ROW_FILTER_OUT_BUTTON).click(); }; /** diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts index 53125b94b3c3d..f34d4461bb62d 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/tasks/threat_intelligence/timeline.ts @@ -24,7 +24,15 @@ import { * Add data to timeline from barchart legend menu item */ export const addToTimelineFromBarchartLegend = () => { + /** + * We need to wait for the JS chunk to load after opening the popover + * otherwise the click will not trigger any action + */ + cy.intercept('GET', '**/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.chunk*.js').as( + 'lazyChunk' + ); openBarchartPopoverMenu(); + cy.wait('@lazyChunk'); cy.get(BARCHART_TIMELINE_BUTTON).first().click(); }; /** @@ -51,9 +59,9 @@ export const closeTimeline = () => { /** * Add data to timeline from flyout overview tab table */ -export const addToTimelineFromFlyoutOverviewTabTable = () => { - cy.get(`[data-test-subj^="cellActions-renderContent-"]`).first().trigger('mouseover'); - cy.get(`[data-test-subj="showExtraActionsButton"]`).click(); +export const addToTimelineFromFlyoutOverviewTabTable = (fieldId?: string) => { + cy.get(`[data-test-subj^="cellActions-renderContent-${fieldId}"]`).first().trigger('mouseover'); + cy.get(FLYOUT_BLOCK_MORE_ACTIONS_BUTTON).click(); cy.get(`[data-test-subj="actionItem-security-default-cellActions-addToTimeline"]`).click(); }; @@ -61,7 +69,9 @@ export const addToTimelineFromFlyoutOverviewTabTable = () => { * Add data to timeline from flyout overview tab block */ export const addToTimelineFromFlyoutOverviewTabBlock = () => { - clickAction(FLYOUT_OVERVIEW_HIGH_LEVEL_BLOCK_ITEM, 0, FLYOUT_BLOCK_MORE_ACTIONS_BUTTON); + cy.get(FLYOUT_OVERVIEW_HIGH_LEVEL_BLOCK_ITEM).first().trigger('mouseover'); + cy.get(FLYOUT_BLOCK_MORE_ACTIONS_BUTTON).click(); + cy.get(`[data-test-subj="actionItem-security-default-cellActions-addToTimeline"]`).click(); }; /**