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/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';