From 74af87fcbbc1e11a132ae604b0ad99527d096a68 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Mon, 27 Jul 2020 14:21:28 -0500
Subject: [PATCH] [APM] APM & Observability plugin lint improvements (#72702)
 (#73266)

* [APM] APM & Observability plugin lint improvements

This is a large change, but most of it is automatic `eslint --fix` changes.

* Apply the same ESLint ovderrides in APM and Observability plugins.
* Remove the `no-unused-vars` rule. We can turn on the TypeScript check if needed.
* Check both JS and TS files.
* Add a rule for react function component definitions
* Upgrade eslint-plugin-react to include that rule
---
 .eslintrc.js                                  |  21 +--
 package.json                                  |   2 +-
 .../views/data/components/data_view.test.tsx  |   4 +-
 .../plugins/apm/e2e/cypress/plugins/index.js  |   2 +
 .../plugins/apm/public/application/index.tsx  |  10 +-
 .../app/ErrorGroupOverview/List/index.tsx     |   4 +-
 .../app/ErrorGroupOverview/index.tsx          |   4 +-
 .../Breakdowns/BreakdownFilter.tsx            |   6 +-
 .../Breakdowns/BreakdownGroup.tsx             |   6 +-
 .../app/RumDashboard/ChartWrapper/index.tsx   |   9 +-
 .../RumDashboard/Charts/PageLoadDistChart.tsx |   1 +
 .../Charts/VisitorBreakdownChart.tsx          |   4 +-
 .../PageLoadDistribution/BreakdownSeries.tsx  |   8 +-
 .../PercentileAnnotations.tsx                 |  10 +-
 .../PageLoadDistribution/index.tsx            |   4 +-
 .../app/RumDashboard/PageViewsTrend/index.tsx |   4 +-
 .../app/RumDashboard/RumDashboard.tsx         |   4 +-
 .../app/RumDashboard/RumHeader/index.tsx      |  24 ++--
 .../RumDashboard/VisitorBreakdown/index.tsx   |   4 +-
 .../app/ServiceMap/EmptyBanner.test.tsx       |  36 +++--
 .../app/ServiceMap/LoadingOverlay.tsx         |  48 +++----
 .../app/ServiceMap/Popover/Contents.tsx       |  11 +-
 .../components/app/ServiceMap/index.test.tsx  |   6 +-
 .../components/app/ServiceMap/index.tsx       |   4 +-
 .../app/ServiceNodeOverview/index.tsx         |   4 +-
 .../AgentConfigurations/List/index.tsx        |   4 +-
 .../CustomLink/CreateCustomLinkButton.tsx     |  22 ++-
 .../CustomLinkFlyout/Documentation.tsx        |  16 ++-
 .../CustomLinkFlyout/FiltersSection.tsx       |  38 ++---
 .../CustomLinkFlyout/FlyoutFooter.tsx         |   6 +-
 .../CustomLinkFlyout/LinkPreview.tsx          |   4 +-
 .../CustomLinkFlyout/LinkSection.tsx          |   9 +-
 .../CustomLink/CustomLinkFlyout/index.tsx     |   6 +-
 .../CustomLink/CustomLinkTable.tsx            |  39 +++---
 .../CustomizeUI/CustomLink/EmptyPrompt.tsx    |   6 +-
 .../Settings/CustomizeUI/CustomLink/Title.tsx |  62 +++++----
 .../Settings/CustomizeUI/CustomLink/index.tsx |   4 +-
 .../app/Settings/CustomizeUI/index.tsx        |   4 +-
 .../anomaly_detection/add_environments.tsx    |   6 +-
 .../app/Settings/anomaly_detection/index.tsx  |   4 +-
 .../Settings/anomaly_detection/jobs_list.tsx  |   4 +-
 .../public/components/app/Settings/index.tsx  |   6 +-
 .../public/components/app/TraceLink/index.tsx |   4 +-
 .../TransactionDetails/Distribution/index.tsx |  10 +-
 .../WaterfallWithSummmary/ErrorCount.tsx      |  38 ++---
 .../SpanFlyout/TruncateHeightSection.tsx      |  10 +-
 .../Waterfall/WaterfallFlyout.tsx             |   7 +-
 .../Waterfall/WaterfallItem.tsx               |  10 +-
 .../WaterfallContainer/Waterfall/index.tsx    |  10 +-
 .../WaterfallWithSummmary/index.tsx           |   6 +-
 .../components/shared/ApmHeader/index.tsx     |  42 +++---
 .../DatePicker/__test__/DatePicker.test.tsx   |  30 ++--
 .../public/components/shared/EmptyMessage.tsx |   6 +-
 .../shared/EnvironmentBadge/index.tsx         |   4 +-
 .../shared/EnvironmentFilter/index.tsx        |   4 +-
 .../public/components/shared/EuiTabLink.tsx   |   4 +-
 .../shared/HeightRetainer/index.tsx           |   9 +-
 .../components/shared/KueryBar/index.tsx      |   1 -
 .../components/shared/LicensePrompt/index.tsx |   4 +-
 .../Links/DiscoverLinks/DiscoverErrorLink.tsx |  13 +-
 .../Links/DiscoverLinks/DiscoverSpanLink.tsx  |  12 +-
 .../DiscoverLinks/DiscoverTransactionLink.tsx |  12 +-
 .../Links/MachineLearningLinks/MLJobLink.tsx  |   9 +-
 .../shared/Links/apm/ErrorDetailLink.tsx      |   4 +-
 .../shared/Links/apm/ErrorOverviewLink.tsx    |   4 +-
 .../components/shared/Links/apm/HomeLink.tsx  |   4 +-
 .../shared/Links/apm/MetricOverviewLink.tsx   |   4 +-
 .../shared/Links/apm/ServiceMapLink.tsx       |   4 +-
 .../apm/ServiceNodeMetricOverviewLink.tsx     |   6 +-
 .../Links/apm/ServiceNodeOverviewLink.tsx     |   4 +-
 .../shared/Links/apm/ServiceOverviewLink.tsx  |   4 +-
 .../shared/Links/apm/SettingsLink.tsx         |   4 +-
 .../shared/Links/apm/TraceOverviewLink.tsx    |   4 +-
 .../Links/apm/TransactionDetailLink.tsx       |   6 +-
 .../Links/apm/TransactionOverviewLink.tsx     |   4 +-
 .../LocalUIFilters/Filter/FilterBadgeList.tsx |  40 +++---
 .../Filter/FilterTitleButton.tsx              |   4 +-
 .../shared/LocalUIFilters/Filter/index.tsx    |  11 +-
 .../ServiceNameFilter/index.tsx               |   4 +-
 .../TransactionTypeFilter/index.tsx           |   4 +-
 .../shared/LocalUIFilters/index.tsx           |   6 +-
 .../components/shared/MetadataTable/index.tsx |  32 +++--
 .../shared/SelectWithPlaceholder/index.tsx    |   1 +
 .../PopoverExpression/index.tsx               |   4 +-
 .../shared/Stacktrace/FrameHeading.tsx        |   4 +-
 .../shared/Stacktrace/Variables.tsx           |   4 +-
 .../shared/Summary/DurationSummaryItem.tsx    |   8 +-
 .../Summary/ErrorCountSummaryItemBadge.tsx    |   4 +-
 .../shared/Summary/TransactionSummary.tsx     |  12 +-
 .../components/shared/Summary/index.tsx       |   4 +-
 .../CustomLink/CustomLinkPopover.tsx          |   6 +-
 .../CustomLink/CustomLinkSection.tsx          |  42 +++---
 .../CustomLink/ManageCustomLink.tsx           |  74 +++++-----
 .../CustomLink/index.tsx                      |   6 +-
 .../TransactionActionMenu.tsx                 |  34 ++---
 .../TransactionBreakdownGraph/index.tsx       |   4 +-
 .../TransactionBreakdownKpiList.tsx           |  11 +-
 .../shared/TransactionBreakdown/index.tsx     |   4 +-
 .../charts/CustomPlot/AnnotationsPlot.tsx     |   4 +-
 .../ErroneousTransactionsRateChart/index.tsx  |   4 +-
 .../components/shared/charts/Legend/index.tsx |   6 +-
 .../charts/Timeline/Marker/AgentMarker.tsx    |   4 +-
 .../charts/Timeline/Marker/ErrorMarker.tsx    |   4 +-
 .../shared/charts/Timeline/Marker/index.tsx   |   4 +-
 .../shared/charts/Timeline/TimelineAxis.tsx   |   6 +-
 .../shared/charts/Timeline/VerticalLines.tsx  |   6 +-
 .../ChoroplethMap/ChoroplethToolTip.tsx       |  10 +-
 .../TransactionCharts/ChoroplethMap/index.tsx |   4 +-
 .../DurationByCountryMap/index.tsx            |   4 +-
 .../TransactionLineChart/index.tsx            |   4 +-
 .../apm/public/context/ChartsSyncContext.tsx  |   6 +-
 .../MockUrlParamsContextProvider.tsx          |   6 +-
 .../public/utils/getRangeFromTimeSeries.ts    |   4 +-
 .../plugins/apm/public/utils/testHelpers.tsx  |   8 +-
 .../public/application/index.tsx              |   4 +-
 .../components/app/chart_container/index.tsx  |   6 +-
 .../components/app/empty_section/index.tsx    |   4 +-
 .../public/components/app/header/index.tsx    |   6 +-
 .../app/ingest_manager_panel/index.tsx        |   4 +-
 .../components/app/layout/with_header.tsx     |  30 ++--
 .../public/components/app/news_feed/index.tsx |   8 +-
 .../public/components/app/resources/index.tsx |   4 +-
 .../components/app/section/alerts/index.tsx   |   4 +-
 .../components/app/section/apm/index.tsx      |   6 +-
 .../app/section/error_panel/index.tsx         |   4 +-
 .../public/components/app/section/index.tsx   |   4 +-
 .../components/app/section/logs/index.tsx     |   6 +-
 .../components/app/section/metrics/index.tsx  |  12 +-
 .../components/app/section/uptime/index.tsx   |  12 +-
 .../components/app/styled_stat/index.tsx      |   4 +-
 .../components/shared/action_menu/index.tsx   |  74 +++++-----
 .../components/shared/data_picker/index.tsx   |   4 +-
 .../observability/public/pages/home/index.tsx |   4 +-
 .../public/pages/landing/index.tsx            |   4 +-
 .../public/pages/overview/index.tsx           |   8 +-
 .../pages/overview/loading_observability.tsx  |   4 +-
 .../public/typings/eui_styled_components.tsx  |  24 ++--
 .../components/rules/mitre/index.tsx          |   2 +-
 .../tags_filter_popover.tsx                   |   1 +
 yarn.lock                                     | 130 +++++++++++-------
 140 files changed, 824 insertions(+), 733 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 848f02b35a115..d8b3a26a0af8c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -775,19 +775,22 @@ module.exports = {
     },
 
     /**
-     * APM overrides
+     * APM and Observability overrides
      */
     {
-      files: ['x-pack/plugins/apm/**/*.js'],
+      files: [
+        'x-pack/plugins/apm/**/*.{js,mjs,ts,tsx}',
+        'x-pack/plugins/observability/**/*.{js,mjs,ts,tsx}',
+      ],
       rules: {
-        'no-unused-vars': ['error', { ignoreRestSiblings: true }],
         'no-console': ['warn', { allow: ['error'] }],
-      },
-    },
-    {
-      plugins: ['react-hooks'],
-      files: ['x-pack/plugins/apm/**/*.{ts,tsx}'],
-      rules: {
+        'react/function-component-definition': [
+          'warn',
+          {
+            namedComponents: 'function-declaration',
+            unnamedComponents: 'arrow-function',
+          },
+        ],
         'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
         'react-hooks/exhaustive-deps': ['error', { additionalHooks: '^useFetcher$' }],
       },
diff --git a/package.json b/package.json
index 4cfa2e2e948c4..80825cf962ab7 100644
--- a/package.json
+++ b/package.json
@@ -430,7 +430,7 @@
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-plugin-react-perf": "^3.2.3",
     "exit-hook": "^2.2.0",
diff --git a/src/plugins/inspector/public/views/data/components/data_view.test.tsx b/src/plugins/inspector/public/views/data/components/data_view.test.tsx
index 2772069d36877..bd78bca42c479 100644
--- a/src/plugins/inspector/public/views/data/components/data_view.test.tsx
+++ b/src/plugins/inspector/public/views/data/components/data_view.test.tsx
@@ -51,13 +51,13 @@ describe('Inspector Data View', () => {
     });
 
     it('should render loading state', () => {
-      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />);
+      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />); // eslint-disable-line react/jsx-pascal-case
 
       expect(component).toMatchSnapshot();
     });
 
     it('should render empty state', async () => {
-      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />);
+      const component = mountWithIntl(<DataView.component title="Test Data" adapters={adapters} />); // eslint-disable-line react/jsx-pascal-case
       const tabularLoader = Promise.resolve(null);
       adapters.data.setTabularLoader(() => tabularLoader);
       await tabularLoader;
diff --git a/x-pack/plugins/apm/e2e/cypress/plugins/index.js b/x-pack/plugins/apm/e2e/cypress/plugins/index.js
index 540b887d55df5..c5529c747adcd 100644
--- a/x-pack/plugins/apm/e2e/cypress/plugins/index.js
+++ b/x-pack/plugins/apm/e2e/cypress/plugins/index.js
@@ -29,6 +29,8 @@ module.exports = (on) => {
 
   // readFileMaybe
   on('task', {
+    // ESLint thinks this is a react component for some reason.
+    // eslint-disable-next-line react/function-component-definition
     readFileMaybe(filename) {
       if (fs.existsSync(filename)) {
         return fs.readFileSync(filename, 'utf8');
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index c39afe6da215e..0c9c6eb86225b 100644
--- a/x-pack/plugins/apm/public/application/index.tsx
+++ b/x-pack/plugins/apm/public/application/index.tsx
@@ -37,7 +37,7 @@ const MainContainer = styled.div`
   height: 100%;
 `;
 
-const App = () => {
+function App() {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
@@ -59,9 +59,9 @@ const App = () => {
       </MainContainer>
     </ThemeProvider>
   );
-};
+}
 
-const ApmAppRoot = ({
+function ApmAppRoot({
   core,
   deps,
   routerHistory,
@@ -71,7 +71,7 @@ const ApmAppRoot = ({
   deps: ApmPluginSetupDeps;
   routerHistory: typeof history;
   config: ConfigSchema;
-}) => {
+}) {
   const i18nCore = core.i18n;
   const plugins = deps;
   const apmPluginContextValue = {
@@ -111,7 +111,7 @@ const ApmAppRoot = ({
       </AlertsContextProvider>
     </ApmPluginContext.Provider>
   );
-};
+}
 
 /**
  * This module is rendered asynchronously in the Kibana platform.
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
index 1096c0c77db30..5c16bf0f324be 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
@@ -53,7 +53,7 @@ interface Props {
   items: ErrorGroupListAPIResponse;
 }
 
-const ErrorGroupList: React.FC<Props> = (props) => {
+function ErrorGroupList(props: Props) {
   const { items } = props;
   const { urlParams } = useUrlParams();
   const { serviceName } = urlParams;
@@ -213,6 +213,6 @@ const ErrorGroupList: React.FC<Props> = (props) => {
       sortItems={false}
     />
   );
-};
+}
 
 export { ErrorGroupList };
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
index b9a28c1c1841f..fe2303d645ec9 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -22,7 +22,7 @@ import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
 import { ErrorGroupList } from './List';
 
-const ErrorGroupOverview: React.FC = () => {
+function ErrorGroupOverview() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { serviceName, start, end, sortField, sortDirection } = urlParams;
@@ -123,6 +123,6 @@ const ErrorGroupOverview: React.FC = () => {
       </EuiFlexGroup>
     </>
   );
-};
+}
 
 export { ErrorGroupOverview };
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx
index 332cf40a465f9..7e5e7cdc53c55 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx
@@ -20,11 +20,11 @@ interface Props {
   onBreakdownChange: (values: BreakdownItem[]) => void;
 }
 
-export const BreakdownFilter = ({
+export function BreakdownFilter({
   id,
   selectedBreakdowns,
   onBreakdownChange,
-}: Props) => {
+}: Props) {
   const categories: BreakdownItem[] = [
     {
       name: 'Browser',
@@ -65,4 +65,4 @@ export const BreakdownFilter = ({
       }}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownGroup.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownGroup.tsx
index 5bf84b6c918c5..d4f80667ce98b 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownGroup.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownGroup.tsx
@@ -22,12 +22,12 @@ export interface BreakdownGroupProps {
   onChange: (values: BreakdownItem[]) => void;
 }
 
-export const BreakdownGroup = ({
+export function BreakdownGroup({
   id,
   disabled,
   onChange,
   items,
-}: BreakdownGroupProps) => {
+}: BreakdownGroupProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const [activeItems, setActiveItems] = useState<BreakdownItem[]>(items);
@@ -97,4 +97,4 @@ export const BreakdownGroup = ({
       </EuiPopover>
     </EuiFilterGroup>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
index a3cfbb28abee2..970365779a0a2 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import {
   EuiErrorBoundary,
   EuiFlexGroup,
@@ -13,6 +13,7 @@ import {
 } from '@elastic/eui';
 
 interface Props {
+  children?: ReactNode;
   /**
    * Height for the chart
    */
@@ -27,12 +28,12 @@ interface Props {
   'aria-label'?: string;
 }
 
-export const ChartWrapper: FC<Props> = ({
+export function ChartWrapper({
   loading = false,
   height = '100%',
   children,
   ...rest
-}) => {
+}: Props) {
   const opacity = loading === true ? 0.3 : 1;
 
   return (
@@ -60,4 +61,4 @@ export const ChartWrapper: FC<Props> = ({
       )}
     </EuiErrorBoundary>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
index 6c5b539fcecfa..b2b5e66d06ac6 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
@@ -70,6 +70,7 @@ export function PageLoadDistChart({
     onPercentileChange(minX, maxX);
   };
 
+  // eslint-disable-next-line react/function-component-definition
   const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => {
     return (
       <div>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
index 1e28fde4aa2b4..9f9ffdf7168b8 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
@@ -29,7 +29,7 @@ interface Props {
   }>;
 }
 
-export const VisitorBreakdownChart = ({ options }: Props) => {
+export function VisitorBreakdownChart({ options }: Props) {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
@@ -93,4 +93,4 @@ export const VisitorBreakdownChart = ({ options }: Props) => {
       </Chart>
     </ChartWrapper>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx
index 0c47ad24128ef..475a235ef5eed 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useEffect } from 'react';
 import { CurveType, LineSeries, ScaleType } from '@elastic/charts';
+import React, { useEffect } from 'react';
 import { PercentileRange } from './index';
 import { useBreakdowns } from './use_breakdowns';
 
@@ -16,12 +16,12 @@ interface Props {
   onLoadingChange: (loading: boolean) => void;
 }
 
-export const BreakdownSeries: FC<Props> = ({
+export function BreakdownSeries({
   field,
   value,
   percentileRange,
   onLoadingChange,
-}) => {
+}: Props) {
   const { data, status } = useBreakdowns({
     field,
     value,
@@ -47,4 +47,4 @@ export const BreakdownSeries: FC<Props> = ({
       ))}
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
index 9066dd73159b1..407ec42f03ff5 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
@@ -33,7 +33,7 @@ const PercentileMarker = styled.span`
   bottom: 205px;
 `;
 
-export const PercentileAnnotations = ({ percentiles }: Props) => {
+export function PercentileAnnotations({ percentiles }: Props) {
   const dataValues = generateAnnotationData(percentiles) ?? [];
 
   const style: Partial<LineAnnotationStyle> = {
@@ -44,17 +44,17 @@ export const PercentileAnnotations = ({ percentiles }: Props) => {
     },
   };
 
-  const PercentileTooltip = ({
+  function PercentileTooltip({
     annotation,
   }: {
     annotation: LineAnnotationDatum;
-  }) => {
+  }) {
     return (
       <span data-cy="percentileTooltipTitle">
         {annotation.details}th Percentile
       </span>
     );
-  };
+  }
 
   return (
     <>
@@ -82,4 +82,4 @@ export const PercentileAnnotations = ({ percentiles }: Props) => {
       ))}
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
index adeff2b31fd93..c7545ff9a2764 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
@@ -24,7 +24,7 @@ export interface PercentileRange {
   max?: number | null;
 }
 
-export const PageLoadDistribution = () => {
+export function PageLoadDistribution() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { start, end, serviceName } = urlParams;
@@ -115,4 +115,4 @@ export const PageLoadDistribution = () => {
       />
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
index c6ef319f8a666..0f43c0ddf540d 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -13,7 +13,7 @@ import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageViewsChart } from '../Charts/PageViewsChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 
-export const PageViewsTrend = () => {
+export function PageViewsTrend() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { start, end, serviceName } = urlParams;
@@ -68,4 +68,4 @@ export const PageViewsTrend = () => {
       <PageViewsChart data={data} loading={status !== 'success'} />
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
index 2eb79257334d7..8c8164972328f 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -18,7 +18,7 @@ import { PageLoadDistribution } from './PageLoadDistribution';
 import { I18LABELS } from './translations';
 import { VisitorBreakdown } from './VisitorBreakdown';
 
-export const RumDashboard = () => {
+export function RumDashboard() {
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
@@ -54,4 +54,4 @@ export const RumDashboard = () => {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHeader/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHeader/index.tsx
index b1ff38fdd2d79..6b3fcb3b03466 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHeader/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHeader/index.tsx
@@ -5,16 +5,18 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { DatePicker } from '../../../shared/DatePicker';
 
-export const RumHeader: React.FC = ({ children }) => (
-  <>
-    <EuiFlexGroup alignItems="center" gutterSize="s">
-      <EuiFlexItem>{children}</EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <DatePicker />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </>
-);
+export function RumHeader({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>{children}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <DatePicker />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
index 2e17e27587b63..5c68ebb1667ab 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
@@ -11,7 +11,7 @@ import { VisitorBreakdownLabel } from '../translations';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 
-export const VisitorBreakdown = () => {
+export function VisitorBreakdown() {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { start, end, serviceName } = urlParams;
@@ -62,4 +62,4 @@ export const VisitorBreakdown = () => {
       </EuiFlexGroup>
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
index b330129f83785..f314fbbb1fba0 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
@@ -4,32 +4,38 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent } from 'react';
 import { act, wait } from '@testing-library/react';
 import cytoscape from 'cytoscape';
-import { CytoscapeContext } from './Cytoscape';
-import { EmptyBanner } from './EmptyBanner';
+import React, { ReactNode } from 'react';
 import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
 import { renderWithTheme } from '../../../utils/testHelpers';
+import { CytoscapeContext } from './Cytoscape';
+import { EmptyBanner } from './EmptyBanner';
 
 const cy = cytoscape({});
 
-const wrapper: FunctionComponent = ({ children }) => (
-  <MockApmPluginContextWrapper>
-    <CytoscapeContext.Provider value={cy}>{children}</CytoscapeContext.Provider>
-  </MockApmPluginContextWrapper>
-);
+function wrapper({ children }: { children: ReactNode }) {
+  return (
+    <MockApmPluginContextWrapper>
+      <CytoscapeContext.Provider value={cy}>
+        {children}
+      </CytoscapeContext.Provider>
+    </MockApmPluginContextWrapper>
+  );
+}
 
 describe('EmptyBanner', () => {
   describe('when cy is undefined', () => {
     it('renders null', () => {
-      const noCytoscapeWrapper: FunctionComponent = ({ children }) => (
-        <MockApmPluginContextWrapper>
-          <CytoscapeContext.Provider value={undefined}>
-            {children}
-          </CytoscapeContext.Provider>
-        </MockApmPluginContextWrapper>
-      );
+      function noCytoscapeWrapper({ children }: { children: ReactNode }) {
+        return (
+          <MockApmPluginContextWrapper>
+            <CytoscapeContext.Provider value={undefined}>
+              {children}
+            </CytoscapeContext.Provider>
+          </MockApmPluginContextWrapper>
+        );
+      }
       const component = renderWithTheme(<EmptyBanner />, {
         wrapper: noCytoscapeWrapper,
       });
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx
index 9e805058e8cb5..8557c3f0c0798 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx
@@ -34,26 +34,28 @@ interface Props {
   percentageLoaded: number;
 }
 
-export const LoadingOverlay = ({ isLoading, percentageLoaded }: Props) => (
-  <Container>
-    {isLoading && (
-      <Overlay>
-        <ProgressBarContainer>
-          <EuiProgress
-            value={percentageLoaded}
-            max={100}
-            color="primary"
-            size="m"
-          />
-        </ProgressBarContainer>
-        <EuiSpacer size="s" />
-        <EuiText size="s" textAlign="center">
-          {i18n.translate('xpack.apm.loadingServiceMap', {
-            defaultMessage:
-              'Loading service map... This might take a short while.',
-          })}
-        </EuiText>
-      </Overlay>
-    )}
-  </Container>
-);
+export function LoadingOverlay({ isLoading, percentageLoaded }: Props) {
+  return (
+    <Container>
+      {isLoading && (
+        <Overlay>
+          <ProgressBarContainer>
+            <EuiProgress
+              value={percentageLoaded}
+              max={100}
+              color="primary"
+              size="m"
+            />
+          </ProgressBarContainer>
+          <EuiSpacer size="s" />
+          <EuiText size="s" textAlign="center">
+            {i18n.translate('xpack.apm.loadingServiceMap', {
+              defaultMessage:
+                'Loading service map... This might take a short while.',
+            })}
+          </EuiText>
+        </Overlay>
+      )}
+    </Container>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
index 78466b2659bb7..4911d7f147d7c 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
@@ -34,20 +34,21 @@ interface ContentsProps {
 // @ts-ignore `documentMode` is not recognized as a valid property of `document`.
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 
-const FlexColumnGroup = (props: {
+function FlexColumnGroup(props: {
   children: React.ReactNode;
   style: React.CSSProperties;
   direction: 'column';
   gutterSize: 's';
-}) => {
+}) {
   if (isIE11) {
     const { direction, gutterSize, ...rest } = props;
     return <div {...rest} />;
   }
   return <EuiFlexGroup {...props} />;
-};
-const FlexColumnItem = (props: { children: React.ReactNode }) =>
-  isIE11 ? <div {...props} /> : <EuiFlexItem {...props} />;
+}
+function FlexColumnItem(props: { children: React.ReactNode }) {
+  return isIE11 ? <div {...props} /> : <EuiFlexItem {...props} />;
+}
 
 export function Contents({
   selectedNodeData,
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/index.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/index.test.tsx
index f36b94f2971cd..4a56f75b05de9 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/index.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/index.test.tsx
@@ -5,7 +5,7 @@
  */
 
 import { render } from '@testing-library/react';
-import React, { FunctionComponent } from 'react';
+import React, { ReactNode } from 'react';
 import { License } from '../../../../../licensing/common/license';
 import { LicenseContext } from '../../../context/LicenseContext';
 import { ServiceMap } from './';
@@ -22,13 +22,13 @@ const expiredLicense = new License({
   },
 });
 
-const Wrapper: FunctionComponent = ({ children }) => {
+function Wrapper({ children }: { children?: ReactNode }) {
   return (
     <LicenseContext.Provider value={expiredLicense}>
       <MockApmPluginContextWrapper>{children}</MockApmPluginContextWrapper>
     </LicenseContext.Provider>
   );
-};
+}
 
 describe('ServiceMap', () => {
   describe('with an inactive license', () => {
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
index 7f3d25efa6f44..d4be4da2ae1c5 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -29,7 +29,7 @@ interface ServiceMapProps {
   serviceName?: string;
 }
 
-export const ServiceMap = ({ serviceName }: ServiceMapProps) => {
+export function ServiceMap({ serviceName }: ServiceMapProps) {
   const theme = useTheme();
   const license = useLicense();
   const { urlParams } = useUrlParams();
@@ -101,4 +101,4 @@ export const ServiceMap = ({ serviceName }: ServiceMapProps) => {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
index 62ea3bc42860a..5537a73d228e8 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
@@ -36,7 +36,7 @@ const ServiceNodeName = styled.div`
   ${truncate(px(8 * unit))}
 `;
 
-const ServiceNodeOverview = () => {
+function ServiceNodeOverview() {
   const { uiFilters, urlParams } = useUrlParams();
   const { serviceName, start, end } = urlParams;
 
@@ -182,6 +182,6 @@ const ServiceNodeOverview = () => {
       </EuiFlexGroup>
     </>
   );
-};
+}
 
 export { ServiceNodeOverview };
diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx
index 0f23e230733b4..ce325a57426f5 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx
@@ -38,7 +38,7 @@ interface Props {
   refetch: () => void;
 }
 
-export const AgentConfigurationList = ({ status, data, refetch }: Props) => {
+export function AgentConfigurationList({ status, data, refetch }: Props) {
   const theme = useTheme();
   const [configToBeDeleted, setConfigToBeDeleted] = useState<Config | null>(
     null
@@ -219,4 +219,4 @@ export const AgentConfigurationList = ({ status, data, refetch }: Props) => {
       />
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateCustomLinkButton.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateCustomLinkButton.tsx
index 919cc4debe4d8..2e860ebe22c0f 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateCustomLinkButton.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateCustomLinkButton.tsx
@@ -7,15 +7,13 @@ import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-export const CreateCustomLinkButton = ({
-  onClick,
-}: {
-  onClick: () => void;
-}) => (
-  <EuiButton color="primary" fill onClick={onClick}>
-    {i18n.translate(
-      'xpack.apm.settings.customizeUI.customLink.createCustomLink',
-      { defaultMessage: 'Create custom link' }
-    )}
-  </EuiButton>
-);
+export function CreateCustomLinkButton({ onClick }: { onClick: () => void }) {
+  return (
+    <EuiButton color="primary" fill onClick={onClick}>
+      {i18n.translate(
+        'xpack.apm.settings.customizeUI.customLink.createCustomLink',
+        { defaultMessage: 'Create custom link' }
+      )}
+    </EuiButton>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/Documentation.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/Documentation.tsx
index 48a0288f11ae5..262d22be25272 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/Documentation.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/Documentation.tsx
@@ -9,8 +9,14 @@ import { ElasticDocsLink } from '../../../../../shared/Links/ElasticDocsLink';
 interface Props {
   label: string;
 }
-export const Documentation = ({ label }: Props) => (
-  <ElasticDocsLink section="/kibana" path="/custom-links.html" target="_blank">
-    {label}
-  </ElasticDocsLink>
-);
+export function Documentation({ label }: Props) {
+  return (
+    <ElasticDocsLink
+      section="/kibana"
+      path="/custom-links.html"
+      target="_blank"
+    >
+      {label}
+    </ElasticDocsLink>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FiltersSection.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FiltersSection.tsx
index daadc1bace9c4..8cf0f03175fc2 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FiltersSection.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FiltersSection.tsx
@@ -26,13 +26,13 @@ import {
   getSelectOptions,
 } from './helper';
 
-export const FiltersSection = ({
+export function FiltersSection({
   filters,
   onChangeFilters,
 }: {
   filters: Filter[];
   onChangeFilters: (filters: Filter[]) => void;
-}) => {
+}) {
   const onChangeFilter = (
     key: Filter['key'],
     value: Filter['value'],
@@ -147,25 +147,27 @@ export const FiltersSection = ({
       />
     </>
   );
-};
+}
 
-const AddFilterButton = ({
+function AddFilterButton({
   onClick,
   isDisabled,
 }: {
   onClick: () => void;
   isDisabled: boolean;
-}) => (
-  <EuiButtonEmpty
-    iconType="plusInCircle"
-    onClick={onClick}
-    disabled={isDisabled}
-  >
-    {i18n.translate(
-      'xpack.apm.settings.customizeUI.customLink.flyout.filters.addAnotherFilter',
-      {
-        defaultMessage: 'Add another filter',
-      }
-    )}
-  </EuiButtonEmpty>
-);
+}) {
+  return (
+    <EuiButtonEmpty
+      iconType="plusInCircle"
+      onClick={onClick}
+      disabled={isDisabled}
+    >
+      {i18n.translate(
+        'xpack.apm.settings.customizeUI.customLink.flyout.filters.addAnotherFilter',
+        {
+          defaultMessage: 'Add another filter',
+        }
+      )}
+    </EuiButtonEmpty>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FlyoutFooter.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FlyoutFooter.tsx
index 4fde75602990c..17c3fb265bca5 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FlyoutFooter.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FlyoutFooter.tsx
@@ -14,7 +14,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { DeleteButton } from './DeleteButton';
 
-export const FlyoutFooter = ({
+export function FlyoutFooter({
   onClose,
   isSaving,
   onDelete,
@@ -26,7 +26,7 @@ export const FlyoutFooter = ({
   onDelete: () => void;
   customLinkId?: string;
   isSaveButtonEnabled: boolean;
-}) => {
+}) {
   return (
     <EuiFlyoutFooter>
       <EuiFlexGroup justifyContent="spaceBetween">
@@ -61,4 +61,4 @@ export const FlyoutFooter = ({
       </EuiFlexGroup>
     </EuiFlyoutFooter>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.tsx
index b229157d1b1a8..b7250bda30966 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.tsx
@@ -41,7 +41,7 @@ const fetchTransaction = debounce(
 
 const getTextColor = (value?: string) => (value ? 'default' : 'subdued');
 
-export const LinkPreview = ({ label, url, filters }: Props) => {
+export function LinkPreview({ label, url, filters }: Props) {
   const [transaction, setTransaction] = useState<Transaction | undefined>();
 
   useEffect(() => {
@@ -128,4 +128,4 @@ export const LinkPreview = ({ label, url, filters }: Props) => {
       </EuiFlexGroup>
     </EuiPanel>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkSection.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkSection.tsx
index 6a31752d11705..49307cbb8efba 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkSection.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkSection.tsx
@@ -31,12 +31,7 @@ interface Props {
   onChangeUrl: (url: string) => void;
 }
 
-export const LinkSection = ({
-  label,
-  onChangeLabel,
-  url,
-  onChangeUrl,
-}: Props) => {
+export function LinkSection({ label, onChangeLabel, url, onChangeUrl }: Props) {
   const inputFields: InputField[] = [
     {
       name: 'label',
@@ -145,4 +140,4 @@ export const LinkSection = ({
       })}
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/index.tsx
index ccd98bd005666..9687846d6c520 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/index.tsx
@@ -37,13 +37,13 @@ interface Props {
 
 const filtersEmptyState: Filter[] = [{ key: '', value: '' }];
 
-export const CustomLinkFlyout = ({
+export function CustomLinkFlyout({
   onClose,
   onSave,
   onDelete,
   defaults,
   customLinkId,
-}: Props) => {
+}: Props) {
   const { toasts } = useApmPluginContext().core.notifications;
   const [isSaving, setIsSaving] = useState(false);
 
@@ -139,4 +139,4 @@ export const CustomLinkFlyout = ({
       </form>
     </EuiPortal>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkTable.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkTable.tsx
index f2aabc878bf2d..d512ea19c7892 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkTable.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkTable.tsx
@@ -24,10 +24,7 @@ interface Props {
   onCustomLinkSelected: (customLink: CustomLink) => void;
 }
 
-export const CustomLinkTable = ({
-  items = [],
-  onCustomLinkSelected,
-}: Props) => {
+export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
   const [searchTerm, setSearchTerm] = useState('');
 
   const columns = [
@@ -121,20 +118,22 @@ export const CustomLinkTable = ({
       />
     </>
   );
-};
+}
 
-const NoResultFound = ({ value }: { value: string }) => (
-  <EuiFlexGroup justifyContent="spaceAround">
-    <EuiFlexItem grow={false}>
-      <EuiText size="s">
-        {i18n.translate(
-          'xpack.apm.settings.customizeUI.customLink.table.noResultFound',
-          {
-            defaultMessage: `No results for "{value}".`,
-            values: { value },
-          }
-        )}
-      </EuiText>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+function NoResultFound({ value }: { value: string }) {
+  return (
+    <EuiFlexGroup justifyContent="spaceAround">
+      <EuiFlexItem grow={false}>
+        <EuiText size="s">
+          {i18n.translate(
+            'xpack.apm.settings.customizeUI.customLink.table.noResultFound',
+            {
+              defaultMessage: `No results for "{value}".`,
+              values: { value },
+            }
+          )}
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/EmptyPrompt.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/EmptyPrompt.tsx
index ee9350e320e1a..9411043c0b716 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/EmptyPrompt.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/EmptyPrompt.tsx
@@ -8,11 +8,11 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { CreateCustomLinkButton } from './CreateCustomLinkButton';
 
-export const EmptyPrompt = ({
+export function EmptyPrompt({
   onCreateCustomLinkClick,
 }: {
   onCreateCustomLinkClick: () => void;
-}) => {
+}) {
   return (
     <EuiEmptyPrompt
       iconType="link"
@@ -43,4 +43,4 @@ export const EmptyPrompt = ({
       actions={<CreateCustomLinkButton onClick={onCreateCustomLinkClick} />}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/Title.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/Title.tsx
index 95b8adb403981..22d8749d78834 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/Title.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/Title.tsx
@@ -7,34 +7,36 @@ import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 
-export const Title = () => (
-  <EuiFlexGroup alignItems="center">
-    <EuiFlexItem grow={false}>
-      <EuiTitle size="s">
-        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-          <EuiFlexItem grow={false}>
-            <h1>
-              {i18n.translate('xpack.apm.settings.customizeUI.customLink', {
-                defaultMessage: 'Custom Links',
-              })}
-            </h1>
-          </EuiFlexItem>
+export function Title() {
+  return (
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="s">
+          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <h1>
+                {i18n.translate('xpack.apm.settings.customizeUI.customLink', {
+                  defaultMessage: 'Custom Links',
+                })}
+              </h1>
+            </EuiFlexItem>
 
-          <EuiFlexItem grow={false}>
-            <EuiIconTip
-              type="iInCircle"
-              position="top"
-              content={i18n.translate(
-                'xpack.apm.settings.customizeUI.customLink.info',
-                {
-                  defaultMessage:
-                    'These links will be shown in the Actions context menu for transactions.',
-                }
-              )}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiTitle>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+            <EuiFlexItem grow={false}>
+              <EuiIconTip
+                type="iInCircle"
+                position="top"
+                content={i18n.translate(
+                  'xpack.apm.settings.customizeUI.customLink.info',
+                  {
+                    defaultMessage:
+                      'These links will be shown in the Actions context menu for transactions.',
+                  }
+                )}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiTitle>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
index b4acc783d08ed..aa34515ea460a 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
@@ -18,7 +18,7 @@ import { Title } from './Title';
 import { CreateCustomLinkButton } from './CreateCustomLinkButton';
 import { LicensePrompt } from '../../../../shared/LicensePrompt';
 
-export const CustomLinkOverview = () => {
+export function CustomLinkOverview() {
   const license = useLicense();
   const hasValidLicense = license?.isActive && license?.hasAtLeast('gold');
 
@@ -107,4 +107,4 @@ export const CustomLinkOverview = () => {
       </EuiPanel>
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx
index c88eba1c87b57..84408a7624403 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/index.tsx
@@ -9,7 +9,7 @@ import { EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { CustomLinkOverview } from './CustomLink';
 
-export const CustomizeUI = () => {
+export function CustomizeUI() {
   return (
     <>
       <EuiTitle size="l">
@@ -23,4 +23,4 @@ export const CustomizeUI = () => {
       <CustomLinkOverview />
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx
index c9328c4988e5f..cb2090d1cbe2b 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx
@@ -31,11 +31,11 @@ interface Props {
   onCreateJobSuccess: () => void;
   onCancel: () => void;
 }
-export const AddEnvironments = ({
+export function AddEnvironments({
   currentEnvironments,
   onCreateJobSuccess,
   onCancel,
-}: Props) => {
+}: Props) {
   const { notifications, application } = useApmPluginContext().core;
   const canCreateJob = !!application.capabilities.ml.canCreateJob;
   const { toasts } = notifications;
@@ -175,4 +175,4 @@ export const AddEnvironments = ({
       <EuiSpacer size="l" />
     </EuiPanel>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx
index abbe1e2c83c7b..dab30761c6ebe 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx
@@ -28,7 +28,7 @@ const DEFAULT_VALUE: AnomalyDetectionApiResponse = {
   errorCode: undefined,
 };
 
-export const AnomalyDetection = () => {
+export function AnomalyDetection() {
   const plugin = useApmPluginContext();
   const canGetJobs = !!plugin.core.application.capabilities.ml.canGetJobs;
   const license = useLicense();
@@ -112,4 +112,4 @@ export const AnomalyDetection = () => {
       )}
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx
index f3b8822010f59..8494004ae5639 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx
@@ -65,7 +65,7 @@ interface Props {
   status: FETCH_STATUS;
   onAddEnvironments: () => void;
 }
-export const JobsList = ({ data, status, onAddEnvironments }: Props) => {
+export function JobsList({ data, status, onAddEnvironments }: Props) {
   const { jobs, hasLegacyJobs, errorCode } = data;
 
   return (
@@ -127,7 +127,7 @@ export const JobsList = ({ data, status, onAddEnvironments }: Props) => {
       {hasLegacyJobs && <LegacyJobsCallout />}
     </EuiPanel>
   );
-};
+}
 
 function getNoItemsMessage({
   status,
diff --git a/x-pack/plugins/apm/public/components/app/Settings/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/index.tsx
index 6d8571bf57767..bd2ea706e492d 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiButtonEmpty,
@@ -17,7 +17,7 @@ import { HomeLink } from '../../shared/Links/apm/HomeLink';
 import { useLocation } from '../../../hooks/useLocation';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 
-export const Settings: React.FC = (props) => {
+export function Settings(props: { children: ReactNode }) {
   const { search, pathname } = useLocation();
   return (
     <>
@@ -84,4 +84,4 @@ export const Settings: React.FC = (props) => {
       </EuiPage>
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/TraceLink/index.tsx b/x-pack/plugins/apm/public/components/app/TraceLink/index.tsx
index 3eb5a855ee3b4..55ab275002b4e 100644
--- a/x-pack/plugins/apm/public/components/app/TraceLink/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceLink/index.tsx
@@ -58,7 +58,7 @@ const redirectToTracePage = ({
     },
   });
 
-export const TraceLink = () => {
+export function TraceLink() {
   const { urlParams } = useUrlParams();
   const { traceIdLink: traceId, rangeFrom, rangeTo } = urlParams;
 
@@ -93,4 +93,4 @@ export const TraceLink = () => {
       <EuiEmptyPrompt iconType="apmTrace" title={<h2>Fetching trace...</h2>} />
     </CentralizedContainer>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
index 1244dd01a3b43..90bbe0a5a2135 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
@@ -7,19 +7,19 @@
 import { EuiIconTip, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import d3 from 'd3';
-import React, { FunctionComponent, useCallback } from 'react';
 import { isEmpty } from 'lodash';
+import React, { useCallback } from 'react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TransactionDistributionAPIResponse } from '../../../../../server/lib/transactions/distribution';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { getDurationFormatter } from '../../../../utils/formatters';
+import { history } from '../../../../utils/history';
 // @ts-ignore
 import Histogram from '../../../shared/charts/Histogram';
 import { EmptyMessage } from '../../../shared/EmptyMessage';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
-import { history } from '../../../../utils/history';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
 
 interface IChartPoint {
@@ -99,9 +99,7 @@ interface Props {
   bucketIndex: number;
 }
 
-export const TransactionDistribution: FunctionComponent<Props> = (
-  props: Props
-) => {
+export function TransactionDistribution(props: Props) {
   const {
     distribution,
     urlParams: { transactionType },
@@ -211,4 +209,4 @@ export const TransactionDistribution: FunctionComponent<Props> = (
       />
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx
index 89757b227f8fd..20f93bce29ca8 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx
@@ -12,21 +12,23 @@ interface Props {
   count: number;
 }
 
-export const ErrorCount = ({ count }: Props) => (
-  <EuiText size="xs">
-    <h4>
-      <EuiTextColor
-        color="danger"
-        onClick={(e: React.MouseEvent) => {
-          e.stopPropagation();
-        }}
-      >
-        {i18n.translate('xpack.apm.transactionDetails.errorCount', {
-          defaultMessage:
-            '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}',
-          values: { errorCount: count },
-        })}
-      </EuiTextColor>
-    </h4>
-  </EuiText>
-);
+export function ErrorCount({ count }: Props) {
+  return (
+    <EuiText size="xs">
+      <h4>
+        <EuiTextColor
+          color="danger"
+          onClick={(e: React.MouseEvent) => {
+            e.stopPropagation();
+          }}
+        >
+          {i18n.translate('xpack.apm.transactionDetails.errorCount', {
+            defaultMessage:
+              '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}',
+            values: { errorCount: count },
+          })}
+        </EuiTextColor>
+      </h4>
+    </EuiText>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx
index 64e20cf10d8aa..4f32df2b3115e 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx
@@ -6,7 +6,7 @@
 
 import { EuiIcon, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment, ReactNode, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { px, units } from '../../../../../../../style/variables';
 
@@ -16,13 +16,11 @@ const ToggleButtonContainer = styled.div`
 `;
 
 interface Props {
+  children: ReactNode;
   previewHeight: number;
 }
 
-export const TruncateHeightSection: React.FC<Props> = ({
-  children,
-  previewHeight,
-}) => {
+export function TruncateHeightSection({ children, previewHeight }: Props) {
   const contentContainerEl = useRef<HTMLDivElement>(null);
 
   const [showToggle, setShowToggle] = useState(true);
@@ -73,4 +71,4 @@ export const TruncateHeightSection: React.FC<Props> = ({
       ) : null}
     </Fragment>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
index f0150e5a1b758..7e1dbddf56025 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
@@ -15,12 +15,13 @@ interface Props {
   location: Location;
   toggleFlyout: ({ location }: { location: Location }) => void;
 }
-export const WaterfallFlyout: React.FC<Props> = ({
+
+export function WaterfallFlyout({
   waterfallItemId,
   waterfall,
   location,
   toggleFlyout,
-}) => {
+}: Props) {
   const currentItem = waterfall.items.find(
     (item) => item.id === waterfallItemId
   );
@@ -58,4 +59,4 @@ export const WaterfallFlyout: React.FC<Props> = ({
     default:
       return null;
   }
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
index a25ae71947f21..a4d42bcf51d01 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
@@ -109,13 +109,11 @@ function PrefixIcon({ item }: { item: IWaterfallItem }) {
 }
 
 interface SpanActionToolTipProps {
+  children: ReactNode;
   item?: IWaterfallItem;
 }
 
-const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
-  item,
-  children,
-}) => {
+function SpanActionToolTip({ item, children }: SpanActionToolTipProps) {
   if (item?.docType === 'span') {
     return (
       <EuiToolTip content={`${item.doc.span.subtype}.${item.doc.span.action}`}>
@@ -124,7 +122,7 @@ const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
     );
   }
   return <>{children}</>;
-};
+}
 
 function Duration({ item }: { item: IWaterfallItem }) {
   return (
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
index 78235594f40ec..1fd0ec761b1ae 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
@@ -67,12 +67,12 @@ interface Props {
   exceedsMax: boolean;
 }
 
-export const Waterfall: React.FC<Props> = ({
+export function Waterfall({
   waterfall,
   exceedsMax,
   waterfallItemId,
   location,
-}) => {
+}: Props) {
   const itemContainerHeight = 58; // TODO: This is a nasty way to calculate the height of the svg element. A better approach should be found
   const waterfallHeight = itemContainerHeight * waterfall.items.length;
 
@@ -81,7 +81,7 @@ export const Waterfall: React.FC<Props> = ({
   const agentMarks = getAgentMarks(waterfall.entryTransaction);
   const errorMarks = getErrorMarks(waterfall.errorItems, serviceColors);
 
-  const renderWaterfallItem = (item: IWaterfallItem) => {
+  function renderWaterfallItem(item: IWaterfallItem) {
     const errorCount =
       item.docType === 'transaction'
         ? waterfall.errorsPerTransaction[item.doc.transaction.id]
@@ -99,7 +99,7 @@ export const Waterfall: React.FC<Props> = ({
         onClick={() => toggleFlyout({ item, location })}
       />
     );
-  };
+  }
 
   return (
     <Container>
@@ -134,4 +134,4 @@ export const Waterfall: React.FC<Props> = ({
       />
     </Container>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
index beb0c03f37f8f..12676b7c15f1c 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
@@ -37,14 +37,14 @@ interface Props {
   traceSamples: IBucket['samples'];
 }
 
-export const WaterfallWithSummmary: React.FC<Props> = ({
+export function WaterfallWithSummmary({
   urlParams,
   location,
   waterfall,
   exceedsMax,
   isLoading,
   traceSamples,
-}) => {
+}: Props) {
   const [sampleActivePage, setSampleActivePage] = useState(0);
 
   useEffect(() => {
@@ -135,4 +135,4 @@ export const WaterfallWithSummmary: React.FC<Props> = ({
       />
     </EuiPanel>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx
index cccbdc8d86d91..4ffd422801816 100644
--- a/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx
@@ -5,29 +5,31 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { KueryBar } from '../KueryBar';
 import { DatePicker } from '../DatePicker';
 import { EnvironmentFilter } from '../EnvironmentFilter';
 
-export const ApmHeader: React.FC = ({ children }) => (
-  <>
-    <EuiFlexGroup alignItems="center" gutterSize="s">
-      <EuiFlexItem>{children}</EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <DatePicker />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+export function ApmHeader({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>{children}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <DatePicker />
+        </EuiFlexItem>
+      </EuiFlexGroup>
 
-    <EuiSpacer />
+      <EuiSpacer />
 
-    <EuiFlexGroup alignItems="flexStart" gutterSize="s">
-      <EuiFlexItem grow={3}>
-        <KueryBar />
-      </EuiFlexItem>
-      <EuiFlexItem grow={1}>
-        <EnvironmentFilter />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </>
-);
+      <EuiFlexGroup alignItems="flexStart" gutterSize="s">
+        <EuiFlexItem grow={3}>
+          <KueryBar />
+        </EuiFlexItem>
+        <EuiFlexItem grow={1}>
+          <EnvironmentFilter />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx b/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx
index 215e97aebf646..36e33fba89fbb 100644
--- a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { LocationProvider } from '../../../../context/LocationContext';
 import {
   UrlParamsContext,
@@ -21,18 +21,24 @@ import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContex
 
 const mockHistoryPush = jest.spyOn(history, 'push');
 const mockRefreshTimeRange = jest.fn();
-const MockUrlParamsProvider: React.FC<{
+function MockUrlParamsProvider({
+  params = {},
+  children,
+}: {
+  children: ReactNode;
   params?: IUrlParams;
-}> = ({ params = {}, children }) => (
-  <UrlParamsContext.Provider
-    value={{
-      urlParams: params,
-      refreshTimeRange: mockRefreshTimeRange,
-      uiFilters: useUiFilters(params),
-    }}
-    children={children}
-  />
-);
+}) {
+  return (
+    <UrlParamsContext.Provider
+      value={{
+        urlParams: params,
+        refreshTimeRange: mockRefreshTimeRange,
+        uiFilters: useUiFilters(params),
+      }}
+      children={children}
+    />
+  );
+}
 
 function mountDatePicker(params?: IUrlParams) {
   return mount(
diff --git a/x-pack/plugins/apm/public/components/shared/EmptyMessage.tsx b/x-pack/plugins/apm/public/components/shared/EmptyMessage.tsx
index f300ed9d65aac..296df901d309e 100644
--- a/x-pack/plugins/apm/public/components/shared/EmptyMessage.tsx
+++ b/x-pack/plugins/apm/public/components/shared/EmptyMessage.tsx
@@ -14,7 +14,7 @@ interface Props {
   hideSubheading?: boolean;
 }
 
-const EmptyMessage: React.FC<Props> = ({
+function EmptyMessage({
   heading = i18n.translate('xpack.apm.emptyMessage.noDataFoundLabel', {
     defaultMessage: 'No data found.',
   }),
@@ -22,7 +22,7 @@ const EmptyMessage: React.FC<Props> = ({
     defaultMessage: 'Try another time range or reset the search filter.',
   }),
   hideSubheading = false,
-}) => {
+}: Props) {
   return (
     <EuiEmptyPrompt
       titleSize="s"
@@ -30,6 +30,6 @@ const EmptyMessage: React.FC<Props> = ({
       body={!hideSubheading && subheading}
     />
   );
-};
+}
 
 export { EmptyMessage };
diff --git a/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx b/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx
index 47e52285b6851..a430eea1cf40c 100644
--- a/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx
@@ -11,7 +11,7 @@ import { EuiBadge, EuiToolTip } from '@elastic/eui';
 interface Props {
   environments: string[];
 }
-export const EnvironmentBadge: React.FC<Props> = ({ environments = [] }) => {
+export function EnvironmentBadge({ environments = [] }: Props) {
   if (environments.length < 3) {
     return (
       <>
@@ -42,4 +42,4 @@ export const EnvironmentBadge: React.FC<Props> = ({ environments = [] }) => {
       </EuiBadge>
     </EuiToolTip>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
index 28dd5e7a5a363..1490ca42679b9 100644
--- a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
@@ -65,7 +65,7 @@ function getOptions(environments: string[]) {
   ];
 }
 
-export const EnvironmentFilter: React.FC = () => {
+export function EnvironmentFilter() {
   const location = useLocation();
   const { uiFilters, urlParams } = useUrlParams();
 
@@ -90,4 +90,4 @@ export const EnvironmentFilter: React.FC = () => {
       isLoading={status === 'loading'}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx b/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx
index 8538ea6a510ce..d29ccd8abcd42 100644
--- a/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/EuiTabLink.tsx
@@ -32,7 +32,7 @@ const Wrapper = styled.div<{ isSelected: boolean }>`
   }
 `;
 
-const EuiTabLink = (props: Props) => {
+function EuiTabLink(props: Props) {
   const { isSelected, children } = props;
 
   const className = cls('euiTab', {
@@ -44,6 +44,6 @@ const EuiTabLink = (props: Props) => {
       <span className={'euiTab__content'}>{children}</span>
     </Wrapper>
   );
-};
+}
 
 export { EuiTabLink };
diff --git a/x-pack/plugins/apm/public/components/shared/HeightRetainer/index.tsx b/x-pack/plugins/apm/public/components/shared/HeightRetainer/index.tsx
index be8ff87617c80..5c8755f9f586f 100644
--- a/x-pack/plugins/apm/public/components/shared/HeightRetainer/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/HeightRetainer/index.tsx
@@ -6,7 +6,12 @@
 
 import React, { useEffect, useRef } from 'react';
 
-export const HeightRetainer: React.FC = (props) => {
+export function HeightRetainer(
+  props: React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+) {
   const containerElement = useRef<HTMLDivElement>(null);
   const minHeight = useRef<number>(0);
 
@@ -26,4 +31,4 @@ export const HeightRetainer: React.FC = (props) => {
       style={{ minHeight: minHeight.current }}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
index 6ddc4eecba7ed..502f5f0034b5f 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
@@ -112,7 +112,6 @@ export function KueryBar() {
 
       setState({ ...state, suggestions, isLoadingSuggestions: false });
     } catch (e) {
-      // eslint-disable-next-line no-console
       console.error('Error while fetching suggestions', e);
     }
   }
diff --git a/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx b/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx
index d8464fdfa8481..50be268d9ccd0 100644
--- a/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx
@@ -14,7 +14,7 @@ interface Props {
   showBetaBadge?: boolean;
 }
 
-export const LicensePrompt = ({ text, showBetaBadge = false }: Props) => {
+export function LicensePrompt({ text, showBetaBadge = false }: Props) {
   const licensePageUrl = useKibanaUrl(
     '/app/kibana',
     '/management/stack/license_management/home'
@@ -60,4 +60,4 @@ export const LicensePrompt = ({ text, showBetaBadge = false }: Props) => {
   );
 
   return <>{showBetaBadge ? renderWithBetaBadge : renderLicenseBody}</>;
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverErrorLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverErrorLink.tsx
index 5679e31a9898b..d83f10cf1975f 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverErrorLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverErrorLink.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   ERROR_GROUP_ID,
   SERVICE_NAME,
@@ -32,13 +32,18 @@ function getDiscoverQuery(error: APMError, kuery?: string) {
   };
 }
 
-const DiscoverErrorLink: React.FC<{
+function DiscoverErrorLink({
+  error,
+  kuery,
+  children,
+}: {
+  children?: ReactNode;
   readonly error: APMError;
   readonly kuery?: string;
-}> = ({ error, kuery, children }) => {
+}) {
   return (
     <DiscoverLink query={getDiscoverQuery(error, kuery)} children={children} />
   );
-};
+}
 
 export { DiscoverErrorLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverSpanLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverSpanLink.tsx
index 5fce3e842d8da..d7751c43b5943 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverSpanLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverSpanLink.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { SPAN_ID } from '../../../../../common/elasticsearch_fieldnames';
 import { Span } from '../../../../../typings/es_schemas/ui/span';
 import { DiscoverLink } from './DiscoverLink';
@@ -22,8 +22,12 @@ function getDiscoverQuery(span: Span) {
   };
 }
 
-export const DiscoverSpanLink: React.FC<{
+export function DiscoverSpanLink({
+  span,
+  children,
+}: {
   readonly span: Span;
-}> = ({ span, children }) => {
+  children?: ReactNode;
+}) {
   return <DiscoverLink query={getDiscoverQuery(span)} children={children} />;
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverTransactionLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverTransactionLink.tsx
index e2500617155c1..223fabbdb0d6f 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverTransactionLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverTransactionLink.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   PROCESSOR_EVENT,
   TRACE_ID,
@@ -32,10 +32,14 @@ export function getDiscoverQuery(transaction: Transaction) {
   };
 }
 
-export const DiscoverTransactionLink: React.FC<{
+export function DiscoverTransactionLink({
+  transaction,
+  children,
+}: {
   readonly transaction: Transaction;
-}> = ({ transaction, children }) => {
+  children?: ReactNode;
+}) {
   return (
     <DiscoverLink query={getDiscoverQuery(transaction)} children={children} />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx
index f3c5b49287293..887ac2ff6bbb9 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx
@@ -4,24 +4,25 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { EuiLink } from '@elastic/eui';
 import { useTimeSeriesExplorerHref } from './useTimeSeriesExplorerHref';
 
 interface Props {
+  children?: ReactNode;
   jobId: string;
   external?: boolean;
   serviceName?: string;
   transactionType?: string;
 }
 
-export const MLJobLink: React.FC<Props> = ({
+export function MLJobLink({
   jobId,
   serviceName,
   transactionType,
   external,
   children,
-}) => {
+}: Props) {
   const href = useTimeSeriesExplorerHref({
     jobId,
     serviceName,
@@ -36,4 +37,4 @@ export const MLJobLink: React.FC<Props> = ({
       target={external ? '_blank' : undefined}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorDetailLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorDetailLink.tsx
index c788da6a0d240..1ff32b17f3245 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorDetailLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorDetailLink.tsx
@@ -11,13 +11,13 @@ interface Props extends APMLinkExtendProps {
   errorGroupId: string;
 }
 
-const ErrorDetailLink = ({ serviceName, errorGroupId, ...rest }: Props) => {
+function ErrorDetailLink({ serviceName, errorGroupId, ...rest }: Props) {
   return (
     <APMLink
       path={`/services/${serviceName}/errors/${errorGroupId}`}
       {...rest}
     />
   );
-};
+}
 
 export { ErrorDetailLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorOverviewLink.tsx
index 684531d50897c..862b1ac649648 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/ErrorOverviewLink.tsx
@@ -14,7 +14,7 @@ interface Props extends APMLinkExtendProps {
   query?: APMQueryParams;
 }
 
-const ErrorOverviewLink = ({ serviceName, query, ...rest }: Props) => {
+function ErrorOverviewLink({ serviceName, query, ...rest }: Props) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(
@@ -35,6 +35,6 @@ const ErrorOverviewLink = ({ serviceName, query, ...rest }: Props) => {
       {...rest}
     />
   );
-};
+}
 
 export { ErrorOverviewLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/HomeLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/HomeLink.tsx
index 92ff3164880e8..724b9536dfaa3 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/HomeLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/HomeLink.tsx
@@ -6,8 +6,8 @@
 import React from 'react';
 import { APMLink, APMLinkExtendProps } from './APMLink';
 
-const HomeLink = (props: APMLinkExtendProps) => {
+function HomeLink(props: APMLinkExtendProps) {
   return <APMLink path="/" {...props} />;
-};
+}
 
 export { HomeLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/MetricOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/MetricOverviewLink.tsx
index bd3e3b36a8601..35ba5db68d507 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/MetricOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/MetricOverviewLink.tsx
@@ -12,7 +12,7 @@ interface Props extends APMLinkExtendProps {
   serviceName: string;
 }
 
-const MetricOverviewLink = ({ serviceName, ...rest }: Props) => {
+function MetricOverviewLink({ serviceName, ...rest }: Props) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(
@@ -30,6 +30,6 @@ const MetricOverviewLink = ({ serviceName, ...rest }: Props) => {
       {...rest}
     />
   );
-};
+}
 
 export { MetricOverviewLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceMapLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceMapLink.tsx
index 36c108160bdb2..ff8b1354daeb5 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceMapLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceMapLink.tsx
@@ -16,11 +16,11 @@ interface ServiceMapLinkProps extends APMLinkExtendProps {
   serviceName?: string;
 }
 
-const ServiceMapLink = ({ serviceName, ...rest }: ServiceMapLinkProps) => {
+function ServiceMapLink({ serviceName, ...rest }: ServiceMapLinkProps) {
   const path = serviceName
     ? `/services/${serviceName}/service-map`
     : '/service-map';
   return <APMLink path={path} {...rest} />;
-};
+}
 
 export { ServiceMapLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeMetricOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeMetricOverviewLink.tsx
index 1473221cca2be..2553ec4353194 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeMetricOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeMetricOverviewLink.tsx
@@ -13,11 +13,11 @@ interface Props extends APMLinkExtendProps {
   serviceNodeName: string;
 }
 
-const ServiceNodeMetricOverviewLink = ({
+function ServiceNodeMetricOverviewLink({
   serviceName,
   serviceNodeName,
   ...rest
-}: Props) => {
+}: Props) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(
@@ -37,6 +37,6 @@ const ServiceNodeMetricOverviewLink = ({
       {...rest}
     />
   );
-};
+}
 
 export { ServiceNodeMetricOverviewLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeOverviewLink.tsx
index b479ab77e1127..111c2391cd54f 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceNodeOverviewLink.tsx
@@ -12,7 +12,7 @@ interface Props extends APMLinkExtendProps {
   serviceName: string;
 }
 
-const ServiceNodeOverviewLink = ({ serviceName, ...rest }: Props) => {
+function ServiceNodeOverviewLink({ serviceName, ...rest }: Props) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(
@@ -30,6 +30,6 @@ const ServiceNodeOverviewLink = ({ serviceName, ...rest }: Props) => {
       {...rest}
     />
   );
-};
+}
 
 export { ServiceNodeOverviewLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceOverviewLink.tsx
index 577209a26e46b..2081fc4767903 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/ServiceOverviewLink.tsx
@@ -14,12 +14,12 @@ import { APMLink, APMLinkExtendProps } from './APMLink';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { pickKeys } from '../../../../../common/utils/pick_keys';
 
-const ServiceOverviewLink = (props: APMLinkExtendProps) => {
+function ServiceOverviewLink(props: APMLinkExtendProps) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(urlParams, 'host', 'agentName');
 
   return <APMLink path="/services" query={persistedFilters} {...props} />;
-};
+}
 
 export { ServiceOverviewLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/SettingsLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/SettingsLink.tsx
index 853972f4df402..80f3053b86f93 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/SettingsLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/SettingsLink.tsx
@@ -6,8 +6,8 @@
 import React from 'react';
 import { APMLink, APMLinkExtendProps } from './APMLink';
 
-const SettingsLink = (props: APMLinkExtendProps) => {
+function SettingsLink(props: APMLinkExtendProps) {
   return <APMLink path="/settings" {...props} />;
-};
+}
 
 export { SettingsLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/TraceOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/TraceOverviewLink.tsx
index dc4519365cbc2..8f3ea191fab1a 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/TraceOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/TraceOverviewLink.tsx
@@ -14,7 +14,7 @@ import { APMLink, APMLinkExtendProps } from './APMLink';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { pickKeys } from '../../../../../common/utils/pick_keys';
 
-const TraceOverviewLink = (props: APMLinkExtendProps) => {
+function TraceOverviewLink(props: APMLinkExtendProps) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(
@@ -26,6 +26,6 @@ const TraceOverviewLink = (props: APMLinkExtendProps) => {
   );
 
   return <APMLink path="/traces" query={persistedFilters} {...props} />;
-};
+}
 
 export { TraceOverviewLink };
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx
index c7eba1984472e..2ca3dce5da9ce 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx
@@ -17,14 +17,14 @@ interface Props extends APMLinkExtendProps {
   transactionType: string;
 }
 
-export const TransactionDetailLink = ({
+export function TransactionDetailLink({
   serviceName,
   traceId,
   transactionId,
   transactionName,
   transactionType,
   ...rest
-}: Props) => {
+}: Props) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(
@@ -46,4 +46,4 @@ export const TransactionDetailLink = ({
       {...rest}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx
index ccef83ee73fb8..adc64f5a2d3dc 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx
@@ -12,7 +12,7 @@ interface Props extends APMLinkExtendProps {
   serviceName: string;
 }
 
-const TransactionOverviewLink = ({ serviceName, ...rest }: Props) => {
+function TransactionOverviewLink({ serviceName, ...rest }: Props) {
   const { urlParams } = useUrlParams();
 
   const persistedFilters = pickKeys(
@@ -31,6 +31,6 @@ const TransactionOverviewLink = ({ serviceName, ...rest }: Props) => {
       {...rest}
     />
   );
-};
+}
 
 export { TransactionOverviewLink };
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
index 9191f4e797637..2090a92bf0de4 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
@@ -20,24 +20,26 @@ interface Props {
   onRemove: (val: string) => void;
 }
 
-const FilterBadgeList = ({ onRemove, value }: Props) => (
-  <EuiFlexGrid gutterSize="s">
-    {value.map((val) => (
-      <EuiFlexItem key={val} grow={false}>
-        <button
-          type="button"
-          onClick={() => {
-            onRemove(val);
-          }}
-        >
-          <EuiBadge color="hollow">
-            <BadgeText>{val}</BadgeText>
-            <EuiIcon type="cross" />
-          </EuiBadge>
-        </button>
-      </EuiFlexItem>
-    ))}
-  </EuiFlexGrid>
-);
+function FilterBadgeList({ onRemove, value }: Props) {
+  return (
+    <EuiFlexGrid gutterSize="s">
+      {value.map((val) => (
+        <EuiFlexItem key={val} grow={false}>
+          <button
+            type="button"
+            onClick={() => {
+              onRemove(val);
+            }}
+          >
+            <EuiBadge color="hollow">
+              <BadgeText>{val}</BadgeText>
+              <EuiIcon type="cross" />
+            </EuiBadge>
+          </button>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGrid>
+  );
+}
 
 export { FilterBadgeList };
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx
index 26125ab0f5343..0d306f5133716 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx
@@ -24,7 +24,7 @@ const Button = styled(EuiButtonEmpty).attrs(() => ({
 
 type Props = React.ComponentProps<typeof Button>;
 
-export const FilterTitleButton = (props: Props) => {
+export function FilterTitleButton(props: Props) {
   return (
     <Button {...props}>
       <EuiTitle size="xxxs" textTransform="uppercase">
@@ -32,4 +32,4 @@ export const FilterTitleButton = (props: Props) => {
       </EuiTitle>
     </Button>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
index 167574f9aa00d..c13439a3c5928 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
@@ -66,14 +66,7 @@ interface Props {
 
 type Option = EuiSelectable['props']['options'][0];
 
-const Filter = ({
-  name,
-  title,
-  options,
-  onChange,
-  value,
-  showCount,
-}: Props) => {
+function Filter({ name, title, options, onChange, value, showCount }: Props) {
   const [showPopover, setShowPopover] = useState(false);
 
   const toggleShowPopover = () => setShowPopover((show) => !show);
@@ -176,6 +169,6 @@ const Filter = ({
       ) : null}
     </>
   );
-};
+}
 
 export { Filter };
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx
index 405a4cacae714..99656b05db450 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx
@@ -21,7 +21,7 @@ interface Props {
   loading: boolean;
 }
 
-const ServiceNameFilter = ({ loading, serviceNames }: Props) => {
+function ServiceNameFilter({ loading, serviceNames }: Props) {
   const {
     urlParams: { serviceName },
   } = useUrlParams();
@@ -72,6 +72,6 @@ const ServiceNameFilter = ({ loading, serviceNames }: Props) => {
       />
     </>
   );
-};
+}
 
 export { ServiceNameFilter };
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx
index 0e6b1c5904fc5..afd2d023d16ba 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx
@@ -20,7 +20,7 @@ interface Props {
   transactionTypes: string[];
 }
 
-const TransactionTypeFilter = ({ transactionTypes }: Props) => {
+function TransactionTypeFilter({ transactionTypes }: Props) {
   const {
     urlParams: { transactionType },
   } = useUrlParams();
@@ -59,6 +59,6 @@ const TransactionTypeFilter = ({ transactionTypes }: Props) => {
       />
     </>
   );
-};
+}
 
 export { TransactionTypeFilter };
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx
index 020b7481c68ea..fedf96b4cc4ea 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx
@@ -31,13 +31,13 @@ const ButtonWrapper = styled.div`
   display: inline-block;
 `;
 
-const LocalUIFilters = ({
+function LocalUIFilters({
   projection,
   params,
   filterNames,
   children,
   showCount = true,
-}: Props) => {
+}: Props) {
   const { filters, setFilterValue, clearValues } = useLocalUIFilters({
     filterNames,
     projection,
@@ -91,6 +91,6 @@ const LocalUIFilters = ({
       ) : null}
     </>
   );
-};
+}
 
 export { LocalUIFilters };
diff --git a/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx b/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx
index eace3035a3555..8dfb1e0ce960d 100644
--- a/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx
@@ -91,18 +91,20 @@ export function MetadataTable({ sections }: Props) {
   );
 }
 
-const NoResultFound = ({ value }: { value: string }) => (
-  <EuiFlexGroup justifyContent="spaceAround">
-    <EuiFlexItem grow={false}>
-      <EuiText size="s">
-        {i18n.translate(
-          'xpack.apm.propertiesTable.agentFeature.noResultFound',
-          {
-            defaultMessage: `No results for "{value}".`,
-            values: { value },
-          }
-        )}
-      </EuiText>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+function NoResultFound({ value }: { value: string }) {
+  return (
+    <EuiFlexGroup justifyContent="spaceAround">
+      <EuiFlexItem grow={false}>
+        <EuiText size="s">
+          {i18n.translate(
+            'xpack.apm.propertiesTable.agentFeature.noResultFound',
+            {
+              defaultMessage: `No results for "{value}".`,
+              values: { value },
+            }
+          )}
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/SelectWithPlaceholder/index.tsx b/x-pack/plugins/apm/public/components/shared/SelectWithPlaceholder/index.tsx
index e0da91fae2ba7..02939b18401fe 100644
--- a/x-pack/plugins/apm/public/components/shared/SelectWithPlaceholder/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/SelectWithPlaceholder/index.tsx
@@ -19,6 +19,7 @@ const DEFAULT_PLACEHOLDER = i18n.translate('xpack.apm.selectPlaceholder', {
  * with `hasNoInitialSelection`. It uses the `placeholder` prop to populate
  * the first option as the initial, not selected option.
  */
+// eslint-disable-next-line react/function-component-definition
 export const SelectWithPlaceholder: typeof EuiSelect = (props) => {
   const placeholder = props.placeholder || DEFAULT_PLACEHOLDER;
   return (
diff --git a/x-pack/plugins/apm/public/components/shared/ServiceAlertTrigger/PopoverExpression/index.tsx b/x-pack/plugins/apm/public/components/shared/ServiceAlertTrigger/PopoverExpression/index.tsx
index 1abdb94c8313e..b07672eeaee06 100644
--- a/x-pack/plugins/apm/public/components/shared/ServiceAlertTrigger/PopoverExpression/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/ServiceAlertTrigger/PopoverExpression/index.tsx
@@ -13,7 +13,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-export const PopoverExpression = (props: Props) => {
+export function PopoverExpression(props: Props) {
   const { title, value, children } = props;
 
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -36,4 +36,4 @@ export const PopoverExpression = (props: Props) => {
       {children}
     </EuiPopover>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx
index 48580146c6fe1..5891895629318 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx
@@ -29,7 +29,7 @@ interface Props {
   isLibraryFrame: boolean;
 }
 
-const FrameHeading: React.FC<Props> = ({ stackframe, isLibraryFrame }) => {
+function FrameHeading({ stackframe, isLibraryFrame }: Props) {
   const FileDetail = isLibraryFrame
     ? LibraryFrameFileDetail
     : AppFrameFileDetail;
@@ -50,6 +50,6 @@ const FrameHeading: React.FC<Props> = ({ stackframe, isLibraryFrame }) => {
       )}
     </FileDetails>
   );
-};
+}
 
 export { FrameHeading };
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
index 4bd6d361d6714..07b5ed6868df5 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
@@ -23,7 +23,7 @@ interface Props {
   vars: IStackframe['vars'];
 }
 
-export const Variables = ({ vars }: Props) => {
+export function Variables({ vars }: Props) {
   if (!vars) {
     return null;
   }
@@ -46,4 +46,4 @@ export const Variables = ({ vars }: Props) => {
       </VariablesContainer>
     </React.Fragment>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx b/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
index 831f72e3925af..7858bebead408 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
@@ -15,11 +15,7 @@ interface Props {
   parentType: 'trace' | 'transaction';
 }
 
-const DurationSummaryItem = ({
-  duration,
-  totalDuration,
-  parentType,
-}: Props) => {
+function DurationSummaryItem({ duration, totalDuration, parentType }: Props) {
   const calculatedTotalDuration =
     totalDuration === undefined ? duration : totalDuration;
 
@@ -41,6 +37,6 @@ const DurationSummaryItem = ({
       </EuiText>
     </>
   );
-};
+}
 
 export { DurationSummaryItem };
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx b/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx
index b6ea6a714017d..ed33c59af36f4 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx
@@ -19,7 +19,7 @@ const Badge = (styled(EuiBadge)`
   margin-top: ${px(units.eighth)};
 ` as unknown) as typeof EuiBadge;
 
-export const ErrorCountSummaryItemBadge = ({ count }: Props) => {
+export function ErrorCountSummaryItemBadge({ count }: Props) {
   const theme = useTheme();
 
   return (
@@ -31,4 +31,4 @@ export const ErrorCountSummaryItemBadge = ({ count }: Props) => {
       })}
     </Badge>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx b/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx
index 86b42844f1fa7..98543ffaa9218 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx
@@ -20,7 +20,7 @@ interface Props {
   errorCount: number;
 }
 
-const getTransactionResultSummaryItem = (transaction: Transaction) => {
+function getTransactionResultSummaryItem(transaction: Transaction) {
   const result = transaction.transaction.result;
   const isRumAgent = isRumAgentName(transaction.agent.name);
   const url = isRumAgent
@@ -39,13 +39,9 @@ const getTransactionResultSummaryItem = (transaction: Transaction) => {
   }
 
   return null;
-};
+}
 
-const TransactionSummary = ({
-  transaction,
-  totalDuration,
-  errorCount,
-}: Props) => {
+function TransactionSummary({ transaction, totalDuration, errorCount }: Props) {
   const items = [
     <TimestampTooltip time={transaction.timestamp.us / 1000} />,
     <DurationSummaryItem
@@ -61,6 +57,6 @@ const TransactionSummary = ({
   ];
 
   return <Summary items={items} />;
-};
+}
 
 export { TransactionSummary };
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/index.tsx b/x-pack/plugins/apm/public/components/shared/Summary/index.tsx
index 55ac525d71192..aea62c88f5833 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/index.tsx
@@ -26,7 +26,7 @@ const Item = styled(EuiFlexItem)`
   }
 `;
 
-const Summary = ({ items }: Props) => {
+function Summary({ items }: Props) {
   const filteredItems = items.filter(Boolean) as React.ReactElement[];
 
   return (
@@ -38,6 +38,6 @@ const Summary = ({ items }: Props) => {
       ))}
     </EuiFlexGrid>
   );
-};
+}
 
 export { Summary };
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.tsx
index 00a839adc2fdd..27c6aa82ac674 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkPopover.tsx
@@ -24,7 +24,7 @@ const ScrollableContainer = styled.div`
   overflow: scroll;
 `;
 
-export const CustomLinkPopover = ({
+export function CustomLinkPopover({
   customLinks,
   onCreateCustomLinkClick,
   onClose,
@@ -34,7 +34,7 @@ export const CustomLinkPopover = ({
   onCreateCustomLinkClick: () => void;
   onClose: () => void;
   transaction: Transaction;
-}) => {
+}) {
   return (
     <>
       <EuiPopoverTitle>
@@ -71,4 +71,4 @@ export const CustomLinkPopover = ({
       </ScrollableContainer>
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkSection.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkSection.tsx
index 40143b53f17c5..6b421bc370332 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkSection.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/CustomLinkSection.tsx
@@ -24,28 +24,30 @@ const TruncateText = styled(EuiText)`
   ${truncate(px(units.unit * 25))}
 `;
 
-export const CustomLinkSection = ({
+export function CustomLinkSection({
   customLinks,
   transaction,
 }: {
   customLinks: CustomLink[];
   transaction: Transaction;
-}) => (
-  <ul>
-    {customLinks.map((link) => {
-      let href = link.url;
-      try {
-        href = Mustache.render(link.url, transaction);
-      } catch (e) {
-        // ignores any error that happens
-      }
-      return (
-        <LinkContainer key={link.id}>
-          <EuiLink href={href} target="_blank">
-            <TruncateText size="s">{link.label}</TruncateText>
-          </EuiLink>
-        </LinkContainer>
-      );
-    })}
-  </ul>
-);
+}) {
+  return (
+    <ul>
+      {customLinks.map((link) => {
+        let href = link.url;
+        try {
+          href = Mustache.render(link.url, transaction);
+        } catch (e) {
+          // ignores any error that happens
+        }
+        return (
+          <LinkContainer key={link.id}>
+            <EuiLink href={href} target="_blank">
+              <TruncateText size="s">{link.label}</TruncateText>
+            </EuiLink>
+          </LinkContainer>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.tsx
index 9740a9f1ee847..09cdaa26004bb 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/ManageCustomLink.tsx
@@ -14,46 +14,48 @@ import {
 import { i18n } from '@kbn/i18n';
 import { APMLink } from '../../Links/apm/APMLink';
 
-export const ManageCustomLink = ({
+export function ManageCustomLink({
   onCreateCustomLinkClick,
   showCreateCustomLinkButton = true,
 }: {
   onCreateCustomLinkClick: () => void;
   showCreateCustomLinkButton?: boolean;
-}) => (
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
-        <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
-          <EuiToolTip
-            position="top"
-            content={i18n.translate('xpack.apm.customLink.buttom.manage', {
-              defaultMessage: 'Manage custom links',
-            })}
-          >
-            <APMLink path={`/settings/customize-ui`}>
-              <EuiIcon
-                type="gear"
-                color="text"
-                aria-label="Custom links settings page"
-              />
-            </APMLink>
-          </EuiToolTip>
-        </EuiFlexItem>
-        {showCreateCustomLinkButton && (
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              iconType="plusInCircle"
-              size="xs"
-              onClick={onCreateCustomLinkClick}
-            >
-              {i18n.translate('xpack.apm.customLink.buttom.create.title', {
-                defaultMessage: 'Create',
+}) {
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+          <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+            <EuiToolTip
+              position="top"
+              content={i18n.translate('xpack.apm.customLink.buttom.manage', {
+                defaultMessage: 'Manage custom links',
               })}
-            </EuiButtonEmpty>
+            >
+              <APMLink path={`/settings/customize-ui`}>
+                <EuiIcon
+                  type="gear"
+                  color="text"
+                  aria-label="Custom links settings page"
+                />
+              </APMLink>
+            </EuiToolTip>
           </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+          {showCreateCustomLinkButton && (
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                iconType="plusInCircle"
+                size="xs"
+                onClick={onCreateCustomLinkClick}
+              >
+                {i18n.translate('xpack.apm.customLink.buttom.create.title', {
+                  defaultMessage: 'Create',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.tsx
index 40ac3c31d1d43..d6484f52e84f9 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/CustomLink/index.tsx
@@ -37,7 +37,7 @@ const SeeMoreButton = styled.button<{ show: boolean }>`
   }
 `;
 
-export const CustomLink = ({
+export function CustomLink({
   customLinks,
   status,
   onCreateCustomLinkClick,
@@ -49,7 +49,7 @@ export const CustomLink = ({
   onCreateCustomLinkClick: () => void;
   onSeeMoreClick: () => void;
   transaction: Transaction;
-}) => {
+}) {
   const renderEmptyPrompt = (
     <>
       <EuiText size="xs" grow={false} style={{ width: px(300) }}>
@@ -125,4 +125,4 @@ export const CustomLink = ({
       )}
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx
index 2507eca9ff663..77d70c626183f 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx
@@ -6,10 +6,8 @@
 
 import { EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { FunctionComponent, useMemo, useState, MouseEvent } from 'react';
+import React, { MouseEvent, useMemo, useState } from 'react';
 import url from 'url';
-import { Filter } from '../../../../common/custom_link/custom_link_types';
-import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
 import {
   ActionMenu,
   ActionMenuDivider,
@@ -19,32 +17,34 @@ import {
   SectionSubtitle,
   SectionTitle,
 } from '../../../../../observability/public';
+import { Filter } from '../../../../common/custom_link/custom_link_types';
+import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 import { useFetcher } from '../../../hooks/useFetcher';
+import { useLicense } from '../../../hooks/useLicense';
 import { useLocation } from '../../../hooks/useLocation';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { CustomLinkFlyout } from '../../app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout';
+import { convertFiltersToQuery } from '../../app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/helper';
 import { CustomLink } from './CustomLink';
 import { CustomLinkPopover } from './CustomLink/CustomLinkPopover';
 import { getSections } from './sections';
-import { useLicense } from '../../../hooks/useLicense';
-import { convertFiltersToQuery } from '../../app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/helper';
 
 interface Props {
   readonly transaction: Transaction;
 }
 
-const ActionMenuButton = ({ onClick }: { onClick: () => void }) => (
-  <EuiButtonEmpty iconType="arrowDown" iconSide="right" onClick={onClick}>
-    {i18n.translate('xpack.apm.transactionActionMenu.actionsButtonLabel', {
-      defaultMessage: 'Actions',
-    })}
-  </EuiButtonEmpty>
-);
-
-export const TransactionActionMenu: FunctionComponent<Props> = ({
-  transaction,
-}: Props) => {
+function ActionMenuButton({ onClick }: { onClick: () => void }) {
+  return (
+    <EuiButtonEmpty iconType="arrowDown" iconSide="right" onClick={onClick}>
+      {i18n.translate('xpack.apm.transactionActionMenu.actionsButtonLabel', {
+        defaultMessage: 'Actions',
+      })}
+    </EuiButtonEmpty>
+  );
+}
+
+export function TransactionActionMenu({ transaction }: Props) {
   const license = useLicense();
   const hasValidLicense = license?.isActive && license?.hasAtLeast('gold');
 
@@ -211,4 +211,4 @@ export const TransactionActionMenu: FunctionComponent<Props> = ({
       </ActionMenu>
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
index 2cb3696f88002..209657971620b 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
@@ -29,7 +29,7 @@ const formatTooltipValue = (coordinate: Coordinate) => {
     : NOT_AVAILABLE_LABEL;
 };
 
-const TransactionBreakdownGraph: React.FC<Props> = (props) => {
+function TransactionBreakdownGraph(props: Props) {
   const { timeseries } = props;
   const trackApmEvent = useUiTracker({ app: 'apm' });
   const handleHover = useMemo(
@@ -49,6 +49,6 @@ const TransactionBreakdownGraph: React.FC<Props> = (props) => {
       onHover={handleHover}
     />
   );
-};
+}
 
 export { TransactionBreakdownGraph };
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx
index 3898679f83537..d3761cf0fe38e 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx
@@ -31,10 +31,7 @@ const Description = styled.span`
   }
 `;
 
-const KpiDescription: React.FC<{
-  name: string;
-  color: string;
-}> = ({ name, color }) => {
+function KpiDescription({ name, color }: { name: string; color: string }) {
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -52,9 +49,9 @@ const KpiDescription: React.FC<{
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-};
+}
 
-const TransactionBreakdownKpiList: React.FC<Props> = ({ kpis }) => {
+function TransactionBreakdownKpiList({ kpis }: Props) {
   return (
     <EuiFlexGrid>
       {kpis.map((kpi) => (
@@ -73,6 +70,6 @@ const TransactionBreakdownKpiList: React.FC<Props> = ({ kpis }) => {
       ))}
     </EuiFlexGrid>
   );
-};
+}
 
 export { TransactionBreakdownKpiList };
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
index 51cad6bc65a85..80ed9163ec08d 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
@@ -21,7 +21,7 @@ const emptyMessage = i18n.translate('xpack.apm.transactionBreakdown.noData', {
   defaultMessage: 'No data within this time range.',
 });
 
-const TransactionBreakdown = () => {
+function TransactionBreakdown() {
   const { data, status } = useTransactionBreakdown();
   const { kpis, timeseries } = data;
   const noHits = data.kpis.length === 0 && status === FETCH_STATUS.SUCCESS;
@@ -51,6 +51,6 @@ const TransactionBreakdown = () => {
       </EuiFlexGroup>
     </EuiPanel>
   );
-};
+}
 
 export { TransactionBreakdown };
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx
index ed57692d70a65..d02c5a5d08927 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx
@@ -26,7 +26,7 @@ interface Props {
   overlay: Maybe<HTMLElement>;
 }
 
-export const AnnotationsPlot = ({ plotValues, annotations }: Props) => {
+export function AnnotationsPlot({ plotValues, annotations }: Props) {
   const theme = useTheme();
   const tickValues = annotations.map((annotation) => annotation['@timestamp']);
 
@@ -70,4 +70,4 @@ export const AnnotationsPlot = ({ plotValues, annotations }: Props) => {
       ))}
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx
index f87be32b43fc1..a433b0b507239 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx
@@ -21,7 +21,7 @@ const tickFormatY = (y?: number) => {
   return asPercent(y || 0, 1);
 };
 
-export const ErroneousTransactionsRateChart = () => {
+export function ErroneousTransactionsRateChart() {
   const { urlParams, uiFilters } = useUrlParams();
   const syncedChartsProps = useChartsSync();
 
@@ -105,4 +105,4 @@ export const ErroneousTransactionsRateChart = () => {
       />
     </EuiPanel>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx
index a00c46bcf324d..1a2a90c9fb3c3 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx
@@ -60,7 +60,7 @@ interface Props {
   indicator?: () => React.ReactNode;
 }
 
-export const Legend: React.FC<Props> = ({
+export function Legend({
   onClick,
   text,
   color,
@@ -71,7 +71,7 @@ export const Legend: React.FC<Props> = ({
   shape = Shape.circle,
   indicator,
   ...rest
-}) => {
+}: Props) {
   const theme = useTheme();
   const indicatorColor = color || theme.eui.euiColorVis1;
 
@@ -96,4 +96,4 @@ export const Legend: React.FC<Props> = ({
       {text}
     </Container>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
index d2dea39b83d82..64e0fe33c982f 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
@@ -27,7 +27,7 @@ interface Props {
   mark: AgentMark;
 }
 
-export const AgentMarker: React.FC<Props> = ({ mark }) => {
+export function AgentMarker({ mark }: Props) {
   const theme = useTheme();
 
   return (
@@ -46,4 +46,4 @@ export const AgentMarker: React.FC<Props> = ({ mark }) => {
       </EuiToolTip>
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
index d8e056deb769a..4567bc3f0f0b7 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
@@ -53,7 +53,7 @@ function truncateMessage(errorMessage?: string) {
   }
 }
 
-export const ErrorMarker: React.FC<Props> = ({ mark }) => {
+export function ErrorMarker({ mark }: Props) {
   const theme = useTheme();
   const { urlParams } = useUrlParams();
   const [isPopoverOpen, showPopover] = useState(false);
@@ -123,4 +123,4 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
       </Popover>
     </EuiPopover>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
index 03124952c3f88..71a1639af6dcc 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
@@ -22,7 +22,7 @@ const MarkerContainer = styled.div`
   bottom: 0;
 `;
 
-export const Marker: React.FC<Props> = ({ mark, x }) => {
+export function Marker({ mark, x }: Props) {
   const legendWidth = 11;
   return (
     <MarkerContainer style={{ left: px(x - legendWidth / 2) }}>
@@ -33,4 +33,4 @@ export const Marker: React.FC<Props> = ({ mark, x }) => {
       )}
     </MarkerContainer>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx
index a9c36634381d4..5cbfcc695e012 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx
@@ -42,11 +42,11 @@ interface TimelineAxisProps {
   topTraceDuration: number;
 }
 
-export const TimelineAxis = ({
+export function TimelineAxis({
   plotValues,
   marks = [],
   topTraceDuration,
-}: TimelineAxisProps) => {
+}: TimelineAxisProps) {
   const theme = useTheme();
   const { margins, tickValues, width, xDomain, xMax, xScale } = plotValues;
   const tickFormatter = getDurationFormatter(xMax);
@@ -107,4 +107,4 @@ export const TimelineAxis = ({
       }}
     </Sticky>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
index 0753cb318d3a4..5ea2e4cfedf18 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
@@ -16,11 +16,11 @@ interface VerticalLinesProps {
   topTraceDuration: number;
 }
 
-export const VerticalLines = ({
+export function VerticalLines({
   topTraceDuration,
   plotValues,
   marks = [],
-}: VerticalLinesProps) => {
+}: VerticalLinesProps) {
   const { width, height, margins, xDomain, tickValues } = plotValues;
 
   const markTimes = marks
@@ -63,4 +63,4 @@ export const VerticalLines = ({
       </XYPlot>
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx
index 9d13b23904b36..69d4e8109dfbf 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx
@@ -9,11 +9,15 @@ import { i18n } from '@kbn/i18n';
 import { asDuration, asInteger } from '../../../../../utils/formatters';
 import { fontSizes } from '../../../../../style/variables';
 
-export const ChoroplethToolTip: React.FC<{
+export function ChoroplethToolTip({
+  name,
+  value,
+  docCount,
+}: {
   name: string;
   value: number;
   docCount: number;
-}> = ({ name, value, docCount }) => {
+}) {
   return (
     <div style={{ textAlign: 'center' }}>
       <div style={{ fontSize: fontSizes.large }}>{name}</div>
@@ -41,4 +45,4 @@ export const ChoroplethToolTip: React.FC<{
       </div>
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx
index a9a9343dde6be..965cb2ae4f50a 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx
@@ -66,7 +66,7 @@ const getMin = (items: ChoroplethItem[]) =>
 const getMax = (items: ChoroplethItem[]) =>
   Math.max(...items.map((item) => item.value));
 
-export const ChoroplethMap: React.FC<Props> = (props) => {
+export function ChoroplethMap(props: Props) {
   const theme = useTheme();
   const { items } = props;
   const containerRef = useRef<HTMLDivElement>(null);
@@ -267,4 +267,4 @@ export const ChoroplethMap: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/DurationByCountryMap/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/DurationByCountryMap/index.tsx
index 61030679f45fd..2dd3d058e98b8 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/DurationByCountryMap/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/DurationByCountryMap/index.tsx
@@ -11,7 +11,7 @@ import { useAvgDurationByCountry } from '../../../../../hooks/useAvgDurationByCo
 
 import { ChoroplethMap } from '../ChoroplethMap';
 
-export const DurationByCountryMap: React.FC = () => {
+export function DurationByCountryMap() {
   const { data } = useAvgDurationByCountry();
 
   return (
@@ -30,4 +30,4 @@ export const DurationByCountryMap: React.FC = () => {
       <ChoroplethMap items={data} />
     </>
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx
index cee74c81325ba..eaad883d2f9f6 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx
@@ -30,7 +30,7 @@ interface Props {
   onHover?: () => void;
 }
 
-const TransactionLineChart: React.FC<Props> = (props: Props) => {
+function TransactionLineChart(props: Props) {
   const {
     series,
     tickFormatY,
@@ -68,6 +68,6 @@ const TransactionLineChart: React.FC<Props> = (props: Props) => {
       {...(stacked ? { stackBy: 'y' } : {})}
     />
   );
-};
+}
 
 export { TransactionLineChart };
diff --git a/x-pack/plugins/apm/public/context/ChartsSyncContext.tsx b/x-pack/plugins/apm/public/context/ChartsSyncContext.tsx
index c00fc95f1f4f2..f93b69a877057 100644
--- a/x-pack/plugins/apm/public/context/ChartsSyncContext.tsx
+++ b/x-pack/plugins/apm/public/context/ChartsSyncContext.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import { toQuery, fromQuery } from '../components/shared/Links/url_helpers';
 import { history } from '../utils/history';
 import { useUrlParams } from '../hooks/useUrlParams';
@@ -17,7 +17,7 @@ const ChartsSyncContext = React.createContext<{
   onSelectionEnd: (range: { start: number; end: number }) => void;
 } | null>(null);
 
-const ChartsSyncContextProvider: React.FC = ({ children }) => {
+function ChartsSyncContextProvider({ children }: { children: ReactNode }) {
   const [time, setTime] = useState<number | null>(null);
   const { urlParams, uiFilters } = useUrlParams();
 
@@ -78,6 +78,6 @@ const ChartsSyncContextProvider: React.FC = ({ children }) => {
   }, [time, data.annotations]);
 
   return <ChartsSyncContext.Provider value={value} children={children} />;
-};
+}
 
 export { ChartsSyncContext, ChartsSyncContextProvider };
diff --git a/x-pack/plugins/apm/public/context/UrlParamsContext/MockUrlParamsContextProvider.tsx b/x-pack/plugins/apm/public/context/UrlParamsContext/MockUrlParamsContextProvider.tsx
index 4e4fbabf5571a..fd01e057ac3de 100644
--- a/x-pack/plugins/apm/public/context/UrlParamsContext/MockUrlParamsContextProvider.tsx
+++ b/x-pack/plugins/apm/public/context/UrlParamsContext/MockUrlParamsContextProvider.tsx
@@ -21,11 +21,11 @@ interface Props {
   refreshTimeRange?: (time: any) => void;
 }
 
-export const MockUrlParamsContextProvider = ({
+export function MockUrlParamsContextProvider({
   params,
   children,
   refreshTimeRange = () => undefined,
-}: Props) => {
+}: Props) {
   const urlParams = { ...defaultUrlParams, ...params };
   return (
     <UrlParamsContext.Provider
@@ -37,4 +37,4 @@ export const MockUrlParamsContextProvider = ({
       children={children}
     />
   );
-};
+}
diff --git a/x-pack/plugins/apm/public/utils/getRangeFromTimeSeries.ts b/x-pack/plugins/apm/public/utils/getRangeFromTimeSeries.ts
index 8ec81616ccff8..71024edc9815c 100644
--- a/x-pack/plugins/apm/public/utils/getRangeFromTimeSeries.ts
+++ b/x-pack/plugins/apm/public/utils/getRangeFromTimeSeries.ts
@@ -7,7 +7,7 @@
 import { flatten } from 'lodash';
 import { TimeSeries } from '../../typings/timeseries';
 
-export const getRangeFromTimeSeries = (timeseries: TimeSeries[]) => {
+export function getRangeFromTimeSeries(timeseries: TimeSeries[]) {
   const dataPoints = flatten(timeseries.map((series) => series.data));
 
   if (dataPoints.length) {
@@ -18,4 +18,4 @@ export const getRangeFromTimeSeries = (timeseries: TimeSeries[]) => {
   }
 
   return null;
-};
+}
diff --git a/x-pack/plugins/apm/public/utils/testHelpers.tsx b/x-pack/plugins/apm/public/utils/testHelpers.tsx
index 8e7f987966783..418312743c324 100644
--- a/x-pack/plugins/apm/public/utils/testHelpers.tsx
+++ b/x-pack/plugins/apm/public/utils/testHelpers.tsx
@@ -197,9 +197,11 @@ export function mountWithTheme(
   tree: React.ReactElement<any>,
   { darkMode = false } = {}
 ) {
-  const WrappingThemeProvider = (props: any) => (
-    <EuiThemeProvider darkMode={darkMode}>{props.children}</EuiThemeProvider>
-  );
+  function WrappingThemeProvider(props: any) {
+    return (
+      <EuiThemeProvider darkMode={darkMode}>{props.children}</EuiThemeProvider>
+    );
+  }
 
   return mount(tree, {
     wrappingComponent: WrappingThemeProvider,
diff --git a/x-pack/plugins/observability/public/application/index.tsx b/x-pack/plugins/observability/public/application/index.tsx
index ce3c666323fff..4c0147dc3cd51 100644
--- a/x-pack/plugins/observability/public/application/index.tsx
+++ b/x-pack/plugins/observability/public/application/index.tsx
@@ -26,7 +26,7 @@ function getTitleFromBreadCrumbs(breadcrumbs: Breadcrumbs) {
   return breadcrumbs.map(({ text }) => text).reverse();
 }
 
-const App = () => {
+function App() {
   return (
     <>
       <Switch>
@@ -50,7 +50,7 @@ const App = () => {
       </Switch>
     </>
   );
-};
+}
 
 export const renderApp = (core: CoreStart, { element }: AppMountParameters) => {
   const i18nCore = core.i18n;
diff --git a/x-pack/plugins/observability/public/components/app/chart_container/index.tsx b/x-pack/plugins/observability/public/components/app/chart_container/index.tsx
index 2a0c25773eae5..b68ddbd06c778 100644
--- a/x-pack/plugins/observability/public/components/app/chart_container/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/chart_container/index.tsx
@@ -18,12 +18,12 @@ interface Props {
 
 const CHART_HEIGHT = 170;
 
-export const ChartContainer = ({
+export function ChartContainer({
   isInitialLoad,
   children,
   iconSize = 'xl',
   height = CHART_HEIGHT,
-}: Props) => {
+}: Props) {
   if (isInitialLoad) {
     return (
       <div
@@ -40,4 +40,4 @@ export const ChartContainer = ({
     );
   }
   return <Chart size={{ height }}>{children}</Chart>;
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/empty_section/index.tsx b/x-pack/plugins/observability/public/components/app/empty_section/index.tsx
index 4c830b2b2f094..5a2e64459358d 100644
--- a/x-pack/plugins/observability/public/components/app/empty_section/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/empty_section/index.tsx
@@ -11,7 +11,7 @@ interface Props {
   section: ISection;
 }
 
-export const EmptySection = ({ section }: Props) => {
+export function EmptySection({ section }: Props) {
   return (
     <EuiEmptyPrompt
       style={{ maxWidth: 'none' }}
@@ -36,4 +36,4 @@ export const EmptySection = ({ section }: Props) => {
       }
     />
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/header/index.tsx b/x-pack/plugins/observability/public/components/app/header/index.tsx
index 531e6abf3d236..0e35fbb008bee 100644
--- a/x-pack/plugins/observability/public/components/app/header/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/header/index.tsx
@@ -38,12 +38,12 @@ interface Props {
   showGiveFeedback?: boolean;
 }
 
-export const Header = ({
+export function Header({
   color,
   restrictWidth,
   showAddData = false,
   showGiveFeedback = false,
-}: Props) => {
+}: Props) {
   const { core } = usePluginContext();
   return (
     <Container color={color}>
@@ -91,4 +91,4 @@ export const Header = ({
       </Wrapper>
     </Container>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/ingest_manager_panel/index.tsx b/x-pack/plugins/observability/public/components/app/ingest_manager_panel/index.tsx
index 41bcfa1da7fa1..1ab9f75632d9d 100644
--- a/x-pack/plugins/observability/public/components/app/ingest_manager_panel/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/ingest_manager_panel/index.tsx
@@ -12,7 +12,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiText } from '@elastic/eui';
 import { EuiLink } from '@elastic/eui';
 
-export const IngestManagerPanel = () => {
+export function IngestManagerPanel() {
   return (
     <EuiPanel
       paddingSize="l"
@@ -49,4 +49,4 @@ export const IngestManagerPanel = () => {
       </EuiFlexGroup>
     </EuiPanel>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/layout/with_header.tsx b/x-pack/plugins/observability/public/components/app/layout/with_header.tsx
index 27b25f0056055..a77487e1244e6 100644
--- a/x-pack/plugins/observability/public/components/app/layout/with_header.tsx
+++ b/x-pack/plugins/observability/public/components/app/layout/with_header.tsx
@@ -32,23 +32,25 @@ interface Props {
   showGiveFeedback?: boolean;
 }
 
-export const WithHeaderLayout = ({
+export function WithHeaderLayout({
   headerColor,
   bodyColor,
   children,
   restrictWidth,
   showAddData,
   showGiveFeedback,
-}: Props) => (
-  <Container color={bodyColor}>
-    <Header
-      color={headerColor}
-      restrictWidth={restrictWidth}
-      showAddData={showAddData}
-      showGiveFeedback={showGiveFeedback}
-    />
-    <Page restrictWidth={restrictWidth}>
-      <EuiPageBody>{children}</EuiPageBody>
-    </Page>
-  </Container>
-);
+}: Props) {
+  return (
+    <Container color={bodyColor}>
+      <Header
+        color={headerColor}
+        restrictWidth={restrictWidth}
+        showAddData={showAddData}
+        showGiveFeedback={showGiveFeedback}
+      />
+      <Page restrictWidth={restrictWidth}>
+        <EuiPageBody>{children}</EuiPageBody>
+      </Page>
+    </Container>
+  );
+}
diff --git a/x-pack/plugins/observability/public/components/app/news_feed/index.tsx b/x-pack/plugins/observability/public/components/app/news_feed/index.tsx
index 2fbd6659bcb5a..625ae94c90aa2 100644
--- a/x-pack/plugins/observability/public/components/app/news_feed/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/news_feed/index.tsx
@@ -23,7 +23,7 @@ interface Props {
   items: INewsItem[];
 }
 
-export const NewsFeed = ({ items }: Props) => {
+export function NewsFeed({ items }: Props) {
   return (
     // The news feed is manually added/edited, to prevent any errors caused by typos or missing fields,
     // wraps the component with EuiErrorBoundary to avoid breaking the entire page.
@@ -46,11 +46,11 @@ export const NewsFeed = ({ items }: Props) => {
       </EuiFlexGroup>
     </EuiErrorBoundary>
   );
-};
+}
 
 const limitString = (string: string, limit: number) => truncate(string, { length: limit });
 
-const NewsItem = ({ item }: { item: INewsItem }) => {
+function NewsItem({ item }: { item: INewsItem }) {
   const theme = useContext(ThemeContext);
 
   return (
@@ -98,4 +98,4 @@ const NewsItem = ({ item }: { item: INewsItem }) => {
       <EuiHorizontalRule margin="s" />
     </EuiFlexGroup>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/resources/index.tsx b/x-pack/plugins/observability/public/components/app/resources/index.tsx
index 929802df3329b..47ac5f0f6d301 100644
--- a/x-pack/plugins/observability/public/components/app/resources/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/resources/index.tsx
@@ -31,7 +31,7 @@ const resources = [
   },
 ];
 
-export const Resources = () => {
+export function Resources() {
   return (
     <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="xs">
       <EuiFlexItem grow={false}>
@@ -46,4 +46,4 @@ export const Resources = () => {
       <EuiListGroup flush listItems={resources} data-test-subj="list-group" />
     </EuiFlexGroup>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/section/alerts/index.tsx b/x-pack/plugins/observability/public/components/app/section/alerts/index.tsx
index c0dc67b3373b1..02e841ec50ee2 100644
--- a/x-pack/plugins/observability/public/components/app/section/alerts/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/alerts/index.tsx
@@ -33,7 +33,7 @@ interface Props {
   alerts: Alert[];
 }
 
-export const AlertsSection = ({ alerts }: Props) => {
+export function AlertsSection({ alerts }: Props) {
   const { core } = usePluginContext();
   const [filter, setFilter] = useState(ALL_TYPES);
 
@@ -130,4 +130,4 @@ export const AlertsSection = ({ alerts }: Props) => {
       </EuiFlexGroup>
     </SectionContainer>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/section/apm/index.tsx b/x-pack/plugins/observability/public/components/app/section/apm/index.tsx
index dce80ed324456..a1d51ffda6afd 100644
--- a/x-pack/plugins/observability/public/components/app/section/apm/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/apm/index.tsx
@@ -30,7 +30,7 @@ function formatTpm(value?: number) {
   return numeral(value).format('0.00a');
 }
 
-export const APMSection = ({ absoluteTime, relativeTime, bucketSize }: Props) => {
+export function APMSection({ absoluteTime, relativeTime, bucketSize }: Props) {
   const theme = useContext(ThemeContext);
   const history = useHistory();
 
@@ -43,7 +43,7 @@ export const APMSection = ({ absoluteTime, relativeTime, bucketSize }: Props) =>
         bucketSize,
       });
     }
-  }, [start, end, bucketSize]);
+  }, [start, end, bucketSize, relativeTime]);
 
   const { appLink, stats, series } = data || {};
 
@@ -121,4 +121,4 @@ export const APMSection = ({ absoluteTime, relativeTime, bucketSize }: Props) =>
       </ChartContainer>
     </SectionContainer>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/section/error_panel/index.tsx b/x-pack/plugins/observability/public/components/app/section/error_panel/index.tsx
index 8f0781b8f0269..2413580e90a07 100644
--- a/x-pack/plugins/observability/public/components/app/section/error_panel/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/error_panel/index.tsx
@@ -7,7 +7,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 
-export const ErrorPanel = () => {
+export function ErrorPanel() {
   return (
     <EuiFlexGroup justifyContent="center" alignItems="center">
       <EuiFlexItem grow={false}>
@@ -19,4 +19,4 @@ export const ErrorPanel = () => {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/section/index.tsx b/x-pack/plugins/observability/public/components/app/section/index.tsx
index 9ba524259ea1c..6c6d107b714be 100644
--- a/x-pack/plugins/observability/public/components/app/section/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/index.tsx
@@ -20,7 +20,7 @@ interface Props {
   appLink?: AppLink;
 }
 
-export const SectionContainer = ({ title, appLink, children, hasError }: Props) => {
+export function SectionContainer({ title, appLink, children, hasError }: Props) {
   const { core } = usePluginContext();
   return (
     <EuiAccordion
@@ -55,4 +55,4 @@ export const SectionContainer = ({ title, appLink, children, hasError }: Props)
       </>
     </EuiAccordion>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/section/logs/index.tsx b/x-pack/plugins/observability/public/components/app/section/logs/index.tsx
index 9b232ea33cbfb..aa1dc1640125e 100644
--- a/x-pack/plugins/observability/public/components/app/section/logs/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/logs/index.tsx
@@ -45,7 +45,7 @@ function getColorPerItem(series?: LogsFetchDataResponse['series']) {
   return colorsPerItem;
 }
 
-export const LogsSection = ({ absoluteTime, relativeTime, bucketSize }: Props) => {
+export function LogsSection({ absoluteTime, relativeTime, bucketSize }: Props) {
   const history = useHistory();
 
   const { start, end } = absoluteTime;
@@ -57,7 +57,7 @@ export const LogsSection = ({ absoluteTime, relativeTime, bucketSize }: Props) =
         bucketSize,
       });
     }
-  }, [start, end, bucketSize]);
+  }, [start, end, bucketSize, relativeTime]);
 
   const min = moment.utc(absoluteTime.start).valueOf();
   const max = moment.utc(absoluteTime.end).valueOf();
@@ -160,4 +160,4 @@ export const LogsSection = ({ absoluteTime, relativeTime, bucketSize }: Props) =
       </ChartContainer>
     </SectionContainer>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx b/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx
index 9e5fdadaf4e5f..8bce8205902fa 100644
--- a/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/metrics/index.tsx
@@ -46,7 +46,7 @@ const StyledProgress = styled.div<{ color?: string }>`
   }
 `;
 
-export const MetricsSection = ({ absoluteTime, relativeTime, bucketSize }: Props) => {
+export function MetricsSection({ absoluteTime, relativeTime, bucketSize }: Props) {
   const theme = useContext(ThemeContext);
 
   const { start, end } = absoluteTime;
@@ -58,7 +58,7 @@ export const MetricsSection = ({ absoluteTime, relativeTime, bucketSize }: Props
         bucketSize,
       });
     }
-  }, [start, end, bucketSize]);
+  }, [start, end, bucketSize, relativeTime]);
 
   const isLoading = status === FETCH_STATUS.LOADING;
 
@@ -162,9 +162,9 @@ export const MetricsSection = ({ absoluteTime, relativeTime, bucketSize }: Props
       </EuiFlexGroup>
     </SectionContainer>
   );
-};
+}
 
-const AreaChart = ({
+function AreaChart({
   serie,
   isLoading,
   color,
@@ -172,7 +172,7 @@ const AreaChart = ({
   serie?: Series;
   isLoading: boolean;
   color: string;
-}) => {
+}) {
   const chartTheme = useChartTheme();
 
   return (
@@ -191,4 +191,4 @@ const AreaChart = ({
       )}
     </ChartContainer>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx b/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx
index 73a566460a593..cfb06af3224c7 100644
--- a/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/uptime/index.tsx
@@ -35,7 +35,7 @@ interface Props {
   bucketSize?: string;
 }
 
-export const UptimeSection = ({ absoluteTime, relativeTime, bucketSize }: Props) => {
+export function UptimeSection({ absoluteTime, relativeTime, bucketSize }: Props) {
   const theme = useContext(ThemeContext);
   const history = useHistory();
 
@@ -48,7 +48,7 @@ export const UptimeSection = ({ absoluteTime, relativeTime, bucketSize }: Props)
         bucketSize,
       });
     }
-  }, [start, end, bucketSize]);
+  }, [start, end, bucketSize, relativeTime]);
 
   const min = moment.utc(absoluteTime.start).valueOf();
   const max = moment.utc(absoluteTime.end).valueOf();
@@ -138,9 +138,9 @@ export const UptimeSection = ({ absoluteTime, relativeTime, bucketSize }: Props)
       </ChartContainer>
     </SectionContainer>
   );
-};
+}
 
-const UptimeBarSeries = ({
+function UptimeBarSeries({
   id,
   label,
   series,
@@ -152,7 +152,7 @@ const UptimeBarSeries = ({
   series?: Series;
   color: string;
   ticktFormatter: TickFormatter;
-}) => {
+}) {
   if (!series) {
     return null;
   }
@@ -188,4 +188,4 @@ const UptimeBarSeries = ({
       />
     </>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/components/app/styled_stat/index.tsx b/x-pack/plugins/observability/public/components/app/styled_stat/index.tsx
index fe38df6484c29..a58a0c8309723 100644
--- a/x-pack/plugins/observability/public/components/app/styled_stat/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/styled_stat/index.tsx
@@ -21,7 +21,7 @@ interface Props extends Partial<EuiStatProps> {
 
 const EMPTY_VALUE = '--';
 
-export const StyledStat = (props: Props) => {
+export function StyledStat(props: Props) {
   const { description = EMPTY_VALUE, title = EMPTY_VALUE, ...rest } = props;
   return <Stat description={description} title={title} titleSize="s" {...rest} />;
-};
+}
diff --git a/x-pack/plugins/observability/public/components/shared/action_menu/index.tsx b/x-pack/plugins/observability/public/components/shared/action_menu/index.tsx
index ea79f4d08d701..55746ff6576a9 100644
--- a/x-pack/plugins/observability/public/components/shared/action_menu/index.tsx
+++ b/x-pack/plugins/observability/public/components/shared/action_menu/index.tsx
@@ -14,37 +14,45 @@ import {
   EuiPopoverProps,
 } from '@elastic/eui';
 
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group/list_group_item';
 import styled from 'styled-components';
 
 type Props = EuiPopoverProps & HTMLAttributes<HTMLDivElement>;
 
-export const SectionTitle: React.FC<{}> = (props) => (
-  <>
-    <EuiText size={'s'} grow={false}>
-      <h5>{props.children}</h5>
-    </EuiText>
-    <EuiSpacer size={'s'} />
-  </>
-);
-
-export const SectionSubtitle: React.FC<{}> = (props) => (
-  <>
-    <EuiText size={'xs'} color={'subdued'} grow={false}>
-      <small>{props.children}</small>
-    </EuiText>
-    <EuiSpacer size={'s'} />
-  </>
-);
-
-export const SectionLinks: React.FC<{}> = (props) => (
-  <EuiListGroup flush={true} bordered={false}>
-    {props.children}
-  </EuiListGroup>
-);
-
-export const SectionSpacer: React.FC<{}> = () => <EuiSpacer size={'l'} />;
+export function SectionTitle({ children }: { children?: ReactNode }) {
+  return (
+    <>
+      <EuiText size={'s'} grow={false}>
+        <h5>{children}</h5>
+      </EuiText>
+      <EuiSpacer size={'s'} />
+    </>
+  );
+}
+
+export function SectionSubtitle({ children }: { children?: ReactNode }) {
+  return (
+    <>
+      <EuiText size={'xs'} color={'subdued'} grow={false}>
+        <small>{children}</small>
+      </EuiText>
+      <EuiSpacer size={'s'} />
+    </>
+  );
+}
+
+export function SectionLinks({ children }: { children?: ReactNode }) {
+  return (
+    <EuiListGroup flush={true} bordered={false}>
+      {children}
+    </EuiListGroup>
+  );
+}
+
+export function SectionSpacer() {
+  return <EuiSpacer size={'l'} />;
+}
 
 export const Section = styled.div`
   margin-bottom: 24px;
@@ -54,10 +62,14 @@ export const Section = styled.div`
 `;
 
 export type SectionLinkProps = EuiListGroupItemProps;
-export const SectionLink: React.FC<EuiListGroupItemProps> = (props) => (
-  <EuiListGroupItem style={{ padding: 0 }} size={'s'} {...props} />
-);
+export function SectionLink(props: SectionLinkProps) {
+  return <EuiListGroupItem style={{ padding: 0 }} size={'s'} {...props} />;
+}
 
-export const ActionMenuDivider: React.FC<{}> = (props) => <EuiHorizontalRule margin={'s'} />;
+export function ActionMenuDivider() {
+  return <EuiHorizontalRule margin={'s'} />;
+}
 
-export const ActionMenu: React.FC<Props> = (props) => <EuiPopover {...props} ownFocus={true} />;
+export function ActionMenu(props: Props) {
+  return <EuiPopover {...props} ownFocus={true} />;
+}
diff --git a/x-pack/plugins/observability/public/components/shared/data_picker/index.tsx b/x-pack/plugins/observability/public/components/shared/data_picker/index.tsx
index cc77c1ed72b4a..1c4f465a1d301 100644
--- a/x-pack/plugins/observability/public/components/shared/data_picker/index.tsx
+++ b/x-pack/plugins/observability/public/components/shared/data_picker/index.tsx
@@ -31,7 +31,7 @@ interface Props {
   refreshInterval: number;
 }
 
-export const DatePicker = ({ rangeFrom, rangeTo, refreshPaused, refreshInterval }: Props) => {
+export function DatePicker({ rangeFrom, rangeTo, refreshPaused, refreshInterval }: Props) {
   const location = useLocation();
   const history = useHistory();
 
@@ -86,4 +86,4 @@ export const DatePicker = ({ rangeFrom, rangeTo, refreshPaused, refreshInterval
       onRefresh={onTimeChange}
     />
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/pages/home/index.tsx b/x-pack/plugins/observability/public/pages/home/index.tsx
index 59513fc047f17..349533346f2ad 100644
--- a/x-pack/plugins/observability/public/pages/home/index.tsx
+++ b/x-pack/plugins/observability/public/pages/home/index.tsx
@@ -8,7 +8,7 @@ import { useHistory } from 'react-router-dom';
 import { fetchHasData } from '../../data_handler';
 import { useFetcher } from '../../hooks/use_fetcher';
 
-export const HomePage = () => {
+export function HomePage() {
   const history = useHistory();
   const { data = {} } = useFetcher(() => fetchHasData(), []);
 
@@ -23,4 +23,4 @@ export const HomePage = () => {
   }
 
   return <></>;
-};
+}
diff --git a/x-pack/plugins/observability/public/pages/landing/index.tsx b/x-pack/plugins/observability/public/pages/landing/index.tsx
index 81485953f8713..4d8bd4bf2c789 100644
--- a/x-pack/plugins/observability/public/pages/landing/index.tsx
+++ b/x-pack/plugins/observability/public/pages/landing/index.tsx
@@ -27,7 +27,7 @@ const EuiCardWithoutPadding = styled(EuiCard)`
   padding: 0;
 `;
 
-export const LandingPage = () => {
+export function LandingPage() {
   const { core } = usePluginContext();
   const theme = useContext(ThemeContext);
 
@@ -124,4 +124,4 @@ export const LandingPage = () => {
       </EuiFlexGroup>
     </WithHeaderLayout>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/pages/overview/index.tsx b/x-pack/plugins/observability/public/pages/overview/index.tsx
index 088fab032d930..32bdb00577bd2 100644
--- a/x-pack/plugins/observability/public/pages/overview/index.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/index.tsx
@@ -38,14 +38,14 @@ function calculatetBucketSize({ start, end }: { start?: number; end?: number })
   }
 }
 
-export const OverviewPage = ({ routeParams }: Props) => {
+export function OverviewPage({ routeParams }: Props) {
   const { core } = usePluginContext();
 
   const { data: alerts = [], status: alertStatus } = useFetcher(() => {
     return getObservabilityAlerts({ core });
-  }, []);
+  }, [core]);
 
-  const { data: newsFeed } = useFetcher(() => getNewsFeed({ core }), []);
+  const { data: newsFeed } = useFetcher(() => getNewsFeed({ core }), [core]);
 
   const theme = useContext(ThemeContext);
   const timePickerTime = useKibanaUISettings<TimePickerTime>(UI_SETTINGS.TIMEPICKER_TIME_DEFAULTS);
@@ -206,4 +206,4 @@ export const OverviewPage = ({ routeParams }: Props) => {
       </EuiFlexGroup>
     </WithHeaderLayout>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/pages/overview/loading_observability.tsx b/x-pack/plugins/observability/public/pages/overview/loading_observability.tsx
index 90e3104443e6b..0f4fa9b864744 100644
--- a/x-pack/plugins/observability/public/pages/overview/loading_observability.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/loading_observability.tsx
@@ -20,7 +20,7 @@ const CentralizedFlexGroup = styled(EuiFlexGroup)`
   min-height: calc(100vh - ${(props) => props.theme.eui.euiHeaderChildSize});
 `;
 
-export const LoadingObservability = () => {
+export function LoadingObservability() {
   const theme = useContext(ThemeContext);
 
   return (
@@ -50,4 +50,4 @@ export const LoadingObservability = () => {
       </CentralizedFlexGroup>
     </WithHeaderLayout>
   );
-};
+}
diff --git a/x-pack/plugins/observability/public/typings/eui_styled_components.tsx b/x-pack/plugins/observability/public/typings/eui_styled_components.tsx
index aab16f9d79c4b..9e547b58bc736 100644
--- a/x-pack/plugins/observability/public/typings/eui_styled_components.tsx
+++ b/x-pack/plugins/observability/public/typings/eui_styled_components.tsx
@@ -16,23 +16,25 @@ export interface EuiTheme {
   darkMode: boolean;
 }
 
-const EuiThemeProvider = <
+function EuiThemeProvider<
   OuterTheme extends styledComponents.DefaultTheme = styledComponents.DefaultTheme
 >({
   darkMode = false,
   ...otherProps
 }: Omit<ThemeProviderProps<OuterTheme, OuterTheme & EuiTheme>, 'theme'> & {
   darkMode?: boolean;
-}) => (
-  <ThemeProvider
-    {...otherProps}
-    theme={(outerTheme?: OuterTheme) => ({
-      ...outerTheme,
-      eui: darkMode ? euiDarkVars : euiLightVars,
-      darkMode,
-    })}
-  />
-);
+}) {
+  return (
+    <ThemeProvider
+      {...otherProps}
+      theme={(outerTheme?: OuterTheme) => ({
+        ...outerTheme,
+        eui: darkMode ? euiDarkVars : euiLightVars,
+        darkMode,
+      })}
+    />
+  );
+}
 
 const {
   default: euiStyled,
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/mitre/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/mitre/index.tsx
index e898a362c7771..71734affd42ce 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/mitre/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/mitre/index.tsx
@@ -35,7 +35,7 @@ const MyEuiSuperSelect = styled(EuiSuperSelect)`
 `;
 interface AddItemProps {
   field: FieldHook;
-  dataTestSubj: string;
+  dataTestSubj: string; // eslint-disable-line react/no-unused-prop-types
   idAria: string;
   isDisabled: boolean;
 }
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
index fd75c229d479d..49fe3438664c6 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
@@ -22,6 +22,7 @@ interface TagsFilterPopoverProps {
   selectedTags: string[];
   tags: string[];
   onSelectedTagsChanged: Dispatch<SetStateAction<string[]>>;
+  // eslint-disable-next-line react/no-unused-prop-types
   isLoading: boolean; // TO DO reimplement?
 }
 
diff --git a/yarn.lock b/yarn.lock
index 01a34bdb76e6e..8622e2b66921c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7639,6 +7639,15 @@ array-includes@^3.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.7.0"
 
+array-includes@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
+  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    is-string "^1.0.5"
+
 array-initial@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/array-initial/-/array-initial-1.1.0.tgz#2fa74b26739371c3947bd7a7adc73be334b3d795"
@@ -7725,6 +7734,15 @@ array.prototype.flatmap@^1.2.1:
     es-abstract "^1.10.0"
     function-bind "^1.1.1"
 
+array.prototype.flatmap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
+  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+
 arraybuffer.slice@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
@@ -13457,39 +13475,39 @@ es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.13.0, es-abstract@^1.14
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.15.0, es-abstract@^1.17.0-next.1:
-  version "1.17.4"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
-  integrity sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==
+es-abstract@^1.17.0, es-abstract@^1.17.4, es-abstract@^1.17.5:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
   dependencies:
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     has "^1.0.3"
     has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
     object-inspect "^1.7.0"
     object-keys "^1.1.1"
     object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.17.4, es-abstract@^1.17.5:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+es-abstract@^1.17.0-next.1:
+  version "1.17.4"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
+  integrity sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==
   dependencies:
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     has "^1.0.3"
     has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-regex "^1.1.0"
+    is-callable "^1.1.5"
+    is-regex "^1.0.5"
     object-inspect "^1.7.0"
     object-keys "^1.1.1"
     object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
+    string.prototype.trimleft "^2.1.1"
+    string.prototype.trimright "^2.1.1"
 
 es-get-iterator@^1.1.0:
   version "1.1.0"
@@ -13806,11 +13824,6 @@ eslint-plugin-es@^3.0.0:
     eslint-utils "^2.0.0"
     regexpp "^3.0.0"
 
-eslint-plugin-eslint-plugin@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-eslint-plugin/-/eslint-plugin-eslint-plugin-2.1.0.tgz#a7a00f15a886957d855feacaafee264f039e62d5"
-  integrity sha512-kT3A/ZJftt28gbl/Cv04qezb/NQ1dwYIbi8lyf806XMxkus7DvOVCLIfTXMrorp322Pnoez7+zabXH29tADIDg==
-
 eslint-plugin-import@^2.19.1:
   version "2.19.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.19.1.tgz#5654e10b7839d064dd0d46cd1b88ec2133a11448"
@@ -13897,21 +13910,22 @@ eslint-plugin-react-perf@^3.2.3:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-perf/-/eslint-plugin-react-perf-3.2.3.tgz#e28d42d3a1f7ec3c8976a94735d8e17e7d652a45"
   integrity sha512-bMiPt7uywwS1Ly25n752NE3Ei0XBZ3igplTkZ8GPJKyZVVUd3cHgzILGeQW2HIeAkzQ9zwk9HM6EcYDipdFk3Q==
 
-eslint-plugin-react@^7.17.0:
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.17.0.tgz#a31b3e134b76046abe3cd278e7482bd35a1d12d7"
-  integrity sha512-ODB7yg6lxhBVMeiH1c7E95FLD4E/TwmFjltiU+ethv7KPdCwgiFuOZg9zNRHyufStTDLl/dEFqI2Q1VPmCd78A==
+eslint-plugin-react@^7.20.3:
+  version "7.20.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.3.tgz#0590525e7eb83890ce71f73c2cf836284ad8c2f1"
+  integrity sha512-txbo090buDeyV0ugF3YMWrzLIUqpYTsWSDZV9xLSmExE1P/Kmgg9++PD931r+KEWS66O1c9R4srLVVHmeHpoAg==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
+    array.prototype.flatmap "^1.2.3"
     doctrine "^2.1.0"
-    eslint-plugin-eslint-plugin "^2.1.0"
     has "^1.0.3"
-    jsx-ast-utils "^2.2.3"
-    object.entries "^1.1.0"
-    object.fromentries "^2.0.1"
-    object.values "^1.1.0"
+    jsx-ast-utils "^2.4.1"
+    object.entries "^1.1.2"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
     prop-types "^15.7.2"
-    resolve "^1.13.1"
+    resolve "^1.17.0"
+    string.prototype.matchall "^4.0.2"
 
 eslint-rule-composer@^0.3.0:
   version "0.3.0"
@@ -18136,6 +18150,15 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
+internal-slot@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
+  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    has "^1.0.3"
+    side-channel "^1.0.2"
+
 interpret@1.2.0, interpret@^1.0.0, interpret@^1.1.0, interpret@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
@@ -20209,12 +20232,12 @@ jsx-ast-utils@^2.2.1:
     array-includes "^3.0.3"
     object.assign "^4.1.0"
 
-jsx-ast-utils@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz#8a9364e402448a3ce7f14d357738310d9248054f"
-  integrity sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==
+jsx-ast-utils@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
     object.assign "^4.1.0"
 
 jsx-to-string@^1.4.0:
@@ -23444,6 +23467,15 @@ object.entries@^1.0.4, object.entries@^1.1.0, object.entries@^1.1.1:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.entries@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
+  integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    has "^1.0.3"
+
 object.fromentries@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-1.0.0.tgz#e90ec27445ec6e37f48be9af9077d9aa8bef0d40"
@@ -23454,16 +23486,6 @@ object.fromentries@^1.0.0:
     function-bind "^1.1.1"
     has "^1.0.1"
 
-object.fromentries@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
-  integrity sha512-PUQv8Hbg3j2QX0IQYv3iAGCbGcu4yY4KQ92/dhA4sFSixBmSmp13UpDLs6jGK8rBtbmhNNIK99LD2k293jpiGA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.15.0"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
 object.fromentries@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
@@ -27595,7 +27617,7 @@ resolve@1.8.1:
   dependencies:
     path-parse "^1.0.5"
 
-resolve@^1.1.10, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.7.1, resolve@^1.8.1:
+resolve@^1.1.10, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.7.1, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -29476,6 +29498,18 @@ string.prototype.matchall@^3.0.0:
     has-symbols "^1.0.0"
     regexp.prototype.flags "^1.2.0"
 
+string.prototype.matchall@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
+  integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    has-symbols "^1.0.1"
+    internal-slot "^1.0.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+
 string.prototype.padend@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz#f3aaef7c1719f170c5eab1c32bf780d96e21f2f0"