Chore: Avoid explicit React.FC<Props> when possible (round 2) (#64749)

.betterer.results

@@ -3955,8 +3955,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -3974,9 +3973,6 @@ exports[`better eslint`] = {
     "public/app/features/transformers/FilterByValueTransformer/ValueMatchers/valueMatchersUI.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/features/transformers/calculateHeatmap/editor/helper.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

contribute/style-guides/styling.md

@@ -48,7 +48,7 @@ interface ComponentAProps {
   isActive: boolean;
 }
 
-const ComponentA: React.FC<ComponentAProps> = ({ isActive }) => {
+const ComponentA = ({ isActive }: ComponentAProps) => {
   const theme = useTheme();
   const styles = useStyles2(theme);
 

docs/sources/developers/plugins/add-support-for-variables.md

@@ -143,7 +143,7 @@ Let's create a custom query editor to allow the user to edit the query model.
      onChange: (query: MyVariableQuery, definition: string) => void;
    }
 
-   export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
+   export const VariableQueryEditor = ({ onChange, query }: VariableQueryProps) => {
      const [state, setState] = useState(query);
 
      const saveQuery = () => {

docs/sources/developers/plugins/custom-panel-option-editors.md

@@ -17,7 +17,7 @@ import React from 'react';
 import { Button } from '@grafana/ui';
 import { StandardEditorProps } from '@grafana/data';
 
-export const SimpleEditor: React.FC<StandardEditorProps<boolean>> = ({ value, onChange }) => {
+export const SimpleEditor = ({ value, onChange }: StandardEditorProps<boolean>) => {
   return <Button onClick={() => onChange(!value)}>{value ? 'Disable' : 'Enable'}</Button>;
 };
 ```
@@ -51,7 +51,9 @@ interface Settings {
   to: number;
 }
 
-export const SimpleEditor: React.FC<StandardEditorProps<number, Settings>> = ({ item, value, onChange }) => {
+type Props = StandardEditorProps<number, Settings>;
+
+export const SimpleEditor = ({ item, value, onChange }: Props) => {
   const options: Array<SelectableValue<number>> = [];
 
   // Default values
@@ -97,7 +99,7 @@ The editor context is available through the `context` prop. The data frames retu
 **SimpleEditor.tsx**
 
 ```ts
-export const SimpleEditor: React.FC<StandardEditorProps<string>> = ({ item, value, onChange, context }) => {
+export const SimpleEditor = ({ item, value, onChange, context }: StandardEditorProps<string>) => {
   const options: SelectableValue<string>[] = [];
 
   if (context.data) {

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

@@ -44,7 +44,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   };
 });
 
-export const ButtonCascader: React.FC<ButtonCascaderProps> = (props) => {
+export const ButtonCascader = (props: ButtonCascaderProps) => {
   const { onChange, className, loadData, icon, buttonProps, hideDownIcon, variant, disabled, ...rest } = props;
   const theme = useTheme2();
   const styles = getStyles(theme);

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

@@ -21,8 +21,8 @@ export interface ContextMenuProps {
   renderHeader?: () => React.ReactNode;
 }
 
-export const ContextMenu: React.FC<ContextMenuProps> = React.memo(
+export const ContextMenu = React.memo(
-  ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }) => {
+  ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }: ContextMenuProps) => {
     const menuRef = useRef<HTMLDivElement>(null);
     const [positionStyles, setPositionStyles] = useState({});
 

packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx

@@ -11,7 +11,7 @@ export interface WithContextMenuProps {
   focusOnOpen?: boolean;
 }
 
-export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, renderMenuItems, focusOnOpen = true }) => {
+export const WithContextMenu = ({ children, renderMenuItems, focusOnOpen = true }: WithContextMenuProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
   return (

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

@@ -30,48 +30,46 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-export const DataLinkEditor: React.FC<DataLinkEditorProps> = React.memo(
+export const DataLinkEditor = React.memo(({ index, value, onChange, suggestions, isLast }: DataLinkEditorProps) => {
-  ({ index, value, onChange, suggestions, isLast }) => {
+  const styles = useStyles2(getStyles);
-    const styles = useStyles2(getStyles);
 
-    const onUrlChange = (url: string, callback?: () => void) => {
+  const onUrlChange = (url: string, callback?: () => void) => {
-      onChange(index, { ...value, url }, callback);
+    onChange(index, { ...value, url }, callback);
-    };
+  };
-    const onTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const onTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      onChange(index, { ...value, title: event.target.value });
+    onChange(index, { ...value, title: event.target.value });
-    };
+  };
 
-    const onOpenInNewTabChanged = () => {
+  const onOpenInNewTabChanged = () => {
-      onChange(index, { ...value, targetBlank: !value.targetBlank });
+    onChange(index, { ...value, targetBlank: !value.targetBlank });
-    };
+  };
 
-    return (
+  return (
-      <div className={styles.listItem}>
+    <div className={styles.listItem}>
-        <Field label="Title">
+      <Field label="Title">
-          <Input value={value.title} onChange={onTitleChange} placeholder="Show details" />
+        <Input value={value.title} onChange={onTitleChange} placeholder="Show details" />
-        </Field>
+      </Field>
 
-        <Field
+      <Field
-          label="URL"
+        label="URL"
-          invalid={isCompactUrl(value.url)}
+        invalid={isCompactUrl(value.url)}
-          error="Data link is an Explore URL in a deprecated format. Please visit the URL to be redirected, and edit this data link to use that URL."
+        error="Data link is an Explore URL in a deprecated format. Please visit the URL to be redirected, and edit this data link to use that URL."
-        >
+      >
-          <DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />
+        <DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />
-        </Field>
+      </Field>
 
-        <Field label="Open in new tab">
+      <Field label="Open in new tab">
-          <Switch value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
+        <Switch value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
-        </Field>
+      </Field>
 
-        {isLast && (
+      {isLast && (
-          <div className={styles.infoText}>
+        <div className={styles.infoText}>
-            With data links you can reference data variables like series name, labels and values. Type CMD+Space,
+          With data links you can reference data variables like series name, labels and values. Type CMD+Space,
-            CTRL+Space, or $ to open variable suggestions.
+          CTRL+Space, or $ to open variable suggestions.
-          </div>
+        </div>
-        )}
+      )}
-      </div>
+    </div>
-    );
+  );
-  }
+});
-);
 
 DataLinkEditor.displayName = 'DataLinkEditor';

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

@@ -72,8 +72,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
 
 // This memoised also because rerendering the slate editor grabs focus which created problem in some cases this
 // was used and changes to different state were propagated here.
-export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
+export const DataLinkInput = memo(
-  ({ value, onChange, suggestions, placeholder = 'http://your-grafana.com/d/000000010/annotations' }) => {
+  ({
+    value,
+    onChange,
+    suggestions,
+    placeholder = 'http://your-grafana.com/d/000000010/annotations',
+  }: DataLinkInputProps) => {
     const editorRef = useRef<Editor>(null);
     const styles = useStyles2(getStyles);
     const [showingSuggestions, setShowingSuggestions] = useState(false);

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

@@ -53,7 +53,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-export const DataLinkSuggestions: React.FC<DataLinkSuggestionsProps> = ({ suggestions, ...otherProps }) => {
+export const DataLinkSuggestions = ({ suggestions, ...otherProps }: DataLinkSuggestionsProps) => {
   const ref = useRef(null);
 
   useClickAway(ref, () => {
@@ -104,8 +104,16 @@ interface DataLinkSuggestionsListProps extends DataLinkSuggestionsProps {
   activeRef?: React.RefObject<HTMLDivElement>;
 }
 
-const DataLinkSuggestionsList: React.FC<DataLinkSuggestionsListProps> = React.memo(
+const DataLinkSuggestionsList = React.memo(
-  ({ activeIndex, activeIndexOffset, label, onClose, onSuggestionSelect, suggestions, activeRef: selectedRef }) => {
+  ({
+    activeIndex,
+    activeIndexOffset,
+    label,
+    onClose,
+    onSuggestionSelect,
+    suggestions,
+    activeRef: selectedRef,
+  }: DataLinkSuggestionsListProps) => {
     const styles = useStyles2(getStyles);
 
     return (

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

@@ -18,12 +18,7 @@ interface DataLinksInlineEditorProps {
   data: DataFrame[];
 }
 
-export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
+export const DataLinksInlineEditor = ({ links, onChange, getSuggestions, data }: DataLinksInlineEditorProps) => {
-  links,
-  onChange,
-  getSuggestions,
-  data,
-}) => {
   const theme = useTheme2();
   const [editIndex, setEditIndex] = useState<number | null>(null);
   const [isNew, setIsNew] = useState(false);

packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx

@@ -6,7 +6,7 @@ import { SecretFormField } from '../SecretFormField/SecretFormField';
 
 import { HttpSettingsProps } from './types';
 
-export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfig, onChange }) => {
+export const BasicAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsProps) => {
   const password = dataSourceConfig.secureJsonData ? dataSourceConfig.secureJsonData.basicAuthPassword : '';
 
   const onPasswordReset = () => {

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx

@@ -55,7 +55,7 @@ const getCustomHeaderRowStyles = stylesFactory(() => {
   };
 });
 
-const CustomHeaderRow: React.FC<CustomHeaderRowProps> = ({ header, onBlur, onChange, onRemove, onReset }) => {
+const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }: CustomHeaderRowProps) => {
   const styles = getCustomHeaderRowStyles();
   return (
     <div className={styles.layout}>

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -61,7 +61,7 @@ const HttpAccessHelp = () => (
 
 const LABEL_WIDTH = 26;
 
-export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
+export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
   const {
     defaultUrl,
     dataSourceConfig,

packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx

@@ -7,11 +7,11 @@ import { HttpSettingsBaseProps } from './types';
 
 const LABEL_WIDTH = 26;
 
-export const HttpProxySettings: React.FC<HttpSettingsBaseProps> = ({
+export const HttpProxySettings = ({
   dataSourceConfig,
   onChange,
   showForwardOAuthIdentityOption = true,
-}) => {
+}: HttpSettingsBaseProps) => {
   return (
     <>
       <div className="gf-form-inline">

packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx

@@ -10,7 +10,7 @@ import { Tooltip } from '../Tooltip/Tooltip';
 import { CertificationKey } from './CertificationKey';
 import { HttpSettingsBaseProps } from './types';
 
-export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceConfig, onChange }) => {
+export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBaseProps) => {
   const hasTLSCACert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsCACert;
   const hasTLSClientCert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientCert;
   const hasTLSClientKey = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientKey;

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.test.tsx

@@ -7,7 +7,7 @@ import { RelativeTimeRange } from '@grafana/data';
 import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
 
 function setup(initial: RelativeTimeRange = { from: 900, to: 0 }): RenderResult {
-  const StatefulPicker: React.FC<{}> = () => {
+  const StatefulPicker = () => {
     const [value, setValue] = useState<RelativeTimeRange>(initial);
     return <RelativeTimeRangePicker timeRange={value} onChange={setValue} />;
   };

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -43,7 +43,7 @@ interface FormProps extends Omit<Props, 'history'> {
   historyOptions?: TimeOption[];
 }
 
-export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (props) => {
+export const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {
   const {
     quickOptions = [],
     isReversed,
@@ -174,7 +174,7 @@ const NarrowScreenForm = (props: FormProps) => {
   );
 };
 
-const FullScreenForm: React.FC<FormProps> = (props) => {
+const FullScreenForm = (props: FormProps) => {
   const { onChange, value, timeZone, fiscalYearStartMonth, isReversed, historyOptions } = props;
   const theme = useTheme2();
   const styles = getFullScreenStyles(theme, props.hideQuickRanges);

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

@@ -26,7 +26,7 @@ export interface SelectableZone extends SelectableValue<string> {
   searchIndex: string;
 }
 
-export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => {
+export const WideTimeZoneOption = (props: PropsWithChildren<Props>) => {
   const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
   const theme = useTheme2();
   const styles = getStyles(theme);
@@ -66,7 +66,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
   );
 };
 
-export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (props, ref) => {
+export const CompactTimeZoneOption = (props: React.PropsWithChildren<Props>) => {
   const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
   const theme = useTheme2();
   const styles = getStyles(theme);

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

@@ -15,7 +15,7 @@ export interface FilterPillProps {
   icon?: IconName;
 }
 
-export const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick, icon = 'check' }) => {
+export const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterPillProps) => {
   const styles = useStyles2(getStyles);
   const clearButton = useStyles2(clearButtonStyles);
   return (

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

@@ -69,7 +69,7 @@ export const getFieldStyles = stylesFactory((theme: GrafanaTheme2) => {
   };
 });
 
-export const Field: React.FC<FieldProps> = ({
+export const Field = ({
   label,
   description,
   horizontal,
@@ -83,7 +83,7 @@ export const Field: React.FC<FieldProps> = ({
   validationMessageHorizontalOverflow,
   htmlFor,
   ...otherProps
-}) => {
+}: FieldProps) => {
   const theme = useTheme2();
   const styles = getFieldStyles(theme);
   const inputId = htmlFor ?? getChildId(children);

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

@@ -46,7 +46,7 @@ export const getLabelStyles = stylesFactory((theme: GrafanaTheme2) => {
   };
 });
 
-export const Label: React.FC<LabelProps> = ({ children, description, className, category, ...labelProps }) => {
+export const Label = ({ children, description, className, category, ...labelProps }: LabelProps) => {
   const theme = useTheme2();
   const styles = getLabelStyles(theme);
   const categories = category?.map((c, i) => {

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

@@ -20,7 +20,7 @@ export const getLegendStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-export const Legend: React.FC<LabelProps> = ({ children, className, ...legendProps }) => {
+export const Legend = ({ children, className, ...legendProps }: LabelProps) => {
   const styles = useStyles2(getLegendStyles);
 
   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<React.PropsWithChildren<{ title: string }>> = ({ title, children }) => (
+  const Wrapper = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
     <div style={{ marginBottom: 20 }}>
       <h5>{title}</h5>
       {children}

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

@@ -32,14 +32,14 @@ export type GraphContextMenuProps = ContextMenuProps & {
 };
 
 /** @internal */
-export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
+export const GraphContextMenu = ({
   getContextMenuSource,
   timeZone,
   itemsGroup,
   dimensions,
   contextDimensions,
   ...otherProps
-}) => {
+}: GraphContextMenuProps) => {
   const source = getContextMenuSource();
 
   //  Do not render items that do not have label specified

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

@@ -8,12 +8,12 @@ import { getMultiSeriesGraphHoverInfo } from '../utils';
 
 import { GraphTooltipContentProps } from './types';
 
-export const MultiModeGraphTooltip: React.FC<
+type Props = GraphTooltipContentProps & {
-  GraphTooltipContentProps & {
+  // We expect position to figure out correct values when not hovering over a datapoint
-    // We expect position to figure out correct values when not hovering over a datapoint
+  pos: FlotPosition;
-    pos: FlotPosition;
+};
-  }
+
-> = ({ dimensions, activeDimensions, pos, timeZone }) => {
+export const MultiModeGraphTooltip = ({ dimensions, activeDimensions, pos, timeZone }: Props) => {
   let activeSeriesIndex: number | null = null;
   // when no x-axis provided, skip rendering
   if (activeDimensions.xAxis === null) {

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

@@ -11,11 +11,7 @@ import { SeriesTable } from '../../VizTooltip';
 
 import { GraphTooltipContentProps } from './types';
 
-export const SingleModeGraphTooltip: React.FC<GraphTooltipContentProps> = ({
+export const SingleModeGraphTooltip = ({ dimensions, activeDimensions, timeZone }: GraphTooltipContentProps) => {
-  dimensions,
-  activeDimensions,
-  timeZone,
-}) => {
   // not hovering over a point, skip rendering
   if (
     activeDimensions.yAxis === null ||

packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx

@@ -47,7 +47,7 @@ interface FeatureBadgeProps {
   tooltip?: string;
 }
 
-export const FeatureBadge: React.FC<FeatureBadgeProps> = ({ featureState, tooltip }) => {
+export const FeatureBadge = ({ featureState, tooltip }: FeatureBadgeProps) => {
   const display = getPanelStateBadgeDisplayModel(featureState);
   return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={tooltip} />;
 };

packages/grafana-ui/src/components/Menu/MenuGroup.tsx

@@ -25,7 +25,7 @@ export interface MenuGroupProps extends Partial<MenuItemsGroup> {
 }
 
 /** @internal */
-export const MenuGroup: React.FC<MenuGroupProps> = ({ label, ariaLabel, children }) => {
+export const MenuGroup = ({ label, ariaLabel, children }: MenuGroupProps) => {
   const styles = useStyles2(getStyles);
   const labelID = `group-label-${uniqueId()}`;
 

packages/grafana-ui/src/components/Menu/SubMenu.tsx

@@ -28,8 +28,8 @@ export interface SubMenuProps {
 }
 
 /** @internal */
-export const SubMenu: React.FC<SubMenuProps> = React.memo(
+export const SubMenu = React.memo(
-  ({ items, isOpen, openedWithArrow, setOpenedWithArrow, close, customStyle }) => {
+  ({ items, isOpen, openedWithArrow, setOpenedWithArrow, close, customStyle }: SubMenuProps) => {
     const styles = useStyles2(getStyles);
     const localRef = useRef<HTMLDivElement>(null);
     const [handleKeys] = useMenuFocus({

packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx

@@ -17,7 +17,7 @@ export type ErrorIndicatorProps = {
 /**
  * @internal
  */
-export const ErrorIndicator: React.FC<ErrorIndicatorProps> = ({ error, onClick }) => {
+export const ErrorIndicator = ({ error, onClick }: ErrorIndicatorProps) => {
   const styles = useStyles2(getStyles);
 
   if (!error) {

packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx

@@ -18,7 +18,7 @@ export type LoadingIndicatorProps = {
 /**
  * @internal
  */
-export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ onCancel, loading }) => {
+export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) => {
   const styles = useStyles2(getStyles);
 
   if (!loading) {

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

@@ -14,7 +14,7 @@ export interface PluginSignatureBadgeProps extends HTMLAttributes<HTMLDivElement
 /**
  * @public
  */
-export const PluginSignatureBadge: React.FC<PluginSignatureBadgeProps> = ({ status, ...otherProps }) => {
+export const PluginSignatureBadge = ({ status, ...otherProps }: PluginSignatureBadgeProps) => {
   const display = getSignatureDisplayModel(status);
   return (
     <Badge

packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx

@@ -25,7 +25,7 @@ export const useExpandableLabel = (
     }
   };
 
-  const Label: React.FC<LabelProps> = ({ Component, onClick, disabled }) => (
+  const Label = ({ Component, onClick, disabled }: LabelProps) => (
     <button
       type="button"
       className={buttonStyles}

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

@@ -6,7 +6,7 @@ interface DropdownIndicatorProps {
   isOpen: boolean;
 }
 
-export const DropdownIndicator: React.FC<DropdownIndicatorProps> = ({ isOpen }) => {
+export const DropdownIndicator = ({ isOpen }: DropdownIndicatorProps) => {
   const icon = isOpen ? 'search' : 'angle-down';
   const size = isOpen ? 'sm' : 'md';
   return <Icon name={icon} size={size} />;

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

@@ -52,7 +52,7 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme2) => {
 /**
  * @public
  */
-export const SeriesTableRow: React.FC<SeriesTableRowProps> = ({ color, label, value, isActive }) => {
+export const SeriesTableRow = ({ color, label, value, isActive }: SeriesTableRowProps) => {
   const styles = useStyles2(getSeriesTableRowStyles);
 
   return (
@@ -79,7 +79,7 @@ export interface SeriesTableProps {
 /**
  * @public
  */
-export const SeriesTable: React.FC<SeriesTableProps> = ({ timestamp, series }) => {
+export const SeriesTable = ({ timestamp, series }: SeriesTableProps) => {
   const styles = useStyles2(getSeriesTableRowStyles);
 
   return (

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

@@ -22,14 +22,14 @@ export interface VizTooltipContainerProps extends HTMLAttributes<HTMLDivElement>
 /**
  * @public
  */
-export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
+export const VizTooltipContainer = ({
   position: { x: positionX, y: positionY },
   offset: { x: offsetX, y: offsetY },
   children,
   allowPointerEvents = false,
   className,
   ...otherProps
-}) => {
+}: VizTooltipContainerProps) => {
   const tooltipRef = useRef<HTMLDivElement>(null);
   const [tooltipMeasurement, setTooltipMeasurement] = useState<Dimensions2D>({ width: 0, height: 0 });
   const { width, height } = useWindowSize();

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -27,8 +27,8 @@ interface PlotLegendProps extends VizLegendOptions, Omit<VizLayoutLegendProps, '
   config: UPlotConfigBuilder;
 }
 
-export const PlotLegend: React.FC<PlotLegendProps> = React.memo(
+export const PlotLegend = React.memo(
-  ({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }) => {
+  ({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }: PlotLegendProps) => {
     const theme = useTheme2();
     const legendItems = config
       .getSeries()

packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx

@@ -1,5 +1,5 @@
 import { clamp } from 'lodash';
-import React, { useLayoutEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
@@ -170,7 +170,7 @@ const initHook = (u: uPlot) => {
 /**
  * @alpha
  */
-export const KeyboardPlugin: React.FC<KeyboardPluginProps> = ({ config }) => {
+export const KeyboardPlugin = ({ config }: KeyboardPluginProps) => {
   useLayoutEffect(() => config.addHook('init', initHook), [config]);
 
   return null;

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx

@@ -40,7 +40,7 @@ const TOOLTIP_OFFSET = 10;
 /**
  * @alpha
  */
-export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
+export const TooltipPlugin = ({
   mode = TooltipDisplayMode.Single,
   sortOrder = SortOrder.None,
   sync,
@@ -48,7 +48,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
   config,
   renderTooltip,
   ...otherProps
-}) => {
+}: TooltipPluginProps) => {
   const plotInstance = useRef<uPlot>();
   const theme = useTheme2();
   const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);

packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { PlotSelection } from '../types';
@@ -15,7 +15,7 @@ const MIN_ZOOM_DIST = 5;
 /**
  * @alpha
  */
-export const ZoomPlugin: React.FC<ZoomPluginProps> = ({ onZoom, config }) => {
+export const ZoomPlugin = ({ onZoom, config }: ZoomPluginProps) => {
   const [selection, setSelection] = useState<PlotSelection | null>(null);
 
   useEffect(() => {

packages/grafana-ui/src/options/builder/hideSeries.tsx

@@ -6,9 +6,7 @@ import { HideableFieldConfig, HideSeriesConfig } from '@grafana/schema';
 
 import { FilterPill, HorizontalGroup } from '../../index';
 
-const SeriesConfigEditor: React.FC<FieldConfigEditorProps<HideSeriesConfig, {}>> = (props) => {
+const SeriesConfigEditor = ({ value, onChange }: FieldConfigEditorProps<HideSeriesConfig, {}>) => {
-  const { value, onChange } = props;
-
   const onChangeToggle = useCallback(
     (prop: keyof HideSeriesConfig) => {
       onChange({ ...value, [prop]: !value[prop] });

packages/grafana-ui/src/options/builder/stacking.tsx

@@ -18,12 +18,7 @@ import {
   Tooltip,
 } from '../..';
 
-export const StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, any>> = ({
+export const StackingEditor = ({ value, context, onChange, item }: FieldOverrideEditorProps<StackingConfig, any>) => {
-  value,
-  context,
-  onChange,
-  item,
-}) => {
   return (
     <HorizontalGroup>
       <RadioButtonGroup

packages/grafana-ui/src/themes/ThemeContext.test.tsx

@@ -34,7 +34,7 @@ describe('useStyles', () => {
   });
 
   it('passes in theme and returns style object', (done) => {
-    const Dummy: React.FC = function () {
+    const Dummy = function () {
       const styles = useStyles2((theme) => {
         return {
           someStyle: css`

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

@@ -8,9 +8,10 @@ import { GrafanaLight, GrafanaDark } from '../../../.storybook/storybookTheme';
 
 type Props = {
   context: DocsContextProps;
+  children?: React.ReactNode;
 };
 
-export const ThemedDocsContainer: React.FC<Props> = ({ children, context }) => {
+export const ThemedDocsContainer = ({ children, context }: Props) => {
   const dark = useDarkMode();
 
   return (

public/app/core/components/OptionsUI/fieldColor.tsx

@@ -17,12 +17,9 @@ import { useStyles2, useTheme2, Field, RadioButtonGroup, Select } from '@grafana
 
 import { ColorValueEditor } from './color';
 
-export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | undefined, FieldColorConfigSettings>> = ({
+type Props = FieldConfigEditorProps<FieldColor | undefined, FieldColorConfigSettings>;
-  value,
+
-  onChange,
+export const FieldColorEditor = ({ value, onChange, item, id }: Props) => {
-  item,
-  id,
-}) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
 

public/app/core/components/OptionsUI/links.tsx

@@ -8,11 +8,9 @@ import {
 } from '@grafana/data';
 import { DataLinksInlineEditor } from '@grafana/ui';
 
-export const DataLinksValueEditor: React.FC<FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>> = ({
+type Props = FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>;
-  value,
+
-  onChange,
+export const DataLinksValueEditor = ({ value, onChange, context }: Props) => {
-  context,
-}) => {
   return (
     <DataLinksInlineEditor
       links={value}

public/app/core/components/OptionsUI/number.tsx

@@ -4,11 +4,9 @@ import { FieldConfigEditorProps, NumberFieldConfigSettings } from '@grafana/data
 
 import { NumberInput } from './NumberInput';
 
-export const NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFieldConfigSettings>> = ({
+type Props = FieldConfigEditorProps<number, NumberFieldConfigSettings>;
-  value,
+
-  onChange,
+export const NumberValueEditor = ({ value, onChange, item }: Props) => {
-  item,
-}) => {
   const { settings } = item;
 
   const onValueChange = useCallback(

public/app/core/components/OptionsUI/slider.tsx

@@ -9,11 +9,9 @@ import { getStyles } from '@grafana/ui/src/components/Slider/styles';
 
 import { NumberInput } from './NumberInput';
 
-export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>> = ({
+type Props = FieldConfigEditorProps<number, SliderFieldConfigSettings>;
-  value,
+
-  onChange,
+export const SliderValueEditor = ({ value, onChange, item }: Props) => {
-  item,
-}) => {
   // Input reference
   const inputRef = useRef<HTMLSpanElement>(null);
 

public/app/core/components/OptionsUI/stats.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { FieldConfigEditorProps, StatsPickerConfigSettings } from '@grafana/data';
 import { StatsPicker } from '@grafana/ui';
 
-export const StatsPickerEditor: React.FC<FieldConfigEditorProps<string[], StatsPickerConfigSettings>> = ({
+export const StatsPickerEditor = ({
   value,
   onChange,
   item,
   id,
-}) => {
+}: FieldConfigEditorProps<string[], StatsPickerConfigSettings>) => {
   return (
     <StatsPicker
       stats={value}

public/app/core/components/QueryOperationRow/QueryOperationAction.tsx

@@ -13,13 +13,7 @@ export interface QueryOperationActionProps {
   active?: boolean;
 }
 
-export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({
+export const QueryOperationAction = ({ icon, active, disabled, title, onClick }: QueryOperationActionProps) => {
-  icon,
-  active,
-  disabled,
-  title,
-  onClick,
-}) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx

@@ -18,7 +18,7 @@ interface QueryOperationRowHeaderProps {
   id: string;
 }
 
-export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = ({
+export const QueryOperationRowHeader = ({
   actionsElement,
   disabled,
   draggable,

public/app/features/commandPalette/KBarResults.tsx

@@ -21,7 +21,7 @@ interface KBarResultsProps {
   maxHeight?: number;
 }
 
-export const KBarResults: React.FC<KBarResultsProps> = (props) => {
+export const KBarResults = (props: KBarResultsProps) => {
   const activeRef = React.useRef<HTMLElement>(null);
   const parentRef = React.useRef(null);
 

public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx

@@ -16,7 +16,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-export const CategoryHeader: React.FC<{ iconName: IconName; label: string }> = ({ iconName, label }) => {
+type Props = { iconName: IconName; label: string };
+
+export const CategoryHeader = ({ iconName, label }: Props) => {
   const styles = useStyles2(getStyles);
   return (
     <div className={styles.categoryHeader}>

public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

@@ -207,7 +207,7 @@ interface AddPanelWidgetHandleProps {
   styles: AddPanelStyles;
 }
 
-const AddPanelWidgetHandle: React.FC<AddPanelWidgetHandleProps> = ({ children, onBack, onCancel, styles }) => {
+const AddPanelWidgetHandle = ({ children, onBack, onCancel, styles }: AddPanelWidgetHandleProps) => {
   return (
     <div className={cx(styles.headerRow, 'grid-drag-handle')}>
       {onBack && (

public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx

@@ -6,7 +6,7 @@ import { Button, useStyles2 } from '@grafana/ui';
 
 export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const ListNewButton: React.FC<Props> = ({ children, ...restProps }) => {
+export const ListNewButton = ({ children, ...restProps }: Props) => {
   const styles = useStyles2(getStyles);
   return (
     <div className={styles.buttonWrapper}>

public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx

@@ -41,7 +41,7 @@ type LinkSettingsEditProps = {
   onGoBack: () => void;
 };
 
-export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx, dashboard, onGoBack }) => {
+export const LinkSettingsEdit = ({ editLinkIdx, dashboard, onGoBack }: LinkSettingsEditProps) => {
   const [linkSettings, setLinkSettings] = useState(editLinkIdx !== null ? dashboard.links[editLinkIdx] : newLink);
 
   const onUpdate = (link: DashboardLink) => {

public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx

@@ -13,7 +13,7 @@ type LinkSettingsListProps = {
   onEdit: (idx: number) => void;
 };
 
-export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, onNew, onEdit }) => {
+export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListProps) => {
   const [links, setLinks] = useState(dashboard.links);
 
   const moveLink = (idx: number, direction: number) => {

public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx

@@ -23,7 +23,7 @@ interface DynamicConfigValueEditorProps {
   searchQuery: string;
 }
 
-export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> = ({
+export const DynamicConfigValueEditor = ({
   property,
   context,
   registry,
@@ -31,7 +31,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
   onRemove,
   isSystemOverride,
   searchQuery,
-}) => {
+}: DynamicConfigValueEditorProps) => {
   const styles = useStyles2(getStyles);
   const item = registry?.getIfExists(property.id);
 

public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx

@@ -12,7 +12,7 @@ import { VisualizationSelectPane } from './VisualizationSelectPane';
 import { OptionPaneRenderProps } from './types';
 import { usePanelLatestData } from './usePanelLatestData';
 
-export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
+export const OptionsPane = ({
   plugin,
   panel,
   onFieldConfigsChange,
@@ -20,7 +20,7 @@ export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
   onPanelConfigChange,
   dashboard,
   instanceState,
-}) => {
+}: OptionPaneRenderProps) => {
   const styles = useStyles2(getStyles);
   const isVizPickerOpen = useSelector((state) => state.panelEditor.isVizPickerOpen);
   const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);

public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx

@@ -17,7 +17,7 @@ import { OptionSearchEngine } from './state/OptionSearchEngine';
 import { getRecentOptions } from './state/getRecentOptions';
 import { OptionPaneRenderProps } from './types';
 
-export const OptionsPaneOptions: React.FC<OptionPaneRenderProps> = (props) => {
+export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
   const { plugin, dashboard, panel } = props;
   const [searchQuery, setSearchQuery] = useState('');
   const [listMode, setListMode] = useState(OptionFilter.All);

public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx

@@ -13,7 +13,7 @@ interface SaveDashboardButtonProps {
   size?: ComponentSize;
 }
 
-export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashboard, onSaveSuccess, size }) => {
+export const SaveDashboardButton = ({ dashboard, onSaveSuccess, size }: SaveDashboardButtonProps) => {
   return (
     <ModalsController>
       {({ showModal, hideModal }) => {
@@ -37,12 +37,9 @@ export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashbo
   );
 };
 
-export const SaveDashboardAsButton: React.FC<SaveDashboardButtonProps & { variant?: ButtonVariant }> = ({
+type Props = SaveDashboardButtonProps & { variant?: ButtonVariant };
-  dashboard,
+
-  onSaveSuccess,
+export const SaveDashboardAsButton = ({ dashboard, onSaveSuccess, variant, size }: Props) => {
-  variant,
-  size,
-}) => {
   return (
     <ModalsController>
       {({ showModal, hideModal }) => {

public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx

@@ -19,12 +19,12 @@ interface SaveDashboardErrorProxyProps {
   onDismiss: () => void;
 }
 
-export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({
+export const SaveDashboardErrorProxy = ({
   dashboard,
   dashboardSaveModel,
   error,
   onDismiss,
-}) => {
+}: SaveDashboardErrorProxyProps) => {
   const { onDashboardSave } = useDashboardSave(dashboard);
 
   useEffect(() => {

public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx

@@ -14,12 +14,7 @@ interface UnsavedChangesModalProps {
   onSaveSuccess?: () => void;
 }
 
-export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
+export const UnsavedChangesModal = ({ dashboard, onSaveSuccess, onDiscard, onDismiss }: UnsavedChangesModalProps) => {
-  dashboard,
-  onSaveSuccess,
-  onDiscard,
-  onDismiss,
-}) => {
   return (
     <Modal
       isOpen={true}

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx

@@ -38,13 +38,7 @@ export interface SaveDashboardAsFormProps extends SaveDashboardFormProps {
   isNew?: boolean;
 }
 
-export const SaveDashboardAsForm: React.FC<SaveDashboardAsFormProps> = ({
+export const SaveDashboardAsForm = ({ dashboard, isNew, onSubmit, onCancel, onSuccess }: SaveDashboardAsFormProps) => {
-  dashboard,
-  isNew,
-  onSubmit,
-  onCancel,
-  onSuccess,
-}) => {
   const defaultValues: SaveDashboardAsFormDTO = {
     title: isNew ? dashboard.title : `${dashboard.title} Copy`,
     $folder: {

public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx

@@ -7,7 +7,7 @@ import { Button, ClipboardButton, HorizontalGroup, TextArea } from '@grafana/ui'
 
 import { SaveDashboardFormProps } from '../types';
 
-export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => {
+export const SaveProvisionedDashboardForm = ({ dashboard, onCancel }: SaveDashboardFormProps) => {
   const [dashboardJSON, setDashboardJson] = useState(() => {
     const clone = dashboard.getSaveModelClone();
     delete clone.id;

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

@@ -109,7 +109,7 @@ interface LinkElementProps {
   children: JSX.Element;
 }
 
-const LinkElement: React.FC<LinkElementProps> = (props) => {
+const LinkElement = (props: LinkElementProps) => {
   const { link, children, ...rest } = props;
 
   return (

public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx

@@ -12,12 +12,12 @@ interface TransformationOperationRowsProps {
   onChange: (index: number, config: DataTransformerConfig) => void;
 }
 
-export const TransformationOperationRows: React.FC<TransformationOperationRowsProps> = ({
+export const TransformationOperationRows = ({
   data,
   onChange,
   onRemove,
   configs,
-}) => {
+}: TransformationOperationRowsProps) => {
   return (
     <>
       {configs.map((t, i) => {

public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx

@@ -14,7 +14,7 @@ type DiffTitleProps = {
 
 const replaceDiff: Diff = { op: 'replace', originalValue: undefined, path: [''], value: undefined, startLineNumber: 0 };
 
-export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
+export const DiffTitle = ({ diff, title }: DiffTitleProps) => {
   const styles = useStyles2(getDiffTitleStyles);
 
   return diff ? (

public/app/features/dashboard/components/VersionHistory/DiffValues.tsx

@@ -11,7 +11,7 @@ type DiffProps = {
   diff: Diff;
 };
 
-export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
+export const DiffValues = ({ diff }: DiffProps) => {
   const styles = useStyles2(getStyles);
   const hasLeftValue =
     !isUndefined(diff.originalValue) && !isArray(diff.originalValue) && !isObject(diff.originalValue);

public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx

@@ -5,7 +5,7 @@ import tinycolor from 'tinycolor2';
 
 import { useTheme2 } from '@grafana/ui';
 
-export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue }) => {
+export const DiffViewer = ({ oldValue, newValue }: ReactDiffViewerProps) => {
   const theme = useTheme2();
 
   const styles = {

public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx

@@ -8,7 +8,7 @@ export interface RevertDashboardModalProps {
   version: number;
 }
 
-export const RevertDashboardModal: React.FC<RevertDashboardModalProps> = ({ hideModal, version }) => {
+export const RevertDashboardModal = ({ hideModal, version }: RevertDashboardModalProps) => {
   // TODO: how should state.error be handled?
   const { state, onRestoreDashboard } = useDashboardRestore(version);
 

public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx

@@ -10,13 +10,13 @@ type VersionsButtonsType = {
   getDiff: () => void;
   isLastPage: boolean;
 };
-export const VersionsHistoryButtons: React.FC<VersionsButtonsType> = ({
+export const VersionsHistoryButtons = ({
   hasMore,
   canCompare,
   getVersions,
   getDiff,
   isLastPage,
-}) => (
+}: VersionsButtonsType) => (
   <Stack>
     {hasMore && (
       <Button type="button" onClick={() => getVersions(true)} variant="secondary" disabled={isLastPage}>

public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx

@@ -18,7 +18,7 @@ type DiffViewProps = {
   diffData: { lhs: unknown; rhs: unknown };
 };
 
-export const VersionHistoryComparison: React.FC<DiffViewProps> = ({ baseInfo, newInfo, diffData, isNewLatest }) => {
+export const VersionHistoryComparison = ({ baseInfo, newInfo, diffData, isNewLatest }: DiffViewProps) => {
   const diff = jsonDiff(diffData.lhs, diffData.rhs);
   const styles = useStyles2(getStyles);
 

public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx

@@ -12,12 +12,12 @@ type VersionHistoryHeaderProps = {
   isNewLatest?: boolean;
 };
 
-export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
+export const VersionHistoryHeader = ({
   onClick = noop,
   baseVersion = 0,
   newVersion = 0,
   isNewLatest = false,
-}) => {
+}: VersionHistoryHeaderProps) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx

@@ -10,7 +10,7 @@ import { createDashboardModelFixture } from '../state/__fixtures__/dashboardFixt
 import { DashboardGrid, Props } from './DashboardGrid';
 
 jest.mock('app/features/dashboard/dashgrid/LazyLoader', () => {
-  const LazyLoader: React.FC = ({ children }) => {
+  const LazyLoader = ({ children }: React.PropsWithChildren<{}>) => {
     return <>{children}</>;
   };
   return { LazyLoader };

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx

@@ -183,7 +183,7 @@ export function References(props: ReferenceItemProps) {
   );
 }
 
-const AccordianReferences: React.FC<AccordianReferencesProps> = ({
+const AccordianReferences = ({
   data,
   interactive = true,
   isOpen,
@@ -191,7 +191,7 @@ const AccordianReferences: React.FC<AccordianReferencesProps> = ({
   onItemToggle,
   openedItems,
   createFocusSpanLink,
-}) => {
+}: AccordianReferencesProps) => {
   const isEmpty = !Array.isArray(data) || !data.length;
   let arrow: React.ReactNode | null = null;
   let HeaderComponent: 'span' | 'a' = 'span';

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

@@ -17,12 +17,9 @@ export interface LibraryPanelCardProps {
   showSecondaryActions?: boolean;
 }
 
-export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX.Element | JSX.Element[] }> = ({
+type Props = LibraryPanelCardProps & { children?: JSX.Element | JSX.Element[] };
-  libraryPanel,
+
-  onClick,
+export const LibraryPanelCard = ({ libraryPanel, onClick, onDelete, showSecondaryActions }: Props) => {
-  onDelete,
-  showSecondaryActions,
-}) => {
   const [showDeletionModal, setShowDeletionModal] = useState(false);
 
   const onDeletePanel = () => {

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

@@ -23,7 +23,7 @@ interface LibraryPanelViewProps {
   perPage?: number;
 }
 
-export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
+export const LibraryPanelsView = ({
   className,
   onClickCard,
   searchString,
@@ -33,7 +33,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
   showSecondaryActions,
   currentPanelId: currentPanel,
   perPage: propsPerPage = 40,
-}) => {
+}: LibraryPanelViewProps) => {
   const styles = useStyles2(getPanelViewStyles);
   const [{ libraryPanels, page, perPage, numberOfPages, loadingState, currentPanelId }, dispatch] = useReducer(
     libraryPanelsViewReducer,

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

@@ -14,14 +14,7 @@ interface DatasetSelectorProps extends ResourceSelectorProps {
   onChange: (v: SelectableValue) => void;
 }
 
-export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
+export const DatasetSelector = ({ db, value, onChange, disabled, className, applyDefault }: DatasetSelectorProps) => {
-  db,
-  value,
-  onChange,
-  disabled,
-  className,
-  applyDefault,
-}) => {
   const state = useAsync(async () => {
     const datasets = await db.datasets();
     return datasets.map(toOption);

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

@@ -15,7 +15,7 @@ interface TableSelectorProps extends ResourceSelectorProps {
   forceFetch?: boolean;
 }
 
-export const TableSelector: React.FC<TableSelectorProps> = ({ db, query, value, className, onChange, forceFetch }) => {
+export const TableSelector = ({ db, query, value, className, onChange, forceFetch }: TableSelectorProps) => {
   const state = useAsync(async () => {
     if (!query.dataset && !forceFetch) {
       return [];

public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx

@@ -18,14 +18,7 @@ interface VisualEditorProps extends QueryEditorProps {
   onValidate: (isValid: boolean) => void;
 }
 
-export const VisualEditor: React.FC<VisualEditorProps> = ({
+export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => {
-  query,
-  db,
-  queryRowFilter,
-  onChange,
-  onValidate,
-  range,
-}) => {
   const state = useAsync(async () => {
     const fields = await db.fields(query);
     return fields;

public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx

@@ -34,9 +34,7 @@ const filterMatch: Array<SelectableValue<FilterByValueMatch>> = [
   { label: 'Match any', value: FilterByValueMatch.any },
 ];
 
-export const FilterByValueTransformerEditor: React.FC<TransformerUIProps<FilterByValueTransformerOptions>> = (
+export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterByValueTransformerOptions>) => {
-  props
-) => {
   const { input, options, onChange } = props;
   const styles = getEditorStyles();
   const fieldsInfo = useFieldsInfo(input);

public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { ValueMatcherID } from '@grafana/data';
 
-import { ValueMatcherUIProps, ValueMatcherUIRegistryItem } from './types';
+import { ValueMatcherUIRegistryItem } from './types';
 
-export const NoopMatcherEditor: React.FC<ValueMatcherUIProps<any>> = () => {
+export const NoopMatcherEditor = () => {
   return null;
 };
 

public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx

@@ -23,7 +23,7 @@ const supplier = (
   addHeatmapCalculationOptions('', builder, options);
 };
 
-export const HeatmapTransformerEditor: React.FC<TransformerUIProps<HeatmapTransformerOptions>> = (props) => {
+export const HeatmapTransformerEditor = (props: TransformerUIProps<HeatmapTransformerOptions>) => {
   useEffect(() => {
     if (!props.options.xBuckets?.mode) {
       const opts = getDefaultOptions(supplier);

public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx

@@ -25,11 +25,7 @@ const logModeOptions: Array<SelectableValue<HeatmapCalculationMode>> = [
   },
 ];
 
-export const AxisEditor: React.FC<StandardEditorProps<HeatmapCalculationBucketConfig, any>> = ({
+export const AxisEditor = ({ value, onChange, item }: StandardEditorProps<HeatmapCalculationBucketConfig>) => {
-  value,
-  onChange,
-  item,
-}) => {
   return (
     <HorizontalGroup>
       <RadioButtonGroup

public/app/features/transformers/editors/GroupByTransformerEditor.tsx

@@ -24,11 +24,11 @@ interface FieldProps {
   onConfigChange: (config: GroupByFieldOptions) => void;
 }
 
-export const GroupByTransformerEditor: React.FC<TransformerUIProps<GroupByTransformerOptions>> = ({
+export const GroupByTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<GroupByTransformerOptions>) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input);
 
   const onConfigChange = useCallback(
@@ -65,7 +65,7 @@ const options = [
   { label: 'Calculate', value: GroupByOperationID.aggregate },
 ];
 
-export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, config, onConfigChange }) => {
+export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }: FieldProps) => {
   const styles = getStyling();
 
   const onChange = useCallback(

public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx

@@ -13,11 +13,11 @@ import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
 
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
-export const GroupingToMatrixTransformerEditor: React.FC<TransformerUIProps<GroupingToMatrixTransformerOptions>> = ({
+export const GroupingToMatrixTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<GroupingToMatrixTransformerOptions>) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
 
   const onSelectColumn = useCallback(

public/app/features/transformers/editors/HistogramTransformerEditor.tsx

@@ -8,11 +8,11 @@ import {
 import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
-export const HistogramTransformerEditor: React.FC<TransformerUIProps<HistogramTransformerOptions>> = ({
+export const HistogramTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<HistogramTransformerOptions>) => {
   const labelWidth = 18;
 
   const onBucketSizeChanged = useCallback(

public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx

@@ -19,11 +19,11 @@ const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
   { value: LabelsToFieldsMode.Rows, label: 'Rows' },
 ];
 
-export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<LabelsToFieldsOptions>> = ({
+export const LabelsAsFieldsTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<LabelsToFieldsOptions>) => {
   const labelWidth = 20;
 
   const { labelNames, selected } = useMemo(() => {

public/app/features/transformers/editors/LimitTransformerEditor.tsx

@@ -4,10 +4,7 @@ import { DataTransformerID, standardTransformers, TransformerRegistryItem, Trans
 import { LimitTransformerOptions } from '@grafana/data/src/transformations/transformers/limit';
 import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
 
-export const LimitTransformerEditor: React.FC<TransformerUIProps<LimitTransformerOptions>> = ({
+export const LimitTransformerEditor = ({ options, onChange }: TransformerUIProps<LimitTransformerOptions>) => {
-  options,
-  onChange,
-}) => {
   const onSetLimit = useCallback(
     (value: FormEvent<HTMLInputElement>) => {
       onChange({

public/app/features/transformers/editors/MergeTransformerEditor.tsx

@@ -4,11 +4,7 @@ import { DataTransformerID, standardTransformers, TransformerRegistryItem, Trans
 import { MergeTransformerOptions } from '@grafana/data/src/transformations/transformers/merge';
 import { FieldValidationMessage } from '@grafana/ui';
 
-export const MergeTransformerEditor: React.FC<TransformerUIProps<MergeTransformerOptions>> = ({
+export const MergeTransformerEditor = ({ input, options, onChange }: TransformerUIProps<MergeTransformerOptions>) => {
-  input,
-  options,
-  onChange,
-}) => {
   if (input.length <= 1) {
     // Show warning that merge is useless only apply on a single frame
     return <FieldValidationMessage>Merge has no effect when applied on a single frame.</FieldValidationMessage>;

public/app/features/transformers/editors/ReduceTransformerEditor.tsx

@@ -13,10 +13,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { LegacyForms, Select, StatsPicker } from '@grafana/ui';
 
 // TODO:  Minimal implementation, needs some <3
-export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransformerOptions>> = ({
+export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProps<ReduceTransformerOptions>) => {
-  options,
-  onChange,
-}) => {
   const modes: Array<SelectableValue<ReduceTransformerMode>> = [
     {
       label: 'Series to rows',

public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-
 import { DataTransformerID, standardTransformers, TransformerRegistryItem, TransformerUIProps } from '@grafana/data';
 import { SeriesToRowsTransformerOptions } from '@grafana/data/src/transformations/transformers/seriesToRows';
 
-export const SeriesToRowsTransformerEditor: React.FC<TransformerUIProps<SeriesToRowsTransformerOptions>> = ({
+export const SeriesToRowsTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<SeriesToRowsTransformerOptions>) => {
   return null;
 };
 

public/app/features/transformers/editors/SortByTransformerEditor.tsx

@@ -6,11 +6,7 @@ import { InlineField, InlineSwitch, InlineFieldRow, Select } from '@grafana/ui';
 
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
-export const SortByTransformerEditor: React.FC<TransformerUIProps<SortByTransformerOptions>> = ({
+export const SortByTransformerEditor = ({ input, options, onChange }: TransformerUIProps<SortByTransformerOptions>) => {
-  input,
-  options,
-  onChange,
-}) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
 
   // Only supports single sort for now

public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx

@@ -26,11 +26,11 @@ const fieldNamePickerSettings: StandardEditorsRegistryItem<string, FieldNamePick
   editor: () => null,
 };
 
-export const extractFieldsTransformerEditor: React.FC<TransformerUIProps<ExtractFieldsOptions>> = ({
+export const extractFieldsTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<ExtractFieldsOptions>) => {
   const onPickSourceField = (source?: string) => {
     onChange({
       ...options,

public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx

@@ -31,11 +31,7 @@ const fieldLookupSettings: StandardEditorsRegistryItem<string, GazetteerPathEdit
   settings: {},
 } as any;
 
-export const FieldLookupTransformerEditor: React.FC<TransformerUIProps<FieldLookupOptions>> = ({
+export const FieldLookupTransformerEditor = ({ input, options, onChange }: TransformerUIProps<FieldLookupOptions>) => {
-  input,
-  options,
-  onChange,
-}) => {
   const onPickLookupField = useCallback(
     (value: string | undefined) => {
       onChange({

public/app/features/transformers/spatial/SpatialTransformerEditor.tsx

@@ -113,7 +113,9 @@ const supplier = (
   }
 };
 
-export const SetGeometryTransformerEditor: React.FC<TransformerUIProps<SpatialTransformOptions>> = (props) => {
+type Props = TransformerUIProps<SpatialTransformOptions>;
+
+export const SetGeometryTransformerEditor = (props: Props) => {
   // a new component is created with every change :(
   useEffect(() => {
     if (!props.options.source?.mode) {

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

@@ -44,14 +44,14 @@ function selectSubscriptions(
   return querySubscriptions;
 }
 
-const ArgQueryEditor: React.FC<ArgQueryEditorProps> = ({
+const ArgQueryEditor = ({
   query,
   datasource,
   subscriptionId,
   variableOptionGroup,
   onChange,
   setError,
-}) => {
+}: ArgQueryEditorProps) => {
   const [subscriptions, setSubscriptions] = useState<AzureMonitorOption[]>([]);
   useMemo(() => {
     datasource

public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/QueryField.tsx

@@ -4,7 +4,7 @@ import { CodeEditor } from '@grafana/ui';
 
 import { AzureQueryEditorFieldProps } from '../../types';
 
-const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, onQueryChange }) => {
+const QueryField = ({ query, onQueryChange }: AzureQueryEditorFieldProps) => {
   const onChange = useCallback(
     (newQuery: string) => {
       onQueryChange({