Chore: Avoid explicit React.FC<Props> when possible (#64722)

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

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Input, defaultIntervals, Field } from '@grafana/ui';
 
@@ -11,12 +11,12 @@ export interface Props {
   validateIntervalsFunc?: typeof validateIntervals;
 }
 
-export const AutoRefreshIntervals: FC<Props> = ({
+export const AutoRefreshIntervals = ({
   refreshIntervals,
   onRefreshIntervalChange,
   getIntervalsFunc = getValidIntervals,
   validateIntervalsFunc = validateIntervals,
-}) => {
+}: Props) => {
   const [intervals, setIntervals] = useState<string[]>(getIntervalsFunc(refreshIntervals ?? defaultIntervals));
   const [invalidIntervalsMessage, setInvalidIntervalsMessage] = useState<string | null>(null);
 

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

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, ReactNode, useCallback, useEffect, useState, useRef } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState, useRef } from 'react';
 import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -23,8 +23,18 @@ export interface OptionsPaneCategoryProps {
 
 const CATEGORY_PARAM_NAME = 'showCategory';
 
-export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
-  ({ id, title, children, forceOpen, isOpenDefault, renderTitle, className, itemsCount, isNested = false }) => {
+export const OptionsPaneCategory = React.memo(
+  ({
+    id,
+    title,
+    children,
+    forceOpen,
+    isOpenDefault,
+    renderTitle,
+    className,
+    itemsCount,
+    isNested = false,
+  }: OptionsPaneCategoryProps) => {
     const initialIsExpanded = isOpenDefault !== false;
     const [savedState, setSavedState] = useLocalStorage(getOptionGroupStorageKey(id), {
       isExpanded: initialIsExpanded,

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

@@ -1,11 +1,11 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { FieldConfigOptionsRegistry, GrafanaTheme2, ConfigOverrideRule } from '@grafana/data';
 import { HorizontalGroup, Icon, IconButton, useStyles2 } from '@grafana/ui';
 import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';
 
-interface OverrideCategoryTitleProps {
+interface Props {
   isExpanded: boolean;
   registry: FieldConfigOptionsRegistry;
   matcherUi: FieldMatcherUIRegistryItem<any>;
@@ -13,14 +13,14 @@ interface OverrideCategoryTitleProps {
   overrideName: string;
   onOverrideRemove: () => void;
 }
-export const OverrideCategoryTitle: FC<OverrideCategoryTitleProps> = ({
+export const OverrideCategoryTitle = ({
   isExpanded,
   registry,
   matcherUi,
   overrideName,
   override,
   onOverrideRemove,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
   const properties = override.properties.map((p) => registry.getIfExists(p.id)).filter((prop) => !!prop);
   const propertyNames = properties.map((p) => p?.name).join(', ');

public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React, { FC } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import { ReplaySubject } from 'rxjs';
@@ -12,7 +12,6 @@ import {
   LoadingState,
   PanelData,
   PanelPlugin,
-  PanelProps,
   TimeRange,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -235,4 +234,4 @@ describe('PanelEditorTableView', () => {
   });
 });
 
-const TestPanelComponent: FC<PanelProps> = () => <div>Plugin Panel to Render</div>;
+const TestPanelComponent = () => <div>Plugin Panel to Render</div>;

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Subscription } from 'rxjs';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -22,7 +22,7 @@ interface PanelEditorTabsProps {
   onChangeTab: (tab: PanelEditorTab) => void;
 }
 
-export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, dashboard, tabs, onChangeTab }) => {
+export const PanelEditorTabs = React.memo(({ panel, dashboard, tabs, onChangeTab }: PanelEditorTabsProps) => {
   const forceUpdate = useForceUpdate();
   const styles = useStyles2(getStyles);
 

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data';
@@ -25,7 +25,7 @@ interface Props {
   data?: PanelData;
 }
 
-export const VisualizationSelectPane: FC<Props> = ({ panel, data }) => {
+export const VisualizationSelectPane = ({ panel, data }: Props) => {
   const plugin = useSelector(getPanelPluginWithFallback(panel.type));
   const [searchQuery, setSearchQuery] = useState('');
   const [listMode, setListMode] = useLocalStorage(

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

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
@@ -12,7 +12,7 @@ export interface Props {
   onChange: (name: string | null) => void;
 }
 
-export const RepeatRowSelect: FC<Props> = ({ repeat, onChange, id }) => {
+export const RepeatRowSelect = ({ repeat, onChange, id }: Props) => {
   const variables = useSelector((state) => {
     return getVariablesByKey(getLastKey(state), state);
   });

public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Icon, ModalsController } from '@grafana/ui';
 
@@ -11,7 +11,7 @@ export interface RowOptionsButtonProps {
   onUpdate: OnRowOptionsUpdate;
 }
 
-export const RowOptionsButton: FC<RowOptionsButtonProps> = ({ repeat, title, onUpdate }) => {
+export const RowOptionsButton = ({ repeat, title, onUpdate }: RowOptionsButtonProps) => {
   const onUpdateChange = (hideModal: () => void) => (title: string, repeat?: string | null) => {
     onUpdate(title, repeat);
     hideModal();

public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Button, Field, Form, Modal, Input } from '@grafana/ui';
 
@@ -13,7 +13,7 @@ export interface Props {
   onCancel: () => void;
 }
 
-export const RowOptionsForm: FC<Props> = ({ repeat, title, onUpdate, onCancel }) => {
+export const RowOptionsForm = ({ repeat, title, onUpdate, onCancel }: Props) => {
   const [newRepeat, setNewRepeat] = useState<string | null | undefined>(repeat);
   const onChangeRepeat = useCallback((name?: string | null) => setNewRepeat(name), [setNewRepeat]);
 

public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Modal, stylesFactory } from '@grafana/ui';
 
@@ -12,7 +12,7 @@ export interface RowOptionsModalProps {
   onUpdate: OnRowOptionsUpdate;
 }
 
-export const RowOptionsModal: FC<RowOptionsModalProps> = ({ repeat, title, onDismiss, onUpdate }) => {
+export const RowOptionsModal = ({ repeat, title, onDismiss, onUpdate }: RowOptionsModalProps) => {
   const styles = getStyles();
   return (
     <Modal isOpen={true} title="Row options" icon="copy" onDismiss={onDismiss} className={styles.modal}>

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useEffectOnce } from 'react-use';
 
 import { sanitizeUrl } from '@grafana/data/src/text/sanitize';
@@ -18,7 +18,7 @@ export interface Props {
   links: DashboardLink[];
 }
 
-export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
+export const DashboardLinks = ({ dashboard, links }: Props) => {
   const forceUpdate = useForceUpdate();
 
   useEffectOnce(() => {