From b7f11ab94e298829aa054b2f79fa32d9f8eb57bb Mon Sep 17 00:00:00 2001 From: Philippe Oberti Date: Thu, 7 Nov 2024 11:23:32 -0600 Subject: [PATCH] [Security Solution][Alert details] - open related case in new browser tab (#197494) ## Summary This PR makes a very small change to the alerts details expandable flyout Insights Correlations tab where we display all related cases in a table. The first column of that table renders a link to the cases details page. When clicking on that link, instead of navigating to the cases details page with the same browser tab, we know open a new tab, so we don't loose the context of the alert. The UI displays the icon that we use in other places to inform users that the action is opening a new tab. Old behavior https://github.com/user-attachments/assets/48c68608-9091-45f4-a16b-a19f0af12f87 New behavior https://github.com/user-attachments/assets/78cf6b81-5044-4f26-9808-8fa8d829d723 https://github.com/elastic/security-team/issues/7034 ## Edit This PR now also makes a change to the alert cases guided onboarding tour, as opening a new tab breaks the tour. The changes are pretty small and consist of removing the last step that was forcing the users to click on the alert details flyout expanded Insights Correlations related cases section. The tour now ends after creating a case, with a message saying that cases can be accessed via the toast or via the related cases in the flyout. https://github.com/user-attachments/assets/0061fdce-5d43-45a3-8166-f812eaffa7b3 (cherry picked from commit 9fafb75b808a819eb257cd6013aac54169a0bcc6) --- .../common/guided_onboarding/translations.ts | 2 +- .../public/cases/pages/index.test.tsx | 101 ---------------- .../public/cases/pages/index.tsx | 17 +-- .../guided_onboarding_tour/tour.test.tsx | 4 +- .../guided_onboarding_tour/tour_config.ts | 14 --- .../guided_onboarding_tour/tour_step.test.tsx | 2 +- .../common/components/links/index.test.tsx | 110 +++++++++++++----- .../public/common/components/links/index.tsx | 47 +++----- .../use_add_to_case_actions.tsx | 6 +- .../left/components/related_cases.test.tsx | 78 +++++++++++-- .../left/components/related_cases.tsx | 69 ++++++----- .../components/correlations_overview.test.tsx | 2 +- .../components/correlations_overview.tsx | 2 +- .../components/insights_section.test.tsx | 2 +- .../right/components/insights_section.tsx | 2 +- .../translations/translations/fr-FR.json | 2 - .../translations/translations/ja-JP.json | 2 - .../translations/translations/zh-CN.json | 2 - .../e2e/explore/guided_onboarding/tour.cy.ts | 1 - .../cypress/tasks/guided_onboarding.ts | 2 - 20 files changed, 211 insertions(+), 256 deletions(-) delete mode 100644 x-pack/plugins/security_solution/public/cases/pages/index.test.tsx diff --git a/x-pack/plugins/security_solution/common/guided_onboarding/translations.ts b/x-pack/plugins/security_solution/common/guided_onboarding/translations.ts index 46017971df1b0..ffd758d1a1ffc 100644 --- a/x-pack/plugins/security_solution/common/guided_onboarding/translations.ts +++ b/x-pack/plugins/security_solution/common/guided_onboarding/translations.ts @@ -87,6 +87,6 @@ export const CASES_MANUAL_TITLE = i18n.translate( export const CASES_MANUAL_DESCRIPTION = i18n.translate( 'xpack.securitySolution.guideConfig.alertsStep.manualCompletion.description', { - defaultMessage: `After you've explored the case, continue.`, + defaultMessage: `View the case's details by clicking View case in the confirmation message that appears. Alternatively, go to the Insights section of the alert details flyout, find the case you created, and select it. After you've explored the case, continue.`, } ); diff --git a/x-pack/plugins/security_solution/public/cases/pages/index.test.tsx b/x-pack/plugins/security_solution/public/cases/pages/index.test.tsx deleted file mode 100644 index 94fc9063f042e..0000000000000 --- a/x-pack/plugins/security_solution/public/cases/pages/index.test.tsx +++ /dev/null @@ -1,101 +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 { Cases } from '.'; -import { Router } from '@kbn/shared-ux-router'; -import { render } from '@testing-library/react'; -import { TestProviders } from '../../common/mock'; -import { useTourContext } from '../../common/components/guided_onboarding_tour'; -import { - AlertsCasesTourSteps, - SecurityStepId, -} from '../../common/components/guided_onboarding_tour/tour_config'; - -jest.mock('../../common/components/guided_onboarding_tour'); -jest.mock('../../common/lib/kibana'); - -type Action = 'PUSH' | 'POP' | 'REPLACE'; -const pop: Action = 'POP'; -const location = { - pathname: '/network', - search: '', - state: '', - hash: '', -}; -const mockHistory = { - length: 2, - location, - action: pop, - push: jest.fn(), - replace: jest.fn(), - go: jest.fn(), - goBack: jest.fn(), - goForward: jest.fn(), - block: jest.fn(), - createHref: jest.fn(), - listen: jest.fn(), -}; - -describe('cases page in security', () => { - const endTourStep = jest.fn(); - beforeEach(() => { - (useTourContext as jest.Mock).mockReturnValue({ - activeStep: AlertsCasesTourSteps.viewCase, - incrementStep: () => null, - endTourStep, - isTourShown: () => true, - }); - jest.clearAllMocks(); - }); - - it('calls endTour on cases details page when SecurityStepId.alertsCases tour is active and step is AlertsCasesTourSteps.viewCase', () => { - render( - - - , - { wrapper: TestProviders } - ); - - expect(endTourStep).toHaveBeenCalledWith(SecurityStepId.alertsCases); - }); - - it('does not call endTour on cases details page when SecurityStepId.alertsCases tour is not active', () => { - (useTourContext as jest.Mock).mockReturnValue({ - activeStep: AlertsCasesTourSteps.viewCase, - incrementStep: () => null, - endTourStep, - isTourShown: () => false, - }); - render( - - - , - { wrapper: TestProviders } - ); - - expect(endTourStep).not.toHaveBeenCalled(); - }); - - it('does not call endTour on cases details page when SecurityStepId.alertsCases tour is active and step is not AlertsCasesTourSteps.viewCase', () => { - (useTourContext as jest.Mock).mockReturnValue({ - activeStep: AlertsCasesTourSteps.expandEvent, - incrementStep: () => null, - endTourStep, - isTourShown: () => true, - }); - - render( - - - , - { wrapper: TestProviders } - ); - - expect(endTourStep).not.toHaveBeenCalled(); - }); -}); diff --git a/x-pack/plugins/security_solution/public/cases/pages/index.tsx b/x-pack/plugins/security_solution/public/cases/pages/index.tsx index 82c069e1ed77c..77fc7db0c0a8a 100644 --- a/x-pack/plugins/security_solution/public/cases/pages/index.tsx +++ b/x-pack/plugins/security_solution/public/cases/pages/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; import { useDispatch } from 'react-redux'; import type { CaseViewRefreshPropInterface } from '@kbn/cases-plugin/common'; import { CaseMetricsFeature } from '@kbn/cases-plugin/common'; @@ -13,11 +13,6 @@ import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; import { CaseDetailsRefreshContext } from '../../common/components/endpoint'; import { DocumentDetailsRightPanelKey } from '../../flyout/document_details/shared/constants/panel_keys'; import { RulePanelKey } from '../../flyout/rule_details/right'; -import { useTourContext } from '../../common/components/guided_onboarding_tour'; -import { - AlertsCasesTourSteps, - SecurityStepId, -} from '../../common/components/guided_onboarding_tour/tour_config'; import { TimelineId } from '../../../common/types/timeline'; import { useKibana, useNavigation } from '../../common/lib/kibana'; import { APP_ID, CASES_PATH, SecurityPageName } from '../../../common/constants'; @@ -80,16 +75,6 @@ const CaseContainerComponent: React.FC = () => { }); const refreshRef = useRef(null); - const { activeStep, endTourStep, isTourShown } = useTourContext(); - - const isTourActive = useMemo( - () => activeStep === AlertsCasesTourSteps.viewCase && isTourShown(SecurityStepId.alertsCases), - [activeStep, isTourShown] - ); - - useEffect(() => { - if (isTourActive) endTourStep(SecurityStepId.alertsCases); - }, [endTourStep, isTourActive]); useEffect(() => { dispatch( diff --git a/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour.test.tsx b/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour.test.tsx index cb99772343c7b..e3f85df557e80 100644 --- a/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour.test.tsx @@ -104,8 +104,8 @@ describe('useTourContext', () => { wrapper: TourContextProvider, }); await waitForNextUpdate(); - result.current.setStep(tourId, 7); - expect(result.current.activeStep).toBe(7); + result.current.setStep(tourId, 6); + expect(result.current.activeStep).toBe(6); }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts b/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts index dd04b76d061a8..31080d7ea49f0 100644 --- a/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts +++ b/x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts @@ -22,7 +22,6 @@ export enum AlertsCasesTourSteps { addAlertToCase = 4, createCase = 5, submitCase = 6, - viewCase = 7, } export type StepConfig = Pick< @@ -72,7 +71,6 @@ export const hiddenWhenCaseFlyoutExpanded: Record { }); const mockCall = { ...mockTourStep.mock.calls[0][0] }; expect(mockCall.step).toEqual(1); - expect(mockCall.stepsTotal).toEqual(7); + expect(mockCall.stepsTotal).toEqual(6); }); it('forces the render for createCase step of the SecurityStepId.alertsCases tour step', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx index dad30ee050dda..ab5507b958e23 100644 --- a/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/links/index.test.tsx @@ -10,10 +10,7 @@ import { mount, shallow } from 'enzyme'; import React from 'react'; import { removeExternalLinkText } from '@kbn/securitysolution-io-ts-utils'; import { mountWithIntl } from '@kbn/test-jest-helpers'; - import { encodeIpv6 } from '../../lib/helpers'; -import { useUiSetting$ } from '../../lib/kibana'; - import { GoogleLink, HostDetailsLink, @@ -26,16 +23,33 @@ import { DEFAULT_NUMBER_OF_LINK, ExternalLink, SecuritySolutionLinkButton, + CaseDetailsLink, } from '.'; import { SecurityPageName } from '../../../app/types'; import { mockGetAppUrl, mockNavigateTo } from '@kbn/security-solution-navigation/mocks/navigation'; +import { APP_UI_ID } from '../../../../common'; jest.mock('@kbn/security-solution-navigation/src/navigation'); jest.mock('../navigation/use_url_state_query_params'); - jest.mock('../../../overview/components/events_by_dataset'); -jest.mock('../../lib/kibana'); +const mockNavigateToApp = jest.fn(); +const mockUseUiSetting$ = jest.fn(); +jest.mock('../../lib/kibana', () => { + const original = jest.requireActual('../../lib/kibana'); + return { + ...original, + useKibana: () => ({ + services: { + ...original.useKibana().services, + application: { + navigateToApp: mockNavigateToApp, + }, + }, + }), + useUiSetting$: () => mockUseUiSetting$(), + }; +}); mockGetAppUrl.mockImplementation(({ path }) => path); @@ -96,6 +110,55 @@ describe('Custom Links', () => { }); }); + describe('CaseDetailsLink', () => { + test('should render a link with detailName as displayed text', () => { + const wrapper = mountWithIntl(); + expect(wrapper.text()).toEqual('name'); + expect(wrapper.find('EuiLink').last().prop('aria-label')).toEqual( + 'click to visit case with title name' + ); + expect(wrapper.find('EuiLink').last().prop('href')).toEqual('/name'); + }); + + test('should render a link with children instead of detailName', () => { + const wrapper = mountWithIntl( + +
{'children'}
+ + ); + expect(wrapper.text()).toEqual('children'); + }); + + test('should render a link with aria-label using title prop instead of detailName', () => { + const wrapper = mountWithIntl(); + expect(wrapper.find('EuiLink').last().prop('aria-label')).toEqual( + 'click to visit case with title title' + ); + }); + + it('should call navigateToApp with correct values', () => { + const wrapper = mountWithIntl(); + wrapper.find('a[href="/name"]').simulate('click'); + + expect(mockNavigateToApp).toHaveBeenCalledWith(APP_UI_ID, { + deepLinkId: SecurityPageName.case, + path: '/name', + openInNewTab: false, + }); + }); + + it('should call navigateToApp with value of openInNewTab prop', () => { + const wrapper = mountWithIntl(); + wrapper.find('a[href="/name"]').simulate('click'); + + expect(mockNavigateToApp).toHaveBeenCalledWith(APP_UI_ID, { + deepLinkId: SecurityPageName.case, + path: '/name', + openInNewTab: true, + }); + }); + }); + describe('GoogleLink', () => { test('it renders text passed in as value', () => { const wrapper = mountWithIntl( @@ -309,8 +372,7 @@ describe('Custom Links', () => { describe('links property', () => { beforeEach(() => { - (useUiSetting$ as jest.Mock).mockReset(); - (useUiSetting$ as jest.Mock).mockReturnValue([mockDefaultReputationLinks]); + mockUseUiSetting$.mockReturnValue([mockDefaultReputationLinks]); }); test('it renders default link text', () => { @@ -321,8 +383,7 @@ describe('Custom Links', () => { }); test('it renders customized link text', () => { - (useUiSetting$ as jest.Mock).mockReset(); - (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]); + mockUseUiSetting$.mockReturnValue([mockCustomizedReputationLinks]); const wrapper = shallow(); wrapper.find('[data-test-subj="externalLink"]').forEach((node, idx) => { expect(node.at(idx).text()).toEqual(mockCustomizedReputationLinks[idx].name); @@ -341,12 +402,7 @@ describe('Custom Links', () => { describe('number of links', () => { beforeAll(() => { - (useUiSetting$ as jest.Mock).mockReset(); - (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]); - }); - - afterEach(() => { - (useUiSetting$ as jest.Mock).mockClear(); + mockUseUiSetting$.mockReturnValue([mockCustomizedReputationLinks]); }); test('it renders correct number of links by default', () => { @@ -364,8 +420,7 @@ describe('Custom Links', () => { }); test('it renders correct number of visible link', () => { - (useUiSetting$ as jest.Mock).mockReset(); - (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]); + mockUseUiSetting$.mockReturnValue([mockCustomizedReputationLinks]); const wrapper = mountWithIntl( @@ -374,8 +429,7 @@ describe('Custom Links', () => { }); test('it renders correct number of tooltips for visible links', () => { - (useUiSetting$ as jest.Mock).mockReset(); - (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]); + mockUseUiSetting$.mockReturnValue([mockCustomizedReputationLinks]); const wrapper = mountWithIntl( @@ -391,12 +445,9 @@ describe('Custom Links', () => { ]; const mockInvalidLinksNoUrl = [{ name: 'Link 1' }]; const mockInvalidUrl = [{ name: 'Link 1', url_template: "" }]; - afterEach(() => { - (useUiSetting$ as jest.Mock).mockReset(); - }); test('it filters empty object', () => { - (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksEmptyObj]); + mockUseUiSetting$.mockReturnValue([mockInvalidLinksEmptyObj]); const wrapper = mountWithIntl( @@ -405,7 +456,7 @@ describe('Custom Links', () => { }); test('it filters object without name property', () => { - (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksNoName]); + mockUseUiSetting$.mockReturnValue([mockInvalidLinksNoName]); const wrapper = mountWithIntl( @@ -414,7 +465,7 @@ describe('Custom Links', () => { }); test('it filters object without url_template property', () => { - (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksNoUrl]); + mockUseUiSetting$.mockReturnValue([mockInvalidLinksNoUrl]); const wrapper = mountWithIntl( @@ -423,7 +474,7 @@ describe('Custom Links', () => { }); test('it filters object with invalid url', () => { - (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidUrl]); + mockUseUiSetting$.mockReturnValue([mockInvalidUrl]); const wrapper = mountWithIntl( @@ -434,12 +485,7 @@ describe('Custom Links', () => { describe('external icon', () => { beforeAll(() => { - (useUiSetting$ as jest.Mock).mockReset(); - (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]); - }); - - afterEach(() => { - (useUiSetting$ as jest.Mock).mockClear(); + mockUseUiSetting$.mockReturnValue([mockCustomizedReputationLinks]); }); test('it renders correct number of external icons by default', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/links/index.tsx b/x-pack/plugins/security_solution/public/common/components/links/index.tsx index 9d615d80be63f..0648dd60d84f9 100644 --- a/x-pack/plugins/security_solution/public/common/components/links/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/links/index.tsx @@ -8,11 +8,9 @@ import type { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui'; import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiToolTip } from '@elastic/eui'; import type { SyntheticEvent, MouseEvent } from 'react'; -import React, { useMemo, useCallback, useEffect } from 'react'; +import React, { useMemo, useCallback } from 'react'; import { isArray, isNil } from 'lodash/fp'; -import { GuidedOnboardingTourStep } from '../guided_onboarding_tour/tour_step'; -import { AlertsCasesTourSteps, SecurityStepId } from '../guided_onboarding_tour/tour_config'; -import { useTourContext } from '../guided_onboarding_tour'; +import type { NavigateToAppOptions } from '@kbn/core-application-browser'; import { IP_REPUTATION_LINKS_SETTING, APP_UI_ID } from '../../../../common/constants'; import { encodeIpv6 } from '../../lib/helpers'; import { @@ -306,27 +304,19 @@ export interface CaseDetailsLinkComponentProps { */ title?: string; /** - * Link index + * If true, will open the app in new tab, will share session information via window.open if base */ - index?: number; + openInNewTab?: NavigateToAppOptions['openInNewTab']; } const CaseDetailsLinkComponent: React.FC = ({ - index, children, detailName, title, + openInNewTab = false, }) => { const { formatUrl, search } = useFormatUrl(SecurityPageName.case); const { navigateToApp } = useKibana().services.application; - const { activeStep, isTourShown } = useTourContext(); - const isTourStepActive = useMemo( - () => - activeStep === AlertsCasesTourSteps.viewCase && - isTourShown(SecurityStepId.alertsCases) && - index === 0, - [activeStep, index, isTourShown] - ); const goToCaseDetails = useCallback( async (ev?: SyntheticEvent) => { @@ -334,32 +324,21 @@ const CaseDetailsLinkComponent: React.FC = ({ return navigateToApp(APP_UI_ID, { deepLinkId: SecurityPageName.case, path: getCaseDetailsUrl({ id: detailName, search }), + openInNewTab, }); }, - [detailName, navigateToApp, search] + [detailName, navigateToApp, openInNewTab, search] ); - useEffect(() => { - if (isTourStepActive) - document.querySelector(`[tour-step="RelatedCases-accordion"]`)?.scrollIntoView(); - }, [isTourStepActive]); - return ( - - - {children ? children : detailName} - - + {children ? children : detailName} + ); }; export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent); diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_add_to_case_actions.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_add_to_case_actions.tsx index 0fa09d4bf4354..60a19f005c53e 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_add_to_case_actions.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_add_to_case_actions.tsx @@ -63,7 +63,7 @@ export const useAddToCaseActions = ({ : []; }, [casesUi.helpers, ecsData, nonEcsData]); - const { activeStep, incrementStep, setStep, isTourShown } = useTourContext(); + const { activeStep, endTourStep, incrementStep, isTourShown } = useTourContext(); const onCaseSuccess = useCallback(() => { if (onSuccess) { @@ -77,9 +77,9 @@ export const useAddToCaseActions = ({ const afterCaseCreated = useCallback(async () => { if (isTourShown(SecurityStepId.alertsCases)) { - setStep(SecurityStepId.alertsCases, AlertsCasesTourSteps.viewCase); + endTourStep(SecurityStepId.alertsCases); } - }, [setStep, isTourShown]); + }, [endTourStep, isTourShown]); const prefillCasesValue = useMemo( () => diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.test.tsx index db9eb7bdfb3ae..48f7a1fbce0a6 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.test.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; import { render } from '@testing-library/react'; import { CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID, @@ -19,13 +18,26 @@ import { EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID, EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID, } from '../../../shared/components/test_ids'; +import { SecurityPageName } from '@kbn/deeplinks-security'; +import { TestProviders } from '../../../../common/mock'; +import { APP_UI_ID } from '../../../../../common'; jest.mock('../../shared/hooks/use_fetch_related_cases'); -jest.mock('../../../../common/components/links', () => ({ - CaseDetailsLink: jest - .fn() - .mockImplementation(({ title }) => <>{``}), -})); + +const mockNavigateToApp = jest.fn(); +jest.mock('../../../../common/lib/kibana', () => { + const original = jest.requireActual('../../../../common/lib/kibana'); + return { + ...original, + useKibana: () => ({ + services: { + application: { + navigateToApp: mockNavigateToApp, + }, + }, + }), + }; +}); const eventId = 'eventId'; @@ -41,13 +53,53 @@ const TITLE_TEXT = EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID( const renderRelatedCases = () => render( - + - + ); describe('', () => { it('should render many related cases correctly', () => { + (useFetchRelatedCases as jest.Mock).mockReturnValue({ + loading: false, + error: false, + data: [ + { + id: 'id1', + title: 'title1', + description: 'description1', + status: 'open', + }, + { + id: 'id2', + title: 'title2', + description: 'description2', + status: 'in-progress', + }, + { + id: 'id3', + title: 'title3', + description: 'description3', + status: 'closed', + }, + ], + dataCount: 3, + }); + + const { getByTestId, getByText } = renderRelatedCases(); + expect(getByTestId(TOGGLE_ICON)).toBeInTheDocument(); + expect(getByTestId(TITLE_ICON)).toBeInTheDocument(); + expect(getByTestId(TITLE_TEXT)).toHaveTextContent('3 related cases'); + expect(getByTestId(CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID)).toBeInTheDocument(); + expect(getByText('title1')).toBeInTheDocument(); + expect(getByText('open')).toBeInTheDocument(); + expect(getByText('title2')).toBeInTheDocument(); + expect(getByText('in-progress')).toBeInTheDocument(); + expect(getByText('title3')).toBeInTheDocument(); + expect(getByText('closed')).toBeInTheDocument(); + }); + + it('should open new tab when clicking on the case link', () => { (useFetchRelatedCases as jest.Mock).mockReturnValue({ loading: false, error: false, @@ -63,10 +115,12 @@ describe('', () => { }); const { getByTestId } = renderRelatedCases(); - expect(getByTestId(TOGGLE_ICON)).toBeInTheDocument(); - expect(getByTestId(TITLE_ICON)).toBeInTheDocument(); - expect(getByTestId(TITLE_TEXT)).toHaveTextContent('1 related case'); - expect(getByTestId(CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID)).toBeInTheDocument(); + getByTestId('case-details-link').click(); + expect(mockNavigateToApp).toHaveBeenCalledWith(APP_UI_ID, { + deepLinkId: SecurityPageName.case, + path: '/id', + openInNewTab: true, + }); }); it('should render null if error', () => { diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.tsx index 13df33a2deb1b..0ce04507b9b05 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/related_cases.tsx @@ -7,9 +7,10 @@ import React, { useMemo } from 'react'; import type { EuiBasicTableColumn } from '@elastic/eui'; -import { EuiInMemoryTable } from '@elastic/eui'; +import { EuiIcon, EuiInMemoryTable } from '@elastic/eui'; import type { RelatedCase } from '@kbn/cases-plugin/common'; import { FormattedMessage } from '@kbn/i18n-react'; +import { css } from '@emotion/react'; import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper'; import { CaseDetailsLink } from '../../../../common/components/links'; import { @@ -20,6 +21,10 @@ import { useFetchRelatedCases } from '../../shared/hooks/use_fetch_related_cases import { ExpandablePanel } from '../../../shared/components/expandable_panel'; const ICON = 'warning'; +const EXPAND_PROPERTIES = { + expandable: true, + expandedOnFirstRender: true, +}; const getColumns: (data: RelatedCase[]) => Array> = (data) => [ { @@ -30,16 +35,21 @@ const getColumns: (data: RelatedCase[]) => Array ), - render: (value: string, caseData: RelatedCase) => { - const index = data.findIndex((d) => d.id === caseData.id); - return ( - - - {caseData.title} - - - ); - }, + render: (_: string, caseData: RelatedCase) => ( + + + {caseData.title} + + + + ), }, { field: 'status', @@ -62,33 +72,38 @@ export interface RelatedCasesProps { } /** - * + * Show related cases in an expandable panel with a table */ export const RelatedCases: React.FC = ({ eventId }) => { const { loading, error, data, dataCount } = useFetchRelatedCases({ eventId }); const columns = useMemo(() => getColumns(data), [data]); + const title = useMemo( + () => ( + + ), + [dataCount] + ); + const header = useMemo( + () => ({ + title, + iconType: ICON, + }), + [title] + ); + if (error) { return null; } return ( - ), - iconType: ICON, - }} - content={{ error }} - expand={{ - expandable: true, - expandedOnFirstRender: true, - }} + header={header} + expand={EXPAND_PROPERTIES} data-test-subj={CORRELATIONS_DETAILS_CASES_SECTION_TEST_ID} > ', () => { jest.mocked(useTourContext).mockReturnValue({ hidden: false, setAllTourStepsHidden: jest.fn(), - activeStep: AlertsCasesTourSteps.viewCase, + activeStep: AlertsCasesTourSteps.submitCase, endTourStep: jest.fn(), incrementStep: jest.fn(), isTourShown: jest.fn(), diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/correlations_overview.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/correlations_overview.tsx index 9ba55f0d041f6..4043230d5269e 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/correlations_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/correlations_overview.tsx @@ -73,7 +73,7 @@ export const CorrelationsOverview: React.FC = () => { }, [eventId, openLeftPanel, indexName, scopeId]); useEffect(() => { - if (isTourShown(SecurityStepId.alertsCases) && activeStep === AlertsCasesTourSteps.viewCase) { + if (isTourShown(SecurityStepId.alertsCases) && activeStep === AlertsCasesTourSteps.createCase) { goToCorrelationsTab(); } }, [activeStep, goToCorrelationsTab, isTourShown]); diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.test.tsx index 96dff8150e654..c06481c6b2812 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.test.tsx @@ -171,7 +171,7 @@ describe('', () => { it('should render the component expanded if guided onboarding tour is shown', () => { (useExpandSection as jest.Mock).mockReturnValue(false); - mockUseTourContext.mockReturnValue({ activeStep: 7, isTourShown: jest.fn(() => true) }); + mockUseTourContext.mockReturnValue({ activeStep: 5, isTourShown: jest.fn(() => true) }); const contextValue = { eventId: 'some_Id', diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.tsx index 19c75a77cbabf..c2d71ee37baa8 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_section.tsx @@ -35,7 +35,7 @@ export const InsightsSection = memo(() => { const { activeStep, isTourShown } = useTourContext(); const isGuidedOnboardingTourShown = - isTourShown(SecurityStepId.alertsCases) && activeStep === AlertsCasesTourSteps.viewCase; + isTourShown(SecurityStepId.alertsCases) && activeStep === AlertsCasesTourSteps.createCase; const expanded = useExpandSection({ title: KEY, defaultValue: false }) || isGuidedOnboardingTourShown; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 03206b7d39659..a099dbfe0762f 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -41341,8 +41341,6 @@ "xpack.securitySolution.guided_onboarding.tour.ruleNameStep.tourTitle": "Examiner le tableau d'alertes", "xpack.securitySolution.guided_onboarding.tour.submitCase.tourContent": "Appuyez sur \"Créer un cas\" pour continuer.", "xpack.securitySolution.guided_onboarding.tour.submitCase.tourTitle": "Créer un cas", - "xpack.securitySolution.guided_onboarding.tour.viewCase.tourContent": "Les cas s'affichent sous Insights, dans les détails de l'alerte.", - "xpack.securitySolution.guided_onboarding.tour.viewCase.tourTitle": "Afficher le cas", "xpack.securitySolution.handleInputAreaState.inputPlaceholderText": "Soumettre l’action de réponse", "xpack.securitySolution.header.editableTitle.cancel": "Annuler", "xpack.securitySolution.header.editableTitle.editButtonAria": "Vous pouvez modifier {title} en cliquant", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 1ebef4af4c8b7..ff458c867ee20 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -41306,8 +41306,6 @@ "xpack.securitySolution.guided_onboarding.tour.ruleNameStep.tourTitle": "アラートテーブルの検査", "xpack.securitySolution.guided_onboarding.tour.submitCase.tourContent": "［ケースの作成］を押して続行します。", "xpack.securitySolution.guided_onboarding.tour.submitCase.tourTitle": "ケースを作成", - "xpack.securitySolution.guided_onboarding.tour.viewCase.tourContent": "ケースはアラート詳細の［インサイト］の下に表示されます。", - "xpack.securitySolution.guided_onboarding.tour.viewCase.tourTitle": "ケースを表示", "xpack.securitySolution.handleInputAreaState.inputPlaceholderText": "対応アクションを送信", "xpack.securitySolution.header.editableTitle.cancel": "キャンセル", "xpack.securitySolution.header.editableTitle.editButtonAria": "クリックすると {title} を編集できます", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 5929febfb1b65..15c67c3178f60 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -41377,8 +41377,6 @@ "xpack.securitySolution.guided_onboarding.tour.ruleNameStep.tourTitle": "检查告警表", "xpack.securitySolution.guided_onboarding.tour.submitCase.tourContent": "按“创建案例”继续。", "xpack.securitySolution.guided_onboarding.tour.submitCase.tourTitle": "创建案例", - "xpack.securitySolution.guided_onboarding.tour.viewCase.tourContent": "在告警详情中，案例在洞见下显示。", - "xpack.securitySolution.guided_onboarding.tour.viewCase.tourTitle": "查看案例", "xpack.securitySolution.handleInputAreaState.inputPlaceholderText": "提交响应操作", "xpack.securitySolution.header.editableTitle.cancel": "取消", "xpack.securitySolution.header.editableTitle.editButtonAria": "通过单击，可以编辑 {title}", diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/explore/guided_onboarding/tour.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/explore/guided_onboarding/tour.cy.ts index 39dd027bdd86d..a2c355caeb842 100644 --- a/x-pack/test/security_solution_cypress/cypress/e2e/explore/guided_onboarding/tour.cy.ts +++ b/x-pack/test/security_solution_cypress/cypress/e2e/explore/guided_onboarding/tour.cy.ts @@ -69,7 +69,6 @@ describe('Guided onboarding tour', { tags: ['@ess'] }, () => { const stepsInAlertsFlyout = [ AlertsCasesTourSteps.reviewAlertDetailsFlyout, AlertsCasesTourSteps.addAlertToCase, - AlertsCasesTourSteps.viewCase, ]; const stepsInCasesFlyout = [AlertsCasesTourSteps.createCase, AlertsCasesTourSteps.submitCase]; diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/guided_onboarding.ts b/x-pack/test/security_solution_cypress/cypress/tasks/guided_onboarding.ts index fe3170b31e951..d977dbc5cc9c3 100644 --- a/x-pack/test/security_solution_cypress/cypress/tasks/guided_onboarding.ts +++ b/x-pack/test/security_solution_cypress/cypress/tasks/guided_onboarding.ts @@ -40,7 +40,6 @@ export const completeTourWithNextButton = () => { goToNextStep(i); } createCase(); - goToNextStep(7); }; export const addToCase = () => { @@ -55,7 +54,6 @@ export const completeTourWithActions = () => { addToCase(); goToNextStep(5); createCase(); - goToNextStep(7); }; export const goToStep = (step: number) => {