diff --git a/packages/grafana-data/src/utils/OptionsUIBuilders.ts b/packages/grafana-data/src/utils/OptionsUIBuilders.ts index b88f633ca5e..78a80efb6e1 100644 --- a/packages/grafana-data/src/utils/OptionsUIBuilders.ts +++ b/packages/grafana-data/src/utils/OptionsUIBuilders.ts @@ -1,4 +1,5 @@ import { set, cloneDeep } from 'lodash'; +import type { JSX } from 'react'; import { FieldNamePickerConfigSettings, diff --git a/packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.tsx b/packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.tsx index 94ea6281492..3551cdcb336 100644 --- a/packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.tsx +++ b/packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.tsx @@ -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'; diff --git a/packages/grafana-prometheus/src/configuration/shared/utils.tsx b/packages/grafana-prometheus/src/configuration/shared/utils.tsx index 699d0e7f706..b0a1638cab3 100644 --- a/packages/grafana-prometheus/src/configuration/shared/utils.tsx +++ b/packages/grafana-prometheus/src/configuration/shared/utils.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Trans } from '@grafana/i18n'; diff --git a/packages/grafana-runtime/src/services/pluginExtensions/utils.test.tsx b/packages/grafana-runtime/src/services/pluginExtensions/utils.test.tsx index b57a795c3b5..b62ae46f27c 100644 --- a/packages/grafana-runtime/src/services/pluginExtensions/utils.test.tsx +++ b/packages/grafana-runtime/src/services/pluginExtensions/utils.test.tsx @@ -1,5 +1,5 @@ import { render } from '@testing-library/react'; -import React from 'react'; +import React, { type JSX } from 'react'; import { ComponentTypeWithExtensionMeta, diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 639bf41ca13..8478081182c 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx index d13408d3271..8eee4b3ad12 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx @@ -1,4 +1,4 @@ -import { CSSProperties } from 'react'; +import { CSSProperties, type JSX } from 'react'; import * as React from 'react'; import tinycolor from 'tinycolor2'; diff --git a/packages/grafana-ui/src/components/Button/Button.test.tsx b/packages/grafana-ui/src/components/Button/Button.test.tsx index b78b9aafe5d..d82291f3263 100644 --- a/packages/grafana-ui/src/components/Button/Button.test.tsx +++ b/packages/grafana-ui/src/components/Button/Button.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx index 8c107a20129..e46107b6b02 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx index cd859f77256..7b63d5cf296 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx @@ -1,4 +1,5 @@ import { css, cx } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.test.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.test.tsx index 0cf2a5ee010..224bc6bb2b9 100644 --- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.test.tsx +++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.test.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.test.tsx index 817df10153d..f68093ce9f5 100644 --- a/packages/grafana-ui/src/components/Collapse/Collapse.test.tsx +++ b/packages/grafana-ui/src/components/Collapse/Collapse.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx index 5fd64e37772..f3cdb9e07b1 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { t } from '@grafana/i18n'; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx index b57f9d8557b..e4125db7204 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx index 2f145e26baf..d439938d26e 100644 --- a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx +++ b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, type JSX } from 'react'; import * as React from 'react'; import { ContextMenu } from '../ContextMenu/ContextMenu'; diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 77cd0b63579..82215940405 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx index dc85dca5464..5e3b71cbe73 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx index 98570eb2e15..4ec3bc939c2 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data'; import { t, Trans } from '@grafana/i18n'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx index d8708ddb470..0e6b9796afa 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data'; import { t, Trans } from '@grafana/i18n'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx index 0719693e625..459a7d56e1c 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx @@ -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, diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx index cf3a2dec556..7957587508d 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/utils/useTimeSync.tsx b/packages/grafana-ui/src/components/DateTimePickers/utils/useTimeSync.tsx index 3aa15a7fb98..89d151b689f 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/utils/useTimeSync.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/utils/useTimeSync.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx index 72f353b4ed7..4373ea2f94b 100644 --- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx +++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.test.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.test.tsx index 1fff175840f..eae37775224 100644 --- a/packages/grafana-ui/src/components/FilterPill/FilterPill.test.tsx +++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Forms/FieldArray.tsx b/packages/grafana-ui/src/components/Forms/FieldArray.tsx index 5c21767ab84..ad8f18b16c2 100644 --- a/packages/grafana-ui/src/components/Forms/FieldArray.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldArray.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx index a45a854a045..5bcd70c2585 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx @@ -14,7 +14,7 @@ export enum LegacyInputStatus { export interface Props extends React.HTMLProps { validationEvents?: ValidationEvents; hideErrorMessage?: boolean; - inputRef?: React.LegacyRef; + inputRef?: React.Ref; // Override event props and append status as argument onBlur?: (event: React.FocusEvent, status?: LegacyInputStatus) => void; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 8c050c109c0..133826864ec 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -168,7 +168,9 @@ export class Gauge extends PureComponent { const gaugeElement = (
(this.canvasElement = element)} + ref={(element) => { + this.canvasElement = element; + }} /> ); diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx index bf3e0e7f69c..52e8ed8e567 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/List/AbstractList.tsx b/packages/grafana-ui/src/components/List/AbstractList.tsx index 920b6cf0b5b..de1d360800f 100644 --- a/packages/grafana-ui/src/components/List/AbstractList.tsx +++ b/packages/grafana-ui/src/components/List/AbstractList.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx index fc00bc9e562..aaeb2c3e426 100644 --- a/packages/grafana-ui/src/components/Modal/Modal.tsx +++ b/packages/grafana-ui/src/components/Modal/Modal.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx index c0c25d4186b..57afc826b93 100644 --- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx +++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx index f66ca51bb86..608795b219b 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx @@ -1,4 +1,5 @@ import { css, cx } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx index 053bddb3ad3..1ce8a68dc87 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx @@ -211,7 +211,9 @@ export class UnThemedQueryField extends PureComponent
(this.editor = editor!)} + ref={(editor) => { + this.editor = editor!; + }} schema={SCHEMA} autoCorrect={false} readOnly={this.props.disabled} diff --git a/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx b/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx index 3fb806bc162..456d5044dd3 100644 --- a/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx +++ b/packages/grafana-ui/src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx index d8278697334..c0a829dc760 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Select/InputControl.tsx b/packages/grafana-ui/src/components/Select/InputControl.tsx index 4635b6a27dc..f45ba1c74b3 100644 --- a/packages/grafana-ui/src/components/Select/InputControl.tsx +++ b/packages/grafana-ui/src/components/Select/InputControl.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Select/MultiValue.tsx b/packages/grafana-ui/src/components/Select/MultiValue.tsx index 987d34a1290..31bd3d23d91 100644 --- a/packages/grafana-ui/src/components/Select/MultiValue.tsx +++ b/packages/grafana-ui/src/components/Select/MultiValue.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import type { JSX } from 'react'; import { t } from '@grafana/i18n'; diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx index bfb8b17a1c1..37bd1452e91 100644 --- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx +++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts index 3512ab9fbee..6ed93a5c0e5 100644 --- a/packages/grafana-ui/src/components/Select/types.ts +++ b/packages/grafana-ui/src/components/Select/types.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import type { JSX } from 'react'; import { ActionMeta as SelectActionMeta, CommonProps as ReactSelectCommonProps, diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.test.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.test.tsx index c28e2b37a39..5d6a6e4984a 100644 --- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.test.tsx +++ b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Table/Cells/GeoCell.tsx b/packages/grafana-ui/src/components/Table/Cells/GeoCell.tsx index 16d37fc3f4e..6328b157b29 100644 --- a/packages/grafana-ui/src/components/Table/Cells/GeoCell.tsx +++ b/packages/grafana-ui/src/components/Table/Cells/GeoCell.tsx @@ -1,5 +1,6 @@ import WKT from 'ol/format/WKT'; import { Geometry } from 'ol/geom'; +import type { JSX } from 'react'; import { TableCellProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx b/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx index 6e8b678d528..c9476244bcf 100644 --- a/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx +++ b/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx index a3772785d63..798ca4e1ae0 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx @@ -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, diff --git a/packages/grafana-ui/src/components/Tabs/Tabs.test.tsx b/packages/grafana-ui/src/components/Tabs/Tabs.test.tsx index 91b0aabce60..1caafa6ef44 100644 --- a/packages/grafana-ui/src/components/Tabs/Tabs.test.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tabs.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Tags/Tag.test.tsx b/packages/grafana-ui/src/components/Tags/Tag.test.tsx index 48fce39b162..b5535284105 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.test.tsx +++ b/packages/grafana-ui/src/components/Tags/Tag.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Tags/TagList.test.tsx b/packages/grafana-ui/src/components/Tags/TagList.test.tsx index 7c0d8a0314b..f8a4a393c88 100644 --- a/packages/grafana-ui/src/components/Tags/TagList.test.tsx +++ b/packages/grafana-ui/src/components/Tags/TagList.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx index 41cc4e55ab4..002f15ec04b 100644 --- a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx +++ b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Toggletip/types.ts b/packages/grafana-ui/src/components/Toggletip/types.ts index 62d0335a868..ff730df05b2 100644 --- a/packages/grafana-ui/src/components/Toggletip/types.ts +++ b/packages/grafana-ui/src/components/Toggletip/types.ts @@ -1,3 +1,4 @@ +import type { JSX } from 'react'; export interface ToggletipContentProps { /** * @deprecated diff --git a/packages/grafana-ui/src/components/Tooltip/PopoverController.tsx b/packages/grafana-ui/src/components/Tooltip/PopoverController.tsx index 7128a67528a..1e792aa95d8 100644 --- a/packages/grafana-ui/src/components/Tooltip/PopoverController.tsx +++ b/packages/grafana-ui/src/components/Tooltip/PopoverController.tsx @@ -1,5 +1,5 @@ import { Placement } from '@popperjs/core'; -import { Component } from 'react'; +import { Component, type JSX } from 'react'; import { PopoverContent } from './types'; diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx index 665e2d7bf6c..59902c5c953 100644 --- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/Tooltip/types.ts b/packages/grafana-ui/src/components/Tooltip/types.ts index ac01b7f5409..dcdede5e19c 100644 --- a/packages/grafana-ui/src/components/Tooltip/types.ts +++ b/packages/grafana-ui/src/components/Tooltip/types.ts @@ -1,4 +1,5 @@ import { Placement } from '@floating-ui/react'; +import type { JSX } from 'react'; export interface PopoverContentProps { /** diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.test.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.test.tsx index e5cf2ccce1d..42f6d57c79e 100644 --- a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.test.tsx +++ b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.test.tsx @@ -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'; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx index 0383aa1eab1..b0f578fae79 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx @@ -1,4 +1,5 @@ import { css, cx } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; diff --git a/packages/grafana-ui/src/components/VizLegend/types.ts b/packages/grafana-ui/src/components/VizLegend/types.ts index 4032276bf6a..3c0de880792 100644 --- a/packages/grafana-ui/src/components/VizLegend/types.ts +++ b/packages/grafana-ui/src/components/VizLegend/types.ts @@ -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'; diff --git a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx index 8a42baf89d7..a1fb6c6a1c3 100644 --- a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx +++ b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx @@ -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'; diff --git a/packages/grafana-ui/src/graveyard/Graph/Graph.tsx b/packages/grafana-ui/src/graveyard/Graph/Graph.tsx index 759e041decd..d926214c3cb 100644 --- a/packages/grafana-ui/src/graveyard/Graph/Graph.tsx +++ b/packages/grafana-ui/src/graveyard/Graph/Graph.tsx @@ -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 {
(this.element = e)} + ref={(e) => { + this.element = e; + }} style={{ height, width }} onMouseLeave={() => { this.setState({ isTooltipVisible: false }); diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx index 3361b077b03..8c38dc62708 100644 --- a/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx +++ b/packages/grafana-ui/src/graveyard/Graph/GraphSeriesToggler.tsx @@ -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'; diff --git a/public/app/core/components/Animations/FadeIn.tsx b/public/app/core/components/Animations/FadeIn.tsx index 80a12637f18..9570f7255e9 100644 --- a/public/app/core/components/Animations/FadeIn.tsx +++ b/public/app/core/components/Animations/FadeIn.tsx @@ -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 { diff --git a/public/app/core/components/AppChrome/AppChromeExtensionPoint.tsx b/public/app/core/components/AppChrome/AppChromeExtensionPoint.tsx index 96d7d68d8ad..9f3e37555d6 100644 --- a/public/app/core/components/AppChrome/AppChromeExtensionPoint.tsx +++ b/public/app/core/components/AppChrome/AppChromeExtensionPoint.tsx @@ -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'; diff --git a/public/app/core/components/AppChrome/MegaMenu/FeatureHighlight.tsx b/public/app/core/components/AppChrome/MegaMenu/FeatureHighlight.tsx index 6678e57a2ec..ca660e8750c 100644 --- a/public/app/core/components/AppChrome/MegaMenu/FeatureHighlight.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/FeatureHighlight.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx index b32199ed4c7..e44eb62658b 100644 --- a/public/app/core/components/Branding/Branding.tsx +++ b/public/app/core/components/Branding/Branding.tsx @@ -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'; diff --git a/public/app/core/components/FolderFilter/FolderFilter.tsx b/public/app/core/components/FolderFilter/FolderFilter.tsx index 1f8f3e5557d..6f2ba1c6c91 100644 --- a/public/app/core/components/FolderFilter/FolderFilter.tsx +++ b/public/app/core/components/FolderFilter/FolderFilter.tsx @@ -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'; diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx index d90dfdf04af..b2eca9ca2f1 100644 --- a/public/app/core/components/Layers/LayerDragDropList.tsx +++ b/public/app/core/components/Layers/LayerDragDropList.tsx @@ -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'; diff --git a/public/app/core/components/Login/LoginCtrl.tsx b/public/app/core/components/Login/LoginCtrl.tsx index 9ea5cba50cf..1a5f3d572e4 100644 --- a/public/app/core/components/Login/LoginCtrl.tsx +++ b/public/app/core/components/Login/LoginCtrl.tsx @@ -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'; diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx index 61e3a78d800..4ab642ac551 100644 --- a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx +++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx @@ -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'; diff --git a/public/app/core/components/RolePicker/RolePicker.tsx b/public/app/core/components/RolePicker/RolePicker.tsx index 25cff0889a1..948b8af9506 100644 --- a/public/app/core/components/RolePicker/RolePicker.tsx +++ b/public/app/core/components/RolePicker/RolePicker.tsx @@ -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'; diff --git a/public/app/core/components/RolePicker/RolePickerInput.tsx b/public/app/core/components/RolePicker/RolePickerInput.tsx index 3f8158020c3..9acdbed24d9 100644 --- a/public/app/core/components/RolePicker/RolePickerInput.tsx +++ b/public/app/core/components/RolePicker/RolePickerInput.tsx @@ -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'; diff --git a/public/app/core/components/RolePicker/RolePickerMenu.tsx b/public/app/core/components/RolePicker/RolePickerMenu.tsx index 81c38519ae6..4287d17c979 100644 --- a/public/app/core/components/RolePicker/RolePickerMenu.tsx +++ b/public/app/core/components/RolePicker/RolePickerMenu.tsx @@ -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'; diff --git a/public/app/core/components/RolePicker/RolePickerSubMenu.tsx b/public/app/core/components/RolePicker/RolePickerSubMenu.tsx index 3dff3fc88be..1254dac06a4 100644 --- a/public/app/core/components/RolePicker/RolePickerSubMenu.tsx +++ b/public/app/core/components/RolePicker/RolePickerSubMenu.tsx @@ -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'; diff --git a/public/app/core/components/Select/OrgPicker.test.tsx b/public/app/core/components/Select/OrgPicker.test.tsx index 38344d1fd8a..4bab94faefa 100644 --- a/public/app/core/components/Select/OrgPicker.test.tsx +++ b/public/app/core/components/Select/OrgPicker.test.tsx @@ -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'; diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx index 82f39fac28f..e334d23982e 100644 --- a/public/app/core/components/help/HelpModal.tsx +++ b/public/app/core/components/help/HelpModal.tsx @@ -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'; diff --git a/public/app/features/admin/ServerStatsCard.tsx b/public/app/features/admin/ServerStatsCard.tsx index 070005e7e3a..872d3844e0b 100644 --- a/public/app/features/admin/ServerStatsCard.tsx +++ b/public/app/features/admin/ServerStatsCard.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/RedirectToRuleViewer.tsx b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx index 96410c28320..bbcd025d1db 100644 --- a/public/app/features/alerting/unified/RedirectToRuleViewer.tsx +++ b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/ConditionalWrap.tsx b/public/app/features/alerting/unified/components/ConditionalWrap.tsx index 55b80d9ce45..559abb737d3 100644 --- a/public/app/features/alerting/unified/components/ConditionalWrap.tsx +++ b/public/app/features/alerting/unified/components/ConditionalWrap.tsx @@ -1,4 +1,4 @@ -import { Ref, cloneElement, forwardRef } from 'react'; +import { type JSX, Ref, cloneElement, forwardRef } from 'react'; interface ConditionalWrapProps { shouldWrap: boolean; diff --git a/public/app/features/alerting/unified/components/GrafanaAlertmanagerWarning.test.tsx b/public/app/features/alerting/unified/components/GrafanaAlertmanagerWarning.test.tsx index 52c87f5f41c..dbfa2dbfeba 100644 --- a/public/app/features/alerting/unified/components/GrafanaAlertmanagerWarning.test.tsx +++ b/public/app/features/alerting/unified/components/GrafanaAlertmanagerWarning.test.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/WithReturnButton.tsx b/public/app/features/alerting/unified/components/WithReturnButton.tsx index 6b266949e1b..2308df8f063 100644 --- a/public/app/features/alerting/unified/components/WithReturnButton.tsx +++ b/public/app/features/alerting/unified/components/WithReturnButton.tsx @@ -1,4 +1,4 @@ -import { cloneElement, useCallback } from 'react'; +import { type JSX, cloneElement, useCallback } from 'react'; import { useReturnToPrevious } from '@grafana/runtime'; diff --git a/public/app/features/alerting/unified/components/common/DetailText.tsx b/public/app/features/alerting/unified/components/common/DetailText.tsx index f35c0765a60..296c5c79818 100644 --- a/public/app/features/alerting/unified/components/common/DetailText.tsx +++ b/public/app/features/alerting/unified/components/common/DetailText.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { t } from '@grafana/i18n'; import { Box, ClipboardButton, Stack, Text, Tooltip } from '@grafana/ui'; diff --git a/public/app/features/alerting/unified/components/contact-points/ContactPointHeader.tsx b/public/app/features/alerting/unified/components/contact-points/ContactPointHeader.tsx index 1825b5e40a0..0fb1403cb35 100644 --- a/public/app/features/alerting/unified/components/contact-points/ContactPointHeader.tsx +++ b/public/app/features/alerting/unified/components/contact-points/ContactPointHeader.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/contact-points/EditContactPoint.test.tsx b/public/app/features/alerting/unified/components/contact-points/EditContactPoint.test.tsx index 75413e20e33..9bc321a40a6 100644 --- a/public/app/features/alerting/unified/components/contact-points/EditContactPoint.test.tsx +++ b/public/app/features/alerting/unified/components/contact-points/EditContactPoint.test.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/contact-points/useExportContactPoint.tsx b/public/app/features/alerting/unified/components/contact-points/useExportContactPoint.tsx index 3dcb8753ccc..3638497e2a7 100644 --- a/public/app/features/alerting/unified/components/contact-points/useExportContactPoint.tsx +++ b/public/app/features/alerting/unified/components/contact-points/useExportContactPoint.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/extensions/AlertingRuleExtensionPointMenu.tsx b/public/app/features/alerting/unified/components/extensions/AlertingRuleExtensionPointMenu.tsx index 20ef95fdb22..ef7f9411a45 100644 --- a/public/app/features/alerting/unified/components/extensions/AlertingRuleExtensionPointMenu.tsx +++ b/public/app/features/alerting/unified/components/extensions/AlertingRuleExtensionPointMenu.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/mute-timings/useExportMuteTimingsDrawer.tsx b/public/app/features/alerting/unified/components/mute-timings/useExportMuteTimingsDrawer.tsx index 3d65d91aa9a..b9cc9d1af55 100644 --- a/public/app/features/alerting/unified/components/mute-timings/useExportMuteTimingsDrawer.tsx +++ b/public/app/features/alerting/unified/components/mute-timings/useExportMuteTimingsDrawer.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/notification-policies/Modals.tsx b/public/app/features/alerting/unified/components/notification-policies/Modals.tsx index d3187c41a7e..20c222749fc 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Modals.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Modals.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx index f27d5503d12..a10bca42100 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx index 3f80f6cd902..c4b6a0c55b7 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Policy.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Policy.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx b/public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx index 33ebf71d59a..8ba91403352 100644 --- a/public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx +++ b/public/app/features/alerting/unified/components/permissions/ManagePermissions.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx index 4252cfde654..239b8e9abf4 100644 --- a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx +++ b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/receivers/TemplatePreview.test.tsx b/public/app/features/alerting/unified/components/receivers/TemplatePreview.test.tsx index fd38b545945..e4e1f441860 100644 --- a/public/app/features/alerting/unified/components/receivers/TemplatePreview.test.tsx +++ b/public/app/features/alerting/unified/components/receivers/TemplatePreview.test.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/receivers/TemplatePreview.tsx b/public/app/features/alerting/unified/components/receivers/TemplatePreview.tsx index 5e5ecc1e08b..c4b154809b8 100644 --- a/public/app/features/alerting/unified/components/receivers/TemplatePreview.tsx +++ b/public/app/features/alerting/unified/components/receivers/TemplatePreview.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx index fbdfdbbf493..16042c0e654 100644 --- a/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx index 0202e7c2e52..645c6565a01 100644 --- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/DeletedSubform.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/DeletedSubform.tsx index bb5537cbbee..092e64f1da4 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/DeletedSubform.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/fields/DeletedSubform.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { type JSX, useEffect } from 'react'; import { useFormContext } from 'react-hook-form'; interface Props { diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx index a8f73230c21..5fb3267432a 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx index 72ec6200ec5..8479b335181 100644 --- a/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx index 04b28bd3bf4..0be96f0bdc2 100644 --- a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Trans } from '@grafana/i18n'; diff --git a/public/app/features/alerting/unified/components/rule-viewer/DeleteModal.tsx b/public/app/features/alerting/unified/components/rule-viewer/DeleteModal.tsx index a26a9709d38..b29257a971d 100644 --- a/public/app/features/alerting/unified/components/rule-viewer/DeleteModal.tsx +++ b/public/app/features/alerting/unified/components/rule-viewer/DeleteModal.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx index 1f61f10e640..d9c61ca8fed 100644 --- a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx +++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerLayout.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx index c55b01c6d16..93f6b73feab 100644 --- a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx +++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { PanelData } from '@grafana/data'; import { VizWrapper } from '../rule-editor/VizWrapper'; diff --git a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx index 206d939811f..68aed9c2dfe 100644 --- a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx @@ -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'; diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx index b2ff856a498..367ca5f5d6a 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsAnnotations.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { useStyles2 } from '@grafana/ui'; diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsButtons.tsx index 28cd663bdeb..8f733cd6df0 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsButtons.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsButtons.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, type JSX } from 'react'; import { textUtil } from '@grafana/data'; import { Trans } from '@grafana/i18n'; diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx index 3ba34bf86fa..fc03406cffd 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { useMemo } from 'react'; +import { type JSX, useMemo } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { t } from '@grafana/i18n'; diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx index d6d472886d4..3e60213a82f 100644 --- a/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleDetailsExpression.tsx @@ -1,4 +1,5 @@ import { css, cx } from '@emotion/css'; +import type { JSX } from 'react'; import { t } from '@grafana/i18n'; import { CombinedRule, RulesSource } from 'app/types/unified-alerting'; diff --git a/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx index 58cc844d92c..6a35dbe5d0b 100644 --- a/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { SerializedError } from '@reduxjs/toolkit'; -import { FC, ReactElement, useMemo, useState } from 'react'; +import { FC, type JSX, ReactElement, useMemo, useState } from 'react'; import { useLocalStorage } from 'react-use'; import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data'; diff --git a/public/app/features/alerting/unified/components/settings/AlertmanagerConfig.tsx b/public/app/features/alerting/unified/components/settings/AlertmanagerConfig.tsx index 8282d16ed97..f853c19357b 100644 --- a/public/app/features/alerting/unified/components/settings/AlertmanagerConfig.tsx +++ b/public/app/features/alerting/unified/components/settings/AlertmanagerConfig.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { useEffect, useState } from 'react'; +import { type JSX, useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import AutoSizer from 'react-virtualized-auto-sizer'; diff --git a/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx b/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx index 393355ade61..a73d27f7165 100644 --- a/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx +++ b/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx @@ -1,5 +1,5 @@ import { isString } from 'lodash'; -import { useState } from 'react'; +import { type JSX, useState } from 'react'; import { RequireAtLeastOne } from 'type-fest'; import { Trans, t } from '@grafana/i18n'; diff --git a/public/app/features/auth-config/ErrorContainer.tsx b/public/app/features/auth-config/ErrorContainer.tsx index 1a51263a364..148ee9d33da 100644 --- a/public/app/features/auth-config/ErrorContainer.tsx +++ b/public/app/features/auth-config/ErrorContainer.tsx @@ -1,3 +1,4 @@ +import type { JSX } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { Alert } from '@grafana/ui'; diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx index fb2416f437c..2ab55869429 100644 --- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx @@ -117,7 +117,9 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan id="min-column-width" defaultValue={columnWidth} onBlur={onCustomMinWidthChanged} - ref={(ref) => setInputRef(ref)} + ref={(ref) => { + setInputRef(ref); + }} type="number" min={50} max={2000} @@ -233,7 +235,9 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage id="min-height" defaultValue={rowHeight} onBlur={onCustomHeightChanged} - ref={(ref) => setInputRef(ref)} + ref={(ref) => { + setInputRef(ref); + }} type="number" min={50} max={2000} diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx index c9af2bc439c..0fa22e9d305 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx @@ -56,7 +56,9 @@ export function TabItemRenderer({ model }: SceneComponentProps) { {(dragProvided, dragSnapshot) => (
dragProvided.innerRef(ref)} + ref={(ref) => { + dragProvided.innerRef(ref); + }} className={cx(dragSnapshot.isDragging && styles.dragging)} {...dragProvided.draggableProps} {...dragProvided.dragHandleProps} diff --git a/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.test.tsx index 44e0cb9a5e2..b376bc2b0e5 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.test.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.test.tsx @@ -2,6 +2,7 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import type { JSX } from 'react'; import { selectors } from '@grafana/e2e-selectors'; import { DataSourceVariable } from '@grafana/scenes'; diff --git a/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx index ef51fde16f6..392f31ec92f 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/IntervalVariableEditor.test.tsx @@ -2,6 +2,7 @@ import { render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import type { JSX } from 'react'; import { selectors } from '@grafana/e2e-selectors'; import { IntervalVariable } from '@grafana/scenes'; diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx index d7b32cfabb2..461052cbe2a 100644 --- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx @@ -1,4 +1,4 @@ -import { useCallback, ChangeEvent, useState } from 'react'; +import { useCallback, ChangeEvent, useState, type JSX } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { TimeZone } from '@grafana/data'; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx b/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx index 2ba5aec62bb..57fe4325b14 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import { useCallback } from 'react'; +import { useCallback, type JSX } from 'react'; import { GrafanaTheme2, renderMarkdown, LinkModelSupplier, ScopedVars, IconName } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx index 0e52eb1c74c..1d1b739f87a 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, type JSX } from 'react'; import { Trans } from '@grafana/i18n'; import { locationService } from '@grafana/runtime'; diff --git a/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx b/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx index 926cc15cd45..9e2b0c6f578 100644 --- a/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx +++ b/public/app/features/dashboard/components/ShareModal/ViewJsonModal.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, type JSX } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { Trans, t } from '@grafana/i18n'; diff --git a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx index 78b04d0bef4..d4e11bdb3ae 100644 --- a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx +++ b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, type JSX } from 'react'; import { AnnotationQuery, EventBus, GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmptyExtensionPoint.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmptyExtensionPoint.tsx index 5e7a551514f..f604ca3e778 100644 --- a/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmptyExtensionPoint.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmptyExtensionPoint.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { PluginExtensionPoints } from '@grafana/data'; import { config, renderLimitedComponents, usePluginComponents } from '@grafana/runtime'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; diff --git a/public/app/features/dashboard/dashgrid/PanelLinks.tsx b/public/app/features/dashboard/dashgrid/PanelLinks.tsx index 3ad8fca5d9f..6e1a5cb2fb3 100644 --- a/public/app/features/dashboard/dashgrid/PanelLinks.tsx +++ b/public/app/features/dashboard/dashgrid/PanelLinks.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { DataLink, GrafanaTheme2, LinkModel } from '@grafana/data'; import { t } from '@grafana/i18n'; diff --git a/public/app/features/datasources/components/DataSourceAddButton.tsx b/public/app/features/datasources/components/DataSourceAddButton.tsx index f765188b50d..a3af80ccf6c 100644 --- a/public/app/features/datasources/components/DataSourceAddButton.tsx +++ b/public/app/features/datasources/components/DataSourceAddButton.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, type JSX } from 'react'; import { Pages } from '@grafana/e2e-selectors'; import { Trans } from '@grafana/i18n'; diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 79678f4e15a..39c5b09dc6c 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -640,7 +640,9 @@ export class Explore extends PureComponent { )} (this.scrollElement = scrollElement || undefined)} + ref={(scrollElement) => { + this.scrollElement = scrollElement || undefined; + }} >
{datasourceInstance ? ( diff --git a/public/app/features/explore/Logs/LogsSamplePanel.tsx b/public/app/features/explore/Logs/LogsSamplePanel.tsx index 5dfba3eee39..0f99fde8063 100644 --- a/public/app/features/explore/Logs/LogsSamplePanel.tsx +++ b/public/app/features/explore/Logs/LogsSamplePanel.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { useRef } from 'react'; +import { useRef, type JSX } from 'react'; import { CoreApp, diff --git a/public/app/features/explore/MetaInfoText.tsx b/public/app/features/explore/MetaInfoText.tsx index d2106cb155d..8e3dfb48a3d 100644 --- a/public/app/features/explore/MetaInfoText.tsx +++ b/public/app/features/explore/MetaInfoText.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { memo } from 'react'; +import { memo, type JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.test.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.test.tsx index b57f4274519..6cab9c42f80 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.test.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.test.tsx @@ -13,6 +13,7 @@ // limitations under the License. import { render, screen, fireEvent, within } from '@testing-library/react'; +import type { JSX } from 'react'; import Scrubber, { ScrubberProps } from './Scrubber'; diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx index 5843cdec64e..ce86d210b63 100644 --- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx +++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx @@ -197,7 +197,9 @@ export class UnthemedTraceTimelineViewer extends PureComponent { return (
ref && this.setState({ height: ref.getBoundingClientRect().height })} + ref={(ref: HTMLDivElement | null) => { + ref && this.setState({ height: ref.getBoundingClientRect().height }); + }} > { return ( <> - {query.metricQueryType === MetricQueryType.Search && ( <> {query.metricEditorMode === MetricEditorMode.Builder && ( diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.tsx index 04bf910f1d4..2999ff7f79b 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState, type JSX } from 'react'; import { QueryEditorProps } from '@grafana/data'; diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx index 57568a0666e..78da93ba3a1 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { CoreApp, LoadingState, QueryEditorProps, SelectableValue } from '@grafana/data'; import { EditorHeader, InlineSelect, FlexItem } from '@grafana/plugin-ui'; import { config } from '@grafana/runtime'; diff --git a/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx b/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx index 0df6363a7ce..39f90596fb1 100644 --- a/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx +++ b/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useState, type JSX } from 'react'; import { Box, Button, Icon, InlineField, InlineFieldRow, Input } from '@grafana/ui'; diff --git a/public/app/plugins/datasource/graphite/configuration/MappingsHelp.tsx b/public/app/plugins/datasource/graphite/configuration/MappingsHelp.tsx index 37a93580ca1..12a0a581e8e 100644 --- a/public/app/plugins/datasource/graphite/configuration/MappingsHelp.tsx +++ b/public/app/plugins/datasource/graphite/configuration/MappingsHelp.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { Alert } from '@grafana/ui'; type Props = { diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/QueryEditorModeSwitcher.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/QueryEditorModeSwitcher.tsx index 7bc5dcf6a6e..246f21c9b1c 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/QueryEditorModeSwitcher.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/QueryEditorModeSwitcher.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, type JSX } from 'react'; import { Button, ConfirmModal } from '@grafana/ui'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx index 0098e8eb0af..5871e0ebf4c 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx @@ -1,4 +1,4 @@ -import { useId } from 'react'; +import { useId, type JSX } from 'react'; import { Stack, InlineField, Input, Select, TextArea } from '@grafana/ui'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx index 7123f816f22..7df491257d2 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { SelectableValue } from '@grafana/data'; import { unwrap } from '../utils/unwrap'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx index 6bf005185f4..b88cb6d1bc6 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx @@ -1,4 +1,5 @@ import { cx } from '@emotion/css'; +import type { JSX } from 'react'; import { Select } from '@grafana/ui'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx index 153ec2aa039..b0dd96e711c 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { AccessoryButton } from '@grafana/plugin-ui'; import { DEFAULT_POLICY } from '../../../../../types'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx index 98c4ebf30ac..11deca0c8fe 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx @@ -1,4 +1,5 @@ import { cx } from '@emotion/css'; +import type { JSX } from 'react'; import { Input } from '@grafana/ui'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx index eab1943a4ea..d2a18d280f7 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx @@ -1,4 +1,5 @@ import { cx } from '@emotion/css'; +import type { JSX } from 'react'; import { SelectableValue } from '@grafana/data'; import { Select } from '@grafana/ui'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx index 14f188bd683..b02fdeeafa2 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import { Fragment, useMemo } from 'react'; +import { Fragment, useMemo, type JSX } from 'react'; import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { AccessoryButton } from '@grafana/plugin-ui'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx index 47b24fcecf6..2adae762b4e 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx @@ -1,6 +1,6 @@ import { css, cx } from '@emotion/css'; import debouncePromise from 'debounce-promise'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, type JSX } from 'react'; import { useAsyncFn } from 'react-use'; import { SelectableValue } from '@grafana/data'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx index 3edc8320144..ec7a138b590 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { SelectableValue } from '@grafana/data'; import { AccessoryButton } from '@grafana/plugin-ui'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx index 837a56b85e4..ce6e52fde97 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx @@ -1,4 +1,5 @@ import { render, waitFor } from '@testing-library/react'; +import type { JSX } from 'react'; import InfluxDatasource from '../../../../../datasource'; import { getMockInfluxDS, getMockDSInstanceSettings } from '../../../../../mocks/datasource'; diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx index ddc3f82cbb9..ac1a4a8dea6 100644 --- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { useId, useMemo } from 'react'; +import { useId, useMemo, type JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui'; diff --git a/public/app/plugins/datasource/mssql/types.ts b/public/app/plugins/datasource/mssql/types.ts index 22066dcdd03..c4ed9763cec 100644 --- a/public/app/plugins/datasource/mssql/types.ts +++ b/public/app/plugins/datasource/mssql/types.ts @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { AzureCredentials } from '@grafana/azure-sdk'; import { SQLOptions } from '@grafana/sql'; import { HttpSettingsBaseProps } from '@grafana/ui/internal'; diff --git a/public/app/plugins/datasource/prometheus/configuration/ConfigEditorPackage.tsx b/public/app/plugins/datasource/prometheus/configuration/ConfigEditorPackage.tsx index 68140a80e68..a5bfccd9d23 100644 --- a/public/app/plugins/datasource/prometheus/configuration/ConfigEditorPackage.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/ConfigEditorPackage.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import type { JSX } from 'react'; import { SIGV4ConnectionConfig } from '@grafana/aws-sdk'; import { hasCredentials } from '@grafana/azure-sdk'; diff --git a/public/app/plugins/panel/annolist/AnnoListPanel.tsx b/public/app/plugins/panel/annolist/AnnoListPanel.tsx index de0baf6f375..77dbc76feb3 100644 --- a/public/app/plugins/panel/annolist/AnnoListPanel.tsx +++ b/public/app/plugins/panel/annolist/AnnoListPanel.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { createRef, PureComponent } from 'react'; +import { createRef, PureComponent, type JSX } from 'react'; import { Subscription } from 'rxjs'; import { diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx index 0c59c7905c1..d8714fd8f4a 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx @@ -1,5 +1,5 @@ import { isNumber } from 'lodash'; -import { PureComponent } from 'react'; +import { PureComponent, type JSX } from 'react'; import { DisplayProcessor, diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index 2d8eb4c9610..3ae1988e30a 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -1,4 +1,4 @@ -import { PureComponent } from 'react'; +import { PureComponent, type JSX } from 'react'; import { FieldDisplay, getDisplayProcessor, getFieldDisplayValues, PanelProps } from '@grafana/data'; import { BarGaugeSizing, VizOrientation } from '@grafana/schema'; diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx index 191e503fd90..3cf47744762 100644 --- a/public/app/plugins/panel/logs/LogsPanel.tsx +++ b/public/app/plugins/panel/logs/LogsPanel.tsx @@ -576,7 +576,9 @@ export const LogsPanel = ({ onMouseLeave={onLogContainerMouseLeave} className={style.logListContainer} style={height ? { minHeight: height } : undefined} - ref={(element: HTMLDivElement) => setScrollElement(element)} + ref={(element: HTMLDivElement) => { + setScrollElement(element); + }} > {deduplicatedRows.length > 0 && scrollElement && ( )} {!config.featureToggles.newLogsPanel && !showControls && ( - setScrollElement(scrollElement)}> + { + setScrollElement(scrollElement); + }} + >
{showCommonLabels && !isAscending && renderCommonLabels()} {showCommonLabels && !isAscending && renderCommonLabels()} setScrollElement(scrollElement)} + ref={(scrollElement: HTMLDivElement | null) => { + setScrollElement(scrollElement); + }} visualisationType="logs" loading={infiniteScrolling} loadMoreLogs={enableInfiniteScrolling ? loadMoreLogs : undefined} diff --git a/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx b/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx index ee727b4f79b..48f871a3a10 100644 --- a/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx +++ b/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { memo } from 'react'; +import { memo, type JSX } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; diff --git a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx index 65daef5aeda..8ab331cfb3d 100644 --- a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx +++ b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { MouseEvent, useCallback, useState } from 'react'; +import { MouseEvent, useCallback, useState, type JSX } from 'react'; import * as React from 'react'; import { DataFrame, Field, GrafanaTheme2, LinkModel, LinkTarget } from '@grafana/data'; diff --git a/public/app/plugins/panel/radialbar/RadialBarPanel.tsx b/public/app/plugins/panel/radialbar/RadialBarPanel.tsx index c176b650c24..decd084f375 100644 --- a/public/app/plugins/panel/radialbar/RadialBarPanel.tsx +++ b/public/app/plugins/panel/radialbar/RadialBarPanel.tsx @@ -1,3 +1,5 @@ +import type { JSX } from 'react'; + import { DisplayValueAlignmentFactors, FieldDisplay, diff --git a/public/app/plugins/panel/stat/StatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx index 055fc4adc93..40df4acb9eb 100644 --- a/public/app/plugins/panel/stat/StatPanel.tsx +++ b/public/app/plugins/panel/stat/StatPanel.tsx @@ -1,5 +1,5 @@ import { isNumber } from 'lodash'; -import { memo, useCallback } from 'react'; +import { memo, useCallback, type JSX } from 'react'; import { DisplayValueAlignmentFactors, diff --git a/public/app/routes/RoutesWrapper.tsx b/public/app/routes/RoutesWrapper.tsx index dafa5b000c5..2c36d7571f9 100644 --- a/public/app/routes/RoutesWrapper.tsx +++ b/public/app/routes/RoutesWrapper.tsx @@ -1,4 +1,4 @@ -import { ComponentType, ReactNode } from 'react'; +import { ComponentType, ReactNode, type JSX } from 'react'; import { Router } from 'react-router-dom'; import { CompatRouter } from 'react-router-dom-v5-compat';