From 0da94b11ee96927f8073b4c57e1ca5e66ed16338 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 2 Dec 2025 15:04:28 +0000 Subject: [PATCH] fix lots of type errors --- .../src/components/AutoSaveField/AutoSaveField.tsx | 2 +- packages/grafana-ui/src/components/Card/Card.tsx | 4 +++- .../src/components/ConfirmButton/ConfirmButton.tsx | 2 +- .../grafana-ui/src/components/Dropdown/Dropdown.tsx | 2 +- packages/grafana-ui/src/components/Forms/Field.tsx | 2 +- .../grafana-ui/src/components/Select/SelectMenu.tsx | 2 +- packages/grafana-ui/src/components/Text/Text.tsx | 5 +++-- .../src/components/transitions/FadeTransition.tsx | 2 +- .../src/components/transitions/SlideOutTransition.tsx | 2 +- packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx | 4 ++-- packages/grafana-ui/src/utils/reactUtils.ts | 2 +- public/app/core/components/GraphNG/GraphNG.tsx | 4 ++-- .../features/alerting/unified/components/HoverCard.tsx | 2 +- public/app/features/commandPalette/KBarResults.tsx | 2 +- .../PanelEditor/OptionsPaneItemDescriptor.tsx | 2 +- .../SpanDetail/SpanDetailLinkButtons.test.tsx | 3 ++- .../explore/TraceView/components/common/Popover.tsx | 2 +- .../expressions/components/ExpressionTypeDropdown.tsx | 2 +- .../transformers/regression/regressionEditor.tsx | 10 +++++++++- .../components/ConfigEditor/DefaultSubscription.tsx | 2 +- .../QueryEditor/EditorField.tsx | 2 +- .../tempo/SearchTraceQLEditor/InlineSearchField.tsx | 2 +- 22 files changed, 37 insertions(+), 25 deletions(-) diff --git a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx index f78262d0548..2cd0527bd12 100644 --- a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx +++ b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx @@ -19,7 +19,7 @@ export interface Props extends Omit { /** Custom error message to display on saving */ saveErrorMessage?: string; /** Input that will save its value on change */ - children: (onChange: (newValue: T) => void) => React.ReactElement; + children: (onChange: (newValue: T) => void) => React.ReactElement>; } /** diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index e30781db632..a89001213a0 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -316,7 +316,9 @@ const BaseActions = ({ children, disabled, variant, className }: ActionsProps) = return (
{React.Children.map(children, (child) => { - return React.isValidElement(child) ? cloneElement(child, { disabled: isDisabled, ...child.props }) : null; + return React.isValidElement>(child) + ? cloneElement(child, { disabled: isDisabled, ...child.props }) + : null; })}
); diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx index 0a5e3db8688..b6a2b626325 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx @@ -12,7 +12,7 @@ import { Button, ButtonVariant } from '../Button/Button'; export interface Props { /** Confirm action callback */ onConfirm(): void; - children: string | ReactElement; + children: string | ReactElement>; /** Custom button styles */ className?: string; /** Button size */ diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx index b098665db7b..7251d2ed85c 100644 --- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx +++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx @@ -24,7 +24,7 @@ import { TooltipPlacement } from '../Tooltip/types'; export interface Props { overlay: React.ReactElement | (() => React.ReactElement); placement?: TooltipPlacement; - children: React.ReactElement; + children: React.ReactElement>; root?: HTMLElement; /** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */ offset?: [number, number]; diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx index 6c5884e04c9..91355060d60 100644 --- a/packages/grafana-ui/src/components/Forms/Field.tsx +++ b/packages/grafana-ui/src/components/Forms/Field.tsx @@ -12,7 +12,7 @@ import { Label } from './Label'; export interface FieldProps extends HTMLAttributes { /** Form input element, i.e Input or Switch */ - children: React.ReactElement; + children: React.ReactElement>; /** Label for the field */ label?: React.ReactNode; /** Description of the field */ diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx index 37bd1452e91..bdd0d446fd3 100644 --- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx +++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx @@ -197,7 +197,7 @@ export const VirtualizedSelectMenu = ({ // check if a child has array children (and is therefore a react-select group) // we need to flatten these so the correct count and elements are passed to the virtualized list const hasArrayChildren = (child: React.ReactNode) => { - return React.isValidElement(child) && Array.isArray(child.props.children); + return React.isValidElement>(child) && Array.isArray(child.props.children); }; VirtualizedSelectMenu.displayName = 'VirtualizedSelectMenu'; diff --git a/packages/grafana-ui/src/components/Text/Text.tsx b/packages/grafana-ui/src/components/Text/Text.tsx index 56cb2b529bb..79313d32a6b 100644 --- a/packages/grafana-ui/src/components/Text/Text.tsx +++ b/packages/grafana-ui/src/components/Text/Text.tsx @@ -1,5 +1,6 @@ import { css } from '@emotion/css'; -import { createElement, CSSProperties } from 'react'; +import { CSSObject } from '@emotion/serialize'; +import { createElement } from 'react'; import * as React from 'react'; import { GrafanaTheme2, ThemeTypographyVariantTypes } from '@grafana/data'; @@ -25,7 +26,7 @@ export interface TextProps extends Omit, 'clas /** If true, numbers will have fixed width, useful for displaying tabular data. False by default */ tabular?: boolean; /** Whether to align the text to left, center or right */ - textAlignment?: CSSProperties['textAlign']; + textAlignment?: CSSObject['textAlign']; children: NonNullable; } diff --git a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx index a50e650a77b..a3de969f0b8 100644 --- a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx +++ b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx @@ -8,7 +8,7 @@ import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; type Props = { - children: React.ReactElement; + children: React.ReactElement>; visible: boolean; duration?: number; }; diff --git a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx index 18151b51757..b32659a7648 100644 --- a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx +++ b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx @@ -8,7 +8,7 @@ import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; type Props = { - children: React.ReactElement; + children: React.ReactElement>; visible: boolean; size: number; diff --git a/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx index 16a18f5c33c..c9e3be2c4cc 100644 --- a/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx +++ b/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx @@ -19,7 +19,7 @@ import { import { VizLegendOptions } from '@grafana/schema'; import { PanelContext, PanelContextRoot } from '../../components/PanelChrome/PanelContext'; -import { VizLayout } from '../../components/VizLayout/VizLayout'; +import { VizLayout, VizLayoutLegendProps } from '../../components/VizLayout/VizLayout'; import { UPlotChart } from '../../components/uPlot/Plot'; import { AxisProps } from '../../components/uPlot/config/UPlotAxisBuilder'; import { Renderers, UPlotConfigBuilder } from '../../components/uPlot/config/UPlotConfigBuilder'; @@ -54,7 +54,7 @@ export interface GraphNGProps extends Themeable2 { prepConfig: (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => UPlotConfigBuilder; propsToDiff?: Array; preparePlotFrame?: (frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame | null; - renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null; + renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null; /** * needed for propsToDiff to re-init the plot & config diff --git a/packages/grafana-ui/src/utils/reactUtils.ts b/packages/grafana-ui/src/utils/reactUtils.ts index 3a4b1ede950..5004b2934e3 100644 --- a/packages/grafana-ui/src/utils/reactUtils.ts +++ b/packages/grafana-ui/src/utils/reactUtils.ts @@ -2,7 +2,7 @@ import { ReactElement } from 'react'; import * as React from 'react'; /** Returns the ID value of the first, and only, child element */ -export function getChildId(children: ReactElement): string | undefined { +export function getChildId(children: ReactElement>): string | undefined { let inputId: unknown; // Get the first, and only, child to retrieve form input's id diff --git a/public/app/core/components/GraphNG/GraphNG.tsx b/public/app/core/components/GraphNG/GraphNG.tsx index 5a25edbcafe..81917437150 100644 --- a/public/app/core/components/GraphNG/GraphNG.tsx +++ b/public/app/core/components/GraphNG/GraphNG.tsx @@ -15,7 +15,7 @@ import { TimeZone, } from '@grafana/data'; import { DashboardCursorSync, VizLegendOptions } from '@grafana/schema'; -import { Themeable2, VizLayout } from '@grafana/ui'; +import { Themeable2, VizLayout, VizLayoutLegendProps } from '@grafana/ui'; import { AxisProps, pluginLog, Renderers, ScaleProps, UPlotChart, UPlotConfigBuilder } from '@grafana/ui/internal'; import { GraphNGLegendEvent, XYFieldMatchers } from './types'; @@ -48,7 +48,7 @@ export interface GraphNGProps extends Themeable2 { ) => UPlotConfigBuilder; propsToDiff?: Array; preparePlotFrame?: (frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame | null; - renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null; + renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null; replaceVariables: InterpolateFunction; dataLinkPostProcessor?: DataLinkPostProcessor; cursorSync?: DashboardCursorSync; diff --git a/public/app/features/alerting/unified/components/HoverCard.tsx b/public/app/features/alerting/unified/components/HoverCard.tsx index 6c5577df37b..69d95fe11a6 100644 --- a/public/app/features/alerting/unified/components/HoverCard.tsx +++ b/public/app/features/alerting/unified/components/HoverCard.tsx @@ -7,7 +7,7 @@ import { GrafanaTheme2 } from '@grafana/data'; import { Popover as GrafanaPopover, PopoverController, Stack, useStyles2 } from '@grafana/ui'; export interface PopupCardProps { - children: ReactElement; + children: ReactElement>; header?: ReactNode; content: ReactElement; footer?: ReactNode; diff --git a/public/app/features/commandPalette/KBarResults.tsx b/public/app/features/commandPalette/KBarResults.tsx index 020c57ec42f..72a308b7971 100644 --- a/public/app/features/commandPalette/KBarResults.tsx +++ b/public/app/features/commandPalette/KBarResults.tsx @@ -19,7 +19,7 @@ interface RenderParams { interface KBarResultsProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any items: any[]; - onRender: (params: RenderParams) => React.ReactElement; + onRender: (params: RenderParams) => React.ReactElement>; maxHeight?: number; } diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx index 570461c3921..14de02d3c68 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx @@ -16,7 +16,7 @@ export interface OptionsPaneItemInfo { value?: any; description?: string; popularRank?: number; - render: (descriptor: OptionsPaneItemDescriptor) => React.ReactElement; + render: (descriptor: OptionsPaneItemDescriptor) => React.ReactElement>; skipField?: boolean; showIf?: () => boolean; /** Hook for controlling visibility */ diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/SpanDetailLinkButtons.test.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/SpanDetailLinkButtons.test.tsx index 528c4ea7944..a68e41b0691 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/SpanDetailLinkButtons.test.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/SpanDetailLinkButtons.test.tsx @@ -27,7 +27,8 @@ const timeRange = { to: new Date(1000), } as unknown as TimeRange; -function getContent(result: React.ReactElement) { +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function getContent(result: React.ReactElement) { return result.props.children.props.children[0]; } diff --git a/public/app/features/explore/TraceView/components/common/Popover.tsx b/public/app/features/explore/TraceView/components/common/Popover.tsx index adb3c052f10..9334491ec25 100644 --- a/public/app/features/explore/TraceView/components/common/Popover.tsx +++ b/public/app/features/explore/TraceView/components/common/Popover.tsx @@ -3,7 +3,7 @@ import { cloneElement, ReactElement, useRef } from 'react'; import { Popover as GrafanaPopover, PopoverController } from '@grafana/ui'; export type PopoverProps = { - children: ReactElement; + children: ReactElement>; content: ReactElement; overlayClassName?: string; }; diff --git a/public/app/features/expressions/components/ExpressionTypeDropdown.tsx b/public/app/features/expressions/components/ExpressionTypeDropdown.tsx index bb84dcd076c..83d2b249441 100644 --- a/public/app/features/expressions/components/ExpressionTypeDropdown.tsx +++ b/public/app/features/expressions/components/ExpressionTypeDropdown.tsx @@ -15,7 +15,7 @@ const EXPRESSION_ICON_MAP = { } as const satisfies Record; interface ExpressionTypeDropdownProps { - children: ReactElement; + children: ReactElement>; handleOnSelect: (value: ExpressionQueryType) => void; } diff --git a/public/app/features/transformers/regression/regressionEditor.tsx b/public/app/features/transformers/regression/regressionEditor.tsx index 909e2b69285..a1a27af1d39 100644 --- a/public/app/features/transformers/regression/regressionEditor.tsx +++ b/public/app/features/transformers/regression/regressionEditor.tsx @@ -120,7 +120,15 @@ export const RegressionTransformerEditor = ({ ); }; -const RegressionField = ({ label, tooltip, children }: { label: string; tooltip?: string; children: ReactElement }) => ( +const RegressionField = ({ + label, + tooltip, + children, +}: { + label: string; + tooltip?: string; + children: ReactElement>; +}) => ( {children} diff --git a/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/DefaultSubscription.tsx b/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/DefaultSubscription.tsx index 0bd33039bda..91f5240a4b8 100644 --- a/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/DefaultSubscription.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/ConfigEditor/DefaultSubscription.tsx @@ -39,7 +39,7 @@ export const DefaultSubscription = (props: Props) => { let canceled = false; getSubscriptions().then((result) => { if (!canceled) { - updateSubscriptions(result, loadSubscriptionsClicked); + updateSubscriptions(result, Boolean(loadSubscriptionsClicked)); } }); return () => { diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx index dd5b27f56c1..401a3ed4d5c 100644 --- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx +++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx @@ -7,7 +7,7 @@ import { Field, Icon, PopoverContent, ReactUtils, Tooltip, useStyles2 } from '@g interface EditorFieldProps extends ComponentProps { label: string; - children: React.ReactElement; + children: React.ReactElement>; width?: number | string; optional?: boolean; tooltip?: PopoverContent; diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx index d4b0678069f..3f139f8c898 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx @@ -5,7 +5,7 @@ import { InlineFieldRow, InlineField } from '@grafana/ui'; interface Props { label: string; tooltip?: string; - children: React.ReactElement; + children: React.ReactElement>; } const SearchField = ({ label, tooltip, children }: Props) => { return (