Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution] Fix few styling issues #87045

Merged
merged 6 commits into from
Jan 4, 2021
Merged

[Security Solution] Fix few styling issues #87045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6e4af2b
[Security Solution] Fix styling of HistogramPanel
patrykkopycinski Dec 30, 2020
eda2618
fix field styling
patrykkopycinski Dec 30, 2020
dd593c2
fixes
patrykkopycinski Dec 30, 2020
32eb0e6
cleanup
patrykkopycinski Dec 30, 2020
a84eaec
fix types
patrykkopycinski Dec 30, 2020
f41e8d7
Merge branch 'master' into fix/security-histogram-panel-styling
kibanamachine Jan 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,14 @@ const HoverActionsContainer = styled(EuiPanel)`

HoverActionsContainer.displayName = 'HoverActionsContainer';

const FullWidthFlexGroup = styled(EuiFlexGroup)`
width: 100%;
`;

const FullWidthFlexItem = styled(EuiFlexItem)`
width: 100%;
`;

export const getColumns = ({
browserFields,
columnHeaders,
Expand Down Expand Up @@ -159,10 +167,15 @@ export const getColumns = ({
sortable: true,
truncateText: false,
render: (values: ToStringArray | null | undefined, data: EventFieldsData) => (
<EuiFlexGroup direction="column" alignItems="flexStart" component="span" gutterSize="none">
<FullWidthFlexGroup
direction="column"
alignItems="flexStart"
component="span"
gutterSize="none"
>
{values != null &&
values.map((value, i) => (
<EuiFlexItem
<FullWidthFlexItem
grow={false}
component="span"
key={`event-details-value-flex-item-${contextId}-${eventId}-${data.field}-${i}-${value}`}
Expand All @@ -182,9 +195,9 @@ export const getColumns = ({
/>
)}
</div>
</EuiFlexItem>
</FullWidthFlexItem>
))}
</EuiFlexGroup>
</FullWidthFlexGroup>
),
},
{
Expand Down
43 changes: 26 additions & 17 deletions ...ns/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React, { useCallback, memo } from 'react';
import {
EuiSelectableOption,
EuiModalBody,
EuiModalHeader,
EuiMarkdownEditorUiPlugin,
EuiCodeBlock,
} from '@elastic/eui';
Expand Down Expand Up @@ -47,24 +48,32 @@ const TimelineEditorComponent: React.FC<TimelineEditorProps> = ({ onClosePopover
[]
);

const handleTimelineChange = useCallback(
(timelineTitle, timelineId, graphEventId) => {
const url = formatUrl(getTimelineUrl(timelineId ?? '', graphEventId), {
absolute: true,
skipSearch: true,
});
onInsert(`[${timelineTitle}](${url})`, {
block: false,
});
},
[formatUrl, onInsert]
);

return (
<EuiModalBody>
<SelectableTimeline
hideUntitled={true}
getSelectableOptions={handleGetSelectableOptions}
onTimelineChange={(timelineTitle, timelineId, graphEventId) => {
const url = formatUrl(getTimelineUrl(timelineId ?? '', graphEventId), {
absolute: true,
skipSearch: true,
});
onInsert(`[${timelineTitle}](${url})`, {
block: false,
});
}}
onClosePopover={onClosePopover}
timelineType={TimelineType.default}
/>
</EuiModalBody>
<>
<EuiModalHeader />
<EuiModalBody>
<SelectableTimeline
hideUntitled={true}
getSelectableOptions={handleGetSelectableOptions}
onTimelineChange={handleTimelineChange}
onClosePopover={onClosePopover}
timelineType={TimelineType.default}
/>
</EuiModalBody>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const HeaderChildrenFlexItem = styled(EuiFlexItem)`
const HistogramPanel = styled(Panel)<{ height?: number }>`
display: flex;
flex-direction: column;
${({ height }) => (height != null ? `height: ${height}px;` : '')}
${({ height }) => (height != null ? `min-height: ${height}px;` : '')}
`;

export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> = ({
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/security_solution/public/timelines/components/fields_browser/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export const Header = React.memo<Props>(
onChange={onSearchInputChange}
placeholder={i18n.FILTER_PLACEHOLDER}
value={searchInput}
fullWidth
/>
</SearchContainer>
<CountRow filteredBrowserFields={filteredBrowserFields} />
Expand Down
15 changes: 9 additions & 6 deletions ...security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiSelectableProps } from '@elastic/eui';
import React from 'react';
import { shallow, ShallowWrapper, mount } from 'enzyme';

import { TimelineType } from '../../../../../common/types/timeline';
import { SortFieldTimeline, Direction } from '../../../../graphql/types';
import { SelectableTimeline, ORIGINAL_PAGE_SIZE, SearchProps } from './';
import { SelectableTimeline, ORIGINAL_PAGE_SIZE } from './';

const mockFetchAllTimeline = jest.fn();
jest.mock('../../../containers/all', () => {
Expand Down Expand Up @@ -40,10 +43,10 @@ describe('SelectableTimeline', () => {
});

test('render placeholder', () => {
const searchProps: SearchProps = wrapper
const searchProps: EuiSelectableProps['searchProps'] = wrapper
.find('[data-test-subj="selectable-input"]')
.prop('searchProps');
expect(searchProps.placeholder).toEqual('e.g. Timeline name or description');
expect(searchProps!.placeholder).toEqual('e.g. Timeline name or description');
});
});

Expand All @@ -58,10 +61,10 @@ describe('SelectableTimeline', () => {
});

test('render placeholder', () => {
const searchProps: SearchProps = wrapper
const searchProps: EuiSelectableProps['searchProps'] = wrapper
.find('[data-test-subj="selectable-input"]')
.prop('searchProps');
expect(searchProps.placeholder).toEqual('e.g. Timeline template name or description');
expect(searchProps!.placeholder).toEqual('e.g. Timeline template name or description');
});
});
});
Expand Down Expand Up @@ -89,7 +92,7 @@ describe('SelectableTimeline', () => {
jest.clearAllMocks();
});

test('shoule be called with correct args', () => {
test('should be called with correct args', () => {
expect(mockFetchAllTimeline).toBeCalledWith(args);
});
});
Expand Down
Loading