Fix eslint, tsc lint issues and unit tests

x-pack/legacy/common/eui_styled_components/eui_styled_components.tsx

@@ -26,7 +26,7 @@ const EuiThemeProvider = <
 }) => (
   <ThemeProvider
     {...otherProps}
-    theme={(outerTheme?: OuterTheme) => ({
+    theme={(outerTheme) => ({
       ...outerTheme,
       eui: darkMode ? euiDarkVars : euiLightVars,
       darkMode,

x-pack/plugins/apm/public/application/index.tsx

@@ -8,8 +8,9 @@ import { ApmRoute } from '@elastic/apm-rum-react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
-import styled from 'styled-components';
-import { EuiThemeProvider } from '../../../observability/public';
+import styled, { ThemeProvider } from 'styled-components';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { CoreStart, AppMountParameters } from '../../../../../src/core/public';
 import { ApmPluginSetupDeps } from '../plugin';
 import { ApmPluginContext } from '../context/ApmPluginContext';
@@ -42,7 +43,13 @@ const App = () => {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
-    <EuiThemeProvider darkMode={darkMode}>
+    <ThemeProvider
+      theme={(outerTheme) => ({
+        ...outerTheme,
+        eui: darkMode ? euiDarkVars : euiLightVars,
+        darkMode,
+      })}
+    >
       <MainContainer data-test-subj="apmMainContainer" role="main">
         <UpdateBreadcrumbs routes={routes} />
         <Route component={ScrollToTopOnPathChange} />
@@ -54,7 +61,7 @@ const App = () => {
           </Switch>
         </APMIndicesPermission>
       </MainContainer>
-    </EuiThemeProvider>
+    </ThemeProvider>
   );
 };
 

x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx

@@ -7,12 +7,13 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { EuiButtonIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import styled, { ThemeContext } from 'styled-components';
+import styled from 'styled-components';
 import { CytoscapeContext } from './Cytoscape';
 import { getAnimationOptions, getNodeHeight } from './cytoscapeOptions';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { APMQueryParams } from '../../shared/Links/url_helpers';
+import { useTheme } from '../../../hooks/useTheme';
 
 const ControlsContainer = styled('div')`
   left: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
@@ -59,7 +60,7 @@ function doZoom(
 }
 
 export const Controls = () => {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const { urlParams } = useUrlParams();
   const currentSearch = urlParams.kuery ?? '';

x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -11,11 +11,10 @@ import React, {
   useEffect,
   useRef,
   useState,
-  useContext,
 } from 'react';
 import cytoscape from 'cytoscape';
 import { debounce } from 'lodash';
-import { ThemeContext } from 'styled-components';
+import { useTheme } from '../../../hooks/useTheme';
 import {
   getAnimationOptions,
   getCytoscapeOptions,
@@ -114,7 +113,7 @@ export const Cytoscape = ({
   serviceName,
   style,
 }: CytoscapeProps) => {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const [ref, cy] = useCytoscape({
     ...getCytoscapeOptions(theme),
     elements,

x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx

@@ -7,9 +7,10 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import styled, { ThemeContext } from 'styled-components';
+import styled from 'styled-components';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { CytoscapeContext } from './Cytoscape';
+import { useTheme } from '../../../hooks/useTheme';
 
 const EmptyBannerContainer = styled.div`
   margin: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
@@ -23,7 +24,7 @@ const EmptyBannerContainer = styled.div`
 `;
 
 export const EmptyBanner = () => {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const [nodeCount, setNodeCount] = useState(0);
 

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/anomaly_detection.tsx

@@ -5,15 +5,16 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React, { useContext } from 'react';
-import styled, { ThemeContext } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiTitle,
   EuiIconTip,
   EuiHealth,
 } from '@elastic/eui';
+import { useTheme } from '../../../../hooks/useTheme';
 import { fontSize, px } from '../../../../style/variables';
 import { asInteger } from '../../../../utils/formatters';
 import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
@@ -51,7 +52,7 @@ interface AnomalyDetectionProps {
 }
 
 export function AnomalyDetection({ serviceNodeData }: AnomalyDetectionProps) {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const anomalySeverity = serviceNodeData.anomaly_severity;
   const anomalyScore = serviceNodeData.anomaly_score;
   const actualValue = serviceNodeData.actual_value;

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx

@@ -15,7 +15,7 @@ import React, {
 } from 'react';
 import { EuiPopover } from '@elastic/eui';
 import cytoscape from 'cytoscape';
-import { ThemeContext } from 'styled-components';
+import { useTheme } from '../../../../hooks/useTheme';
 import { SERVICE_NAME } from '../../../../../common/elasticsearch_fieldnames';
 import { CytoscapeContext } from '../Cytoscape';
 import { getAnimationOptions } from '../cytoscapeOptions';
@@ -26,7 +26,7 @@ interface PopoverProps {
 }
 
 export const Popover = ({ focusedServiceName }: PopoverProps) => {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const [selectedNode, setSelectedNode] = useState<
     cytoscape.NodeSingular | undefined

x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { ThemeContext } from 'styled-components';
+import { useTheme } from '../../../hooks/useTheme';
 import {
   invalidLicenseMessage,
   isValidPlatinumLicense,
@@ -30,7 +30,7 @@ interface ServiceMapProps {
 }
 
 export const ServiceMap = ({ serviceName }: ServiceMapProps) => {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const license = useLicense();
   const { urlParams } = useUrlParams();
 

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/List/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiEmptyPrompt,
@@ -14,8 +14,8 @@ import {
   EuiToolTip,
   EuiButtonIcon,
 } from '@elastic/eui';
-import { ThemeContext } from 'styled-components';
 import { isEmpty } from 'lodash';
+import { useTheme } from '../../../../../hooks/useTheme';
 import { FETCH_STATUS } from '../../../../../hooks/useFetcher';
 import { ITableColumn, ManagedTable } from '../../../../shared/ManagedTable';
 import { LoadingStatePrompt } from '../../../../shared/LoadingStatePrompt';
@@ -39,7 +39,7 @@ interface Props {
 }
 
 export const AgentConfigurationList = ({ status, data, refetch }: Props) => {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const [configToBeDeleted, setConfigToBeDeleted] = useState<Config | null>(
     null
   );

x-pack/plugins/apm/public/components/shared/KeyValueTable/__test__/KeyValueTable.test.tsx

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { KeyValueTable } from '..';
+import { render } from '@testing-library/react';
 import { renderWithTheme } from '../../../../utils/testHelpers';
 
 function getKeys(output: ReturnType<typeof render>) {

x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx

@@ -3,10 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useContext } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
-import styled, { ThemeContext } from 'styled-components';
+import styled from 'styled-components';
 import { EuiBadge } from '@elastic/eui';
+import { useTheme } from '../../../hooks/useTheme';
 import { px } from '../../../../public/style/variables';
 import { units } from '../../../style/variables';
 
@@ -19,7 +20,7 @@ const Badge = (styled(EuiBadge)`
 ` as unknown) as typeof EuiBadge;
 
 export const ErrorCountSummaryItemBadge = ({ count }: Props) => {
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <Badge color={theme.eui.euiColorDanger}>

x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx

@@ -5,9 +5,8 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
 import { UserAgentSummaryItem } from './UserAgentSummaryItem';
-import { renderWithTheme, mountWithTheme } from '../../../utils/testHelpers';
+import { mountWithTheme } from '../../../utils/testHelpers';
 
 describe('UserAgentSummaryItem', () => {
   describe('render', () => {