move flyout logic to a render prop for better composability

dominiqueclarke · dominiqueclarke · commit 740633451f2c · 2021-02-09T15:57:00.000-05:00
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx
@@ -10,9 +10,9 @@ import { EuiHealth } from '@elastic/eui';
 import { getSeriesAndDomain, getSidebarItems, getLegendItems } from './data_formatting';
 import { SidebarItem, LegendItem, NetworkItems } from './types';
 import { WaterfallProvider, WaterfallChart, RenderItem, useFlyout } from '../../waterfall';
-import { WaterfallFlyout } from '../../waterfall/components/waterfall_flyout';
 import { useTrackMetric, METRIC_TYPE } from '../../../../../../../observability/public';
 import { WaterfallFilter } from './waterfall_filter';
+import { WaterfallFlyout } from './waterfall_flyout';
 import { WaterfallSidebarItem } from './waterfall_sidebar_item';
 
 export const renderLegendItem: RenderItem<LegendItem> = (item) => {
@@ -67,6 +67,16 @@ export const WaterfallChartWrapper: React.FC<Props> = ({ data, total }) => {
     );
   }, [activeFilters, setActiveFilters, onlyHighlighted, setOnlyHighlighted, query, setQuery]);
 
+  const renderFlyout = useCallback(() => {
+    return (
+      <WaterfallFlyout
+        flyoutData={flyoutData}
+        onFlyoutClose={onFlyoutClose}
+        isFlyoutVisible={isFlyoutVisible}
+      />
+    );
+  }, [flyoutData, isFlyoutVisible, onFlyoutClose]);
+
   const renderSidebarItem: RenderItem<SidebarItem> = useCallback(
     (item) => {
       return (
@@ -121,14 +131,10 @@ export const WaterfallChartWrapper: React.FC<Props> = ({ data, total }) => {
         }, [])}
         renderSidebarItem={renderSidebarItem}
         renderLegendItem={renderLegendItem}
+        renderFlyout={renderFlyout}
         renderFilter={renderFilter}
         fullHeight={true}
       />
-      <WaterfallFlyout
-        flyoutData={flyoutData}
-        isFlyoutVisible={isFlyoutVisible}
-        onFlyoutClose={onFlyoutClose}
-      />
     </WaterfallProvider>
   );
 };
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_flyout.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_flyout.test.tsx
@@ -14,7 +14,7 @@ import {
   REQUEST_HEADERS,
   RESPONSE_HEADERS,
 } from './waterfall_flyout';
-import { WaterfallMetadataEntry } from '../types';
+import { WaterfallMetadataEntry } from '../../waterfall/types';
 
 describe('WaterfallFlyout', () => {
   const flyoutData: WaterfallMetadataEntry = {
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_flyout.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_flyout.tsx
@@ -18,10 +18,10 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Table } from './waterfall_flyout_table';
+import { Table } from '../../waterfall/components/waterfall_flyout_table';
 import { MiddleTruncatedText } from '../../waterfall';
-import { WaterfallMetadataEntry } from '../types';
-import { OnFlyoutClose } from './use_flyout';
+import { WaterfallMetadataEntry } from '../../waterfall/types';
+import { OnFlyoutClose } from '../../waterfall/components/use_flyout';
 import { METRIC_TYPE, useUiTracker } from '../../../../../../../observability/public';
 
 export const DETAILS = i18n.translate('xpack.uptime.synthetics.waterfall.flyout.details', {
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_chart.tsx
@@ -32,15 +32,16 @@ export type RenderItem<I = any> = (
   index: number,
   onClick?: (event: any) => void
 ) => JSX.Element;
-export type RenderFilter = () => JSX.Element;
+export type RenderElement = () => JSX.Element;
 
 export interface WaterfallChartProps {
   tickFormat: TickFormatter;
   domain: DomainRange;
   barStyleAccessor: BarStyleAccessor;
   renderSidebarItem?: RenderItem;
   renderLegendItem?: RenderItem;
-  renderFilter?: RenderFilter;
+  renderFilter?: RenderElement;
+  renderFlyout?: RenderElement;
   maxHeight?: string;
   fullHeight?: boolean;
 }
@@ -52,6 +53,7 @@ export const WaterfallChart = ({
   renderSidebarItem,
   renderLegendItem,
   renderFilter,
+  renderFlyout,
   maxHeight = '800px',
   fullHeight = false,
 }: WaterfallChartProps) => {
@@ -134,6 +136,7 @@ export const WaterfallChart = ({
         </EuiFlexGroup>
       </WaterfallChartOuterContainer>
       {shouldRenderLegend && <Legend items={legendItems!} render={renderLegendItem!} />}
+      {renderFlyout && renderFlyout()}
     </RelativeContainer>
   );
 };
