From 4f13e78d117f915792953f6d6272b63722a0c4ca Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 15 Mar 2023 07:56:09 -0700
Subject: [PATCH] Chore: Avoid explicit React.FC<Props> when possible (round 2)
 (#64749)

---
 .betterer.results                             |   6 +-
 contribute/style-guides/styling.md            |   2 +-
 .../plugins/add-support-for-variables.md      |   2 +-
 .../plugins/custom-panel-option-editors.md    |   8 +-
 .../ButtonCascader/ButtonCascader.tsx         |   2 +-
 .../components/ContextMenu/ContextMenu.tsx    |   4 +-
 .../ContextMenu/WithContextMenu.tsx           |   2 +-
 .../components/DataLinks/DataLinkEditor.tsx   |  72 ++++----
 .../components/DataLinks/DataLinkInput.tsx    |   9 +-
 .../DataLinks/DataLinkSuggestions.tsx         |  14 +-
 .../DataLinksInlineEditor.tsx                 |   7 +-
 .../DataSourceSettings/BasicAuthSettings.tsx  |   2 +-
 .../CustomHeadersSettings.tsx                 |   2 +-
 .../DataSourceHttpSettings.tsx                |   2 +-
 .../DataSourceSettings/HttpProxySettings.tsx  |   4 +-
 .../DataSourceSettings/TLSAuthSettings.tsx    |   2 +-
 .../RelativeTimeRangePicker.test.tsx          |   2 +-
 .../TimeRangePicker/TimePickerContent.tsx     |   4 +-
 .../TimeZonePicker/TimeZoneOption.tsx         |   4 +-
 .../src/components/FilterPill/FilterPill.tsx  |   2 +-
 .../grafana-ui/src/components/Forms/Field.tsx |   4 +-
 .../grafana-ui/src/components/Forms/Label.tsx |   2 +-
 .../src/components/Forms/Legend.tsx           |   2 +-
 .../RadioButtonList/RadioButtonList.story.tsx |   2 +-
 .../src/components/Graph/GraphContextMenu.tsx |   4 +-
 .../GraphTooltip/MultiModeGraphTooltip.tsx    |  12 +-
 .../GraphTooltip/SingleModeGraphTooltip.tsx   |   6 +-
 .../src/components/InfoBox/FeatureInfoBox.tsx |   2 +-
 .../src/components/Menu/MenuGroup.tsx         |   2 +-
 .../src/components/Menu/SubMenu.tsx           |   4 +-
 .../components/PanelChrome/ErrorIndicator.tsx |   2 +-
 .../PanelChrome/LoadingIndicator.tsx          |   2 +-
 .../PluginSignatureBadge.tsx                  |   2 +-
 .../components/Segment/useExpandableLabel.tsx |   2 +-
 .../components/Select/DropdownIndicator.tsx   |   2 +-
 .../src/components/VizTooltip/SeriesTable.tsx |   4 +-
 .../VizTooltip/VizTooltipContainer.tsx        |   4 +-
 .../src/components/uPlot/PlotLegend.tsx       |   4 +-
 .../uPlot/plugins/KeyboardPlugin.tsx          |   4 +-
 .../uPlot/plugins/TooltipPlugin.tsx           |   4 +-
 .../components/uPlot/plugins/ZoomPlugin.tsx   |   4 +-
 .../src/options/builder/hideSeries.tsx        |   4 +-
 .../src/options/builder/stacking.tsx          |   7 +-
 .../src/themes/ThemeContext.test.tsx          |   2 +-
 .../utils/storybook/ThemedDocsContainer.tsx   |   3 +-
 .../core/components/OptionsUI/fieldColor.tsx  |   9 +-
 .../app/core/components/OptionsUI/links.tsx   |   8 +-
 .../app/core/components/OptionsUI/number.tsx  |   8 +-
 .../app/core/components/OptionsUI/slider.tsx  |   8 +-
 .../app/core/components/OptionsUI/stats.tsx   |   4 +-
 .../QueryOperationAction.tsx                  |   8 +-
 .../QueryOperationRowHeader.tsx               |   2 +-
 .../features/commandPalette/KBarResults.tsx   |   2 +-
 .../CategoryHeader/CategoryHeader.tsx         |   4 +-
 .../AddPanelWidget/AddPanelWidget.tsx         |   2 +-
 .../DashboardSettings/ListNewButton.tsx       |   2 +-
 .../LinksSettings/LinkSettingsEdit.tsx        |   2 +-
 .../LinksSettings/LinkSettingsList.tsx        |   2 +-
 .../PanelEditor/DynamicConfigValueEditor.tsx  |   4 +-
 .../components/PanelEditor/OptionsPane.tsx    |   4 +-
 .../PanelEditor/OptionsPaneOptions.tsx        |   2 +-
 .../SaveDashboard/SaveDashboardButton.tsx     |  11 +-
 .../SaveDashboard/SaveDashboardErrorProxy.tsx |   4 +-
 .../SaveDashboard/UnsavedChangesModal.tsx     |   7 +-
 .../forms/SaveDashboardAsForm.tsx             |   8 +-
 .../forms/SaveProvisionedDashboardForm.tsx    |   2 +-
 .../SubMenu/DashboardLinksDashboard.tsx       |   2 +-
 .../TransformationOperationRows.tsx           |   4 +-
 .../components/VersionHistory/DiffTitle.tsx   |   2 +-
 .../components/VersionHistory/DiffValues.tsx  |   2 +-
 .../components/VersionHistory/DiffViewer.tsx  |   2 +-
 .../VersionHistory/RevertDashboardModal.tsx   |   2 +-
 .../VersionHistory/VersionHistoryButtons.tsx  |   4 +-
 .../VersionHistoryComparison.tsx              |   2 +-
 .../VersionHistory/VersionHistoryHeader.tsx   |   4 +-
 .../dashboard/dashgrid/DashboardGrid.test.tsx |   2 +-
 .../SpanDetail/AccordianReferences.tsx        |   4 +-
 .../LibraryPanelCard/LibraryPanelCard.tsx     |   9 +-
 .../LibraryPanelsView/LibraryPanelsView.tsx   |   4 +-
 .../sql/components/DatasetSelector.tsx        |   9 +-
 .../plugins/sql/components/TableSelector.tsx  |   2 +-
 .../visual-query-builder/VisualEditor.tsx     |   9 +-
 .../FilterByValueTransformerEditor.tsx        |   4 +-
 .../ValueMatchers/NoopMatcherEditor.tsx       |   6 +-
 .../HeatmapTransformerEditor.tsx              |   2 +-
 .../calculateHeatmap/editor/AxisEditor.tsx    |   6 +-
 .../editors/GroupByTransformerEditor.tsx      |   6 +-
 .../GroupingToMatrixTransformerEditor.tsx     |   4 +-
 .../editors/HistogramTransformerEditor.tsx    |   4 +-
 .../LabelsToFieldsTransformerEditor.tsx       |   4 +-
 .../editors/LimitTransformerEditor.tsx        |   5 +-
 .../editors/MergeTransformerEditor.tsx        |   6 +-
 .../editors/ReduceTransformerEditor.tsx       |   5 +-
 .../editors/SeriesToRowsTransformerEditor.tsx |   6 +-
 .../editors/SortByTransformerEditor.tsx       |   6 +-
 .../ExtractFieldsTransformerEditor.tsx        |   4 +-
 .../FieldLookupTransformerEditor.tsx          |   6 +-
 .../spatial/SpatialTransformerEditor.tsx      |   4 +-
 .../ArgQueryEditor/ArgQueryEditor.tsx         |   4 +-
 .../components/ArgQueryEditor/QueryField.tsx  |   2 +-
 .../LogsQueryEditor/FormatAsField.tsx         |   2 +-
 .../LogsQueryEditor/LogsQueryEditor.tsx       |   4 +-
 .../components/LogsQueryEditor/QueryField.tsx |   2 +-
 .../MetricsQueryEditor/AggregationField.tsx   |   4 +-
 .../MetricsQueryEditor/DimensionFields.tsx    |   2 +-
 .../MetricsQueryEditor/LegendFormatField.tsx  |   2 +-
 .../MetricsQueryEditor/MetricNameField.tsx    |   2 +-
 .../MetricNamespaceField.tsx                  |   4 +-
 .../MetricsQueryEditor/MetricsQueryEditor.tsx |   4 +-
 .../MetricsQueryEditor/TimeGrainField.tsx     |   7 +-
 .../MetricsQueryEditor/TopField.tsx           |   2 +-
 .../components/QueryEditor/QueryEditor.tsx    |   8 +-
 .../azuremonitor/components/QueryHeader.tsx   |   2 +-
 .../ResourceField/ResourceField.tsx           |   6 +-
 .../components/ResourcePicker/EntryIcon.tsx   |   2 +-
 .../components/ResourcePicker/NestedEntry.tsx |   4 +-
 .../components/ResourcePicker/NestedRow.tsx   |   4 +-
 .../components/SubscriptionField.tsx          |   4 +-
 .../SQLBuilderEditor/SQLBuilderSelectRow.tsx  |   2 +-
 .../components/SQLBuilderEditor/SQLFilter.tsx |   4 +-
 .../SQLBuilderEditor/SQLGroupBy.tsx           |   4 +-
 .../SQLBuilderEditor/SQLOrderByGroup.tsx      |   2 +-
 .../graphite/components/FunctionEditor.tsx    |   2 +-
 .../parca/QueryEditor/EditorRow.tsx           |   2 +-
 .../parca/QueryEditor/EditorRows.tsx          |   2 +-
 .../phlare/QueryEditor/EditorField.tsx        |   2 +-
 .../phlare/QueryEditor/EditorRow.tsx          |   2 +-
 .../phlare/QueryEditor/EditorRows.tsx         |   2 +-
 .../components/PromExploreExtraField.tsx      | 158 +++++++++---------
 .../testdata/components/ErrorEditor.tsx       |   2 +-
 .../panel/barchart/TickSpacingEditor.tsx      |   2 +-
 .../panel/candlestick/CandlestickPanel.tsx    |   4 +-
 .../plugins/panel/heatmap/HeatmapPanel.tsx    |   4 +-
 .../state-timeline/StateTimelinePanel.tsx     |   4 +-
 .../state-timeline/StateTimelineTooltip.tsx   |   4 +-
 .../status-history/StatusHistoryPanel.tsx     |   4 +-
 .../status-history/StatusHistoryTooltip.tsx   |   4 +-
 .../plugins/AnnotationEditorPlugin.tsx        |   2 +-
 .../timeseries/plugins/AnnotationsPlugin.tsx  |   2 +-
 .../timeseries/plugins/ContextMenuPlugin.tsx  |   8 +-
 .../timeseries/plugins/ExemplarMarker.tsx     |   4 +-
 .../timeseries/plugins/ExemplarsPlugin.tsx    |   4 +-
 .../timeseries/plugins/OutsideRangePlugin.tsx |   2 +-
 .../plugins/ThresholdControlsPlugin.tsx       |   6 +-
 .../plugins/ThresholdDragHandle.tsx           |   4 +-
 .../plugins/annotations/AnnotationEditor.tsx  |   4 +-
 .../plugins/panel/xychart/XYChartPanel.old    |   4 +-
 147 files changed, 361 insertions(+), 446 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index d10ae63961d..7434e2da655 100644
--- a/.betterer.results
+++ b/.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.", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "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"]
     ],
