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={{