move open flyout logic to a hook; fix flyout remaining open after mov…

…ing to another page
elastic · May 25, 2022 · 1a33519 · 1a33519
1 parent 14a746a
commit 1a33519
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 41 deletions.
diff --git a/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx b/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
@@ -8,14 +8,10 @@
 import { buildEsQuery, Filter, Query } from '@kbn/es-query';
 import { JsonValue } from '@kbn/utility-types';
 import { noop } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import {
-  createKibanaReactContext,
-  KibanaReactOverlays,
-  useKibana,
-} from '@kbn/kibana-react-plugin/public';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { LogEntryCursor } from '../../../common/log_entry';
 import { defaultLogViewsStaticConfig } from '../../../common/log_views';
 import { BuiltEsQuery, useLogStream } from '../../containers/logs/log_stream';
@@ -25,7 +21,7 @@ import { LogColumnRenderConfiguration } from '../../utils/log_column_render_conf
 import { useKibanaQuerySettings } from '../../utils/use_kibana_query_settings';
 import { ScrollableLogTextStreamView } from '../logging/log_text_stream';
 import { LogStreamErrorBoundary } from './log_stream_error_boundary';
-import { LogEntryFlyout } from '../logging/log_entry_flyout';
+import { useLogEntryFlyout } from '../logging/log_entry_flyout';
 
 interface LogStreamPluginDeps {
   data: DataPublicPluginStart;
@@ -101,15 +97,13 @@ export const LogStreamContent: React.FC<LogStreamContentProps> = ({
   columns,
   flyoutEnabled = false,
 }) => {
-  const flyoutRef = useRef<ReturnType<KibanaReactOverlays['openFlyout']>>();
   const customColumns = useMemo(
     () => (columns ? convertLogColumnDefinitionToLogSourceColumnDefinition(columns) : undefined),
     [columns]
   );
 
   const {
-    services: { http, data, uiSettings, application },
-    overlays: { openFlyout },
+    services: { http, data },
   } = useKibana<LogStreamPluginDeps>();
   if (http == null || data == null) {
     throw new Error(
@@ -121,6 +115,8 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
     );
   }
 
+  const { openLogEntryFlyout } = useLogEntryFlyout(sourceId);
+
   const kibanaQuerySettings = useKibanaQuerySettings();
 
   const logViews = useMemo(
@@ -217,35 +213,6 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
     [isLoadingMore, fetchPreviousEntries, fetchNextEntries]
   );
 
-  const handleCloseFlyout = () => {
-    if (flyoutRef.current) {
-      flyoutRef.current.close();
-    }
-  };
-
-  const handleOpenLogFlyoutClick = useCallback(
-    (logEntryId) => {
-      const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
-        http,
-        data,
-        uiSettings,
-        application,
-      });
-
-      flyoutRef.current = openFlyout(
-        <KibanaReactContextProvider>
-          <LogEntryFlyout
-            logEntryId={logEntryId}
-            onCloseFlyout={handleCloseFlyout}
-            onSetFieldFilter={undefined}
-            sourceId={sourceId}
-          />
-        </KibanaReactContextProvider>
-      );
-    },
-    [http, data, uiSettings, application, openFlyout, sourceId]
-  );
-
   return (
     <ScrollableLogTextStreamView
       target={center ? center : entries.length ? entries[entries.length - 1].cursor : null}
@@ -261,7 +228,7 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
       jumpToTarget={noop}
       reportVisibleInterval={handlePagination}
       reloadItems={fetchEntries}
-      onOpenLogEntryFlyout={flyoutEnabled ? handleOpenLogFlyoutClick : undefined}
+      onOpenLogEntryFlyout={flyoutEnabled ? openLogEntryFlyout : undefined}
       highlightedItem={highlight ?? null}
       currentHighlightKey={null}
       startDateExpression={''}

diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx
@@ -17,8 +17,12 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import React, { useEffect } from 'react';
 import type { Query } from '@kbn/es-query';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
+import { OverlayRef } from '@kbn/core/public';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { TimeKey } from '../../../../common/time';
 import { useLogEntry } from '../../../containers/logs/log_entry';
 import { CenteredEuiFlyoutBody } from '../../centered_flyout_body';
@@ -34,6 +38,51 @@ export interface LogEntryFlyoutProps {
   sourceId: string | null | undefined;
 }
 
+export const useLogEntryFlyout = (sourceId: string) => {
+  const flyoutRef = useRef<OverlayRef>();
+  const {
+    services: { http, data, uiSettings, application },
+    overlays: { openFlyout },
+  } = useKibana<{ data: DataPublicPluginStart }>();
+
+  const closeLogEntryFlyout = useCallback(() => {
+    flyoutRef.current?.close();
+  }, []);
+
+  const openLogEntryFlyout = useCallback(
+    (logEntryId) => {
+      const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
+        http,
+        data,
+        uiSettings,
+        application,
+      });
+
+      flyoutRef.current = openFlyout(
+        <KibanaReactContextProvider>
+          <LogEntryFlyout
+            logEntryId={logEntryId}
+            onCloseFlyout={closeLogEntryFlyout}
+            sourceId={sourceId}
+          />
+        </KibanaReactContextProvider>
+      );
+    },
+    [http, data, uiSettings, application, openFlyout, sourceId, closeLogEntryFlyout]
+  );
+
+  useEffect(() => {
+    return () => {
+      closeLogEntryFlyout();
+    };
+  }, [closeLogEntryFlyout]);
+
+  return {
+    openLogEntryFlyout,
+    closeLogEntryFlyout,
+  };
+};
+
 export const LogEntryFlyout = ({
   logEntryId,
   onCloseFlyout,