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

[Security Solution] - fix unwanted space below open timeline modal title (#188837)

Browse source
This commit is contained in:
Philippe Oberti 2024-07-23 23:54:16 +02:00 • committed by GitHub
parent 369eef0106
commit b8ef1648b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 10 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
View file

@ -440,7 +440,6 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
hideActions={hideActions}
isLoading={loading}
itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
onAddTimelinesToFavorites={undefined}
onlyFavorites={onlyFavorites}
onOpenTimeline={openTimeline}
onQueryChange={onQueryChange}
@ -452,7 +451,6 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
pageSize={pageSize}
query={search}
searchResults={timelines}
selectedItems={selectedItems}
sortDirection={sortDirection}
sortField={sortField}
templateTimelineFilter={templateTimelineFilter}

4
x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx
View file

@ -257,8 +257,8 @@ export const OpenTimeline = React.memo<OpenTimelineProps>(
<>
<UtilityBarText data-test-subj="selected-count">
{timelineType === TimelineType.template
? i18n.SELECTED_TEMPLATES(selectedItems.length)
: i18n.SELECTED_TIMELINES(selectedItems.length)}
? i18n.SELECTED_TEMPLATES((selectedItems || []).length)
: i18n.SELECTED_TIMELINES((selectedItems || []).length)}
</UtilityBarText>
<UtilityBarAction
dataTestSubj="batchActions"

4
x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
View file

@ -74,7 +74,9 @@ describe('OpenTimelineModal', () => {
</ThemeProvider>
);
expect(wrapper.find('[data-test-subj="title-row"]').first().exists()).toBe(true);
expect(wrapper.find('[data-test-subj="open-timeline-modal-title"]').first().exists()).toBe(
true
);
});
test('it renders the search row', () => {

24
x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
View file

@ -5,31 +5,21 @@
* 2.0.
*/
import { EuiModalBody, EuiModalHeader, EuiSpacer } from '@elastic/eui';
import { EuiModalBody, EuiModalHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
import type { EuiBasicTable } from '@elastic/eui';
import React, { Fragment, memo, useMemo, useRef } from 'react';
import styled from 'styled-components';
import type { OpenTimelineProps, ActionTimelineToShow, OpenTimelineResult } from '../types';
import { SearchRow } from '../search_row';
import { TimelinesTable } from '../timelines_table';
import { TitleRow } from '../title_row';
export const HeaderContainer = styled.div`
width: 100%;
`;
HeaderContainer.displayName = 'HeaderContainer';
export const OpenTimelineModalBody = memo<OpenTimelineProps>(
({
deleteTimelines,
defaultPageSize,
favoriteCount,
hideActions = [],
isLoading,
itemIdToExpandedNotesRowMap,
onAddTimelinesToFavorites,
onDeleteSelected,
onlyFavorites,
onOpenTimeline,
@ -41,7 +31,6 @@ export const OpenTimelineModalBody = memo<OpenTimelineProps>(
pageIndex,
pageSize,
searchResults,
selectedItems,
sortDirection,
sortField,
timelineFilter,
@ -74,14 +63,9 @@ export const OpenTimelineModalBody = memo<OpenTimelineProps>(
return (
<>
<EuiModalHeader>
<HeaderContainer>
<TitleRow
data-test-subj="title-row"
onAddTimelinesToFavorites={onAddTimelinesToFavorites}
selectedTimelinesCount={selectedItems.length}
title={title}
/>
</HeaderContainer>
<EuiTitle size="l">
<h2 data-test-subj="open-timeline-modal-title">{title}</h2>
</EuiTitle>
</EuiModalHeader>
<EuiModalBody>

120
x-pack/plugins/security_solution/public/timelines/components/open_timeline/title_row/index.test.tsx
View file

@ -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 { EuiButtonProps } from '@elastic/eui';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { TitleRow } from '.';
import { getMockTheme } from '../../../../common/lib/kibana/kibana_react.mock';
const mockTheme = getMockTheme({
eui: {
euiSizeS: '10px',
euiLineHeight: 10,
euiBreakpoints: { s: '10px' },
euiSize: '10px',
euiSizeM: '16px',
},
});
describe('TitleRow', () => {
const title = 'All Timelines / Open Timelines';
test('it renders the title', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={mockTheme}>
<TitleRow onAddTimelinesToFavorites={jest.fn()} selectedTimelinesCount={0} title={title} />
</ThemeProvider>
);
expect(wrapper.find('[data-test-subj="header-section-title"]').first().text()).toEqual(title);
});
describe('Favorite Selected button', () => {
test('it renders the Favorite Selected button when onAddTimelinesToFavorites is provided', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={mockTheme}>
<TitleRow
onAddTimelinesToFavorites={jest.fn()}
selectedTimelinesCount={0}
title={title}
/>
</ThemeProvider>
);
expect(wrapper.find('[data-test-subj="favorite-selected"]').first().exists()).toBe(true);
});
test('it does NOT render the Favorite Selected button when onAddTimelinesToFavorites is NOT provided', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={mockTheme}>
<TitleRow selectedTimelinesCount={0} title={title} />
</ThemeProvider>
);
expect(wrapper.find('[data-test-subj="favorite-selected"]').first().exists()).toBe(false);
});
test('it disables the Favorite Selected button when the selectedTimelinesCount is 0', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={mockTheme}>
<TitleRow
onAddTimelinesToFavorites={jest.fn()}
selectedTimelinesCount={0}
title={title}
/>
</ThemeProvider>
);
const props = wrapper
.find('[data-test-subj="favorite-selected"]')
.first()
.props() as EuiButtonProps;
expect(props.isDisabled).toBe(true);
});
test('it enables the Favorite Selected button when the selectedTimelinesCount is greater than 0', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={mockTheme}>
<TitleRow
onAddTimelinesToFavorites={jest.fn()}
selectedTimelinesCount={3}
title={title}
/>
</ThemeProvider>
);
const props = wrapper
.find('[data-test-subj="favorite-selected"]')
.first()
.props() as EuiButtonProps;
expect(props.isDisabled).toBe(false);
});
test('it invokes onAddTimelinesToFavorites when the Favorite Selected button is clicked', () => {
const onAddTimelinesToFavorites = jest.fn();
const wrapper = mountWithIntl(
<ThemeProvider theme={mockTheme}>
<TitleRow
onAddTimelinesToFavorites={onAddTimelinesToFavorites}
selectedTimelinesCount={3}
title={title}
/>
</ThemeProvider>
);
wrapper.find('button[data-test-subj="favorite-selected"]').first().simulate('click');
expect(onAddTimelinesToFavorites).toHaveBeenCalled();
});
});
});

