React: Use new JSX transform (#88802)

* update eslint, tsconfig + esbuild to handle new jsx transform

* remove thing that breaks the new jsx transform

* remove react imports

* adjust grafana-icons build

* is this the correct syntax?

* try this

* well this was much easier than expected...

* change grafana-plugin-configs webpack config

* fixes

* fix lockfile

* fix 2 more violations

* use path.resolve instead of require.resolve

* remove react import

* fix react imports

* more fixes

* remove React import

* remove import React from docs

* remove another react import

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["@grafana/eslint-config"],
+  "extends": ["@grafana/eslint-config", "plugin:react/jsx-runtime"],
   "root": true,
   "plugins": ["@emotion", "lodash", "jest", "import", "jsx-a11y", "@grafana", "no-barrel-files"],
   "settings": {

contribute/style-guides/styling.md

@@ -13,7 +13,6 @@ To access the theme in your styles, use the `useStyles` hook. It provides basic
 > Please remember to put `getStyles` function at the end of the file!
 
 ```tsx
-import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
@@ -40,7 +39,6 @@ Let's say you need to style a component that has a different background dependin
 
 ```tsx
 import { css, cx } from '@emotion/css';
-import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

contribute/style-guides/testing.md

@@ -176,7 +176,6 @@ Here's how the test would look like for this [OrgPicker](https://github.com/graf
 ```tsx
 import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { OrgPicker } from './OrgPicker';
 

contribute/style-guides/themes.md

@@ -20,7 +20,7 @@ Here's how to use Grafana themes in React components.
 `useStyles2` memoizes the function and provides access to the theme.
 
 ```tsx
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
@@ -39,7 +39,7 @@ const getStyles = (theme: GrafanaTheme2) =>
 #### Get the theme object
 
 ```tsx
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { useTheme2 } from '@grafana/ui';
 
 const Foo: FC<FooProps> = () => {

packages/grafana-data/src/context/plugins/DataSourcePluginContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactElement, useMemo } from 'react';
+import { PropsWithChildren, ReactElement, useMemo } from 'react';
 
 import { DataSourceInstanceSettings } from '../../types';
 

packages/grafana-data/src/context/plugins/PluginContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 
 import { PluginMeta } from '../../types/plugin';
 

packages/grafana-data/src/panel/PanelPlugin.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { PanelOptionsEditorBuilder } from '..';
 import {
   identityOverrideProcessor,

packages/grafana-data/src/themes/context.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { createContext } from 'react';
 
 import { createTheme } from './createTheme';
 
 /** @public */
-export const ThemeContext = React.createContext(createTheme());
+export const ThemeContext = createContext(createTheme());
 
 ThemeContext.displayName = 'ThemeContext';

packages/grafana-data/src/transformations/standardTransformersRegistry.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { DataFrame, DataTransformerInfo } from '../types';
 import { Registry, RegistryItem } from '../utils/Registry';

packages/grafana-data/src/types/pluginExtensions.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { DataQuery, DataSourceJsonData } from '@grafana/schema';
 

packages/grafana-data/src/utils/LocalStorageValueProvider.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 
 import { store } from './store';
 

packages/grafana-data/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "declarationDir": "./compiled",
     "emitDeclarationOnly": true,
     "isolatedModules": true,

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
+import * as React from 'react';
 
 import { createDataFrame } from '@grafana/data';
 

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx

@@ -17,7 +17,8 @@
 // TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
 // THIS SOFTWARE.
 import { css, cx } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 
 import { Icon } from '@grafana/ui';
 

packages/grafana-flamegraph/src/FlameGraph/FlameGraphCanvas.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
-import React, { MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import { useMeasure } from 'react-use';
 
 import { PIXELS_PER_LEVEL } from '../constants';

packages/grafana-flamegraph/src/FlameGraph/FlameGraphContextMenu.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DataFrame } from '@grafana/data';
 import { MenuItem, MenuGroup, ContextMenu, IconName } from '@grafana/ui';
 

packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import * as React from 'react';
 
 import FlameGraphMetadata from './FlameGraphMetadata';
 import { textToDataContainer } from './testHelpers';

packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { ReactNode } from 'react';
+import { memo, ReactNode } from 'react';
 
 import { getValueFormat, GrafanaTheme2 } from '@grafana/data';
 import { Icon, IconButton, useStyles2 } from '@grafana/ui';
@@ -17,7 +17,7 @@ type Props = {
   sandwichedLabel?: string;
 };
 
-const FlameGraphMetadata = React.memo(
+const FlameGraphMetadata = memo(
   ({ data, focusedItem, totalTicks, sandwichedLabel, onFocusPillClick, onSandwichPillClick }: Props) => {
     const styles = useStyles2(getStyles);
     const parts: ReactNode[] = [];

packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx

@@ -1,5 +1,4 @@
 import { css } from '@emotion/css';
-import React from 'react';
 
 import { DisplayValue, getValueFormat, GrafanaTheme2 } from '@grafana/data';
 import { InteractiveTable, Portal, useStyles2, VizTooltipContainer } from '@grafana/ui';

packages/grafana-flamegraph/src/FlameGraphContainer.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 
 import { createDataFrame, createTheme } from '@grafana/data';
 
@@ -10,7 +10,7 @@ import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants';
 
 jest.mock('react-use', () => ({
   useMeasure: () => {
-    const ref = React.useRef();
+    const ref = useRef();
     return [ref, { width: 1600 }];
   },
 }));

packages/grafana-flamegraph/src/FlameGraphContainer.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 import uFuzzy from '@leeoniya/ufuzzy';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
 import { useMeasure } from 'react-use';
 
 import { DataFrame, GrafanaTheme2 } from '@grafana/data';

packages/grafana-flamegraph/src/FlameGraphHeader.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import * as React from 'react';
 
 import { CollapsedMap } from './FlameGraph/dataTransform';
 import FlameGraphHeader from './FlameGraphHeader';

packages/grafana-flamegraph/src/FlameGraphHeader.tsx

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import usePrevious from 'react-use/lib/usePrevious';
 

packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import userEvents from '@testing-library/user-event';
-import React from 'react';
 
 import { createDataFrame } from '@grafana/data';
 

packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import {
@@ -41,7 +41,7 @@ type Props = {
   colorScheme: ColorScheme | ColorSchemeDiff;
 };
 
-const FlameGraphTopTableContainer = React.memo(
+const FlameGraphTopTableContainer = memo(
   ({
     data,
     onSymbolClick,

packages/grafana-flamegraph/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "baseUrl": "./",
     "declarationDir": "./compiled",
     "emitDeclarationOnly": true,

packages/grafana-icons/src/IconBase.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import { SVGProps } from 'react';
 
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 

packages/grafana-icons/templates/icon.cjs

@@ -26,7 +26,7 @@ const comments = `
 // Run "yarn generate" to update.
 `;
 const imports = `
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { IconBase, IconProps } from '../IconBase';
 `;

packages/grafana-icons/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "baseUrl": "./",
     "declarationDir": "./compiled",
     "emitDeclarationOnly": true,
@@ -9,5 +10,5 @@
   },
   "exclude": ["dist/**/*"],
   "extends": "@grafana/tsconfig",
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.tsx"]
 }

packages/grafana-o11y-ds-frontend/src/IntervalInput/IntervalInput.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { invalidTimeShiftError } from '../TraceToLogs/TraceToLogsSettings';
 

packages/grafana-o11y-ds-frontend/src/IntervalInput/IntervalInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { InlineField, Input } from '@grafana/ui';

packages/grafana-o11y-ds-frontend/src/NodeGraph/NodeGraphSettings.tsx

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

packages/grafana-o11y-ds-frontend/src/SpanBar/SpanBarSettings.tsx

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

packages/grafana-o11y-ds-frontend/src/TemporaryAlert.test.tsx

@@ -1,5 +1,4 @@
 import { act, render, screen } from '@testing-library/react';
-import React from 'react';
 
 import { TemporaryAlert } from './TemporaryAlert';
 

packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Alert, AlertVariant, useTheme2 } from '@grafana/ui';

packages/grafana-o11y-ds-frontend/src/TraceToLogs/TagMappingInput.tsx

@@ -1,5 +1,4 @@
 import { css, cx } from '@emotion/css';
-import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { InlineLabel, SegmentInput, ToolbarButton, useStyles2 } from '@grafana/ui';

packages/grafana-o11y-ds-frontend/src/TraceToLogs/TraceToLogsSettings.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 { DataSourceInstanceSettings, DataSourceSettings } from '@grafana/data';
 import { DataSourceSrv, setDataSourceSrv } from '@grafana/runtime';

packages/grafana-o11y-ds-frontend/src/TraceToLogs/TraceToLogsSettings.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
+import * as React from 'react';
 
 import { DataSourceJsonData, DataSourceInstanceSettings, DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { ConfigDescriptionLink, ConfigSection } from '@grafana/experimental';

packages/grafana-o11y-ds-frontend/src/TraceToMetrics/TraceToMetricsSettings.tsx

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

packages/grafana-o11y-ds-frontend/src/TraceToProfiles/TraceToProfilesSettings.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
 
 import { DataSourceInstanceSettings, DataSourceSettings } from '@grafana/data';
 import { DataSourceSrv, setDataSourceSrv } from '@grafana/runtime';

packages/grafana-o11y-ds-frontend/src/TraceToProfiles/TraceToProfilesSettings.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
 import { useAsync } from 'react-use';
 
 import {

packages/grafana-o11y-ds-frontend/src/pyroscope/ProfileTypesCascader.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { Cascader, CascaderOption } from '@grafana/ui';
 

packages/grafana-o11y-ds-frontend/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "baseUrl": "./",
     "declarationDir": "./compiled",
     "emitDeclarationOnly": true,

packages/grafana-plugin-configs/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "alwaysStrict": true,
     "declaration": false,
     "resolveJsonModule": true

packages/grafana-plugin-configs/webpack.config.ts

@@ -100,6 +100,11 @@ const config = async (env: Record<string, unknown>): Promise<Configuration> => {
                   decorators: false,
                   dynamicImport: true,
                 },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
               },
             },
           },

packages/grafana-prometheus/src/components/AnnotationQueryEditor.tsx

@@ -1,6 +1,4 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
-import React from 'react';
-
 import { AnnotationQuery } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { EditorField, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';

packages/grafana-prometheus/src/components/PromCheatSheet.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
 import { css } from '@emotion/css';
-import React from 'react';
 
 import { GrafanaTheme2, QueryEditorHelpProps } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

packages/grafana-prometheus/src/components/PromExemplarField.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx
 import { css, cx } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { usePrevious } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';

packages/grafana-prometheus/src/components/PromExploreExtraField.test.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery } from '../types';

packages/grafana-prometheus/src/components/PromExploreExtraField.tsx

@@ -1,7 +1,8 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
 import { css, cx } from '@emotion/css';
 import { isEqual } from 'lodash';
-import React, { memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
+import * as React from 'react';
 import { usePrevious } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';

packages/grafana-prometheus/src/components/PromQueryEditorByApp.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
 import { render, screen } from '@testing-library/react';
 import { noop } from 'lodash';
-import React from 'react';
 
 import { CoreApp } from '@grafana/data';
 

packages/grafana-prometheus/src/components/PromQueryEditorByApp.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { CoreApp } from '@grafana/data';
 

packages/grafana-prometheus/src/components/PromQueryEditorForAlerting.tsx

@@ -1,6 +1,4 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx
-import React from 'react';
-
 import { PromQueryField } from './PromQueryField';
 import { PromQueryEditorProps } from './types';
 

packages/grafana-prometheus/src/components/PromQueryField.test.tsx

@@ -2,7 +2,6 @@
 import { getByTestId, render, screen, waitFor } from '@testing-library/react';
 // @ts-ignore
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { CoreApp, DataFrame, LoadingState, PanelData } from '@grafana/data';
 

packages/grafana-prometheus/src/components/PromQueryField.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
 import { css, cx } from '@emotion/css';
-import React, { ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
 
 import { isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -49,7 +49,7 @@ interface PromQueryFieldState {
   hint: QueryHint | null;
 }
 
-class PromQueryFieldClass extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
+class PromQueryFieldClass extends PureComponent<PromQueryFieldProps, PromQueryFieldState> {
   declare languageProviderInitializationPromise: CancelablePromise<any>;
 
   constructor(props: PromQueryFieldProps) {

packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { createTheme } from '@grafana/data';
 

packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx

@@ -1,6 +1,7 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx
 import { css, cx } from '@emotion/css';
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
+import * as React from 'react';
 import { FixedSizeList } from 'react-window';
 
 import { GrafanaTheme2, TimeRange } from '@grafana/data';

packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.test.tsx
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { dateTime, TimeRange } from '@grafana/data';
 

packages/grafana-prometheus/src/components/VariableQueryEditor.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx
-import React, { FormEvent, useCallback, useEffect, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
 
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 import { parser } from '@prometheus-io/lezer-promql';
 import { debounce } from 'lodash';
 import { promLanguageDefinition } from 'monaco-promql';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useLatest } from 'react-use';
 import { v4 as uuidv4 } from 'uuid';
 

packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldLazy.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldLazy.tsx
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 import MonacoQueryField from './MonacoQueryField';
 import { Props } from './MonacoQueryFieldProps';

packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldWrapper.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy';
 import { Props as MonacoProps } from './MonacoQueryFieldProps';

packages/grafana-prometheus/src/configuration/AlertingSettingsOverhaul.tsx

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

packages/grafana-prometheus/src/configuration/ConfigEditor.test.tsx

@@ -1,6 +1,4 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.test.tsx
-import React from 'react';
-
 import { FieldValidationMessage } from '@grafana/ui';
 
 import { validateInput } from './ConfigEditor';

packages/grafana-prometheus/src/configuration/ConfigEditor.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
 import { css } from '@emotion/css';
-import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
 import { ConfigSection, DataSourceDescription, AdvancedHttpSettings } from '@grafana/experimental';

packages/grafana-prometheus/src/configuration/DataSourceHttpSettingsOverhaul.tsx

@@ -1,6 +1,4 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/DataSourceHttpSettingsOverhaul.tsx
-import React from 'react';
-
 import { DataSourceSettings } from '@grafana/data';
 import { Auth, AuthMethod, ConnectionSettings, convertLegacyAuthProps } from '@grafana/experimental';
 import { SecureSocksProxySettings, useTheme2 } from '@grafana/ui';

packages/grafana-prometheus/src/configuration/ExemplarSetting.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/ExemplarsSettings.tsx
 import { css } from '@emotion/css';
-import React from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { ConfigSubSection } from '@grafana/experimental';

packages/grafana-prometheus/src/configuration/PromSettings.test.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/PromSettings.test.tsx
 import { render, screen, fireEvent } from '@testing-library/react';
-import React, { SyntheticEvent } from 'react';
+import { SyntheticEvent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/configuration/PromSettings.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
-import React, { SyntheticEvent, useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
 
 import {
   DataSourcePluginOptionsEditorProps,

packages/grafana-prometheus/src/gcopypaste/app/core/components/LocalStorageValueProvider/LocalStorageValueProvider.tsx

@@ -1,5 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/core/components/LocalStorageValueProvider/LocalStorageValueProvider.tsx
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
 
 import store from '../../store';
 

packages/grafana-prometheus/src/gcopypaste/packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -1,7 +1,8 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/packages/grafana-ui/src/components/Select/SelectBase.tsx
 import { cx } from '@emotion/css';
 import { max } from 'lodash';
-import React, { RefCallback } from 'react';
+import { RefCallback } from 'react';
+import * as React from 'react';
 import { MenuListProps } from 'react-select';
 import { FixedSizeList as List } from 'react-window';
 

packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/QueryPattern.tsx
 import { css } from '@emotion/css';
-import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Card, useStyles2 } from '@grafana/ui';

packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/QueryPatternsModal.test.tsx
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { promQueryModeller } from './PromQueryModeller';
 import { QueryPatternsModal } from './QueryPatternsModal';

packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx

@@ -1,7 +1,7 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/QueryPatternsModal.tsx
 import { css } from '@emotion/css';
 import { capitalize } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { CoreApp, DataQuery, GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';

packages/grafana-prometheus/src/querybuilder/components/LabelFilterItem.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilterItem.tsx
 import debounce from 'debounce-promise';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/querybuilder/components/LabelFilters.test.tsx

@@ -1,7 +1,7 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilters.test.tsx
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { ComponentProps } from 'react';
+import { ComponentProps } from 'react';
 
 import { selectOptionInTest } from '../../gcopypaste/test/helpers/selectOptionInTest';
 import { getLabelSelects } from '../testUtils';

packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx

@@ -1,7 +1,7 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilters.tsx
 import { css, cx } from '@emotion/css';
 import { isEqual } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup, EditorList } from '@grafana/experimental';

packages/grafana-prometheus/src/querybuilder/components/LabelParamEditor.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/LabelParamEditor.tsx
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { DataSourceApi, SelectableValue, toOption } from '@grafana/data';
 import { Select } from '@grafana/ui';

packages/grafana-prometheus/src/querybuilder/components/MetricSelect.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.test.tsx
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { DataSourceInstanceSettings, MetricFindValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx

@@ -1,7 +1,8 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
 import { css } from '@emotion/css';
 import debounce from 'debounce-promise';
-import React, { RefCallback, useCallback, useState } from 'react';
+import { RefCallback, useCallback, useState } from 'react';
+import * as React from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';

packages/grafana-prometheus/src/querybuilder/components/MetricsLabelsSection.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/MetricsLabelsSection.tsx
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 

packages/grafana-prometheus/src/querybuilder/components/NestedQuery.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
 import { css } from '@emotion/css';
-import React from 'react';
+import { memo } from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
 import { EditorRows, FlexItem } from '@grafana/experimental';
@@ -22,7 +22,7 @@ export interface NestedQueryProps {
   showExplain: boolean;
 }
 
-export const NestedQuery = React.memo<NestedQueryProps>((props) => {
+export const NestedQuery = memo<NestedQueryProps>((props) => {
   const { nestedQuery, index, datasource, onChange, onRemove, onRunQuery, showExplain } = props;
   const styles = useStyles2(getStyles);
 

packages/grafana-prometheus/src/querybuilder/components/NestedQueryList.tsx

@@ -1,6 +1,4 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx
-import React from 'react';
-
 import { Stack } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx
 import { getByText, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import {
   DataSourceInstanceSettings,

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx
 import { css } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { DataSourceApi, PanelData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -37,7 +37,7 @@ export interface PromQueryBuilderProps {
   showExplain: boolean;
 }
 
-export const PromQueryBuilder = React.memo<PromQueryBuilderProps>((props) => {
+export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
   const { datasource, query, onChange, onRunQuery, data, showExplain } = props;
   const [highlightedOp, setHighlightedOp] = useState<QueryBuilderOperation | undefined>();
   const [showDrawer, setShowDrawer] = useState<boolean>(false);

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderContainer.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.test.tsx
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
 

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderContainer.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import React, { useEffect, useReducer } from 'react';
+import { useEffect, useReducer } from 'react';
 
 import { PanelData } from '@grafana/data';
 import { config } from '@grafana/runtime';

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderExplained.tsx

@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx
-import React from 'react';
+import { memo } from 'react';
 
 import { Stack } from '@grafana/ui';
 
@@ -17,7 +17,7 @@ export interface PromQueryBuilderExplainedProps {
   query: string;
 }
 
-export const PromQueryBuilderExplained = React.memo<PromQueryBuilderExplainedProps>(({ query }) => {
+export const PromQueryBuilderExplained = memo<PromQueryBuilderExplainedProps>(({ query }) => {
   const visQuery = buildVisualQueryFromString(query || '').query;
   const lang = { grammar: promqlGrammar, name: 'promql' };
 

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderOptions.test.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { CoreApp } from '@grafana/data';
 

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderOptions.tsx

@@ -1,5 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
-import React, { SyntheticEvent } from 'react';
+import { SyntheticEvent } from 'react';
+import * as React from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.test.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryCodeEditor.test.tsx
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 
 import { DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
 

packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryCodeEditor.tsx
 import { css } from '@emotion/css';
-import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditorAutocompleteInfo.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen, fireEvent, createEvent } from '@testing-library/react';
 import { cloneDeep, defaultsDeep } from 'lodash';
-import React from 'react';
 
 import { PluginMeta, PluginType } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditorAutocompleteInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';

packages/grafana-prometheus/src/querybuilder/components/PromQueryEditorSelector.test.tsx

@@ -2,7 +2,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { cloneDeep, defaultsDeep } from 'lodash';
-import React from 'react';
 
 import { CoreApp, PluginMeta, PluginType } from '@grafana/data';
 

packages/grafana-prometheus/src/querybuilder/components/PromQueryEditorSelector.tsx

@@ -1,6 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
 import { isEqual, map } from 'lodash';
-import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
+import { memo, SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
 import { CoreApp, LoadingState, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -37,7 +37,7 @@ export const INTERVAL_FACTOR_OPTIONS: Array<SelectableValue<number>> = map([1, 2
 
 type Props = PromQueryEditorProps;
 
-export const PromQueryEditorSelector = React.memo<Props>((props) => {
+export const PromQueryEditorSelector = memo<Props>((props) => {
   const {
     onChange,
     onRunQuery,

packages/grafana-prometheus/src/querybuilder/components/PromQueryLegendEditor.tsx

@@ -1,5 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
-import React, { useRef } from 'react';
+import { useRef } from 'react';
+import * as React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-prometheus/src/querybuilder/components/QueryPreview.tsx

@@ -1,6 +1,4 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
-import React from 'react';
-
 import { EditorFieldGroup, EditorRow } from '@grafana/experimental';
 
 import promqlGrammar from '../../promql';

packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx

@@ -1,6 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/querybuilder/components/metrics-modal/AdditionalSettings.tsx
 import { css } from '@emotion/css';
-import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, Switch, Tooltip, useTheme2 } from '@grafana/ui';