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

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(