fix

elastic · May 2, 2023 · f8565f4 · f8565f4
1 parent 4f289f8
commit f8565f4
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/x-pack/plugins/security_solution/cypress/tasks/timeline.ts b/x-pack/plugins/security_solution/cypress/tasks/timeline.ts
@@ -396,7 +396,6 @@ export const persistNoteToFirstEvent = (notes: string) => {
 };
 
 export const populateTimeline = () => {
-  executeTimelineKQL(hostExistsQuery);
   executeTimelineKQL(hostExistsQuery);
   cy.get(SERVER_SIDE_EVENT_COUNT).should('not.have.text', '0');
 };

diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/custom_portal.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/custom_portal.tsx
@@ -10,6 +10,7 @@
  * into portals.
  */
 
+import deepEqual from 'fast-deep-equal';
 import type { ReactNode } from 'react';
 import { Component } from 'react';
 import { createPortal } from 'react-dom';
@@ -29,7 +30,7 @@ export interface EuiPortalProps {
    * ReactNode to render as this component's content
    */
   children: ReactNode;
-  insert?: { sibling: HTMLElement; position: 'before' | 'after' };
+  insert?: { sibling: HTMLElement | null; position: 'before' | 'after' };
   portalRef?: (ref: HTMLDivElement | null) => void;
 }
 
@@ -45,7 +46,7 @@ export class EuiPortal extends Component<EuiPortalProps> {
     this.portalNode = document.createElement('div');
     this.portalNode.dataset.euiportal = 'true';
 
-    if (insert == null) {
+    if (insert == null || insert.sibling == null) {
       // no insertion defined, append to body
       document.body.appendChild(this.portalNode);
     } else {
@@ -67,12 +68,12 @@ export class EuiPortal extends Component<EuiPortalProps> {
   }
 
   componentDidUpdate(prevProps: Readonly<EuiPortalProps>): void {
-    if (prevProps.insert !== this.props.insert && this.portalNode?.parentNode) {
+    if (!deepEqual(prevProps.insert, this.props.insert) && this.portalNode?.parentNode) {
       this.portalNode.parentNode.removeChild(this.portalNode);
     }
 
     if (this.portalNode) {
-      if (this.props.insert == null) {
+      if (this.props.insert == null || this.props.insert.sibling == null) {
         // no insertion defined, append to body
         document.body.appendChild(this.portalNode);
       } else {

diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx
@@ -40,9 +40,7 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
 
   return (
     <div data-test-subj="flyout-pane" ref={ref}>
-      <EuiPortal
-        insert={!visible && ref?.current ? { sibling: ref?.current, position: 'after' } : undefined}
-      >
+      <EuiPortal insert={{ sibling: !visible ? ref?.current : null, position: 'after' }}>
         <div
           aria-label={i18n.TIMELINE_DESCRIPTION}
           className="euiFlyout"