Chore: Avoid explicit React.FunctionComponent<Props> when possible (round 3) (#64839)

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

@@ -12,12 +12,7 @@ export interface CallToActionCardProps {
   className?: string;
 }
 
-export const CallToActionCard: React.FunctionComponent<CallToActionCardProps> = ({
-  message,
-  callToActionElement,
-  footer,
-  className,
-}) => {
+export const CallToActionCard = ({ message, callToActionElement, footer, className }: CallToActionCardProps) => {
   const css = useStyles2(getStyles);
 
   return (

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { Property } from 'csstype';
 import { upperFirst } from 'lodash';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, ThemeVizHue } from '@grafana/data';
 
@@ -17,12 +17,7 @@ interface NamedColorsGroupProps {
   key?: string;
 }
 
-const NamedColorsGroup: FunctionComponent<NamedColorsGroupProps> = ({
-  hue,
-  selectedColor,
-  onColorSelect,
-  ...otherProps
-}) => {
+const NamedColorsGroup = ({ hue, selectedColor, onColorSelect, ...otherProps }: NamedColorsGroupProps) => {
   const label = upperFirst(hue.name);
   const styles = useStyles2(getStyles);
 

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { withTheme2, useStyles2 } from '../../themes';
 import { Switch } from '../Forms/Legacy/Switch/Switch';
@@ -12,7 +12,7 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Popover
   onToggleAxis?: () => void;
 }
 
-export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = (props) => {
+export const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) => {
   const styles = useStyles2(getStyles);
   const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
 

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

@@ -15,7 +15,7 @@ export interface SpectrumPaletteProps {
   onChange: (color: string) => void;
 }
 
-const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color, onChange }) => {
+const SpectrumPalette = ({ color, onChange }: SpectrumPaletteProps) => {
   const [currentColor, setColor] = useState(color);
 
   useThrottleFn(

packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { stylesFactory } from '../../themes';
 
@@ -16,7 +16,7 @@ export interface Props extends ErrorBoundaryApi {
   title: string;
 }
 
-export const ErrorWithStack: FunctionComponent<Props> = ({ error, errorInfo, title }) => (
+export const ErrorWithStack = ({ error, errorInfo, title }: Props) => (
   <div className={getStyles()}>
     <h2>{title}</h2>
     <details style={{ whiteSpace: 'pre-wrap' }}>

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

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { InputHTMLAttributes, FunctionComponent } from 'react';
+import React, { InputHTMLAttributes } from 'react';
 
 import { InlineFormLabel } from '../FormLabel/FormLabel';
 import { PopoverContent } from '../Tooltip';
@@ -24,7 +24,7 @@ const defaultProps = {
  * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
  * custom inputEl if required in which case inputWidth and inputProps are ignored.
  */
-export const FormField: FunctionComponent<Props> = ({
+export const FormField = ({
   label,
   tooltip,
   labelWidth,
@@ -33,7 +33,7 @@ export const FormField: FunctionComponent<Props> = ({
   className,
   interactive,
   ...inputProps
-}) => {
+}: Props) => {
   const styles = getStyles();
   return (
     <div className={cx(styles.formField, className)}>

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { Icon } from '../Icon/Icon';
 import { Tooltip, PopoverContent } from '../Tooltip';
@@ -16,7 +16,7 @@ interface Props {
   interactive?: boolean;
 }
 
-export const FormLabel: FunctionComponent<Props> = ({
+export const FormLabel = ({
   children,
   isFocused,
   isInvalid,
@@ -26,7 +26,7 @@ export const FormLabel: FunctionComponent<Props> = ({
   width,
   interactive,
   ...rest
-}) => {
+}: Props) => {
   const classes = classNames(className, `gf-form-label width-${width ? width : '10'}`, {
     'gf-form-label--is-focused': isFocused,
     'gf-form-label--is-invalid': isInvalid,

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

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -24,7 +24,7 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
   as?: React.ElementType;
 }
 
-export const InlineLabel: FunctionComponent<Props> = ({
+export const InlineLabel = ({
   children,
   className,
   tooltip,
@@ -33,7 +33,7 @@ export const InlineLabel: FunctionComponent<Props> = ({
   interactive,
   as: Component = 'label',
   ...rest
-}) => {
+}: Props) => {
   const styles = useStyles2(
     useCallback((theme) => getInlineLabelStyles(theme, transparent, width), [transparent, width])
   );

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

@@ -47,7 +47,7 @@ const shouldHideLegendItem = (data: GraphSeriesValue[][], hideEmpty = false, hid
   return (hideEmpty && isNullOnlySeries) || (hideZero && isZeroOnlySeries);
 };
 
-export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (props: GraphWithLegendProps) => {
+export const GraphWithLegend = (props: GraphWithLegendProps) => {
   const {
     series,
     timeRange,

packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -60,7 +60,7 @@ export interface Props {
 }
 
 /** @deprecated will be removed in the next major version */
-export const LogLabelStatsRow: FunctionComponent<Props> = ({ active, count, proportion, value }) => {
+export const LogLabelStatsRow = ({ active, count, proportion, value }: Props) => {
   const style = useStyles2(getStyles);
   const percent = `${Math.round(proportion * 100)}%`;
   const barStyle = { width: percent };

packages/grafana-ui/src/components/Logs/LogLabels.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, Labels } from '@grafana/data';
 
@@ -13,7 +13,7 @@ interface Props {
 }
 
 /** @deprecated will be removed in the next major version */
-export const LogLabels: FunctionComponent<Props> = ({ labels }) => {
+export const LogLabels = ({ labels }: Props) => {
   const styles = useStyles2(getStyles);
   const displayLabels = Object.keys(labels).filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label));
 

packages/grafana-ui/src/components/Logs/LogRowContext.tsx

@@ -88,12 +88,7 @@ interface LogRowContextGroupProps extends LogRowContextGroupHeaderProps {
   error?: string;
 }
 
-const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeaderProps> = ({
-  row,
-  rows,
-  onLoadMoreContext,
-  canLoadMoreRows,
-}) => {
+const LogRowContextGroupHeader = ({ row, rows, onLoadMoreContext, canLoadMoreRows }: LogRowContextGroupHeaderProps) => {
   const { header } = useStyles2(getLogRowContextStyles);
 
   return (
@@ -124,7 +119,7 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
 };
 
 /** @deprecated will be removed in the next major version */
-export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
+export const LogRowContextGroup = ({
   row,
   rows,
   error,
@@ -132,7 +127,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
   shouldScrollToBottom,
   canLoadMoreRows,
   onLoadMoreContext,
-}) => {
+}: LogRowContextGroupProps) => {
   const { commonStyles, logs } = useStyles2(getLogRowContextStyles);
   const [scrollTop, setScrollTop] = useState(0);
   const listContainerRef = useRef<HTMLDivElement>(null);
@@ -186,7 +181,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
 };
 
 /** @deprecated will be removed in the next major version */
-export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
+export const LogRowContext = ({
   row,
   context,
   errors,
@@ -194,7 +189,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
   onLoadMoreContext,
   hasMoreContextRows,
   wrapLogMessage,
-}) => {
+}: LogRowContextProps) => {
   useEffect(() => {
     const handleEscKeyDown = (e: KeyboardEvent): void => {
       if (e.keyCode === 27) {

packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
 import {
@@ -137,12 +137,7 @@ export const getRowContexts = async (
 };
 
 /** @deprecated will be removed in the next major version */
-export const LogRowContextProvider: React.FunctionComponent<LogRowContextProviderProps> = ({
-  getRowContext,
-  row,
-  children,
-  logsSortOrder,
-}) => {
+export const LogRowContextProvider = ({ getRowContext, row, children, logsSortOrder }: LogRowContextProviderProps) => {
   // React Hook that creates a number state value called limit to component state and a setter function called setLimit
   // The initial value for limit is 10
   // Used for the number of rows to retrieve from backend from a specific point in time

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

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { omit } from 'lodash';
-import React, { InputHTMLAttributes, FunctionComponent } from 'react';
+import React, { InputHTMLAttributes } from 'react';
 
 import { Button } from '../Button/Button';
 import { FormField } from '../FormField/FormField';
@@ -39,7 +39,7 @@ const getSecretFormFieldStyles = () => {
  * form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted
  * to the user (like datasource passwords).
  */
-export const SecretFormField: FunctionComponent<Props> = ({
+export const SecretFormField = ({
   label = 'Password',
   labelWidth,
   inputWidth = 12,

packages/grafana-ui/src/components/Slider/RangeSlider.tsx

@@ -1,7 +1,7 @@
 import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import Slider, { SliderProps } from 'rc-slider';
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { useTheme2 } from '../../themes/ThemeContext';
 
@@ -14,7 +14,7 @@ import { RangeSliderProps } from './types';
  *
  * RichHistoryQueriesTab uses this Range Component
  */
-export const RangeSlider: FunctionComponent<RangeSliderProps> = ({
+export const RangeSlider = ({
   min,
   max,
   onChange,
@@ -25,7 +25,7 @@ export const RangeSlider: FunctionComponent<RangeSliderProps> = ({
   formatTooltipResult,
   value,
   tooltipAlwaysVisible = true,
-}) => {
+}: RangeSliderProps) => {
   const handleChange = useCallback(
     (v: number | number[]) => {
       const value = typeof v === 'number' ? [v, v] : v;

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

@@ -1,7 +1,7 @@
 import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import SliderComponent from 'rc-slider';
-import React, { useState, useCallback, ChangeEvent, FunctionComponent, FocusEvent } from 'react';
+import React, { useState, useCallback, ChangeEvent, FocusEvent } from 'react';
 
 import { useTheme2 } from '../../themes/ThemeContext';
 import { Input } from '../Input/Input';
@@ -12,7 +12,7 @@ import { SliderProps } from './types';
 /**
  * @public
  */
-export const Slider: FunctionComponent<SliderProps> = ({
+export const Slider = ({
   min,
   max,
   onChange,
@@ -24,7 +24,7 @@ export const Slider: FunctionComponent<SliderProps> = ({
   ariaLabelForHandle,
   marks,
   included,
-}) => {
+}: SliderProps) => {
   const isHorizontal = orientation === 'horizontal';
   const theme = useTheme2();
   const styles = getStyles(theme, isHorizontal, Boolean(marks));

packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx

@@ -7,10 +7,14 @@ import { DisplayValue, formattedValueToString } from '@grafana/data';
 import { useStyles2 } from '../../themes/ThemeContext';
 import { InlineList } from '../List/InlineList';
 
+interface Props {
+  stats: DisplayValue[];
+}
+
 /**
  * @internal
  */
-export const VizLegendStatsList: React.FunctionComponent<{ stats: DisplayValue[] }> = ({ stats }) => {
+export const VizLegendStatsList = ({ stats }: Props) => {
   const styles = useStyles2(getStyles);
 
   if (stats.length === 0) {

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

@@ -28,14 +28,14 @@ export interface Props {
 /**
  * @internal
  */
-export const LegendTableItem: React.FunctionComponent<Props> = ({
+export const LegendTableItem = ({
   item,
   onLabelClick,
   onLabelMouseOver,
   onLabelMouseOut,
   className,
   readonly,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   const onMouseOver = useCallback(

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

@@ -6,7 +6,7 @@ interface CenteredStoryProps {
   horizontal?: boolean;
   vertical?: boolean;
 }
-const CenteredStory: React.FunctionComponent<CenteredStoryProps> = ({ horizontal, vertical, children }) => {
+const CenteredStory = ({ horizontal, vertical, children }: CenteredStoryProps) => {
   return (
     <div
       style={{

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -28,7 +28,7 @@ const infoBoxStyles = css`
   margin: 0 auto;
 `;
 
-const EmptyListCTA: React.FunctionComponent<Props> = ({
+const EmptyListCTA = ({
   title,
   buttonIcon,
   buttonLink,
@@ -41,7 +41,7 @@ const EmptyListCTA: React.FunctionComponent<Props> = ({
   proTipTarget,
   infoBox,
   infoBoxTitle,
-}) => {
+}: Props) => {
   const footer = () => {
     return (
       <>

public/app/features/dashboard/components/DashNav/DashNavButton.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import { css } from '@emotion/css';
-import React, { FunctionComponent, MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 
 // Components
 import { GrafanaTheme2 } from '@grafana/data';
@@ -16,7 +16,7 @@ interface Props {
   iconSize?: IconSize;
 }
 
-export const DashNavButton: FunctionComponent<Props> = ({ icon, iconType, iconSize, tooltip, onClick, children }) => {
+export const DashNavButton = ({ icon, iconType, iconSize, tooltip, onClick, children }: Props) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/features/dashboard/components/SubMenu/Annotations.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { AnnotationQuery, DataQuery, EventBus } from '@grafana/data';
 
@@ -10,7 +10,7 @@ interface Props {
   onAnnotationChanged: (annotation: AnnotationQuery<DataQuery>) => void;
 }
 
-export const Annotations: FunctionComponent<Props> = ({ annotations, onAnnotationChanged, events }) => {
+export const Annotations = ({ annotations, onAnnotationChanged, events }: Props) => {
   const [visibleAnnotations, setVisibleAnnotations] = useState<AnnotationQuery[]>([]);
   useEffect(() => {
     setVisibleAnnotations(annotations.filter((annotation) => annotation.hide !== true));

public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 
@@ -10,7 +10,7 @@ interface Props {
   readOnly?: boolean;
 }
 
-export const SubMenuItems: FunctionComponent<Props> = ({ variables, readOnly }) => {
+export const SubMenuItems = ({ variables, readOnly }: Props) => {
   const [visibleVariables, setVisibleVariables] = useState<VariableModel[]>([]);
 
   useEffect(() => {

public/app/features/explore/ErrorContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { DataQueryError } from '@grafana/data';
 import { Alert } from '@grafana/ui';
@@ -8,7 +8,7 @@ export interface ErrorContainerProps {
   queryError?: DataQueryError;
 }
 
-export const ErrorContainer: FunctionComponent<ErrorContainerProps> = (props) => {
+export const ErrorContainer = (props: ErrorContainerProps) => {
   const { queryError } = props;
   const showError = queryError ? true : false;
   const duration = showError ? 100 : 10;

public/app/features/logs/components/LogLabelStatsRow.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -57,7 +57,7 @@ export interface Props {
   value?: string;
 }
 
-export const LogLabelStatsRow: FunctionComponent<Props> = ({ active, count, proportion, value }) => {
+export const LogLabelStatsRow = ({ active, count, proportion, value }: Props) => {
   const style = useStyles2(getStyles);
   const percent = `${Math.round(proportion * 100)}%`;
   const barStyle = { width: percent };

public/app/features/logs/components/LogLabels.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, Labels } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -11,7 +11,7 @@ interface Props {
   labels: Labels;
 }
 
-export const LogLabels: FunctionComponent<Props> = ({ labels }) => {
+export const LogLabels = ({ labels }: Props) => {
   const styles = useStyles2(getStyles);
   const displayLabels = Object.keys(labels).filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label));
 

public/app/features/logs/components/LogRowContext.tsx

@@ -176,7 +176,7 @@ interface LogRowContextGroupProps extends LogRowContextGroupHeaderProps {
   error?: string;
 }
 
-const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeaderProps> = ({
+const LogRowContextGroupHeader = ({
   row,
   rows,
   onLoadMoreContext,
@@ -186,7 +186,7 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
   getLogRowContextUi,
   runContextQuery,
   onHeightChange,
-}) => {
+}: LogRowContextGroupHeaderProps) => {
   const [height, setHeight] = useState(0);
   const datasourceUiRef = React.createRef<HTMLDivElement>();
   const theme = useTheme2();
@@ -259,7 +259,7 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
   );
 };
 
-export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
+export const LogRowContextGroup = ({
   row,
   rows,
   error,
@@ -272,7 +272,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
   getLogRowContextUi,
   runContextQuery,
   onHeightChange,
-}) => {
+}: LogRowContextGroupProps) => {
   const [height, setHeight] = useState(0);
   const theme = useTheme2();
   const { commonStyles, logs, bottomContext, afterContext } = getLogRowContextStyles(theme, undefined, height);
@@ -373,7 +373,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
   );
 };
 
-export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
+export const LogRowContext = ({
   row,
   context,
   errors,
@@ -384,7 +384,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
   wrapLogMessage,
   logsSortOrder,
   getLogRowContextUi,
-}) => {
+}: LogRowContextProps) => {
   useEffect(() => {
     const handleEscKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape' || e.key === 'Esc') {

public/app/features/logs/components/LogRowContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
 import {
@@ -137,12 +137,7 @@ export const getRowContexts = async (
   };
 };
 
-export const LogRowContextProvider: React.FunctionComponent<LogRowContextProviderProps> = ({
-  getRowContext,
-  row,
-  children,
-  logsSortOrder,
-}) => {
+export const LogRowContextProvider = ({ getRowContext, row, children, logsSortOrder }: LogRowContextProviderProps) => {
   // React Hook that creates a number state value called limit to component state and a setter function called setLimit
   // The initial value for limit is 10
   // Used for the number of rows to retrieve from backend from a specific point in time

public/app/features/variables/editor/SelectionOptionsEditor.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FormEvent, FunctionComponent, useCallback } from 'react';
+import React, { ChangeEvent, FormEvent, useCallback } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { VerticalGroup } from '@grafana/ui';
@@ -16,11 +16,11 @@ export interface SelectionOptionsEditorProps<Model extends VariableWithMultiSupp
   onMultiChanged: (identifier: KeyedVariableIdentifier, value: boolean) => void;
 }
 
-export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorProps> = ({
+export const SelectionOptionsEditor = ({
   onMultiChanged: onMultiChangedProps,
   onPropChange,
   variable,
-}) => {
+}: SelectionOptionsEditorProps) => {
   const onMultiChanged = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       onMultiChangedProps(toKeyedVariableIdentifier(variable), event.target.checked);

public/app/features/variables/editor/VariableValuesPreview.tsx

@@ -11,9 +11,7 @@ export interface VariableValuesPreviewProps {
   variable: VariableWithOptions;
 }
 
-export const VariableValuesPreview: React.FunctionComponent<VariableValuesPreviewProps> = ({
-  variable: { options },
-}) => {
+export const VariableValuesPreview = ({ variable: { options } }: VariableValuesPreviewProps) => {
   const [previewLimit, setPreviewLimit] = useState(20);
   const [previewOptions, setPreviewOptions] = useState<VariableOption[]>([]);
   const showMoreOptions = useCallback(

public/app/features/variables/pickers/PickerRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react';
+import React, { PropsWithChildren, ReactElement, useMemo } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Tooltip } from '@grafana/ui';
@@ -11,7 +11,7 @@ interface Props {
   readOnly?: boolean;
 }
 
-export const PickerRenderer: FunctionComponent<Props> = (props) => {
+export const PickerRenderer = (props: Props) => {
   const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]);
 
   if (!props.variable) {

public/app/plugins/datasource/azuremonitor/components/AzureCredentialsForm.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import React, { ChangeEvent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { LegacyForms, Button, Select, InlineField } from '@grafana/ui';
@@ -30,7 +30,7 @@ const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
 
 const LABEL_WIDTH = 18;
 
-export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) => {
+export const AzureCredentialsForm = (props: Props) => {
   const { credentials, azureCloudOptions, onCredentialsChange, disabled, managedIdentityEnabled } = props;
 
   const onAuthTypeChange = (selected: SelectableValue<AzureAuthType>) => {

public/app/plugins/datasource/azuremonitor/components/DefaultSubscription.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useReducer } from 'react';
+import React, { useEffect, useReducer } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { InlineField, Select, Button } from '@grafana/ui';
@@ -19,7 +19,7 @@ export interface Props {
   disabled?: boolean;
 }
 
-export const DefaultSubscription: FunctionComponent<Props> = (props: Props) => {
+export const DefaultSubscription = (props: Props) => {
   const {
     credentials,
     disabled,

public/app/plugins/datasource/azuremonitor/components/MonitorConfig.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -21,7 +21,7 @@ export interface Props {
   getSubscriptions: () => Promise<Array<SelectableValue<string>>>;
 }
 
-export const MonitorConfig: FunctionComponent<Props> = (props: Props) => {
+export const MonitorConfig = (props: Props) => {
   const { updateOptions, getSubscriptions, options } = props;
   const [subscriptions, setSubscriptions] = useState<Array<SelectableValue<string>>>([]);
   const credentials = useMemo(() => getCredentials(props.options), [props.options]);

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

@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import React, { FunctionComponent, useState } from 'react';
+import React, { useState } from 'react';
 
 import { EditorField } from '@grafana/experimental';
 import { Input } from '@grafana/ui';
@@ -10,7 +10,7 @@ export interface Props {
   value?: string;
 }
 
-export const AliasBy: FunctionComponent<Props> = ({ refId, value = '', onChange }) => {
+export const AliasBy = ({ refId, value = '', onChange }: Props) => {
   const [alias, setAlias] = useState(value ?? '');
 
   const propagateOnChange = debounce(onChange, 1000);

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorRow } from '@grafana/experimental';
@@ -15,7 +15,7 @@ export interface Props {
   graphPeriod?: string;
 }
 
-export const GraphPeriod: FunctionComponent<Props> = ({ refId, onChange, graphPeriod, variableOptionGroup }) => {
+export const GraphPeriod = ({ refId, onChange, graphPeriod, variableOptionGroup }: Props) => {
   return (
     <EditorRow>
       <EditorField

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup } from '@grafana/experimental';
@@ -19,14 +19,14 @@ export interface Props {
   query: TimeSeriesList;
 }
 
-export const GroupBy: FunctionComponent<Props> = ({
+export const GroupBy = ({
   refId,
   labels: groupBys = [],
   query,
   onChange,
   variableOptionGroup,
   metricDescriptor,
-}) => {
+}: Props) => {
   const options = useMemo(
     () => [variableOptionGroup, ...labelsToGroupedOptions([...groupBys, ...SYSTEM_LABELS])],
     [groupBys, variableOptionGroup]

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorField, EditorList, EditorRow } from '@grafana/experimental';
@@ -32,12 +32,7 @@ const operators = ['=', '!=', '=~', '!=~'].map(toOption);
 // For example the 'metric.type' is set with the metric name selector.
 const protectedFilterKeys = ['metric.type'];
 
-export const LabelFilter: FunctionComponent<Props> = ({
-  labels = {},
-  filters: filterArray,
-  onChange: _onChange,
-  variableOptionGroup,
-}) => {
+export const LabelFilter = ({ labels = {}, filters: filterArray, onChange: _onChange, variableOptionGroup }: Props) => {
   const rawFilters: Filter[] = stringArrayToFilters(filterArray);
   const filters = rawFilters.filter(({ key }) => !protectedFilterKeys.includes(key));
   const protectedFilters = rawFilters.filter(({ key }) => protectedFilterKeys.includes(key));

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField } from '@grafana/experimental';
@@ -15,7 +15,7 @@ export interface Props {
   query: TimeSeriesList;
 }
 
-export const Preprocessor: FunctionComponent<Props> = ({ query, metricDescriptor, onChange }) => {
+export const Preprocessor = ({ query, metricDescriptor, onChange }: Props) => {
   const options = useOptions(metricDescriptor);
 
   return (

public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
@@ -32,7 +32,7 @@ const excludeCurrentKey = (dimensions: Dimensions, currentKey: string | undefine
     return acc;
   }, {});
 
-export const FilterItem: FunctionComponent<Props> = ({
+export const FilterItem = ({
   filter,
   metricStat: { region, namespace, metricName, dimensions, accountId },
   datasource,
@@ -40,7 +40,7 @@ export const FilterItem: FunctionComponent<Props> = ({
   disableExpressions,
   onChange,
   onDelete,
-}) => {
+}: Props) => {
   const dimensionsExcludingCurrentKey = useMemo(
     () => excludeCurrentKey(dimensions ?? {}, filter.key),
     [dimensions, filter]

public/app/plugins/datasource/cloudwatch/components/Forms.tsx

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes, FunctionComponent } from 'react';
+import React, { InputHTMLAttributes } from 'react';
 
 import { InlineFormLabel } from '@grafana/ui';
 
@@ -8,7 +8,7 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   children?: React.ReactNode;
 }
 
-export const QueryField: FunctionComponent<Partial<Props>> = ({ label, tooltip, children }) => (
+export const QueryField = ({ label, tooltip, children }: Partial<Props>) => (
   <>
     <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
       {label}
@@ -17,7 +17,7 @@ export const QueryField: FunctionComponent<Partial<Props>> = ({ label, tooltip,
   </>
 );
 
-export const QueryInlineField: FunctionComponent<Props> = ({ ...props }) => {
+export const QueryInlineField = ({ ...props }: Props) => {
   return (
     <div className={'gf-form-inline'}>
       <QueryField {...props} />

public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx

@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import React, { FunctionComponent, useState } from 'react';
+import React, { useState } from 'react';
 
 import { IconButton, Input, Tooltip } from '@grafana/ui';
 
@@ -9,7 +9,7 @@ export interface Props {
   id?: string;
 }
 
-export const Alias: FunctionComponent<Props> = ({ value = '', onChange, id }) => {
+export const Alias = ({ value = '', onChange, id }: Props) => {
   const [alias, setAlias] = useState(value);
 
   const propagateOnChange = debounce(onChange, 1500);

public/app/plugins/datasource/cloudwatch/components/SQLCodeEditor.tsx

@@ -1,5 +1,5 @@
 import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
-import React, { FunctionComponent, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import { CodeEditor, Monaco } from '@grafana/ui';
 
@@ -15,7 +15,7 @@ export interface Props {
   datasource: CloudWatchDatasource;
 }
 
-export const SQLCodeEditor: FunctionComponent<Props> = ({ region, sql, onChange, datasource }) => {
+export const SQLCodeEditor = ({ region, sql, onChange, datasource }: Props) => {
   useEffect(() => {
     datasource.sqlCompletionItemProvider.setRegion(region);
   }, [region, datasource]);

public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx

@@ -1,10 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 export interface Props {
   region: string;
 }
 
-export const ThrottlingErrorMessage: FunctionComponent<Props> = ({ region }) => (
+export const ThrottlingErrorMessage = ({ region }: Props) => (
   <p>
     Please visit the&nbsp;
     <a

public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { AccessoryButton, InputGroup } from '@grafana/experimental';
@@ -14,7 +14,7 @@ export interface Props {
   keyPlaceholder?: string;
 }
 
-export const MultiFilterItem: FunctionComponent<Props> = ({ filter, onChange, onDelete, keyPlaceholder }) => {
+export const MultiFilterItem = ({ filter, onChange, onDelete, keyPlaceholder }: Props) => {
   const [localKey, setLocalKey] = useState(filter.key || '');
   const [localValue, setLocalValue] = useState(filter.value?.join(', ') || '');
   const theme = useTheme2();

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { AsyncMultiSelect, InlineField, SegmentAsync, Select } from '@grafana/ui';
@@ -16,7 +16,7 @@ interface Props {
 
 const toMultiSelectValue = (value: string): SelectableValue<string> => ({ value, label: value });
 
-export const TopMetricsSettingsEditor: FunctionComponent<Props> = ({ metric }) => {
+export const TopMetricsSettingsEditor = ({ metric }: Props) => {
   const dispatch = useDispatch();
   const getOrderByOptions = useFields(['number', 'date']);
   const getMetricsOptions = useFields(metric.type);

public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, FormEvent, useMemo, useState } from 'react';
+import React, { FormEvent, useMemo, useState } from 'react';
 
 import { config } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, InlineSwitch, Input } from '@grafana/ui';
@@ -8,7 +8,7 @@ import { KnownAzureClouds, AzureCredentials } from './AzureCredentials';
 import { getCredentials, updateCredentials } from './AzureCredentialsConfig';
 import { AzureCredentialsForm } from './AzureCredentialsForm';
 
-export const AzureAuthSettings: FunctionComponent<HttpSettingsBaseProps> = (props: HttpSettingsBaseProps) => {
+export const AzureAuthSettings = (props: HttpSettingsBaseProps) => {
   const { dataSourceConfig, onChange } = props;
 
   const [overrideAudienceAllowed] = useState<boolean>(

public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FunctionComponent, useEffect, useReducer, useState } from 'react';
+import React, { ChangeEvent, useEffect, useReducer, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { InlineFormLabel, Button } from '@grafana/ui/src/components';
@@ -27,7 +27,7 @@ const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
   },
 ];
 
-export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) => {
+export const AzureCredentialsForm = (props: Props) => {
   const { credentials, azureCloudOptions, onCredentialsChange, getSubscriptions, disabled } = props;
   const hasRequiredFields = isCredentialsComplete(credentials);
 

public/app/plugins/panel/barchart/BarChartPanel.tsx

@@ -68,15 +68,7 @@ const propsToDiff: Array<string | PropDiffFn> = [
 
 interface Props extends PanelProps<PanelOptions> {}
 
-export const BarChartPanel: React.FunctionComponent<Props> = ({
-  data,
-  options,
-  fieldConfig,
-  width,
-  height,
-  timeZone,
-  id,
-}) => {
+export const BarChartPanel = ({ data, options, fieldConfig, width, height, timeZone, id }: Props) => {
   const theme = useTheme2();
   const { eventBus } = usePanelContext();
 

public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx

@@ -4,6 +4,6 @@ import { CoreApp, PanelProps } from '@grafana/data';
 
 import FlameGraphContainer from './components/FlameGraphContainer';
 
-export const FlameGraphPanel: React.FunctionComponent<PanelProps> = (props) => {
+export const FlameGraphPanel = (props: PanelProps) => {
   return <FlameGraphContainer data={props.data.series[0]} app={CoreApp.Unknown} flameGraphHeight={props.height} />;
 };

public/app/plugins/panel/logs/LogsPanel.tsx

@@ -24,7 +24,7 @@ import { Options } from './types';
 
 interface LogsPanelProps extends PanelProps<Options> {}
 
-export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
+export const LogsPanel = ({
   data,
   timeZone,
   fieldConfig,
@@ -40,7 +40,7 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
   },
   title,
   id,
-}) => {
+}: LogsPanelProps) => {
   const isAscending = sortOrder === LogsSortOrder.Ascending;
   const style = useStyles2(getStyles(title, isAscending));
   const [scrollTop, setScrollTop] = useState(0);

public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx

@@ -9,12 +9,7 @@ import { NodeGraph } from './NodeGraph';
 import { NodeGraphOptions } from './types';
 import { getNodeGraphDataFrames } from './utils';
 
-export const NodeGraphPanel: React.FunctionComponent<PanelProps<NodeGraphOptions>> = ({
-  width,
-  height,
-  data,
-  options,
-}) => {
+export const NodeGraphPanel = ({ width, height, data, options }: PanelProps<NodeGraphOptions>) => {
   const getLinks = useLinks(data.timeRange);
   if (!data || !data.series.length) {
     return (

public/app/plugins/panel/traces/TracesPanel.tsx

@@ -17,7 +17,7 @@ const styles = {
   `,
 };
 
-export const TracesPanel: React.FunctionComponent<PanelProps> = ({ data }) => {
+export const TracesPanel = ({ data }: PanelProps) => {
   const topOfViewRef = createRef<HTMLDivElement>();
   const traceProp = useMemo(() => transformDataFrames(data.series[0]), [data.series]);
   const { search, setSearch, spanFindMatches } = useSearch(traceProp?.spans);