Bump @grafana dependencies and React to 18

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'yarn'
       - run: yarn install --immutable --prefer-offline
       - run: yarn lint

.github/workflows/publish-npm.yml

@@ -29,7 +29,7 @@ jobs:
         if: steps.version_check.outputs.changed == 'true'
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
           registry-url: "https://registry.npmjs.org"
           cache: 'yarn'
 

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": "^10.4.0",
     "@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": "^10.4.0",
+    "@grafana/ui": "^10.4.0",
+    "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": "^10.4.0",
     "@grafana/e2e-selectors": "^10.0.0",
     "@grafana/eslint-config": "^6.0.0",
-    "@grafana/runtime": "^10.0.0",
+    "@grafana/runtime": "^10.4.0",
     "@grafana/tsconfig": "^1.3.0-rc1",
-    "@grafana/ui": "^10.0.0",
+    "@grafana/ui": "^10.4.0",
     "@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.2.55",
     "@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.tsx

@@ -20,7 +20,7 @@ export type Props = {
   readOnly?: boolean;
 };
 
-export const Auth: React.FC<Props> = ({
+export const Auth = ({
   selectedMethod,
   mostCommonMethod,
   visibleMethods,
@@ -31,7 +31,7 @@ export const Auth: React.FC<Props> = ({
   TLS,
   customHeaders,
   readOnly = false,
-}) => {
+}: Props) => {
   const styles = {
     container: css({
       maxWidth: 578,

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

@@ -42,7 +42,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const AuthMethodSettings: React.FC<Props> = ({
+export const AuthMethodSettings = ({
   selectedMethod,
   mostCommonMethod,
   visibleMethods: visibleMethodsFromProps,
@@ -51,7 +51,7 @@ export const AuthMethodSettings: React.FC<Props> = ({
   onAuthMethodSelect,
   basicAuth,
   readOnly,
-}) => {
+}: Props) => {
   const [authMethodChanged, setAuthMethodChanged] = useState(false);
   const { colors, spacing } = useTheme2();
   const visibleMethods: Array<AuthMethod | CustomMethodId> = useMemo(

src/ConfigEditor/Auth/auth-method/BasicAuth.tsx

@@ -14,7 +14,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const BasicAuth: React.FC<Props> = ({
+export const BasicAuth = ({
   user,
   passwordConfigured,
   userTooltip = 'The username of the data source account',
@@ -23,7 +23,7 @@ export const BasicAuth: React.FC<Props> = ({
   onPasswordChange,
   onPasswordReset,
   readOnly,
-}) => {
+}: Props) => {
   const commonStyles = useCommonStyles();
   const styles = {
     lastInlineField: css({

src/ConfigEditor/Auth/custom-headers/CustomHeader.tsx

@@ -12,7 +12,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const CustomHeader: React.FC<Props> = ({ header, onChange, onBlur, onDelete, readOnly }) => {
+export const CustomHeader = ({ header, onChange, onBlur, onDelete, readOnly }: Props) => {
   const { spacing } = useTheme2();
   const commonStyles = useCommonStyles();
   const styles = {

src/ConfigEditor/Auth/custom-headers/CustomHeaders.tsx

@@ -11,7 +11,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const CustomHeaders: React.FC<Props> = ({ headers: headersFromProps, onChange, readOnly }) => {
+export const CustomHeaders = ({ headers: headersFromProps, onChange, readOnly }: Props) => {
   const { spacing } = useTheme2();
 
   const [headers, setHeaders] = useState<LocalHeader[]>(

src/ConfigEditor/Auth/tls/SelfSignedCertificate.tsx

@@ -16,15 +16,15 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const SelfSignedCertificate: React.FC<Props> = ({
+export const SelfSignedCertificate = ({
   enabled,
   certificateConfigured,
   onToggle,
   onCertificateChange,
   onCertificateReset,
   tooltips,
   readOnly,
-}) => {
+}: Props) => {
   const commonStyles = useCommonStyles();
 
   return (

src/ConfigEditor/Auth/tls/SkipTLSVerification.tsx

@@ -7,7 +7,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const SkipTLSVerification: React.FC<Props> = ({ enabled, onToggle, readOnly }) => {
+export const SkipTLSVerification = ({ enabled, onToggle, readOnly }: Props) => {
   return (
     <TLSSettingsSection
       enabled={enabled}

src/ConfigEditor/Auth/tls/TLSClientAuth.tsx

@@ -23,7 +23,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const TLSClientAuth: React.FC<Props> = ({
+export const TLSClientAuth = ({
   enabled,
   serverName,
   clientCertificateConfigured,
@@ -36,7 +36,7 @@ export const TLSClientAuth: React.FC<Props> = ({
   onClientKeyReset,
   tooltips,
   readOnly,
-}) => {
+}: Props) => {
   const commonStyles = useCommonStyles();
 
   return (

src/ConfigEditor/Auth/tls/TLSSettings.tsx

@@ -13,12 +13,12 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const TLSSettings: React.FC<Props> = ({
+export const TLSSettings = ({
   selfSignedCertificate,
   TLSClientAuth,
   skipTLSVerification,
   readOnly,
-}) => {
+}: Props) => {
   const { spacing } = useTheme2();
 
   const styles = {

src/ConfigEditor/Auth/tls/TLSSettingsSection.tsx

@@ -10,7 +10,7 @@ export type Props = {
   readOnly: boolean;
 };
 
-export const TLSSettingsSection: React.FC<Props> = ({ children, enabled, label, tooltipText, onToggle, readOnly }) => {
+export const TLSSettingsSection = ({ children, enabled, label, tooltipText, onToggle, readOnly }: React.PropsWithChildren<Props>) => {
   const { colors, spacing } = useTheme2();
   const styles = {
     container: css({

src/ConfigEditor/ConfigSection/ConfigSection.tsx

@@ -3,7 +3,7 @@ import { GenericConfigSection, Props as GenericConfigSectionProps } from './Gene
 
 type Props = Omit<GenericConfigSectionProps, 'kind'>;
 
-export const ConfigSection = ({ children, ...props }: Props) => {
+export const ConfigSection = ({ children, ...props }: React.PropsWithChildren<Props>) => {
   return (
     <GenericConfigSection {...props} kind="section">
       {children}

src/ConfigEditor/ConfigSection/ConfigSubSection.tsx

@@ -3,7 +3,7 @@ import { GenericConfigSection, Props as GenericConfigSectionProps } from './Gene
 
 type Props = Omit<GenericConfigSectionProps, 'kind'>;
 
-export const ConfigSubSection = ({ children, ...props }: Props) => {
+export const ConfigSubSection = ({ children, ...props }: React.PropsWithChildren<Props>) => {
   return (
     <GenericConfigSection {...props} kind="sub-section">
       {children}

src/ConfigEditor/ConfigSection/GenericConfigSection.tsx

@@ -9,7 +9,6 @@ export type Props = {
   isInitiallyOpen?: boolean;
   kind?: 'section' | 'sub-section';
   className?: string;
-  children: ReactNode;
 };
 
 export const GenericConfigSection = ({
@@ -20,7 +19,7 @@ export const GenericConfigSection = ({
   isInitiallyOpen = true,
   kind = 'section',
   className,
-}: Props) => {
+}: React.PropsWithChildren<Props>) => {
   const { colors, typography, spacing } = useTheme2();
   const [isOpen, setIsOpen] = useState(isCollapsible ? isInitiallyOpen : true);
   const iconName: IconName = isOpen ? 'angle-up' : 'angle-down';

src/QueryEditor/AccessoryButton.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 interface AccessoryButtonProps extends ButtonProps {}
 
-export const AccessoryButton: React.FC<AccessoryButtonProps> = ({ className, ...props }) => {
+export const AccessoryButton = ({ className, ...props }: AccessoryButtonProps) => {
   const styles = useStyles2(getButtonStyles);
 
   return <Button {...props} className={cx(className, styles.button)} />;

src/QueryEditor/EditorField.tsx

@@ -8,14 +8,13 @@ import { Field, Icon, PopoverContent, ReactUtils, Tooltip, useStyles2 } from '@g
 
 interface EditorFieldProps extends ComponentProps<typeof Field> {
   label: string;
-  children: React.ReactElement;
   width?: number | string;
   optional?: boolean;
   tooltip?: PopoverContent;
   tooltipInteractive?: boolean;
 }
 
-export const EditorField: React.FC<EditorFieldProps> = (props) => {
+export const EditorField = (props: React.PropsWithChildren<EditorFieldProps>) => {
   const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
 
   const styles = useStyles2(useCallback((theme) => getStyles(theme, width), [width]));

src/QueryEditor/EditorSwitch.tsx

@@ -3,7 +3,7 @@ import { Switch } from '@grafana/ui';
 import React, { ComponentProps } from 'react';
 
 // Wrapper component around <Switch /> that properly aligns it in <EditorField />
-export const EditorSwitch: React.FC<ComponentProps<typeof Switch>> = (props) => {
+export const EditorSwitch = (props: ComponentProps<typeof Switch>) => {
   const styles = getStyles();
 
   return (

src/QueryEditor/FlexItem.tsx

@@ -5,6 +5,6 @@ interface FlexItemProps {
   shrink?: number;
 }
 
-export const FlexItem: React.FC<FlexItemProps> = ({ grow, shrink }) => {
+export const FlexItem = ({ grow, shrink }: FlexItemProps) => {
   return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />;
 };

src/VisualQueryBuilder/components/OperationExplainedBox.tsx

@@ -6,12 +6,11 @@ import { useStyles2 } from '@grafana/ui';
 
 export interface Props {
   title?: React.ReactNode;
-  children?: React.ReactNode;
   markdown?: string;
   stepNumber?: number;
 }
 
-export function OperationExplainedBox({ title, stepNumber, markdown, children }: Props) {
+export function OperationExplainedBox({ title, stepNumber, markdown, children }: React.PropsWithChildren<Props>) {
   const styles = useStyles2(getStyles);
 
   return (

src/VisualQueryBuilder/components/OperationsEditorRow.tsx

@@ -6,11 +6,7 @@ import { useStyles2 } from '@grafana/ui';
 
 import { Stack } from '../../QueryEditor/Stack';
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export function OperationsEditorRow({ children }: Props) {
+export function OperationsEditorRow({ children }: React.PropsWithChildren) {
   const styles = useStyles2(getStyles);
 
   return (

src/VisualQueryBuilder/components/QueryOptionGroup.tsx

@@ -14,10 +14,9 @@ interface Props {
   title: string;
   collapsedInfo: string[];
   queryStats?: QueryStats | null;
-  children: React.ReactNode;
 }
 
-export function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: Props) {
+export function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {
   const [isOpen, toggleOpen] = useToggle(false);
   const styles = useStyles2(getStyles);
 

src/sql-editor/components/SQLEditor.tsx

@@ -70,15 +70,15 @@ interface LanguageRegistries {
 const LANGUAGES_CACHE = new Map<string, LanguageRegistries>();
 const INSTANCE_CACHE = new Map<string, Registry<SuggestionsRegistryItem>>();
 
-export const SQLEditor: React.FC<SQLEditorProps> = ({
+export const SQLEditor = ({
   children,
   onBlur,
   onChange,
   query,
   language = { id: STANDARD_SQL_LANGUAGE },
   width,
   height,
-}) => {
+}: React.PropsWithChildren<SQLEditorProps>) => {
   const monacoRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
   const langUid = useRef<string>();
   // create unique language id for each SQLEditor instance