diff --git a/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx b/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx index 3a59b16ec87..8804907901a 100644 --- a/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx +++ b/public/app/features/alerting/unified/components/receivers/AlertInstanceModalSelector.tsx @@ -1,7 +1,7 @@ import { css, cx } from '@emotion/css'; -import { CSSProperties, useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; -import { FixedSizeList } from 'react-window'; +import { List, type RowComponentProps } from 'react-window'; import { GrafanaTheme2 } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; @@ -95,10 +95,7 @@ export function AlertInstanceModalSelector({ const filteredRulesKeys = Object.keys(filteredRules || []); - const RuleRow = ({ index, style }: { index: number; style?: CSSProperties }) => { - if (!filteredRules) { - return null; - } + const RuleRow = ({ index, style }: RowComponentProps) => { const ruleName = filteredRulesKeys[index]; const isSelected = ruleName === selectedRule; @@ -133,7 +130,7 @@ export function AlertInstanceModalSelector({ return tags; }; - const InstanceRow = ({ index, style }: { index: number; style: CSSProperties }) => { + const InstanceRow = ({ index, style }: RowComponentProps) => { const alerts = useMemo(() => (selectedRule ? rulesWithInstances[selectedRule] : []), []); const alert = alerts[index]; const isSelected = selectedInstances?.includes(alert); @@ -236,9 +233,16 @@ export function AlertInstanceModalSelector({ {!loading && ( {({ height, width }) => ( - - {RuleRow} - + )} )} @@ -264,14 +268,16 @@ export function AlertInstanceModalSelector({ {selectedRule && rulesWithInstances[selectedRule].length && !loading && ( {({ width, height }) => ( - - {InstanceRow} - + )} )}