diff --git a/contribute/style-guides/styling.md b/contribute/style-guides/styling.md
index c9d4c193be2..caf1b137f41 100644
--- a/contribute/style-guides/styling.md
+++ b/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);
 
diff --git a/docs/sources/developers/plugins/add-support-for-variables.md b/docs/sources/developers/plugins/add-support-for-variables.md
index c8bc2a85358..c398b284fb4 100644
--- a/docs/sources/developers/plugins/add-support-for-variables.md
+++ b/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 = () => {
diff --git a/docs/sources/developers/plugins/custom-panel-option-editors.md b/docs/sources/developers/plugins/custom-panel-option-editors.md
index d943c6deb70..d0d4ab8e766 100644
--- a/docs/sources/developers/plugins/custom-panel-option-editors.md
+++ b/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) {
diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
index 365133b2584..5f6ae1f3adc 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/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);
diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
index 04bf348225e..9a9fe8ff3ab 100644
--- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/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(
-  ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }) => {
+export const ContextMenu = React.memo(
+  ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }: ContextMenuProps) => {
     const menuRef = useRef<HTMLDivElement>(null);
     const [positionStyles, setPositionStyles] = useState({});
 
diff --git a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
index 4809c7b42c7..a3fa1f9c452 100644
--- a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
+++ b/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 (
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
index 46bad70bd34..a1701236958 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
@@ -30,48 +30,46 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-export const DataLinkEditor: React.FC<DataLinkEditorProps> = React.memo(
-  ({ index, value, onChange, suggestions, isLast }) => {
-    const styles = useStyles2(getStyles);
+export const DataLinkEditor = React.memo(({ index, value, onChange, suggestions, isLast }: DataLinkEditorProps) => {
+  const styles = useStyles2(getStyles);
 
-    const onUrlChange = (url: string, callback?: () => void) => {
-      onChange(index, { ...value, url }, callback);
-    };
-    const onTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      onChange(index, { ...value, title: event.target.value });
-    };
+  const onUrlChange = (url: string, callback?: () => void) => {
+    onChange(index, { ...value, url }, callback);
+  };
+  const onTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(index, { ...value, title: event.target.value });
+  };
 
-    const onOpenInNewTabChanged = () => {
-      onChange(index, { ...value, targetBlank: !value.targetBlank });
-    };
+  const onOpenInNewTabChanged = () => {
+    onChange(index, { ...value, targetBlank: !value.targetBlank });
+  };
 
-    return (
-      <div className={styles.listItem}>
-        <Field label="Title">
-          <Input value={value.title} onChange={onTitleChange} placeholder="Show details" />
-        </Field>
+  return (
+    <div className={styles.listItem}>
+      <Field label="Title">
+        <Input value={value.title} onChange={onTitleChange} placeholder="Show details" />
+      </Field>
 
-        <Field
-          label="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."
-        >
-          <DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />
-        </Field>
+      <Field
+        label="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."
+      >
+        <DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />
+      </Field>
 
-        <Field label="Open in new tab">
-          <Switch value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
-        </Field>
+      <Field label="Open in new tab">
+        <Switch value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
+      </Field>
 
-        {isLast && (
-          <div className={styles.infoText}>
-            With data links you can reference data variables like series name, labels and values. Type CMD+Space,
-            CTRL+Space, or $ to open variable suggestions.
-          </div>
-        )}
-      </div>
-    );
-  }
-);
+      {isLast && (
+        <div className={styles.infoText}>
+          With data links you can reference data variables like series name, labels and values. Type CMD+Space,
+          CTRL+Space, or $ to open variable suggestions.
+        </div>
+      )}
+    </div>
+  );
+});
 
 DataLinkEditor.displayName = 'DataLinkEditor';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
