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

packages/grafana-sql/src/components/ConfirmModal.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, Modal, useStyles2 } from '@grafana/ui';

packages/grafana-sql/src/components/DatasetSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useAsync } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';

packages/grafana-sql/src/components/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 type Props = {
   fallBackComponent?: React.ReactNode;

packages/grafana-sql/src/components/QueryEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { QueryEditorProps } from '@grafana/data';

packages/grafana-sql/src/components/QueryHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useId, useState } from 'react';
+import { useCallback, useId, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';

packages/grafana-sql/src/components/SqlComponents.test.tsx

@@ -1,5 +1,4 @@
 import { render, waitFor } from '@testing-library/react';
-import React from 'react';
 
 import { config } from '@grafana/runtime';
 

packages/grafana-sql/src/components/TableSelector.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useAsync } from 'react-use';
 
 import { SelectableValue, toOption } from '@grafana/data';

packages/grafana-sql/src/components/configuration/ConnectionLimits.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DataSourceSettings } from '@grafana/data';
 import { ConfigSubSection, Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';

packages/grafana-sql/src/components/configuration/Divider.tsx

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

packages/grafana-sql/src/components/configuration/NumberInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 
 import { Input } from '@grafana/ui/src/components/Input/Input';
 
@@ -10,7 +10,7 @@ type NumberInputProps = {
 };
 
 export function NumberInput({ value, defaultValue, onChange, width }: NumberInputProps) {
-  const [isEmpty, setIsEmpty] = React.useState(false);
+  const [isEmpty, setIsEmpty] = useState(false);
   return (
     <Input
       type="number"

packages/grafana-sql/src/components/configuration/TLSSecretsConfig.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   DataSourceJsonData,
   DataSourcePluginOptionsEditorProps,

packages/grafana-sql/src/components/query-editor-raw/QueryEditorRaw.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import * as React from 'react';
 
 import { LanguageDefinition, SQLEditor } from '@grafana/experimental';
 

packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { reportInteraction } from '@grafana/runtime';
 import { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';

packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useAsyncFn } from 'react-use';
 import useDebounce from 'react-use/lib/useDebounce';
 

packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useMeasure } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 

packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx

@@ -13,7 +13,6 @@ import {
 } from '@react-awesome-query-builder/ui';
 import { List } from 'immutable';
 import { isString } from 'lodash';
-import React from 'react';
 
 import { dateTime, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-sql/src/components/visual-query-builder/GroupByRow.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';

packages/grafana-sql/src/components/visual-query-builder/OrderByRow.tsx

@@ -1,5 +1,6 @@
 import { uniqueId } from 'lodash';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
+import * as React from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { EditorField, InputGroup } from '@grafana/experimental';

packages/grafana-sql/src/components/visual-query-builder/Preview.tsx

@@ -1,5 +1,4 @@
 import { css } from '@emotion/css';
-import React from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';

packages/grafana-sql/src/components/visual-query-builder/SQLGroupByRow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { SelectableValue } from '@grafana/data';
 
 import { QueryWithDefaults } from '../../defaults';

packages/grafana-sql/src/components/visual-query-builder/SQLOrderByRow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { SelectableValue } from '@grafana/data';
 
 import { QueryWithDefaults } from '../../defaults';

packages/grafana-sql/src/components/visual-query-builder/SQLSelectRow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { SelectableValue, toOption } from '@grafana/data';
 
 import { COMMON_AGGREGATE_FNS } from '../../constants';

packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
 import { SelectableValue, TypedVariableModel } from '@grafana/data';

packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';

packages/grafana-sql/src/components/visual-query-builder/VisualEditor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useAsync } from 'react-use';
 
 import { EditorRows, EditorRow, EditorField } from '@grafana/experimental';

packages/grafana-sql/src/components/visual-query-builder/WhereRow.tsx

@@ -1,6 +1,6 @@
 import { injectGlobal } from '@emotion/css';
 import { Builder, Config, ImmutableTree, Query, Utils } from '@react-awesome-query-builder/ui';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { SQLExpression } from '../../types';