Chore: Run some React 19 codemods (#114575)

running react 19 codemods
2025-11-28 11:27:48 +00:00
parent eafc8ab1cd
commit 49175bb2cb
193 changed files with 238 additions and 116 deletions
@@ -1,4 +1,5 @@
 import { set, cloneDeep } from 'lodash';
+import type { JSX } from 'react';

 import {
  FieldNamePickerConfigSettings,
@@ -1,5 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/AlertingSettingsOverhaul.tsx
 import { cx } from '@emotion/css';
+import type { JSX } from 'react';

 import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import React from 'react';
+import React, { type JSX } from 'react';

 import {
  ComponentTypeWithExtensionMeta,
@@ -1,6 +1,6 @@
 // Library
 import { cx } from '@emotion/css';
-import { CSSProperties, PureComponent, ReactNode } from 'react';
+import { CSSProperties, PureComponent, ReactNode, type JSX } from 'react';
 import * as React from 'react';
 import tinycolor from 'tinycolor2';

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, type JSX } from 'react';
 import * as React from 'react';
 import tinycolor from 'tinycolor2';

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { Button, LinkButton } from './Button';

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { StoryFn, Meta } from '@storybook/react';
+import type { JSX } from 'react';

 import { Button } from '../Button/Button';

@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';

@@ -1,5 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { ClipboardButton } from './ClipboardButton';

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { Collapse } from './Collapse';

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import * as React from 'react';
+import type { JSX } from 'react';

 import { IconName } from '@grafana/data';

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import * as React from 'react';

 import { ContextMenu } from '../ContextMenu/ContextMenu';
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { RefCallback, useCallback, useEffect, useRef } from 'react';
+import { RefCallback, useCallback, useEffect, useRef, type JSX } from 'react';
 import * as React from 'react';
 import Scrollbars, { positionValues } from 'react-custom-scrollbars-2';

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { CSSProperties } from 'react';
+import { CSSProperties, type JSX } from 'react';
 import * as React from 'react';

 import { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data';
@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';

@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay } from '@react-aria/overlays';
-import { memo, createRef, useState, useEffect } from 'react';
+import { memo, createRef, useState, useEffect, type JSX } from 'react';

 import {
  rangeUtil,
@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
-import { PropsWithChildren, RefCallback } from 'react';
+import { PropsWithChildren, RefCallback, type JSX } from 'react';
 import * as React from 'react';

 import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, type JSX } from 'react';
 import { usePrevious } from 'react-use';

 import { TimeRange } from '@grafana/data';
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { FilterPill } from './FilterPill';

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, type JSX } from 'react';
 import { useFieldArray, UseFieldArrayProps } from 'react-hook-form';

 import { FieldArrayApi } from '../../types/forms';
@@ -14,7 +14,7 @@ export enum LegacyInputStatus {
 export interface Props extends React.HTMLProps<HTMLInputElement> {
  validationEvents?: ValidationEvents;
  hideErrorMessage?: boolean;
-  inputRef?: React.LegacyRef<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement>;

  // Override event props and append status as argument
  onBlur?: (event: React.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;
@@ -168,7 +168,9 @@ export class Gauge extends PureComponent<Props> {
    const gaugeElement = (
      <div
        style={{ height: `${autoProps.gaugeHeight}px`, width: gaugeWidth }}
-        ref={(element) => (this.canvasElement = element)}
+        ref={(element) => {
+          this.canvasElement = element;
+        }}
      />
    );

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import * as React from 'react';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';

@@ -1,5 +1,5 @@
 import { cx, css } from '@emotion/css';
-import { PureComponent } from 'react';
+import { PureComponent, type JSX } from 'react';

 import { stylesFactory } from '../../themes/stylesFactory';

@@ -2,7 +2,7 @@ import { cx } from '@emotion/css';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { OverlayContainer, useOverlay } from '@react-aria/overlays';
-import { PropsWithChildren, useRef } from 'react';
+import { PropsWithChildren, useRef, type JSX } from 'react';
 import * as React from 'react';

 import { t } from '@grafana/i18n';
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { useMemo } from 'react';
+import { useMemo, type JSX } from 'react';

 import { t } from '@grafana/i18n';

@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';

@@ -211,7 +211,9 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
      <div className={cx(wrapperClassName, styles.wrapper)}>
        <div className="slate-query-field" data-testid={selectors.components.QueryField.container}>
          <Editor
-            ref={(editor) => (this.editor = editor!)}
+            ref={(editor) => {
+              this.editor = editor!;
+            }}
            schema={SCHEMA}
            autoCorrect={false}
            readOnly={this.props.disabled}
@@ -1,4 +1,4 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren, type JSX } from 'react';
 import * as React from 'react';

 import { textUtil } from '@grafana/data';
@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import * as React from 'react';

 import { Icon } from '../Icon/Icon';
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { forwardRef } from 'react';
+import { forwardRef, type JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { JSX } from 'react';

 import { t } from '@grafana/i18n';

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { max } from 'lodash';
-import { RefCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { RefCallback, useLayoutEffect, useMemo, useRef, type JSX } from 'react';
 import * as React from 'react';
 import { FixedSizeList as List } from 'react-window';

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { JSX } from 'react';
 import {
  ActionMeta as SelectActionMeta,
  CommonProps as ReactSelectCommonProps,
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { IconName } from '@grafana/data';

@@ -1,5 +1,6 @@
 import WKT from 'ol/format/WKT';
 import { Geometry } from 'ol/geom';
+import type { JSX } from 'react';

 import { TableCellProps } from '../types';

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
-import { useState } from 'react';
+import { useState, type JSX } from 'react';

 import { getCellLinks } from '../../../utils/table';
 import { CellActions } from '../CellActions';
@@ -2,7 +2,7 @@ import 'react-data-grid/lib/styles.css';

 import { clsx } from 'clsx';
 import memoize from 'micro-memoize';
-import { CSSProperties, Key, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { CSSProperties, Key, ReactNode, useCallback, useMemo, useRef, useState, type JSX } from 'react';
 import {
  Cell,
  CellRendererProps,
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { Tab } from './Tab';
 import { TabsBar } from './TabsBar';
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { Tag } from './Tag';

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { TagList } from './TagList';

@@ -11,7 +11,7 @@ import {
  useInteractions,
 } from '@floating-ui/react';
 import { Placement } from '@popperjs/core';
-import { memo, cloneElement, isValidElement, useRef, useState } from 'react';
+import { memo, cloneElement, isValidElement, useRef, useState, type JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export interface ToggletipContentProps {
  /**
   * @deprecated
@@ -1,5 +1,5 @@
 import { Placement } from '@popperjs/core';
-import { Component } from 'react';
+import { Component, type JSX } from 'react';

 import { PopoverContent } from './types';

@@ -10,7 +10,7 @@ import {
  useInteractions,
  safePolygon,
 } from '@floating-ui/react';
-import { forwardRef, cloneElement, isValidElement, useCallback, useId, useRef, useState } from 'react';
+import { forwardRef, cloneElement, isValidElement, useCallback, useId, useRef, useState, type JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -1,4 +1,5 @@
 import { Placement } from '@floating-ui/react';
+import type { JSX } from 'react';

 export interface PopoverContentProps {
  /**
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { ValuePicker } from './ValuePicker';

@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { JSX } from 'react';

 import { DataFrameFieldIndex, DisplayValue } from '@grafana/data';
 import { LegendDisplayMode, LegendPlacement, LineStyle } from '@grafana/schema';
@@ -1,5 +1,5 @@
 import { clamp } from 'lodash';
-import { PureComponent, CSSProperties } from 'react';
+import { PureComponent, CSSProperties, type JSX } from 'react';
 import * as React from 'react';

 import { VizOrientation } from '@grafana/data';
@@ -1,7 +1,7 @@
 // Libraries
 import $ from 'jquery';
 import { uniqBy } from 'lodash';
-import { PureComponent } from 'react';
+import { PureComponent, type JSX } from 'react';
 import * as React from 'react';

 // Types
@@ -384,7 +384,9 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
      <div className="graph-panel" aria-label={ariaLabel}>
        <div
          className="graph-panel__chart"
-          ref={(e) => (this.element = e)}
+          ref={(e) => {
+            this.element = e;
+          }}
          style={{ height, width }}
          onMouseLeave={() => {
            this.setState({ isTooltipVisible: false });
@@ -1,5 +1,5 @@
 import { difference, isEqual } from 'lodash';
-import { Component } from 'react';
+import { Component, type JSX } from 'react';
 import * as React from 'react';

 import { GraphSeriesXY } from '@grafana/data';
@@ -1,4 +1,4 @@
-import { CSSProperties, useRef } from 'react';
+import { CSSProperties, useRef, type JSX } from 'react';
 import Transition, { ExitHandler } from 'react-transition-group/Transition';

 interface Props {
@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 import { PluginExtensionPoints } from '@grafana/data';
 import { config, renderLimitedComponents, usePluginComponents } from '@grafana/runtime';
 import { useGrafana } from 'app/core/context/GrafanaContext';
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { FC } from 'react';
+import { FC, type JSX } from 'react';

 import { colorManipulator } from '@grafana/data';
 import { useTheme2 } from '@grafana/ui';
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, type JSX } from 'react';

 import { t } from '@grafana/i18n';
 import { ComboboxOption, MultiCombobox } from '@grafana/ui';
@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -1,4 +1,4 @@
-import { memo, useState, useCallback } from 'react';
+import { memo, useState, useCallback, type JSX } from 'react';

 import { t } from '@grafana/i18n';
 import { FetchError, getBackendSrv, isFetchError, locationService } from '@grafana/runtime';
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, type JSX } from 'react';

 import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
@@ -1,4 +1,4 @@
-import { FormEvent, useCallback, useEffect, useState, useRef } from 'react';
+import { FormEvent, useCallback, useEffect, useState, useRef, type JSX } from 'react';

 import { OrgRole } from '@grafana/data';
 import { ClickOutsideWrapper, Portal, useTheme2 } from '@grafana/ui';
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { FormEvent, HTMLProps, useEffect, useRef } from 'react';
+import { FormEvent, HTMLProps, useEffect, useRef, type JSX } from 'react';
 import * as React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type JSX } from 'react';

 import { OrgRole } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
@@ -1,4 +1,5 @@
 import { cx } from '@emotion/css';
+import type { JSX } from 'react';

 import { Trans, t } from '@grafana/i18n';
 import { Button, ScrollContainer, Stack, useStyles2, useTheme2 } from '@grafana/ui';
@@ -1,5 +1,6 @@
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { JSX } from 'react';

 import { OrgPicker } from './OrgPicker';

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useMemo } from 'react';
+import { useMemo, type JSX } from 'react';

 import { useAssistant } from '@grafana/assistant';
 import { FeatureState, GrafanaTheme2 } from '@grafana/data';
@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import type { JSX } from 'react';
 import Skeleton from 'react-loading-skeleton';

 import { GrafanaTheme2 } from '@grafana/data';
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useMemo } from 'react';
+import { type JSX, useMemo } from 'react';
 import { Navigate } from 'react-router-dom-v5-compat';
 import { useLocation } from 'react-use';

@@ -1,4 +1,4 @@
-import { Ref, cloneElement, forwardRef } from 'react';
+import { type JSX, Ref, cloneElement, forwardRef } from 'react';

 interface ConditionalWrapProps {
  shouldWrap: boolean;
@@ -1,4 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
+import type { JSX } from 'react';
 import { Provider } from 'react-redux';

 import { setupMswServer } from 'app/features/alerting/unified/mockApi';
@@ -1,4 +1,4 @@
-import { cloneElement, useCallback } from 'react';
+import { type JSX, cloneElement, useCallback } from 'react';

 import { useReturnToPrevious } from '@grafana/runtime';

@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 import { t } from '@grafana/i18n';
 import { Box, ClipboardButton, Stack, Text, Tooltip } from '@grafana/ui';

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Fragment, useState } from 'react';
+import { Fragment, type JSX, useState } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
@@ -1,4 +1,5 @@
 import 'core-js/stable/structured-clone';
+import type { JSX } from 'react';
 import { Route, Routes } from 'react-router-dom-v5-compat';
 import { clickSelectOption } from 'test/helpers/selectOptionInTest';
 import { render, screen, within } from 'test/test-utils';
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { type JSX, useCallback, useMemo, useState } from 'react';
 import { useToggle } from 'react-use';

 import { AlertmanagerAction, useAlertmanagerAbility } from '../../hooks/useAbilities';
@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from 'react';
+import { type JSX, ReactElement, useMemo } from 'react';

 import { PluginExtensionLink } from '@grafana/data';
 import { Menu } from '@grafana/ui';
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { type JSX, useCallback, useMemo, useState } from 'react';
 import { useToggle } from 'react-use';

 import { GrafanaMuteTimingsExporter } from '../export/GrafanaMuteTimingsExporter';
@@ -1,5 +1,5 @@
 import { groupBy } from 'lodash';
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, type JSX, useCallback, useMemo, useState } from 'react';

 import { Trans, t } from '@grafana/i18n';
 import { Button, Icon, Modal, ModalProps, Spinner, Stack } from '@grafana/ui';
@@ -1,6 +1,7 @@
 import { renderHook, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { first, noop } from 'lodash';
+import type { JSX } from 'react';
 import { Route, Routes } from 'react-router-dom-v5-compat';
 import { render } from 'test/test-utils';

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { isArray, sumBy, uniqueId } from 'lodash';
 import pluralize from 'pluralize';
 import * as React from 'react';
-import { FC, Fragment, ReactNode, useState } from 'react';
+import { FC, Fragment, type JSX, ReactNode, useState } from 'react';
 import { useToggle } from 'react-use';

 import { AlertLabel, getInheritedProperties } from '@grafana/alerting';
@@ -1,4 +1,4 @@
-import { ComponentProps, useState } from 'react';
+import { ComponentProps, type JSX, useState } from 'react';

 import { Trans, t } from '@grafana/i18n';
 import { Button, Drawer } from '@grafana/ui';
@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
 import * as React from 'react';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { type JSX, default as React } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Provider } from 'react-redux';
 import { render, screen, waitFor, within } from 'test/test-utils';
@@ -1,6 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { compact, uniqueId } from 'lodash';
 import * as React from 'react';
+import type { JSX } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';

 import { GrafanaTheme2 } from '@grafana/data';
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { JSX } from 'react';
 import { DeepMap, FieldError, FieldErrors, useFormContext } from 'react-hook-form';

 import { Field, SecretInput } from '@grafana/ui';
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { sortBy } from 'lodash';
 import * as React from 'react';
-import { useEffect, useMemo } from 'react';
+import { type JSX, useEffect, useMemo } from 'react';
 import { Controller, FieldErrors, useFormContext } from 'react-hook-form';

 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { type JSX, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';

 interface Props {
@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { render, screen, within } from 'test/test-utils';
 import { byRole, byTestId } from 'testing-library-selector';
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { type JSX, useCallback } from 'react';

 import { DataSourceInstanceSettings } from '@grafana/data';
 import { DataSourcePicker, DataSourcePickerProps } from 'app/features/datasources/components/picker/DataSourcePicker';
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import type { JSX } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { type JSX, useCallback, useMemo, useState } from 'react';

 import { t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
 import * as React from 'react';
+import type { JSX } from 'react';

 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 import { PanelData } from '@grafana/data';

 import { VizWrapper } from '../rule-editor/VizWrapper';
@@ -1,5 +1,5 @@
 import { isString } from 'lodash';
-import { useState } from 'react';
+import { type JSX, useState } from 'react';

 import { Trans, t } from '@grafana/i18n';
 import { LinkButton, Stack } from '@grafana/ui';
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import type { JSX } from 'react';

 import { useStyles2 } from '@grafana/ui';

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, type JSX } from 'react';

 import { textUtil } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
--- a/Show More
+++ b/Show More