diff --git a/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx b/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx
index c53e92ecfaf..65f8d6e3a4c 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
import { QueryEditorHelpProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
index 19baaac47dd..02943e876ef 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
index f6cc8bb34ab..8036ae966f6 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { Field, Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.test.tsx
index 0c5307889cc..7080338a93b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { select } from 'react-select-event';
import { GraphPeriod, Props } from './GraphPeriod';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
index 754fb5cb99a..13dd8e3d201 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental';
import { HorizontalGroup, Switch } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.test.tsx
index 7d3bfe885aa..7342a9b0388 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { openMenu, select } from 'react-select-event';
import { createMockTimeSeriesList } from '../__mocks__/cloudMonitoringQuery';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
index 70dc93a0a43..d9fd0e4c70c 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.test.tsx
index 786f8fc6c5e..1171790342b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { openMenu, select } from 'react-select-event';
import { LabelFilter } from './LabelFilter';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
index 414f29cb62b..102bc22ef2f 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorField, EditorList, EditorRow } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx
index fcdfaaf2f07..0e7d991327a 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MQLQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MQLQueryEditor.tsx
index 6c2c635bb1e..d150565c7d5 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MQLQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MQLQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
import { TextArea } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
index b3975ad9438..187481ca913 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
@@ -1,6 +1,5 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { openMenu } from 'react-select-event';
import { getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
index 846ee57fb08..8a245c46503 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
+import * as React from 'react';
import { SelectableValue, TimeRange } from '@grafana/data';
import { EditorRows, Stack } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx b/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx
index 73a2fedb4f2..20860afe3d0 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/PeriodSelect.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.test.tsx
index 037a375b323..aa6b89d4228 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { CustomVariableModel } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx
index a572bff024a..c7f6c66d355 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
index a36b41f2cd2..de42fbdd788 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/PromQLEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/PromQLEditor.tsx
index 79e81617e25..8e54fbe372c 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/PromQLEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/PromQLEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx
index 91380a13173..cd3bb5d9668 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, waitFor, screen } from '@testing-library/react';
-import React from 'react';
import { select } from 'react-select-event';
import { createMockDatasource } from '../__mocks__/cloudMonitoringDatasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
index a6104921f34..9464e273ea2 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -1,6 +1,6 @@
import deepEqual from 'fast-deep-equal';
import { isEqual } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { QueryEditorProps, getDefaultTimeRange, toOption } from '@grafana/data';
import { EditorRows } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.test.tsx
index e7853a0cca3..3dfbe2c2bab 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import { openMenu, select } from 'react-select-event';
import { createMockQuery } from '../__mocks__/cloudMonitoringQuery';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx
index ca4f36d6844..150bb3c1f1f 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { EditorHeader, FlexItem, InlineSelect } from '@grafana/experimental';
import { QUERY_TYPES } from '../constants';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx
index ccb4696bee2..2e0117cfe70 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx
index af753ae72df..0d62b1cff1e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx
@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import * as React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx
index 9790fb6480e..5c59741acd4 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
import { Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx
index ad86d792776..35093b92a7b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.test.tsx
index 814c30f689e..2290e4e9417 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.test.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-// @ts-ignore
import renderer from 'react-test-renderer';
import { VariableModel } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
index d8614ae7b26..0b7169ae2fd 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { getTemplateSrv } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx
index be768bad8e2..9a5ebfb76f1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx
@@ -1,6 +1,5 @@
import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { openMenu, select } from 'react-select-event';
import { CustomVariableModel, getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
index a5d57040047..0c420bbc547 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
@@ -1,7 +1,8 @@
import { css } from '@emotion/css';
import debounce from 'debounce-promise';
import { startCase, uniqBy } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
import { GrafanaTheme2, SelectableValue, TimeRange } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloud-monitoring/tsconfig.json b/public/app/plugins/datasource/cloud-monitoring/tsconfig.json
index 7daf2ee8aba..baaaea04185 100644
--- a/public/app/plugins/datasource/cloud-monitoring/tsconfig.json
+++ b/public/app/plugins/datasource/cloud-monitoring/tsconfig.json
@@ -1,4 +1,7 @@
{
+ "compilerOptions": {
+ "jsx": "react-jsx"
+ },
"extends": "@grafana/plugin-configs/tsconfig.json",
"include": ["."]
}
diff --git a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.test.tsx
index e5b62bac9b0..e9bd97a82f9 100644
--- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
import '@testing-library/jest-dom';
import { QueryEditorProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.tsx
index cd8c3517e52..b3ef2901dae 100644
--- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor/AnnotationQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx b/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx
index f3f3155059a..91929e6bc6f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx
@@ -1,7 +1,7 @@
import { css, cx } from '@emotion/css';
import { stripIndent, stripIndents } from 'common-tags';
import Prism from 'prismjs';
-import React, { useState } from 'react';
+import { useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Collapse, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.test.tsx
index a83e5d70d5d..6f31669098f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.test.tsx
@@ -1,6 +1,5 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { AwsAuthType } from '@grafana/aws-sdk';
import { PluginContextProvider, PluginMeta, PluginMetaInfo, PluginType } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.tsx
index f6b551955da..2722ce628fa 100644
--- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { useDebounce } from 'react-use';
import { ConnectionConfig } from '@grafana/aws-sdk';
diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/SecureSocksProxySettingsNewStyling.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/SecureSocksProxySettingsNewStyling.tsx
index 0b034afc2bb..a70e01acd23 100644
--- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/SecureSocksProxySettingsNewStyling.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/SecureSocksProxySettingsNewStyling.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { ConfigSection } from '@grafana/experimental';
import { Field, Switch } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx
index f963a0547e3..c3c8bd677ea 100644
--- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { GrafanaTheme2, DataSourceInstanceSettings } from '@grafana/data';
import { ConfigSection } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/Errors/ThrottlingErrorMessage.tsx b/public/app/plugins/datasource/cloudwatch/components/Errors/ThrottlingErrorMessage.tsx
index 1e03ad21c90..7446472de2d 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Errors/ThrottlingErrorMessage.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Errors/ThrottlingErrorMessage.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
export interface Props {
region: string;
}
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetaInspector/MetaInspector.tsx b/public/app/plugins/datasource/cloudwatch/components/MetaInspector/MetaInspector.tsx
index 12ca89d98a2..7f837452ccf 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetaInspector/MetaInspector.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetaInspector/MetaInspector.tsx
@@ -1,5 +1,5 @@
import { groupBy } from 'lodash';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { MetadataInspectorProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.test.tsx
index d19f98a6e68..b070fb69a0e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.test.tsx
@@ -1,5 +1,4 @@
import { act, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
import { LoadingState } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.tsx
index f7087e70654..5d07b54aed5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/CloudWatchLink.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { usePrevious } from 'react-use';
import { PanelData } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx
index fd57a6f4587..2ed46ebd85e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { memo } from 'react';
+import { memo } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { InlineFormLabel } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx
index 9a9865b49b6..2527565821e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryField.tsx
@@ -1,5 +1,5 @@
import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
-import React, { ReactNode, useCallback, useRef } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { CodeEditor, Monaco, Themeable2, withTheme2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx
index 7c5f9198825..b7f62593057 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx
@@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css';
import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
-import React, { useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
import { CodeEditor, getInputStyles, Monaco, useTheme2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MathExpressionQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MathExpressionQueryField.tsx
index 5ac7ca8e226..6005caba145 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MathExpressionQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MathExpressionQueryField.tsx
@@ -1,5 +1,6 @@
import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
-import React, { useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
+import * as React from 'react';
import { CodeEditor, Monaco } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx
index 0be9d041cf2..4b9d5cc4cd1 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import selectEvent from 'react-select-event';
import { CustomVariableModel, DataSourceInstanceSettings } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx
index e4a7404989f..6798f650186 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -1,4 +1,5 @@
-import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
import { QueryEditorProps, SelectableValue } from '@grafana/data';
import { EditorField, EditorRow, InlineSelect } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.test.tsx
index bfd11f2bc85..93292e51212 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
import { setupMockedDataSource } from '../../../../__mocks__/CloudWatchDataSource';
import { QueryEditorExpressionType, QueryEditorPropertyType } from '../../../../expressions';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.tsx
index 9191fbe0abf..beefe48b358 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderEditor.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
import { Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.test.tsx
index 8c2c7f74366..fc8178311b0 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.test.tsx
@@ -1,5 +1,4 @@
import { act, render, screen } from '@testing-library/react';
-import React from 'react';
import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
import { setupMockedDataSource } from '../../../../__mocks__/CloudWatchDataSource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.tsx
index d22070a9279..859031eec9a 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLBuilderSelectRow.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLFilter.tsx
index 6c4cfc48706..5d6794e62fd 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLFilter.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
import { useAsyncFn } from 'react-use';
import { SelectableValue, toOption } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.test.tsx
index dcd2bd57f82..388fe8722c6 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.test.tsx
@@ -1,6 +1,5 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import selectEvent from 'react-select-event';
import { setupMockedDataSource } from '../../../../__mocks__/CloudWatchDataSource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.tsx
index 72fa72a2316..359b896ad88 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLGroupBy.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLOrderByGroup.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLOrderByGroup.tsx
index 62891e19caf..2afeb342179 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLOrderByGroup.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/SQLOrderByGroup.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue, toOption } from '@grafana/data';
import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
import { Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLCodeEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLCodeEditor.tsx
index 6fb14be0da3..ef09a74f47c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLCodeEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLCodeEditor.tsx
@@ -1,5 +1,5 @@
import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
import { CodeEditor, Monaco } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx
index 0027ecbb75d..7e5f2bbe9e5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { QueryEditorProps } from '@grafana/data';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.tsx
index 7810e357a5b..90c4ff21a43 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 React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.test.tsx
index 3b5c309d13a..6c35f4d49dd 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.test.tsx
@@ -1,5 +1,4 @@
import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
import selectEvent from 'react-select-event';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx
index 4e0dff5e540..7e77f93b4a5 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryHeader.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { CoreApp, LoadingState, QueryEditorProps, SelectableValue } from '@grafana/data';
import { EditorHeader, InlineSelect, FlexItem } from '@grafana/experimental';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
index 9f93308e595..b14051880fc 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
@@ -1,6 +1,5 @@
import { fireEvent, render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
index 94668e1f9cf..00525820fd8 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
@@ -1,5 +1,5 @@
import { isEqual } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { EditorList } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
index f9480b4802c..ed73928d4ee 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
-import React, { useState } from 'react';
+import { useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { AccessoryButton, InputGroup } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
index d91dca40a29..9f5c19be7b6 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
@@ -1,6 +1,5 @@
import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { select } from 'react-select-event';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
index 7d4eb75a70a..e554875ba23 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { QueryEditorProps, SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
index 6ab887cefba..eb1399ce9c9 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
index d01ebb82a6b..4313f440275 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import { EditorField } from '@grafana/experimental';
import { InlineField, Input, PopoverContent } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/Account.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/Account.test.tsx
index e2803524fd1..c2e420e21b1 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/Account.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/Account.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import selectEvent from 'react-select-event';
import { Account } from './Account';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/Account.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/Account.tsx
index 57cde6ac83a..8078e752db1 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/Account.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/Account.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.test.tsx
index 846d7209a58..ee39afba589 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.test.tsx
@@ -1,6 +1,5 @@
import { fireEvent, render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { setupMockedDataSource } from '../../../__mocks__/CloudWatchDataSource';
import { CloudWatchMetricsQuery } from '../../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.tsx
index 3909df54d84..b182714c4d8 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/Dimensions.tsx
@@ -1,5 +1,5 @@
import { isEqual } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
import { EditorList } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.test.tsx
index 1ab3a166774..9ea8123bd2b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { setupMockedDataSource } from '../../../__mocks__/CloudWatchDataSource';
import { CloudWatchMetricsQuery } from '../../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.tsx
index 0610240aef8..f264c93cbcd 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.tsx
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { useAsyncFn } from 'react-use';
import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx
index 020e123b9dd..e4ee31d6c50 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { CloudWatchDatasource } from '../../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupSelector.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupSelector.tsx
index 8204ef25ca1..5b66c048f61 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupSelector.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupSelector.tsx
@@ -1,5 +1,6 @@
import { debounce, unionBy } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
import { AppEvents, SelectableValue, toOption } from '@grafana/data';
import { getAppEvents } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.test.tsx
index b3cf4e2a489..6bf4154d9ac 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.test.tsx
@@ -1,7 +1,6 @@
import { render, screen, waitFor } from '@testing-library/react';
// eslint-disable-next-line lodash/import-scope
import lodash from 'lodash';
-import React from 'react';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.tsx
index 6d97836822b..d904873cd0b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsField.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.test.tsx
index 4f69b4dc33e..80d82444cfa 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.test.tsx
@@ -2,7 +2,6 @@ import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// eslint-disable-next-line lodash/import-scope
import lodash from 'lodash';
-import React from 'react';
import selectEvent from 'react-select-event';
import { ResourceResponse, LogGroupResponse } from '../../../resources/types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.tsx
index d1720065ddd..63365a150b1 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LogGroupsSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.test.tsx
index 43443dfaa90..1a14e5f0092 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.test.tsx
@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// eslint-disable-next-line lodash/import-scope
import lodash from 'lodash';
-import React from 'react';
import Search from './Search';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.tsx
index a7af3070bf3..25dc5bd762a 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/Search.tsx
@@ -1,5 +1,5 @@
import { debounce } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { Icon, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.test.tsx
index 540a6545c9f..7ad0fea4ec4 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.test.tsx
@@ -1,6 +1,5 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { LogGroup } from '../../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.tsx
index 83a5a3c63ab..e1c20db7f50 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/SelectedLogGroups.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { Button, ConfirmModal, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.test.tsx
index 0dee6c581aa..a88b4f4fd61 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.test.tsx
@@ -1,6 +1,5 @@
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import selectEvent from 'react-select-event';
import { config } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.tsx
index 237d83fccd2..9f9ecd45fdf 100644
--- a/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/MetricStatEditor.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import * as React from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/cloudwatch/query-runner/CloudWatchMetricsQueryRunner.ts b/public/app/plugins/datasource/cloudwatch/query-runner/CloudWatchMetricsQueryRunner.ts
index 44088ce2868..3fc10803226 100644
--- a/public/app/plugins/datasource/cloudwatch/query-runner/CloudWatchMetricsQueryRunner.ts
+++ b/public/app/plugins/datasource/cloudwatch/query-runner/CloudWatchMetricsQueryRunner.ts
@@ -1,5 +1,5 @@
import { isEmpty } from 'lodash';
-import React from 'react';
+import { createElement } from 'react';
import { catchError, map, Observable, of } from 'rxjs';
import {
@@ -34,7 +34,7 @@ const displayAlert = (datasourceName: string, region: string) =>
`CloudWatch request limit reached in ${region} for data source ${datasourceName}`,
'',
undefined,
- React.createElement(ThrottlingErrorMessage, { region }, null),
+ createElement(ThrottlingErrorMessage, { region }, null),
],
});
diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx
index ca9d18c71c1..1798a6c1ae4 100644
--- a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { getDefaultTimeRange, LoadingState } from '@grafana/data';
import { setDataSourceSrv } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
index fca4811b291..073cb173dd8 100644
--- a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
+++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
@@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import { useId } from '@react-aria/utils';
import pluralize from 'pluralize';
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
import { useAsync } from 'react-use';
import { DataQuery, GrafanaTheme2, SelectableValue, DataTopic, QueryEditorProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/AddRemove.test.tsx b/public/app/plugins/datasource/elasticsearch/components/AddRemove.test.tsx
index d968f58eb72..156cd81c904 100644
--- a/public/app/plugins/datasource/elasticsearch/components/AddRemove.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/AddRemove.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import { AddRemove } from './AddRemove';
diff --git a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx b/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
index 288ef03c1f1..a353e3e4edb 100644
--- a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { Button } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx b/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
index edd720f764a..b8a175408d7 100644
--- a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
@@ -1,5 +1,4 @@
import { css, cx } from '@emotion/css';
-import React from 'react';
import { SelectableValue } from '@grafana/data';
import { Segment } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
index 3411b611647..6743f8bb62c 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { AnnotationQuery } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental';
import { Input, Stack } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx
index ae1963dd9f8..4b9910e2c7a 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { InlineSegmentGroup, Segment, SegmentAsync } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.test.tsx
index 52b45832fbf..76cd65f3880 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import { select } from 'react-select-event';
import { useDispatch } from '../../../../hooks/useStatelessReducer';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
index 52a3081ac19..5ea427c3984 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
@@ -1,5 +1,5 @@
import { uniqueId } from 'lodash';
-import React, { useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
import { GroupBase, OptionsOrGroups } from 'react-select';
import { InternalTimeZones, SelectableValue } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
index ef6a38bda57..de91aadb3f7 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { uniqueId } from 'lodash';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
import { InlineField, Input, QueryField } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.test.tsx
index 97442a66f35..bbc46703aaa 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.test.tsx
@@ -1,5 +1,4 @@
import { screen } from '@testing-library/react';
-import React from 'react';
import selectEvent from 'react-select-event';
import { renderWithESProvider } from '../../../../test-helpers/render';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
index 7b005941ab8..e6292c75396 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
@@ -1,5 +1,5 @@
import { uniqueId } from 'lodash';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
import { SelectableValue } from '@grafana/data';
import { InlineField, Select, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
index eb3e650d73f..b46778d39d9 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
@@ -1,5 +1,5 @@
import { uniqueId } from 'lodash';
-import React, { ComponentProps, useRef } from 'react';
+import { ComponentProps, useRef } from 'react';
import { InlineField, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx
index dfd631f3c59..83578fc33b4 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { Button } from '@grafana/ui';
import { useDispatch } from '../../../hooks/useStatelessReducer';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx
index 1ba546ccac2..15bdaf6a53d 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx
@@ -1,6 +1,6 @@
import { render } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
import { getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx
index 6c41d99a18f..b2fd49cde44 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx
@@ -1,4 +1,4 @@
-import React, { Context, createContext, PropsWithChildren, useCallback, useContext, useEffect, useState } from 'react';
+import { Context, createContext, PropsWithChildren, useCallback, useContext, useEffect, useState } from 'react';
import { TimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx
index 81a21af4652..64130e3ff26 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx
@@ -1,6 +1,6 @@
import { act, fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
import { from } from 'rxjs';
import { getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
index a520ae0fbbe..52a9c01617f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
@@ -1,5 +1,5 @@
import { cx } from '@emotion/css';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
import { satisfies, SemVer } from 'semver';
import { SelectableValue } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
index 4f8a9ebfdf8..91b148b6f67 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { uniqueId } from 'lodash';
-import React, { Fragment, useEffect } from 'react';
+import { Fragment, useEffect } from 'react';
import { Input, InlineLabel } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
index b8f5a94cdda..ac4aa676fd5 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
@@ -1,5 +1,6 @@
import { uniqueId } from 'lodash';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
+import * as React from 'react';
import { Input, InlineField, Select, InlineSwitch } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx
index 5a0d48924c1..cefb32fd682 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx
@@ -1,5 +1,5 @@
import { uniqueId } from 'lodash';
-import React, { ComponentProps, useState } from 'react';
+import { ComponentProps, useState } from 'react';
import { InlineField, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
index 3c5bdba15d1..51da99bac0a 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { SelectableValue } from '@grafana/data';
import { AsyncMultiSelect, InlineField, SegmentAsync, Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx
index f3753a70540..f8b18d13388 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx
@@ -1,5 +1,4 @@
import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
import { getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
index 83f8338903f..be8246fc0cc 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
@@ -1,5 +1,6 @@
import { uniqueId } from 'lodash';
-import React, { ComponentProps, useId, useRef, useState } from 'react';
+import { ComponentProps, useId, useRef, useState } from 'react';
+import * as React from 'react';
import { InlineField, Input, InlineSwitch, Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx
index 982202be9f1..cc4901eb1d1 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { Alert, Button } from '@grafana/ui';
import { useDispatch } from '../../../hooks/useStatelessReducer';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
index 297c8372625..76ba289ae4d 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { noop } from 'lodash';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorSpecialMetricRow.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorSpecialMetricRow.tsx
index 6820e012391..ccd8ba1ffe4 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorSpecialMetricRow.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorSpecialMetricRow.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { InlineFieldRow, InlineLabel, InlineSegmentGroup } from '@grafana/ui';
import { MetricAggregation } from '../../types';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryTypeSelector.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryTypeSelector.tsx
index 7dfa3fd2ec6..695237f706f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryTypeSelector.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryTypeSelector.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { RadioButtonGroup } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
index f9ec8a44278..47994ccd111 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
-import React, { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, InlineSegmentGroup, useTheme2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx
index 67c19e51607..0a5f34abba5 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.test.tsx
@@ -1,5 +1,4 @@
import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
import { ElasticDatasource } from '../../datasource';
import { ElasticsearchQuery } from '../../types';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
index d9e8ab5f80f..135734cb4f2 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
import { SemVer } from 'semver';
import { getDefaultTimeRange, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx b/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
index bd4d1acd91c..a95a1b5eb0e 100644
--- a/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { Select, InlineField } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx
index 8438017aa40..b6183ea3a16 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import { ConfigEditor } from './ConfigEditor';
import { createDefaultConfigOptions } from './__mocks__/configOptions';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
index 1dc4aa84780..64342c5b6f6 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
index da2c231ad13..f3ddb9f8e87 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
@@ -1,5 +1,6 @@
import { css } from '@emotion/css';
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import * as React from 'react';
import { usePrevious } from 'react-use';
import { DataSourceInstanceSettings, VariableSuggestion } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx
index a623d68e822..57656fc51ba 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { DataLinkConfig } from '../types';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
index ed340f5c044..ce1740bc8f6 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.test.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.test.tsx
index 0b7af77201d..23d2d8def31 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import selectEvent from 'react-select-event';
import { ElasticDetails } from './ElasticDetails';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
index 4b8707e465e..2a99429238b 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
import { DataSourceSettings, SelectableValue } from '@grafana/data';
import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.test.tsx b/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.test.tsx
index 97d3d130398..40e707b7ad4 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.test.tsx
@@ -1,5 +1,4 @@
import { render, screen, fireEvent } from '@testing-library/react';
-import React from 'react';
import { LogsConfig } from './LogsConfig';
import { createDefaultConfigOptions } from './__mocks__/configOptions';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.tsx b/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.tsx
index 3289d2fd90a..b5b5ab3006f 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
import { Input, InlineField } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx b/public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx
index d977e5f4dec..5751aa51acd 100644
--- a/public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx
@@ -1,5 +1,5 @@
import { renderHook } from '@testing-library/react';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
import { from } from 'rxjs';
import { getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx b/public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx
index 881d1030d73..e37c4d1e2bc 100644
--- a/public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx
@@ -1,5 +1,5 @@
import { renderHook } from '@testing-library/react';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
import { getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx b/public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx
index 509f027d696..80d4c73e093 100644
--- a/public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx
@@ -1,5 +1,5 @@
import { renderHook } from '@testing-library/react-hooks';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
import { useStatelessReducer, useDispatch, DispatchContext, combineReducers } from './useStatelessReducer';
diff --git a/public/app/plugins/datasource/elasticsearch/test-helpers/render.tsx b/public/app/plugins/datasource/elasticsearch/test-helpers/render.tsx
index 236f8e65c11..85daa974d9e 100644
--- a/public/app/plugins/datasource/elasticsearch/test-helpers/render.tsx
+++ b/public/app/plugins/datasource/elasticsearch/test-helpers/render.tsx
@@ -1,5 +1,5 @@
import { render } from '@testing-library/react';
-import React, { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
import { getDefaultTimeRange } from '@grafana/data';
diff --git a/public/app/plugins/datasource/grafana-postgresql-datasource/CheatSheet.tsx b/public/app/plugins/datasource/grafana-postgresql-datasource/CheatSheet.tsx
index 8608b33cd81..c3ade177b74 100644
--- a/public/app/plugins/datasource/grafana-postgresql-datasource/CheatSheet.tsx
+++ b/public/app/plugins/datasource/grafana-postgresql-datasource/CheatSheet.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-postgresql-datasource/PostgresQueryEditor.tsx b/public/app/plugins/datasource/grafana-postgresql-datasource/PostgresQueryEditor.tsx
index f1fa982ae93..22bcc5f041c 100644
--- a/public/app/plugins/datasource/grafana-postgresql-datasource/PostgresQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-postgresql-datasource/PostgresQueryEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { QueryEditorProps } from '@grafana/data';
import { SqlQueryEditor, SQLOptions, SQLQuery, QueryHeaderProps } from '@grafana/sql';
diff --git a/public/app/plugins/datasource/grafana-postgresql-datasource/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/grafana-postgresql-datasource/configuration/ConfigurationEditor.tsx
index 8acacf21633..3c1d5da4e40 100644
--- a/public/app/plugins/datasource/grafana-postgresql-datasource/configuration/ConfigurationEditor.tsx
+++ b/public/app/plugins/datasource/grafana-postgresql-datasource/configuration/ConfigurationEditor.tsx
@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
import {
DataSourcePluginOptionsEditorProps,
diff --git a/public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json b/public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json
index 7daf2ee8aba..1690bc6f49f 100644
--- a/public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json
+++ b/public/app/plugins/datasource/grafana-postgresql-datasource/tsconfig.json
@@ -1,4 +1,5 @@
{
+ "jsx": "react-jsx",
"extends": "@grafana/plugin-configs/tsconfig.json",
"include": ["."]
}
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
index 1ecbab4d42b..af6467d7896 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
import {
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx
index 56007cac05b..dd5b27f56c1 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx
@@ -1,5 +1,6 @@
import { css } from '@emotion/css';
-import React, { ComponentProps } from 'react';
+import { ComponentProps } from 'react';
+import * as React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Field, Icon, PopoverContent, ReactUtils, Tooltip, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx
index 5fe10a24999..a45add59216 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRow.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React from 'react';
+import * as React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRows.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRows.tsx
index ce7e38c112a..de79a2b079c 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRows.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorRows.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
import { Stack } from './Stack';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
index 6c7cee86081..e8e99208811 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
import { useAsync, useLatest } from 'react-use';
import { CodeEditor, Monaco, useStyles2, monacoTypes } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/ProfileTypesCascader.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/ProfileTypesCascader.tsx
index fd21bb71585..f207d6eb4eb 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/ProfileTypesCascader.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/ProfileTypesCascader.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { TimeRange } from '@grafana/data';
import { Cascader, CascaderOption } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.test.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.test.tsx
index 1f1b89830ec..1c5b2b273cf 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.test.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { CoreApp, PluginType } from '@grafana/data';
import { setPluginExtensionsHook } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx
index c62defc81ce..9d50180d538 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryEditor.tsx
@@ -1,6 +1,6 @@
import deepEqual from 'fast-deep-equal';
import { debounce } from 'lodash';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import { CoreApp, QueryEditorProps, TimeRange } from '@grafana/data';
import { LoadingPlaceholder } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptionGroup.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptionGroup.tsx
index dfd42c81bf5..c6c3dad3719 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptionGroup.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptionGroup.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React from 'react';
+import * as React from 'react';
import { useToggle } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx
index 7db169674b8..0aea051512f 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React from 'react';
+import * as React from 'react';
import { CoreApp, GrafanaTheme2, SelectableValue } from '@grafana/data';
import { useStyles2, RadioButtonGroup, MultiSelect, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/Stack.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/Stack.tsx
index 51ba00444c9..483af932c05 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/Stack.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/Stack.tsx
@@ -1,5 +1,6 @@
import { css } from '@emotion/css';
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
+import * as React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.test.tsx
index 4442512e00c..d11bbde8bbd 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import { DataSourceInstanceSettings } from '@grafana/data';
import { getTemplateSrv } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.tsx
index 27f4b2d085c..bf25fa7cda0 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/VariableQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { QueryEditorProps, SelectableValue, TimeRange } from '@grafana/data';
import { InlineField, InlineFieldRow, LoadingPlaceholder, Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/tsconfig.json b/public/app/plugins/datasource/grafana-pyroscope-datasource/tsconfig.json
index 7daf2ee8aba..baaaea04185 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/tsconfig.json
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/tsconfig.json
@@ -1,4 +1,7 @@
{
+ "compilerOptions": {
+ "jsx": "react-jsx"
+ },
"extends": "@grafana/plugin-configs/tsconfig.json",
"include": ["."]
}
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/ConfigEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/ConfigEditor.tsx
index 9c78b849d9b..bfc85938fd9 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/ConfigEditor.tsx
@@ -1,5 +1,5 @@
// Libraries
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/MetaDataInspector.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/MetaDataInspector.tsx
index 3ebf7248ef6..e9bc66cd777 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/MetaDataInspector.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/MetaDataInspector.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { MetadataInspectorProps } from '@grafana/data';
import { Stack } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx
index b4b0e8e8b8d..6c78486696b 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx
@@ -1,6 +1,5 @@
import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import React from 'react';
import { selectors } from '@grafana/e2e-selectors';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.tsx
index eb684d5abac..8c4e6599073 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent, useMemo } from 'react';
+import { FormEvent, useMemo } from 'react';
import { useAsync } from 'react-use';
import { QueryEditorProps, SelectableValue } from '@grafana/data';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/TestInfoTab.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/TestInfoTab.tsx
index 5ab58f4f621..1472eed8615 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/TestInfoTab.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/TestInfoTab.tsx
@@ -1,5 +1,5 @@
// Libraries
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
import { PluginConfigPageProps, DataSourcePluginMeta, DataSourceJsonData } from '@grafana/data';
import { LinkButton } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVContentEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVContentEditor.tsx
index aa6c2f85c72..1ad102b9dc3 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVContentEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVContentEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { CodeEditor } from '@grafana/ui';
import { EditorProps } from '../QueryEditor';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVFileEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVFileEditor.tsx
index 0ae69bd7b0c..c386602010f 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVFileEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVFileEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVWaveEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVWaveEditor.tsx
index 5635dd77007..20dcb00bdd8 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVWaveEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/CSVWaveEditor.tsx
@@ -1,4 +1,5 @@
-import React, { PureComponent, useState } from 'react';
+import { PureComponent, useState } from 'react';
+import * as React from 'react';
import { Button, InlineField, InlineFieldRow, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/ErrorEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/ErrorEditor.tsx
index bdf61946809..921a6e952c7 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/ErrorEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/ErrorEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
import { EditorProps } from '../QueryEditor';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/GrafanaLiveEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/GrafanaLiveEditor.tsx
index ab4c6bff3f1..b76607cf711 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/GrafanaLiveEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/GrafanaLiveEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/NodeGraphEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/NodeGraphEditor.tsx
index 6c09214a47f..5a6f7a11b60 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/NodeGraphEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/NodeGraphEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { Input, InlineFieldRow, InlineField, Select } from '@grafana/ui';
import { NodesQuery, TestDataDataQuery } from '../dataquery';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/PredictablePulseEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/PredictablePulseEditor.tsx
index 1cfab8b3a68..661dc5b3bc9 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/PredictablePulseEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/PredictablePulseEditor.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/RandomWalkEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/RandomWalkEditor.tsx
index 364b326b38a..0bdcc29f0c1 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/RandomWalkEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/RandomWalkEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { selectors } from '@grafana/e2e-selectors';
import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/RawFrameEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/RawFrameEditor.tsx
index 7eea237857c..faa2fb766e6 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/RawFrameEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/RawFrameEditor.tsx
@@ -1,5 +1,5 @@
import { isArray } from 'lodash';
-import React, { useState } from 'react';
+import { useState } from 'react';
import { dataFrameToJSON, toDataFrame, toDataFrameDTO } from '@grafana/data';
import { toDataQueryResponse } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationQueryEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationQueryEditor.tsx
index e7e889af97d..e808ceb6178 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent, useMemo, useState } from 'react';
+import { FormEvent, useMemo, useState } from 'react';
import { useAsync } from 'react-use';
import { DataFrameJSON, SelectableValue } from '@grafana/data';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx
index 7e33eb61eeb..fc9a9cec505 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { FormEvent, useState, ChangeEvent } from 'react';
+import { FormEvent, useState, ChangeEvent } from 'react';
import { DataFrameSchema, FieldSchema, GrafanaTheme2 } from '@grafana/data';
import { useStyles2, TextArea, InlineField, Input, FieldSet, InlineSwitch } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/StreamingClientEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/StreamingClientEditor.tsx
index 67474d9515b..bd0abd4912e 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/StreamingClientEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/StreamingClientEditor.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
import { SelectableValue } from '@grafana/data';
import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/USAQueryEditor.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/USAQueryEditor.tsx
index 8f4866bf8ce..6a8aa544efe 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/USAQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/USAQueryEditor.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SelectableValue } from '@grafana/data';
import { InlineFieldRow, InlineField, Select, MultiSelect, Input } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/tsconfig.json b/public/app/plugins/datasource/grafana-testdata-datasource/tsconfig.json
index 7daf2ee8aba..baaaea04185 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/tsconfig.json
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/tsconfig.json
@@ -1,4 +1,7 @@
{
+ "compilerOptions": {
+ "jsx": "react-jsx"
+ },
"extends": "@grafana/plugin-configs/tsconfig.json",
"include": ["."]
}
diff --git a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.test.tsx b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.test.tsx
index 63312c98faf..44daef9a607 100644
--- a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.test.tsx
@@ -1,5 +1,4 @@
import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
import { GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQueryType } from '../types';
diff --git a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
index 0894f13ab2b..2314ae6a2be 100644
--- a/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
@@ -1,5 +1,6 @@
import { css } from '@emotion/css';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import * as React from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Field, FieldSet, Select, Switch, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
index bd52ddabeaa..16707526820 100644
--- a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
@@ -1,6 +1,7 @@
import { css } from '@emotion/css';
import pluralize from 'pluralize';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
+import * as React from 'react';
import { DropEvent, FileRejection } from 'react-dropzone';
import {
diff --git a/public/app/plugins/datasource/grafana/components/SearchEditor.tsx b/public/app/plugins/datasource/grafana/components/SearchEditor.tsx
index dea22b8b22e..e5d102c8be4 100644
--- a/public/app/plugins/datasource/grafana/components/SearchEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/SearchEditor.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
import { InlineField, Input, InlineFieldRow, CodeEditor } from '@grafana/ui';
import { SearchQuery } from 'app/features/search/service';
diff --git a/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx b/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
index 6c735c45604..dbe88c64dd9 100644
--- a/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
+++ b/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
@@ -1,7 +1,6 @@
import { css, cx } from '@emotion/css';
import { Moment } from 'moment';
import TimePicker from 'rc-time-picker';
-import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { FormInputSize, Icon, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx b/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
index 41a106cc77d..2a7e10588ba 100644
--- a/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import moment, { Moment } from 'moment/moment';
-import React, { useState } from 'react';
+import { useState } from 'react';
import { getTimeZoneInfo, GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, Field, FieldSet, Select, Stack, TimeZonePicker, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
index 406d130e946..48477adfbba 100644
--- a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
+++ b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, Segment, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx b/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx
index e27c5afce7a..abe52b5b0de 100644
--- a/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { useState } from 'react';
+import { useState } from 'react';
import { GrafanaTheme2, QueryEditorProps } from '@grafana/data';
import { Box, InlineField, Input, TagsInput, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/graphite/components/FunctionEditor.test.tsx b/public/app/plugins/datasource/graphite/components/FunctionEditor.test.tsx
index b9a6d609919..25685df4fde 100644
--- a/public/app/plugins/datasource/graphite/components/FunctionEditor.test.tsx
+++ b/public/app/plugins/datasource/graphite/components/FunctionEditor.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from '@testing-library/react';
-import React from 'react';
import { FuncInstance } from '../gfunc';
diff --git a/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx b/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx
index 44ced255c2d..19212b9f304 100644
--- a/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React from 'react';
+import { memo } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Icon, Tooltip, useStyles2, type PopoverContent } from '@grafana/ui';
@@ -58,7 +58,7 @@ const FunctionEditor = ({ onMoveLeft, onMoveRight, func, ...props }: FunctionEdi
);
};
-const TooltipContent = React.memo(() => {
+const TooltipContent = memo(() => {
return (
This function is not supported. Check your function for typos and{' '}
diff --git a/public/app/plugins/datasource/graphite/components/FunctionEditorControls.tsx b/public/app/plugins/datasource/graphite/components/FunctionEditorControls.tsx
index d4d41da7206..18c4ba93c52 100644
--- a/public/app/plugins/datasource/graphite/components/FunctionEditorControls.tsx
+++ b/public/app/plugins/datasource/graphite/components/FunctionEditorControls.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
import { Icon, Tooltip } from '@grafana/ui';
@@ -10,7 +10,7 @@ export interface FunctionEditorControlsProps {
onRemove: (func: FuncInstance) => void;
}
-const FunctionDescription = React.lazy(async () => {
+const FunctionDescription = lazy(async () => {
return {
default(props: { description?: string }) {
return {props.description}
;
diff --git a/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx b/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx
index d3306f4aab9..dfaffe8fe93 100644
--- a/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/css';
-import React from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Segment, SegmentInput, useStyles2 } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx b/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx
index 0cbf5fb67a9..1db2a1471a2 100644
--- a/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/FunctionsSection.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { SegmentSection } from '@grafana/ui';
import { FuncDefs, FuncInstance } from '../gfunc';
diff --git a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
index 6132b92a604..78599d8bfc7 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
@@ -1,8 +1,8 @@
import { css, cx } from '@emotion/css';
-import React, { useState } from 'react';
+import { Fragment, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
-import { HorizontalGroup, InlineLabel, useStyles2 } from '@grafana/ui';
+import { Stack, InlineLabel, useStyles2 } from '@grafana/ui';
import { FuncInstance } from '../gfunc';
import { actions } from '../state/actions';
@@ -42,7 +42,7 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
onMouseOver={() => setIsMouseOver(true)}
onMouseOut={() => setIsMouseOver(false)}
>
-
+
{
@@ -55,10 +55,12 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
dispatch(actions.removeFunction({ func }));
}}
/>
- (
+
+ (
+
{params.map((editableParam: EditableParam, index: number) => {
return (
-
+
{index !== params.length - 1 ? ',' : ''}
-
+
);
})}
- )
-
+
+ )
+
+