Prevent unneeded re-renders of tgrid on opening alert flyout (#108781) (

#108805)

Co-authored-by: Kevin Qualters <56408403+kqualters-elastic@users.noreply.github.com>

x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx

@@ -75,7 +75,6 @@ interface AlertsTableTGridProps {
 }
 
 interface ObservabilityActionsProps extends ActionProps {
- flyoutAlert: TopAlert | undefined;
  setFlyoutAlert: React.Dispatch<React.SetStateAction<TopAlert | undefined>>;
 }
 
@@ -162,12 +161,10 @@ function ObservabilityActions({
  data,
  eventId,
  ecsData,
- flyoutAlert,
  setFlyoutAlert,
 }: ObservabilityActionsProps) {
  const { core, observabilityRuleTypeRegistry } = usePluginContext();
  const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
- const handleFlyoutClose = () => setFlyoutAlert(undefined);
  const [openActionsPopoverId, setActionsPopover] = useState(null);
  const { timelines } = useKibana<{ timelines: TimelinesUIStart }>().services;
  const parseObservabilityAlert = useMemo(() => parseAlert(observabilityRuleTypeRegistry), [
@@ -223,15 +220,6 @@ function ObservabilityActions({
  }, [afterCaseSelection, casePermissions, timelines, event]);
  return (
  <>
- {flyoutAlert && (
- <Suspense fallback={null}>
- <LazyAlertsFlyout
- alert={flyoutAlert}
- observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
- onClose={handleFlyoutClose}
- />
- </Suspense>
- )}
  <EuiFlexGroup gutterSize="none" responsive={false}>
  <EuiFlexItem>
  <EuiButtonIcon
@@ -299,17 +287,11 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
  );
  },
  rowCellRender: (actionProps: ActionProps) => {
- return (
- <ObservabilityActions
- {...actionProps}
- flyoutAlert={flyoutAlert}
- setFlyoutAlert={setFlyoutAlert}
- />
- );
+ return <ObservabilityActions {...actionProps} setFlyoutAlert={setFlyoutAlert} />;
  },
  },
  ];
- }, [flyoutAlert]);
+ }, []);
 
  const tGridProps = useMemo(() => {
  const type: TGridType = 'standalone';
@@ -367,6 +349,21 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
  setRefetch,
  status,
  ]);
+ const handleFlyoutClose = () => setFlyoutAlert(undefined);
+ const { observabilityRuleTypeRegistry } = usePluginContext();
 
- return <>{timelines.getTGrid<'standalone'>(tGridProps)}</>;
+ return (
+ <>
+ {flyoutAlert && (
+ <Suspense fallback={null}>
+ <LazyAlertsFlyout
+ alert={flyoutAlert}
+ observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
+ onClose={handleFlyoutClose}
+ />
+ </Suspense>
+ )}
+ {timelines.getTGrid<'standalone'>(tGridProps)}
+ </>
+ );
 }