[APM] @ts-error -> @ts-expect-error (#76492) (#76746)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/apm/e2e/cypress/support/index.ts

@@ -21,7 +21,7 @@
 
 import './commands';
 
-// @ts-ignore
+// @ts-expect-error
 import { register } from '@cypress/snapshot';
 
 register();

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

@@ -14,7 +14,7 @@ import { mean } from 'lodash';
 import React from 'react';
 import { asRelativeDateTimeRange } from '../../../../utils/formatters';
 import { getTimezoneOffsetInMs } from '../../../shared/charts/CustomPlot/getTimezoneOffsetInMs';
-// @ts-ignore
+// @ts-expect-error
 import Histogram from '../../../shared/charts/Histogram';
 import { EmptyMessage } from '../../../shared/EmptyMessage';
 

x-pack/plugins/apm/public/components/app/Main/route_config/route_handlers/agent_configuration.tsx

@@ -17,7 +17,7 @@ export function EditAgentConfigurationRouteHandler() {
 
   // typescript complains because `pageStop` does not exist in `APMQueryParams`
   // Going forward we should move away from globally declared query params and this is a first step
-  // @ts-ignore
+  // @ts-expect-error
   const { name, environment, pageStep } = toQuery(search);
 
   const res = useFetcher(
@@ -45,7 +45,7 @@ export function CreateAgentConfigurationRouteHandler() {
   const { search } = history.location;
 
   // Ignoring here because we specifically DO NOT want to add the query params to the global route handler
-  // @ts-ignore
+  // @ts-expect-error
   const { pageStep } = toQuery(search);
 
   return (

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

@@ -45,7 +45,7 @@ function doZoom(
 ) {
   if (cy) {
     const level = cy.zoom() + increment;
-    // @ts-ignore `.position()` _does_ work on a NodeCollection. It returns the position of the first element in the collection.
+    // @ts-expect-error `.position()` _does_ work on a NodeCollection. It returns the position of the first element in the collection.
     const primaryCenter = cy.nodes('.primary').position();
     const { x1, y1, w, h } = cy.nodes().boundingBox({});
     const graphCenter = { x: x1 + w / 2, y: y1 + h / 2 };
@@ -67,7 +67,7 @@ function useDebugDownloadUrl(cy?: cytoscape.Core) {
   // Handle elements changes to update the download URL
   useEffect(() => {
     const elementsHandler: cytoscape.EventHandler = (event) => {
-      // @ts-ignore The `true` argument to `cy.json` is to flatten the elements
+      // @ts-expect-error The `true` argument to `cy.json` is to flatten the elements
       // (instead of having them broken into nodes/edges.) DefinitelyTyped has
       // this wrong.
       const elementsJson = event.cy.json(true)?.elements.map((element) => ({

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

@@ -31,7 +31,7 @@ interface ContentsProps {
 // This method of detecting IE is from a Stack Overflow answer:
 // https://stackoverflow.com/a/21825207
 //
-// @ts-ignore `documentMode` is not recognized as a valid property of `document`.
+// @ts-expect-error `documentMode` is not recognized as a valid property of `document`.
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 
 function FlexColumnGroup(props: {

x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts

@@ -87,14 +87,14 @@ function getBorderWidth(el: cytoscape.NodeSingular) {
 // This method of detecting IE is from a Stack Overflow answer:
 // https://stackoverflow.com/a/21825207
 //
-// @ts-ignore `documentMode` is not recognized as a valid property of `document`.
+// @ts-expect-error `documentMode` is not recognized as a valid property of `document`.
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 
 export const getAnimationOptions = (
   theme: EuiTheme
 ): cytoscape.AnimationOptions => ({
   duration: parseInt(theme.eui.euiAnimSpeedNormal, 10),
-  // @ts-ignore The cubic-bezier options here are not recognized by the cytoscape types
+  // @ts-expect-error The cubic-bezier options here are not recognized by the cytoscape types
   easing: theme.eui.euiAnimSlightBounce,
 });
 
@@ -119,8 +119,6 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         'background-color': theme.eui.euiColorGhost,
         // The DefinitelyTyped definitions don't specify that a function can be
         // used here.
-        //
-        // @ts-ignore
         'background-image': isIE11
           ? undefined
           : (el: cytoscape.NodeSingular) => iconForNode(el) ?? defaultIcon,
@@ -176,7 +174,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         // The DefinitelyTyped definitions don't specify this property since it's
         // fairly new.
         //
-        // @ts-ignore
+        // @ts-expect-error
         'target-distance-from-node': isIE11
           ? undefined
           : theme.eui.paddingSizes.xs,
@@ -191,7 +189,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         'source-arrow-shape': isIE11 ? 'none' : 'triangle',
         'source-arrow-color': lineColor,
         'target-arrow-shape': isIE11 ? 'none' : 'triangle',
-        // @ts-ignore
+        // @ts-expect-error
         'source-distance-from-node': isIE11
           ? undefined
           : parseInt(theme.eui.paddingSizes.xs, 10),
@@ -202,7 +200,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
     },
     {
       selector: 'edge[isInverseEdge]',
-      // @ts-ignore DefinitelyTyped says visibility is "none" but it's
+      // @ts-expect-error DefinitelyTyped says visibility is "none" but it's
       // actually "hidden"
       style: { visibility: 'hidden' },
     },
@@ -210,7 +208,6 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
       selector: 'edge.nodeHover',
       style: {
         width: 4,
-        // @ts-ignore
         'z-index': zIndexEdgeHover,
         'line-color': theme.eui.euiColorDarkShade,
         'source-arrow-color': theme.eui.euiColorDarkShade,
@@ -230,7 +227,6 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         'line-color': theme.eui.euiColorPrimary,
         'source-arrow-color': theme.eui.euiColorPrimary,
         'target-arrow-color': theme.eui.euiColorPrimary,
-        // @ts-ignore
         'z-index': zIndexEdgeHighlight,
       },
     },

x-pack/plugins/apm/public/components/app/ServiceMap/icons.ts

@@ -111,7 +111,7 @@ function getSpanIcon(type?: string, subtype?: string) {
 // This method of detecting IE is from a Stack Overflow answer:
 // https://stackoverflow.com/a/21825207
 //
-// @ts-ignore `documentMode` is not recognized as a valid property of `document`.
+// @ts-expect-error `documentMode` is not recognized as a valid property of `document`.
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 
 export function iconForNode(node: cytoscape.NodeSingular) {

x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx

@@ -61,7 +61,7 @@ const httpGet = jest.fn();
 
 describe('Service Overview -> View', () => {
   beforeEach(() => {
-    // @ts-ignore
+    // @ts-expect-error
     global.sessionStorage = new SessionStorageMock();
 
     // mock urlParams

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

@@ -16,7 +16,7 @@ import { TransactionDistributionAPIResponse } from '../../../../../server/lib/tr
 import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { getDurationFormatter } from '../../../../utils/formatters';
-// @ts-ignore
+// @ts-expect-error
 import Histogram from '../../../shared/charts/Histogram';
 import { EmptyMessage } from '../../../shared/EmptyMessage';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx

@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
 import { px, unit } from '../../../../../style/variables';
-// @ts-ignore
 import { Legend } from '../../../../shared/charts/Legend';
 import { IServiceColors } from './Waterfall/waterfall_helpers/waterfall_helpers';
 

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx

@@ -8,13 +8,13 @@ import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { tint } from 'polished';
 import React, { Fragment } from 'react';
-// @ts-ignore
+// @ts-expect-error
 import sql from 'react-syntax-highlighter/dist/languages/sql';
 import SyntaxHighlighter, {
   registerLanguage,
-  // @ts-ignore
+  // @ts-expect-error
 } from 'react-syntax-highlighter/dist/light';
-// @ts-ignore
+// @ts-expect-error
 import { xcode } from 'react-syntax-highlighter/dist/styles';
 import styled from 'styled-components';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx

@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import { History, Location } from 'history';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-// @ts-ignore
 import { StickyContainer } from 'react-sticky';
 import styled from 'styled-components';
 import { px } from '../../../../../../style/variables';

x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionLink.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Transaction } from '../../../../../../typings/es_schemas/ui/transaction';
-// @ts-ignore
+// @ts-expect-error
 import configureStore from '../../../../../store/config/configureStore';
 import { getDiscoverQuery } from '../DiscoverTransactionLink';
 

x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx

@@ -12,7 +12,6 @@ import { px, unit, units } from '../../../style/variables';
 import { Stacktrace } from '.';
 import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
 
-// @ts-ignore Styled Components has trouble inferring the types of the default props here.
 const Accordion = styled(EuiAccordion)`
   border-top: ${({ theme }) => theme.eui.euiBorderThin};
   margin-top: ${px(units.half)};

x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx

@@ -8,17 +8,17 @@ import { size } from 'lodash';
 import { tint } from 'polished';
 import React from 'react';
 // TODO add dependency for @types/react-syntax-highlighter
-// @ts-ignore
+// @ts-expect-error
 import javascript from 'react-syntax-highlighter/dist/languages/javascript';
-// @ts-ignore
+// @ts-expect-error
 import python from 'react-syntax-highlighter/dist/languages/python';
-// @ts-ignore
+// @ts-expect-error
 import ruby from 'react-syntax-highlighter/dist/languages/ruby';
-// @ts-ignore
+// @ts-expect-error
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/light';
-// @ts-ignore
+// @ts-expect-error
 import { registerLanguage } from 'react-syntax-highlighter/dist/light';
-// @ts-ignore
+// @ts-expect-error
 import { xcode } from 'react-syntax-highlighter/dist/styles';
 import styled from 'styled-components';
 import { StackframeWithLineContext } from '../../../../typings/es_schemas/raw/fields/stackframe';

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/CustomPlot.stories.tsx

@@ -5,7 +5,7 @@
  */
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-// @ts-ignore
+// @ts-expect-error
 import CustomPlot from './';
 
 storiesOf('shared/charts/CustomPlot', module).add(

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/getTimezoneOffsetInMs.test.ts

@@ -12,7 +12,7 @@ describe('getTimezoneOffsetInMs', () => {
   let originalTimezone: moment.MomentZone | null;
 
   beforeAll(() => {
-    // @ts-ignore moment types do not define defaultZone but it's there
+    // @ts-expect-error moment types do not define defaultZone but it's there
     originalTimezone = moment.defaultZone;
   });
 

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/getTimezoneOffsetInMs.ts

@@ -6,9 +6,9 @@
 import moment from 'moment-timezone';
 
 export function getTimezoneOffsetInMs(time: number) {
-  // @ts-ignore moment types don't define defaultZone but it's there
+  // @ts-expect-error moment types don't define defaultZone but it's there
   const zone = moment.defaultZone ? moment.defaultZone.name : moment.tz.guess();
 
-  // @ts-ignore
+  // @ts-expect-error
   return moment.tz.zone(zone).parse(time) * 60000;
 }

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.test.ts

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
 import * as plotUtils from './plotUtils';
 import { TimeSeries, Coordinate } from '../../../../../typings/timeseries';
 

x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx

@@ -14,7 +14,7 @@ import { useChartsSync } from '../../../../hooks/useChartsSync';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { callApmApi } from '../../../../services/rest/createCallApmApi';
-// @ts-ignore
+// @ts-expect-error
 import CustomPlot from '../CustomPlot';
 
 const tickFormatY = (y?: number) => {

x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx

@@ -7,7 +7,7 @@
 import React, { useCallback } from 'react';
 import { Coordinate, TimeSeries } from '../../../../../../typings/timeseries';
 import { useChartsSync } from '../../../../../hooks/useChartsSync';
-// @ts-ignore
+// @ts-expect-error
 import CustomPlot from '../../CustomPlot';
 
 interface Props {

x-pack/plugins/apm/public/services/__test__/callApi.test.ts

@@ -23,7 +23,7 @@ describe('callApi', () => {
       }),
     } as unknown) as HttpMock;
 
-    // @ts-ignore
+    // @ts-expect-error
     global.sessionStorage = new SessionStorageMock();
   });
 

x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts

@@ -5,9 +5,9 @@
  */
 
 import moment from 'moment';
-// @ts-ignore
+// @ts-expect-error
 import { calculateAuto } from './calculate_auto';
-// @ts-ignore
+// @ts-expect-error
 import { unitToSeconds } from './unit_to_seconds';
 
 export function getBucketSize(start: number, end: number, interval: string) {

x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.test.ts

@@ -72,7 +72,6 @@ describe('transformServiceMapResponses', () => {
       (element) => 'source' in element.data && 'target' in element.data
     );
 
-    // @ts-ignore
     expect(connection?.data.target).toBe('opbeans-node');
 
     expect(
@@ -149,9 +148,9 @@ describe('transformServiceMapResponses', () => {
 
     const nodejsNode = nodes.find((node) => node.data.id === '>opbeans-node');
 
-    // @ts-ignore
+    // @ts-expect-error
     expect(nodejsNode?.data[SPAN_TYPE]).toBe('external');
-    // @ts-ignore
+    // @ts-expect-error
     expect(nodejsNode?.data[SPAN_SUBTYPE]).toBe('aa');
   });
 

x-pack/plugins/apm/server/lib/transactions/breakdown/index.test.ts

@@ -79,7 +79,7 @@ describe('getTransactionBreakdown', () => {
   });
 
   it('should not include more KPIs than MAX_KPIs', async () => {
-    // @ts-ignore
+    // @ts-expect-error
     constants.MAX_KPIS = 2;
 
     const response = await getTransactionBreakdown({

x-pack/plugins/apm/server/routes/create_api/index.ts

@@ -140,7 +140,7 @@ export function createApi() {
                   // Only return values for parameters that have runtime types,
                   // but always include query as _debug is always set even if
                   // it's not defined in the route.
-                  // @ts-ignore
+                  // @ts-expect-error
                   params: pick(parsedParams, ...Object.keys(params), 'query'),
                   config,
                   logger,