[Security Solution] Fix Timeline row actions overflow (#79861) (#80393)

elastic · Oct 14, 2020 · 3334bda · 3334bda
1 parent ce70009
commit 3334bda
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 13 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/index.tsx b/x-pack/plugins/security_solution/public/common/components/sourcerer/index.tsx
@@ -180,6 +180,7 @@ export const SourcererComponent = React.memo<SourcererComponentProps>(({ scope:
         closePopover={handleClosePopOver}
         display="block"
         panelPaddingSize="s"
+        repositionOnScroll
         ownFocus
       >
         <PopoverContent>

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
@@ -68,11 +68,10 @@ export interface BodyProps {
   updateNote: UpdateNote;
 }
 
-export const hasAdditionalActions = (id: string, eventType?: TimelineEventsType): boolean =>
-  id === TimelineId.detectionsPage ||
-  id === TimelineId.detectionsRulesDetailsPage ||
-  ((id === TimelineId.active && eventType && ['all', 'signal', 'alert'].includes(eventType)) ??
-    false);
+export const hasAdditionalActions = (id: TimelineId): boolean =>
+  [TimelineId.detectionsPage, TimelineId.detectionsRulesDetailsPage, TimelineId.active].includes(
+    id
+  );
 
 const EXTRA_WIDTH = 4; // px
 
@@ -86,7 +85,6 @@ export const Body = React.memo<BodyProps>(
     data,
     docValueFields,
     eventIdToNoteIds,
-    eventType,
     getNotesByIds,
     graphEventId,
     isEventViewer = false,
@@ -118,9 +116,11 @@ export const Body = React.memo<BodyProps>(
         getActionsColumnWidth(
           isEventViewer,
           showCheckboxes,
-          hasAdditionalActions(timelineId, eventType) ? DEFAULT_ICON_BUTTON_WIDTH + EXTRA_WIDTH : 0
+          hasAdditionalActions(timelineId as TimelineId)
+            ? DEFAULT_ICON_BUTTON_WIDTH + EXTRA_WIDTH
+            : 0
         ),
-      [isEventViewer, showCheckboxes, timelineId, eventType]
+      [isEventViewer, showCheckboxes, timelineId]
     );
 
     const columnWidths = useMemo(

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/stateful_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/stateful_body.tsx
@@ -61,7 +61,6 @@ const StatefulBodyComponent = React.memo<StatefulBodyComponentProps>(
     data,
     docValueFields,
     eventIdToNoteIds,
-    eventType,
     excludedRowRendererIds,
     id,
     isEventViewer = false,
@@ -197,7 +196,6 @@ const StatefulBodyComponent = React.memo<StatefulBodyComponentProps>(
         data={data}
         docValueFields={docValueFields}
         eventIdToNoteIds={eventIdToNoteIds}
-        eventType={eventType}
         getNotesByIds={getNotesByIds}
         graphEventId={graphEventId}
         isEventViewer={isEventViewer}
@@ -232,7 +230,6 @@ const StatefulBodyComponent = React.memo<StatefulBodyComponentProps>(
     deepEqual(prevProps.excludedRowRendererIds, nextProps.excludedRowRendererIds) &&
     deepEqual(prevProps.docValueFields, nextProps.docValueFields) &&
     prevProps.eventIdToNoteIds === nextProps.eventIdToNoteIds &&
-    prevProps.eventType === nextProps.eventType &&
     prevProps.graphEventId === nextProps.graphEventId &&
     deepEqual(prevProps.notesById, nextProps.notesById) &&
     prevProps.id === nextProps.id &&
@@ -262,7 +259,6 @@ const makeMapStateToProps = () => {
     const {
       columns,
       eventIdToNoteIds,
-      eventType,
       excludedRowRendererIds,
       graphEventId,
       isSelectAllChecked,
@@ -277,7 +273,6 @@ const makeMapStateToProps = () => {
     return {
       columnHeaders: memoizedColumnHeaders(columns, browserFields),
       eventIdToNoteIds,
-      eventType,
       excludedRowRendererIds,
       graphEventId,
       isSelectAllChecked,

diff --git a/...olution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx b/...olution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx
@@ -199,6 +199,7 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
       withTitle
       panelPaddingSize="none"
       ownFocus={true}
+      repositionOnScroll
     >
       {content}
     </EuiPopover>

diff --git a/...s/security_solution/public/timelines/components/timeline/search_or_filter/pick_events.tsx b/...s/security_solution/public/timelines/components/timeline/search_or_filter/pick_events.tsx
@@ -335,6 +335,7 @@ const PickEventTypeComponents: React.FC<PickEventTypeProps> = ({
           button={button}
           isOpen={isPopoverOpen}
           closePopover={closePopover}
+          repositionOnScroll
         >
           <PopoverContent>
             <EuiPopoverTitle>