Chore: Avoid FC in canvas elements and dimension editors (#61014)

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

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import React, { FC, ReactNode, useRef, useState } from 'react';
+import React, { ReactNode, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -22,7 +22,7 @@ export interface Props {
   contentDataTestId?: string;
 }
 
-export const CollapsableSection: FC<Props> = ({
+export const CollapsableSection = ({
   label,
   isOpen,
   onToggle,
@@ -33,7 +33,7 @@ export const CollapsableSection: FC<Props> = ({
   loading = false,
   headerDataTestId,
   contentDataTestId,
-}) => {
+}: Props) => {
   const [open, toggleOpen] = useState<boolean>(isOpen);
   const styles = useStyles2(collapsableSectionStyles);
 

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

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { DataFrame, DataLink, VariableSuggestion } from '@grafana/data';
 
@@ -15,13 +15,13 @@ interface DataLinkEditorModalContentProps {
   onCancel: (index: number) => void;
 }
 
-export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = ({
+export const DataLinkEditorModalContent = ({
   link,
   index,
   getSuggestions,
   onSave,
   onCancel,
-}) => {
+}: DataLinkEditorModalContentProps) => {
   const [dirtyLink, setDirtyLink] = useState(link);
   return (
     <>

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay } from '@react-aria/overlays';
-import React, { FC, FormEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FormEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import Calendar from 'react-calendar';
 import { usePopper } from 'react-popper';
 import { useMedia } from 'react-use';
@@ -27,7 +27,7 @@ export interface Props {
   maxDate?: Date;
 }
 
-export const DateTimePicker: FC<Props> = ({ date, maxDate, label, onChange }) => {
+export const DateTimePicker = ({ date, maxDate, label, onChange }: Props) => {
   const [isOpen, setOpen] = useState(false);
 
   const ref = useRef<HTMLDivElement>(null);

packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import RcTimePicker from 'rc-time-picker';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme2 } from '@grafana/data';
 
@@ -19,7 +19,7 @@ export interface Props {
   disabled?: boolean;
 }
 
-export const TimeOfDayPicker: FC<Props> = ({
+export const TimeOfDayPicker = ({
   minuteStep = 1,
   showHour = true,
   showSeconds = false,
@@ -27,7 +27,7 @@ export const TimeOfDayPicker: FC<Props> = ({
   value,
   size = 'auto',
   disabled,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   return (
@@ -51,7 +51,7 @@ interface CaretProps {
   wrapperStyle?: string;
 }
 
-const Caret: FC<CaretProps> = ({ wrapperStyle = '' }) => {
+const Caret = ({ wrapperStyle = '' }: CaretProps) => {
   return (
     <div className={wrapperStyle}>
       <Icon name="angle-down" />

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

@@ -1,4 +1,4 @@
-import React, { FC, CSSProperties, HTMLProps } from 'react';
+import React, { CSSProperties, HTMLProps } from 'react';
 
 import { FormattedValue } from '@grafana/data';
 
@@ -18,7 +18,7 @@ function fontSizeReductionFactor(fontSize: number) {
   return 0.6;
 }
 
-export const FormattedValueDisplay: FC<Props> = ({ value, className, style, ...htmlProps }) => {
+export const FormattedValueDisplay = ({ value, className, style, ...htmlProps }: Props) => {
   const hasPrefix = (value.prefix ?? '').length > 0;
   const hasSuffix = (value.suffix ?? '').length > 0;
   let suffixStyle;

public/app/core/components/TagFilter/TagFilter.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { components } from 'react-select';
 
 import { escapeStringForRegex, GrafanaTheme2 } from '@grafana/data';
@@ -38,7 +38,7 @@ const filterOption = (option: any, searchQuery: string) => {
   return regex.test(option.value);
 };
 
-export const TagFilter: FC<Props> = ({
+export const TagFilter = ({
   allowCustomValue = false,
   formatCreateLabel,
   hideValues,
@@ -49,7 +49,7 @@ export const TagFilter: FC<Props> = ({
   tagOptions,
   tags,
   width,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   const currentlySelectedTags = tags.map((tag) => ({ value: tag, label: tag, count: 0 }));

public/app/core/components/TagFilter/TagOption.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 import { OptionProps } from 'react-select';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -12,7 +12,7 @@ interface ExtendedOptionProps extends OptionProps<any, any> {
   data: any;
 }
 
-export const TagOption: FC<ExtendedOptionProps> = ({ data, className, label, isFocused, innerProps }) => {
+export const TagOption = ({ data, className, label, isFocused, innerProps }: ExtendedOptionProps) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/features/canvas/elements/droneFront.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -16,11 +16,9 @@ interface DroneFrontConfig {
   rollAngle?: ScalarDimensionConfig;
 }
 
-const DroneFrontDisplay: FC<CanvasElementProps<DroneFrontConfig, DroneFrontData>> = (props) => {
+const DroneFrontDisplay = ({ data }: CanvasElementProps<DroneFrontConfig, DroneFrontData>) => {
   const styles = useStyles2(getStyles);
 
-  const { data } = props;
-
   const droneFrontTransformStyle = `rotate(${data?.rollAngle ? data.rollAngle : 0}deg)`;
 
   return (

public/app/features/canvas/elements/droneSide.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -16,11 +16,9 @@ interface DroneSideConfig {
   pitchAngle?: ScalarDimensionConfig;
 }
 
-const DroneSideDisplay: FC<CanvasElementProps<DroneSideConfig, DroneSideData>> = (props) => {
+const DroneSideDisplay = ({ data }: CanvasElementProps<DroneSideConfig, DroneSideData>) => {
   const styles = useStyles2(getStyles);
 
-  const { data } = props;
-
   const droneSidePitchTransformStyle = `rotate(${data?.pitchAngle ? data.pitchAngle : 0}deg)`;
 
   return (

public/app/features/canvas/elements/droneTop.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -24,11 +24,9 @@ interface DroneTopConfig {
   yawAngle?: ScalarDimensionConfig;
 }
 
-const DroneTopDisplay: FC<CanvasElementProps<DroneTopConfig, DroneTopData>> = (props) => {
+const DroneTopDisplay = ({ data }: CanvasElementProps<DroneTopConfig, DroneTopData>) => {
   const styles = useStyles2(getStyles);
 
-  const { data } = props;
-
   const fRightRotorAnimation = `spin ${data?.fRightRotorRPM ? 60 / Math.abs(data.fRightRotorRPM) : 0}s linear infinite`;
 
   const fLeftRotorAnimation = `spin ${data?.fLeftRotorRPM ? 60 / Math.abs(data.fLeftRotorRPM) : 0}s linear infinite`;

public/app/features/canvas/elements/windTurbine.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -16,11 +16,9 @@ interface WindTurbineConfig {
   rpm?: ScalarDimensionConfig;
 }
 
-const WindTurbineDisplay: FC<CanvasElementProps<WindTurbineConfig, WindTurbineData>> = (props) => {
+const WindTurbineDisplay = ({ data }: CanvasElementProps<WindTurbineConfig, WindTurbineData>) => {
   const styles = useStyles2(getStyles);
 
-  const { data } = props;
-
   const windTurbineAnimation = `spin ${data?.rpm ? 60 / Math.abs(data.rpm) : 0}s linear infinite`;
 
   return (

public/app/features/dimensions/editors/BackgroundSizeEditor.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
 import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui/src';
@@ -12,9 +12,7 @@ const options: Array<SelectableValue<BackgroundImageSize>> = [
   { value: BackgroundImageSize.Tile, label: 'Tile' },
 ];
 
-export const BackgroundSizeEditor: FC<StandardEditorProps<string, undefined, undefined>> = (props) => {
-  const { value, onChange } = props;
-
+export const BackgroundSizeEditor = ({ value, onChange }: StandardEditorProps<string, undefined, undefined>) => {
   const imageSize = value ?? BackgroundImageSize.Cover;
 
   const onImageSizeChange = useCallback(

public/app/features/dimensions/editors/ScalarDimensionEditor.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { FieldType, GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { InlineField, InlineFieldRow, RadioButtonGroup, Select, useStyles2 } from '@grafana/ui';
@@ -18,10 +18,9 @@ const scalarOptions = [
   { label: 'Clamped', value: ScalarDimensionMode.Clamped, description: 'Use field values, clamped to max and min' },
 ];
 
-export const ScalarDimensionEditor: FC<StandardEditorProps<ScalarDimensionConfig, ScalarDimensionOptions, any>> = (
-  props
-) => {
-  const { value, context, onChange, item } = props;
+type Props = StandardEditorProps<ScalarDimensionConfig, ScalarDimensionOptions, any>;
+
+export const ScalarDimensionEditor = ({ value, context, onChange, item }: Props) => {
   const { settings } = item;
 
   const DEFAULT_VALUE = 0;

public/app/features/dimensions/editors/TextDimensionEditor.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import {
   FieldNamePickerConfigSettings,
@@ -26,8 +26,9 @@ const dummyStringSettings: StandardEditorsRegistryItem<string, StringFieldConfig
   settings: {},
 } as any;
 
-export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, TextDimensionOptions, any>> = (props) => {
-  const { value, context, onChange } = props;
+type Props = StandardEditorProps<TextDimensionConfig, TextDimensionOptions, any>;
+
+export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
   const labelWidth = 9;
 
   const onModeChange = useCallback(

public/app/features/inspector/InspectDataOptions.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { DataFrame, DataTransformerID, getFrameDisplayName, SelectableValue } from '@grafana/data';
 import { Field, HorizontalGroup, Select, Switch, VerticalGroup } from '@grafana/ui';
@@ -24,7 +24,7 @@ interface Props {
   onOptionsChange?: (options: GetDataOptions) => void;
 }
 
-export const InspectDataOptions: FC<Props> = ({
+export const InspectDataOptions = ({
   options,
   onOptionsChange,
   panel,
@@ -36,7 +36,7 @@ export const InspectDataOptions: FC<Props> = ({
   onDataFrameChange,
   downloadForExcel,
   toggleDownloadForExcel,
-}) => {
+}: Props) => {
   const styles = getPanelInspectorStyles();
 
   const panelTransformations = panel?.getTransformations();

public/app/features/scenes/SceneEmbeddedPage.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { FC } from 'react';
+import React from 'react';
 
 import { NavModelItem } from '@grafana/data';
 import { Page } from 'app/core/components/Page/Page';
@@ -9,7 +9,7 @@ import { getSceneByTitle } from './scenes';
 
 export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
 
-export const SceneEmbeddedPage: FC<Props> = (props) => {
+export const SceneEmbeddedPage = (props: Props) => {
   const scene = getSceneByTitle(props.match.params.name, false);
 
   if (!scene) {

public/app/features/scenes/SceneListPage.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { FC } from 'react';
+import React from 'react';
 import { useAsync } from 'react-use';
 
 import { Stack } from '@grafana/experimental';
@@ -13,7 +13,7 @@ import { getScenes } from './scenes';
 
 export interface Props {}
 
-export const SceneListPage: FC<Props> = ({}) => {
+export const SceneListPage = ({}: Props) => {
   const scenes = getScenes();
   const results = useAsync(() => {
     return getGrafanaSearcher().starred({ starred: true });

public/app/features/scenes/ScenePage.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
@@ -7,7 +7,7 @@ import { getSceneByTitle } from './scenes';
 
 export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
 
-export const ScenePage: FC<Props> = (props) => {
+export const ScenePage = (props: Props) => {
   const scene = getSceneByTitle(props.match.params.name, true);
 
   if (!scene) {

public/app/features/scenes/dashboard/DashboardScenePage.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { Page } from 'app/core/components/Page/Page';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
@@ -9,7 +9,7 @@ import { getDashboardLoader } from './DashboardsLoader';
 
 export interface Props extends GrafanaRouteComponentProps<{ uid: string }> {}
 
-export const DashboardScenePage: FC<Props> = ({ match }) => {
+export const DashboardScenePage = ({ match }: Props) => {
   const loader = getDashboardLoader();
   const { dashboard, isLoading } = loader.useState();
 

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, memo } from 'react';
+import React, { memo } from 'react';
 import { useAsync } from 'react-use';
 
 import { locationUtil, NavModelItem } from '@grafana/data';
@@ -19,7 +19,7 @@ export interface DashboardListPageRouteParams {
 
 interface Props extends GrafanaRouteComponentProps<DashboardListPageRouteParams> {}
 
-export const DashboardListPage: FC<Props> = memo(({ match, location }) => {
+export const DashboardListPage = memo(({ match, location }: Props) => {
   const { loading, value } = useAsync<() => Promise<{ folder?: FolderDTO; pageNav?: NavModelItem }>>(() => {
     const uid = match.params.uid;
     const url = location.pathname;

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

@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import React, { memo } from 'react';
 
 import { Checkbox } from '@grafana/ui';
 
@@ -10,8 +10,8 @@ interface Props {
   'aria-label'?: string;
 }
 
-export const SearchCheckbox: FC<Props> = memo(
-  ({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }) => {
+export const SearchCheckbox = memo(
+  ({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }: Props) => {
     return editable ? (
       <div onClick={onClick} className={className}>
         <Checkbox value={checked} aria-label={ariaLabel} />

public/app/plugins/panel/alertlist/AlertInstances.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { noop } from 'lodash';
 import pluralize from 'pluralize';
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, PanelProps } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
@@ -19,7 +19,7 @@ interface Props {
   options: PanelProps<UnifiedAlertListOptions>['options'];
 }
 
-export const AlertInstances: FC<Props> = ({ alerts, options }) => {
+export const AlertInstances = ({ alerts, options }: Props) => {
   // when custom grouping is enabled, we will always uncollapse the list of alert instances
   const defaultShowInstances = options.groupMode === GroupMode.Custom ? true : options.showInstances;
   const [displayInstances, setDisplayInstances] = useState<boolean>(defaultShowInstances);

public/app/plugins/panel/annolist/AnnotationListItem.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, MouseEvent } from 'react';
+import React, { MouseEvent } from 'react';
 
 import { AnnotationEvent, DateTimeInput, GrafanaTheme2, PanelProps } from '@grafana/data';
 import { Card, TagList, Tooltip, RenderUserContentAsHTML, useStyles2 } from '@grafana/ui';
@@ -14,14 +14,7 @@ interface Props extends Pick<PanelProps<PanelOptions>, 'options'> {
   onTagClick: (tag: string, remove?: boolean) => void;
 }
 
-export const AnnotationListItem: FC<Props> = ({
-  options,
-  annotation,
-  formatDate,
-  onClick,
-  onAvatarClick,
-  onTagClick,
-}) => {
+export const AnnotationListItem = ({ options, annotation, formatDate, onClick, onAvatarClick, onTagClick }: Props) => {
   const styles = useStyles2(getStyles);
   const { showUser, showTags, showTime } = options;
   const { text = '', login, email, avatarUrl, tags, time, timeEnd } = annotation;
@@ -78,7 +71,7 @@ interface AvatarProps {
   email?: string;
 }
 
-const Avatar: FC<AvatarProps> = ({ onClick, avatarUrl, login, email }) => {
+const Avatar = ({ onClick, avatarUrl, login, email }: AvatarProps) => {
   const styles = useStyles2(getStyles);
   const onAvatarClick = (e: MouseEvent) => {
     e.stopPropagation();
@@ -105,7 +98,7 @@ interface TimeStampProps {
   formatDate: (date: DateTimeInput, format?: string) => string;
 }
 
-const TimeStamp: FC<TimeStampProps> = ({ time, formatDate }) => {
+const TimeStamp = ({ time, formatDate }: TimeStampProps) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import {
   FrameMatcherID,
@@ -31,7 +31,9 @@ const recoverRefIdMissing = (
   return;
 };
 
-export const FrameSelectionEditor: FC<StandardEditorProps<MatcherConfig>> = ({ value, context, onChange, item }) => {
+type Props = StandardEditorProps<MatcherConfig>;
+
+export const FrameSelectionEditor = ({ value, context, onChange, item }: Props) => {
   const listOfRefId = useMemo(() => {
     return context.data.map((f) => ({
       value: f.refId,

public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data';
 import { Button, useTheme2 } from '@grafana/ui';
@@ -9,8 +9,9 @@ import { FeatureStyleConfig } from '../types';
 
 import { StyleRuleEditor, StyleRuleEditorSettings } from './StyleRuleEditor';
 
-export const GeomapStyleRulesEditor: FC<StandardEditorProps<FeatureStyleConfig[], unknown, unknown>> = (props) => {
-  const { value, onChange, context, item } = props;
+type Props = StandardEditorProps<FeatureStyleConfig[], unknown, unknown>;
+
+export const GeomapStyleRulesEditor = ({ value, onChange, context, item }: Props) => {
   const theme = useTheme2();
 
   const settings = item.settings;

public/app/plugins/panel/geomap/editor/StyleEditor.tsx

@@ -1,5 +1,5 @@
 import { capitalize } from 'lodash';
-import React, { FC } from 'react';
+import React from 'react';
 import { useObservable } from 'react-use';
 import { Observable, of } from 'rxjs';
 
@@ -42,12 +42,9 @@ export interface StyleEditorOptions {
   displayRotation?: boolean;
 }
 
-export const StyleEditor: FC<StandardEditorProps<StyleConfig, StyleEditorOptions>> = ({
-  value,
-  context,
-  onChange,
-  item,
-}) => {
+type Props = StandardEditorProps<StyleConfig, StyleEditorOptions>;
+
+export const StyleEditor = ({ value, context, onChange, item }: Props) => {
   const settings = item.settings;
 
   const onSizeChange = (sizeValue: ScaleDimensionConfig | undefined) => {

public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { FeatureLike } from 'ol/Feature';
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useObservable } from 'react-use';
 import { Observable } from 'rxjs';
 
@@ -30,10 +30,9 @@ const comparators = [
   { label: '<=', value: ComparisonOperation.LTE },
 ];
 
-export const StyleRuleEditor: FC<StandardEditorProps<FeatureStyleConfig, any, unknown, StyleRuleEditorSettings>> = (
-  props
-) => {
-  const { value, onChange, item, context } = props;
+type Props = StandardEditorProps<FeatureStyleConfig, any, unknown, StyleRuleEditorSettings>;
+
+export const StyleRuleEditor = ({ value, onChange, item, context }: Props) => {
   const settings: StyleRuleEditorSettings = item.settings;
   const { features, layerInfo } = settings;
 

public/app/plugins/panel/gettingstarted/components/Step.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -13,7 +13,7 @@ interface Props {
   step: SetupStep;
 }
 
-export const Step: FC<Props> = ({ step }) => {
+export const Step = ({ step }: Props) => {
   const styles = useStyles2(getStyles);
 
   return (

public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, MouseEvent, useCallback } from 'react';
+import React, { MouseEvent, useCallback } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
@@ -13,7 +13,7 @@ interface Props {
   card: TutorialCardType;
 }
 
-export const TutorialCard: FC<Props> = ({ card }) => {
+export const TutorialCard = ({ card }: Props) => {
   const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
   const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
 

public/app/plugins/panel/piechart/PieChart.tsx

@@ -5,7 +5,7 @@ import { Group } from '@visx/group';
 import Pie, { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { UseTooltipParams } from '@visx/tooltip/lib/hooks/useTooltip';
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import tinycolor from 'tinycolor2';
 
 import {
@@ -46,7 +46,7 @@ interface PieChartProps {
   tooltipOptions: VizTooltipOptions;
 }
 
-export const PieChart: FC<PieChartProps> = ({
+export const PieChart = ({
   fieldDisplayValues,
   pieType,
   width,
@@ -54,7 +54,7 @@ export const PieChart: FC<PieChartProps> = ({
   highlightedTitle,
   displayLabels = [],
   tooltipOptions,
-}) => {
+}: PieChartProps) => {
   const theme = useTheme2();
   const componentInstanceId = useComponentInstanceId('PieChart');
   const styles = useStyles2(getStyles);

public/app/plugins/panel/xychart/AutoEditor.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import {
   SelectableValue,
@@ -19,11 +19,11 @@ interface XYInfo {
   yFields: Array<SelectableValue<boolean>>;
 }
 
-export const AutoEditor: FC<StandardEditorProps<XYDimensionConfig, any, XYChartOptions>> = ({
+export const AutoEditor = ({
   value,
   onChange,
   context,
-}) => {
+}: StandardEditorProps<XYDimensionConfig, any, XYChartOptions>) => {
   const frameNames = useMemo(() => {
     if (context?.data?.length) {
       return context.data.map((f, idx) => ({