index 6ed1b123202..97b9a6774dc 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/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(
-  ({ value, onChange, suggestions, placeholder = 'http://your-grafana.com/d/000000010/annotations' }) => {
+export const DataLinkInput = memo(
+  ({
+    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);
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
index 841d4c492bd..ecce2409816 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
+++ b/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(
-  ({ activeIndex, activeIndexOffset, label, onClose, onSuggestionSelect, suggestions, activeRef: selectedRef }) => {
+const DataLinkSuggestionsList = React.memo(
+  ({
+    activeIndex,
+    activeIndexOffset,
+    label,
+    onClose,
+    onSuggestionSelect,
+    suggestions,
+    activeRef: selectedRef,
+  }: DataLinkSuggestionsListProps) => {
     const styles = useStyles2(getStyles);
 
     return (
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
index c0db22200d1..6670b573371 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
@@ -18,12 +18,7 @@ interface DataLinksInlineEditorProps {
   data: DataFrame[];
 }
 
-export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
-  links,
-  onChange,
-  getSuggestions,
-  data,
-}) => {
+export const DataLinksInlineEditor = ({ links, onChange, getSuggestions, data }: DataLinksInlineEditorProps) => {
   const theme = useTheme2();
   const [editIndex, setEditIndex] = useState<number | null>(null);
   const [isNew, setIsNew] = useState(false);
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
index 434f5fec3b1..e03e2d9b5d1 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
+++ b/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 = () => {
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
index 3716d3f1db5..77af3d52cc8 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
+++ b/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}>
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 79819918e20..184b523972f 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/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,
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
index 125a9f7e356..33b6cc0b7fd 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
+++ b/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">
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
index 9c29706f0c0..8b06ab0ef70 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
+++ b/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;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.test.tsx
index 374dba3886e..d4b3b0c6226 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.test.tsx
+++ b/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} />;
   };
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
index 65f106b8f98..1f65228d284 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
+++ b/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);
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
index 13c9fea1315..779b2b5e850 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
+++ b/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);
diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
index 6797f0cf3b9..60f0a013a1f 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
+++ b/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 (
diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx
index a7c7b406c08..e6f32fca6e4 100644
--- a/packages/grafana-ui/src/components/Forms/Field.tsx
+++ b/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);
diff --git a/packages/grafana-ui/src/components/Forms/Label.tsx b/packages/grafana-ui/src/components/Forms/Label.tsx
index ca1c6501232..7b842245351 100644
--- a/packages/grafana-ui/src/components/Forms/Label.tsx
+++ b/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) => {
diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx
index 16e97fa613e..70cc785a5da 100644
--- a/packages/grafana-ui/src/components/Forms/Legend.tsx
+++ b/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 (
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx
index 51ac325ab50..f1e9b85e18b 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx
+++ b/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}
diff --git a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx b/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx
index 7bb65f25c96..e672881dcb7 100644
--- a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx
+++ b/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
diff --git a/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx b/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx
index 973d5e059d7..f071abdcea2 100644
--- a/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx
+++ b/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<
-  GraphTooltipContentProps & {
-    // We expect position to figure out correct values when not hovering over a datapoint
-    pos: FlotPosition;
-  }
-> = ({ dimensions, activeDimensions, pos, timeZone }) => {
+type Props = GraphTooltipContentProps & {
+  // We expect position to figure out correct values when not hovering over a datapoint
+  pos: FlotPosition;
+};
+
+export const MultiModeGraphTooltip = ({ dimensions, activeDimensions, pos, timeZone }: Props) => {
   let activeSeriesIndex: number | null = null;
   // when no x-axis provided, skip rendering
   if (activeDimensions.xAxis === null) {
diff --git a/packages/grafana-ui/src/components/Graph/GraphTooltip/SingleModeGraphTooltip.tsx b/packages/grafana-ui/src/components/Graph/GraphTooltip/SingleModeGraphTooltip.tsx
index 6335d6a7d76..3b5ad3b2ade 100644
--- a/packages/grafana-ui/src/components/Graph/GraphTooltip/SingleModeGraphTooltip.tsx
+++ b/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> = ({
-  dimensions,
-  activeDimensions,
-  timeZone,
-}) => {
+export const SingleModeGraphTooltip = ({ dimensions, activeDimensions, timeZone }: GraphTooltipContentProps) => {
   // not hovering over a point, skip rendering
   if (
     activeDimensions.yAxis === null ||
diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
index 845ed27687f..18683c539ec 100644
--- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
+++ b/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} />;
 };
diff --git a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
index 2054dde3b6c..d366016c6e8 100644
--- a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
+++ b/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()}`;
 
diff --git a/packages/grafana-ui/src/components/Menu/SubMenu.tsx b/packages/grafana-ui/src/components/Menu/SubMenu.tsx
index 56c8e3b3ad1..470baddcc56 100644
--- a/packages/grafana-ui/src/components/Menu/SubMenu.tsx
+++ b/packages/grafana-ui/src/components/Menu/SubMenu.tsx
@@ -28,8 +28,8 @@ export interface SubMenuProps {
 }
 
 /** @internal */
-export const SubMenu: React.FC<SubMenuProps> = React.memo(
-  ({ items, isOpen, openedWithArrow, setOpenedWithArrow, close, customStyle }) => {
+export const SubMenu = React.memo(
+  ({ items, isOpen, openedWithArrow, setOpenedWithArrow, close, customStyle }: SubMenuProps) => {
     const styles = useStyles2(getStyles);
     const localRef = useRef<HTMLDivElement>(null);
     const [handleKeys] = useMenuFocus({
diff --git a/packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx b/packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx
index d18e460b6e8..d6881ff6ada 100644
--- a/packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx
+++ b/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) {
diff --git a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx
index 610e0382fc8..e597c17ca3e 100644
--- a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx
+++ b/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) {
diff --git a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx
index 6913310a7df..7992353cf66 100644
--- a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx
+++ b/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
diff --git a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
index 1a7a3fc3dc7..5e1d8bf215e 100644
--- a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
+++ b/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}
diff --git a/packages/grafana-ui/src/components/Select/DropdownIndicator.tsx b/packages/grafana-ui/src/components/Select/DropdownIndicator.tsx
index 60122f7bd8e..e54058ff53f 100644
--- a/packages/grafana-ui/src/components/Select/DropdownIndicator.tsx
+++ b/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} />;
diff --git a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
index edbf2e865f2..b8796f94c4f 100644
--- a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
+++ b/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 (
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
index 1ee9c925fc8..df9f04bb4f6 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
+++ b/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();
diff --git a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx
index 5e498152762..da976de76b8 100644
--- a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx
+++ b/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(
-  ({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }) => {
+export const PlotLegend = React.memo(
+  ({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }: PlotLegendProps) => {
     const theme = useTheme2();
     const legendItems = config
       .getSeries()
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx
index d8f0d11313e..0f8a1a1d893 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx
+++ b/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;
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index dac9f0f775d..f41b5072090 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/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);
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
index 681adb8c223..4a729bace9c 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
+++ b/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(() => {
diff --git a/packages/grafana-ui/src/options/builder/hideSeries.tsx b/packages/grafana-ui/src/options/builder/hideSeries.tsx
index 5add4daad95..b0a52168fab 100644
--- a/packages/grafana-ui/src/options/builder/hideSeries.tsx
+++ b/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 { value, onChange } = props;
-
+const SeriesConfigEditor = ({ value, onChange }: FieldConfigEditorProps<HideSeriesConfig, {}>) => {
   const onChangeToggle = useCallback(
     (prop: keyof HideSeriesConfig) => {
       onChange({ ...value, [prop]: !value[prop] });
diff --git a/packages/grafana-ui/src/options/builder/stacking.tsx b/packages/grafana-ui/src/options/builder/stacking.tsx
index cbe21614474..f5f606867ef 100644
--- a/packages/grafana-ui/src/options/builder/stacking.tsx
+++ b/packages/grafana-ui/src/options/builder/stacking.tsx
@@ -18,12 +18,7 @@ import {
   Tooltip,
 } from '../..';
 
-export const StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, any>> = ({
-  value,
-  context,
-  onChange,
-  item,
-}) => {
+export const StackingEditor = ({ value, context, onChange, item }: FieldOverrideEditorProps<StackingConfig, any>) => {
   return (
     <HorizontalGroup>
       <RadioButtonGroup
diff --git a/packages/grafana-ui/src/themes/ThemeContext.test.tsx b/packages/grafana-ui/src/themes/ThemeContext.test.tsx
index e07dc43d40f..7e5c464a08f 100644
--- a/packages/grafana-ui/src/themes/ThemeContext.test.tsx
+++ b/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`
diff --git a/packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx b/packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx
index e6896beeccd..50bba40f52f 100644
--- a/packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx
+++ b/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 (
diff --git a/public/app/core/components/OptionsUI/fieldColor.tsx b/public/app/core/components/OptionsUI/fieldColor.tsx
index f6e8cad6b5d..72855b33699 100644
--- a/public/app/core/components/OptionsUI/fieldColor.tsx
+++ b/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>> = ({
-  value,
-  onChange,
-  item,
-  id,
-}) => {
+type Props = FieldConfigEditorProps<FieldColor | undefined, FieldColorConfigSettings>;
+
+export const FieldColorEditor = ({ value, onChange, item, id }: Props) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
 
diff --git a/public/app/core/components/OptionsUI/links.tsx b/public/app/core/components/OptionsUI/links.tsx
index d03b13c89e3..fe5baf07a0b 100644
--- a/public/app/core/components/OptionsUI/links.tsx
+++ b/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>> = ({
-  value,
-  onChange,
-  context,
-}) => {
+type Props = FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>;
+
+export const DataLinksValueEditor = ({ value, onChange, context }: Props) => {
   return (
     <DataLinksInlineEditor
       links={value}
diff --git a/public/app/core/components/OptionsUI/number.tsx b/public/app/core/components/OptionsUI/number.tsx
index a741ae6f4db..7f5e6366dc5 100644
--- a/public/app/core/components/OptionsUI/number.tsx
+++ b/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>> = ({
-  value,
-  onChange,
-  item,
-}) => {
+type Props = FieldConfigEditorProps<number, NumberFieldConfigSettings>;
+
+export const NumberValueEditor = ({ value, onChange, item }: Props) => {
   const { settings } = item;
 
   const onValueChange = useCallback(
diff --git a/public/app/core/components/OptionsUI/slider.tsx b/public/app/core/components/OptionsUI/slider.tsx
index a668a66868e..1ccd2470f81 100644
--- a/public/app/core/components/OptionsUI/slider.tsx
+++ b/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>> = ({
-  value,
-  onChange,
-  item,
-}) => {
+type Props = FieldConfigEditorProps<number, SliderFieldConfigSettings>;
+
+export const SliderValueEditor = ({ value, onChange, item }: Props) => {
   // Input reference
   const inputRef = useRef<HTMLSpanElement>(null);
 
diff --git a/public/app/core/components/OptionsUI/stats.tsx b/public/app/core/components/OptionsUI/stats.tsx
index a4249a536ca..d428b08813b 100644
--- a/public/app/core/components/OptionsUI/stats.tsx
+++ b/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}
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
index 11d7dcf5b14..97dea280be0 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
@@ -13,13 +13,7 @@ export interface QueryOperationActionProps {
   active?: boolean;
 }
 
-export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({
-  icon,
-  active,
-  disabled,
-  title,
-  onClick,
-}) => {
+export const QueryOperationAction = ({ icon, active, disabled, title, onClick }: QueryOperationActionProps) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
index f62e343d613..98d031cc0e6 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
+++ b/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,
diff --git a/public/app/features/commandPalette/KBarResults.tsx b/public/app/features/commandPalette/KBarResults.tsx
index 9222315f335..7dc0fa1409a 100644
--- a/public/app/features/commandPalette/KBarResults.tsx
+++ b/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);
 
diff --git a/public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx b/public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
index 4ad2aa06d66..ae9a97f85ad 100644
--- a/public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
+++ b/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}>
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index 6ec2c6552c9..742f2a78504 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/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 && (
diff --git a/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx b/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx
index cad3e398968..24ad47e2a7f 100644
--- a/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx
+++ b/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}>
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
index 046395e134b..b8a2c8374a2 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
+++ b/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) => {
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
index 515c146a36c..d89a161b8ea 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
+++ b/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) => {
diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index c1338905603..ad666b77d01 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/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);
 
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
index 8fd3f84066b..6adf94c384d 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
+++ b/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);
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index ac0bb0579fe..5c2eb9e7189 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/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);
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
index 1bb4654cae2..12d51e7dd44 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
+++ b/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 }> = ({
-  dashboard,
-  onSaveSuccess,
-  variant,
-  size,
-}) => {
+type Props = SaveDashboardButtonProps & { variant?: ButtonVariant };
+
+export const SaveDashboardAsButton = ({ dashboard, onSaveSuccess, variant, size }: Props) => {
   return (
     <ModalsController>
       {({ showModal, hideModal }) => {
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
index fa2dc316607..f8a7fff8496 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
+++ b/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(() => {
diff --git a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
index e7b63939af9..42f0dc9bdd0 100644
--- a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
@@ -14,12 +14,7 @@ interface UnsavedChangesModalProps {
   onSaveSuccess?: () => void;
 }
 
-export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
-  dashboard,
-  onSaveSuccess,
-  onDiscard,
-  onDismiss,
-}) => {
+export const UnsavedChangesModal = ({ dashboard, onSaveSuccess, onDiscard, onDismiss }: UnsavedChangesModalProps) => {
   return (
     <Modal
       isOpen={true}
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
index b55b1657c12..fd51748935d 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/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> = ({
-  dashboard,
-  isNew,
-  onSubmit,
-  onCancel,
-  onSuccess,
-}) => {
+export const SaveDashboardAsForm = ({ dashboard, isNew, onSubmit, onCancel, onSuccess }: SaveDashboardAsFormProps) => {
   const defaultValues: SaveDashboardAsFormDTO = {
     title: isNew ? dashboard.title : `${dashboard.title} Copy`,
     $folder: {
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index 782a1dafa49..d62bee8c9a2 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/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;
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
index de85c07b995..964fc3869df 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
+++ b/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 (
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx
index c9849c755d5..69c17692445 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx
+++ b/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) => {
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx b/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
index ee8dfc9535e..c25c78c7361 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
+++ b/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 ? (
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
index c59207bf466..55c9105925c 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
+++ b/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);
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
index fb6abe3df59..b12014aa448 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
+++ b/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 = {
diff --git a/public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx b/public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx
index 0420131e03a..b33c9fa5a16 100644
--- a/public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx
+++ b/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);
 
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
index 427786af2ad..e39fc70ac7a 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
+++ b/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}>
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
index db85c1bf1fe..1690197d87d 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
+++ b/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);
 
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
index 0c4eb53eb0b..46d458d1d25 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
+++ b/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 (
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
index 5e030a7e018..06b8208a2cd 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
+++ b/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 };
diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
index 24bf571ba9a..66bcaceece6 100644
--- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
+++ b/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';
diff --git a/public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx b/public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
index e3921fddb70..fd7c2e79b25 100644
--- a/public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
+++ b/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[] }> = ({
-  libraryPanel,
-  onClick,
-  onDelete,
-  showSecondaryActions,
-}) => {
+type Props = LibraryPanelCardProps & { children?: JSX.Element | JSX.Element[] };
+
+export const LibraryPanelCard = ({ libraryPanel, onClick, onDelete, showSecondaryActions }: Props) => {
   const [showDeletionModal, setShowDeletionModal] = useState(false);
 
   const onDeletePanel = () => {
diff --git a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
index 56cde2c3787..25877436cb0 100644
--- a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
+++ b/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,
diff --git a/public/app/features/plugins/sql/components/DatasetSelector.tsx b/public/app/features/plugins/sql/components/DatasetSelector.tsx
index 031cee09594..ac968f04f9a 100644
--- a/public/app/features/plugins/sql/components/DatasetSelector.tsx
+++ b/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> = ({
-  db,
-  value,
-  onChange,
-  disabled,
-  className,
-  applyDefault,
-}) => {
+export const DatasetSelector = ({ db, value, onChange, disabled, className, applyDefault }: DatasetSelectorProps) => {
   const state = useAsync(async () => {
     const datasets = await db.datasets();
     return datasets.map(toOption);
diff --git a/public/app/features/plugins/sql/components/TableSelector.tsx b/public/app/features/plugins/sql/components/TableSelector.tsx
index e2a32dee385..6d72a272ebd 100644
--- a/public/app/features/plugins/sql/components/TableSelector.tsx
+++ b/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 [];
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx b/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
index 2329e64b60e..9f6bbd222d4 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
+++ b/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> = ({
-  query,
-  db,
-  queryRowFilter,
-  onChange,
-  onValidate,
-  range,
-}) => {
+export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => {
   const state = useAsync(async () => {
     const fields = await db.fields(query);
     return fields;
diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
index 53f434ff5a1..930051da867 100644
--- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
+++ b/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>> = (
-  props
-) => {
+export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterByValueTransformerOptions>) => {
   const { input, options, onChange } = props;
   const styles = getEditorStyles();
   const fieldsInfo = useFieldsInfo(input);
diff --git a/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx
index ea764d8dc3e..f4458df5baa 100644
--- a/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx
+++ b/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;
 };
 
diff --git a/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx b/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
index 7b4ccaf0eaa..d8bcb826c71 100644
--- a/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
+++ b/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);
diff --git a/public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx b/public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx
index 4fbabc0c383..477d932a62f 100644
--- a/public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx
+++ b/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>> = ({
-  value,
-  onChange,
-  item,
-}) => {
+export const AxisEditor = ({ value, onChange, item }: StandardEditorProps<HeatmapCalculationBucketConfig>) => {
   return (
     <HorizontalGroup>
       <RadioButtonGroup
diff --git a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx b/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
index 69481166ea6..8d96905ab8b 100644
--- a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
+++ b/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(
diff --git a/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx b/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
index 0c6de4a50b0..9665794ed3e 100644
--- a/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
+++ b/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(
diff --git a/public/app/features/transformers/editors/HistogramTransformerEditor.tsx b/public/app/features/transformers/editors/HistogramTransformerEditor.tsx
index bac37e68d45..8c777e871c7 100644
--- a/public/app/features/transformers/editors/HistogramTransformerEditor.tsx
+++ b/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(
diff --git a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
index 7a131b5dfcb..f8b1b4814e0 100644
--- a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
+++ b/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(() => {
diff --git a/public/app/features/transformers/editors/LimitTransformerEditor.tsx b/public/app/features/transformers/editors/LimitTransformerEditor.tsx
index 3cd80da1e14..2d1733ae561 100644
--- a/public/app/features/transformers/editors/LimitTransformerEditor.tsx
+++ b/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>> = ({
-  options,
-  onChange,
-}) => {
+export const LimitTransformerEditor = ({ options, onChange }: TransformerUIProps<LimitTransformerOptions>) => {
   const onSetLimit = useCallback(
     (value: FormEvent<HTMLInputElement>) => {
       onChange({
diff --git a/public/app/features/transformers/editors/MergeTransformerEditor.tsx b/public/app/features/transformers/editors/MergeTransformerEditor.tsx
index f735eff9cda..8a1868806cf 100644
--- a/public/app/features/transformers/editors/MergeTransformerEditor.tsx
+++ b/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>> = ({
-  input,
-  options,
-  onChange,
-}) => {
+export const MergeTransformerEditor = ({ input, options, onChange }: TransformerUIProps<MergeTransformerOptions>) => {
   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>;
diff --git a/public/app/features/transformers/editors/ReduceTransformerEditor.tsx b/public/app/features/transformers/editors/ReduceTransformerEditor.tsx
index b6d6bf9e976..74255a66b4b 100644
--- a/public/app/features/transformers/editors/ReduceTransformerEditor.tsx
+++ b/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>> = ({
-  options,
-  onChange,
-}) => {
+export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProps<ReduceTransformerOptions>) => {
   const modes: Array<SelectableValue<ReduceTransformerMode>> = [
     {
       label: 'Series to rows',
diff --git a/public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx b/public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx
index 01673a5bcda..c27e2c3da5f 100644
--- a/public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx
+++ b/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;
 };
 
diff --git a/public/app/features/transformers/editors/SortByTransformerEditor.tsx b/public/app/features/transformers/editors/SortByTransformerEditor.tsx
index 054d5f43bdd..008cd5262a6 100644
--- a/public/app/features/transformers/editors/SortByTransformerEditor.tsx
+++ b/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>> = ({
-  input,
-  options,
-  onChange,
-}) => {
+export const SortByTransformerEditor = ({ input, options, onChange }: TransformerUIProps<SortByTransformerOptions>) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
 
   // Only supports single sort for now
diff --git a/public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx b/public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx
index 723893e81a1..6fd03d726c0 100644
--- a/public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx
+++ b/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,
diff --git a/public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx b/public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx
index fcc9af08c37..e19a91fa3e7 100644
--- a/public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx
+++ b/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>> = ({
-  input,
-  options,
-  onChange,
-}) => {
+export const FieldLookupTransformerEditor = ({ input, options, onChange }: TransformerUIProps<FieldLookupOptions>) => {
   const onPickLookupField = useCallback(
     (value: string | undefined) => {
       onChange({
diff --git a/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx b/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
index 7c29bb96faf..57e6e28f067 100644
--- a/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
+++ b/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) {
diff --git a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx b/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx
index 49fcfa9b33f..488f1cf1211 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx
+++ b/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
diff --git a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/QueryField.tsx b/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/QueryField.tsx
index 4a88a301c7d..1d168835838 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/QueryField.tsx
+++ b/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({
diff --git a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/FormatAsField.tsx b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/FormatAsField.tsx
index f3c3c78e518..6796da57671 100644
--- a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/FormatAsField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/FormatAsField.tsx
@@ -14,7 +14,7 @@ const FORMAT_OPTIONS: Array<SelectableValue<ResultFormat>> = [
   { label: 'Table', value: ResultFormat.Table },
 ];
 
-const FormatAsField: React.FC<AzureQueryEditorFieldProps> = ({ query, variableOptionGroup, onQueryChange }) => {
+const FormatAsField = ({ query, variableOptionGroup, onQueryChange }: AzureQueryEditorFieldProps) => {
   const options = useMemo(() => [...FORMAT_OPTIONS, variableOptionGroup], [variableOptionGroup]);
 
   const handleChange = useCallback(
diff --git a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/LogsQueryEditor.tsx b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/LogsQueryEditor.tsx
index da37a122949..4152dd37968 100644
--- a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/LogsQueryEditor.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/LogsQueryEditor.tsx
@@ -24,7 +24,7 @@ interface LogsQueryEditorProps {
   hideFormatAs?: boolean;
 }
 
-const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
+const LogsQueryEditor = ({
   query,
   datasource,
   subscriptionId,
@@ -32,7 +32,7 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
   onChange,
   setError,
   hideFormatAs,
-}) => {
+}: LogsQueryEditorProps) => {
   const migrationError = useMigrations(datasource, query, onChange);
   const disableRow = (row: ResourceRow, selectedRows: ResourceRowGroup) => {
     if (selectedRows.length === 0) {
diff --git a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/QueryField.tsx b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/QueryField.tsx
index c0ba93b623d..148ff64815b 100644
--- a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/QueryField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/QueryField.tsx
@@ -22,7 +22,7 @@ interface MonacoLanguages {
   };
 }
 
-const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, datasource, onQueryChange }) => {
+const QueryField = ({ query, datasource, onQueryChange }: AzureQueryEditorFieldProps) => {
   const monacoPromiseRef = useRef<Deferred<MonacoPromise>>();
   function getPromise() {
     if (!monacoPromiseRef.current) {
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/AggregationField.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/AggregationField.tsx
index 1407bdd60f2..71981074a58 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/AggregationField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/AggregationField.tsx
@@ -14,13 +14,13 @@ interface AggregationFieldProps extends AzureQueryEditorFieldProps {
   isLoading: boolean;
 }
 
-const AggregationField: React.FC<AggregationFieldProps> = ({
+const AggregationField = ({
   query,
   variableOptionGroup,
   onQueryChange,
   aggregationOptions,
   isLoading,
-}) => {
+}: AggregationFieldProps) => {
   const handleChange = useCallback(
     (change: SelectableValue<string>) => {
       if (!change.value) {
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx
index 33765f4173a..b0342efe96a 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.tsx
@@ -60,7 +60,7 @@ const useDimensionLabels = (data: PanelData | undefined, query: AzureMonitorQuer
   return dimensionLabels;
 };
 
-const DimensionFields: React.FC<DimensionFieldsProps> = ({ data, query, dimensionOptions, onQueryChange }) => {
+const DimensionFields = ({ data, query, dimensionOptions, onQueryChange }: DimensionFieldsProps) => {
   const dimensionFilters = useMemo(
     () => query.azureMonitor?.dimensionFilters ?? [],
     [query.azureMonitor?.dimensionFilters]
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/LegendFormatField.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/LegendFormatField.tsx
index 31ddc067e9b..1dbbb9b8c8a 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/LegendFormatField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/LegendFormatField.tsx
@@ -7,7 +7,7 @@ import { Field } from '../Field';
 
 import { setLegendAlias } from './setQueryValue';
 
-const LegendFormatField: React.FC<AzureQueryEditorFieldProps> = ({ onQueryChange, query }) => {
+const LegendFormatField = ({ onQueryChange, query }: AzureQueryEditorFieldProps) => {
   const [value, setValue] = useState<string>(query.azureMonitor?.alias ?? '');
 
   // As calling onQueryChange initiates a the datasource refresh, we only want to call it once
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNameField.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNameField.tsx
index 4f73c551690..a3f19d87bb0 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNameField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNameField.tsx
@@ -14,7 +14,7 @@ interface MetricNameProps extends AzureQueryEditorFieldProps {
   metricNames: AzureMonitorOption[];
 }
 
-const MetricNameField: React.FC<MetricNameProps> = ({ metricNames, query, variableOptionGroup, onQueryChange }) => {
+const MetricNameField = ({ metricNames, query, variableOptionGroup, onQueryChange }: MetricNameProps) => {
   const handleChange = useCallback(
     (change: SelectableValue<string>) => {
       if (!change.value) {
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNamespaceField.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNamespaceField.tsx
index 4f53d8a4c8e..c82bdfda94c 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNamespaceField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricNamespaceField.tsx
@@ -13,12 +13,12 @@ interface MetricNamespaceFieldProps extends AzureQueryEditorFieldProps {
   metricNamespaces: AzureMonitorOption[];
 }
 
-const MetricNamespaceField: React.FC<MetricNamespaceFieldProps> = ({
+const MetricNamespaceField = ({
   metricNamespaces,
   query,
   variableOptionGroup,
   onQueryChange,
-}) => {
+}: MetricNamespaceFieldProps) => {
   const handleChange = useCallback(
     (change: SelectableValue<string>) => {
       if (!change.value) {
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.tsx
index b8e71f3010f..e86238655cb 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -29,14 +29,14 @@ interface MetricsQueryEditorProps {
   setError: (source: string, error: AzureMonitorErrorish | undefined) => void;
 }
 
-const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
+const MetricsQueryEditor = ({
   data,
   query,
   datasource,
   variableOptionGroup,
   onChange,
   setError,
-}) => {
+}: MetricsQueryEditorProps) => {
   const metricsMetadata = useMetricMetadata(query, datasource, onChange);
   const metricNamespaces = useMetricNamespaces(query, datasource, onChange, setError);
   const metricNames = useMetricNames(query, datasource, onChange, setError);
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TimeGrainField.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TimeGrainField.tsx
index d39de88c99c..5e7cd0c8072 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TimeGrainField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TimeGrainField.tsx
@@ -14,12 +14,7 @@ interface TimeGrainFieldProps extends AzureQueryEditorFieldProps {
   timeGrainOptions: AzureMonitorOption[];
 }
 
-const TimeGrainField: React.FC<TimeGrainFieldProps> = ({
-  query,
-  timeGrainOptions,
-  variableOptionGroup,
-  onQueryChange,
-}) => {
+const TimeGrainField = ({ query, timeGrainOptions, variableOptionGroup, onQueryChange }: TimeGrainFieldProps) => {
   const handleChange = useCallback(
     (change: SelectableValue<string>) => {
       if (!change.value) {
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TopField.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TopField.tsx
index b13a41f2517..e3f0254635b 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TopField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/TopField.tsx
@@ -7,7 +7,7 @@ import { Field } from '../Field';
 
 import { setTop } from './setQueryValue';
 
-const TopField: React.FC<AzureQueryEditorFieldProps> = ({ onQueryChange, query }) => {
+const TopField = ({ onQueryChange, query }: AzureQueryEditorFieldProps) => {
   const [value, setValue] = useState<string>(query.azureMonitor?.top ?? '');
 
   // As calling onQueryChange initiates a the datasource refresh, we only want to call it once
diff --git a/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.tsx b/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.tsx
index d7407e6335e..f9e75280f71 100644
--- a/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.tsx
@@ -27,13 +27,13 @@ export type AzureMonitorQueryEditorProps = QueryEditorProps<
   AzureDataSourceJsonData
 >;
 
-const QueryEditor: React.FC<AzureMonitorQueryEditorProps> = ({
+const QueryEditor = ({
   query: baseQuery,
   datasource,
   onChange,
   onRunQuery: baseOnRunQuery,
   data,
-}) => {
+}: AzureMonitorQueryEditorProps) => {
   const [errorMessage, setError] = useLastError();
   const onRunQuery = useMemo(() => debounce(baseOnRunQuery, 500), [baseOnRunQuery]);
 
@@ -85,7 +85,7 @@ interface EditorForQueryTypeProps extends Omit<AzureMonitorQueryEditorProps, 'on
   setError: (source: string, error: AzureMonitorErrorish | undefined) => void;
 }
 
-const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
+const EditorForQueryType = ({
   data,
   subscriptionId,
   query,
@@ -93,7 +93,7 @@ const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
   variableOptionGroup,
   onChange,
   setError,
-}) => {
+}: EditorForQueryTypeProps) => {
   switch (query.queryType) {
     case AzureQueryType.AzureMonitor:
       return (
diff --git a/public/app/plugins/datasource/azuremonitor/components/QueryHeader.tsx b/public/app/plugins/datasource/azuremonitor/components/QueryHeader.tsx
index 6eabde1de97..77d5b5490ab 100644
--- a/public/app/plugins/datasource/azuremonitor/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/QueryHeader.tsx
@@ -11,7 +11,7 @@ interface QueryTypeFieldProps {
   onQueryChange: (newQuery: AzureMonitorQuery) => void;
 }
 
-export const QueryHeader: React.FC<QueryTypeFieldProps> = ({ query, onQueryChange }) => {
+export const QueryHeader = ({ query, onQueryChange }: QueryTypeFieldProps) => {
   const queryTypes: Array<{ value: AzureQueryType; label: string }> = [
     { value: AzureQueryType.AzureMonitor, label: 'Metrics' },
     { value: AzureQueryType.LogAnalytics, label: 'Logs' },
diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourceField/ResourceField.tsx b/public/app/plugins/datasource/azuremonitor/components/ResourceField/ResourceField.tsx
index 9ef86ef395f..7c23c2f15b0 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourceField/ResourceField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourceField/ResourceField.tsx
@@ -24,7 +24,9 @@ interface ResourceFieldProps<T> extends AzureQueryEditorFieldProps {
   selectionNotice?: (selectedRows: ResourceRowGroup) => string;
 }
 
-const ResourceField: React.FC<ResourceFieldProps<string | AzureMonitorResource>> = ({
+type Props = ResourceFieldProps<string | AzureMonitorResource>;
+
+const ResourceField = ({
   query,
   datasource,
   onQueryChange,
@@ -36,7 +38,7 @@ const ResourceField: React.FC<ResourceFieldProps<string | AzureMonitorResource>>
   disableRow,
   renderAdvanced,
   selectionNotice,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
   const [pickerIsOpen, setPickerIsOpen] = useState(false);
 
diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/EntryIcon.tsx b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/EntryIcon.tsx
index b37b3583c25..aebf861dfe0 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/EntryIcon.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/EntryIcon.tsx
@@ -9,7 +9,7 @@ interface EntryIconProps {
   isOpen: boolean;
 }
 
-export const EntryIcon: React.FC<EntryIconProps> = ({ isOpen, entry: { type } }) => {
+export const EntryIcon = ({ isOpen, entry: { type } }: EntryIconProps) => {
   switch (type) {
     case ResourceRowType.Subscription:
       return <Icon name="layer-group" />;
diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedEntry.tsx b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedEntry.tsx
index 150bad28665..6d843e2f18b 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedEntry.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedEntry.tsx
@@ -21,7 +21,7 @@ interface NestedEntryProps {
   onSelectedChange: (row: ResourceRow, selected: boolean) => void;
 }
 
-export const NestedEntry: React.FC<NestedEntryProps> = ({
+export const NestedEntry = ({
   entry,
   isSelected,
   isDisabled,
@@ -31,7 +31,7 @@ export const NestedEntry: React.FC<NestedEntryProps> = ({
   scrollIntoView,
   onToggleCollapse,
   onSelectedChange,
-}) => {
+}: NestedEntryProps) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
   const hasChildren = !!entry.children;
diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedRow.tsx b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedRow.tsx
index 160d77d300e..e845b59606d 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedRow.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/NestedRow.tsx
@@ -19,7 +19,7 @@ interface NestedRowProps {
   scrollIntoView?: boolean;
 }
 
-const NestedRow: React.FC<NestedRowProps> = ({
+const NestedRow = ({
   row,
   selectedRows,
   level,
@@ -28,7 +28,7 @@ const NestedRow: React.FC<NestedRowProps> = ({
   selectableEntryTypes,
   scrollIntoView,
   disableRow,
-}) => {
+}: NestedRowProps) => {
   const styles = useStyles2(getStyles);
   const [rowStatus, setRowStatus] = useState<'open' | 'closed' | 'loading'>('closed');
 
diff --git a/public/app/plugins/datasource/azuremonitor/components/SubscriptionField.tsx b/public/app/plugins/datasource/azuremonitor/components/SubscriptionField.tsx
index 72e4843d35a..396bed8b410 100644
--- a/public/app/plugins/datasource/azuremonitor/components/SubscriptionField.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/SubscriptionField.tsx
@@ -15,13 +15,13 @@ interface SubscriptionFieldProps extends AzureQueryEditorFieldProps {
   multiSelect?: boolean;
 }
 
-const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
+const SubscriptionField = ({
   query,
   subscriptions,
   variableOptionGroup,
   onQueryChange,
   multiSelect = false,
-}) => {
+}: SubscriptionFieldProps) => {
   const handleChange = useCallback(
     (change: SelectableValue<string>) => {
       if (!change.value) {
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
index 82a4dd1fbee..7c090dac070 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
@@ -32,7 +32,7 @@ interface SQLBuilderSelectRowProps {
 
 const AGGREGATIONS = STATISTICS.map(toOption);
 
-const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, query, onQueryChange }) => {
+const SQLBuilderSelectRow = ({ datasource, query, onQueryChange }: SQLBuilderSelectRowProps) => {
   const sql = query.sql ?? {};
 
   const aggregation = sql.select?.name;
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
index 20446ce7707..473026a8778 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
@@ -31,7 +31,7 @@ interface SQLFilterProps {
 
 const OPERATORS = COMPARISON_OPERATORS.map(toOption);
 
-const SQLFilter: React.FC<SQLFilterProps> = ({ query, onQueryChange, datasource }) => {
+const SQLFilter = ({ query, onQueryChange, datasource }: SQLFilterProps) => {
   const filtersFromQuery = useMemo(() => getFlattenedFilters(query.sql ?? {}), [query.sql]);
   const [filters, setFilters] = useState<QueryEditorOperatorExpression[]>(filtersFromQuery);
 
@@ -95,7 +95,7 @@ interface FilterItemProps {
   onDelete: () => void;
 }
 
-const FilterItem: React.FC<FilterItemProps> = (props) => {
+const FilterItem = (props: FilterItemProps) => {
   const { datasource, query, filter, onChange, onDelete } = props;
   const sql = query.sql ?? {};
 
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
index 1fdda2a5ff4..760d0410303 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
@@ -23,7 +23,7 @@ interface SQLGroupByProps {
   onQueryChange: (query: CloudWatchMetricsQuery) => void;
 }
 
-const SQLGroupBy: React.FC<SQLGroupByProps> = ({ query, datasource, onQueryChange }) => {
+const SQLGroupBy = ({ query, datasource, onQueryChange }: SQLGroupByProps) => {
   const sql = query.sql ?? {};
   const groupBysFromQuery = useMemo(() => getFlattenedGroupBys(query.sql ?? {}), [query.sql]);
   const [items, setItems] = useState<QueryEditorGroupByExpression[]>(groupBysFromQuery);
@@ -87,7 +87,7 @@ interface GroupByItemProps {
   onDelete: () => void;
 }
 
-const GroupByItem: React.FC<GroupByItemProps> = (props) => {
+const GroupByItem = (props: GroupByItemProps) => {
   const { options, item, onChange, onDelete } = props;
   const fieldName = item.property?.name;
 
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
index ba2beb654c6..711d375fe61 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
@@ -22,7 +22,7 @@ const orderByDirections: Array<SelectableValue<string>> = [
   { label: DESC, value: DESC },
 ];
 
-const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryChange, datasource }) => {
+const SQLOrderByGroup = ({ query, onQueryChange, datasource }: SQLBuilderSelectRowProps) => {
   const sql = query.sql ?? {};
   const orderBy = sql.orderBy?.name;
   const orderByDirection = sql.orderByDirection;
diff --git a/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx b/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx
index 1666614d0b7..8971466e219 100644
--- a/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/FunctionEditor.tsx
@@ -26,7 +26,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-const FunctionEditor: React.FC<FunctionEditorProps> = ({ onMoveLeft, onMoveRight, func, ...props }) => {
+const FunctionEditor = ({ onMoveLeft, onMoveRight, func, ...props }: FunctionEditorProps) => {
   const styles = useStyles2(getStyles);
 
   const renderContent = ({ updatePopperPosition }: any) => (
diff --git a/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx b/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx
index 5886945fc3f..9a5730602e0 100644
--- a/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx
+++ b/public/app/plugins/datasource/parca/QueryEditor/EditorRow.tsx
@@ -11,7 +11,7 @@ interface EditorRowProps {
   stackProps?: Partial<React.ComponentProps<typeof Stack>>;
 }
 
-export const EditorRow: React.FC<EditorRowProps> = ({ children, stackProps }) => {
+export const EditorRow = ({ children, stackProps }: EditorRowProps) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/plugins/datasource/parca/QueryEditor/EditorRows.tsx b/public/app/plugins/datasource/parca/QueryEditor/EditorRows.tsx
index 278a566702f..ce7e38c112a 100644
--- a/public/app/plugins/datasource/parca/QueryEditor/EditorRows.tsx
+++ b/public/app/plugins/datasource/parca/QueryEditor/EditorRows.tsx
@@ -6,7 +6,7 @@ interface EditorRowsProps {
   children: React.ReactNode;
 }
 
-export const EditorRows: React.FC<EditorRowsProps> = ({ children }) => {
+export const EditorRows = ({ children }: EditorRowsProps) => {
   return (
     <Stack gap={0.5} direction="column">
       {children}
diff --git a/public/app/plugins/datasource/phlare/QueryEditor/EditorField.tsx b/public/app/plugins/datasource/phlare/QueryEditor/EditorField.tsx
index a6ef8806385..330c5f84b07 100644
--- a/public/app/plugins/datasource/phlare/QueryEditor/EditorField.tsx
+++ b/public/app/plugins/datasource/phlare/QueryEditor/EditorField.tsx
@@ -12,7 +12,7 @@ interface EditorFieldProps extends ComponentProps<typeof Field> {
   tooltip?: PopoverContent;
 }
 
-export const EditorField: React.FC<EditorFieldProps> = (props) => {
+export const EditorField = (props: EditorFieldProps) => {
   const { label, optional, tooltip, children, width, ...fieldProps } = props;
 
   const theme = useTheme2();
diff --git a/public/app/plugins/datasource/phlare/QueryEditor/EditorRow.tsx b/public/app/plugins/datasource/phlare/QueryEditor/EditorRow.tsx
index 5886945fc3f..9a5730602e0 100644
--- a/public/app/plugins/datasource/phlare/QueryEditor/EditorRow.tsx
+++ b/public/app/plugins/datasource/phlare/QueryEditor/EditorRow.tsx
@@ -11,7 +11,7 @@ interface EditorRowProps {
   stackProps?: Partial<React.ComponentProps<typeof Stack>>;
 }
 
-export const EditorRow: React.FC<EditorRowProps> = ({ children, stackProps }) => {
+export const EditorRow = ({ children, stackProps }: EditorRowProps) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/plugins/datasource/phlare/QueryEditor/EditorRows.tsx b/public/app/plugins/datasource/phlare/QueryEditor/EditorRows.tsx
index 278a566702f..ce7e38c112a 100644
--- a/public/app/plugins/datasource/phlare/QueryEditor/EditorRows.tsx
+++ b/public/app/plugins/datasource/phlare/QueryEditor/EditorRows.tsx
@@ -6,7 +6,7 @@ interface EditorRowsProps {
   children: React.ReactNode;
 }
 
-export const EditorRows: React.FC<EditorRowsProps> = ({ children }) => {
+export const EditorRows = ({ children }: EditorRowsProps) => {
   return (
     <Stack gap={0.5} direction="column">
       {children}
diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
index 3e6f2c17677..f4bc23d0e4d 100644
--- a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
@@ -17,93 +17,91 @@ export interface PromExploreExtraFieldProps {
   datasource: PrometheusDatasource;
 }
 
-export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
-  ({ query, datasource, onChange, onRunQuery }) => {
-    const rangeOptions = getQueryTypeOptions(true);
-    const prevQuery = usePrevious(query);
-
-    const onExemplarChange = useCallback(
-      (exemplar: boolean) => {
-        if (!isEqual(query, prevQuery) || exemplar !== query.exemplar) {
-          onChange({ ...query, exemplar });
-        }
-      },
-      [prevQuery, query, onChange]
-    );
-
-    function onChangeQueryStep(interval: string) {
-      onChange({ ...query, interval });
-    }
-
-    function onStepChange(e: React.SyntheticEvent<HTMLInputElement>) {
-      if (e.currentTarget.value !== query.interval) {
-        onChangeQueryStep(e.currentTarget.value);
+export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQuery }: PromExploreExtraFieldProps) => {
+  const rangeOptions = getQueryTypeOptions(true);
+  const prevQuery = usePrevious(query);
+
+  const onExemplarChange = useCallback(
+    (exemplar: boolean) => {
+      if (!isEqual(query, prevQuery) || exemplar !== query.exemplar) {
+        onChange({ ...query, exemplar });
       }
+    },
+    [prevQuery, query, onChange]
+  );
+
+  function onChangeQueryStep(interval: string) {
+    onChange({ ...query, interval });
+  }
+
+  function onStepChange(e: React.SyntheticEvent<HTMLInputElement>) {
+    if (e.currentTarget.value !== query.interval) {
+      onChangeQueryStep(e.currentTarget.value);
     }
+  }
 
-    function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-      if (e.key === 'Enter' && e.shiftKey) {
-        onRunQuery();
-      }
+  function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter' && e.shiftKey) {
+      onRunQuery();
     }
+  }
 
-    const onQueryTypeChange = getQueryTypeChangeHandler(query, onChange);
-
-    return (
-      <div aria-label="Prometheus extra field" className="gf-form-inline" data-testid={testIds.extraFieldEditor}>
-        {/*Query type field*/}
-        <div
-          data-testid={testIds.queryTypeField}
-          className={cx(
-            'gf-form explore-input-margin',
-            css`
-              flex-wrap: nowrap;
-            `
-          )}
-          aria-label="Query type field"
-        >
-          <InlineFormLabel width="auto">Query type</InlineFormLabel>
-
-          <RadioButtonGroup
-            options={rangeOptions}
-            value={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
-            onChange={onQueryTypeChange}
-          />
-        </div>
-        {/*Step field*/}
-        <div
-          data-testid={testIds.stepField}
-          className={cx(
-            'gf-form',
-            css`
-              flex-wrap: nowrap;
-            `
-          )}
-          aria-label="Step field"
+  const onQueryTypeChange = getQueryTypeChangeHandler(query, onChange);
+
+  return (
+    <div aria-label="Prometheus extra field" className="gf-form-inline" data-testid={testIds.extraFieldEditor}>
+      {/*Query type field*/}
+      <div
+        data-testid={testIds.queryTypeField}
+        className={cx(
+          'gf-form explore-input-margin',
+          css`
+            flex-wrap: nowrap;
+          `
+        )}
+        aria-label="Query type field"
+      >
+        <InlineFormLabel width="auto">Query type</InlineFormLabel>
+
+        <RadioButtonGroup
+          options={rangeOptions}
+          value={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
+          onChange={onQueryTypeChange}
+        />
+      </div>
+      {/*Step field*/}
+      <div
+        data-testid={testIds.stepField}
+        className={cx(
+          'gf-form',
+          css`
+            flex-wrap: nowrap;
+          `
+        )}
+        aria-label="Step field"
+      >
+        <InlineFormLabel
+          width={6}
+          tooltip={
+            'Time units and built-in variables can be used here, for example: $__interval, $__rate_interval, 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
+          }
         >
-          <InlineFormLabel
-            width={6}
-            tooltip={
-              'Time units and built-in variables can be used here, for example: $__interval, $__rate_interval, 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
-            }
-          >
-            Min step
-          </InlineFormLabel>
-          <input
-            type={'text'}
-            className="gf-form-input width-4"
-            placeholder={'auto'}
-            onChange={onStepChange}
-            onKeyDown={onReturnKeyDown}
-            value={query.interval ?? ''}
-          />
-        </div>
-
-        <PromExemplarField onChange={onExemplarChange} datasource={datasource} query={query} />
+          Min step
+        </InlineFormLabel>
+        <input
+          type={'text'}
+          className="gf-form-input width-4"
+          placeholder={'auto'}
+          onChange={onStepChange}
+          onKeyDown={onReturnKeyDown}
+          value={query.interval ?? ''}
+        />
       </div>
-    );
-  }
-);
+
+      <PromExemplarField onChange={onExemplarChange} datasource={datasource} query={query} />
+    </div>
+  );
+});
 
 PromExploreExtraField.displayName = 'PromExploreExtraField';
 
diff --git a/public/app/plugins/datasource/testdata/components/ErrorEditor.tsx b/public/app/plugins/datasource/testdata/components/ErrorEditor.tsx
index 16f5ac7b570..bdf61946809 100644
--- a/public/app/plugins/datasource/testdata/components/ErrorEditor.tsx
+++ b/public/app/plugins/datasource/testdata/components/ErrorEditor.tsx
@@ -19,7 +19,7 @@ const ERROR_OPTIONS = [
   },
 ];
 
-const FrontendErrorQueryEditor: React.FC<EditorProps> = ({ query, onChange }) => {
+const FrontendErrorQueryEditor = ({ query, onChange }: EditorProps) => {
   return (
     <InlineFieldRow>
       <InlineField labelWidth={14} label="Error type">
diff --git a/public/app/plugins/panel/barchart/TickSpacingEditor.tsx b/public/app/plugins/panel/barchart/TickSpacingEditor.tsx
index 2c6c397b186..8f30cb8ff40 100644
--- a/public/app/plugins/panel/barchart/TickSpacingEditor.tsx
+++ b/public/app/plugins/panel/barchart/TickSpacingEditor.tsx
@@ -26,7 +26,7 @@ const GAPS_OPTIONS: Array<SelectableValue<number>> = [
   },
 ];
 
-export const TickSpacingEditor: React.FC<StandardEditorProps<number>> = (props) => {
+export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
   let value = props.value ?? 0;
   const isRTL = value < 0;
   if (isRTL) {
diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
index 612622b51ab..28461006b55 100644
--- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
+++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
@@ -26,7 +26,7 @@ import { drawMarkers, FieldIndices } from './utils';
 
 interface CandlestickPanelProps extends PanelProps<CandlestickOptions> {}
 
-export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
+export const CandlestickPanel = ({
   data,
   id,
   timeRange,
@@ -37,7 +37,7 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
   fieldConfig,
   onChangeTimeRange,
   replaceVariables,
-}) => {
+}: CandlestickPanelProps) => {
   const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, showThresholds, onSplitOpen } =
     usePanelContext();
 
diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
index 5ddeaf7b66a..775dd09fb86 100644
--- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
@@ -26,7 +26,7 @@ import { HeatmapHoverEvent, prepConfig } from './utils';
 
 interface HeatmapPanelProps extends PanelProps<PanelOptions> {}
 
-export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
+export const HeatmapPanel = ({
   data,
   id,
   timeRange,
@@ -38,7 +38,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
   eventBus,
   onChangeTimeRange,
   replaceVariables,
-}) => {
+}: HeatmapPanelProps) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
   const { sync } = usePanelContext();
diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
index 66e5ca76c74..8d345227b99 100644
--- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
@@ -35,7 +35,7 @@ interface TimelinePanelProps extends PanelProps<PanelOptions> {}
 /**
  * @alpha
  */
-export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
+export const StateTimelinePanel = ({
   data,
   timeRange,
   timeZone,
@@ -44,7 +44,7 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
   height,
   replaceVariables,
   onChangeTimeRange,
-}) => {
+}: TimelinePanelProps) => {
   const theme = useTheme2();
 
   const oldConfig = useRef<UPlotConfigBuilder | undefined>(undefined);
diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx
index 0e4e7c7808d..901c6b553bb 100644
--- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx
@@ -21,14 +21,14 @@ interface StateTimelineTooltipProps {
   onAnnotationAdd?: () => void;
 }
 
-export const StateTimelineTooltip: React.FC<StateTimelineTooltipProps> = ({
+export const StateTimelineTooltip = ({
   data,
   alignedData,
   seriesIdx,
   datapointIdx,
   timeZone,
   onAnnotationAdd,
-}) => {
+}: StateTimelineTooltipProps) => {
   const theme = useTheme2();
 
   if (!data || datapointIdx == null) {
diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
index 3c15376c4e6..7d9891564db 100644
--- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
+++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
@@ -32,7 +32,7 @@ interface TimelinePanelProps extends PanelProps<PanelOptions> {}
 /**
  * @alpha
  */
-export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
+export const StatusHistoryPanel = ({
   data,
   timeRange,
   timeZone,
@@ -40,7 +40,7 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
   width,
   height,
   onChangeTimeRange,
-}) => {
+}: TimelinePanelProps) => {
   const theme = useTheme2();
 
   const oldConfig = useRef<UPlotConfigBuilder | undefined>(undefined);
diff --git a/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx b/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx
index b6d9448fe28..9e89cecaf65 100644
--- a/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx
+++ b/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx
@@ -19,13 +19,13 @@ interface StatusHistoryTooltipProps {
   timeZone: TimeZone;
 }
 
-export const StatusHistoryTooltip: React.FC<StatusHistoryTooltipProps> = ({
+export const StatusHistoryTooltip = ({
   data,
   alignedData,
   seriesIdx,
   datapointIdx,
   timeZone,
-}) => {
+}: StatusHistoryTooltipProps) => {
   const theme = useTheme2();
 
   if (!data || datapointIdx == null) {
diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationEditorPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationEditorPlugin.tsx
index c66e91972f9..a74425947f1 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationEditorPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationEditorPlugin.tsx
@@ -22,7 +22,7 @@ interface AnnotationEditorPluginProps {
 /**
  * @alpha
  */
-export const AnnotationEditorPlugin: React.FC<AnnotationEditorPluginProps> = ({ data, timeZone, config, children }) => {
+export const AnnotationEditorPlugin = ({ data, timeZone, config, children }: AnnotationEditorPluginProps) => {
   const plotInstance = useRef<uPlot>();
   const [bbox, setBbox] = useState<DOMRect>();
   const [isAddingAnnotation, setIsAddingAnnotation] = useState(false);
diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
index 936e93e6d77..c190a814b6b 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
@@ -13,7 +13,7 @@ interface AnnotationsPluginProps {
   timeZone: TimeZone;
 }
 
-export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotations, timeZone, config }) => {
+export const AnnotationsPlugin = ({ annotations, timeZone, config }: AnnotationsPluginProps) => {
   const theme = useTheme2();
   const plotInstance = useRef<uPlot>();
 
diff --git a/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
index 76a99cbfce6..3a28507a14c 100644
--- a/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
@@ -32,14 +32,14 @@ interface ContextMenuPluginProps {
   replaceVariables?: InterpolateFunction;
 }
 
-export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
+export const ContextMenuPlugin = ({
   data,
   config,
   onClose,
   timeZone,
   replaceVariables,
   ...otherProps
-}) => {
+}: ContextMenuPluginProps) => {
   const plotCanvas = useRef<HTMLDivElement>();
   const [coords, setCoords] = useState<ContextMenuSelectionCoords | null>(null);
   const [point, setPoint] = useState<ContextMenuSelectionPoint | null>(null);
@@ -208,14 +208,14 @@ interface ContextMenuViewProps {
   replaceVariables?: InterpolateFunction;
 }
 
-export const ContextMenuView: React.FC<ContextMenuViewProps> = ({
+export const ContextMenuView = ({
   selection,
   timeZone,
   defaultItems,
   replaceVariables,
   data,
   ...otherProps
-}) => {
+}: ContextMenuViewProps) => {
   const ref = useRef(null);
 
   const onClose = () => {
diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
index a7d588b452f..5cb502818e3 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
@@ -25,14 +25,14 @@ interface ExemplarMarkerProps {
   exemplarColor?: string;
 }
 
-export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
+export const ExemplarMarker = ({
   timeZone,
   dataFrame,
   dataFrameFieldIndex,
   config,
   getFieldLinks,
   exemplarColor,
-}) => {
+}: ExemplarMarkerProps) => {
   const styles = useStyles2(getExemplarMarkerStyles);
   const [isOpen, setIsOpen] = useState(false);
   const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null);
diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
index 7539afc8671..c9d0d254e4d 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
@@ -23,13 +23,13 @@ interface ExemplarsPluginProps {
   visibleSeries?: VisibleExemplarLabels;
 }
 
-export const ExemplarsPlugin: React.FC<ExemplarsPluginProps> = ({
+export const ExemplarsPlugin = ({
   exemplars,
   timeZone,
   getFieldLinks,
   config,
   visibleSeries,
-}) => {
+}: ExemplarsPluginProps) => {
   const plotInstance = useRef<uPlot>();
 
   useLayoutEffect(() => {
diff --git a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
index d088f9f9d63..f75057f6f7f 100644
--- a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
@@ -9,7 +9,7 @@ interface ThresholdControlsPluginProps {
   onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
 }
 
-export const OutsideRangePlugin: React.FC<ThresholdControlsPluginProps> = ({ config, onChangeTimeRange }) => {
+export const OutsideRangePlugin = ({ config, onChangeTimeRange }: ThresholdControlsPluginProps) => {
   const plotInstance = useRef<uPlot>();
   const [timevalues, setTimeValues] = useState<number[] | TypedArray>([]);
   const [timeRange, setTimeRange] = useState<Scale | undefined>();
diff --git a/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx
index 295f28a388a..ae05da876d2 100644
--- a/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx
@@ -14,11 +14,7 @@ interface ThresholdControlsPluginProps {
   onThresholdsChange?: (thresholds: ThresholdsConfig) => void;
 }
 
-export const ThresholdControlsPlugin: React.FC<ThresholdControlsPluginProps> = ({
-  config,
-  fieldConfig,
-  onThresholdsChange,
-}) => {
+export const ThresholdControlsPlugin = ({ config, fieldConfig, onThresholdsChange }: ThresholdControlsPluginProps) => {
   const plotInstance = useRef<uPlot>();
   const [renderToken, setRenderToken] = useState(0);
 
diff --git a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
index dd58f9b3755..a6446933858 100644
--- a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
@@ -17,14 +17,14 @@ interface ThresholdDragHandleProps {
   formatValue: (value: number) => string;
 }
 
-export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
+export const ThresholdDragHandle = ({
   step,
   y,
   dragBounds,
   mapPositionToValue,
   formatValue,
   onChange,
-}) => {
+}: ThresholdDragHandleProps) => {
   const theme = useTheme2();
   let yPos = y;
   let outOfBounds: OutOfBounds = 'none';
diff --git a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditor.tsx b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditor.tsx
index ad2e9cee156..686c076fc86 100644
--- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditor.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditor.tsx
@@ -19,7 +19,7 @@ interface AnnotationEditorProps extends HTMLAttributes<HTMLDivElement> {
   annotation?: AnnotationsDataFrameViewDTO;
 }
 
-export const AnnotationEditor: React.FC<AnnotationEditorProps> = ({
+export const AnnotationEditor = ({
   onDismiss,
   onSave,
   timeZone,
@@ -27,7 +27,7 @@ export const AnnotationEditor: React.FC<AnnotationEditorProps> = ({
   selection,
   annotation,
   style,
-}) => {
+}: AnnotationEditorProps) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
   const commonStyles = useStyles2(getCommonAnnotationStyles);
diff --git a/public/app/plugins/panel/xychart/XYChartPanel.old b/public/app/plugins/panel/xychart/XYChartPanel.old
index a446d74d7b2..879f8d4ef83 100644
--- a/public/app/plugins/panel/xychart/XYChartPanel.old
+++ b/public/app/plugins/panel/xychart/XYChartPanel.old
@@ -6,7 +6,7 @@ import { prepData, prepScatter } from './scatter';
 
 interface XYChartPanelProps extends PanelProps<XYChartOptions> {}
 
-export const XYChartPanel: React.FC<XYChartPanelProps> = ({
+export const XYChartPanel = ({
   data,
   width,
   height,
@@ -14,7 +14,7 @@ export const XYChartPanel: React.FC<XYChartPanelProps> = ({
   fieldConfig,
   timeRange,
   //onFieldConfigChange,
-}) => {
+}: XYChartPanelProps) => {
   const theme = useTheme2();
 
   const info = useMemo(() => {