From d710507bc5c91e97950737889c7855bbddf36491 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 14 Mar 2023 07:38:21 -0700
Subject: [PATCH] Chore: Avoid explicit `React.FC<Props>` when possible
 (#64722)

---
 contribute/style-guides/styling.md               |  4 ++--
 .../build-a-panel-plugin-with-d3/index.md        |  4 ++--
 .../tutorials/build-an-app-plugin/index.md       |  4 ++--
 .../src/cli/templates/component.tsx.template.ts  |  4 ++--
 .../DataLinksInlineEditor/DataLinksListItem.tsx  |  4 ++--
 .../DataSourceSettings/CertificationKey.tsx      |  4 ++--
 .../DateTimePickers/TimeRangeInput.tsx           |  6 +++---
 .../TimeRangePicker/TimePickerFooter.tsx         |  4 ++--
 .../EmptySearchResult/EmptySearchResult.tsx      |  4 ++--
 .../grafana-ui/src/components/Forms/FieldSet.tsx |  4 ++--
 .../src/components/Forms/InlineField.tsx         |  6 +++---
 .../src/components/PageLayout/PageToolbar.tsx    |  6 +++---
 .../src/components/Spinner/Spinner.tsx           |  5 ++---
 .../src/components/Table/BarGaugeCell.tsx        |  4 ++--
 .../src/components/Table/DefaultCell.tsx         |  4 ++--
 .../grafana-ui/src/components/Table/Filter.tsx   |  4 ++--
 .../src/components/Table/FilterList.tsx          |  4 ++--
 .../src/components/Table/FilterPopup.tsx         |  4 ++--
 .../src/components/Table/ImageCell.tsx           |  4 ++--
 .../src/components/Table/SparklineCell.tsx       |  4 ++--
 .../src/components/Table/TableCell.tsx           |  4 ++--
 .../grafana-ui/src/components/Tabs/Counter.tsx   |  4 ++--
 .../src/components/Tabs/TabContent.tsx           |  4 ++--
 .../src/utils/storybook/DashboardStoryCanvas.tsx |  4 ++--
 .../src/utils/storybook/StoryExample.tsx         |  4 ++--
 public/app/core/components/Animations/FadeIn.tsx |  4 ++--
 .../ForgottenPassword/ChangePassword.tsx         |  4 ++--
 .../ForgottenPassword/ChangePasswordPage.tsx     |  4 ++--
 public/app/core/components/Login/LoginForm.tsx   |  4 ++--
 public/app/core/components/Login/UserSignup.tsx  |  4 ++--
 .../components/OptionsUI/DashboardPickerByID.tsx |  6 +++---
 public/app/core/components/Page/PageContents.tsx |  4 ++--
 .../core/components/PageHeader/PageHeader.tsx    |  4 ++--
 .../core/components/PageLoader/PageLoader.tsx    |  4 ++--
 .../app/core/components/PageNew/PageContents.tsx |  4 ++--
 .../components/PasswordField/PasswordField.tsx   |  4 ++--
 .../components/RolePicker/TeamRolePicker.tsx     |  6 +++---
 .../components/RolePicker/UserRolePicker.tsx     |  6 +++---
 .../app/core/components/Select/MetricSelect.tsx  |  4 ++--
 public/app/core/components/Signup/SignupPage.tsx |  4 ++--
 public/app/features/admin/UserProfile.tsx        |  4 ++--
 .../features/admin/ldap/LdapConnectionStatus.tsx |  6 +++---
 .../app/features/admin/ldap/LdapUserGroups.tsx   |  4 ++--
 public/app/features/admin/ldap/LdapUserInfo.tsx  |  4 ++--
 .../features/admin/ldap/LdapUserMappingInfo.tsx  |  4 ++--
 .../features/admin/ldap/LdapUserPermissions.tsx  |  4 ++--
 public/app/features/admin/ldap/LdapUserTeams.tsx |  4 ++--
 .../alerting/components/BasicSettings.tsx        |  6 +++---
 .../alerting/components/ChannelSettings.tsx      |  6 +++---
 .../alerting/components/DeprecationNotice.tsx    |  4 ++--
 .../components/NotificationChannelForm.tsx       |  6 +++---
 .../components/NotificationChannelOptions.tsx    |  6 +++---
 .../alerting/components/NotificationSettings.tsx |  4 ++--
 .../alerting/components/OptionElement.tsx        |  4 ++--
 .../features/alerting/unified/PanelAlertTab.tsx  |  4 ++--
 .../alerting/unified/PanelAlertTabContent.tsx    |  4 ++--
 .../unified/components/AlertManagerPicker.tsx    |  4 ++--
 .../components/AnnotationDetailsField.tsx        |  6 +++---
 .../unified/components/CollapseToggle.tsx        |  6 +++---
 .../unified/components/EmptyAreaWithCTA.tsx      |  6 +++---
 .../alerting/unified/components/HoverCard.tsx    |  6 +++---
 .../alerting/unified/components/Label.tsx        |  6 +++---
 .../alerting/unified/components/MetaText.tsx     |  6 +++---
 .../alerting/unified/components/RuleLocation.tsx |  6 +++---
 .../alerting/unified/components/Well.tsx         |  4 ++--
 .../components/alert-groups/AlertDetails.tsx     |  4 ++--
 .../expressions/AlertConditionIndicator.tsx      |  9 ++-------
 .../mute-timings/MuteTimingTimeRange.tsx         |  4 ++--
 .../components/mute-timings/MuteTimingsTable.tsx |  4 ++--
 .../notification-policies/AlertGroupsSummary.tsx |  4 ++--
 .../EditDefaultPolicyForm.tsx                    |  6 +++---
 .../EditNotificationPolicyForm.tsx               |  4 ++--
 .../components/notification-policies/Filters.tsx |  6 +++---
 .../panel-alerts-tab/NewRuleFromPanelButton.tsx  |  4 ++--
 .../receivers/DuplicateTemplateView.tsx          |  4 ++--
 .../components/receivers/EditReceiverView.tsx    |  4 ++--
 .../components/receivers/EditTemplateView.tsx    |  4 ++--
 .../components/receivers/GlobalConfigForm.tsx    |  4 ++--
 .../components/receivers/NewReceiverView.tsx     |  4 ++--
 .../components/receivers/NewTemplateView.tsx     |  4 ++--
 .../receivers/ReceiversAndTemplatesView.tsx      |  4 ++--
 .../components/receivers/ReceiversTable.tsx      |  4 ++--
 .../components/receivers/TemplateEditor.tsx      |  4 ++--
 .../components/receivers/TemplateForm.tsx        |  4 ++--
 .../components/receivers/TemplatesTable.tsx      |  4 ++--
 .../form/CloudCommonChannelSettings.tsx          |  6 +++---
 .../receivers/form/CloudReceiverForm.tsx         |  4 ++--
 .../form/GrafanaCommonChannelSettings.tsx        |  6 +++---
 .../receivers/form/GrafanaReceiverForm.tsx       |  4 ++--
 .../receivers/form/fields/KeyValueMapInput.tsx   |  4 ++--
 .../receivers/form/fields/StringArrayInput.tsx   |  4 ++--
 .../receivers/form/fields/SubformArrayField.tsx  |  4 ++--
 .../receivers/form/fields/SubformField.tsx       |  4 ++--
 .../components/rule-editor/AlertRuleForm.tsx     |  4 ++--
 .../rule-editor/AnnotationKeyInput.tsx           |  4 ++--
 .../components/rule-editor/ExpressionEditor.tsx  |  6 +++---
 .../components/rule-editor/ExpressionsEditor.tsx |  6 +++---
 .../rule-editor/GrafanaAlertStatePicker.tsx      |  4 ++--
 .../rule-editor/GroupAndNamespaceFields.tsx      |  4 ++--
 .../components/rule-editor/QueryEditor.tsx       |  6 +++---
 .../components/rule-editor/QueryWrapper.tsx      |  6 +++---
 .../components/rule-editor/RuleInspector.tsx     |  8 ++++----
 .../components/rule-editor/SelectWIthAdd.tsx     |  6 +++---
 .../components/rule-editor/VizWrapper.tsx        |  6 +++---
 .../query-and-alert-condition/AlertType.tsx      |  4 ++--
 .../QueryAndExpressionsStep.tsx                  |  4 ++--
 .../rule-types/GrafanaManagedAlert.tsx           |  4 ++--
 .../rule-editor/rule-types/MimirOrLokiAlert.tsx  |  4 ++--
 .../rule-types/MimirOrLokiRecordingRule.tsx      |  4 ++--
 .../rule-editor/rule-types/RuleType.tsx          |  4 ++--
 .../rule-editor/rule-types/RuleTypePicker.tsx    |  4 ++--
 .../unified/components/rules/ActionButton.tsx    |  4 ++--
 .../unified/components/rules/ActionIcon.tsx      |  6 +++---
 .../components/rules/AlertInstanceDetails.tsx    |  4 ++--
 .../components/rules/AlertInstancesTable.tsx     |  4 ++--
 .../unified/components/rules/AlertStateTag.tsx   |  4 ++--
 .../unified/components/rules/CloudRules.tsx      |  4 ++--
 .../unified/components/rules/GrafanaRules.tsx    |  4 ++--
 .../components/rules/ReorderRuleGroupModal.tsx   |  6 +++---
 .../components/rules/RuleActionsButtons.tsx      |  4 ++--
 .../unified/components/rules/RuleDetails.tsx     |  4 ++--
 .../rules/RuleDetailsActionButtons.tsx           |  4 ++--
 .../rules/RuleDetailsFederatedSources.tsx        |  4 ++--
 .../unified/components/rules/RuleHealth.tsx      |  4 ++--
 .../components/rules/RuleListGroupView.tsx       |  4 ++--
 .../components/rules/RuleListStateSection.tsx    |  4 ++--
 .../components/rules/RuleListStateView.tsx       |  4 ++--
 .../unified/components/rules/RuleState.tsx       |  4 ++--
 .../unified/components/rules/RuleStats.tsx       |  4 ++--
 .../unified/components/rules/RulesGroup.tsx      |  4 ++--
 .../unified/components/rules/RulesTable.tsx      |  6 +++---
 .../unified/components/rules/StateHistory.tsx    |  6 +++---
 .../components/silences/AmAlertStateTag.tsx      |  4 ++--
 .../unified/components/silences/Matchers.tsx     |  4 ++--
 .../components/silences/MatchersField.tsx        |  4 ++--
 .../components/silences/NoSilencesCTA.tsx        |  4 ++--
 .../components/silences/SilenceStateTag.tsx      |  6 ++----
 .../components/silences/SilencedAlertsTable.tsx  |  4 ++--
 .../silences/SilencedAlertsTableRow.tsx          |  4 ++--
 .../components/silences/SilencesEditor.tsx       |  4 ++--
 .../components/silences/SilencesTable.tsx        |  4 ++--
 .../app/features/api-keys/ApiKeysActionBar.tsx   |  4 ++--
 public/app/features/api-keys/ApiKeysTable.tsx    |  4 ++--
 .../tabs/ConnectData/CardGrid/CardGrid.tsx       |  4 ++--
 .../tabs/ConnectData/NoResults/NoResults.tsx     |  4 ++--
 .../DashboardSettings/AutoRefreshIntervals.tsx   |  6 +++---
 .../PanelEditor/OptionsPaneCategory.tsx          | 16 +++++++++++++---
 .../PanelEditor/OverrideCategoryTitle.tsx        |  8 ++++----
 .../PanelEditor/PanelEditorTableView.test.tsx    |  5 ++---
 .../components/PanelEditor/PanelEditorTabs.tsx   |  4 ++--
 .../PanelEditor/VisualizationSelectPane.tsx      |  4 ++--
 .../RepeatRowSelect/RepeatRowSelect.tsx          |  4 ++--
 .../components/RowOptions/RowOptionsButton.tsx   |  4 ++--
 .../components/RowOptions/RowOptionsForm.tsx     |  4 ++--
 .../components/RowOptions/RowOptionsModal.tsx    |  4 ++--
 .../components/SubMenu/DashboardLinks.tsx        |  4 ++--
 .../PanelHeader/PanelHeaderLoadingIndicator.tsx  |  4 ++--
 .../dashgrid/PanelHeader/PanelHeaderMenuItem.tsx |  4 ++--
 .../dashgrid/PanelHeader/PanelHeaderNotice.tsx   |  4 ++--
 .../dashgrid/PanelHeader/PanelHeaderNotices.tsx  |  4 ++--
 .../dashgrid/PanelStateWrapper.test.tsx          |  6 +++---
 .../dimensions/editors/ColorDimensionEditor.tsx  |  4 ++--
 .../dimensions/editors/ScaleDimensionEditor.tsx  |  4 ++--
 public/app/features/explore/ElapsedTime.tsx      |  4 ++--
 public/app/features/explore/ExploreActions.tsx   |  4 ++--
 public/app/features/explore/Time.tsx             |  4 ++--
 .../expressions/components/ClassicConditions.tsx |  4 ++--
 .../app/features/expressions/components/Math.tsx |  4 ++--
 .../features/expressions/components/Reduce.tsx   |  4 ++--
 .../features/expressions/components/Resample.tsx |  4 ++--
 .../expressions/components/Threshold.tsx         |  4 ++--
 public/app/features/invites/SignupInvited.tsx    |  4 ++--
 .../PanelLibraryOptionsGroup.tsx                 |  4 ++--
 .../components/ImportDashboardForm.tsx           |  6 +++---
 public/app/features/org/NewOrgPage.tsx           |  4 ++--
 public/app/features/org/OrgProfile.tsx           |  4 ++--
 public/app/features/org/SelectOrgPage.tsx        |  4 ++--
 .../plugins/components/PluginStateInfo.tsx       |  4 ++--
 .../app/features/profile/ChangePasswordForm.tsx  |  4 ++--
 .../app/features/profile/UserProfileEditForm.tsx |  4 ++--
 .../search/components/DashboardActions.tsx       |  4 ++--
 .../features/search/components/SearchItem.tsx    |  4 ++--
 .../page/components/ConfirmDeleteModal.tsx       |  4 ++--
 .../search/page/components/MoveToFolderModal.tsx |  4 ++--
 public/app/features/teams/TeamSettings.tsx       |  4 ++--
 .../adhoc/picker/AdHocFilterBuilder.tsx          |  4 ++--
 .../variables/adhoc/picker/AdHocFilterKey.tsx    |  4 ++--
 .../adhoc/picker/AdHocFilterRenderer.tsx         |  6 +++---
 .../variables/adhoc/picker/AdHocFilterValue.tsx  | 11 ++---------
 .../variables/adhoc/picker/ConditionSegment.tsx  |  4 ++--
 .../variables/adhoc/picker/OperatorSegment.tsx   |  4 ++--
 .../editor/LegacyVariableQueryEditor.tsx         |  4 ++--
 .../features/variables/inspect/NetworkGraph.tsx  |  4 ++--
 .../variables/inspect/VariableUsagesButton.tsx   |  4 ++--
 .../inspect/VariablesDependenciesButton.tsx      |  6 +++---
 .../variables/inspect/VariablesUnknownButton.tsx |  4 ++--
 .../variables/pickers/shared/VariableLink.tsx    |  8 ++++----
 .../cloud-monitoring/components/Aggregation.tsx  |  4 ++--
 .../cloud-monitoring/components/Alignment.tsx    |  6 +++---
 .../components/AlignmentFunction.tsx             |  6 +++---
 .../cloud-monitoring/components/Fields.tsx       |  6 +++---
 .../cloudwatch/components/ConfigEditor.tsx       |  4 ++--
 .../cloudwatch/components/QueryHeader.tsx        |  4 ++--
 .../VariableQueryEditor/VariableTextField.tsx    | 13 +++----------
 .../loki/components/VariableQueryEditor.tsx      |  4 ++--
 .../prometheus/components/PromLink.tsx           |  4 ++--
 .../components/VariableQueryEditor.tsx           |  4 ++--
 .../SearchTraceQLEditor/InlineSearchField.tsx    |  4 ++--
 .../panel/alertlist/GroupByWithLoading.tsx       |  4 ++--
 .../alertlist/unified-alerting/GroupedView.tsx   |  6 +++---
 .../alertlist/unified-alerting/UngroupedView.tsx |  6 +++---
 public/app/plugins/panel/welcome/Welcome.tsx     |  4 ++--
 .../app/plugins/panel/xychart/XYChartPanel2.tsx  |  2 +-
 213 files changed, 485 insertions(+), 498 deletions(-)

diff --git a/contribute/style-guides/styling.md b/contribute/style-guides/styling.md
index e6c9ab63a57..c9d4c193be2 100644
--- a/contribute/style-guides/styling.md
+++ b/contribute/style-guides/styling.md
@@ -13,12 +13,12 @@ To access the theme in your styles, use the `useStyles` hook. It provides basic
 > Please remember to put `getStyles` function at the end of the file!
 
 ```tsx
-import React, { FC } from 'react';
+import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
-const Foo: FC<FooProps> = () => {
+const Foo = (props: FooProps) => {
   const styles = useStyles2(getStyles);
 
   // Use styles with classNames
diff --git a/docs/sources/tutorials/build-a-panel-plugin-with-d3/index.md b/docs/sources/tutorials/build-a-panel-plugin-with-d3/index.md
index 3638df56e06..4e77ee6d93b 100644
--- a/docs/sources/tutorials/build-a-panel-plugin-with-d3/index.md
+++ b/docs/sources/tutorials/build-a-panel-plugin-with-d3/index.md
@@ -48,7 +48,7 @@ Wait a minute. Manipulating documents based on data? That's sounds an awful lot
 In **SimplePanel.tsx**, change `SimplePanel` to return an `svg` with a `rect` element.
 
 ```ts
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
+export const SimplePanel = ({ options, data, width, height }: Props) => {
   const theme = useTheme();
 
   return (
@@ -196,7 +196,7 @@ import * as d3 from 'd3';
 
 interface Props extends PanelProps<SimpleOptions> {}
 
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
+export const SimplePanel = ({ options, data, width, height }: Props) => {
   const theme = useTheme();
 
   const values = [4, 8, 15, 16, 23, 42];
diff --git a/docs/sources/tutorials/build-an-app-plugin/index.md b/docs/sources/tutorials/build-an-app-plugin/index.md
index fa2aeb03c7e..7a8bc2a6e86 100644
--- a/docs/sources/tutorials/build-an-app-plugin/index.md
+++ b/docs/sources/tutorials/build-an-app-plugin/index.md
@@ -65,9 +65,9 @@ Let's add a tab for managing server instances.
 
    ```ts
    import { AppRootProps } from '@grafana/data';
-   import React, { FC } from 'react';
+   import React from 'react';
 
-   export const Instances: FC<AppRootProps> = ({ query, path, meta }) => {
+   export const Instances = ({ query, path, meta }: AppRootProps) => {
      return <p>Hello</p>;
    };
    ```
diff --git a/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts b/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts
index 7345eb529d5..4c7903597a7 100644
--- a/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts
+++ b/packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts
@@ -1,8 +1,8 @@
-export const componentTpl = `import React, { FC } from 'react';
+export const componentTpl = `import React from 'react';
 
 export interface Props {};
 
-export const <%= name %>: FC<Props> = (props) => {
+export const <%= name %> = (props: Props) => {
   return (
     <div>Hello world!</div>
   )
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
index 228da8ffe24..9ed7b744b03 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
 
@@ -18,7 +18,7 @@ export interface DataLinksListItemProps {
   isEditing?: boolean;
 }
 
-export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, onRemove }) => {
+export const DataLinksListItem = ({ link, onEdit, onRemove }: DataLinksListItemProps) => {
   const theme = useTheme2();
   const styles = getDataLinkListItemStyles(theme);
   const { title = '', url = '' } = link;
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
index 20b57fc6576..6355ba9440b 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, MouseEvent, FC } from 'react';
+import React, { ChangeEvent, MouseEvent } from 'react';
 
 import { Button } from '../Button';
 import { InlineField } from '../Forms/InlineField';
@@ -15,7 +15,7 @@ interface Props {
   onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 
-export const CertificationKey: FC<Props> = ({ hasCert, label, onChange, onClick, placeholder }) => {
+export const CertificationKey = ({ hasCert, label, onChange, onClick, placeholder }: Props) => {
   return (
     <InlineFieldRow>
       <InlineField label={label} labelWidth={14} disabled={hasCert}>
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
index ae8f995f63e..b9d85df07d4 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, FormEvent, MouseEvent, useState } from 'react';
+import React, { FormEvent, MouseEvent, useState } from 'react';
 
 import { dateMath, dateTime, getDefaultTimeRange, GrafanaTheme2, TimeRange, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -35,7 +35,7 @@ export interface TimeRangeInputProps {
 
 const noop = () => {};
 
-export const TimeRangeInput: FC<TimeRangeInputProps> = ({
+export const TimeRangeInput = ({
   value,
   onChange,
   onChangeTimeZone = noop,
@@ -46,7 +46,7 @@ export const TimeRangeInput: FC<TimeRangeInputProps> = ({
   isReversed = true,
   hideQuickRanges = false,
   disabled = false,
-}) => {
+}: TimeRangeInputProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const theme = useTheme2();
   const styles = getStyles(theme, disabled);
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
index 471625df5a6..4802a79a713 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
-import React, { FC, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -23,7 +23,7 @@ interface Props {
   onChangeFiscalYearStartMonth?: (month: number) => void;
 }
 
-export const TimePickerFooter: FC<Props> = (props) => {
+export const TimePickerFooter = (props: Props) => {
   const {
     timeZone,
     fiscalYearStartMonth,
diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
index a340d7154b0..436bc87eeee 100644
--- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
+++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -9,7 +9,7 @@ export interface Props {
   children: JSX.Element | string;
 }
 
-const EmptySearchResult: FC<Props> = ({ children }) => {
+const EmptySearchResult = ({ children }: Props) => {
   const styles = useStyles2(getStyles);
   return <div className={styles.container}>{children}</div>;
 };
diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
index 11ab276b3b6..2f93e60587d 100644
--- a/packages/grafana-ui/src/components/Forms/FieldSet.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, HTMLProps } from 'react';
+import React, { HTMLProps } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -13,7 +13,7 @@ export interface Props extends Omit<HTMLProps<HTMLFieldSetElement>, 'label'> {
   label?: React.ReactNode;
 }
 
-export const FieldSet: FC<Props> = ({ label, children, className, ...rest }) => {
+export const FieldSet = ({ label, children, className, ...rest }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
 
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.tsx b/packages/grafana-ui/src/components/Forms/InlineField.tsx
index 01f3fa3a257..4596c782de3 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.tsx
@@ -1,5 +1,5 @@
 import { cx, css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -29,7 +29,7 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
   interactive?: boolean;
 }
 
-export const InlineField: FC<Props> = ({
+export const InlineField = ({
   children,
   label,
   tooltip,
@@ -46,7 +46,7 @@ export const InlineField: FC<Props> = ({
   transparent,
   interactive,
   ...htmlProps
-}) => {
+}: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme, grow, shrink);
   const inputId = htmlFor ?? getChildId(children);
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 66db32d3561..0f4510c7008 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -28,7 +28,7 @@ export interface Props {
 }
 
 /** @alpha */
-export const PageToolbar: FC<Props> = React.memo(
+export const PageToolbar = React.memo(
   ({
     title,
     section,
@@ -44,7 +44,7 @@ export const PageToolbar: FC<Props> = React.memo(
     /** main nav-container aria-label **/
     'aria-label': ariaLabel,
     buttonOverflowAlignment = 'right',
-  }) => {
+  }: Props) => {
     const styles = useStyles2(getStyles);
 
     /**
diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
index b5419622dd8..0267c34f806 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.tsx
+++ b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
@@ -1,5 +1,5 @@
 import { cx, css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { stylesFactory } from '../../themes';
 import { Icon } from '../Icon/Icon';
@@ -28,8 +28,7 @@ export type Props = {
 /**
  * @public
  */
-export const Spinner: FC<Props> = (props: Props) => {
-  const { className, inline = false, iconClassName, style, size = 16 } = props;
+export const Spinner = ({ className, inline = false, iconClassName, style, size = 16 }: Props) => {
   const styles = getStyles(size, inline);
   return (
     <div data-testid="Spinner" style={style} className={cx(styles.wrapper, className)}>
diff --git a/packages/grafana-ui/src/components/Table/BarGaugeCell.tsx b/packages/grafana-ui/src/components/Table/BarGaugeCell.tsx
index f3d1f5ef9e2..4e6870f0a5f 100644
--- a/packages/grafana-ui/src/components/Table/BarGaugeCell.tsx
+++ b/packages/grafana-ui/src/components/Table/BarGaugeCell.tsx
@@ -1,5 +1,5 @@
 import { isFunction } from 'lodash';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax } from '@grafana/data';
 import { BarGaugeDisplayMode, BarGaugeValueMode } from '@grafana/schema';
@@ -24,7 +24,7 @@ const defaultScale: ThresholdsConfig = {
   ],
 };
 
-export const BarGaugeCell: FC<TableCellProps> = (props) => {
+export const BarGaugeCell = (props: TableCellProps) => {
   const { field, innerWidth, tableStyles, cell, cellProps, row } = props;
   const displayValue = field.display!(cell.value);
   const cellOptions = getCellOptions(field);
diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index 9bfcdc1e675..60181560309 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -1,5 +1,5 @@
 import { cx } from '@emotion/css';
-import React, { FC, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import tinycolor from 'tinycolor2';
 
 import { DisplayValue, formattedValueToString } from '@grafana/data';
@@ -15,7 +15,7 @@ import { TableStyles } from './styles';
 import { TableCellDisplayMode, TableCellProps, TableFieldOptions } from './types';
 import { getCellOptions } from './utils';
 
-export const DefaultCell: FC<TableCellProps> = (props) => {
+export const DefaultCell = (props: TableCellProps) => {
   const { field, cell, tableStyles, row, cellProps } = props;
 
   const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
diff --git a/packages/grafana-ui/src/components/Table/Filter.tsx b/packages/grafana-ui/src/components/Table/Filter.tsx
index dacbb223d36..056cf79464d 100644
--- a/packages/grafana-ui/src/components/Table/Filter.tsx
+++ b/packages/grafana-ui/src/components/Table/Filter.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { Field, GrafanaTheme2 } from '@grafana/data';
 
@@ -16,7 +16,7 @@ interface Props {
   field?: Field;
 }
 
-export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
+export const Filter = ({ column, field, tableStyles }: Props) => {
   const ref = useRef<HTMLButtonElement>(null);
   const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false);
   const styles = useStyles2(getStyles);
diff --git a/packages/grafana-ui/src/components/Table/FilterList.tsx b/packages/grafana-ui/src/components/Table/FilterList.tsx
index 0d914f8f134..865085748dd 100644
--- a/packages/grafana-ui/src/components/Table/FilterList.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterList.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { FixedSizeList as List } from 'react-window';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
@@ -17,7 +17,7 @@ interface Props {
 const ITEM_HEIGHT = 28;
 const MIN_HEIGHT = ITEM_HEIGHT * 5;
 
-export const FilterList: FC<Props> = ({ options, values, caseSensitive, onChange }) => {
+export const FilterList = ({ options, values, caseSensitive, onChange }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
   const [searchFilter, setSearchFilter] = useState('');
diff --git a/packages/grafana-ui/src/components/Table/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
index 3498b0b3700..304be70f812 100644
--- a/packages/grafana-ui/src/components/Table/FilterPopup.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
 
@@ -17,7 +17,7 @@ interface Props {
   field?: Field;
 }
 
-export const FilterPopup: FC<Props> = ({ column: { preFilteredRows, filterValue, setFilter }, onClose, field }) => {
+export const FilterPopup = ({ column: { preFilteredRows, filterValue, setFilter }, onClose, field }: Props) => {
   const theme = useTheme2();
   const uniqueValues = useMemo(() => calculateUniqueFieldValues(preFilteredRows, field), [preFilteredRows, field]);
   const options = useMemo(() => valuesToOptions(uniqueValues), [uniqueValues]);
diff --git a/packages/grafana-ui/src/components/Table/ImageCell.tsx b/packages/grafana-ui/src/components/Table/ImageCell.tsx
index 9dffa16b88e..33c87d22b9f 100644
--- a/packages/grafana-ui/src/components/Table/ImageCell.tsx
+++ b/packages/grafana-ui/src/components/Table/ImageCell.tsx
@@ -1,5 +1,5 @@
 import { cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { useStyles2 } from '../../themes';
 import { getCellLinks } from '../../utils';
@@ -8,7 +8,7 @@ import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
 
 import { TableCellProps } from './types';
 
-export const ImageCell: FC<TableCellProps> = (props) => {
+export const ImageCell = (props: TableCellProps) => {
   const { field, cell, tableStyles, row, cellProps } = props;
 
   const displayValue = field.display!(cell.value);
diff --git a/packages/grafana-ui/src/components/Table/SparklineCell.tsx b/packages/grafana-ui/src/components/Table/SparklineCell.tsx
index 7da625fe5a7..05fa0f5f35a 100644
--- a/packages/grafana-ui/src/components/Table/SparklineCell.tsx
+++ b/packages/grafana-ui/src/components/Table/SparklineCell.tsx
@@ -1,5 +1,5 @@
 import { isArray } from 'lodash';
-import React, { FC } from 'react';
+import React from 'react';
 
 import {
   ArrayVector,
@@ -37,7 +37,7 @@ export const defaultSparklineCellConfig: GraphFieldConfig = {
   showPoints: VisibilityMode.Never,
 };
 
-export const SparklineCell: FC<TableCellProps> = (props) => {
+export const SparklineCell = (props: TableCellProps) => {
   const { field, innerWidth, tableStyles, cell, cellProps } = props;
 
   const sparkline = getSparkline(cell.value);
diff --git a/packages/grafana-ui/src/components/Table/TableCell.tsx b/packages/grafana-ui/src/components/Table/TableCell.tsx
index 00d69ef171e..620e542a14d 100644
--- a/packages/grafana-ui/src/components/Table/TableCell.tsx
+++ b/packages/grafana-ui/src/components/Table/TableCell.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { Cell } from 'react-table';
 
 import { TableStyles } from './styles';
@@ -13,7 +13,7 @@ export interface Props {
   userProps?: object;
 }
 
-export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, userProps }) => {
+export const TableCell = ({ cell, tableStyles, onCellFilterAdded, userProps }: Props) => {
   const cellProps = cell.getCellProps();
   const field = (cell.column as unknown as GrafanaTableColumn).field;
 
diff --git a/packages/grafana-ui/src/components/Tabs/Counter.tsx b/packages/grafana-ui/src/components/Tabs/Counter.tsx
index 7bb63b2ecd9..ccb680d87d3 100644
--- a/packages/grafana-ui/src/components/Tabs/Counter.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Counter.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, locale } from '@grafana/data';
 
@@ -24,7 +24,7 @@ export interface CounterProps {
   value: number;
 }
 
-export const Counter: FC<CounterProps> = ({ value }) => {
+export const Counter = ({ value }: CounterProps) => {
   const styles = useStyles2(getStyles);
 
   return <span className={styles.counter}>{locale(value, 0).text}</span>;
diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
index eb50ed3a974..9265ee39816 100644
--- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -17,7 +17,7 @@ const getTabContentStyle = stylesFactory((theme: GrafanaTheme2) => {
   };
 });
 
-export const TabContent: FC<Props> = ({ children, className, ...restProps }) => {
+export const TabContent = ({ children, className, ...restProps }: Props) => {
   const theme = useTheme2();
   const styles = getTabContentStyle(theme);
 
diff --git a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
index d887740ebe2..dbf458df7a8 100644
--- a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
+++ b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { useTheme2 } from '../../themes';
 
@@ -7,7 +7,7 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export const DashboardStoryCanvas: FC<Props> = ({ children }) => {
+export const DashboardStoryCanvas = ({ children }: Props) => {
   const theme = useTheme2();
   const style = css`
     width: 100%;
diff --git a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
index 8332c87509c..e26679bdb98 100644
--- a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
+++ b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { useTheme2 } from '../../themes/ThemeContext';
 
@@ -8,7 +8,7 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export const StoryExample: FC<Props> = ({ name, children }) => {
+export const StoryExample = ({ name, children }: Props) => {
   const theme = useTheme2();
   const style = css`
     width: 100%;
diff --git a/public/app/core/components/Animations/FadeIn.tsx b/public/app/core/components/Animations/FadeIn.tsx
index bf047393712..6794728726a 100644
--- a/public/app/core/components/Animations/FadeIn.tsx
+++ b/public/app/core/components/Animations/FadeIn.tsx
@@ -1,4 +1,4 @@
-import React, { FC, CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 import Transition, { ExitHandler } from 'react-transition-group/Transition';
 
 interface Props {
@@ -9,7 +9,7 @@ interface Props {
   onExited?: ExitHandler<HTMLDivElement>;
 }
 
-export const FadeIn: FC<Props> = (props) => {
+export const FadeIn = (props: Props) => {
   const defaultStyle: CSSProperties = {
     transition: `opacity ${props.duration}ms linear`,
     opacity: 0,
diff --git a/public/app/core/components/ForgottenPassword/ChangePassword.tsx b/public/app/core/components/ForgottenPassword/ChangePassword.tsx
index 3a014973cb4..f97de51947c 100644
--- a/public/app/core/components/ForgottenPassword/ChangePassword.tsx
+++ b/public/app/core/components/ForgottenPassword/ChangePassword.tsx
@@ -1,4 +1,4 @@
-import React, { FC, SyntheticEvent } from 'react';
+import React, { SyntheticEvent } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Tooltip, Form, Field, VerticalGroup, Button } from '@grafana/ui';
@@ -15,7 +15,7 @@ interface PasswordDTO {
   confirmNew: string;
 }
 
-export const ChangePassword: FC<Props> = ({ onSubmit, onSkip }) => {
+export const ChangePassword = ({ onSubmit, onSkip }: Props) => {
   const submit = (passwords: PasswordDTO) => {
     onSubmit(passwords.newPassword);
   };
diff --git a/public/app/core/components/ForgottenPassword/ChangePasswordPage.tsx b/public/app/core/components/ForgottenPassword/ChangePasswordPage.tsx
index 70fe1ab4c06..cf9c1a0a419 100644
--- a/public/app/core/components/ForgottenPassword/ChangePasswordPage.tsx
+++ b/public/app/core/components/ForgottenPassword/ChangePasswordPage.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
@@ -9,7 +9,7 @@ import { ChangePassword } from './ChangePassword';
 
 export interface Props extends GrafanaRouteComponentProps<{}, { code: string }> {}
 
-export const ChangePasswordPage: FC<Props> = (props) => {
+export const ChangePasswordPage = (props: Props) => {
   return (
     <LoginLayout>
       <InnerBox>
diff --git a/public/app/core/components/Login/LoginForm.tsx b/public/app/core/components/Login/LoginForm.tsx
index 7798b75a748..45cdf8fa087 100644
--- a/public/app/core/components/Login/LoginForm.tsx
+++ b/public/app/core/components/Login/LoginForm.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, Form, Input, Field } from '@grafana/ui';
@@ -26,7 +26,7 @@ export const submitButton = css`
   width: 100%;
 `;
 
-export const LoginForm: FC<Props> = ({ children, onSubmit, isLoggingIn, passwordHint, loginHint }) => {
+export const LoginForm = ({ children, onSubmit, isLoggingIn, passwordHint, loginHint }: Props) => {
   return (
     <div className={wrapperStyles}>
       <Form onSubmit={onSubmit} validateOn="onChange">
diff --git a/public/app/core/components/Login/UserSignup.tsx b/public/app/core/components/Login/UserSignup.tsx
index 56113665b6d..04866de95d9 100644
--- a/public/app/core/components/Login/UserSignup.tsx
+++ b/public/app/core/components/Login/UserSignup.tsx
@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { LinkButton, VerticalGroup } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 
-export const UserSignup: FC<{}> = () => {
+export const UserSignup = () => {
   const href = getConfig().verifyEmailEnabled ? `${getConfig().appSubUrl}/verify` : `${getConfig().appSubUrl}/signup`;
   const paddingTop = css({ paddingTop: '16px' });
 
diff --git a/public/app/core/components/OptionsUI/DashboardPickerByID.tsx b/public/app/core/components/OptionsUI/DashboardPickerByID.tsx
index 085dd1c7e0d..99a108e9f66 100644
--- a/public/app/core/components/OptionsUI/DashboardPickerByID.tsx
+++ b/public/app/core/components/OptionsUI/DashboardPickerByID.tsx
@@ -1,5 +1,5 @@
 import debounce from 'debounce-promise';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { AsyncSelect } from '@grafana/ui';
@@ -31,7 +31,7 @@ interface Props {
 /**
  * @deprecated prefer using dashboard uid rather than id
  */
-export const DashboardPickerByID: FC<Props> = ({
+export const DashboardPickerByID = ({
   onChange: propsOnChange,
   value,
   width,
@@ -41,7 +41,7 @@ export const DashboardPickerByID: FC<Props> = ({
   id,
   optionLabel = 'label',
   excludedDashboards,
-}) => {
+}: Props) => {
   const debouncedSearch = debounce((query: string) => getDashboards(query || '', optionLabel, excludedDashboards), 300);
   const option = value ? { value, [optionLabel]: value[optionLabel] } : undefined;
   const onChange = (item: SelectableValue<DashboardPickerItem>) => {
diff --git a/public/app/core/components/Page/PageContents.tsx b/public/app/core/components/Page/PageContents.tsx
index cfbd1b850c6..55ec042e789 100644
--- a/public/app/core/components/Page/PageContents.tsx
+++ b/public/app/core/components/Page/PageContents.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import { cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 // Components
 import PageLoader from '../PageLoader/PageLoader';
@@ -11,6 +11,6 @@ interface Props {
   className?: string;
 }
 
-export const PageContents: FC<Props> = ({ isLoading, children, className }) => {
+export const PageContents = ({ isLoading, children, className }: Props) => {
   return <div className={cx('page-container', 'page-body', className)}>{isLoading ? <PageLoader /> : children}</div>;
 };
diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index 0b151e99f57..412da8c3078 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { NavModelItem, NavModelBreadcrumb, GrafanaTheme2 } from '@grafana/data';
 import { Tab, TabsBar, Icon, useStyles2, toIconName } from '@grafana/ui';
@@ -86,7 +86,7 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => {
   );
 };
 
-export const PageHeader: FC<Props> = ({ navItem: model, renderTitle, actions, info, subTitle }) => {
+export const PageHeader = ({ navItem: model, renderTitle, actions, info, subTitle }: Props) => {
   const styles = useStyles2(getStyles);
 
   if (!model) {
diff --git a/public/app/core/components/PageLoader/PageLoader.tsx b/public/app/core/components/PageLoader/PageLoader.tsx
index d7aee52c271..177f18f54ce 100644
--- a/public/app/core/components/PageLoader/PageLoader.tsx
+++ b/public/app/core/components/PageLoader/PageLoader.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { LoadingPlaceholder } from '@grafana/ui';
 
@@ -6,7 +6,7 @@ interface Props {
   pageName?: string;
 }
 
-const PageLoader: FC<Props> = ({ pageName = '' }) => {
+const PageLoader = ({ pageName = '' }: Props) => {
   const loadingText = `Loading ${pageName}...`;
   return (
     <div className="page-loader-wrapper">
diff --git a/public/app/core/components/PageNew/PageContents.tsx b/public/app/core/components/PageNew/PageContents.tsx
index 81f60408e8d..1246443139a 100644
--- a/public/app/core/components/PageNew/PageContents.tsx
+++ b/public/app/core/components/PageNew/PageContents.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, { FC } from 'react';
+import React from 'react';
 
 import PageLoader from '../PageLoader/PageLoader';
 
@@ -9,7 +9,7 @@ interface Props {
   className?: string;
 }
 
-export const PageContents: FC<Props> = ({ isLoading, children, className }) => {
+export const PageContents = ({ isLoading, children, className }: Props) => {
   let content = className ? <div className={className}>{children}</div> : children;
 
   return <>{isLoading ? <PageLoader /> : content}</>;
diff --git a/public/app/core/components/PasswordField/PasswordField.tsx b/public/app/core/components/PasswordField/PasswordField.tsx
index 1571f17186d..03811be74a2 100644
--- a/public/app/core/components/PasswordField/PasswordField.tsx
+++ b/public/app/core/components/PasswordField/PasswordField.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Input, IconButton } from '@grafana/ui';
@@ -10,7 +10,7 @@ export interface Props {
   passwordHint?: string;
 }
 
-export const PasswordField: FC<Props> = React.forwardRef<HTMLInputElement, Props>(
+export const PasswordField = React.forwardRef<HTMLInputElement, Props>(
   ({ autoComplete, autoFocus, id, passwordHint, ...props }, ref) => {
     const [showPassword, setShowPassword] = useState(false);
 
diff --git a/public/app/core/components/RolePicker/TeamRolePicker.tsx b/public/app/core/components/RolePicker/TeamRolePicker.tsx
index 73e0b7f0aa8..f4dec6622a9 100644
--- a/public/app/core/components/RolePicker/TeamRolePicker.tsx
+++ b/public/app/core/components/RolePicker/TeamRolePicker.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { contextSrv } from 'app/core/core';
@@ -29,7 +29,7 @@ export interface Props {
   maxWidth?: string | number;
 }
 
-export const TeamRolePicker: FC<Props> = ({
+export const TeamRolePicker = ({
   teamId,
   roleOptions,
   disabled,
@@ -37,7 +37,7 @@ export const TeamRolePicker: FC<Props> = ({
   pendingRoles,
   apply = false,
   maxWidth,
-}) => {
+}: Props) => {
   const [{ loading, value: appliedRoles = [] }, getTeamRoles] = useAsyncFn(async () => {
     try {
       if (apply && Boolean(pendingRoles?.length)) {
diff --git a/public/app/core/components/RolePicker/UserRolePicker.tsx b/public/app/core/components/RolePicker/UserRolePicker.tsx
index ede86b99f3f..573b43ca54c 100644
--- a/public/app/core/components/RolePicker/UserRolePicker.tsx
+++ b/public/app/core/components/RolePicker/UserRolePicker.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { contextSrv } from 'app/core/core';
@@ -32,7 +32,7 @@ export interface Props {
   maxWidth?: string | number;
 }
 
-export const UserRolePicker: FC<Props> = ({
+export const UserRolePicker = ({
   basicRole,
   userId,
   orgId,
@@ -44,7 +44,7 @@ export const UserRolePicker: FC<Props> = ({
   onApplyRoles,
   pendingRoles,
   maxWidth,
-}) => {
+}: Props) => {
   const [{ loading, value: appliedRoles = [] }, getUserRoles] = useAsyncFn(async () => {
     try {
       if (apply && Boolean(pendingRoles?.length)) {
diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 48cfb8b52f7..cdbbc7be4a2 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -1,5 +1,5 @@
 import { flatten } from 'lodash';
-import React, { useMemo, useCallback, FC } from 'react';
+import React, { useMemo, useCallback } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { LegacyForms } from '@grafana/ui';
@@ -16,7 +16,7 @@ export interface Props {
   variables?: Variable[];
 }
 
-export const MetricSelect: FC<Props> = (props) => {
+export const MetricSelect = (props: Props) => {
   const { value, placeholder, className, isSearchable, onChange } = props;
   const options = useSelectOptions(props);
   const selected = useSelectedOption(options, value);
diff --git a/public/app/core/components/Signup/SignupPage.tsx b/public/app/core/components/Signup/SignupPage.tsx
index c757bb753fe..d0d1bd2c434 100644
--- a/public/app/core/components/Signup/SignupPage.tsx
+++ b/public/app/core/components/Signup/SignupPage.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { getBackendSrv } from '@grafana/runtime';
 import { Form, Field, Input, Button, HorizontalGroup, LinkButton, FormAPI } from '@grafana/ui';
@@ -27,7 +27,7 @@ interface QueryParams {
 
 interface Props extends GrafanaRouteComponentProps<{}, QueryParams> {}
 
-export const SignupPage: FC<Props> = (props) => {
+export const SignupPage = (props: Props) => {
   const notifyApp = useAppNotification();
   const onSubmit = async (formData: SignupDTO) => {
     if (formData.name === '') {
diff --git a/public/app/features/admin/UserProfile.tsx b/public/app/features/admin/UserProfile.tsx
index 13ac137ae42..847677f4890 100644
--- a/public/app/features/admin/UserProfile.tsx
+++ b/public/app/features/admin/UserProfile.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, PureComponent, useRef, useState } from 'react';
+import React, { PureComponent, useRef, useState } from 'react';
 
 import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
@@ -303,7 +303,7 @@ interface LockedRowProps {
   lockMessage?: string;
 }
 
-export const LockedRow: FC<LockedRowProps> = ({ label, value, lockMessage }) => {
+export const LockedRow = ({ label, value, lockMessage }: LockedRowProps) => {
   const lockMessageClass = css`
     font-style: italic;
     margin-right: 0.6rem;
diff --git a/public/app/features/admin/ldap/LdapConnectionStatus.tsx b/public/app/features/admin/ldap/LdapConnectionStatus.tsx
index 6fbed0a9909..2566a3ff93c 100644
--- a/public/app/features/admin/ldap/LdapConnectionStatus.tsx
+++ b/public/app/features/admin/ldap/LdapConnectionStatus.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Alert, Icon } from '@grafana/ui';
 import { AppNotificationSeverity, LdapConnectionInfo, LdapServerInfo } from 'app/types';
@@ -7,7 +7,7 @@ interface Props {
   ldapConnectionInfo: LdapConnectionInfo;
 }
 
-export const LdapConnectionStatus: FC<Props> = ({ ldapConnectionInfo }) => {
+export const LdapConnectionStatus = ({ ldapConnectionInfo }: Props) => {
   return (
     <>
       <h3 className="page-heading">LDAP Connection</h3>
@@ -50,7 +50,7 @@ interface LdapConnectionErrorProps {
   ldapConnectionInfo: LdapConnectionInfo;
 }
 
-export const LdapErrorBox: FC<LdapConnectionErrorProps> = ({ ldapConnectionInfo }) => {
+export const LdapErrorBox = ({ ldapConnectionInfo }: LdapConnectionErrorProps) => {
   const hasError = ldapConnectionInfo.some((info) => info.error);
   if (!hasError) {
     return null;
diff --git a/public/app/features/admin/ldap/LdapUserGroups.tsx b/public/app/features/admin/ldap/LdapUserGroups.tsx
index d2d0d80b08f..44c4361d7e6 100644
--- a/public/app/features/admin/ldap/LdapUserGroups.tsx
+++ b/public/app/features/admin/ldap/LdapUserGroups.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Tooltip, Icon } from '@grafana/ui';
 import { LdapRole } from 'app/types';
@@ -8,7 +8,7 @@ interface Props {
   showAttributeMapping?: boolean;
 }
 
-export const LdapUserGroups: FC<Props> = ({ groups, showAttributeMapping }) => {
+export const LdapUserGroups = ({ groups, showAttributeMapping }: Props) => {
   const items = showAttributeMapping ? groups : groups.filter((item) => item.orgRole);
 
   return (
diff --git a/public/app/features/admin/ldap/LdapUserInfo.tsx b/public/app/features/admin/ldap/LdapUserInfo.tsx
index 51228b7d4e5..441df16acdb 100644
--- a/public/app/features/admin/ldap/LdapUserInfo.tsx
+++ b/public/app/features/admin/ldap/LdapUserInfo.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { LdapUser } from 'app/types';
 
@@ -12,7 +12,7 @@ interface Props {
   showAttributeMapping?: boolean;
 }
 
-export const LdapUserInfo: FC<Props> = ({ ldapUser, showAttributeMapping }) => {
+export const LdapUserInfo = ({ ldapUser, showAttributeMapping }: Props) => {
   return (
     <>
       <LdapUserMappingInfo info={ldapUser.info} showAttributeMapping={showAttributeMapping} />
diff --git a/public/app/features/admin/ldap/LdapUserMappingInfo.tsx b/public/app/features/admin/ldap/LdapUserMappingInfo.tsx
index 8376ba74a07..f762aefd444 100644
--- a/public/app/features/admin/ldap/LdapUserMappingInfo.tsx
+++ b/public/app/features/admin/ldap/LdapUserMappingInfo.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { LdapUserInfo } from 'app/types';
 
@@ -7,7 +7,7 @@ interface Props {
   showAttributeMapping?: boolean;
 }
 
-export const LdapUserMappingInfo: FC<Props> = ({ info, showAttributeMapping }) => {
+export const LdapUserMappingInfo = ({ info, showAttributeMapping }: Props) => {
   return (
     <div className="gf-form-group">
       <div className="gf-form">
diff --git a/public/app/features/admin/ldap/LdapUserPermissions.tsx b/public/app/features/admin/ldap/LdapUserPermissions.tsx
index 526d4299f77..f31d0410da8 100644
--- a/public/app/features/admin/ldap/LdapUserPermissions.tsx
+++ b/public/app/features/admin/ldap/LdapUserPermissions.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Icon } from '@grafana/ui';
 import { LdapPermissions } from 'app/types';
@@ -7,7 +7,7 @@ interface Props {
   permissions: LdapPermissions;
 }
 
-export const LdapUserPermissions: FC<Props> = ({ permissions }) => {
+export const LdapUserPermissions = ({ permissions }: Props) => {
   return (
     <div className="gf-form-group">
       <div className="gf-form">
diff --git a/public/app/features/admin/ldap/LdapUserTeams.tsx b/public/app/features/admin/ldap/LdapUserTeams.tsx
index 08c601c9159..1a29aad6e13 100644
--- a/public/app/features/admin/ldap/LdapUserTeams.tsx
+++ b/public/app/features/admin/ldap/LdapUserTeams.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Tooltip, Icon } from '@grafana/ui';
 import { LdapTeam } from 'app/types';
@@ -8,7 +8,7 @@ interface Props {
   showAttributeMapping?: boolean;
 }
 
-export const LdapUserTeams: FC<Props> = ({ teams, showAttributeMapping }) => {
+export const LdapUserTeams = ({ teams, showAttributeMapping }: Props) => {
   const items = showAttributeMapping ? teams : teams.filter((item) => item.teamName);
 
   return (
diff --git a/public/app/features/alerting/components/BasicSettings.tsx b/public/app/features/alerting/components/BasicSettings.tsx
index 0e18086c5c2..6705da037ef 100644
--- a/public/app/features/alerting/components/BasicSettings.tsx
+++ b/public/app/features/alerting/components/BasicSettings.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Field, Input, InputControl, Select } from '@grafana/ui';
@@ -15,7 +15,7 @@ interface Props extends NotificationSettingsProps {
   resetSecureField: (key: string) => void;
 }
 
-export const BasicSettings: FC<Props> = ({
+export const BasicSettings = ({
   control,
   currentFormValues,
   errors,
@@ -24,7 +24,7 @@ export const BasicSettings: FC<Props> = ({
   channels,
   register,
   resetSecureField,
-}) => {
+}: Props) => {
   return (
     <>
       <Field label="Name" invalid={!!errors.name} error={errors.name && errors.name.message}>
diff --git a/public/app/features/alerting/components/ChannelSettings.tsx b/public/app/features/alerting/components/ChannelSettings.tsx
index 292110d723d..940863c1f3e 100644
--- a/public/app/features/alerting/components/ChannelSettings.tsx
+++ b/public/app/features/alerting/components/ChannelSettings.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Alert, CollapsableSection } from '@grafana/ui';
 
@@ -13,7 +13,7 @@ interface Props extends NotificationSettingsProps {
   resetSecureField: (key: string) => void;
 }
 
-export const ChannelSettings: FC<Props> = ({
+export const ChannelSettings = ({
   control,
   currentFormValues,
   errors,
@@ -21,7 +21,7 @@ export const ChannelSettings: FC<Props> = ({
   secureFields,
   register,
   resetSecureField,
-}) => {
+}: Props) => {
   return (
     <CollapsableSection label={`Optional ${selectedChannel.heading}`} isOpen={false}>
       {selectedChannel.info !== '' && <Alert severity="info" title={selectedChannel.info ?? ''} />}
diff --git a/public/app/features/alerting/components/DeprecationNotice.tsx b/public/app/features/alerting/components/DeprecationNotice.tsx
index c89586f3ea4..6db39c68785 100644
--- a/public/app/features/alerting/components/DeprecationNotice.tsx
+++ b/public/app/features/alerting/components/DeprecationNotice.tsx
@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Alert } from '@grafana/ui';
 
 export const LOCAL_STORAGE_KEY = 'grafana.legacyalerting.unifiedalertingpromo';
 
-const DeprecationNotice: FC<{}> = () => (
+const DeprecationNotice = () => (
   <Alert severity="warning" title="Grafana legacy alerting is going away soon">
     <p>
       You are using Grafana legacy alerting, it has been deprecated and will be removed in the next major version of
diff --git a/public/app/features/alerting/components/NotificationChannelForm.tsx b/public/app/features/alerting/components/NotificationChannelForm.tsx
index 5eeb366dc80..60be00150a7 100644
--- a/public/app/features/alerting/components/NotificationChannelForm.tsx
+++ b/public/app/features/alerting/components/NotificationChannelForm.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Button, FormAPI, HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui';
@@ -26,7 +26,7 @@ export interface NotificationSettingsProps
   currentFormValues: NotificationChannelDTO;
 }
 
-export const NotificationChannelForm: FC<Props> = ({
+export const NotificationChannelForm = ({
   control,
   errors,
   selectedChannel,
@@ -38,7 +38,7 @@ export const NotificationChannelForm: FC<Props> = ({
   onTestChannel,
   resetSecureField,
   secureFields,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   useEffect(() => {
diff --git a/public/app/features/alerting/components/NotificationChannelOptions.tsx b/public/app/features/alerting/components/NotificationChannelOptions.tsx
index 2bd4cb7918b..c94fd994893 100644
--- a/public/app/features/alerting/components/NotificationChannelOptions.tsx
+++ b/public/app/features/alerting/components/NotificationChannelOptions.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Button, Checkbox, Field, Input } from '@grafana/ui';
@@ -16,7 +16,7 @@ interface Props extends NotificationSettingsProps {
   onResetSecureField: (key: string) => void;
 }
 
-export const NotificationChannelOptions: FC<Props> = ({
+export const NotificationChannelOptions = ({
   control,
   currentFormValues,
   errors,
@@ -24,7 +24,7 @@ export const NotificationChannelOptions: FC<Props> = ({
   register,
   onResetSecureField,
   secureFields,
-}) => {
+}: Props) => {
   return (
     <>
       {selectedChannelOptions.map((option: NotificationChannelOption, index: number) => {
diff --git a/public/app/features/alerting/components/NotificationSettings.tsx b/public/app/features/alerting/components/NotificationSettings.tsx
index 2e9ea0629e4..c88191d65fe 100644
--- a/public/app/features/alerting/components/NotificationSettings.tsx
+++ b/public/app/features/alerting/components/NotificationSettings.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Checkbox, CollapsableSection, Field, InfoBox, Input } from '@grafana/ui';
 
@@ -8,7 +8,7 @@ interface Props extends NotificationSettingsProps {
   imageRendererAvailable: boolean;
 }
 
-export const NotificationSettings: FC<Props> = ({ currentFormValues, imageRendererAvailable, register }) => {
+export const NotificationSettings = ({ currentFormValues, imageRendererAvailable, register }: Props) => {
   return (
     <CollapsableSection label="Notification settings" isOpen={false}>
       <Field>
diff --git a/public/app/features/alerting/components/OptionElement.tsx b/public/app/features/alerting/components/OptionElement.tsx
index ee8472bbf92..bc43c8dee85 100644
--- a/public/app/features/alerting/components/OptionElement.tsx
+++ b/public/app/features/alerting/components/OptionElement.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { FormAPI, Input, InputControl, Select, TextArea } from '@grafana/ui';
 
@@ -9,7 +9,7 @@ interface Props extends Pick<FormAPI<any>, 'register' | 'control'> {
   invalid?: boolean;
 }
 
-export const OptionElement: FC<Props> = ({ control, option, register, invalid }) => {
+export const OptionElement = ({ control, option, register, invalid }: Props) => {
   const modelValue = option.secure ? `secureSettings.${option.propertyName}` : `settings.${option.propertyName}`;
   switch (option.element) {
     case 'input':
diff --git a/public/app/features/alerting/unified/PanelAlertTab.tsx b/public/app/features/alerting/unified/PanelAlertTab.tsx
index cbdf52eec11..88e6a763f2c 100644
--- a/public/app/features/alerting/unified/PanelAlertTab.tsx
+++ b/public/app/features/alerting/unified/PanelAlertTab.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Tab, TabProps } from '@grafana/ui/src/components/Tabs/Tab';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
@@ -11,7 +11,7 @@ interface Props extends Omit<TabProps, 'counter' | 'ref'> {
 }
 
 // it will load rule count from backend
-export const PanelAlertTab: FC<Props> = ({ panel, dashboard, ...otherProps }) => {
+export const PanelAlertTab = ({ panel, dashboard, ...otherProps }: Props) => {
   const { rules, loading } = usePanelCombinedRules({ panel, dashboard });
   return <Tab {...otherProps} counter={loading ? null : rules.length} />;
 };
diff --git a/public/app/features/alerting/unified/PanelAlertTabContent.tsx b/public/app/features/alerting/unified/PanelAlertTabContent.tsx
index a8b99dbc0de..da91c08802f 100644
--- a/public/app/features/alerting/unified/PanelAlertTabContent.tsx
+++ b/public/app/features/alerting/unified/PanelAlertTabContent.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -17,7 +17,7 @@ interface Props {
   panel: PanelModel;
 }
 
-export const PanelAlertTabContent: FC<Props> = ({ dashboard, panel }) => {
+export const PanelAlertTabContent = ({ dashboard, panel }: Props) => {
   const styles = useStyles2(getStyles);
   const { errors, loading, rules } = usePanelCombinedRules({
     dashboard,
diff --git a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
index 94f30bcc38c..d3b81252194 100644
--- a/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
+++ b/public/app/features/alerting/unified/components/AlertManagerPicker.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Field, Select, useStyles2 } from '@grafana/ui';
@@ -17,7 +17,7 @@ function getAlertManagerLabel(alertManager: AlertManagerDataSource) {
   return alertManager.name === GRAFANA_RULES_SOURCE_NAME ? 'Grafana' : alertManager.name.slice(0, 37);
 }
 
-export const AlertManagerPicker: FC<Props> = ({ onChange, current, dataSources, disabled = false }) => {
+export const AlertManagerPicker = ({ onChange, current, dataSources, disabled = false }: Props) => {
   const styles = useStyles2(getStyles);
 
   const options: Array<SelectableValue<string>> = useMemo(() => {
diff --git a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
index 15f65d379b3..d29f0fe2f2c 100644
--- a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
+++ b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, textUtil } from '@grafana/data';
 import { Tooltip, useStyles2 } from '@grafana/ui';
@@ -18,7 +18,7 @@ interface Props {
   valueLink?: string;
 }
 
-export const AnnotationDetailsField: FC<Props> = ({ annotationKey, value, valueLink }) => {
+export const AnnotationDetailsField = ({ annotationKey, value, valueLink }: Props) => {
   const label = annotationLabels[annotationKey as Annotation] ? (
     <Tooltip content={annotationKey} placement="top" theme="info">
       <span>{annotationLabels[annotationKey as Annotation]}</span>
@@ -34,7 +34,7 @@ export const AnnotationDetailsField: FC<Props> = ({ annotationKey, value, valueL
   );
 };
 
-const AnnotationValue: FC<Props> = ({ annotationKey, value, valueLink }) => {
+const AnnotationValue = ({ annotationKey, value, valueLink }: Props) => {
   const styles = useStyles2(getStyles);
 
   const needsWell = wellableAnnotationKeys.includes(annotationKey);
diff --git a/public/app/features/alerting/unified/components/CollapseToggle.tsx b/public/app/features/alerting/unified/components/CollapseToggle.tsx
index 9ea400226e6..f3b15669694 100644
--- a/public/app/features/alerting/unified/components/CollapseToggle.tsx
+++ b/public/app/features/alerting/unified/components/CollapseToggle.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { IconSize, useStyles2, Button } from '@grafana/ui';
@@ -14,7 +14,7 @@ interface Props extends HTMLAttributes<HTMLButtonElement> {
   text?: string;
 }
 
-export const CollapseToggle: FC<Props> = ({
+export const CollapseToggle = ({
   isCollapsed,
   onToggle,
   idControlled,
@@ -22,7 +22,7 @@ export const CollapseToggle: FC<Props> = ({
   text,
   size = 'xl',
   ...restOfProps
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx b/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx
index 38e1ce688bb..11d4e86efc8 100644
--- a/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx
+++ b/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { ButtonHTMLAttributes, FC } from 'react';
+import React, { ButtonHTMLAttributes } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, ButtonVariant, IconName, LinkButton, useStyles2 } from '@grafana/ui';
@@ -18,7 +18,7 @@ export interface EmptyAreaWithCTAProps {
   showButton?: boolean;
 }
 
-export const EmptyAreaWithCTA: FC<EmptyAreaWithCTAProps> = ({
+export const EmptyAreaWithCTA = ({
   buttonIcon,
   buttonLabel,
   buttonSize = 'lg',
@@ -27,7 +27,7 @@ export const EmptyAreaWithCTA: FC<EmptyAreaWithCTAProps> = ({
   text,
   href,
   showButton = true,
-}) => {
+}: EmptyAreaWithCTAProps) => {
   const styles = useStyles2(getStyles);
 
   const commonProps = {
diff --git a/public/app/features/alerting/unified/components/HoverCard.tsx b/public/app/features/alerting/unified/components/HoverCard.tsx
index b0dca5ce7dc..9a8bd56c6e4 100644
--- a/public/app/features/alerting/unified/components/HoverCard.tsx
+++ b/public/app/features/alerting/unified/components/HoverCard.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { Placement } from '@popperjs/core';
 import classnames from 'classnames';
-import React, { FC, ReactElement, ReactNode, useRef } from 'react';
+import React, { ReactElement, ReactNode, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -19,7 +19,7 @@ export interface HoverCardProps {
   arrow?: boolean;
 }
 
-export const HoverCard: FC<HoverCardProps> = ({
+export const HoverCard = ({
   children,
   header,
   content,
@@ -29,7 +29,7 @@ export const HoverCard: FC<HoverCardProps> = ({
   wrapperClassName,
   disabled = false,
   ...rest
-}) => {
+}: HoverCardProps) => {
   const popoverRef = useRef<HTMLElement>(null);
   const styles = useStyles2(getStyles);
 
diff --git a/public/app/features/alerting/unified/components/Label.tsx b/public/app/features/alerting/unified/components/Label.tsx
index d9b7bb38597..83dbf664569 100644
--- a/public/app/features/alerting/unified/components/Label.tsx
+++ b/public/app/features/alerting/unified/components/Label.tsx
@@ -1,11 +1,11 @@
 import { css } from '@emotion/css';
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { GrafanaTheme2, IconName } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
 import { Icon, useStyles2 } from '@grafana/ui';
 
-interface LabelProps {
+interface Props {
   icon?: IconName;
   label?: ReactNode;
   value: ReactNode;
@@ -13,7 +13,7 @@ interface LabelProps {
 }
 
 // TODO allow customization with color prop
-const Label: FC<LabelProps> = ({ label, value, icon }) => {
+const Label = ({ label, value, icon }: Props) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/features/alerting/unified/components/MetaText.tsx b/public/app/features/alerting/unified/components/MetaText.tsx
index 616653ccfc6..c02e6bd88f9 100644
--- a/public/app/features/alerting/unified/components/MetaText.tsx
+++ b/public/app/features/alerting/unified/components/MetaText.tsx
@@ -1,16 +1,16 @@
 import { css } from '@emotion/css';
 import classNames from 'classnames';
-import React, { FC, HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
 import { Icon, IconName, useStyles2 } from '@grafana/ui';
 
-interface MetaTextProps extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   icon?: IconName;
 }
 
-const MetaText: FC<MetaTextProps> = ({ children, icon, ...rest }) => {
+const MetaText = ({ children, icon, ...rest }: Props) => {
   const styles = useStyles2(getStyles);
   const interactive = typeof rest.onClick === 'function';
 
diff --git a/public/app/features/alerting/unified/components/RuleLocation.tsx b/public/app/features/alerting/unified/components/RuleLocation.tsx
index 74ccbf5209d..1a64d33d2cc 100644
--- a/public/app/features/alerting/unified/components/RuleLocation.tsx
+++ b/public/app/features/alerting/unified/components/RuleLocation.tsx
@@ -1,13 +1,13 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Icon } from '@grafana/ui';
 
-interface RuleLocationProps {
+interface Props {
   namespace: string;
   group?: string;
 }
 
-const RuleLocation: FC<RuleLocationProps> = ({ namespace, group }) => {
+const RuleLocation = ({ namespace, group }: Props) => {
   if (!group) {
     return <>{namespace}</>;
   }
diff --git a/public/app/features/alerting/unified/components/Well.tsx b/public/app/features/alerting/unified/components/Well.tsx
index 17294c8fec4..106889e42ca 100644
--- a/public/app/features/alerting/unified/components/Well.tsx
+++ b/public/app/features/alerting/unified/components/Well.tsx
@@ -1,12 +1,12 @@
 import { cx, css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 type Props = React.HTMLAttributes<HTMLDivElement>;
 
-export const Well: FC<Props> = ({ children, className }) => {
+export const Well = ({ children, className }: Props) => {
   const styles = useStyles2(getStyles);
   return <div className={cx(styles.wrapper, className)}>{children}</div>;
 };
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx
index 8ab58c7cbc7..ecef884ae84 100644
--- a/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { LinkButton, useStyles2 } from '@grafana/ui';
@@ -18,7 +18,7 @@ interface AmNotificationsAlertDetailsProps {
   alert: AlertmanagerAlert;
 }
 
-export const AlertDetails: FC<AmNotificationsAlertDetailsProps> = ({ alert, alertManagerSourceName }) => {
+export const AlertDetails = ({ alert, alertManagerSourceName }: AmNotificationsAlertDetailsProps) => {
   const styles = useStyles2(getStyles);
   const instancePermissions = getInstancesPermissions(alertManagerSourceName);
 
diff --git a/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx b/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx
index 3572af7d877..11d4d98e516 100644
--- a/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx
+++ b/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Badge, clearButtonStyles, useStyles2 } from '@grafana/ui';
@@ -11,12 +11,7 @@ interface AlertConditionProps {
   onSetCondition?: () => void;
 }
 
-export const AlertConditionIndicator: FC<AlertConditionProps> = ({
-  enabled = false,
-  error,
-  warning,
-  onSetCondition,
-}) => {
+export const AlertConditionIndicator = ({ enabled = false, error, warning, onSetCondition }: AlertConditionProps) => {
   const styles = useStyles2(getStyles);
 
   if (enabled && error) {
diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
index 04cba1844b8..91129713b10 100644
--- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
+++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeRange.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -11,7 +11,7 @@ interface Props {
   intervalIndex: number;
 }
 
-export const MuteTimingTimeRange: FC<Props> = ({ intervalIndex }) => {
+export const MuteTimingTimeRange = ({ intervalIndex }: Props) => {
   const styles = useStyles2(getStyles);
   const { register, formState } = useFormContext<MuteTimingFields>();
 
diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
index 5ddc5abbcd4..c641f7bc821 100644
--- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
+++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -32,7 +32,7 @@ interface Props {
   hideActions?: boolean;
 }
 
-export const MuteTimingsTable: FC<Props> = ({ alertManagerSourceName, muteTimingNames, hideActions }) => {
+export const MuteTimingsTable = ({ alertManagerSourceName, muteTimingNames, hideActions }: Props) => {
   const styles = useStyles2(getStyles);
   const dispatch = useDispatch();
   const permissions = getNotificationsPermissions(alertManagerSourceName);
diff --git a/public/app/features/alerting/unified/components/notification-policies/AlertGroupsSummary.tsx b/public/app/features/alerting/unified/components/notification-policies/AlertGroupsSummary.tsx
index e96cb93c434..db731352eec 100644
--- a/public/app/features/alerting/unified/components/notification-policies/AlertGroupsSummary.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/AlertGroupsSummary.tsx
@@ -1,5 +1,5 @@
 import pluralize from 'pluralize';
-import React, { FC, Fragment } from 'react';
+import React, { Fragment } from 'react';
 
 import { Stack } from '@grafana/experimental';
 import { Badge } from '@grafana/ui';
@@ -10,7 +10,7 @@ interface Props {
   unprocessed?: number;
 }
 
-export const AlertGroupsSummary: FC<Props> = ({ active = 0, suppressed = 0, unprocessed = 0 }) => {
+export const AlertGroupsSummary = ({ active = 0, suppressed = 0, unprocessed = 0 }: Props) => {
   const statsComponents: React.ReactNode[] = [];
   const total = active + suppressed + unprocessed;
 
diff --git a/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.tsx b/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.tsx
index 882a8a09a3f..9eaf5614bef 100644
--- a/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/EditDefaultPolicyForm.tsx
@@ -1,5 +1,5 @@
 import { cx } from '@emotion/css';
-import React, { FC, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 
 import { Collapse, Field, Form, Input, InputControl, Link, MultiSelect, Select, useStyles2 } from '@grafana/ui';
 import { RouteWithID } from 'app/plugins/datasource/alertmanager/types';
@@ -28,13 +28,13 @@ export interface AmRootRouteFormProps {
   route: RouteWithID;
 }
 
-export const AmRootRouteForm: FC<AmRootRouteFormProps> = ({
+export const AmRootRouteForm = ({
   actionButtons,
   alertManagerSourceName,
   onSubmit,
   receivers,
   route,
-}) => {
+}: AmRootRouteFormProps) => {
   const styles = useStyles2(getFormStyles);
   const [isTimingOptionsExpanded, setIsTimingOptionsExpanded] = useState(false);
   const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(route.group_by));
diff --git a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
index bf604612e1b..6c4e91931ab 100644
--- a/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/EditNotificationPolicyForm.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -45,7 +45,7 @@ export interface AmRoutesExpandedFormProps {
   actionButtons: ReactNode;
 }
 
-export const AmRoutesExpandedForm: FC<AmRoutesExpandedFormProps> = ({ actionButtons, receivers, route, onSubmit }) => {
+export const AmRoutesExpandedForm = ({ actionButtons, receivers, route, onSubmit }: AmRoutesExpandedFormProps) => {
   const styles = useStyles2(getStyles);
   const formStyles = useStyles2(getFormStyles);
   const [groupByOptions, setGroupByOptions] = useState(stringsToSelectableValues(route?.group_by));
diff --git a/public/app/features/alerting/unified/components/notification-policies/Filters.tsx b/public/app/features/alerting/unified/components/notification-policies/Filters.tsx
index fda19685c3d..7965cca4a81 100644
--- a/public/app/features/alerting/unified/components/notification-policies/Filters.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/Filters.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { debounce, pick } from 'lodash';
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -16,11 +16,11 @@ interface NotificationPoliciesFilterProps {
   onChangeReceiver: (receiver: string | undefined) => void;
 }
 
-const NotificationPoliciesFilter: FC<NotificationPoliciesFilterProps> = ({
+const NotificationPoliciesFilter = ({
   receivers,
   onChangeReceiver,
   onChangeMatchers,
-}) => {
+}: NotificationPoliciesFilterProps) => {
   const [searchParams, setSearchParams] = useURLSearchParams();
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const { queryString, contactPoint } = getNotificationPoliciesFilters(searchParams);
diff --git a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx
index 51ace2c47d6..f6000d528e0 100644
--- a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx
+++ b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAsync } from 'react-use';
 
@@ -17,7 +17,7 @@ interface Props {
   className?: string;
 }
 
-export const NewRuleFromPanelButton: FC<Props> = ({ dashboard, panel, className }) => {
+export const NewRuleFromPanelButton = ({ dashboard, panel, className }: Props) => {
   const templating = useSelector((state) => {
     return state.templating;
   });
diff --git a/public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx
index a72ace2d2fb..96489e6c2eb 100644
--- a/public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Alert } from '@grafana/ui';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -14,7 +14,7 @@ interface Props {
   alertManagerSourceName: string;
 }
 
-export const DuplicateTemplateView: FC<Props> = ({ config, templateName, alertManagerSourceName }) => {
+export const DuplicateTemplateView = ({ config, templateName, alertManagerSourceName }: Props) => {
   const template = config.template_files?.[templateName];
 
   if (!template) {
diff --git a/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx b/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
index 2d395975ac4..34dd5207170 100644
--- a/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Alert } from '@grafana/ui';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -14,7 +14,7 @@ interface Props {
   alertManagerSourceName: string;
 }
 
-export const EditReceiverView: FC<Props> = ({ config, receiverName, alertManagerSourceName }) => {
+export const EditReceiverView = ({ config, receiverName, alertManagerSourceName }: Props) => {
   const receiver = config.alertmanager_config.receivers?.find(({ name }) => name === receiverName);
   if (!receiver) {
     return (
diff --git a/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
index cb3b4a4664b..b8271e2d98e 100644
--- a/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Alert } from '@grafana/ui';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -11,7 +11,7 @@ interface Props {
   alertManagerSourceName: string;
 }
 
-export const EditTemplateView: FC<Props> = ({ config, templateName, alertManagerSourceName }) => {
+export const EditTemplateView = ({ config, templateName, alertManagerSourceName }: Props) => {
   const template = config.template_files?.[templateName];
   const provenance = config.template_file_provenances?.[templateName];
 
diff --git a/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx
index a83a5e7d69f..33c5da50700 100644
--- a/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
 import { Alert, Button, HorizontalGroup, LinkButton } from '@grafana/ui';
@@ -27,7 +27,7 @@ const defaultValues: FormValues = {
   smtp_require_tls: true,
 } as const;
 
-export const GlobalConfigForm: FC<Props> = ({ config, alertManagerSourceName }) => {
+export const GlobalConfigForm = ({ config, alertManagerSourceName }: Props) => {
   const dispatch = useDispatch();
 
   useCleanup((state) => (state.unifiedAlerting.saveAMConfig = initialAsyncRequestState));
diff --git a/public/app/features/alerting/unified/components/receivers/NewReceiverView.tsx b/public/app/features/alerting/unified/components/receivers/NewReceiverView.tsx
index 86dfea463e8..0fe5ed33a61 100644
--- a/public/app/features/alerting/unified/components/receivers/NewReceiverView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/NewReceiverView.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 
@@ -12,7 +12,7 @@ interface Props {
   alertManagerSourceName: string;
 }
 
-export const NewReceiverView: FC<Props> = ({ alertManagerSourceName, config }) => {
+export const NewReceiverView = ({ alertManagerSourceName, config }: Props) => {
   if (alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME) {
     return <GrafanaReceiverForm alertManagerSourceName={alertManagerSourceName} config={config} />;
   } else {
diff --git a/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
index a7636dc6a65..0daac5b222b 100644
--- a/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 
@@ -9,6 +9,6 @@ interface Props {
   alertManagerSourceName: string;
 }
 
-export const NewTemplateView: FC<Props> = ({ config, alertManagerSourceName }) => {
+export const NewTemplateView = ({ config, alertManagerSourceName }: Props) => {
   return <TemplateForm config={config} alertManagerSourceName={alertManagerSourceName} />;
 };
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx
index ceaf42f4e2a..f7116e1804f 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversAndTemplatesView.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Stack } from '@grafana/experimental';
 import { Alert, LinkButton } from '@grafana/ui';
@@ -17,7 +17,7 @@ interface Props {
   alertManagerName: string;
 }
 
-export const ReceiversAndTemplatesView: FC<Props> = ({ config, alertManagerName }) => {
+export const ReceiversAndTemplatesView = ({ config, alertManagerName }: Props) => {
   const isCloud = alertManagerName !== GRAFANA_RULES_SOURCE_NAME;
   const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerName);
 
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
index ace509fa67d..4e344582c5e 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
@@ -1,5 +1,5 @@
 import pluralize from 'pluralize';
-import React, { FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { dateTime, dateTimeFormat } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -238,7 +238,7 @@ interface Props {
   alertManagerName: string;
 }
 
-export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
+export const ReceiversTable = ({ config, alertManagerName }: Props) => {
   const dispatch = useDispatch();
   const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerName);
   const permissions = getNotificationsPermissions(alertManagerName);
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateEditor.tsx b/public/app/features/alerting/unified/components/receivers/TemplateEditor.tsx
index 1ada702eecf..c2223ded6d5 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateEditor.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateEditor.tsx
@@ -4,7 +4,7 @@
  * It includes auto-complete for template data and syntax highlighting
  */
 import { editor, IDisposable } from 'monaco-editor';
-import React, { FC, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { CodeEditor } from '@grafana/ui';
 import { CodeEditorProps } from '@grafana/ui/src/components/Monaco/types';
@@ -17,7 +17,7 @@ type TemplateEditorProps = Omit<CodeEditorProps, 'language' | 'theme'> & {
   autoHeight?: boolean;
 };
 
-const TemplateEditor: FC<TemplateEditorProps> = (props) => {
+const TemplateEditor = (props: TemplateEditorProps) => {
   const shouldAutoHeight = Boolean(props.autoHeight);
   const disposeSuggestions = useRef<IDisposable | null>(null);
 
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index 5eedbddc0f4..225c0d49746 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { Location } from 'history';
-import React, { FC } from 'react';
+import React from 'react';
 import { useForm, Validate } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -41,7 +41,7 @@ interface Props {
 }
 export const isDuplicating = (location: Location) => location.pathname.endsWith('/duplicate');
 
-export const TemplateForm: FC<Props> = ({ existing, alertManagerSourceName, config, provenance }) => {
+export const TemplateForm = ({ existing, alertManagerSourceName, config, provenance }: Props) => {
   const styles = useStyles2(getStyles);
   const dispatch = useDispatch();
 
diff --git a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
index 292b0fc1c7e..33d56c2360e 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useMemo, useState } from 'react';
+import React, { Fragment, useMemo, useState } from 'react';
 
 import { ConfirmModal, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -23,7 +23,7 @@ interface Props {
   alertManagerName: string;
 }
 
-export const TemplatesTable: FC<Props> = ({ config, alertManagerName }) => {
+export const TemplatesTable = ({ config, alertManagerName }: Props) => {
   const dispatch = useDispatch();
   const [expandedTemplates, setExpandedTemplates] = useState<Record<string, boolean>>({});
   const tableStyles = useStyles2(getAlertTableStyles);
diff --git a/public/app/features/alerting/unified/components/receivers/form/CloudCommonChannelSettings.tsx b/public/app/features/alerting/unified/components/receivers/form/CloudCommonChannelSettings.tsx
index fc8c56e5202..e12795ed122 100644
--- a/public/app/features/alerting/unified/components/receivers/form/CloudCommonChannelSettings.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/CloudCommonChannelSettings.tsx
@@ -1,15 +1,15 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { Checkbox, Field } from '@grafana/ui';
 
 import { CommonSettingsComponentProps } from '../../../types/receiver-form';
 
-export const CloudCommonChannelSettings: FC<CommonSettingsComponentProps> = ({
+export const CloudCommonChannelSettings = ({
   pathPrefix,
   className,
   readOnly = false,
-}) => {
+}: CommonSettingsComponentProps) => {
   const { register } = useFormContext();
   return (
     <div className={className}>
diff --git a/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
index 87549586611..6ddd89024bb 100644
--- a/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { Alert } from '@grafana/ui';
 import { AlertManagerCortexConfig, Receiver } from 'app/plugins/datasource/alertmanager/types';
@@ -32,7 +32,7 @@ const defaultChannelValues: CloudChannelValues = Object.freeze({
   type: 'email',
 });
 
-export const CloudReceiverForm: FC<Props> = ({ existing, alertManagerSourceName, config }) => {
+export const CloudReceiverForm = ({ existing, alertManagerSourceName, config }: Props) => {
   const dispatch = useDispatch();
   const isVanillaAM = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
 
diff --git a/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx b/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
index 527337ee02e..bd1d2d1fb55 100644
--- a/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
@@ -1,15 +1,15 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { Checkbox, Field } from '@grafana/ui';
 
 import { CommonSettingsComponentProps } from '../../../types/receiver-form';
 
-export const GrafanaCommonChannelSettings: FC<CommonSettingsComponentProps> = ({
+export const GrafanaCommonChannelSettings = ({
   pathPrefix,
   className,
   readOnly = false,
-}) => {
+}: CommonSettingsComponentProps) => {
   const { register } = useFormContext();
   return (
     <div className={className}>
diff --git a/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
index cfba5c26548..e68361c2be0 100644
--- a/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { LoadingPlaceholder } from '@grafana/ui';
 import {
@@ -44,7 +44,7 @@ const defaultChannelValues: GrafanaChannelValues = Object.freeze({
   type: 'email',
 });
 
-export const GrafanaReceiverForm: FC<Props> = ({ existing, alertManagerSourceName, config }) => {
+export const GrafanaReceiverForm = ({ existing, alertManagerSourceName, config }: Props) => {
   const grafanaNotifiers = useUnifiedAlertingSelector((state) => state.grafanaNotifiers);
   const [testChannelValues, setTestChannelValues] = useState<GrafanaChannelValues>();
 
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
index 4bf2dda0b50..2c1eebceb9b 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/KeyValueMapInput.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Input, useStyles2 } from '@grafana/ui';
@@ -12,7 +12,7 @@ interface Props {
   onChange: (value: Record<string, string>) => void;
 }
 
-export const KeyValueMapInput: FC<Props> = ({ value, onChange, readOnly = false }) => {
+export const KeyValueMapInput = ({ value, onChange, readOnly = false }: Props) => {
   const styles = useStyles2(getStyles);
   const [pairs, setPairs] = useState(recordToPairs(value));
   useEffect(() => setPairs(recordToPairs(value)), [value]);
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx
index a752fea4482..3d35b333690 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/StringArrayInput.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Input, useStyles2 } from '@grafana/ui';
@@ -12,7 +12,7 @@ interface Props {
   onChange: (value: string[]) => void;
 }
 
-export const StringArrayInput: FC<Props> = ({ value, onChange, readOnly = false }) => {
+export const StringArrayInput = ({ value, onChange, readOnly = false }: Props) => {
   const styles = useStyles2(getStyles);
 
   const deleteItem = (index: number) => {
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx
index 103b35f8563..efb11ca8684 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/SubformArrayField.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { FieldError, DeepMap, useFormContext } from 'react-hook-form';
 
 import { Button, useStyles2 } from '@grafana/ui';
@@ -19,7 +19,7 @@ interface Props {
   readOnly?: boolean;
 }
 
-export const SubformArrayField: FC<Props> = ({ option, pathPrefix, errors, defaultValues, readOnly = false }) => {
+export const SubformArrayField = ({ option, pathPrefix, errors, defaultValues, readOnly = false }: Props) => {
   const styles = useStyles2(getReceiverFormFieldStyles);
   const path = `${pathPrefix}${option.propertyName}`;
   const formAPI = useFormContext();
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/SubformField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/SubformField.tsx
index 626c859cb57..bcc323f6d12 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/SubformField.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/SubformField.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { FieldError, DeepMap, useFormContext } from 'react-hook-form';
 
 import { Button, useStyles2 } from '@grafana/ui';
@@ -17,7 +17,7 @@ interface Props {
   readOnly?: boolean;
 }
 
-export const SubformField: FC<Props> = ({ option, pathPrefix, errors, defaultValue, readOnly = false }) => {
+export const SubformField = ({ option, pathPrefix, errors, defaultValue, readOnly = false }: Props) => {
   const styles = useStyles2(getReceiverFormFieldStyles);
   const name = `${pathPrefix}${option.propertyName}`;
   const { watch } = useFormContext();
diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
index 0e7a6c485a2..92680cac669 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { DeepMap, FieldError, FormProvider, useForm, useFormContext, UseFormWatch } from 'react-hook-form';
 import { Link } from 'react-router-dom';
 
@@ -73,7 +73,7 @@ type Props = {
   prefill?: Partial<RuleFormValues>; // Existing implies we modify existing rule. Prefill only provides default form values
 };
 
-export const AlertRuleForm: FC<Props> = ({ existing, prefill }) => {
+export const AlertRuleForm = ({ existing, prefill }: Props) => {
   const styles = useStyles2(getStyles);
   const dispatch = useDispatch();
   const notifyApp = useAppNotification();
diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx
index f9c433ce397..864ddacb515 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationKeyInput.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 
@@ -16,7 +16,7 @@ interface Props {
   'aria-label'?: string;
 }
 
-export const AnnotationKeyInput: FC<Props> = ({ value, existingKeys, 'aria-label': ariaLabel, ...rest }) => {
+export const AnnotationKeyInput = ({ value, existingKeys, 'aria-label': ariaLabel, ...rest }: Props) => {
   const annotationOptions = useMemo(
     (): SelectableValue[] =>
       Object.values(Annotation)
diff --git a/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
index a803455386d..efef4b38119 100644
--- a/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { noop } from 'lodash';
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useAsync } from 'react-use';
 
 import { CoreApp, DataQuery, DataSourcePluginContextProvider, GrafanaTheme2, LoadingState } from '@grafana/data';
@@ -19,12 +19,12 @@ export interface ExpressionEditorProps {
   showPreviewAlertsButton: boolean;
 }
 
-export const ExpressionEditor: FC<ExpressionEditorProps> = ({
+export const ExpressionEditor = ({
   value,
   onChange,
   dataSourceName,
   showPreviewAlertsButton = true,
-}) => {
+}: ExpressionEditorProps) => {
   const styles = useStyles2(getStyles);
 
   const { mapToValue, mapToQuery } = useQueryMappers(dataSourceName);
diff --git a/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
index ea09e7761a7..365e4f66ba9 100644
--- a/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { PanelData } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -21,7 +21,7 @@ interface Props {
   onUpdateQueryExpression: (query: ExpressionQuery) => void;
 }
 
-export const ExpressionsEditor: FC<Props> = ({
+export const ExpressionsEditor = ({
   condition,
   onSetCondition,
   queries,
@@ -30,7 +30,7 @@ export const ExpressionsEditor: FC<Props> = ({
   onRemoveExpression,
   onUpdateExpressionType,
   onUpdateQueryExpression,
-}) => {
+}: Props) => {
   const expressionQueries = useMemo(() => {
     return queries.reduce((acc: ExpressionQuery[], query) => {
       return isExpressionQuery(query.model) ? acc.concat(query.model) : acc;
diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
index 291152e3104..ee732387de3 100644
--- a/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
@@ -17,7 +17,7 @@ const options: SelectableValue[] = [
   { value: GrafanaAlertStateDecision.Error, label: 'Error' },
 ];
 
-export const GrafanaAlertStatePicker: FC<Props> = ({ includeNoData, includeError, ...props }) => {
+export const GrafanaAlertStatePicker = ({ includeNoData, includeError, ...props }: Props) => {
   const opts = useMemo(() => {
     if (!includeNoData) {
       return options.filter((opt) => opt.value !== GrafanaAlertStateDecision.NoData);
diff --git a/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
index d49c6f46ab2..6c4497b9119 100644
--- a/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
@@ -16,7 +16,7 @@ interface Props {
   rulesSourceName: string;
 }
 
-export const GroupAndNamespaceFields: FC<Props> = ({ rulesSourceName }) => {
+export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
   const {
     control,
     watch,
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
index e733f807e62..dc52b018fd9 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, PanelData } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -18,7 +18,7 @@ interface Props {
   onSetCondition: (refId: string) => void;
 }
 
-export const QueryEditor: FC<Props> = ({
+export const QueryEditor = ({
   queries,
   expressions,
   panelData,
@@ -27,7 +27,7 @@ export const QueryEditor: FC<Props> = ({
   onDuplicateQuery,
   condition,
   onSetCondition,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
index 37154731ce3..25232791e3b 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { cloneDeep } from 'lodash';
-import React, { ChangeEvent, FC, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 
 import {
   CoreApp,
@@ -60,7 +60,7 @@ interface Props {
   onChangeQueryOptions: (options: AlertQueryOptions, index: number) => void;
 }
 
-export const QueryWrapper: FC<Props> = ({
+export const QueryWrapper = ({
   data,
   error,
   dsSettings,
@@ -79,7 +79,7 @@ export const QueryWrapper: FC<Props> = ({
   condition,
   onSetCondition,
   onChangeQueryOptions,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
   const isExpression = isExpressionQuery(query.model);
   const [pluginId, changePluginId] = useState<SupportedPanelPlugins>(isExpression ? TABLE : TIMESERIES);
diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx
index 52828b993a2..48ea6c18f35 100644
--- a/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/RuleInspector.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { dump, load } from 'js-yaml';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -22,7 +22,7 @@ interface Props {
 
 const tabs = [{ label: 'Yaml', value: 'yaml' }];
 
-export const RuleInspector: FC<Props> = ({ onClose }) => {
+export const RuleInspector = ({ onClose }: Props) => {
   const [activeTab, setActiveTab] = useState('yaml');
   const { setValue } = useFormContext<RuleFormValues>();
   const styles = useStyles2(drawerStyles);
@@ -57,7 +57,7 @@ interface SubtitleProps {
   setActiveTab: (tab: string) => void;
 }
 
-const RuleInspectorSubtitle: FC<SubtitleProps> = ({ activeTab, setActiveTab }) => {
+const RuleInspectorSubtitle = ({ activeTab, setActiveTab }: SubtitleProps) => {
   return (
     <TabsBar>
       {tabs.map((tab, index) => {
@@ -79,7 +79,7 @@ interface YamlTabProps {
   onSubmit: (newModel: RuleFormValues) => void;
 }
 
-const InspectorYamlTab: FC<YamlTabProps> = ({ onSubmit }) => {
+const InspectorYamlTab = ({ onSubmit }: YamlTabProps) => {
   const styles = useStyles2(yamlTabStyle);
   const { getValues } = useFormContext<RuleFormValues>();
 
diff --git a/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx b/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
index 9cb999d6903..8bc85bc91b6 100644
--- a/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Input, Select } from '@grafana/ui';
@@ -18,7 +18,7 @@ interface Props {
   getOptionLabel?: ((item: SelectableValue<string>) => React.ReactNode) | undefined;
 }
 
-export const SelectWithAdd: FC<Props> = ({
+export const SelectWithAdd = ({
   value,
   onChange,
   options,
@@ -31,7 +31,7 @@ export const SelectWithAdd: FC<Props> = ({
   addLabel = '+ Add new',
   'aria-label': ariaLabel,
   getOptionLabel,
-}) => {
+}: Props) => {
   const [isCustom, setIsCustom] = useState(custom);
 
   useEffect(() => {
diff --git a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
index 2a4d841f10b..91c9585f953 100644
--- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { FieldConfigSource, GrafanaTheme2, PanelData, ThresholdsConfig } from '@grafana/data';
@@ -23,13 +23,13 @@ interface Props {
 
 type PanelFieldConfig = FieldConfigSource<GraphFieldConfig>;
 
-export const VizWrapper: FC<Props> = ({
+export const VizWrapper = ({
   data,
   currentPanel,
   changePanel,
   thresholds,
   thresholdsType = GraphTresholdsStyleMode.Line,
-}) => {
+}: Props) => {
   const [options, setOptions] = useState<PanelOptions>({
     frameIndex: 0,
     showHeader: true,
diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/AlertType.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/AlertType.tsx
index f406b94855d..870dfaafc9a 100644
--- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/AlertType.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/AlertType.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
@@ -15,7 +15,7 @@ interface Props {
   editingExistingRule: boolean;
 }
 
-export const AlertType: FC<Props> = ({ editingExistingRule }) => {
+export const AlertType = ({ editingExistingRule }: Props) => {
   const { enabledRuleTypes, defaultRuleType } = getAvailableRuleTypes();
 
   const {
diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
index 4b426163f84..4b26d63f4a8 100644
--- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { LoadingState, PanelData } from '@grafana/data';
@@ -38,7 +38,7 @@ interface Props {
   onDataChange: (error: string) => void;
 }
 
-export const QueryAndExpressionsStep: FC<Props> = ({ editingExistingRule, onDataChange }) => {
+export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: Props) => {
   const runner = useRef(new AlertingQueryRunner());
   const {
     setValue,
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/GrafanaManagedAlert.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/GrafanaManagedAlert.tsx
index 2826b7910f3..ce10238a329 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/GrafanaManagedAlert.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/GrafanaManagedAlert.tsx
@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { RuleFormType } from '../../../types/rule-form';
 
 import { RuleType, SharedProps } from './RuleType';
 
-const GrafanaManagedRuleType: FC<SharedProps> = ({ selected = false, disabled, onClick }) => {
+const GrafanaManagedRuleType = ({ selected = false, disabled, onClick }: SharedProps) => {
   return (
     <RuleType
       name="Grafana managed alert"
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiAlert.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiAlert.tsx
index 9bab434ac87..652fc9b8a20 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiAlert.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiAlert.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { RuleFormType } from '../../../types/rule-form';
 
@@ -9,7 +9,7 @@ interface Props extends SharedProps {
   onClick: (value: RuleFormType) => void;
 }
 
-const MimirFlavoredType: FC<Props> = ({ selected = false, disabled = false, onClick }) => {
+const MimirFlavoredType = ({ selected = false, disabled = false, onClick }: Props) => {
   return (
     <DisabledTooltip visible={disabled}>
       <RuleType
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiRecordingRule.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiRecordingRule.tsx
index b1ec4dfb82f..0f16884199b 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiRecordingRule.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/MimirOrLokiRecordingRule.tsx
@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { RuleFormType } from '../../../types/rule-form';
 
 import { DisabledTooltip } from './DisabledTooltip';
 import { RuleType, SharedProps } from './RuleType';
 
-const RecordingRuleType: FC<SharedProps> = ({ selected = false, disabled = false, onClick }) => {
+const RecordingRuleType = ({ selected = false, disabled = false, onClick }: SharedProps) => {
   return (
     <DisabledTooltip visible={disabled}>
       <RuleType
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
index 163af5695e8..ba0ba6b8e10 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Card, useStyles2 } from '@grafana/ui';
@@ -20,7 +20,7 @@ export interface SharedProps {
   onClick: (value: RuleFormType) => void;
 }
 
-const RuleType: FC<Props> = (props) => {
+const RuleType = (props: Props) => {
   const { name, description, image, selected = false, value, onClick, disabled = false } = props;
   const styles = useStyles2(getStyles);
 
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
index f92f1973e86..b0ddea16b8b 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { isEmpty } from 'lodash';
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { Stack } from '@grafana/experimental';
@@ -21,7 +21,7 @@ interface RuleTypePickerProps {
   enabledTypes: RuleFormType[];
 }
 
-const RuleTypePicker: FC<RuleTypePickerProps> = ({ selected, onChange, enabledTypes }) => {
+const RuleTypePicker = ({ selected, onChange, enabledTypes }: RuleTypePickerProps) => {
   const rulesSourcesWithRuler = useRulesSourcesWithRuler();
   const hasLotexDatasources = !isEmpty(rulesSourcesWithRuler);
 
diff --git a/public/app/features/alerting/unified/components/rules/ActionButton.tsx b/public/app/features/alerting/unified/components/rules/ActionButton.tsx
index fafa85c2ecf..43222f3d084 100644
--- a/public/app/features/alerting/unified/components/rules/ActionButton.tsx
+++ b/public/app/features/alerting/unified/components/rules/ActionButton.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -7,7 +7,7 @@ import { Button, ButtonProps } from '@grafana/ui/src/components/Button';
 
 type Props = Omit<ButtonProps, 'variant' | 'size'>;
 
-export const ActionButton: FC<Props> = ({ className, ...restProps }) => {
+export const ActionButton = ({ className, ...restProps }: Props) => {
   const styles = useStyles2(getStyle);
   return <Button variant="secondary" size="xs" className={cx(styles.wrapper, className)} {...restProps} />;
 };
diff --git a/public/app/features/alerting/unified/components/rules/ActionIcon.tsx b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
index 8eb72d2c768..355f9883f07 100644
--- a/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
+++ b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { IconName, Tooltip, LinkButton, Button } from '@grafana/ui';
 import { PopoverContent, TooltipPlacement } from '@grafana/ui/src/components/Tooltip';
@@ -14,7 +14,7 @@ interface Props {
   'data-testid'?: string;
 }
 
-export const ActionIcon: FC<Props> = ({
+export const ActionIcon = ({
   tooltip,
   icon,
   to,
@@ -23,7 +23,7 @@ export const ActionIcon: FC<Props> = ({
   className,
   tooltipPlacement = 'top',
   ...rest
-}) => {
+}: Props) => {
   const ariaLabel = typeof tooltip === 'string' ? tooltip : undefined;
 
   return (
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx b/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx
index bdd04cc65f8..c680e46ce86 100644
--- a/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Alert } from 'app/types/unified-alerting';
 
@@ -10,7 +10,7 @@ interface Props {
   instance: Alert;
 }
 
-export const AlertInstanceDetails: FC<Props> = ({ instance }) => {
+export const AlertInstanceDetails = ({ instance }: Props) => {
   const annotations = useCleanAnnotations(instance.annotations);
   const annotationLinks = useAnnotationLinks(annotations);
 
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
index 22c5faf9e03..38cbaefef2b 100644
--- a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { dateTime } from '@grafana/data';
 import { Alert, PaginationProps } from 'app/types/unified-alerting';
@@ -19,7 +19,7 @@ interface Props {
 type AlertTableColumnProps = DynamicTableColumnProps<Alert>;
 type AlertTableItemProps = DynamicTableItemProps<Alert>;
 
-export const AlertInstancesTable: FC<Props> = ({ instances, pagination, footerRow }) => {
+export const AlertInstancesTable = ({ instances, pagination, footerRow }: Props) => {
   const items = useMemo(
     (): AlertTableItemProps[] =>
       instances.map((instance) => ({
diff --git a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
index 8b37765405a..0a2ac6281d7 100644
--- a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { AlertState } from '@grafana/data';
 import { GrafanaAlertState, GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
@@ -11,7 +11,7 @@ interface Props {
   isPaused?: boolean;
 }
 
-export const AlertStateTag: FC<Props> = ({ state, isPaused = false, size = 'md' }) => (
+export const AlertStateTag = ({ state, isPaused = false, size = 'md' }: Props) => (
   <StateTag state={alertStateToState(state)} size={size}>
     {alertStateToReadable(state)} {isPaused ? ' (Paused)' : ''}
   </StateTag>
diff --git a/public/app/features/alerting/unified/components/rules/CloudRules.tsx b/public/app/features/alerting/unified/components/rules/CloudRules.tsx
index e4428669e41..7af1effd673 100644
--- a/public/app/features/alerting/unified/components/rules/CloudRules.tsx
+++ b/public/app/features/alerting/unified/components/rules/CloudRules.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import pluralize from 'pluralize';
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { LoadingPlaceholder, Pagination, Spinner, useStyles2 } from '@grafana/ui';
@@ -21,7 +21,7 @@ interface Props {
   expandAll: boolean;
 }
 
-export const CloudRules: FC<Props> = ({ namespaces, expandAll }) => {
+export const CloudRules = ({ namespaces, expandAll }: Props) => {
   const styles = useStyles2(getStyles);
 
   const dsConfigs = useUnifiedAlertingSelector((state) => state.dataSources);
diff --git a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
index c8a8e4f0943..5294d4a5512 100644
--- a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
+++ b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { LoadingPlaceholder, Pagination, Spinner, useStyles2 } from '@grafana/ui';
@@ -22,7 +22,7 @@ interface Props {
   expandAll: boolean;
 }
 
-export const GrafanaRules: FC<Props> = ({ namespaces, expandAll }) => {
+export const GrafanaRules = ({ namespaces, expandAll }: Props) => {
   const styles = useStyles2(getStyles);
   const [queryParams] = useQueryParams();
 
diff --git a/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx b/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx
index 439ed416cca..e720ec9d8fb 100644
--- a/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx
+++ b/public/app/features/alerting/unified/components/rules/ReorderRuleGroupModal.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import cx from 'classnames';
 import { compact } from 'lodash';
-import React, { FC, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   DragDropContext,
   Draggable,
@@ -31,7 +31,7 @@ interface ModalProps {
 
 type CombinedRuleWithUID = { uid: string } & CombinedRule;
 
-export const ReorderCloudGroupModal: FC<ModalProps> = (props) => {
+export const ReorderCloudGroupModal = (props: ModalProps) => {
   const { group, namespace, onClose } = props;
   const [pending, setPending] = useState<boolean>(false);
   const [rulesList, setRulesList] = useState<CombinedRule[]>(group.rules);
@@ -145,7 +145,7 @@ interface ModalHeaderProps {
   group: CombinedRuleGroup;
 }
 
-const ModalHeader: FC<ModalHeaderProps> = ({ namespace, group }) => {
+const ModalHeader = ({ namespace, group }: ModalHeaderProps) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
index e912a06f172..b8f7dd8efce 100644
--- a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -26,7 +26,7 @@ interface Props {
   rulesSource: RulesSource;
 }
 
-export const RuleActionsButtons: FC<Props> = ({ rule, rulesSource }) => {
+export const RuleActionsButtons = ({ rule, rulesSource }: Props) => {
   const dispatch = useDispatch();
   const location = useLocation();
   const notifyApp = useAppNotification();
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
index 12be8188293..7d02c0b036d 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -25,7 +25,7 @@ interface Props {
 // We don't want to paginate the instances list on the alert list page
 const INSTANCES_DISPLAY_LIMIT = 15;
 
-export const RuleDetails: FC<Props> = ({ rule }) => {
+export const RuleDetails = ({ rule }: Props) => {
   const styles = useStyles2(getStyles);
   const {
     namespace: { rulesSource },
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
index f66b3eab7b7..5e52b6f28f0 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, Fragment, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2, textUtil, urlUtil } from '@grafana/data';
@@ -34,7 +34,7 @@ interface Props {
   isViewMode: boolean;
 }
 
-export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource, isViewMode }) => {
+export const RuleDetailsActionButtons = ({ rule, rulesSource, isViewMode }: Props) => {
   const style = useStyles2(getStyles);
   const { namespace, group, rulerRule } = rule;
   const alertId = isGrafanaRulerRule(rule.rulerRule) ? rule.rulerRule.grafana_alert.id ?? '' : '';
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsFederatedSources.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsFederatedSources.tsx
index b0cd5ecfc0f..ab1304c2fee 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetailsFederatedSources.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsFederatedSources.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { CombinedRuleGroup } from 'app/types/unified-alerting';
 
@@ -8,7 +8,7 @@ interface Props {
   group: CombinedRuleGroup;
 }
 
-const RuleDetailsFederatedSources: FC<Props> = ({ group }) => {
+const RuleDetailsFederatedSources = ({ group }: Props) => {
   const sourceTenants = group.source_tenants ?? [];
 
   return (
diff --git a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
index 5e157d7d5ed..8016e5f255c 100644
--- a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
@@ -9,7 +9,7 @@ interface Prom {
   rule: Rule;
 }
 
-export const RuleHealth: FC<Prom> = ({ rule }) => {
+export const RuleHealth = ({ rule }: Prom) => {
   const style = useStyles2(getStyle);
 
   if (rule.health === 'err' || rule.health === 'error') {
diff --git a/public/app/features/alerting/unified/components/rules/RuleListGroupView.tsx b/public/app/features/alerting/unified/components/rules/RuleListGroupView.tsx
index 95b183973fc..8a124e121e2 100644
--- a/public/app/features/alerting/unified/components/rules/RuleListGroupView.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleListGroupView.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { logInfo } from '@grafana/runtime';
 import { AccessControlAction } from 'app/types';
@@ -16,7 +16,7 @@ interface Props {
   expandAll: boolean;
 }
 
-export const RuleListGroupView: FC<Props> = ({ namespaces, expandAll }) => {
+export const RuleListGroupView = ({ namespaces, expandAll }: Props) => {
   const [grafanaNamespaces, cloudNamespaces] = useMemo(() => {
     const sorted = namespaces
       .map((namespace) => ({
diff --git a/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx b/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx
index cc8aec8d859..d5c2d305272 100644
--- a/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleListStateSection.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -17,7 +17,7 @@ interface Props {
   defaultCollapsed?: boolean;
 }
 
-export const RuleListStateSection: FC<Props> = ({ rules, state, defaultCollapsed = false }) => {
+export const RuleListStateSection = ({ rules, state, defaultCollapsed = false }: Props) => {
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const styles = useStyles2(getStyles);
   return (
diff --git a/public/app/features/alerting/unified/components/rules/RuleListStateView.tsx b/public/app/features/alerting/unified/components/rules/RuleListStateView.tsx
index 3f5242cb5ed..f3f6022d3e8 100644
--- a/public/app/features/alerting/unified/components/rules/RuleListStateView.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleListStateView.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { CombinedRule, CombinedRuleNamespace } from 'app/types/unified-alerting';
@@ -16,7 +16,7 @@ interface Props {
 
 type GroupedRules = Record<PromAlertingRuleState, CombinedRule[]>;
 
-export const RuleListStateView: FC<Props> = ({ namespaces }) => {
+export const RuleListStateView = ({ namespaces }: Props) => {
   const filters = getFiltersFromUrlParams(useQueryParams()[0]);
 
   const groupedRules = useMemo(() => {
diff --git a/public/app/features/alerting/unified/components/rules/RuleState.tsx b/public/app/features/alerting/unified/components/rules/RuleState.tsx
index 017557fc634..922d674a35d 100644
--- a/public/app/features/alerting/unified/components/rules/RuleState.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleState.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
 import { HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui';
@@ -17,7 +17,7 @@ interface Props {
   isPaused?: boolean;
 }
 
-export const RuleState: FC<Props> = ({ rule, isDeleting, isCreating, isPaused }) => {
+export const RuleState = ({ rule, isDeleting, isCreating, isPaused }: Props) => {
   const style = useStyles2(getStyle);
   const { promRule } = rule;
 
diff --git a/public/app/features/alerting/unified/components/rules/RuleStats.tsx b/public/app/features/alerting/unified/components/rules/RuleStats.tsx
index 7a104e44d93..11fb219cef5 100644
--- a/public/app/features/alerting/unified/components/rules/RuleStats.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleStats.tsx
@@ -1,5 +1,5 @@
 import pluralize from 'pluralize';
-import React, { FC, Fragment, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { Stack } from '@grafana/experimental';
@@ -25,7 +25,7 @@ const emptyStats = {
   error: 0,
 } as const;
 
-export const RuleStats: FC<Props> = ({ group, namespaces, includeTotal }) => {
+export const RuleStats = ({ group, namespaces, includeTotal }: Props) => {
   const evaluationInterval = group?.interval;
   const [calculated, setCalculated] = useState(emptyStats);
 
diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
index a955e7fcf4c..5daa1edcfe2 100644
--- a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import pluralize from 'pluralize';
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -35,7 +35,7 @@ interface Props {
   viewMode: ViewMode;
 }
 
-export const RulesGroup: FC<Props> = React.memo(({ group, namespace, expandAll, viewMode }) => {
+export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }: Props) => {
   const { rulesSource } = namespace;
   const dispatch = useDispatch();
   const styles = useStyles2(getStyles);
diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
index 25fb1dc5f91..7daf6b95ebb 100644
--- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -33,14 +33,14 @@ interface Props {
   className?: string;
 }
 
-export const RulesTable: FC<Props> = ({
+export const RulesTable = ({
   rules,
   className,
   showGuidelines = false,
   emptyMessage = 'No rules found.',
   showGroupColumn = false,
   showSummaryColumn = false,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   const wrapperClass = cx(styles.wrapper, className, { [styles.wrapperMargin]: showGuidelines });
diff --git a/public/app/features/alerting/unified/components/rules/StateHistory.tsx b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
index e46f6f92f7c..e484cb412e3 100644
--- a/public/app/features/alerting/unified/components/rules/StateHistory.tsx
+++ b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { groupBy } from 'lodash';
-import React, { FC, FormEvent, useCallback, useState } from 'react';
+import React, { FormEvent, useCallback, useState } from 'react';
 
 import { AlertState, dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -27,11 +27,11 @@ type StateHistoryMap = Record<string, StateHistoryRowItem[]>;
 
 type StateHistoryRow = DynamicTableItemProps<StateHistoryRowItem>;
 
-interface RuleStateHistoryProps {
+interface Props {
   alertId: string;
 }
 
-const StateHistory: FC<RuleStateHistoryProps> = ({ alertId }) => {
+const StateHistory = ({ alertId }: Props) => {
   const [textFilter, setTextFilter] = useState<string>('');
   const handleTextFilter = useCallback((event: FormEvent<HTMLInputElement>) => {
     setTextFilter(event.currentTarget.value);
diff --git a/public/app/features/alerting/unified/components/silences/AmAlertStateTag.tsx b/public/app/features/alerting/unified/components/silences/AmAlertStateTag.tsx
index 96493b0b5ec..acc02a02d74 100644
--- a/public/app/features/alerting/unified/components/silences/AmAlertStateTag.tsx
+++ b/public/app/features/alerting/unified/components/silences/AmAlertStateTag.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { AlertState } from 'app/plugins/datasource/alertmanager/types';
 
@@ -14,4 +14,4 @@ interface Props {
   state: AlertState;
 }
 
-export const AmAlertStateTag: FC<Props> = ({ state }) => <StateTag state={alertStateToState[state]}>{state}</StateTag>;
+export const AmAlertStateTag = ({ state }: Props) => <StateTag state={alertStateToState[state]}>{state}</StateTag>;
diff --git a/public/app/features/alerting/unified/components/silences/Matchers.tsx b/public/app/features/alerting/unified/components/silences/Matchers.tsx
index f5b9674817e..4a516f1aa83 100644
--- a/public/app/features/alerting/unified/components/silences/Matchers.tsx
+++ b/public/app/features/alerting/unified/components/silences/Matchers.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { TagList, useStyles2 } from '@grafana/ui';
 import { Matcher } from 'app/plugins/datasource/alertmanager/types';
@@ -8,7 +8,7 @@ import { matcherToOperator } from '../../utils/alertmanager';
 
 type MatchersProps = { matchers: Matcher[] };
 
-export const Matchers: FC<MatchersProps> = ({ matchers }) => {
+export const Matchers = ({ matchers }: MatchersProps) => {
   const styles = useStyles2(getStyles);
   return (
     <div>
diff --git a/public/app/features/alerting/unified/components/silences/MatchersField.tsx b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
index 7a2b78f47af..6fb4883a048 100644
--- a/public/app/features/alerting/unified/components/silences/MatchersField.tsx
+++ b/public/app/features/alerting/unified/components/silences/MatchersField.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -13,7 +13,7 @@ interface Props {
   className?: string;
 }
 
-const MatchersField: FC<Props> = ({ className }) => {
+const MatchersField = ({ className }: Props) => {
   const styles = useStyles2(getStyles);
   const formApi = useFormContext<SilenceFormFields>();
   const {
diff --git a/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx b/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
index b5fa0a877a0..3e4bbb4595d 100644
--- a/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
+++ b/public/app/features/alerting/unified/components/silences/NoSilencesCTA.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { CallToActionCard } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
@@ -11,7 +11,7 @@ type Props = {
   alertManagerSourceName: string;
 };
 
-export const NoSilencesSplash: FC<Props> = ({ alertManagerSourceName }) => {
+export const NoSilencesSplash = ({ alertManagerSourceName }: Props) => {
   const permissions = getInstancesPermissions(alertManagerSourceName);
 
   if (contextSrv.hasAccess(permissions.create, contextSrv.isEditor)) {
diff --git a/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx b/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
index fc36282db8c..4c7768e889e 100644
--- a/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilenceStateTag.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
 
@@ -14,6 +14,4 @@ interface Props {
   state: SilenceState;
 }
 
-export const SilenceStateTag: FC<Props> = ({ state }) => (
-  <StateTag state={silenceStateToState[state]}>{state}</StateTag>
-);
+export const SilenceStateTag = ({ state }: Props) => <StateTag state={silenceStateToState[state]}>{state}</StateTag>;
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
index 94b0d802d3b..9881f4b9615 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -13,7 +13,7 @@ interface Props {
   silencedAlerts: AlertmanagerAlert[];
 }
 
-const SilencedAlertsTable: FC<Props> = ({ silencedAlerts }) => {
+const SilencedAlertsTable = ({ silencedAlerts }: Props) => {
   const tableStyles = useStyles2(getAlertTableStyles);
   const styles = useStyles2(getStyles);
 
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
index 8396e48c3f9..e4b785659a3 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { intervalToAbbreviatedDurationString } from '@grafana/data';
 import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
@@ -13,7 +13,7 @@ interface Props {
   className?: string;
 }
 
-export const SilencedAlertsTableRow: FC<Props> = ({ alert, className }) => {
+export const SilencedAlertsTableRow = ({ alert, className }: Props) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   const duration = intervalToAbbreviatedDurationString({
diff --git a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
index 2c37eddfd47..3d1bb015b9d 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesEditor.tsx
@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { pickBy } from 'lodash';
-import React, { FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useDebounce } from 'react-use';
 
@@ -97,7 +97,7 @@ const getDefaultFormValues = (searchParams: URLSearchParams, silence?: Silence):
   }
 };
 
-export const SilencesEditor: FC<Props> = ({ silence, alertManagerSourceName }) => {
+export const SilencesEditor = ({ silence, alertManagerSourceName }: Props) => {
   const [urlSearchParams] = useURLSearchParams();
 
   const defaultValues = useMemo(() => getDefaultFormValues(urlSearchParams, silence), [silence, urlSearchParams]);
diff --git a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
index 3136835bbe4..379577cac70 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { GrafanaTheme2, dateMath } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -36,7 +36,7 @@ interface Props {
   alertManagerSourceName: string;
 }
 
-const SilencesTable: FC<Props> = ({ silences, alertManagerAlerts, alertManagerSourceName }) => {
+const SilencesTable = ({ silences, alertManagerAlerts, alertManagerSourceName }: Props) => {
   const styles = useStyles2(getStyles);
   const [queryParams] = useQueryParams();
   const filteredSilences = useFilteredSilences(silences);
diff --git a/public/app/features/api-keys/ApiKeysActionBar.tsx b/public/app/features/api-keys/ApiKeysActionBar.tsx
index 17642fe2b24..e4578abee4e 100644
--- a/public/app/features/api-keys/ApiKeysActionBar.tsx
+++ b/public/app/features/api-keys/ApiKeysActionBar.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { FilterInput } from '@grafana/ui';
 
@@ -8,7 +8,7 @@ interface Props {
   onSearchChange: (value: string) => void;
 }
 
-export const ApiKeysActionBar: FC<Props> = ({ searchQuery, disabled, onSearchChange }) => {
+export const ApiKeysActionBar = ({ searchQuery, disabled, onSearchChange }: Props) => {
   return (
     <div className="page-action-bar">
       <div className="gf-form gf-form--grow">
diff --git a/public/app/features/api-keys/ApiKeysTable.tsx b/public/app/features/api-keys/ApiKeysTable.tsx
index 2b39ed5edd0..cd5946fd67f 100644
--- a/public/app/features/api-keys/ApiKeysTable.tsx
+++ b/public/app/features/api-keys/ApiKeysTable.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { Button, DeleteButton, HorizontalGroup, Icon, Tooltip, useTheme2 } from '@grafana/ui';
@@ -15,7 +15,7 @@ interface Props {
   onMigrate: (apiKey: ApiKey) => void;
 }
 
-export const ApiKeysTable: FC<Props> = ({ apiKeys, timeZone, onDelete, onMigrate }) => {
+export const ApiKeysTable = ({ apiKeys, timeZone, onDelete, onMigrate }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
 
diff --git a/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx b/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx
index b8192b4285f..5de083b9d10 100644
--- a/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx
+++ b/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Card, useStyles2 } from '@grafana/ui';
@@ -45,7 +45,7 @@ export interface CardGridProps {
   onClickItem?: (e: React.MouseEvent<HTMLElement>, item: CardGridItem) => void;
 }
 
-export const CardGrid: FC<CardGridProps> = ({ items, onClickItem }) => {
+export const CardGrid = ({ items, onClickItem }: CardGridProps) => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/features/connections/tabs/ConnectData/NoResults/NoResults.tsx b/public/app/features/connections/tabs/ConnectData/NoResults/NoResults.tsx
index 92d80078744..43501a5bd47 100644
--- a/public/app/features/connections/tabs/ConnectData/NoResults/NoResults.tsx
+++ b/public/app/features/connections/tabs/ConnectData/NoResults/NoResults.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { useStyles2 } from '@grafana/ui';
 
@@ -11,7 +11,7 @@ const getStyles = () => ({
   `,
 });
 
-export const NoResults: FC = () => {
+export const NoResults = () => {
   const styles = useStyles2(getStyles);
 
   return <p className={styles.noResults}>No results matching your query were found.</p>;
diff --git a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
index 9a87edae572..d1c2678ca91 100644
--- a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Input, defaultIntervals, Field } from '@grafana/ui';
 
@@ -11,12 +11,12 @@ export interface Props {
   validateIntervalsFunc?: typeof validateIntervals;
 }
 
-export const AutoRefreshIntervals: FC<Props> = ({
+export const AutoRefreshIntervals = ({
   refreshIntervals,
   onRefreshIntervalChange,
   getIntervalsFunc = getValidIntervals,
   validateIntervalsFunc = validateIntervals,
-}) => {
+}: Props) => {
   const [intervals, setIntervals] = useState<string[]>(getIntervalsFunc(refreshIntervals ?? defaultIntervals));
   const [invalidIntervalsMessage, setInvalidIntervalsMessage] = useState<string | null>(null);
 
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index 0a829b79d22..ca2ea05c0e4 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, ReactNode, useCallback, useEffect, useState, useRef } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState, useRef } from 'react';
 import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -23,8 +23,18 @@ export interface OptionsPaneCategoryProps {
 
 const CATEGORY_PARAM_NAME = 'showCategory';
 
-export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
-  ({ id, title, children, forceOpen, isOpenDefault, renderTitle, className, itemsCount, isNested = false }) => {
+export const OptionsPaneCategory = React.memo(
+  ({
+    id,
+    title,
+    children,
+    forceOpen,
+    isOpenDefault,
+    renderTitle,
+    className,
+    itemsCount,
+    isNested = false,
+  }: OptionsPaneCategoryProps) => {
     const initialIsExpanded = isOpenDefault !== false;
     const [savedState, setSavedState] = useLocalStorage(getOptionGroupStorageKey(id), {
       isExpanded: initialIsExpanded,
diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
index 8ed390993fe..27ce86185b3 100644
--- a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
@@ -1,11 +1,11 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { FieldConfigOptionsRegistry, GrafanaTheme2, ConfigOverrideRule } from '@grafana/data';
 import { HorizontalGroup, Icon, IconButton, useStyles2 } from '@grafana/ui';
 import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';
 
-interface OverrideCategoryTitleProps {
+interface Props {
   isExpanded: boolean;
   registry: FieldConfigOptionsRegistry;
   matcherUi: FieldMatcherUIRegistryItem<any>;
@@ -13,14 +13,14 @@ interface OverrideCategoryTitleProps {
   overrideName: string;
   onOverrideRemove: () => void;
 }
-export const OverrideCategoryTitle: FC<OverrideCategoryTitleProps> = ({
+export const OverrideCategoryTitle = ({
   isExpanded,
   registry,
   matcherUi,
   overrideName,
   override,
   onOverrideRemove,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
   const properties = override.properties.map((p) => registry.getIfExists(p.id)).filter((prop) => !!prop);
   const propertyNames = properties.map((p) => p?.name).join(', ');
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.test.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.test.tsx
index e303ba5671a..28ec042494e 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.test.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTableView.test.tsx
@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React, { FC } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import { ReplaySubject } from 'rxjs';
@@ -12,7 +12,6 @@ import {
   LoadingState,
   PanelData,
   PanelPlugin,
-  PanelProps,
   TimeRange,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -235,4 +234,4 @@ describe('PanelEditorTableView', () => {
   });
 });
 
-const TestPanelComponent: FC<PanelProps> = () => <div>Plugin Panel to Render</div>;
+const TestPanelComponent = () => <div>Plugin Panel to Render</div>;
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index 6ad2716f83d..410f8522405 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Subscription } from 'rxjs';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -22,7 +22,7 @@ interface PanelEditorTabsProps {
   onChangeTab: (tab: PanelEditorTab) => void;
 }
 
-export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, dashboard, tabs, onChangeTab }) => {
+export const PanelEditorTabs = React.memo(({ panel, dashboard, tabs, onChangeTab }: PanelEditorTabsProps) => {
   const forceUpdate = useForceUpdate();
   const styles = useStyles2(getStyles);
 
diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
index a3d3afe39a5..5eac3c5caea 100644
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data';
@@ -25,7 +25,7 @@ interface Props {
   data?: PanelData;
 }
 
-export const VisualizationSelectPane: FC<Props> = ({ panel, data }) => {
+export const VisualizationSelectPane = ({ panel, data }: Props) => {
   const plugin = useSelector(getPanelPluginWithFallback(panel.type));
   const [searchQuery, setSearchQuery] = useState('');
   const [listMode, setListMode] = useLocalStorage(
diff --git a/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx b/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
index 129613330f7..1e79885c8a5 100644
--- a/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
+++ b/public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
@@ -12,7 +12,7 @@ export interface Props {
   onChange: (name: string | null) => void;
 }
 
-export const RepeatRowSelect: FC<Props> = ({ repeat, onChange, id }) => {
+export const RepeatRowSelect = ({ repeat, onChange, id }: Props) => {
   const variables = useSelector((state) => {
     return getVariablesByKey(getLastKey(state), state);
   });
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
index 67d653849b4..8f3427f39eb 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Icon, ModalsController } from '@grafana/ui';
 
@@ -11,7 +11,7 @@ export interface RowOptionsButtonProps {
   onUpdate: OnRowOptionsUpdate;
 }
 
-export const RowOptionsButton: FC<RowOptionsButtonProps> = ({ repeat, title, onUpdate }) => {
+export const RowOptionsButton = ({ repeat, title, onUpdate }: RowOptionsButtonProps) => {
   const onUpdateChange = (hideModal: () => void) => (title: string, repeat?: string | null) => {
     onUpdate(title, repeat);
     hideModal();
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
index 40b9aafaabb..52cab6a714b 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Button, Field, Form, Modal, Input } from '@grafana/ui';
 
@@ -13,7 +13,7 @@ export interface Props {
   onCancel: () => void;
 }
 
-export const RowOptionsForm: FC<Props> = ({ repeat, title, onUpdate, onCancel }) => {
+export const RowOptionsForm = ({ repeat, title, onUpdate, onCancel }: Props) => {
   const [newRepeat, setNewRepeat] = useState<string | null | undefined>(repeat);
   const onChangeRepeat = useCallback((name?: string | null) => setNewRepeat(name), [setNewRepeat]);
 
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
index 785d10f89f2..d0bdaf41daf 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Modal, stylesFactory } from '@grafana/ui';
 
@@ -12,7 +12,7 @@ export interface RowOptionsModalProps {
   onUpdate: OnRowOptionsUpdate;
 }
 
-export const RowOptionsModal: FC<RowOptionsModalProps> = ({ repeat, title, onDismiss, onUpdate }) => {
+export const RowOptionsModal = ({ repeat, title, onDismiss, onUpdate }: RowOptionsModalProps) => {
   const styles = getStyles();
   return (
     <Modal isOpen={true} title="Row options" icon="copy" onDismiss={onDismiss} className={styles.modal}>
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
index 3bad7086fda..115641d181b 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useEffectOnce } from 'react-use';
 
 import { sanitizeUrl } from '@grafana/data/src/text/sanitize';
@@ -18,7 +18,7 @@ export interface Props {
   links: DashboardLink[];
 }
 
-export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
+export const DashboardLinks = ({ dashboard, links }: Props) => {
   const forceUpdate = useForceUpdate();
 
   useEffectOnce(() => {
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
index 4d0c5c4f9c1..0151a2ec4a4 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, LoadingState } from '@grafana/data';
 import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
@@ -9,7 +9,7 @@ interface Props {
   onClick: () => void;
 }
 
-export const PanelHeaderLoadingIndicator: FC<Props> = ({ state, onClick }) => {
+export const PanelHeaderLoadingIndicator = ({ state, onClick }: Props) => {
   const styles = useStyles2(getStyles);
 
   if (state === LoadingState.Loading) {
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
index 05cf46d3510..0cdb5478ae3 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { PanelMenuItem, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -9,7 +9,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-export const PanelHeaderMenuItem: FC<Props & PanelMenuItem> = (props) => {
+export const PanelHeaderMenuItem = (props: Props & PanelMenuItem) => {
   const [ref, setRef] = useState<HTMLLIElement | null>(null);
   const isSubMenu = props.type === 'submenu';
   const isDivider = props.type === 'divider';
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
index a1f45f92f1f..9c394f0ee37 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, QueryResultMetaNotice } from '@grafana/data';
 import { Icon, ToolbarButton, Tooltip, useStyles2 } from '@grafana/ui';
@@ -10,7 +10,7 @@ interface Props {
   onClick: (e: React.SyntheticEvent, tab: string) => void;
 }
 
-export const PanelHeaderNotice: FC<Props> = ({ notice, onClick }) => {
+export const PanelHeaderNotice = ({ notice, onClick }: Props) => {
   const styles = useStyles2(getStyles);
 
   const iconName =
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx
index 76b98043de7..29f1222dc85 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { DataFrame, QueryResultMetaNotice } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
@@ -10,7 +10,7 @@ interface Props {
   frames: DataFrame[];
 }
 
-export const PanelHeaderNotices: FC<Props> = ({ frames, panelId }) => {
+export const PanelHeaderNotices = ({ frames, panelId }: Props) => {
   const openInspect = useCallback(
     (e: React.SyntheticEvent, tab: string) => {
       e.stopPropagation();
diff --git a/public/app/features/dashboard/dashgrid/PanelStateWrapper.test.tsx b/public/app/features/dashboard/dashgrid/PanelStateWrapper.test.tsx
index e5ebaf4a040..3a49af6701f 100644
--- a/public/app/features/dashboard/dashgrid/PanelStateWrapper.test.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelStateWrapper.test.tsx
@@ -1,10 +1,10 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React, { FC } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import { ReplaySubject } from 'rxjs';
 
-import { EventBusSrv, getDefaultTimeRange, LoadingState, PanelData, PanelPlugin, PanelProps } from '@grafana/data';
+import { EventBusSrv, getDefaultTimeRange, LoadingState, PanelData, PanelPlugin } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
@@ -141,4 +141,4 @@ describe('PanelStateWrapper', () => {
   });
 });
 
-const TestPanelComponent: FC<PanelProps> = () => <div>Plugin Panel to Render</div>;
+const TestPanelComponent = () => <div>Plugin Panel to Render</div>;
diff --git a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
index 23a20198103..7ddf1d91cd2 100644
--- a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { Select, ColorPicker, useStyles2 } from '@grafana/ui';
@@ -12,7 +12,7 @@ const fixedColorOption: SelectableValue<string> = {
   value: '_____fixed_____',
 };
 
-export const ColorDimensionEditor: FC<StandardEditorProps<ColorDimensionConfig>> = (props) => {
+export const ColorDimensionEditor = (props: StandardEditorProps<ColorDimensionConfig>) => {
   const { value, context, onChange } = props;
 
   const defaultColor = 'dark-green';
diff --git a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
index 80550e5c5bb..14dab9ba725 100644
--- a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
@@ -14,7 +14,7 @@ const fixedValueOption: SelectableValue<string> = {
   value: '_____fixed_____',
 };
 
-export const ScaleDimensionEditor: FC<StandardEditorProps<ScaleDimensionConfig, ScaleDimensionOptions>> = (props) => {
+export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionConfig, ScaleDimensionOptions>) => {
   const { value, context, onChange, item } = props;
   const { settings } = item;
   const styles = useStyles2(getStyles);
diff --git a/public/app/features/explore/ElapsedTime.tsx b/public/app/features/explore/ElapsedTime.tsx
index f0eea87e29a..cbe427b04af 100644
--- a/public/app/features/explore/ElapsedTime.tsx
+++ b/public/app/features/explore/ElapsedTime.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useInterval } from 'react-use';
 
 import { Time, TimeProps } from './Time';
@@ -11,7 +11,7 @@ export interface ElapsedTimeProps extends Omit<TimeProps, 'timeInMs'> {
   resetKey?: any;
 }
 
-export const ElapsedTime: FC<ElapsedTimeProps> = ({ resetKey, humanize, className }) => {
+export const ElapsedTime = ({ resetKey, humanize, className }: ElapsedTimeProps) => {
   const [elapsed, setElapsed] = useState(0); // the current value of elapsed
 
   // hook that will schedule a interval and then update the elapsed value on every tick.
diff --git a/public/app/features/explore/ExploreActions.tsx b/public/app/features/explore/ExploreActions.tsx
index f926f91ef1f..202d3ab74fa 100644
--- a/public/app/features/explore/ExploreActions.tsx
+++ b/public/app/features/explore/ExploreActions.tsx
@@ -1,5 +1,5 @@
 import { useRegisterActions, useKBar, Action, Priority } from 'kbar';
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { ExploreId, useDispatch, useSelector } from 'app/types';
 
@@ -12,7 +12,7 @@ interface Props {
   exploreIdRight?: ExploreId;
 }
 
-export const ExploreActions: FC<Props> = ({ exploreIdLeft, exploreIdRight }: Props) => {
+export const ExploreActions = ({ exploreIdLeft, exploreIdRight }: Props) => {
   const [actions, setActions] = useState<Action[]>([]);
   const { query } = useKBar();
   const dispatch = useDispatch();
diff --git a/public/app/features/explore/Time.tsx b/public/app/features/explore/Time.tsx
index 3f61de8d416..b4d75eb79d9 100644
--- a/public/app/features/explore/Time.tsx
+++ b/public/app/features/explore/Time.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { toDuration } from '@grafana/data';
 
@@ -8,7 +8,7 @@ export interface TimeProps {
   humanize?: boolean;
 }
 
-export const Time: FC<TimeProps> = ({ timeInMs, className, humanize }) => {
+export const Time = ({ timeInMs, className, humanize }: TimeProps) => {
   return <span className={className}>{formatTime(timeInMs, humanize)}</span>;
 };
 
diff --git a/public/app/features/expressions/components/ClassicConditions.tsx b/public/app/features/expressions/components/ClassicConditions.tsx
index 3b7c8805ef4..cc4d95e5d04 100644
--- a/public/app/features/expressions/components/ClassicConditions.tsx
+++ b/public/app/features/expressions/components/ClassicConditions.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Button, Icon, InlineField, InlineFieldRow } from '@grafana/ui';
@@ -14,7 +14,7 @@ interface Props {
   onChange: (query: ExpressionQuery) => void;
 }
 
-export const ClassicConditions: FC<Props> = ({ onChange, query, refIds }) => {
+export const ClassicConditions = ({ onChange, query, refIds }: Props) => {
   const onConditionChange = (condition: ClassicCondition, index: number) => {
     if (query.conditions) {
       onChange({
diff --git a/public/app/features/expressions/components/Math.tsx b/public/app/features/expressions/components/Math.tsx
index d6bf9eeab5a..89fe8478635 100644
--- a/public/app/features/expressions/components/Math.tsx
+++ b/public/app/features/expressions/components/Math.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { ChangeEvent, FC } from 'react';
+import React, { ChangeEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -19,7 +19,7 @@ const mathPlaceholder =
   'Math operations on one or more queries. You reference the query by ${refId} ie. $A, $B, $C etc\n' +
   'The sum of two scalar values: $A + $B > 10';
 
-export const Math: FC<Props> = ({ labelWidth, onChange, query, onRunQuery }) => {
+export const Math = ({ labelWidth, onChange, query, onRunQuery }: Props) => {
   const onExpressionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange({ ...query, expression: event.target.value });
   };
diff --git a/public/app/features/expressions/components/Reduce.tsx b/public/app/features/expressions/components/Reduce.tsx
index 58eda776162..30255772de4 100644
--- a/public/app/features/expressions/components/Reduce.tsx
+++ b/public/app/features/expressions/components/Reduce.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
@@ -12,7 +12,7 @@ interface Props {
   onChange: (query: ExpressionQuery) => void;
 }
 
-export const Reduce: FC<Props> = ({ labelWidth = 'auto', onChange, refIds, query }) => {
+export const Reduce = ({ labelWidth = 'auto', onChange, refIds, query }: Props) => {
   const reducer = reducerTypes.find((o) => o.value === query.reducer);
 
   const onRefIdChange = (value: SelectableValue<string>) => {
diff --git a/public/app/features/expressions/components/Resample.tsx b/public/app/features/expressions/components/Resample.tsx
index 14d80bb723b..ecf4a0fd8ae 100644
--- a/public/app/features/expressions/components/Resample.tsx
+++ b/public/app/features/expressions/components/Resample.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, { ChangeEvent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
@@ -12,7 +12,7 @@ interface Props {
   onChange: (query: ExpressionQuery) => void;
 }
 
-export const Resample: FC<Props> = ({ labelWidth = 'auto', onChange, refIds, query }) => {
+export const Resample = ({ labelWidth = 'auto', onChange, refIds, query }: Props) => {
   const downsampler = downsamplingTypes.find((o) => o.value === query.downsampler);
   const upsampler = upsamplingTypes.find((o) => o.value === query.upsampler);
 
diff --git a/public/app/features/expressions/components/Threshold.tsx b/public/app/features/expressions/components/Threshold.tsx
index 94a5cdb53e4..d789b695c60 100644
--- a/public/app/features/expressions/components/Threshold.tsx
+++ b/public/app/features/expressions/components/Threshold.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, FormEvent } from 'react';
+import React, { FormEvent } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { ButtonSelect, InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
@@ -16,7 +16,7 @@ interface Props {
 
 const defaultThresholdFunction = EvalFunction.IsAbove;
 
-export const Threshold: FC<Props> = ({ labelWidth, onChange, refIds, query }) => {
+export const Threshold = ({ labelWidth, onChange, refIds, query }: Props) => {
   const styles = useStyles2(getStyles);
 
   const defaultEvaluator: ClassicCondition = {
diff --git a/public/app/features/invites/SignupInvited.tsx b/public/app/features/invites/SignupInvited.tsx
index 7435932e347..53ffa453c72 100644
--- a/public/app/features/invites/SignupInvited.tsx
+++ b/public/app/features/invites/SignupInvited.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { getBackendSrv } from '@grafana/runtime';
@@ -31,7 +31,7 @@ const navModel = {
 
 export interface Props extends GrafanaRouteComponentProps<{ code: string }> {}
 
-export const SignupInvitedPage: FC<Props> = ({ match }) => {
+export const SignupInvitedPage = ({ match }: Props) => {
   const code = match.params.code;
   const [initFormModel, setInitFormModel] = useState<FormModel>();
   const [greeting, setGreeting] = useState<string>();
diff --git a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
index 94d86bab9a7..91f2bddcb04 100644
--- a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
+++ b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { PanelPluginMeta } from '@grafana/data';
 import { Button, VerticalGroup } from '@grafana/ui';
@@ -19,7 +19,7 @@ interface Props {
   searchQuery: string;
 }
 
-export const PanelLibraryOptionsGroup: FC<Props> = ({ panel, searchQuery }) => {
+export const PanelLibraryOptionsGroup = ({ panel, searchQuery }: Props) => {
   const [showingAddPanelModal, setShowingAddPanelModal] = useState(false);
   const [changeToPanel, setChangeToPanel] = useState<LibraryElementDTO | undefined>(undefined);
   const [panelFilter, setPanelFilter] = useState<string[]>([]);
diff --git a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
index 3d5e0597f8e..75475419cda 100644
--- a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
+++ b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { DataSourcePicker } from '@grafana/runtime';
@@ -37,7 +37,7 @@ interface Props extends Pick<FormAPI<ImportDashboardDTO>, 'register' | 'errors'
   onSubmit: FormsOnSubmit<ImportDashboardDTO>;
 }
 
-export const ImportDashboardForm: FC<Props> = ({
+export const ImportDashboardForm = ({
   register,
   errors,
   control,
@@ -49,7 +49,7 @@ export const ImportDashboardForm: FC<Props> = ({
   onCancel,
   onSubmit,
   watch,
-}) => {
+}: Props) => {
   const [isSubmitted, setSubmitted] = useState(false);
   const watchDataSources = watch('dataSources');
   const watchFolder = watch('folder');
diff --git a/public/app/features/org/NewOrgPage.tsx b/public/app/features/org/NewOrgPage.tsx
index 6736de0842a..0b459d24579 100644
--- a/public/app/features/org/NewOrgPage.tsx
+++ b/public/app/features/org/NewOrgPage.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { NavModelItem } from '@grafana/data';
@@ -27,7 +27,7 @@ const pageNav: NavModelItem = {
   breadcrumbs: [{ title: 'Server admin', url: 'admin/orgs' }],
 };
 
-export const NewOrgPage: FC<Props> = ({ createOrganization }) => {
+export const NewOrgPage = ({ createOrganization }: Props) => {
   const createOrg = async (newOrg: { name: string }) => {
     await createOrganization(newOrg);
     window.location.href = getConfig().appSubUrl + '/org';
diff --git a/public/app/features/org/OrgProfile.tsx b/public/app/features/org/OrgProfile.tsx
index 42e2abffe9b..8988d9cbd1c 100644
--- a/public/app/features/org/OrgProfile.tsx
+++ b/public/app/features/org/OrgProfile.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Input, Field, FieldSet, Button, Form } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
@@ -13,7 +13,7 @@ interface FormDTO {
   orgName: string;
 }
 
-const OrgProfile: FC<Props> = ({ onSubmit, orgName }) => {
+const OrgProfile = ({ onSubmit, orgName }: Props) => {
   const canWriteOrg = contextSrv.hasPermission(AccessControlAction.OrgsWrite);
 
   return (
diff --git a/public/app/features/org/SelectOrgPage.tsx b/public/app/features/org/SelectOrgPage.tsx
index 42abfab245d..4e548f86fb5 100644
--- a/public/app/features/org/SelectOrgPage.tsx
+++ b/public/app/features/org/SelectOrgPage.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -35,7 +35,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 
 type Props = ConnectedProps<typeof connector>;
 
-export const SelectOrgPage: FC<Props> = ({ setUserOrganization, getUserOrganizations, userOrgs }) => {
+export const SelectOrgPage = ({ setUserOrganization, getUserOrganizations, userOrgs }: Props) => {
   const setUserOrg = async (org: UserOrg) => {
     await setUserOrganization(org.orgId);
     window.location.href = config.appSubUrl + '/';
diff --git a/public/app/features/plugins/components/PluginStateInfo.tsx b/public/app/features/plugins/components/PluginStateInfo.tsx
index 066034de2f8..29a63a3b47b 100644
--- a/public/app/features/plugins/components/PluginStateInfo.tsx
+++ b/public/app/features/plugins/components/PluginStateInfo.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { PluginState } from '@grafana/data';
 import { Badge, BadgeProps } from '@grafana/ui';
@@ -7,7 +7,7 @@ interface Props {
   state?: PluginState;
 }
 
-export const PluginStateInfo: FC<Props> = (props) => {
+export const PluginStateInfo = (props: Props) => {
   const display = getFeatureStateInfo(props.state);
 
   if (!display) {
diff --git a/public/app/features/profile/ChangePasswordForm.tsx b/public/app/features/profile/ChangePasswordForm.tsx
index 30811d6747d..a41505ffa3b 100644
--- a/public/app/features/profile/ChangePasswordForm.tsx
+++ b/public/app/features/profile/ChangePasswordForm.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Button, Field, Form, HorizontalGroup, LinkButton } from '@grafana/ui';
 import config from 'app/core/config';
@@ -15,7 +15,7 @@ export interface Props {
   onChangePassword: (payload: ChangePasswordFields) => void;
 }
 
-export const ChangePasswordForm: FC<Props> = ({ user, onChangePassword, isSaving }) => {
+export const ChangePasswordForm = ({ user, onChangePassword, isSaving }: Props) => {
   const { disableLoginForm } = config;
   const authSource = user.authLabels?.length && user.authLabels[0];
 
diff --git a/public/app/features/profile/UserProfileEditForm.tsx b/public/app/features/profile/UserProfileEditForm.tsx
index 1a2f76935c5..bfc25f02359 100644
--- a/public/app/features/profile/UserProfileEditForm.tsx
+++ b/public/app/features/profile/UserProfileEditForm.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, Field, FieldSet, Form, Icon, Input, Tooltip } from '@grafana/ui';
@@ -16,7 +16,7 @@ export interface Props {
 
 const { disableLoginForm } = config;
 
-export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfile }) => {
+export const UserProfileEditForm = ({ user, isSavingUser, updateProfile }: Props) => {
   const onSubmitProfileUpdate = (data: ProfileUpdateFields) => {
     updateProfile(data);
   };
diff --git a/public/app/features/search/components/DashboardActions.tsx b/public/app/features/search/components/DashboardActions.tsx
index 1828c2154bf..52a1d52b8cd 100644
--- a/public/app/features/search/components/DashboardActions.tsx
+++ b/public/app/features/search/components/DashboardActions.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { config, reportInteraction } from '@grafana/runtime';
 import { Menu, Dropdown, Button, Icon } from '@grafana/ui';
@@ -10,7 +10,7 @@ export interface Props {
   canCreateDashboards?: boolean;
 }
 
-export const DashboardActions: FC<Props> = ({ folderUid, canCreateFolders = false, canCreateDashboards = false }) => {
+export const DashboardActions = ({ folderUid, canCreateFolders = false, canCreateDashboards = false }: Props) => {
   const actionUrl = (type: string) => {
     let url = `dashboard/${type}`;
     const isTypeNewFolder = type === 'new_folder';
diff --git a/public/app/features/search/components/SearchItem.tsx b/public/app/features/search/components/SearchItem.tsx
index 34e257570c1..ffe74c64dd1 100644
--- a/public/app/features/search/components/SearchItem.tsx
+++ b/public/app/features/search/components/SearchItem.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
@@ -32,7 +32,7 @@ const getIconFromMeta = (meta = ''): IconName => {
 };
 
 /** @deprecated */
-export const SearchItem: FC<Props> = ({ item, isSelected, editable, onToggleChecked, onTagSelected, onClickItem }) => {
+export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagSelected, onClickItem }: Props) => {
   const styles = useStyles2(getStyles);
   const tagSelected = useCallback(
     (tag: string, event: React.MouseEvent<HTMLElement>) => {
diff --git a/public/app/features/search/page/components/ConfirmDeleteModal.tsx b/public/app/features/search/page/components/ConfirmDeleteModal.tsx
index b6a548dadf4..15f5c4a7bec 100644
--- a/public/app/features/search/page/components/ConfirmDeleteModal.tsx
+++ b/public/app/features/search/page/components/ConfirmDeleteModal.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { ConfirmModal, useStyles2 } from '@grafana/ui';
@@ -14,7 +14,7 @@ interface Props {
   onDismiss: () => void;
 }
 
-export const ConfirmDeleteModal: FC<Props> = ({ results, onDeleteItems, isOpen, onDismiss }) => {
+export const ConfirmDeleteModal = ({ results, onDeleteItems, isOpen, onDismiss }: Props) => {
   const styles = useStyles2(getStyles);
 
   const dashboards = Array.from(results.get('dashboard') ?? []);
diff --git a/public/app/features/search/page/components/MoveToFolderModal.tsx b/public/app/features/search/page/components/MoveToFolderModal.tsx
index 8e7918a0257..0808bc62a5d 100644
--- a/public/app/features/search/page/components/MoveToFolderModal.tsx
+++ b/public/app/features/search/page/components/MoveToFolderModal.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui';
@@ -17,7 +17,7 @@ interface Props {
   onDismiss: () => void;
 }
 
-export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onDismiss }) => {
+export const MoveToFolderModal = ({ results, onMoveItems, isOpen, onDismiss }: Props) => {
   const [folder, setFolder] = useState<FolderInfo | null>(null);
   const styles = useStyles2(getStyles);
   const notifyApp = useAppNotification();
diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx
index e6e4dd55b05..6dcc796c184 100644
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/public/app/features/teams/TeamSettings.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { Input, Field, Form, Button, FieldSet, VerticalGroup } from '@grafana/ui';
@@ -22,7 +22,7 @@ interface OwnProps {
 }
 export type Props = ConnectedProps<typeof connector> & OwnProps;
 
-export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
+export const TeamSettings = ({ team, updateTeam }: Props) => {
   const canWriteTeamSettings = contextSrv.hasPermissionInMetadata(AccessControlAction.ActionTeamsWrite, team);
   const currentOrgId = contextSrv.user.orgId;
 
diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
index 69da8f2afba..1d172ca728b 100644
--- a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
+++ b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { DataSourceRef, SelectableValue } from '@grafana/data';
 import { t } from 'app/core/internationalization';
@@ -14,7 +14,7 @@ interface Props {
   getTagKeysOptions?: any;
 }
 
-export const AdHocFilterBuilder: FC<Props> = ({ datasource, appendBefore, onCompleted, getTagKeysOptions }) => {
+export const AdHocFilterBuilder = ({ datasource, appendBefore, onCompleted, getTagKeysOptions }: Props) => {
   const [key, setKey] = useState<string | null>(null);
   const [operator, setOperator] = useState<string>('=');
 
diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterKey.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterKey.tsx
index da71333bce2..051b34c6f10 100644
--- a/public/app/features/variables/adhoc/picker/AdHocFilterKey.tsx
+++ b/public/app/features/variables/adhoc/picker/AdHocFilterKey.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 
 import { DataSourceRef, SelectableValue } from '@grafana/data';
 import { Icon, SegmentAsync } from '@grafana/ui';
@@ -14,7 +14,7 @@ interface Props {
 }
 
 const MIN_WIDTH = 90;
-export const AdHocFilterKey: FC<Props> = ({ datasource, onChange, disabled, filterKey, getTagKeysOptions }) => {
+export const AdHocFilterKey = ({ datasource, onChange, disabled, filterKey, getTagKeysOptions }: Props) => {
   const loadKeys = () => fetchFilterKeys(datasource, getTagKeysOptions);
   const loadKeysWithRemove = () => fetchFilterKeysWithRemove(datasource, getTagKeysOptions);
 
diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterRenderer.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterRenderer.tsx
index c6ced123c9d..79babf88ead 100644
--- a/public/app/features/variables/adhoc/picker/AdHocFilterRenderer.tsx
+++ b/public/app/features/variables/adhoc/picker/AdHocFilterRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { DataSourceRef, SelectableValue } from '@grafana/data';
 import { AdHocVariableFilter } from 'app/features/variables/types';
@@ -18,7 +18,7 @@ interface Props {
   disabled?: boolean;
 }
 
-export const AdHocFilterRenderer: FC<Props> = ({
+export const AdHocFilterRenderer = ({
   datasource,
   filter: { key, operator, value },
   onKeyChange,
@@ -27,7 +27,7 @@ export const AdHocFilterRenderer: FC<Props> = ({
   placeHolder,
   getTagKeysOptions,
   disabled,
-}) => {
+}: Props) => {
   return (
     <>
       <AdHocFilterKey
diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx
index ff4a6e2a074..7e6d13ec139 100644
--- a/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx
+++ b/public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { DataSourceRef, MetricFindValue, SelectableValue } from '@grafana/data';
 import { SegmentAsync } from '@grafana/ui';
@@ -14,14 +14,7 @@ interface Props {
   disabled?: boolean;
 }
 
-export const AdHocFilterValue: FC<Props> = ({
-  datasource,
-  disabled,
-  onChange,
-  filterKey,
-  filterValue,
-  placeHolder,
-}) => {
+export const AdHocFilterValue = ({ datasource, disabled, onChange, filterKey, filterValue, placeHolder }: Props) => {
   const loadValues = () => fetchFilterValues(datasource, filterKey);
 
   return (
diff --git a/public/app/features/variables/adhoc/picker/ConditionSegment.tsx b/public/app/features/variables/adhoc/picker/ConditionSegment.tsx
index 537b0ddb607..4c47fd73433 100644
--- a/public/app/features/variables/adhoc/picker/ConditionSegment.tsx
+++ b/public/app/features/variables/adhoc/picker/ConditionSegment.tsx
@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 interface Props {
   label: string;
 }
 
-export const ConditionSegment: FC<Props> = ({ label }) => {
+export const ConditionSegment = ({ label }: Props) => {
   return (
     <div className="gf-form">
       <span className="gf-form-label query-keyword">{label}</span>
diff --git a/public/app/features/variables/adhoc/picker/OperatorSegment.tsx b/public/app/features/variables/adhoc/picker/OperatorSegment.tsx
index bdcc36dd6b0..b8646b466e6 100644
--- a/public/app/features/variables/adhoc/picker/OperatorSegment.tsx
+++ b/public/app/features/variables/adhoc/picker/OperatorSegment.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Segment } from '@grafana/ui';
@@ -14,7 +14,7 @@ const options = ['=', '!=', '<', '>', '=~', '!~'].map<SelectableValue<string>>((
   value,
 }));
 
-export const OperatorSegment: FC<Props> = ({ value, disabled, onChange }) => {
+export const OperatorSegment = ({ value, disabled, onChange }: Props) => {
   return (
     <Segment
       className="query-segment-operator"
diff --git a/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx b/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
index 857b43c3ded..53e6b2226e9 100644
--- a/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
+++ b/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
@@ -1,5 +1,5 @@
 import { useId } from '@react-aria/utils';
-import React, { FC, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { TextArea, useStyles2 } from '@grafana/ui';
@@ -10,7 +10,7 @@ import { getStyles } from './VariableTextAreaField';
 
 export const LEGACY_VARIABLE_QUERY_EDITOR_NAME = 'Grafana-LegacyVariableQueryEditor';
 
-export const LegacyVariableQueryEditor: FC<VariableQueryEditorProps> = ({ onChange, query }) => {
+export const LegacyVariableQueryEditor = ({ onChange, query }: VariableQueryEditorProps) => {
   const styles = useStyles2(getStyles);
   const [value, setValue] = useState(query);
   const onValueChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
diff --git a/public/app/features/variables/inspect/NetworkGraph.tsx b/public/app/features/variables/inspect/NetworkGraph.tsx
index 38d7707bfef..12c2d0a843b 100644
--- a/public/app/features/variables/inspect/NetworkGraph.tsx
+++ b/public/app/features/variables/inspect/NetworkGraph.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { GraphEdge, GraphNode } from './utils';
 
@@ -17,7 +17,7 @@ interface DispatchProps {}
 
 export type Props = OwnProps & ConnectedProps & DispatchProps;
 
-export const NetworkGraph: FC<Props> = ({ nodes, edges, direction, width, height, onDoubleClick }) => {
+export const NetworkGraph = ({ nodes, edges, direction, width, height, onDoubleClick }: Props) => {
   const network = useRef<any>(null);
   const ref = useRef(null);
 
diff --git a/public/app/features/variables/inspect/VariableUsagesButton.tsx b/public/app/features/variables/inspect/VariableUsagesButton.tsx
index 58a7d2625ca..66e1d945750 100644
--- a/public/app/features/variables/inspect/VariableUsagesButton.tsx
+++ b/public/app/features/variables/inspect/VariableUsagesButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { reportInteraction } from '@grafana/runtime';
 import { IconButton } from '@grafana/ui';
@@ -12,7 +12,7 @@ interface Props {
   isAdhoc: boolean;
 }
 
-export const VariableUsagesButton: FC<Props> = ({ id, usages, isAdhoc }) => {
+export const VariableUsagesButton = ({ id, usages, isAdhoc }: Props) => {
   const network = useMemo(() => usages.find((n) => n.variable.id === id), [usages, id]);
   if (usages.length === 0 || isAdhoc || !network) {
     return null;
diff --git a/public/app/features/variables/inspect/VariablesDependenciesButton.tsx b/public/app/features/variables/inspect/VariablesDependenciesButton.tsx
index e2a76a6e6f6..2386a890b03 100644
--- a/public/app/features/variables/inspect/VariablesDependenciesButton.tsx
+++ b/public/app/features/variables/inspect/VariablesDependenciesButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
 
 import { reportInteraction } from '@grafana/runtime';
@@ -20,7 +20,7 @@ interface DispatchProps {}
 
 type Props = OwnProps & ConnectedProps & DispatchProps;
 
-export const UnProvidedVariablesDependenciesButton: FC<Props> = ({ variables }) => {
+export const UnProvidedVariablesDependenciesButton = ({ variables }: Props) => {
   const nodes = useMemo(() => createDependencyNodes(variables), [variables]);
   const edges = useMemo(() => createDependencyEdges(variables), [variables]);
 
@@ -53,7 +53,7 @@ export const UnProvidedVariablesDependenciesButton: FC<Props> = ({ variables })
   );
 };
 
-export const VariablesDependenciesButton: FC<Props> = (props) => (
+export const VariablesDependenciesButton = (props: Props) => (
   <Provider store={store}>
     <UnProvidedVariablesDependenciesButton {...props} />
   </Provider>
diff --git a/public/app/features/variables/inspect/VariablesUnknownButton.tsx b/public/app/features/variables/inspect/VariablesUnknownButton.tsx
index 1e37f0986dc..47d7cb33cae 100644
--- a/public/app/features/variables/inspect/VariablesUnknownButton.tsx
+++ b/public/app/features/variables/inspect/VariablesUnknownButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { IconButton } from '@grafana/ui';
 
@@ -10,7 +10,7 @@ interface Props {
   usages: UsagesToNetwork[];
 }
 
-export const VariablesUnknownButton: FC<Props> = ({ id, usages }) => {
+export const VariablesUnknownButton = ({ id, usages }: Props) => {
   const network = useMemo(() => usages.find((n) => n.variable.id === id), [id, usages]);
 
   if (!network) {
diff --git a/public/app/features/variables/pickers/shared/VariableLink.tsx b/public/app/features/variables/pickers/shared/VariableLink.tsx
index d20b2f0b302..5c2d4fb233c 100644
--- a/public/app/features/variables/pickers/shared/VariableLink.tsx
+++ b/public/app/features/variables/pickers/shared/VariableLink.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC, MouseEvent, useCallback } from 'react';
+import React, { MouseEvent, useCallback } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -20,7 +20,7 @@ interface Props {
   id: string;
 }
 
-export const VariableLink: FC<Props> = ({ loading, disabled, onClick: propsOnClick, text, onCancel, id }) => {
+export const VariableLink = ({ loading, disabled, onClick: propsOnClick, text, onCancel, id }: Props) => {
   const styles = useStyles2(getStyles);
   const onClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -66,7 +66,7 @@ interface VariableLinkTextProps {
   text: string;
 }
 
-const VariableLinkText: FC<VariableLinkTextProps> = ({ text }) => {
+const VariableLinkText = ({ text }: VariableLinkTextProps) => {
   const styles = useStyles2(getStyles);
   return (
     <span className={styles.textAndTags}>
@@ -75,7 +75,7 @@ const VariableLinkText: FC<VariableLinkTextProps> = ({ text }) => {
   );
 };
 
-const LoadingIndicator: FC<Pick<Props, 'onCancel'>> = ({ onCancel }) => {
+const LoadingIndicator = ({ onCancel }: Pick<Props, 'onCancel'>) => {
   const onClick = useCallback(
     (event: MouseEvent) => {
       event.preventDefault();
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
index c5c947801c1..00eef618444 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField } from '@grafana/experimental';
@@ -16,7 +16,7 @@ export interface Props {
   templateVariableOptions: Array<SelectableValue<string>>;
 }
 
-export const Aggregation: FC<Props> = (props) => {
+export const Aggregation = (props: Props) => {
   const aggOptions = useAggregationOptionsByMetric(props);
   const selected = useSelectedFromOptions(aggOptions, props);
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
index 4c19378d2dc..5556f396468 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup } from '@grafana/experimental';
@@ -22,7 +22,7 @@ export interface Props {
   preprocessor?: PreprocessorType;
 }
 
-export const Alignment: FC<Props> = ({
+export const Alignment = ({
   refId,
   templateVariableOptions,
   onChange,
@@ -31,7 +31,7 @@ export const Alignment: FC<Props> = ({
   datasource,
   metricDescriptor,
   preprocessor,
-}) => {
+}: Props) => {
   const alignmentLabel = useMemo(() => alignmentPeriodLabel(customMetaData, datasource), [customMetaData, datasource]);
   return (
     <EditorFieldGroup>
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
index 9478e4bc910..d073a5a5e79 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
@@ -15,14 +15,14 @@ export interface Props {
   preprocessor?: PreprocessorType;
 }
 
-export const AlignmentFunction: FC<Props> = ({
+export const AlignmentFunction = ({
   inputId,
   query,
   templateVariableOptions,
   onChange,
   metricDescriptor,
   preprocessor,
-}) => {
+}: Props) => {
   const { perSeriesAligner: psa } = query;
   let { valueType, metricKind } = metricDescriptor || {};
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
index 0f772486752..b04d70dce2e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { InlineField, Select } from '@grafana/ui';
@@ -11,13 +11,13 @@ interface VariableQueryFieldProps {
   allowCustomValue?: boolean;
 }
 
-export const VariableQueryField: FC<VariableQueryFieldProps> = ({
+export const VariableQueryField = ({
   label,
   onChange,
   value,
   options,
   allowCustomValue = false,
-}) => {
+}: VariableQueryFieldProps) => {
   return (
     <InlineField label={label} labelWidth={20}>
       <Select
diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx
index 63f3fb2c54a..7e84b93d9db 100644
--- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { ConnectionConfig } from '@grafana/aws-sdk';
@@ -25,7 +25,7 @@ export type Props = DataSourcePluginOptionsEditorProps<CloudWatchJsonData, Cloud
 
 type LogGroupFieldState = Pick<FieldProps, 'invalid'> & { error?: string | null };
 
-export const ConfigEditor: FC<Props> = (props: Props) => {
+export const ConfigEditor = (props: Props) => {
   const { options, onOptionsChange } = props;
   const { defaultLogGroups, logsTimeout, defaultRegion, logGroups } = options.jsonData;
   const datasource = useDatasource(props);
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
index e5f1e5eb4e6..53adfb380d2 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
@@ -22,7 +22,7 @@ const apiModes: Array<SelectableValue<CloudWatchQueryMode>> = [
   { label: 'CloudWatch Logs', value: 'Logs' },
 ];
 
-const QueryHeader: React.FC<Props> = ({
+const QueryHeader = ({
   query,
   onChange,
   datasource,
@@ -31,7 +31,7 @@ const QueryHeader: React.FC<Props> = ({
   dataIsStale,
   data,
   onRunQuery,
-}) => {
+}: Props) => {
   const { queryMode, region } = query;
   const isMonitoringAccount = useIsMonitoringAccount(datasource.resources, query.region);
   const [regions, regionIsLoading] = useRegions(datasource);
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
index 7e66cc0d4eb..16ec391826f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx
@@ -1,10 +1,10 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { InlineField, Input, PopoverContent } from '@grafana/ui';
 
 const LABEL_WIDTH = 20;
 
-interface VariableTextFieldProps {
+interface Props {
   onBlur: (value: string) => void;
   value: string;
   label: string;
@@ -13,14 +13,7 @@ interface VariableTextFieldProps {
   interactive?: boolean;
 }
 
-export const VariableTextField: FC<VariableTextFieldProps> = ({
-  interactive,
-  label,
-  onBlur,
-  placeholder,
-  value,
-  tooltip,
-}) => {
+export const VariableTextField = ({ interactive, label, onBlur, placeholder, value, tooltip }: Props) => {
   const [localValue, setLocalValue] = useState(value);
   return (
     <InlineField interactive={interactive} label={label} labelWidth={LABEL_WIDTH} tooltip={tooltip} grow>
diff --git a/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
index 3da87fecfe8..d9c47dc894c 100644
--- a/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { FC, FormEvent, useState, useEffect } from 'react';
+import React, { FormEvent, useState, useEffect } from 'react';
 
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
@@ -16,7 +16,7 @@ export type Props = QueryEditorProps<LokiDatasource, LokiQuery, LokiOptions, Lok
 
 const refId = 'LokiVariableQueryEditor-VariableQuery';
 
-export const LokiVariableQueryEditor: FC<Props> = ({ onChange, query, datasource }) => {
+export const LokiVariableQueryEditor = ({ onChange, query, datasource }: Props) => {
   const [type, setType] = useState<number | undefined>(undefined);
   const [label, setLabel] = useState('');
   const [labelOptions, setLabelOptions] = useState<Array<SelectableValue<string>>>([]);
diff --git a/public/app/plugins/datasource/prometheus/components/PromLink.tsx b/public/app/plugins/datasource/prometheus/components/PromLink.tsx
index 8264eb83866..52f5405da4d 100644
--- a/public/app/plugins/datasource/prometheus/components/PromLink.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromLink.tsx
@@ -1,5 +1,5 @@
 import { map } from 'lodash';
-import React, { FC, useEffect, useState, memo } from 'react';
+import React, { useEffect, useState, memo } from 'react';
 
 import { DataQueryRequest, PanelData, ScopedVars, textUtil, rangeUtil } from '@grafana/data';
 
@@ -12,7 +12,7 @@ interface Props {
   panelData?: PanelData;
 }
 
-const PromLink: FC<Props> = ({ panelData, query, datasource }) => {
+const PromLink = ({ panelData, query, datasource }: Props) => {
   const [href, setHref] = useState('');
 
   useEffect(() => {
diff --git a/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx
index ace4bd84eaf..c2b064d5e76 100644
--- a/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { FC, FormEvent, useEffect, useState } from 'react';
+import React, { FormEvent, useEffect, useState } from 'react';
 
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui';
@@ -28,7 +28,7 @@ export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOption
 
 const refId = 'PrometheusVariableQueryEditor-VariableQuery';
 
-export const PromVariableQueryEditor: FC<Props> = ({ onChange, query, datasource }) => {
+export const PromVariableQueryEditor = ({ onChange, query, datasource }: Props) => {
   // to select the query type, i.e. label_names, label_values, etc.
   const [qryType, setQryType] = useState<number | undefined>(undefined);
 
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx
index 46d4855e635..3f80a857c95 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/InlineSearchField.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { InlineFieldRow, InlineField } from '@grafana/ui';
 
@@ -7,7 +7,7 @@ interface Props {
   tooltip?: string;
   children: React.ReactElement;
 }
-const SearchField: FC<Props> = ({ label, tooltip, children }) => {
+const SearchField = ({ label, tooltip, children }: Props) => {
   return (
     <InlineFieldRow>
       <InlineField label={label} labelWidth={16} grow tooltip={tooltip}>
diff --git a/public/app/plugins/panel/alertlist/GroupByWithLoading.tsx b/public/app/plugins/panel/alertlist/GroupByWithLoading.tsx
index 6aecab8aaa3..4b8622360eb 100644
--- a/public/app/plugins/panel/alertlist/GroupByWithLoading.tsx
+++ b/public/app/plugins/panel/alertlist/GroupByWithLoading.tsx
@@ -1,5 +1,5 @@
 import { isEmpty, uniq } from 'lodash';
-import React, { FC, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { Icon, MultiSelect } from '@grafana/ui';
@@ -21,7 +21,7 @@ interface Props {
   onChange: (keys: string[]) => void;
 }
 
-export const GroupBy: FC<Props> = (props) => {
+export const GroupBy = (props: Props) => {
   const { onChange, id, defaultValue } = props;
   const dispatch = useDispatch();
 
diff --git a/public/app/plugins/panel/alertlist/unified-alerting/GroupedView.tsx b/public/app/plugins/panel/alertlist/unified-alerting/GroupedView.tsx
index add529b9632..8c8ab6131f3 100644
--- a/public/app/plugins/panel/alertlist/unified-alerting/GroupedView.tsx
+++ b/public/app/plugins/panel/alertlist/unified-alerting/GroupedView.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
 import { AlertLabel } from 'app/features/alerting/unified/components/AlertLabel';
@@ -11,12 +11,12 @@ import { getStyles } from '../UnifiedAlertList';
 import { GroupedRules, UnifiedAlertListOptions } from '../types';
 import { filterAlerts } from '../util';
 
-type GroupedModeProps = {
+type Props = {
   rules: CombinedRuleWithLocation[];
   options: UnifiedAlertListOptions;
 };
 
-const GroupedModeView: FC<GroupedModeProps> = ({ rules, options }) => {
+const GroupedModeView = ({ rules, options }: Props) => {
   const styles = useStyles2(getStyles);
 
   const groupBy = options.groupBy;
diff --git a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
index d319afa7dc8..7a0c0ecffad 100644
--- a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
+++ b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 import { useLocation } from 'react-use';
 
 import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
@@ -22,12 +22,12 @@ import { AlertInstances } from '../AlertInstances';
 import { getStyles } from '../UnifiedAlertList';
 import { UnifiedAlertListOptions } from '../types';
 
-type UngroupedModeProps = {
+type Props = {
   rules: CombinedRuleWithLocation[];
   options: UnifiedAlertListOptions;
 };
 
-const UngroupedModeView: FC<UngroupedModeProps> = ({ rules, options }) => {
+const UngroupedModeView = ({ rules, options }: Props) => {
   const styles = useStyles2(getStyles);
   const stateStyle = useStyles2(getStateTagStyles);
   const { href: returnTo } = useLocation();
diff --git a/public/app/plugins/panel/welcome/Welcome.tsx b/public/app/plugins/panel/welcome/Welcome.tsx
index 4c5b7f5bb89..b427770b63b 100644
--- a/public/app/plugins/panel/welcome/Welcome.tsx
+++ b/public/app/plugins/panel/welcome/Welcome.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -11,7 +11,7 @@ const helpOptions = [
   { value: 3, label: 'Public Slack', href: 'http://slack.grafana.com' },
 ];
 
-export const WelcomeBanner: FC = () => {
+export const WelcomeBanner = () => {
   const styles = useStyles2(getStyles);
 
   return (
diff --git a/public/app/plugins/panel/xychart/XYChartPanel2.tsx b/public/app/plugins/panel/xychart/XYChartPanel2.tsx
index cadfd88179e..83b01bcfa31 100644
--- a/public/app/plugins/panel/xychart/XYChartPanel2.tsx
+++ b/public/app/plugins/panel/xychart/XYChartPanel2.tsx
@@ -33,7 +33,7 @@ import { PanelOptions, ScatterHoverEvent, ScatterSeries } from './types';
 type Props = PanelProps<PanelOptions>;
 const TOOLTIP_OFFSET = 10;
 
-export const XYChartPanel2: React.FC<Props> = (props: Props) => {
+export const XYChartPanel2 = (props: Props) => {
   const [error, setError] = useState<string | undefined>();
   const [series, setSeries] = useState<ScatterSeries[]>([]);
   const [builder, setBuilder] = useState<UPlotConfigBuilder | undefined>();