Chore/React18: Update component prop types (#56898)

.betterer.results

@@ -2651,9 +2651,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
     ],
-    "public/app/core/navigation/RouterDebugger.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/core/navigation/__mocks__/routeProps.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { stylesFactory } from '../../themes';
 
@@ -7,7 +7,7 @@ export interface Props {
   className?: string;
 }
 
-export const FullWidthButtonContainer: FC<Props> = ({ className, children }) => {
+export const FullWidthButtonContainer = ({ className, children }: React.PropsWithChildren<Props>) => {
   const styles = getStyles();
 
   return <div className={cx(styles, className)}>{children}</div>;

packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx

@@ -21,7 +21,7 @@ interface State {
   hasEventListener: boolean;
 }
 
-export class ClickOutsideWrapper extends PureComponent<Props, State> {
+export class ClickOutsideWrapper extends PureComponent<React.PropsWithChildren<Props>, State> {
   static defaultProps = {
     includeButtonPress: true,
     parent: typeof window !== 'undefined' ? window : null,

packages/grafana-ui/src/components/Collapse/Collapse.tsx

@@ -123,7 +123,7 @@ export const ControlledCollapse: FunctionComponent<Props> = ({ isOpen, onToggle,
   );
 };
 
-export const Collapse: FunctionComponent<Props> = ({
+export const Collapse = ({
   isOpen,
   label,
   loading,
@@ -131,7 +131,7 @@ export const Collapse: FunctionComponent<Props> = ({
   onToggle,
   className,
   children,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const style = useStyles2(getStyles);
   const onClickToggle = () => {
     if (onToggle) {

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -27,7 +27,7 @@ type ColorPickerTriggerRenderer = (props: {
 }) => React.ReactNode;
 
 export const colorPickerFactory = <T extends ColorPickerProps>(
-  popover: React.ComponentType<T>,
+  popover: React.ComponentType<React.PropsWithChildren<T>>,
   displayName = 'ColorPicker'
 ) => {
   return class ColorPicker extends Component<T & { children?: ColorPickerTriggerRenderer }, any> {

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx

@@ -36,7 +36,7 @@ interface State {
   showConfirm: boolean;
 }
 
-class UnThemedConfirmButton extends PureComponent<Props, State> {
+class UnThemedConfirmButton extends PureComponent<React.PropsWithChildren<Props>, State> {
   mainButtonRef = React.createRef<HTMLButtonElement>();
   confirmButtonRef = React.createRef<HTMLButtonElement>();
   state: State = {

packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { ComponentSize } from '../../types/size';
 import { Button } from '../Button';
@@ -17,7 +17,7 @@ export interface Props {
   closeOnConfirm?: boolean;
 }
 
-export const DeleteButton: FC<Props> = ({ size, disabled, onConfirm, 'aria-label': ariaLabel, closeOnConfirm }) => {
+export const DeleteButton = ({ size, disabled, onConfirm, 'aria-label': ariaLabel, closeOnConfirm }: Props) => {
   return (
     <ConfirmButton
       confirmText="Delete"

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, RefCallback, useCallback, useEffect, useRef } from 'react';
+import React, { RefCallback, useCallback, useEffect, useRef } from 'react';
 import Scrollbars, { positionValues } from 'react-custom-scrollbars-2';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -31,7 +31,7 @@ interface Props {
 /**
  * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
  */
-export const CustomScrollbar: FC<Props> = ({
+export const CustomScrollbar = ({
   autoHide = false,
   autoHideTimeout = 200,
   setScrollTop,
@@ -48,7 +48,7 @@ export const CustomScrollbar: FC<Props> = ({
   scrollTop,
   onScroll,
   children,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const ref = useRef<Scrollbars & { view: HTMLDivElement }>(null);
   const styles = useStyles2(getStyles);
 

packages/grafana-ui/src/components/CustomScrollbar/ScrollIndicators.tsx

@@ -1,13 +1,13 @@
 import { css, cx } from '@emotion/css';
 import classNames from 'classnames';
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 import { Icon } from '../Icon/Icon';
 
-export const ScrollIndicators: FC = ({ children }) => {
+export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {
   const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false);
   const [showScrollBottomIndicator, setShowBottomScrollIndicator] = useState(false);
   const scrollTopMarker = useRef<HTMLDivElement>(null);

packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx

@@ -20,7 +20,7 @@ export interface DataLinksContextMenuApi {
   targetClassName?: string;
 }
 
-export const DataLinksContextMenu: React.FC<DataLinksContextMenuProps> = ({ children, links, style }) => {
+export const DataLinksContextMenu = ({ children, links, style }: DataLinksContextMenuProps) => {
   const itemsGroup: MenuItemsGroup[] = [{ items: linkModelToContextMenuItems(links), label: 'Data links' }];
   const linksCounter = itemsGroup[0].items.length;
   const renderMenuGroupItems = () => {

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { PropsWithChildren, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { GrafanaTheme2, TimeZoneInfo } from '@grafana/data';
 
@@ -9,7 +9,7 @@ interface Props {
   info?: TimeZoneInfo;
 }
 
-export const TimeZoneDescription: React.FC<PropsWithChildren<Props>> = ({ info }) => {
+export const TimeZoneDescription = ({ info }: Props) => {
   const styles = useStyles2(getStyles);
   const description = useDescription(info);
 

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -7,11 +7,12 @@ import { useStyles2 } from '../../../themes';
 
 interface Props {
   label: string | undefined;
+  children?: React.ReactNode;
 }
 
 const stopPropagation = (event: React.MouseEvent) => event.stopPropagation();
 
-export const TimeZoneGroup: React.FC<PropsWithChildren<Props>> = (props) => {
+export const TimeZoneGroup = (props: Props) => {
   const { children, label } = props;
   const styles = useStyles2(getStyles);
 

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, TimeZone, dateTimeFormat } from '@grafana/data';
 
@@ -12,7 +12,7 @@ interface Props {
   className?: string;
 }
 
-export const TimeZoneOffset: React.FC<PropsWithChildren<Props>> = (props) => {
+export const TimeZoneOffset = (props: Props) => {
   const { timestamp, timeZone, className } = props;
   const styles = useStyles2(getStyles);
 

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx

@@ -65,7 +65,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
   );
 };
 
-export const CompactTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => {
+export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (props, ref) => {
   const { children, innerProps, data, isSelected, isFocused } = props;
   const theme = useTheme2();
   const styles = getStyles(theme);

packages/grafana-ui/src/components/FileUpload/FileUpload.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, FormEvent, useCallback, useState } from 'react';
+import React, { FormEvent, useCallback, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -25,13 +25,13 @@ export interface Props {
   showFileName?: boolean;
 }
 
-export const FileUpload: FC<Props> = ({
+export const FileUpload = ({
   onFileUpload,
   className,
   children = 'Upload file',
   accept = '*',
   size = 'md',
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const style = useStyles2(getStyles(size));
   const [fileName, setFileName] = useState('');
   const id = uuidv4();

packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx

@@ -72,7 +72,11 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem
   };
 });
 
-export const FieldValidationMessage: React.FC<FieldValidationMessageProps> = ({ children, horizontal, className }) => {
+export const FieldValidationMessage = ({
+  children,
+  horizontal,
+  className,
+}: React.PropsWithChildren<FieldValidationMessageProps>) => {
   const theme = useTheme2();
   const styles = getFieldValidationMessageStyles(theme);
   const cssName = cx(horizontal ? styles.horizontal : styles.vertical, className);

packages/grafana-ui/src/components/Forms/Form.tsx

@@ -4,7 +4,7 @@ import { useForm, Mode, DeepPartial, UnpackNestedValue, SubmitHandler, FieldValu
 
 import { FormAPI } from '../../types';
 
-interface FormProps<T extends FieldValues> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
+interface FormProps<T extends FieldValues> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit' | 'children'> {
   validateOn?: Mode;
   validateOnMount?: boolean;
   validateFieldsOnMount?: string | string[];

packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx

@@ -1,5 +1,5 @@
 import { cx, css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -11,7 +11,7 @@ export interface Props {
 }
 
 /** @beta */
-export const InlineSegmentGroup: FC<Props> = ({ children, className, grow, ...htmlProps }) => {
+export const InlineSegmentGroup = ({ children, className, grow, ...htmlProps }: React.PropsWithChildren<Props>) => {
   const styles = useStyles2((theme) => getStyles(theme, grow));
 
   return (

packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx

@@ -115,7 +115,7 @@ DisabledList.args = {
 };
 
 export const Dots: Story = () => {
-  const Wrapper: React.FC<{ title: string }> = ({ title, children }) => (
+  const Wrapper: React.FC<React.PropsWithChildren<{ title: string }>> = ({ title, children }) => (
     <div style={{ marginBottom: 20 }}>
       <h5>{title}</h5>
       {children}

packages/grafana-ui/src/components/Graph/GraphTooltip/GraphTooltip.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 
+import { TooltipDisplayMode } from '@grafana/schema';
+
 import { VizTooltipContentProps } from '../../VizTooltip';
 
 import { MultiModeGraphTooltip } from './MultiModeGraphTooltip';
 import { SingleModeGraphTooltip } from './SingleModeGraphTooltip';
 import { GraphDimensions } from './types';
 
-export const GraphTooltip: React.FC<VizTooltipContentProps<GraphDimensions>> = ({
+export const GraphTooltip = ({
-  mode = 'single',
+  mode = TooltipDisplayMode.Single,
   dimensions,
   activeDimensions,
   pos,
   timeZone,
-}) => {
+}: VizTooltipContentProps<GraphDimensions>) => {
   // When
   // [1] no active dimension or
   // [2] no xAxis position

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -30,7 +30,7 @@ export interface ContainerProps {
   shrink?: number;
 }
 
-export const Layout: React.FC<LayoutProps> = ({
+export const Layout = ({
   children,
   orientation = Orientation.Horizontal,
   spacing = 'sm',
@@ -40,7 +40,7 @@ export const Layout: React.FC<LayoutProps> = ({
   width = '100%',
   height = '100%',
   ...rest
-}) => {
+}: LayoutProps) => {
   const styles = useStyles2(
     useCallback(
       (theme) => getStyles(theme, orientation, spacing, justify, align, wrap),
@@ -63,7 +63,7 @@ export const Layout: React.FC<LayoutProps> = ({
   );
 };
 
-export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({
+export const HorizontalGroup = ({
   children,
   spacing,
   justify,
@@ -71,7 +71,7 @@ export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({
   wrap,
   width,
   height,
-}) => (
+}: Omit<LayoutProps, 'orientation'>) => (
   <Layout
     spacing={spacing}
     justify={justify}
@@ -84,14 +84,14 @@ export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({
     {children}
   </Layout>
 );
-export const VerticalGroup: React.FC<Omit<LayoutProps, 'orientation' | 'wrap'>> = ({
+export const VerticalGroup = ({
   children,
   spacing,
   justify,
   align,
   width,
   height,
-}) => (
+}: Omit<LayoutProps, 'orientation' | 'wrap'>) => (
   <Layout
     spacing={spacing}
     justify={justify}
@@ -104,7 +104,7 @@ export const VerticalGroup: React.FC<Omit<LayoutProps, 'orientation' | 'wrap'>>
   </Layout>
 );
 
-export const Container: React.FC<ContainerProps> = ({ children, padding, margin, grow, shrink }) => {
+export const Container = ({ children, padding, margin, grow, shrink }: React.PropsWithChildren<ContainerProps>) => {
   const styles = useStyles2(useCallback((theme) => getContainerStyles(theme, padding, margin), [padding, margin]));
 
   return (

packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { HTMLAttributes, SFC } from 'react';
+import React, { HTMLAttributes } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -16,7 +16,7 @@ export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement>
 /**
  * @public
  */
-export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text, className, ...rest }) => {
+export const LoadingPlaceholder = ({ text, className, ...rest }: LoadingPlaceholderProps) => {
   const styles = useStyles2(getStyles);
   return (
     <div className={cx(styles.container, className)} {...rest}>

packages/grafana-ui/src/components/Modal/ModalHeader.tsx

@@ -15,7 +15,7 @@ interface Props {
 }
 
 /** @internal */
-export const ModalHeader: React.FC<Props> = ({ icon, iconTooltip, title, children, id }) => {
+export const ModalHeader = ({ icon, iconTooltip, title, children, id }: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getModalStyles);
 
   return (

packages/grafana-ui/src/components/Modal/ModalTabContent.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 
 /** @internal */
-export const ModalTabContent: React.FC<Props> = ({ children }) => {
+export const ModalTabContent = ({ children }: React.PropsWithChildren<Props>) => {
   return (
     <div className="share-modal-body">
       <div className="share-modal-header">

packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx

@@ -4,6 +4,6 @@ import { Stack } from './Stack';
 
 interface EditorFieldGroupProps {}
 
-export const EditorFieldGroup: React.FC<EditorFieldGroupProps> = ({ children }) => {
+export const EditorFieldGroup = ({ children }: React.PropsWithChildren<EditorFieldGroupProps>) => {
   return <Stack gap={1}>{children}</Stack>;
 };

packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx

@@ -7,7 +7,7 @@ import { stylesFactory, useTheme2 } from '../../themes';
 
 interface EditorHeaderProps {}
 
-export const EditorHeader: React.FC<EditorHeaderProps> = ({ children }) => {
+export const EditorHeader = ({ children }: React.PropsWithChildren<EditorHeaderProps>) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
 

packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx

@@ -9,7 +9,7 @@ import { Stack } from './Stack';
 
 interface EditorRowProps {}
 
-export const EditorRow: React.FC<EditorRowProps> = ({ children }) => {
+export const EditorRow = ({ children }: React.PropsWithChildren<EditorRowProps>) => {
   const styles = useStyles2(getStyles);
 
   return (

packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx

@@ -4,7 +4,7 @@ import { Stack } from './Stack';
 
 interface EditorRowsProps {}
 
-export const EditorRows: React.FC<EditorRowsProps> = ({ children }) => {
+export const EditorRows = ({ children }: React.PropsWithChildren<EditorRowsProps>) => {
   return (
     <Stack gap={0.5} direction="column">
       {children}

packages/grafana-ui/src/components/QueryEditor/Stack.tsx

@@ -13,7 +13,7 @@ interface StackProps {
   flexGrow?: CSSProperties['flexGrow'];
 }
 
-export const Stack: React.FC<StackProps> = ({ children, ...props }) => {
+export const Stack = ({ children, ...props }: React.PropsWithChildren<StackProps>) => {
   const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props]));
 
   return <div className={styles.root}>{children}</div>;

packages/grafana-ui/src/components/Select/MultiValue.tsx

@@ -9,7 +9,7 @@ interface MultiValueContainerProps {
   innerProps: JSX.IntrinsicElements['div'];
 }
 
-export const MultiValueContainer: React.FC<MultiValueContainerProps> = ({ innerProps, children }) => {
+export const MultiValueContainer = ({ innerProps, children }: React.PropsWithChildren<MultiValueContainerProps>) => {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
 
@@ -24,7 +24,7 @@ export type MultiValueRemoveProps = {
   innerProps: IconButtonProps;
 };
 
-export const MultiValueRemove: React.FC<MultiValueRemoveProps> = ({ children, innerProps }) => {
+export const MultiValueRemove = ({ children, innerProps }: React.PropsWithChildren<MultiValueRemoveProps>) => {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
   return <IconButton {...innerProps} name="times" size="sm" className={styles.multiValueRemove} />;

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -1,6 +1,6 @@
 import { cx } from '@emotion/css';
 import { max } from 'lodash';
-import React, { FC, RefCallback } from 'react';
+import React, { RefCallback } from 'react';
 import { MenuListProps } from 'react-select';
 import { FixedSizeList as List } from 'react-window';
 
@@ -18,7 +18,7 @@ interface SelectMenuProps {
   innerProps: {};
 }
 
-export const SelectMenu: FC<SelectMenuProps> = ({ children, maxHeight, innerRef, innerProps }) => {
+export const SelectMenu = ({ children, maxHeight, innerRef, innerProps }: React.PropsWithChildren<SelectMenuProps>) => {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
 
@@ -44,12 +44,7 @@ const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 7;
 //
 // VIRTUAL_LIST_ITEM_HEIGHT and WIDTH_ESTIMATE_MULTIPLIER are both magic numbers.
 // Some characters (such as emojis and other unicode characters) may consist of multiple code points in which case the width would be inaccurate (but larger than needed).
-export const VirtualizedSelectMenu: FC<MenuListProps<SelectableValue>> = ({
+export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }: MenuListProps<SelectableValue>) => {
-  children,
-  maxHeight,
-  options,
-  getValue,
-}) => {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
   const [value] = getValue();
@@ -91,7 +86,7 @@ interface SelectMenuOptionProps<T> {
   data: SelectableValue<T>;
 }
 
-export const SelectMenuOptions: FC<SelectMenuOptionProps<any>> = ({
+export const SelectMenuOptions = ({
   children,
   data,
   innerProps,
@@ -99,7 +94,7 @@ export const SelectMenuOptions: FC<SelectMenuOptionProps<any>> = ({
   isFocused,
   isSelected,
   renderOptionLabel,
-}) => {
+}: React.PropsWithChildren<SelectMenuOptionProps<any>>) => {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
   const icon = data.icon ? toIconName(data.icon) : undefined;

packages/grafana-ui/src/components/Typeahead/Typeahead.tsx

@@ -209,10 +209,10 @@ interface PortalProps {
   style: string;
 }
 
-class Portal extends PureComponent<PortalProps, {}> {
+class Portal extends PureComponent<React.PropsWithChildren<PortalProps>, {}> {
   node: HTMLElement;
 
-  constructor(props: PortalProps) {
+  constructor(props: React.PropsWithChildren<PortalProps>) {
     super(props);
     const { index = 0, origin = 'query', style } = props;
     this.node = document.createElement('div');

packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx

@@ -34,7 +34,7 @@ export interface VizTooltipProps {
   content?: React.ReactElement;
 
   /** Optional component to be used as a tooltip content */
-  tooltipComponent?: React.ComponentType<VizTooltipContentProps>;
+  tooltipComponent?: React.ComponentType<React.PropsWithChildren<VizTooltipContentProps>>;
 
   /** x/y position relative to the window */
   position?: { x: number; y: number };
@@ -51,7 +51,7 @@ export interface VizTooltipProps {
 /**
  * @public
  */
-export const VizTooltip: React.FC<VizTooltipProps> = ({ content, position, offset }) => {
+export const VizTooltip = ({ content, position, offset }: VizTooltipProps) => {
   const styles = useStyles(getStyles);
   if (position) {
     return (

packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx

@@ -9,7 +9,7 @@ interface MarkerProps {
 
 // An abstraction over a component rendered within a chart canvas.
 // Marker is rendered with DOM coords of the chart bounding box.
-export const Marker: React.FC<MarkerProps> = ({ x, y, children }) => {
+export const Marker = ({ x, y, children }: React.PropsWithChildren<MarkerProps>) => {
   return (
     <div
       style={{

packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx

@@ -10,7 +10,7 @@ interface XYCanvasProps {
  * Renders absolutely positioned element on top of the uPlot's plotting area (axes are not included!).
  * Useful when you want to render some overlay with canvas-independent elements on top of the plot.
  */
-export const XYCanvas: React.FC<XYCanvasProps> = ({ children, left, top }) => {
+export const XYCanvas = ({ children, left, top }: React.PropsWithChildren<XYCanvasProps>) => {
   const className = useMemo(() => {
     return css`
       position: absolute;

packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx

@@ -4,12 +4,13 @@ import React from 'react';
 
 import { RenderFunction } from '../../types';
 
-const StoryContainer: React.FC<{ width?: number; height?: number; showBoundaries: boolean }> = ({
+interface Props {
-  children,
+  width?: number;
-  width,
+  height?: number;
-  height,
+  showBoundaries: boolean;
-  showBoundaries,
+}
-}) => {
+
+const StoryContainer = ({ width, height, showBoundaries, children }: React.PropsWithChildren<Props>) => {
   const checkColor = '#f0f0f0';
   const finalWidth = width ? `${width}px` : '100%';
   const finalHeight = height !== 0 ? `${height}px` : 'auto';

public/app/core/components/ForgottenPassword/ForgottenPassword.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
@@ -18,7 +18,7 @@ const paragraphStyles = (theme: GrafanaTheme) => css`
   display: block;
 `;
 
-export const ForgottenPassword: FC = () => {
+export const ForgottenPassword = () => {
   const [emailSent, setEmailSent] = useState(false);
   const styles = useStyles(paragraphStyles);
   const loginHref = `${config.appSubUrl}/login`;

public/app/core/components/ForgottenPassword/SendResetMailPage.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { LoginLayout, InnerBox } from '../Login/LoginLayout';
 
 import { ForgottenPassword } from './ForgottenPassword';
 
-export const SendResetMailPage: FC = () => (
+export const SendResetMailPage = () => (
   <LoginLayout>
     <InnerBox>
       <ForgottenPassword />

public/app/core/components/Login/LoginLayout.tsx

@@ -1,5 +1,5 @@
 import { cx, css, keyframes } from '@emotion/css';
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, styleMixins } from '@grafana/ui';
@@ -11,7 +11,7 @@ import { Footer } from '../Footer/Footer';
 interface InnerBoxProps {
   enterAnimation?: boolean;
 }
-export const InnerBox: FC<InnerBoxProps> = ({ children, enterAnimation = true }) => {
+export const InnerBox = ({ children, enterAnimation = true }: React.PropsWithChildren<InnerBoxProps>) => {
   const loginStyles = useStyles2(getLoginStyles);
   return <div className={cx(loginStyles.loginInnerBox, enterAnimation && loginStyles.enterAnimation)}>{children}</div>;
 };
@@ -21,7 +21,7 @@ export interface LoginLayoutProps {
   branding?: BrandingSettings;
 }
 
-export const LoginLayout: FC<LoginLayoutProps> = ({ children, branding }) => {
+export const LoginLayout = ({ children, branding }: React.PropsWithChildren<LoginLayoutProps>) => {
   const loginStyles = useStyles2(getLoginStyles);
   const [startAnim, setStartAnim] = useState(false);
   const subTitle = branding?.loginSubtitle ?? Branding.GetLoginSubTitle();

public/app/core/components/Login/LoginPage.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 // Components
 import { HorizontalGroup, LinkButton } from '@grafana/ui';
@@ -20,7 +20,7 @@ const forgottenPasswordStyles = css`
   margin-top: 4px;
 `;
 
-export const LoginPage: FC = () => {
+export const LoginPage = () => {
   document.title = Branding.AppTitle;
   return (
     <LoginLayout>

public/app/core/components/Signup/VerifyEmail.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { getBackendSrv } from '@grafana/runtime';
 import { Form, Field, Input, Button, Legend, Container, HorizontalGroup, LinkButton } from '@grafana/ui';
@@ -9,7 +9,7 @@ interface EmailDTO {
   email: string;
 }
 
-export const VerifyEmail: FC = () => {
+export const VerifyEmail = () => {
   const notifyApp = useAppNotification();
   const [emailSent, setEmailSent] = useState(false);
 

public/app/core/components/Signup/VerifyEmailPage.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { LoginLayout, InnerBox } from '../Login/LoginLayout';
 
 import { VerifyEmail } from './VerifyEmail';
 
-export const VerifyEmailPage: FC = () => {
+export const VerifyEmailPage = () => {
   return (
     <LoginLayout>
       <InnerBox>

public/app/core/components/WithFeatureToggle.tsx

@@ -1,10 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 export interface Props {
   featureToggle: boolean;
 }
 
-export const WithFeatureToggle: FunctionComponent<Props> = ({ featureToggle, children }) => {
+export const WithFeatureToggle = ({ featureToggle, children }: React.PropsWithChildren<Props>) => {
   if (featureToggle === true) {
     return <>{children}</>;
   }

public/app/core/navigation/RouterDebugger.tsx

@@ -6,7 +6,7 @@ import { PageContents } from '../components/Page/PageContents';
 
 import { RouteDescriptor } from './types';
 
-export const RouterDebugger: React.FC<any> = () => {
+export const RouterDebugger = () => {
   const manualRoutes: RouteDescriptor[] = [];
   return (
     <PageContents>

public/app/features/admin/LicenseChrome.tsx

@@ -77,7 +77,7 @@ interface CircleProps {
   style?: React.CSSProperties;
 }
 
-export const Circle: React.FC<CircleProps> = ({ size, style, children }) => {
+export const Circle = ({ size, style, children }: React.PropsWithChildren<CircleProps>) => {
   return (
     <div
       style={{

public/app/features/admin/UpgradePage.tsx

@@ -36,7 +36,7 @@ interface UpgradeInfoProps {
   editionNotice?: string;
 }
 
-export const UpgradeInfo: React.FC<UpgradeInfoProps> = ({ editionNotice }) => {
+export const UpgradeInfo = ({ editionNotice }: UpgradeInfoProps) => {
   const styles = useStyles2(getStyles);
 
   return (
@@ -70,7 +70,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-const GetEnterprise: React.FC = () => {
+const GetEnterprise = () => {
   return (
     <div style={{ marginTop: '40px', marginBottom: '30px' }}>
       <h2 style={titleStyles}>Get Grafana Enterprise</h2>
@@ -83,7 +83,7 @@ const GetEnterprise: React.FC = () => {
   );
 };
 
-const CallToAction: React.FC = () => {
+const CallToAction = () => {
   return (
     <LinkButton
       variant="primary"
@@ -95,7 +95,7 @@ const CallToAction: React.FC = () => {
   );
 };
 
-const ServiceInfo: React.FC = () => {
+const ServiceInfo = () => {
   return (
     <div>
       <h4>At your service</h4>
@@ -127,7 +127,7 @@ const ServiceInfo: React.FC = () => {
   );
 };
 
-const FeatureInfo: React.FC = () => {
+const FeatureInfo = () => {
   return (
     <div style={{ paddingRight: '11px' }}>
       <h4>Enhanced functionality</h4>
@@ -136,7 +136,7 @@ const FeatureInfo: React.FC = () => {
   );
 };
 
-const FeatureListing: React.FC = () => {
+const FeatureListing = () => {
   return (
     <List>
       <Item title="Data source permissions" />
@@ -182,7 +182,7 @@ interface ListProps {
   nested?: boolean;
 }
 
-const List: React.FC<ListProps> = ({ children, nested }) => {
+const List = ({ children, nested }: React.PropsWithChildren<ListProps>) => {
   const listStyle = css`
     display: flex;
     flex-direction: column;
@@ -201,7 +201,7 @@ interface ItemProps {
   image?: string;
 }
 
-const Item: React.FC<ItemProps> = ({ children, title, image }) => {
+const Item = ({ children, title, image }: React.PropsWithChildren<ItemProps>) => {
   const imageUrl = image ? image : 'public/img/licensing/checkmark.svg';
   const itemStyle = css`
     display: flex;

public/app/features/admin/UserCreatePage.tsx

@@ -23,7 +23,7 @@ const pageNav: NavModelItem = {
   breadcrumbs: [{ title: 'Server admin', url: 'admin/users' }],
 };
 
-const UserCreatePage: React.FC = () => {
+const UserCreatePage = () => {
   const history = useHistory();
 
   const onSubmit = useCallback(

public/app/features/admin/UserOrgs.tsx

@@ -462,7 +462,7 @@ export function ChangeOrgButton({
   );
 }
 
-const ExternalUserTooltip: React.FC = () => {
+const ExternalUserTooltip = () => {
   const theme = useTheme();
   const styles = getTooltipStyles(theme);
 

public/app/features/alerting/unified/AmRoutes.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Alert, LoadingPlaceholder, useStyles2, withErrorBoundary } from '@grafana/ui';
@@ -24,7 +24,7 @@ import { amRouteToFormAmRoute, formAmRouteToAmRoute, stringsToSelectableValues }
 import { isVanillaPrometheusAlertManagerDataSource } from './utils/datasource';
 import { initialAsyncRequestState } from './utils/redux';
 
-const AmRoutes: FC = () => {
+const AmRoutes = () => {
   const dispatch = useDispatch();
   const styles = useStyles2(getStyles);
   const [isRootRouteEditMode, setIsRootRouteEditMode] = useState(false);

public/app/features/alerting/unified/Receivers.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import pluralize from 'pluralize';
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Redirect, Route, RouteChildrenProps, Switch, useLocation, useParams } from 'react-router-dom';
 
 import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
@@ -48,7 +48,7 @@ function NotificationError({ errorCount }: NotificationErrorProps) {
   );
 }
 
-const Receivers: FC = () => {
+const Receivers = () => {
   const alertManagers = useAlertManagersByPermission('notification');
   const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(alertManagers);
   const dispatch = useDispatch();

public/app/features/alerting/unified/RuleEditor.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useAsync } from 'react-use';
 
 import { NavModelItem } from '@grafana/data';
@@ -31,7 +31,7 @@ const getPageNav = (state: 'edit' | 'add') => {
   return undefined;
 };
 
-const RuleEditor: FC<RuleEditorProps> = ({ match }) => {
+const RuleEditor = ({ match }: RuleEditorProps) => {
   const dispatch = useDispatch();
   const { id } = match.params;
   const identifier = ruleId.tryParse(id, true);

public/app/features/alerting/unified/Silences.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Redirect, Route, RouteChildrenProps, Switch, useLocation } from 'react-router-dom';
 
 import { Alert, withErrorBoundary } from '@grafana/ui';
@@ -19,7 +19,7 @@ import { fetchAmAlertsAction, fetchSilencesAction } from './state/actions';
 import { SILENCES_POLL_INTERVAL_MS } from './utils/constants';
 import { AsyncRequestState, initialAsyncRequestState } from './utils/redux';
 
-const Silences: FC = () => {
+const Silences = () => {
   const alertManagers = useAlertManagersByPermission('instance');
   const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(alertManagers);
 

public/app/features/alerting/unified/components/AlertingPageWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { NavModelItem } from '@grafana/data';
 import { Page } from 'app/core/components/Page/Page';
@@ -9,7 +9,7 @@ interface Props {
   pageNav?: NavModelItem;
 }
 
-export const AlertingPageWrapper: FC<Props> = ({ children, pageId, pageNav, isLoading }) => {
+export const AlertingPageWrapper = ({ children, pageId, pageNav, isLoading }: React.PropsWithChildren<Props>) => {
   return (
     <Page pageNav={pageNav} navId={pageId}>
       <Page.Contents isLoading={isLoading}>{children}</Page.Contents>

public/app/features/alerting/unified/components/Authorize.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { contextSrv } from 'app/core/services/context_srv';
 import { AccessControlAction } from 'app/types';
@@ -8,7 +8,7 @@ type Props = {
   fallback?: boolean;
 };
 
-export const Authorize: FC<Props> = ({ actions, children, fallback = true }) => {
+export const Authorize = ({ actions, children, fallback = true }: React.PropsWithChildren<Props>) => {
   if (actions.some((action) => contextSrv.hasAccess(action, fallback))) {
     return <>{children}</>;
   } else {

public/app/features/alerting/unified/components/DetailsField.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -10,7 +10,7 @@ interface Props {
   horizontal?: boolean;
 }
 
-export const DetailsField: FC<Props> = ({ className, label, horizontal, children }) => {
+export const DetailsField = ({ className, label, horizontal, children }: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/features/alerting/unified/components/EmptyArea.tsx

@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '@grafana/ui';
 
-export const EmptyArea: FC = ({ children }) => {
+export const EmptyArea = ({ children }: React.PropsWithChildren<{}>) => {
   const styles = useStyles(getStyles);
 
   return <div className={styles.container}>{children}</div>;

public/app/features/alerting/unified/components/InvalidIntervalWarning.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { config } from '@grafana/runtime';
 import { Alert } from '@grafana/ui';
 
-const EvaluationIntervalLimitExceeded: FC = () => (
+const EvaluationIntervalLimitExceeded = () => (
   <Alert severity="warning" title="Global evalutation interval limit exceeded">
     A minimum evaluation interval of <strong>{config.unifiedAlerting.minInterval}</strong> has been configured in
     Grafana.

public/app/features/alerting/unified/components/StateColoredText.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -9,7 +9,7 @@ type Props = {
   status: PromAlertingRuleState | 'neutral';
 };
 
-export const StateColoredText: FC<Props> = ({ children, status }) => {
+export const StateColoredText = ({ children, status }: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
 
   return <span className={styles[status]}>{children || status}</span>;

public/app/features/alerting/unified/components/StateTag.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -11,7 +11,7 @@ type Props = {
   size?: 'md' | 'sm';
 };
 
-export const StateTag: FC<Props> = ({ children, state, size = 'md' }) => {
+export const StateTag = ({ children, state, size = 'md' }: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
 
   return <span className={cx(styles.common, styles[state], styles[size])}>{children || state}</span>;

public/app/features/alerting/unified/components/receivers/ReceiversSection.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -14,7 +14,7 @@ interface Props {
   showButton?: boolean;
 }
 
-export const ReceiversSection: FC<Props> = ({
+export const ReceiversSection = ({
   className,
   title,
   description,
@@ -22,7 +22,7 @@ export const ReceiversSection: FC<Props> = ({
   addButtonTo,
   children,
   showButton = true,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
   return (
     <>

public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { IconSize, useStyles2 } from '@grafana/ui';
@@ -13,7 +13,13 @@ interface Props {
   size?: IconSize;
 }
 
-export const CollapsibleSection: FC<Props> = ({ label, description, children, className, size = 'xl' }) => {
+export const CollapsibleSection = ({
+  label,
+  description,
+  children,
+  className,
+  size = 'xl',
+}: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
   const [isCollapsed, setIsCollapsed] = useState(true);
 

public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme } from '@grafana/data';
@@ -9,7 +9,7 @@ import { RuleFormValues } from '../../types/rule-form';
 
 import { AnnotationKeyInput } from './AnnotationKeyInput';
 
-const AnnotationsField: FC = () => {
+const AnnotationsField = () => {
   const styles = useStyles(getStyles);
   const {
     control,

public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme } from '@grafana/data';
@@ -11,7 +11,7 @@ import { timeOptions } from '../../utils/time';
 import { PreviewRule } from './PreviewRule';
 import { RuleEditorSection } from './RuleEditorSection';
 
-export const CloudEvaluationBehavior: FC = () => {
+export const CloudEvaluationBehavior = () => {
   const styles = useStyles(getStyles);
   const {
     register,

public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { RegisterOptions, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -75,7 +75,7 @@ export const evaluateEveryValidationOptions: RegisterOptions = {
   },
 };
 
-export const GrafanaEvaluationBehavior: FC = () => {
+export const GrafanaEvaluationBehavior = () => {
   const styles = useStyles2(getStyles);
   const [showErrorHandling, setShowErrorHandling] = useState(false);
   const {

public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Card, Link, useStyles2, useTheme2 } from '@grafana/ui';
@@ -7,7 +7,7 @@ import { Card, Link, useStyles2, useTheme2 } from '@grafana/ui';
 import LabelsField from './LabelsField';
 import { RuleEditorSection } from './RuleEditorSection';
 
-export const NotificationsStep: FC = () => {
+export const NotificationsStep = () => {
   const [hideFlowChart, setHideFlowChart] = useState(false);
   const styles = useStyles2(getStyles);
   const theme = useTheme2();

public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx

@@ -150,7 +150,7 @@ export const QueryWrapper: FC<Props> = ({
   );
 };
 
-export const EmptyQueryWrapper: FC<{}> = ({ children }) => {
+export const EmptyQueryWrapper = ({ children }: React.PropsWithChildren<{}>) => {
   const styles = useStyles2(getStyles);
   return <div className={styles.wrapper}>{children}</div>;
 };

public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { FieldSet, useStyles2 } from '@grafana/ui';
@@ -10,7 +10,12 @@ export interface RuleEditorSectionProps {
   description?: string;
 }
 
-export const RuleEditorSection: FC<RuleEditorSectionProps> = ({ title, stepNo, children, description }) => {
+export const RuleEditorSection = ({
+  title,
+  stepNo,
+  children,
+  description,
+}: React.PropsWithChildren<RuleEditorSectionProps>) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/features/alerting/unified/components/rule-editor/rule-types/DisabledTooltip.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Tooltip } from '@grafana/ui';
 
@@ -6,7 +6,7 @@ type Props = {
   visible: boolean;
 };
 
-const DisabledTooltip: FC<Props> = ({ children, visible = false }) => {
+const DisabledTooltip = ({ children, visible = false }: React.PropsWithChildren<Props>) => {
   if (!visible) {
     return <>{children}</>;
   }

public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { logInfo } from '@grafana/runtime';
 import { CallToActionCard } from '@grafana/ui';
@@ -7,7 +7,7 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { LogMessages } from '../../Analytics';
 import { useRulesAccess } from '../../utils/accessControlHooks';
 
-export const NoRulesSplash: FC = () => {
+export const NoRulesSplash = () => {
   const { canCreateGrafanaRules, canCreateCloudRules } = useRulesAccess();
 
   if (canCreateGrafanaRules || canCreateCloudRules) {

public/app/features/alerting/unified/components/rules/StateHistory.tsx

@@ -178,7 +178,7 @@ function renderTimestampCell(item: StateHistoryRow) {
   );
 }
 
-const LabelsWrapper: FC<{}> = ({ children }) => {
+const LabelsWrapper = ({ children }: React.PropsWithChildren<{}>) => {
   const { wrapper } = useStyles2(getStyles);
   return <div className={wrapper}>{children}</div>;
 };

public/app/features/correlations/components/Table/ExpanderCell.tsx

@@ -10,13 +10,15 @@ const expanderContainerStyles = css`
   height: 100%;
 `;
 
-export const ExpanderCell = ({ row }: CellProps<object, void>) => (
+export function ExpanderCell<K extends object>({ row }: CellProps<K, void>) {
-  <div className={expanderContainerStyles}>
+  return (
-    <IconButton
+    <div className={expanderContainerStyles}>
-      // @ts-expect-error react-table doesn't ship with useExpanded types and we can't use declaration merging without affecting the table viz
+      <IconButton
-      name={row.isExpanded ? 'angle-down' : 'angle-right'}
+        // @ts-expect-error react-table doesn't ship with useExpanded types and we can't use declaration merging without affecting the table viz
-      // @ts-expect-error same as the line above
+        name={row.isExpanded ? 'angle-down' : 'angle-right'}
-      {...row.getToggleRowExpandedProps({})}
+        // @ts-expect-error same as the line above
-    />
+        {...row.getToggleRowExpandedProps({})}
-  </div>
+      />
-);
+    </div>
+  );
+}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, MouseEvent, ReactElement, useCallback, useState } from 'react';
+import React, { HTMLAttributes, MouseEvent, ReactElement, useCallback, useState } from 'react';
 
 import { CartesianCoords2D } from '@grafana/data';
 
@@ -7,11 +7,11 @@ interface PanelHeaderMenuTriggerApi {
   closeMenu: () => void;
 }
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: (props: PanelHeaderMenuTriggerApi) => ReactElement;
 }
 
-export const PanelHeaderMenuTrigger: FC<Props> = ({ children, ...divProps }) => {
+export const PanelHeaderMenuTrigger = ({ children, ...divProps }: Props) => {
   const [clickCoordinates, setClickCoordinates] = useState<CartesianCoords2D>({ x: 0, y: 0 });
   const [panelMenuOpen, setPanelMenuOpen] = useState<boolean>(false);
 

public/app/features/inspector/DetailText.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '@grafana/ui';
@@ -11,7 +11,7 @@ const getStyles = (theme: GrafanaTheme) => css`
   color: ${theme.colors.textWeak};
 `;
 
-export const DetailText: FC = ({ children }) => {
+export const DetailText = ({ children }: React.PropsWithChildren<{}>) => {
   const collapsedTextStyles = useStyles(getStyles);
   return <p className={collapsedTextStyles}>{children}</p>;
 };

public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx

@@ -51,9 +51,9 @@ export const DeleteLibraryPanelModal: FC<Props> = ({ libraryPanel, onDismiss, on
   );
 };
 
-const LoadingIndicator: FC = () => <span>Loading library panel...</span>;
+const LoadingIndicator = () => <span>Loading library panel...</span>;
 
-const Confirm: FC = () => {
+const Confirm = () => {
   const styles = useStyles(getModalStyles);
 
   return <div className={styles.modalText}>Do you want to delete this panel?</div>;

public/app/features/manage-dashboards/components/SnapshotListTable.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
 import { getBackendSrv, locationService } from '@grafana/runtime';
@@ -16,7 +16,7 @@ export function getSnapshots() {
       }));
     });
 }
-export const SnapshotListTable: FC = () => {
+export const SnapshotListTable = () => {
   const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
   const [removeSnapshot, setRemoveSnapshot] = useState<Snapshot | undefined>();
   const currentPath = locationService.getLocation().pathname;

public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx

@@ -17,7 +17,7 @@ interface Props {
   description?: string;
 }
 
-export const PanelTypeCard: React.FC<Props> = ({
+export const PanelTypeCard = ({
   isCurrent,
   title,
   plugin,
@@ -27,7 +27,7 @@ export const PanelTypeCard: React.FC<Props> = ({
   showBadge,
   description,
   children,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
   const isDisabled = disabled || plugin.state === PluginState.deprecated;
   const cssClass = cx({
@@ -157,7 +157,7 @@ interface PanelPluginBadgeProps {
   plugin: PanelPluginMeta;
 }
 
-const PanelPluginBadge: React.FC<PanelPluginBadgeProps> = ({ plugin }) => {
+const PanelPluginBadge = ({ plugin }: PanelPluginBadgeProps) => {
   if (isUnsignedPluginSignature(plugin.signature)) {
     return <PluginSignatureBadge status={plugin.signature} />;
   }

public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx

@@ -44,7 +44,7 @@ export function PluginSignatureDetailsBadge({ signatureType, signatureOrg = '' }
   );
 }
 
-export const DetailsBadge: React.FC = ({ children }) => {
+export const DetailsBadge = ({ children }: React.PropsWithChildren<{}>) => {
   const styles = useStyles2(getStyles);
 
   return <Badge color="green" className={styles.badge} text={<>{children}</>} />;

public/app/features/plugins/sql/components/ErrorBoundary.tsx

@@ -4,8 +4,8 @@ type Props = {
   fallBackComponent?: React.ReactNode;
 };
 
-export class ErrorBoundary extends React.Component<Props, { hasError: boolean }> {
+export class ErrorBoundary extends React.Component<React.PropsWithChildren<Props>, { hasError: boolean }> {
-  constructor(props: Props) {
+  constructor(props: React.PropsWithChildren<Props>) {
     super(props);
     this.state = { hasError: false };
   }

public/app/features/profile/UserProfileEditForm.tsx

@@ -91,7 +91,7 @@ export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfi
 
 export default UserProfileEditForm;
 
-const InputSuffix: FC = () => {
+const InputSuffix = () => {
   return disableLoginForm ? (
     <Tooltip content="Login details locked because they are managed in another system.">
       <Icon name="lock" />

public/app/features/query/components/HelpToggle.tsx

@@ -10,7 +10,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   `,
 }));
 
-export const HelpToggle: React.FunctionComponent = ({ children }) => {
+export const HelpToggle = ({ children }: React.PropsWithChildren<{}>) => {
   const [isHelpVisible, setIsHelpVisible] = useState(false);
   const theme = useTheme();
   const styles = getStyles(theme);

public/app/features/sandbox/BenchmarksPage.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { VerticalGroup } from '@grafana/ui';
 import { EmotionPerfTest } from '@grafana/ui/src/components/ThemeDemos/EmotionPerfTest';
 
-export const BenchmarksPage: FC = () => {
+export const BenchmarksPage = () => {
   return (
     <VerticalGroup>
       <EmotionPerfTest />

public/app/features/sandbox/TestStuffPage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useObservable } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -26,7 +26,7 @@ interface State {
   data?: PanelData;
 }
 
-export const TestStuffPage: FC = () => {
+export const TestStuffPage = () => {
   const [state, setState] = useState<State>(getDefaultState());
   const { queryOptions, queryRunner } = state;
 

public/app/features/search/components/SearchWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import React, { memo } from 'react';
 
 import { config } from '@grafana/runtime';
 import { useUrlParams } from 'app/core/navigation/hooks';
@@ -6,7 +6,7 @@ import { useUrlParams } from 'app/core/navigation/hooks';
 import { DashboardSearch } from './DashboardSearch';
 import { DashboardSearchModal } from './DashboardSearchModal';
 
-export const SearchWrapper: FC = memo(() => {
+export const SearchWrapper = memo(() => {
   const [params] = useUrlParams();
   const isOpen = params.get('search') === 'open';
   const isTopnav = config.featureToggles.topnav;

public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import React from 'react';
 
-export const AnnotationsHelp: FC = () => {
+export const AnnotationsHelp = () => {
   return (
     <div className="gf-form grafana-info-box alert-info">
       <div>

public/test/helpers/TestProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const TestProvider: React.FC = ({ children }) => {
+const TestProvider = ({ children }: React.PropsWithChildren<{}>) => {
   return <>{children}</>;
 };