Bump @grafana dependencies and React to 18

jest-setup.js

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-
+import { TextEncoder } from 'util';
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(global, 'matchMedia', {
   writable: true,
@@ -16,3 +16,5 @@ Object.defineProperty(global, 'matchMedia', {
 });
 
 HTMLCanvasElement.prototype.getContext = () => {};
+
+global.TextEncoder = TextEncoder;

jest/mocks/react-inlinesvg.tsx

@@ -2,7 +2,7 @@
 // `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
 // the failed fetch requests from displaying errors in console.
 
-import React from 'react';
+import React, { Ref } from 'react';
 
 type Callback = (...args: any[]) => void;
 
@@ -16,10 +16,10 @@ export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
 
 const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
 
-const InlineSVG = ({ src }: { src: string }) => {
+const InlineSVG = ({ src, innerRef }: { src: string, innerRef: Ref<SVGSVGElement>; }) => {
   // testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
   const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
-  return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" />;
+  return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} ref={innerRef} viewBox="0 0 24 24" />;
 };
 
 export default InlineSVG;

package.json

@@ -26,48 +26,48 @@
   "license": "Apache-2.0",
   "peerDependencies": {
     "@emotion/css": "11.11.2",
-    "@grafana/data": "^10.0.0",
+    "@grafana/data": "^11.1.3",
     "@grafana/e2e-selectors": "^10.0.0",
-    "@grafana/runtime": "^10.0.0",
-    "@grafana/ui": "^10.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-select": "^5.2.1",
-    "rxjs": "7.8.0"
+    "@grafana/runtime": "^11.1.3",
+    "@grafana/ui": "^11.1.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-select": "5.8.0",
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@grafana/data": "^10.0.0",
+    "@grafana/data": "^11.1.3",
     "@grafana/e2e-selectors": "^10.0.0",
     "@grafana/eslint-config": "^6.0.0",
-    "@grafana/runtime": "^10.0.0",
+    "@grafana/runtime": "^11.1.3",
     "@grafana/tsconfig": "^1.3.0-rc1",
-    "@grafana/ui": "^10.0.0",
+    "@grafana/ui": "^11.1.3",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@swc/core": "^1.3.56",
     "@swc/jest": "^0.2.26",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.1.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "10.0.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "15.0.2",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
     "@types/node": "10.14.1",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^17.0.0",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react": "18.3.3",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "esbuild": "0.16.17",
     "eslint": "^8.40.0",
     "eslint-plugin-jsdoc": "^44.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "node-notifier": "^10.0.1",
     "pretty-format": "25.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-select-event": "^5.5.1",
-    "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "2.79.1",
     "rollup-plugin-dts": "^4.2.3",

src/ConfigEditor/Auth/auth-method/AuthMethodSettings.test.tsx

@@ -47,7 +47,7 @@ describe('<AuthMethodSettings />', () => {
     await openSelect(user);
 
     const selectOptionsMenu = screen.getByLabelText('Select options menu');
-    expect(screen.getAllByLabelText('Select option')).toHaveLength(3);
+    expect(screen.getAllByTestId('data-testid Select option')).toHaveLength(3);
     expect(within(selectOptionsMenu).getByText('Basic authentication')).toBeInTheDocument();
     expect(within(selectOptionsMenu).getByText('Forward OAuth Identity')).toBeInTheDocument();
     expect(within(selectOptionsMenu).getByText('No Authentication')).toBeInTheDocument();
@@ -62,7 +62,7 @@ describe('<AuthMethodSettings />', () => {
 
     await openSelect(user);
 
-    const allOptions = screen.getAllByLabelText('Select option');
+    const allOptions = screen.getAllByTestId('data-testid Select option');
     expect(allOptions).toHaveLength(2);
     expect(within(allOptions[0]).getByText('Enable cross-site access control requests')).toBeInTheDocument();
     expect(within(allOptions[1]).getByText('No Authentication')).toBeInTheDocument();

src/ConfigEditor/Auth/tls/TLSSettingsSection.tsx

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { Checkbox, Tooltip, Icon, useTheme2 } from '@grafana/ui';
 
 export type Props = {
+  children?: React.ReactNode;
   enabled: boolean;
   label: string;
   tooltipText: string;