fix lots of type errors

2025-12-02 15:04:28 +00:00
parent 9aa86eb056
commit 0da94b11ee
22 changed files with 37 additions and 25 deletions
@@ -19,7 +19,7 @@ export interface Props<T = string> extends Omit<FieldProps, 'children'> {
  /** 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<Record<string, unknown>>;
 }

 /**
@@ -316,7 +316,9 @@ const BaseActions = ({ children, disabled, variant, className }: ActionsProps) =
  return (
    <div className={cx(css, className)}>
      {React.Children.map(children, (child) => {
-        return React.isValidElement(child) ? cloneElement(child, { disabled: isDisabled, ...child.props }) : null;
+        return React.isValidElement<Record<string, unknown>>(child)
+          ? cloneElement(child, { disabled: isDisabled, ...child.props })
+          : null;
      })}
    </div>
  );
@@ -12,7 +12,7 @@ import { Button, ButtonVariant } from '../Button/Button';
 export interface Props {
  /** Confirm action callback */
  onConfirm(): void;
-  children: string | ReactElement;
+  children: string | ReactElement<Record<string, unknown>>;
  /** Custom button styles */
  className?: string;
  /** Button size */
@@ -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<Record<string, unknown>>;
  root?: HTMLElement;
  /** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */
  offset?: [number, number];
@@ -12,7 +12,7 @@ import { Label } from './Label';

 export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
  /** Form input element, i.e Input or Switch */
-  children: React.ReactElement;
+  children: React.ReactElement<Record<string, unknown>>;
  /** Label for the field */
  label?: React.ReactNode;
  /** Description of the field */
@@ -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<Record<string, unknown>>(child) && Array.isArray(child.props.children);
 };

 VirtualizedSelectMenu.displayName = 'VirtualizedSelectMenu';
@@ -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<React.HTMLAttributes<HTMLElement>, '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<React.ReactNode>;
 }

@@ -8,7 +8,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '../../themes/ThemeContext';

 type Props = {
-  children: React.ReactElement;
+  children: React.ReactElement<Record<string, unknown>>;
  visible: boolean;
  duration?: number;
 };
@@ -8,7 +8,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '../../themes/ThemeContext';

 type Props = {
-  children: React.ReactElement;
+  children: React.ReactElement<Record<string, unknown>>;
  visible: boolean;
  size: number;

@@ -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<string | PropDiffFn>;
  preparePlotFrame?: (frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame | null;
-  renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null;
+  renderLegend: (config: UPlotConfigBuilder) => React.ReactElement<VizLayoutLegendProps> | null;

  /**
   * needed for propsToDiff to re-init the plot & config
@@ -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<Record<string, unknown>>): string | undefined {
  let inputId: unknown;

  // Get the first, and only, child to retrieve form input's id
@@ -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<string | PropDiffFn>;
  preparePlotFrame?: (frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame | null;
-  renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null;
+  renderLegend: (config: UPlotConfigBuilder) => React.ReactElement<VizLayoutLegendProps> | null;
  replaceVariables: InterpolateFunction;
  dataLinkPostProcessor?: DataLinkPostProcessor;
  cursorSync?: DashboardCursorSync;
@@ -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<Record<string, unknown>>;
  header?: ReactNode;
  content: ReactElement;
  footer?: ReactNode;
@@ -19,7 +19,7 @@ interface RenderParams<T = ActionImpl | string> {
 interface KBarResultsProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  items: any[];
-  onRender: (params: RenderParams) => React.ReactElement;
+  onRender: (params: RenderParams) => React.ReactElement<Record<string, unknown>>;
  maxHeight?: number;
 }

@@ -16,7 +16,7 @@ export interface OptionsPaneItemInfo {
  value?: any;
  description?: string;
  popularRank?: number;
-  render: (descriptor: OptionsPaneItemDescriptor) => React.ReactElement;
+  render: (descriptor: OptionsPaneItemDescriptor) => React.ReactElement<Record<string, unknown>>;
  skipField?: boolean;
  showIf?: () => boolean;
  /** Hook for controlling visibility */
@@ -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<any>) {
  return result.props.children.props.children[0];
 }

@@ -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<Record<string, unknown>>;
  content: ReactElement;
  overlayClassName?: string;
 };
@@ -15,7 +15,7 @@ const EXPRESSION_ICON_MAP = {
 } as const satisfies Record<ExpressionQueryType, string>;

 interface ExpressionTypeDropdownProps {
-  children: ReactElement;
+  children: ReactElement<Record<string, unknown>>;
  handleOnSelect: (value: ExpressionQueryType) => void;
 }

@@ -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<Record<string, unknown>>;
+}) => (
  <InlineField labelWidth={LABEL_WIDTH} label={label} tooltip={tooltip}>
    {children}
  </InlineField>
@@ -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 () => {
@@ -7,7 +7,7 @@ import { Field, Icon, PopoverContent, ReactUtils, Tooltip, useStyles2 } from '@g

 interface EditorFieldProps extends ComponentProps<typeof Field> {
  label: string;
-  children: React.ReactElement;
+  children: React.ReactElement<Record<string, unknown>>;
  width?: number | string;
  optional?: boolean;
  tooltip?: PopoverContent;
@@ -5,7 +5,7 @@ import { InlineFieldRow, InlineField } from '@grafana/ui';
 interface Props {
  label: string;
  tooltip?: string;
-  children: React.ReactElement;
+  children: React.ReactElement<Record<string, unknown>>;
 }
 const SearchField = ({ label, tooltip, children }: Props) => {
  return (