Chore: replace React.FC<Props> with simple function component (#54123)

contribute/style-guides/styling.md

@@ -104,7 +104,7 @@ interface Props {
   className?: string;
 }
 
-const ComponentA: React.FC<Props> = ({ className }) => {
+function ComponentA({ className }: Props) {
   const finalClassName = cx(
     className,
     css`
@@ -113,5 +113,5 @@ const ComponentA: React.FC<Props> = ({ className }) => {
   );
 
   return <div className={finalClassName}>As red as you can ge</div>;
-};
+}
 ```

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

@@ -31,11 +31,11 @@ For panels, the `replaceVariables` function is available in the PanelProps.
 Add `replaceVariables` to the argument list, and pass it a user-defined template string.
 
 ```ts
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height, replaceVariables }) => {
+export function SimplePanel({ options, data, width, height, replaceVariables }: Props) {
   const query = replaceVariables('Now displaying $service');
 
   return <div>{query}</div>;
-};
+}
 ```
 
 ## Interpolate variables in data source plugins

docs/sources/developers/plugins/migration-guide.md

@@ -708,9 +708,9 @@ import { PanelProps } from '@grafana/data';
 
 interface Props extends PanelProps<SimpleOptions> {}
 
-export const MyPanel: React.FC<Props> = ({ options, data, width, height }) => {
+export function MyPanel({ options, data, width, height }: Props) {
   // ...
-};
+}
 ```
 
 #### Migrate a data source plugin

docs/sources/developers/plugins/working-with-data-frames.md

@@ -52,11 +52,11 @@ frame.name = 'http_requests_total';
 When you're building a panel plugin, the data frames returned by the data source are available from the `data` prop in your panel component.
 
 ```ts
-const SimplePanel: React.FC<Props> = ({ data }) => {
+function SimplePanel({ data: Props }) {
   const frame = data.series[0];
 
   // ...
-};
+}
 ```
 
 Before you start reading the data, think about what data you expect. For example, to visualize a time series we'd need at least one time field, and one number field.

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

@@ -114,14 +114,14 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
   );
 };
 
-export const TimePickerContent: React.FC<Props> = (props) => {
+export const TimePickerContent = (props: Props) => {
   const { widthOverride } = props;
   const theme = useTheme2();
   const isFullscreen = (widthOverride || window.innerWidth) >= theme.breakpoints.values.lg;
   return <TimePickerContentWithScreenSize {...props} isFullscreen={isFullscreen} />;
 };
 
-const NarrowScreenForm: React.FC<FormProps> = (props) => {
+const NarrowScreenForm = (props: FormProps) => {
   const { value, hideQuickRanges, onChange, timeZone, historyOptions = [], showHistory } = props;
   const theme = useTheme2();
   const styles = getNarrowScreenStyles(theme);

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

@@ -44,7 +44,7 @@ const ERROR_MESSAGES = {
   range: '"From" can\'t be after "To"',
 };
 
-export const TimeRangeForm: React.FC<Props> = (props) => {
+export const TimeRangeForm = (props: Props) => {
   const { value, isFullscreen = false, timeZone, onApply: onApplyFromProps, isReversed, fiscalYearStartMonth } = props;
   const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);
   const style = useStyles2(getStyles);

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

@@ -36,7 +36,7 @@ interface Props {
   placeholderEmpty?: ReactNode;
 }
 
-export const TimeRangeList: React.FC<Props> = (props) => {
+export const TimeRangeList = (props: Props) => {
   const styles = getStyles();
   const { title, options, placeholderEmpty } = props;
 
@@ -60,7 +60,7 @@ export const TimeRangeList: React.FC<Props> = (props) => {
   );
 };
 
-const Options: React.FC<Props> = ({ options, value, onChange, title }) => {
+const Options = ({ options, value, onChange, title }: Props) => {
   const styles = getOptionsStyles();
 
   return (

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

@@ -28,7 +28,7 @@ export interface Props {
   inputId?: string;
 }
 
-export const TimeZonePicker: React.FC<Props> = (props) => {
+export const TimeZonePicker = (props: Props) => {
   const {
     onChange,
     width,

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

@@ -9,7 +9,7 @@ interface Props {
   title: string | ReactNode;
 }
 
-export const TimeZoneTitle: React.FC<Props> = ({ title }) => {
+export const TimeZoneTitle = ({ title }: Props) => {
   const styles = useStyles2(getStyles);
 
   if (!title) {

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

@@ -22,7 +22,7 @@ const weekStarts: Array<SelectableValue<string>> = [
   { value: 'monday', label: 'Monday' },
 ];
 
-export const WeekStartPicker: React.FC<Props> = (props) => {
+export const WeekStartPicker = (props: Props) => {
   const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
 
   const onChangeWeekStart = useCallback(

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

@@ -23,7 +23,7 @@ interface Props {
   onChangeTab(tab: ModalTab): void;
 }
 
-export const ModalTabsHeader: React.FC<Props> = ({ icon, title, tabs, activeTab, onChangeTab }) => {
+export const ModalTabsHeader = ({ icon, title, tabs, activeTab, onChangeTab }: Props) => {
   return (
     <ModalHeader icon={icon} title={title}>
       <TabsBar hideBorder={true}>

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

@@ -19,14 +19,14 @@ export interface Props {
   className?: string;
 }
 
-export const Pagination: React.FC<Props> = ({
+export const Pagination = ({
   currentPage,
   numberOfPages,
   onNavigate,
   hideWhenSinglePage,
   showSmallVersion,
   className,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
   const pageLengthToCondense = showSmallVersion ? 1 : 8;
 

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

@@ -27,7 +27,7 @@ function getStartIndices(parts: HighlightPart[], length: number): number[] {
   return indices;
 }
 
-export const PartialHighlighter: React.FC<Props> = (props: Props) => {
+export const PartialHighlighter = (props: Props) => {
   let { highlightParts, text, highlightClassName } = props;
 
   if (!highlightParts?.length) {

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

@@ -34,7 +34,7 @@ interface Props {
   height: number;
 }
 
-export const TypeaheadInfo: React.FC<Props> = ({ item, height }) => {
+export const TypeaheadInfo = ({ item, height }: Props) => {
   const visible = item && !!item.documentation;
   const label = item ? item.label : '';
   const documentation = renderMarkdown(item?.documentation);

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

@@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
 });
 
-export const TypeaheadItem: React.FC<Props> = (props: Props) => {
+export const TypeaheadItem = (props: Props) => {
   const styles = useStyles(getStyles);
 
   const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props;

public/app/core/components/CloseButton/CloseButton.tsx

@@ -10,7 +10,7 @@ type Props = {
   style?: React.CSSProperties;
 };
 
-export const CloseButton: React.FC<Props> = ({ onClick, 'aria-label': ariaLabel, style }) => {
+export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props) => {
   const styles = useStyles2(getStyles);
   return (
     <IconButton aria-label={ariaLabel ?? 'Close'} className={styles} name="times" onClick={onClick} style={style} />

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

@@ -7,7 +7,7 @@ interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
   suffix?: ReactNode;
 }
 
-export const StringValueEditor: React.FC<Props> = ({ value, onChange, item, suffix }) => {
+export const StringValueEditor = ({ value, onChange, item, suffix }: Props) => {
   const Component = item.settings?.useTextarea ? TextArea : Input;
   const onValueChange = useCallback(
     (e: React.SyntheticEvent) => {

public/app/core/components/TimePicker/TimePickerWithHistory.tsx

@@ -9,7 +9,7 @@ const LOCAL_STORAGE_KEY = 'grafana.dashboard.timepicker.history';
 
 interface Props extends Omit<TimeRangePickerProps, 'history' | 'theme'> {}
 
-export const TimePickerWithHistory: React.FC<Props> = (props) => {
+export const TimePickerWithHistory = (props: Props) => {
   return (
     <LocalStorageValueProvider<TimeRange[]> storageKey={LOCAL_STORAGE_KEY} defaultValue={[]}>
       {(values, onSaveToStore) => {

public/app/features/admin/UserListAdminPage.tsx

@@ -55,7 +55,7 @@ interface OwnProps {}
 
 type Props = OwnProps & ConnectedProps<typeof connector>;
 
-const UserListAdminPageUnConnected: React.FC<Props> = ({
+const UserListAdminPageUnConnected = ({
   fetchUsers,
   query,
   changeQuery,
@@ -67,7 +67,7 @@ const UserListAdminPageUnConnected: React.FC<Props> = ({
   changeFilter,
   filters,
   isLoading,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   useEffect(() => {

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

@@ -58,7 +58,7 @@ const getCopiedPanelPlugins = () => {
   return sortBy(copiedPanels, 'sort');
 };
 
-export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard }) => {
+export const AddPanelWidgetUnconnected = ({ panel, dashboard }: Props) => {
   const [addPanelView, setAddPanelView] = useState(false);
 
   const onCancelAddPanel = (evt: React.MouseEvent<HTMLButtonElement>) => {

public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx

@@ -19,7 +19,7 @@ type Props = {
 
 export const newAnnotationName = 'New annotation';
 
-export const AnnotationSettingsEdit: React.FC<Props> = ({ editIdx, dashboard }) => {
+export const AnnotationSettingsEdit = ({ editIdx, dashboard }: Props) => {
   const [annotation, setAnnotation] = useState(dashboard.annotations.list[editIdx]);
 
   const { value: ds } = useAsync(() => {

public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx

@@ -14,7 +14,7 @@ type Props = {
   onEdit: (idx: number) => void;
 };
 
-export const AnnotationSettingsList: React.FC<Props> = ({ dashboard, onNew, onEdit }) => {
+export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
   const [annotations, updateAnnotations] = useState(dashboard.annotations.list);
 
   const onMove = (idx: number, direction: number) => {

public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx

@@ -24,7 +24,7 @@ const connector = connect(null, mapDispatchToProps);
 
 type Props = DeleteDashboardModalProps & ConnectedProps<typeof connector>;
 
-const DeleteDashboardModalUnconnected: React.FC<Props> = ({ hideModal, cleanUpDashboardAndVariables, dashboard }) => {
+const DeleteDashboardModalUnconnected = ({ hideModal, cleanUpDashboardAndVariables, dashboard }: Props) => {
   const isProvisioned = dashboard.meta.provisioned;
   const { onDeleteDashboard } = useDashboardDelete(dashboard.uid, cleanUpDashboardAndVariables);
 

public/app/features/dashboard/components/Inspector/InspectContent.tsx

@@ -31,7 +31,7 @@ interface Props {
   onClose: () => void;
 }
 
-export const InspectContent: React.FC<Props> = ({
+export const InspectContent = ({
   panel,
   plugin,
   dashboard,
@@ -43,7 +43,7 @@ export const InspectContent: React.FC<Props> = ({
   defaultTab,
   onDataOptionsChange,
   onClose,
-}) => {
+}: Props) => {
   const [currentTab, setCurrentTab] = useState(defaultTab ?? InspectTab.Data);
 
   if (!plugin) {

public/app/features/dashboard/components/Inspector/PanelInspector.tsx

@@ -26,7 +26,7 @@ export interface ConnectedProps {
 
 export type Props = OwnProps & ConnectedProps;
 
-const PanelInspectorUnconnected: React.FC<Props> = ({ panel, dashboard, plugin }) => {
+const PanelInspectorUnconnected = ({ panel, dashboard, plugin }: Props) => {
   const [dataOptions, setDataOptions] = useState<GetDataOptions>({
     withTransforms: false,
     withFieldConfig: true,

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

@@ -18,7 +18,7 @@ interface Props {
   dashboardId: number;
 }
 
-export const DashboardLinksDashboard: React.FC<Props> = (props) => {
+export const DashboardLinksDashboard = (props: Props) => {
   const { link, linkInfo } = props;
   const listRef = useRef<HTMLUListElement>(null);
   const [dropdownCssClass, setDropdownCssClass] = useState('invisible');

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

@@ -9,7 +9,7 @@ interface Props {
   onChange: (v: string) => void;
 }
 
-const IconSelector: React.FC<Props> = ({ value, onChange }) => {
+const IconSelector = ({ value, onChange }: Props) => {
   const [icons, setIcons] = useState<SelectableValue[]>(value ? [{ value, label: value }] : []);
   const [icon, setIcon] = useState<string>();
   const iconRoot = (window as any).__grafana_public_path__ + 'img/icons/unicons/';

public/app/features/explore/LogsMetaRow.tsx

@@ -18,7 +18,7 @@ export type Props = {
   clearDetectedFields: () => void;
 };
 
-export const LogsMetaRow: React.FC<Props> = React.memo(
+export const LogsMetaRow = React.memo(
   ({
     meta,
     dedupStrategy,
@@ -29,7 +29,7 @@ export const LogsMetaRow: React.FC<Props> = React.memo(
     forceEscape,
     onEscapeNewlines,
     logRows,
-  }) => {
+  }: Props) => {
     const logsMetaItem: Array<LogsMetaItem | MetaItemProps> = [...meta];
 
     // Add deduplication info

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

@@ -98,7 +98,7 @@ interface Props extends AddLibraryPanelContentsProps {
   isOpen?: boolean;
 }
 
-export const AddLibraryPanelModal: React.FC<Props> = ({ isOpen = false, panel, initialFolderId, ...props }) => {
+export const AddLibraryPanelModal = ({ isOpen = false, panel, initialFolderId, ...props }: Props) => {
   return (
     <Modal title="Create library panel" isOpen={isOpen} onDismiss={props.onDismiss}>
       <AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={props.onDismiss} />

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

@@ -12,7 +12,7 @@ interface Props {
   formatDate?: (dateString: DateTimeInput, format?: string) => string;
 }
 
-export const LibraryPanelInformation: React.FC<Props> = ({ panel, formatDate }) => {
+export const LibraryPanelInformation = ({ panel, formatDate }: Props) => {
   const styles = useStyles(getStyles);
 
   if (!isPanelModelLibraryPanel(panel)) {

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

@@ -17,14 +17,7 @@ interface Props {
   onDiscard: () => void;
 }
 
-export const SaveLibraryPanelModal: React.FC<Props> = ({
-  panel,
-  folderId,
-  isUnsavedPrompt,
-  onDismiss,
-  onConfirm,
-  onDiscard,
-}) => {
+export const SaveLibraryPanelModal = ({ panel, folderId, isUnsavedPrompt, onDismiss, onConfirm, onDiscard }: Props) => {
   const [searchString, setSearchString] = useState('');
   const dashState = useAsync(async () => {
     const searchHits = await getConnectedDashboards(panel.libraryPanel.uid);

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

@@ -8,7 +8,7 @@ interface Props {
   onDismiss: () => void;
 }
 
-export const UnlinkModal: React.FC<Props> = ({ isOpen, onConfirm, onDismiss }) => {
+export const UnlinkModal = ({ isOpen, onConfirm, onDismiss }: Props) => {
   return (
     <ConfirmModal
       title="Do you really want to unlink this panel?"

public/app/features/live/pages/PipelineTable.tsx

@@ -22,7 +22,7 @@ interface Props {
   selectRule?: Rule;
 }
 
-export const PipelineTable: React.FC<Props> = (props) => {
+export const PipelineTable = (props: Props) => {
   const { rules } = props;
   const [isOpen, setOpen] = useState(false);
   const [selectedRule, setSelectedRule] = useState<Rule>();

public/app/features/live/pages/RuleModal.tsx

@@ -31,7 +31,7 @@ const tabs: TabInfo[] = [
   { label: 'Test', isTest: true, icon: 'flask' },
 ];
 
-export const RuleModal: React.FC<Props> = (props) => {
+export const RuleModal = (props: Props) => {
   const { isOpen, onClose, clickColumn } = props;
   const [rule, setRule] = useState<Rule>(props.rule);
   const [activeTab, setActiveTab] = useState<TabInfo | undefined>(tabs.find((t) => t.type === clickColumn));

public/app/features/live/pages/RuleSettingsArray.tsx

@@ -13,7 +13,7 @@ interface Props {
   entitiesInfo: PipeLineEntitiesInfo;
 }
 
-export const RuleSettingsArray: React.FC<Props> = ({ onChange, value, ruleType, entitiesInfo }) => {
+export const RuleSettingsArray = ({ onChange, value, ruleType, entitiesInfo }: Props) => {
   const [index, setIndex] = useState<number>(0);
   const arr = value ?? [];
   const onRuleChange = (v: RuleSetting) => {

public/app/features/live/pages/RuleSettingsEditor.tsx

@@ -11,7 +11,7 @@ interface Props {
   entitiesInfo: PipeLineEntitiesInfo;
 }
 
-export const RuleSettingsEditor: React.FC<Props> = ({ onChange, value, ruleType, entitiesInfo }) => {
+export const RuleSettingsEditor = ({ onChange, value, ruleType, entitiesInfo }: Props) => {
   return (
     <>
       <Select

public/app/features/live/pages/RuleTest.tsx

@@ -11,7 +11,7 @@ interface Props {
   rule: Rule;
 }
 
-export const RuleTest: React.FC<Props> = (props) => {
+export const RuleTest = (props: Props) => {
   const [response, setResponse] = useState<ChannelFrame[]>();
   const [data, setData] = useState<string>();
   const styles = useStyles(getStyles);

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

@@ -11,7 +11,7 @@ interface Props {
   disabled: boolean;
 }
 
-export const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disabled }) => {
+export const VizTypePickerPlugin = ({ isCurrent, plugin, onClick, disabled }: Props) => {
   return (
     <PanelTypeCard
       title={plugin.name}

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

@@ -18,7 +18,7 @@ export interface DataFrameFieldsInfo {
   fieldByDisplayName: Record<string, Field>;
 }
 
-export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
+export const FilterByValueFilterEditor = (props: Props) => {
   const { onDelete, onChange, filter, fieldsInfo } = props;
   const { fieldsAsOptions, fieldByDisplayName } = fieldsInfo;
   const fieldName = getFieldName(filter, fieldsAsOptions) ?? '';

public/app/plugins/datasource/cloud-monitoring/components/Experimental/LookbackPeriodSelect.tsx

@@ -12,7 +12,7 @@ export interface Props {
   current?: string;
 }
 
-export const LookbackPeriodSelect: React.FC<Props> = ({ refId, current, templateVariableOptions, onChange }) => {
+export const LookbackPeriodSelect = ({ refId, current, templateVariableOptions, onChange }: Props) => {
   const options = LOOKBACK_PERIODS.map((lp) => ({
     ...lp,
     label: lp.text,

public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx

@@ -14,7 +14,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const SLO = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]);
   const { projectName, serviceId } = query;
 

public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx

@@ -15,7 +15,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Selector = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   return (
     <EditorField label="Selector" htmlFor={`${refId}-slo-selector`}>
       <Select

public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx

@@ -14,7 +14,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Service = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [services, setServices] = useState<Array<SelectableValue<string>>>([]);
   const { projectName } = query;
 

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

@@ -16,7 +16,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const SLO = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]);
   const { projectName, serviceId } = query;
 

public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx

@@ -16,7 +16,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Selector = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   return (
     <QueryEditorRow label="Selector" htmlFor={`${refId}-slo-selector`}>
       <Select

public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx

@@ -16,7 +16,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Service = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [services, setServices] = useState<Array<SelectableValue<string>>>([]);
   const { projectName } = query;
 

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

@@ -45,13 +45,7 @@ const filterConditionsToDimensions = (filters: DimensionFilterCondition[]) => {
   }, {});
 };
 
-export const Dimensions: React.FC<Props> = ({
-  metricStat,
-  datasource,
-  dimensionKeys,
-  disableExpressions,
-  onChange,
-}) => {
+export const Dimensions = ({ metricStat, datasource, dimensionKeys, disableExpressions, onChange }: Props) => {
   const dimensionFilters = useMemo(() => dimensionsToFilterConditions(metricStat.dimensions), [metricStat.dimensions]);
   const [items, setItems] = useState<DimensionFilterCondition[]>(dimensionFilters);
   const onDimensionsChange = (newItems: Array<Partial<DimensionFilterCondition>>) => {

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

@@ -32,7 +32,7 @@ const filterConditionsToMultiFilters = (filters: MultiFilterCondition[]) => {
   return res;
 };
 
-export const MultiFilter: React.FC<Props> = ({ filters, onChange, keyPlaceholder }) => {
+export const MultiFilter = ({ filters, onChange, keyPlaceholder }: Props) => {
   const [items, setItems] = useState<MultiFilterCondition[]>([]);
   useEffect(() => setItems(filters ? multiFiltersToFilterConditions(filters) : []), [filters]);
   const onFiltersChange = (newItems: Array<Partial<MultiFilterCondition>>) => {

public/app/plugins/datasource/graphite/components/GraphiteVariableEditor.tsx

@@ -17,7 +17,7 @@ const GRAPHITE_QUERY_VARIABLE_TYPE_OPTIONS = [
   { label: 'Metric Name Query', value: GraphiteQueryType.MetricName },
 ];
 
-export const GraphiteVariableEditor: React.FC<Props> = (props) => {
+export const GraphiteVariableEditor = (props: Props) => {
   const { query, onChange } = props;
   const [value, setValue] = useState(convertToGraphiteQueryObject(query));
 

public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx

@@ -10,7 +10,7 @@ import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/Trace
 
 export type Props = DataSourcePluginOptionsEditorProps;
 
-export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
+export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
   return (
     <>
       <DataSourceHttpSettings

public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx

@@ -14,7 +14,7 @@ import { ServiceGraphSettings } from './ServiceGraphSettings';
 
 export type Props = DataSourcePluginOptionsEditorProps;
 
-export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
+export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
   return (
     <>
       <DataSourceHttpSettings

public/app/plugins/datasource/zipkin/ConfigEditor.tsx

@@ -10,7 +10,7 @@ import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/Trace
 
 export type Props = DataSourcePluginOptionsEditorProps;
 
-export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
+export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
   return (
     <>
       <DataSourceHttpSettings

public/app/plugins/panel/histogram/HistogramPanel.tsx

@@ -9,7 +9,7 @@ import { PanelOptions } from './models.gen';
 
 type Props = PanelProps<PanelOptions>;
 
-export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }) => {
+export const HistogramPanel = ({ data, options, width, height }: Props) => {
   const theme = useTheme2();
 
   const histogram = useMemo(() => {