49
x-pack/plugins/security_solution/public/timelines/components/open_timeline/title_row/index.tsx
View file

@ -1,49 +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 { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import * as i18n from '../translations';
import type { OpenTimelineProps } from '../types';
import { HeaderSection } from '../../../../common/components/header_section';
type Props = Pick<OpenTimelineProps, 'onAddTimelinesToFavorites' | 'title'> & {
/** The number of timelines currently selected */
selectedTimelinesCount: number;
children?: JSX.Element;
};
/**
* Renders the row containing the tile (e.g. Open Timelines / All timelines)
* and action buttons (i.e. Favorite Selected and Delete Selected)
*/
export const TitleRow = React.memo<Props>(
({ children, onAddTimelinesToFavorites, selectedTimelinesCount, title }) => (
<HeaderSection title={title} split={true} height={40}>
<EuiFlexGroup gutterSize="s" responsive={false}>
{onAddTimelinesToFavorites && (
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="favorite-selected"
iconSide="left"
iconType="starEmptySpace"
isDisabled={selectedTimelinesCount === 0}
onClick={onAddTimelinesToFavorites}
>
{i18n.FAVORITE_SELECTED}
</EuiButton>
</EuiFlexItem>
)}
{children && <EuiFlexItem>{children}</EuiFlexItem>}
</EuiFlexGroup>
</HeaderSection>
)
);
TitleRow.displayName = 'TitleRow';

14
x-pack/plugins/security_solution/public/timelines/components/open_timeline/translations.ts
View file

@ -73,13 +73,6 @@ export const EXPORT_SELECTED = i18n.translate(
}
);
export const FAVORITE_SELECTED = i18n.translate(
'xpack.securitySolution.open.timeline.favoriteSelectedButton',
{
defaultMessage: 'Favorite selected',
}
);
export const FAVORITES = i18n.translate('xpack.securitySolution.open.timeline.favoritesTooltip', {
defaultMessage: 'Favorites',
});
@ -158,13 +151,6 @@ export const OPEN_AS_DUPLICATE_TEMPLATE = i18n.translate(
}
);
export const OPEN_TIMELINE = i18n.translate(
'xpack.securitySolution.open.timeline.openTimelineButton',
{
defaultMessage: 'Open Timeline…',
}
);
export const OPEN_TIMELINE_TITLE = i18n.translate(
'xpack.securitySolution.open.timeline.openTimelineTitle',
{

2
x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts
View file

@ -187,7 +187,7 @@ export interface OpenTimelineProps {
/** The results of executing a search, null is the status before data fatched */
searchResults: OpenTimelineResult[] | null;
/** the currently-selected timelines in the table */
selectedItems: OpenTimelineResult[];
selectedItems?: OpenTimelineResult[];
/** Toggle export timelines modal*/
setImportDataModalToggle?: React.Dispatch<React.SetStateAction<boolean>>;
/** the requested sort direction of the query results */

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

@ -37097,7 +37097,6 @@
"xpack.securitySolution.open.timeline.expandButton": "Développer",
"xpack.securitySolution.open.timeline.exportFileNameTitle": "timelines_export",
"xpack.securitySolution.open.timeline.exportSelectedButton": "Exporter la sélection",
"xpack.securitySolution.open.timeline.favoriteSelectedButton": "Favoris sélectionnés",
"xpack.securitySolution.open.timeline.favoritesTooltip": "Favoris",
"xpack.securitySolution.open.timeline.lastModifiedTableHeader": "Dernière modification",
"xpack.securitySolution.open.timeline.loadingLabel": "Chargement...",
@ -37107,7 +37106,6 @@
"xpack.securitySolution.open.timeline.onlyFavoritesButtonLabel": "Favoris uniquement",
"xpack.securitySolution.open.timeline.openAsDuplicateTemplateTooltip": "Dupliquer un modèle",
"xpack.securitySolution.open.timeline.openAsDuplicateTooltip": "Dupliquer la chronologie",
"xpack.securitySolution.open.timeline.openTimelineButton": "Ouvrir la chronologie…",
"xpack.securitySolution.open.timeline.openTimelineTitle": "Ouvrir",
"xpack.securitySolution.open.timeline.pinnedEventsTooltip": "Événements épinglés",
"xpack.securitySolution.open.timeline.refreshTitle": "Actualiser",

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

@ -36966,7 +36966,6 @@
"xpack.securitySolution.open.timeline.expandButton": "拡張",
"xpack.securitySolution.open.timeline.exportFileNameTitle": "timelines_export",
"xpack.securitySolution.open.timeline.exportSelectedButton": "選択した項目のエクスポート",
"xpack.securitySolution.open.timeline.favoriteSelectedButton": "選択中のお気に入り",
"xpack.securitySolution.open.timeline.favoritesTooltip": "お気に入り",
"xpack.securitySolution.open.timeline.lastModifiedTableHeader": "最終更新：",
"xpack.securitySolution.open.timeline.loadingLabel": "読み込み中...",
@ -36976,7 +36975,6 @@
"xpack.securitySolution.open.timeline.onlyFavoritesButtonLabel": "お気に入りのみ",
"xpack.securitySolution.open.timeline.openAsDuplicateTemplateTooltip": "重複するテンプレート",
"xpack.securitySolution.open.timeline.openAsDuplicateTooltip": "重複タイムライン",
"xpack.securitySolution.open.timeline.openTimelineButton": "タイムラインを開く…",
"xpack.securitySolution.open.timeline.openTimelineTitle": "未対応",
"xpack.securitySolution.open.timeline.pinnedEventsTooltip": "ピン付けされたイベント",
"xpack.securitySolution.open.timeline.refreshTitle": "更新",

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

@ -37136,7 +37136,6 @@
"xpack.securitySolution.open.timeline.expandButton": "展开",
"xpack.securitySolution.open.timeline.exportFileNameTitle": "timelines_export",
"xpack.securitySolution.open.timeline.exportSelectedButton": "导出所选",
"xpack.securitySolution.open.timeline.favoriteSelectedButton": "收藏所选",
"xpack.securitySolution.open.timeline.favoritesTooltip": "收藏夹",
"xpack.securitySolution.open.timeline.lastModifiedTableHeader": "最后修改时间",
"xpack.securitySolution.open.timeline.loadingLabel": "正在加载……",
@ -37146,7 +37145,6 @@
"xpack.securitySolution.open.timeline.onlyFavoritesButtonLabel": "仅收藏夹",
"xpack.securitySolution.open.timeline.openAsDuplicateTemplateTooltip": "复制模板",
"xpack.securitySolution.open.timeline.openAsDuplicateTooltip": "复制时间线",
"xpack.securitySolution.open.timeline.openTimelineButton": "打开时间线......",
"xpack.securitySolution.open.timeline.openTimelineTitle": "打开",
"xpack.securitySolution.open.timeline.pinnedEventsTooltip": "置顶事件",
"xpack.securitySolution.open.timeline.refreshTitle": "刷新",