[Security Solution] Fix few styling issues (elastic#87045)

# 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
patrykkopycinski · Jan 4, 2021 · 2097880 · 2097880
1 parent 1931beb
commit 2097880
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 142 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx
@@ -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,
@@ -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}`}
@@ -182,9 +195,9 @@ export const getColumns = ({
                   value={value}
                 />
               )}
-            </EuiFlexItem>
+            </FullWidthFlexItem>
           ))}
-      </EuiFlexGroup>
+      </FullWidthFlexGroup>
     ),
   },
   {

diff --git a/...ns/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx b/...ns/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx
@@ -8,6 +8,7 @@ import React, { useCallback, memo } from 'react';
 import {
   EuiSelectableOption,
   EuiModalBody,
+  EuiModalHeader,
   EuiMarkdownEditorUiPlugin,
   EuiCodeBlock,
 } from '@elastic/eui';
@@ -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>
+    </>
   );
 };
 

diff --git a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
@@ -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> = ({

diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/header.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/header.tsx
@@ -146,6 +146,7 @@ export const Header = React.memo<Props>(
           onChange={onSearchInputChange}
           placeholder={i18n.FILTER_PLACEHOLDER}
           value={searchInput}
+          fullWidth
         />
       </SearchContainer>
       <CountRow filteredBrowserFields={filteredBrowserFields} />

diff --git a/...security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx b/...security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx
@@ -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', () => {
@@ -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');
       });
     });
 
@@ -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');
       });
     });
   });
@@ -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);
     });
   });