[APM Replace usage of idx with optional chaining (#50849)

Closes #50758

Author: dgieselaar

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/ErrorTabs.tsx

@@ -6,7 +6,6 @@
 
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
-import { idx } from '@kbn/elastic-idx';
 import { APMError } from '../../../../../typings/es_schemas/ui/APMError';
 
 export interface ErrorTab {
@@ -39,7 +38,7 @@ export const metadataTab: ErrorTab = {
 };
 
 export function getTabs(error: APMError) {
-  const hasLogStacktrace = !isEmpty(idx(error, _ => _.error.log.stacktrace));
+  const hasLogStacktrace = !isEmpty(error.error.log?.stacktrace);
   return [
     ...(hasLogStacktrace ? [logStacktraceTab] : []),
     exceptionStacktraceTab,

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/ExceptionStacktrace.tsx

@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { EuiTitle } from '@elastic/eui';
-import { idx } from '@kbn/elastic-idx/target';
 import { Exception } from '../../../../../typings/es_schemas/raw/ErrorRaw';
 import { Stacktrace } from '../../../shared/Stacktrace';
 import { CauseStacktrace } from '../../../shared/Stacktrace/CauseStacktrace';
@@ -20,7 +19,7 @@ export function ExceptionStacktrace({
   codeLanguage,
   exceptions
 }: ExceptionStacktraceProps) {
-  const title = idx(exceptions, _ => _[0].message);
+  const title = exceptions[0]?.message;
 
   return (
     <>

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__snapshots__/index.test.tsx.snap

@@ -60,6 +60,7 @@ describe('DetailView', () => {
     const errorGroup = {
       occurrencesCount: 10,
       error: {
+        error: {},
         timestamp: {
           us: 0
         }
@@ -85,6 +86,7 @@ describe('DetailView', () => {
         timestamp: {
           us: 0
         },
+        error: {},
         service: {},
         user: {}
       } as any
@@ -109,6 +111,7 @@ describe('DetailView', () => {
         timestamp: {
           us: 0
         },
+        error: {},
         context: {}
       } as any
     };

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.test.tsx

@@ -19,7 +19,6 @@ import { Location } from 'history';
 import React from 'react';
 import styled from 'styled-components';
 import { first } from 'lodash';
-import { idx } from '@kbn/elastic-idx';
 import { ErrorGroupAPIResponse } from '../../../../../server/lib/errors/get_error_group';
 import { APMError } from '../../../../../typings/es_schemas/ui/APMError';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
@@ -80,11 +79,12 @@ export function DetailView({ errorGroup, urlParams, location }: Props) {
   const tabs = getTabs(error);
   const currentTab = getCurrentTab(tabs, urlParams.detailTab);
 
-  const errorUrl =
-    idx(error, _ => _.error.page.url) || idx(error, _ => _.url.full);
+  const errorUrl = error.error.page?.url || error.url?.full;
 
-  const method = idx(error, _ => _.http.request.method);
-  const status = idx(error, _ => _.http.response.status_code);
+  const method = error.http?.request.method;
+  // TODO(TS-3.7-ESLINT)
+  // eslint-disable-next-line @typescript-eslint/camelcase
+  const status = error.http?.response?.status_code;
 
   return (
     <EuiPanel>
@@ -188,9 +188,9 @@ function TabContent({
   error: APMError;
   currentTab: ErrorTab;
 }) {
-  const codeLanguage = idx(error, _ => _.service.language.name);
-  const exceptions = idx(error, _ => _.error.exception) || [];
-  const logStackframes = idx(error, _ => _.error.log.stacktrace);
+  const codeLanguage = error.service.language?.name;
+  const exceptions = error.error.exception || [];
+  const logStackframes = error.error.log?.stacktrace;
 
   switch (currentTab.key) {
     case logStacktraceTab.key:

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

@@ -17,7 +17,6 @@ import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import { idx } from '@kbn/elastic-idx';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
 import { useFetcher } from '../../../hooks/useFetcher';
 import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
@@ -115,14 +114,11 @@ export function ErrorGroupDetails() {
 
   // If there are 0 occurrences, show only distribution chart w. empty message
   const showDetails = errorGroupData.occurrencesCount !== 0;
-  const logMessage = idx(errorGroupData, _ => _.error.error.log.message);
-  const excMessage = idx(
-    errorGroupData,
-    _ => _.error.error.exception[0].message
-  );
-  const culprit = idx(errorGroupData, _ => _.error.error.culprit);
+  const logMessage = errorGroupData.error?.error.log?.message;
+  const excMessage = errorGroupData.error?.error.exception?.[0].message;
+  const culprit = errorGroupData.error?.error.culprit;
   const isUnhandled =
-    idx(errorGroupData, _ => _.error.error.exception[0].handled) === false;
+    errorGroupData.error?.error.exception?.[0].handled === false;
 
   return (
     <div>

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

@@ -13,7 +13,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import { memoize } from 'lodash';
 import React, { Fragment } from 'react';
-import { idx } from '@kbn/elastic-idx';
 import { KibanaCoreContext } from '../../../../../../observability/public';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { LicenseContext } from '../../../../context/LicenseContext';
@@ -149,9 +148,9 @@ export class ServiceIntegrations extends React.Component<Props, State> {
                 panels={[
                   {
                     id: 0,
-                    items: this.getPanelItems(
-                      idx(license, _ => _.features.ml.is_available)
-                    )
+                    // TODO(TS-3.7-ESLINT)
+                    // eslint-disable-next-line @typescript-eslint/camelcase
+                    items: this.getPanelItems(license.features.ml?.is_available)
                   }
                 ]}
               />

x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx

@@ -19,7 +19,6 @@ import {
   EuiText,
   EuiSpacer
 } from '@elastic/eui';
-import { idx } from '@kbn/elastic-idx';
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { isRight } from 'fp-ts/lib/Either';
@@ -89,18 +88,21 @@ export function AddEditFlyout({
 
   // config settings
   const [sampleRate, setSampleRate] = useState<string>(
+    // TODO(TS-3.7-ESLINT)
     (
-      idx(selectedConfig, _ => _.settings.transaction_sample_rate) ||
+      selectedConfig?.settings.transaction_sample_rate || // eslint-disable-line @typescript-eslint/camelcase
       defaultSettings.TRANSACTION_SAMPLE_RATE
     ).toString()
   );
   const [captureBody, setCaptureBody] = useState<string>(
-    idx(selectedConfig, _ => _.settings.capture_body) ||
-      defaultSettings.CAPTURE_BODY
+    // TODO(TS-3.7-ESLINT)
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    selectedConfig?.settings.capture_body || defaultSettings.CAPTURE_BODY
   );
   const [transactionMaxSpans, setTransactionMaxSpans] = useState<string>(
+    // TODO(TS-3.7-ESLINT)
     (
-      idx(selectedConfig, _ => _.settings.transaction_max_spans) ||
+      selectedConfig?.settings.transaction_max_spans || // eslint-disable-line @typescript-eslint/camelcase
       defaultSettings.TRANSACTION_MAX_SPANS
     ).toString()
   );

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

@@ -9,7 +9,6 @@ import styled from 'styled-components';
 
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
-import { idx } from '@kbn/elastic-idx';
 import {
   borderRadius,
   fontFamilyCode,
@@ -34,7 +33,7 @@ interface Props {
 }
 
 export function HttpContext({ httpContext }: Props) {
-  const url = idx(httpContext, _ => _.url.original);
+  const url = httpContext?.url?.original;
 
   if (!url) {
     return null;

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

@@ -21,7 +21,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import { idx } from '@kbn/elastic-idx';
 import { px, units } from '../../../../../../../style/variables';
 import { Summary } from '../../../../../../shared/Summary';
 import { TimestampTooltip } from '../../../../../../shared/TimestampTooltip';
@@ -98,13 +97,15 @@ export function SpanFlyout({
   }
 
   const stackframes = span.span.stacktrace;
-  const codeLanguage = idx(parentTransaction, _ => _.service.language.name);
-  const dbContext = idx(span, _ => _.span.db);
-  const httpContext = idx(span, _ => _.span.http);
+  const codeLanguage = parentTransaction?.service.language?.name;
+  const dbContext = span.span.db;
+  const httpContext = span.span.http;
   const spanTypes = getSpanTypes(span);
-  const spanHttpStatusCode = idx(httpContext, _ => _.response.status_code);
-  const spanHttpUrl = idx(httpContext, _ => _.url.original);
-  const spanHttpMethod = idx(httpContext, _ => _.method);
+  // TODO(TS-3.7-ESLINT)
+  // eslint-disable-next-line @typescript-eslint/camelcase
+  const spanHttpStatusCode = httpContext?.response.status_code;
+  const spanHttpUrl = httpContext?.url?.original;
+  const spanHttpMethod = httpContext?.method;
 
   return (
     <EuiPortal>