Skip to content

Commit

Permalink
[Security Solution] Fix few styling issues (elastic#87045)
Browse files Browse the repository at this point in the history
# Conflicts:
#	x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
  • Loading branch information
patrykkopycinski committed Jan 4, 2021
1 parent 1931beb commit 2097880
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 142 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,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 @@ -162,10 +170,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 = ({
value={value}
/>
)}
</EuiFlexItem>
</FullWidthFlexItem>
))}
</EuiFlexGroup>
</FullWidthFlexGroup>
),
},
{
Expand Down
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export const Header = React.memo<Props>(
onChange={onSearchInputChange}
placeholder={i18n.FILTER_PLACEHOLDER}
value={searchInput}
fullWidth
/>
</SearchContainer>
<CountRow filteredBrowserFields={filteredBrowserFields} />
Expand Down
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

0 comments on commit 2097880

Please sign in to comment.