github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution] expandable flyout - rename description section to about (#161547)

Browse source
This commit is contained in:
Philippe Oberti 2023-07-11 07:10:39 +02:00 • committed by GitHub
parent 0e1477a0de
commit 33ece6eea8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 61 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

32
x-pack/plugins/security_solution/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_right_panel_overview_tab.cy.ts
View file

@ -11,11 +11,11 @@ import {
expandFirstAlertExpandableFlyout,
} from '../../../../tasks/expandable_flyout/common';
import {
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_CONTENT,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_HEADER,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ANALYZER_TREE,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_DETAILS,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_EXPAND_BUTTON,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_CONTENT,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_HEADER,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_TITLE,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_NAVIGATE_TO_RULE_DETAILS_BUTTON,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_HIGHLIGHTED_FIELDS_DETAILS,
@ -49,7 +49,7 @@ import {
clickInvestigationGuideButton,
clickPrevalenceViewAllButton,
clickThreatIntelligenceViewAllButton,
toggleOverviewTabDescriptionSection,
toggleOverviewTabAboutSection,
toggleOverviewTabInsightsSection,
toggleOverviewTabInvestigationSection,
toggleOverviewTabVisualizationsSection,
@ -81,18 +81,16 @@ describe(
expandFirstAlertExpandableFlyout();
});
describe('description section', () => {
it('should display description section', () => {
describe('about section', () => {
it('should display about section', () => {
cy.log('header and content');
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_HEADER)
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_HEADER)
.should('be.visible')
.and('have.text', 'Description');
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_CONTENT).should(
'be.visible'
);
.and('have.text', 'About');
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_CONTENT).should('be.visible');
cy.log('expand button');
cy.log('description');
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_TITLE)
.should('be.visible')
@ -143,7 +141,7 @@ describe(
describe('investigation section', () => {
it('should display investigation section', () => {
toggleOverviewTabDescriptionSection();
toggleOverviewTabAboutSection();
toggleOverviewTabInvestigationSection();
cy.log('header and content');
@ -192,7 +190,7 @@ describe(
describe('insights section', () => {
it('should display entities section', () => {
toggleOverviewTabDescriptionSection();
toggleOverviewTabAboutSection();
toggleOverviewTabInsightsSection();
cy.log('header and content');
@ -216,7 +214,7 @@ describe(
});
it('should display threat intelligence section', () => {
toggleOverviewTabDescriptionSection();
toggleOverviewTabAboutSection();
toggleOverviewTabInsightsSection();
cy.log('header and content');
@ -258,7 +256,7 @@ describe(
createNewCaseFromExpandableFlyout();
toggleOverviewTabDescriptionSection();
toggleOverviewTabAboutSection();
toggleOverviewTabInsightsSection();
cy.log('header and content');
@ -299,7 +297,7 @@ describe(
// TODO work on getting proper data to make the prevalence section work here
// we need to generate enough data to have at least one field with prevalence
it.skip('should display prevalence section', () => {
toggleOverviewTabDescriptionSection();
toggleOverviewTabAboutSection();
toggleOverviewTabInsightsSection();
cy.log('header and content');
@ -326,7 +324,7 @@ describe(
describe('visualizations section', () => {
it('should display analyzer and session previews', () => {
toggleOverviewTabDescriptionSection();
toggleOverviewTabAboutSection();
toggleOverviewTabVisualizationsSection();
cy.log('analyzer graph preview');

15
x-pack/plugins/security_solution/cypress/screens/expandable_flyout/alert_details_right_panel_overview_tab.ts
View file

@ -7,11 +7,11 @@
import { getDataTestSubjectSelector } from '../../helpers/common';
import {
ABOUT_SECTION_CONTENT_TEST_ID,
ABOUT_SECTION_HEADER_TEST_ID,
ANALYZER_TREE_TEST_ID,
DESCRIPTION_DETAILS_TEST_ID,
DESCRIPTION_EXPAND_BUTTON_TEST_ID,
DESCRIPTION_SECTION_CONTENT_TEST_ID,
DESCRIPTION_SECTION_HEADER_TEST_ID,
DESCRIPTION_TITLE_TEST_ID,
DESCRIPTION_NAVIGATE_TO_RULE_TEST_ID,
ENTITIES_CONTENT_TEST_ID,
@ -46,12 +46,13 @@ import {
VISUALIZATIONS_SECTION_HEADER_TEST_ID,
} from '../../../public/flyout/right/components/test_ids';
/* Description section */
/* About section */
export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_HEADER =
getDataTestSubjectSelector(DESCRIPTION_SECTION_HEADER_TEST_ID);
export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_CONTENT =
getDataTestSubjectSelector(DESCRIPTION_SECTION_CONTENT_TEST_ID);
export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_HEADER = getDataTestSubjectSelector(
ABOUT_SECTION_HEADER_TEST_ID
);
export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_CONTENT =
getDataTestSubjectSelector(ABOUT_SECTION_CONTENT_TEST_ID);
export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_TITLE =
getDataTestSubjectSelector(DESCRIPTION_TITLE_TEST_ID);
export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_DETAILS = getDataTestSubjectSelector(

14
x-pack/plugins/security_solution/cypress/tasks/expandable_flyout/alert_details_right_panel_overview_tab.ts
View file

@ -6,7 +6,7 @@
*/
import {
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_HEADER,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_HEADER,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_VISUALIZATIONS_SECTION_HEADER,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_INSIGHTS_SECTION_HEADER,
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_INVESTIGATION_SECTION_HEADER,
@ -17,16 +17,14 @@ import {
DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_INVESTIGATION_GUIDE_BUTTON,
} from '../../screens/expandable_flyout/alert_details_right_panel_overview_tab';
/* Description section */
/* About section */
/**
* Toggle the Overview tab description section in the document details expandable flyout right section
* Toggle the Overview tab about section in the document details expandable flyout right section
*/
export const toggleOverviewTabDescriptionSection = () => {
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_HEADER).scrollIntoView();
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_SECTION_HEADER)
.should('be.visible')
.click();
export const toggleOverviewTabAboutSection = () => {
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_HEADER).scrollIntoView();
cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_HEADER).should('be.visible').click();
};
/* Investigation section */

25
x-pack/plugins/security_solution/public/flyout/right/components/description_section.test.tsx → x-pack/plugins/security_solution/public/flyout/right/components/about_section.test.tsx
View file

@ -7,47 +7,44 @@
import React from 'react';
import { render } from '@testing-library/react';
import {
DESCRIPTION_SECTION_CONTENT_TEST_ID,
DESCRIPTION_SECTION_HEADER_TEST_ID,
} from './test_ids';
import { DescriptionSection } from './description_section';
import { ABOUT_SECTION_CONTENT_TEST_ID, ABOUT_SECTION_HEADER_TEST_ID } from './test_ids';
import { AboutSection } from './about_section';
import { RightPanelContext } from '../context';
const panelContextValue = {} as unknown as RightPanelContext;
jest.mock('../../../common/components/link_to');
describe('<DescriptionSection />', () => {
describe('<AboutSection />', () => {
it('should render the component collapsed', () => {
const { getByTestId } = render(
<RightPanelContext.Provider value={panelContextValue}>
<DescriptionSection />
<AboutSection />
</RightPanelContext.Provider>
);
expect(getByTestId(DESCRIPTION_SECTION_HEADER_TEST_ID)).toBeInTheDocument();
expect(getByTestId(ABOUT_SECTION_HEADER_TEST_ID)).toBeInTheDocument();
});
it('should render the component expanded', () => {
const { getByTestId } = render(
<RightPanelContext.Provider value={panelContextValue}>
<DescriptionSection expanded={true} />
<AboutSection expanded={true} />
</RightPanelContext.Provider>
);
expect(getByTestId(DESCRIPTION_SECTION_HEADER_TEST_ID)).toBeInTheDocument();
expect(getByTestId(DESCRIPTION_SECTION_CONTENT_TEST_ID)).toBeInTheDocument();
expect(getByTestId(ABOUT_SECTION_HEADER_TEST_ID)).toBeInTheDocument();
expect(getByTestId(ABOUT_SECTION_CONTENT_TEST_ID)).toBeInTheDocument();
});
it('should expand the component when clicking on the arrow on header', () => {
const { getByTestId } = render(
<RightPanelContext.Provider value={panelContextValue}>
<DescriptionSection />
<AboutSection />
</RightPanelContext.Provider>
);
getByTestId(DESCRIPTION_SECTION_HEADER_TEST_ID).click();
expect(getByTestId(DESCRIPTION_SECTION_CONTENT_TEST_ID)).toBeInTheDocument();
getByTestId(ABOUT_SECTION_HEADER_TEST_ID).click();
expect(getByTestId(ABOUT_SECTION_CONTENT_TEST_ID)).toBeInTheDocument();
});
});

14
x-pack/plugins/security_solution/public/flyout/right/components/description_section.tsx → x-pack/plugins/security_solution/public/flyout/right/components/about_section.tsx
View file

@ -9,13 +9,13 @@ import { EuiSpacer } from '@elastic/eui';
import type { VFC } from 'react';
import React from 'react';
import { ExpandableSection } from './expandable_section';
import { DESCRIPTION_SECTION_TEST_ID } from './test_ids';
import { DESCRIPTION_TITLE } from './translations';
import { ABOUT_SECTION_TEST_ID } from './test_ids';
import { ABOUT_TITLE } from './translations';
import { Description } from './description';
import { Reason } from './reason';
import { MitreAttack } from './mitre_attack';
export interface DescriptionSectionProps {
export interface AboutSectionProps {
/**
* Boolean to allow the component to be expanded or collapsed on first render
*/
@ -25,12 +25,12 @@ export interface DescriptionSectionProps {
/**
* Most top section of the overview tab. It contains the description, reason and mitre attack information (for a document of type alert).
*/
export const DescriptionSection: VFC<DescriptionSectionProps> = ({ expanded = true }) => {
export const AboutSection: VFC<AboutSectionProps> = ({ expanded = true }) => {
return (
<ExpandableSection
expanded={expanded}
title={DESCRIPTION_TITLE}
data-test-subj={DESCRIPTION_SECTION_TEST_ID}
title={ABOUT_TITLE}
data-test-subj={ABOUT_SECTION_TEST_ID}
>
<Description />
<EuiSpacer size="m" />
@ -41,4 +41,4 @@ export const DescriptionSection: VFC<DescriptionSectionProps> = ({ expanded = tr
);
};
DescriptionSection.displayName = 'DescriptionSection';
AboutSection.displayName = 'AboutSection';

38
x-pack/plugins/security_solution/public/flyout/right/components/description_section.stories.tsx
View file

@ -1,38 +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 { Story } from '@storybook/react';
import { mockDataFormattedForFieldBrowser, mockSearchHit } from '../mocks/mock_context';
import { RightPanelContext } from '../context';
import { DescriptionSection } from './description_section';
const panelContextValue = {
dataFormattedForFieldBrowser: mockDataFormattedForFieldBrowser,
searchHit: mockSearchHit,
} as unknown as RightPanelContext;
export default {
component: DescriptionSection,
title: 'Flyout/DescriptionSection',
};
export const Expand: Story<void> = () => {
return (
<RightPanelContext.Provider value={panelContextValue}>
<DescriptionSection />
</RightPanelContext.Provider>
);
};
export const Collapse: Story<void> = () => {
return (
<RightPanelContext.Provider value={panelContextValue}>
<DescriptionSection expanded={false} />
</RightPanelContext.Provider>
);
};

2
x-pack/plugins/security_solution/public/flyout/right/components/expandable_section.tsx
View file

@ -33,7 +33,7 @@ export interface DescriptionSectionProps {
/**
* Component used to render multiple sections in the Overview tab
* - Description
* - About
* - Investigation
* - Visualizations
* - Insights

9
x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts
View file

@ -25,12 +25,11 @@ export const FLYOUT_HEADER_SHARE_BUTTON_TEST_ID =
'securitySolutionAlertDetailsFlyoutHeaderShareButton';
export const FLYOUT_HEADER_CHAT_BUTTON_TEST_ID = 'newChatById';
/* Description section */
/* About section */
export const DESCRIPTION_SECTION_TEST_ID =
'securitySolutionDocumentDetailsFlyoutDescriptionSection';
export const DESCRIPTION_SECTION_HEADER_TEST_ID = DESCRIPTION_SECTION_TEST_ID + HEADER_TEST_ID;
export const DESCRIPTION_SECTION_CONTENT_TEST_ID = DESCRIPTION_SECTION_TEST_ID + CONTENT_TEST_ID;
export const ABOUT_SECTION_TEST_ID = 'securitySolutionDocumentDetailsFlyoutAboutSection';
export const ABOUT_SECTION_HEADER_TEST_ID = ABOUT_SECTION_TEST_ID + HEADER_TEST_ID;
export const ABOUT_SECTION_CONTENT_TEST_ID = ABOUT_SECTION_TEST_ID + CONTENT_TEST_ID;
export const DESCRIPTION_TITLE_TEST_ID = 'securitySolutionDocumentDetailsFlyoutDescriptionTitle';
export const DESCRIPTION_DETAILS_TEST_ID =
'securitySolutionDocumentDetailsFlyoutDescriptionDetails';

8
x-pack/plugins/security_solution/public/flyout/right/components/translations.ts
View file

@ -45,12 +45,12 @@ export const VIEW_RULE_TEXT = i18n.translate(
}
);
/* Description section */
/* About section */
export const DESCRIPTION_TITLE = i18n.translate(
'xpack.securitySolution.flyout.documentDetails.descriptionTitle',
export const ABOUT_TITLE = i18n.translate(
'xpack.securitySolution.flyout.documentDetails.aboutTitle',
{
defaultMessage: 'Description',
defaultMessage: 'About',
}
);

4
x-pack/plugins/security_solution/public/flyout/right/tabs/overview_tab.tsx
View file

@ -9,7 +9,7 @@ import type { FC } from 'react';
import React, { memo } from 'react';
import { EuiHorizontalRule } from '@elastic/eui';
import { InvestigationSection } from '../components/investigation_section';
import { DescriptionSection } from '../components/description_section';
import { AboutSection } from '../components/about_section';
import { InsightsSection } from '../components/insights_section';
import { VisualizationsSection } from '../components/visualizations_section';
@ -19,7 +19,7 @@ import { VisualizationsSection } from '../components/visualizations_section';
export const OverviewTab: FC = memo(() => {
return (
<>
<DescriptionSection />
<AboutSection />
<EuiHorizontalRule margin="l" />
<InvestigationSection />
<EuiHorizontalRule margin="l" />

2
x-pack/plugins/translations/translations/fr-FR.json
View file

@ -32193,7 +32193,7 @@
"xpack.securitySolution.flyout.documentDetails.analyzerPreviewTitle": "Aperçu de l'analyseur",
"xpack.securitySolution.flyout.documentDetails.collapseDetailButton": "Réduire les détails de l'alerte",
"xpack.securitySolution.flyout.documentDetails.correlationsButton": "Corrélations",
"xpack.securitySolution.flyout.documentDetails.descriptionTitle": "Description",
"xpack.securitySolution.flyout.documentDetails.aboutTitle": "Description",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionCollapseButton": "Réduire",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionExpandButton": "Développer",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionTitle": "Description du document",

2
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -32178,7 +32178,7 @@
"xpack.securitySolution.flyout.documentDetails.analyzerPreviewTitle": "アナライザープレビュー",
"xpack.securitySolution.flyout.documentDetails.collapseDetailButton": "アラート詳細を折りたたむ",
"xpack.securitySolution.flyout.documentDetails.correlationsButton": "相関関係",
"xpack.securitySolution.flyout.documentDetails.descriptionTitle": "説明",
"xpack.securitySolution.flyout.documentDetails.aboutTitle": "説明",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionCollapseButton": "縮小",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionExpandButton": "拡張",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionTitle": "ドキュメント説明",

2
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -32174,7 +32174,7 @@
"xpack.securitySolution.flyout.documentDetails.analyzerPreviewTitle": "分析器预览",
"xpack.securitySolution.flyout.documentDetails.collapseDetailButton": "折叠告警详情",
"xpack.securitySolution.flyout.documentDetails.correlationsButton": "相关性",
"xpack.securitySolution.flyout.documentDetails.descriptionTitle": "描述",
"xpack.securitySolution.flyout.documentDetails.aboutTitle": "描述",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionCollapseButton": "折叠",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionExpandButton": "展开",
"xpack.securitySolution.flyout.documentDetails.documentDescriptionTitle": "文档描述",