Fix types

package.json

@@ -53,7 +53,7 @@
     "@types/lodash": "^4.14.202",
     "@types/node": "10.14.1",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "18.3.3",
+    "@types/react": "18.2.55",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "esbuild": "0.16.17",
     "eslint": "^8.40.0",

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

@@ -3,15 +3,14 @@ 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;
   onToggle: (enabled: boolean) => void;
   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

yarn.lock

@@ -1904,19 +1904,33 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/[email protected]":
+"@types/react@*":
   version "18.3.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
   integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/[email protected]":
+  version "18.2.55"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.55.tgz#38141821b7084404b5013742bc4ae08e44da7a67"
+  integrity sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/[email protected]":
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
   integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
 
+"@types/scheduler@*":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.23.0.tgz#0a6655b3e2708eaabca00b7372fafd7a792a7b09"
+  integrity sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==
+
 "@types/semver@^7.3.12":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"