[APM Replace usage of idx with optional chaining

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/index.test.tsx

@@ -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.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/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/ServiceDetails/ServiceIntegrations/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/Settings/AgentConfigurations/AddEditFlyout/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/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.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/index.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>

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

@@ -7,7 +7,6 @@
 import { EuiCallOut, EuiHorizontalRule } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { idx } from '@kbn/elastic-idx';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/Transaction';
 import { ElasticDocsLink } from '../../../../../../shared/Links/ElasticDocsLink';
 
@@ -16,7 +15,7 @@ export function DroppedSpansWarning({
 }: {
   transactionDoc: Transaction;
 }) {
-  const dropped = idx(transactionDoc, _ => _.transaction.span_count.dropped);
+  const dropped = transactionDoc.transaction.span_count?.dropped;
   if (!dropped) {
     return null;
   }

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts

@@ -15,7 +15,6 @@ import {
   isEmpty,
   first
 } from 'lodash';
-import { idx } from '@kbn/elastic-idx';
 import { TraceAPIResponse } from '../../../../../../../../server/lib/traces/get_trace';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/Span';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/Transaction';
@@ -224,7 +223,7 @@ function createGetTransactionById(itemsById: IWaterfallIndex) {
     }
 
     const item = itemsById[id];
-    const isTransaction = idx(item, _ => _.docType) === 'transaction';
+    const isTransaction = item?.docType === 'transaction';
     if (isTransaction) {
       return (item as IWaterfallItemTransaction).transaction;
     }

x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx

@@ -7,7 +7,6 @@
 import { EuiBasicTable } from '@elastic/eui';
 import { sortByOrder } from 'lodash';
 import React, { useMemo, useCallback, ReactNode } from 'react';
-import { idx } from '@kbn/elastic-idx';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { history } from '../../../utils/history';
 import { fromQuery, toQuery } from '../Links/url_helpers';
@@ -42,7 +41,7 @@ function UnoptimizedManagedTable<T>(props: Props<T>) {
     columns,
     initialPageIndex = 0,
     initialPageSize = 10,
-    initialSortField = idx(props, _ => _.columns[0].field) || '',
+    initialSortField = props.columns[0]?.field || '',
     initialSortDirection = 'asc',
     hidePerPageOptions = true,
     noItemsMessage,

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

@@ -22,7 +22,6 @@ import { registerLanguage } from 'react-syntax-highlighter/dist/light';
 // @ts-ignore
 import { xcode } from 'react-syntax-highlighter/dist/styles';
 import styled from 'styled-components';
-import { idx } from '@kbn/elastic-idx';
 import { IStackframeWithLineContext } from '../../../../typings/es_schemas/raw/fields/Stackframe';
 import { borderRadius, px, unit, units } from '../../../style/variables';
 
@@ -106,13 +105,13 @@ const Code = styled.code`
 
 function getStackframeLines(stackframe: IStackframeWithLineContext) {
   const line = stackframe.line.context;
-  const preLines = idx(stackframe, _ => _.context.pre) || [];
-  const postLines = idx(stackframe, _ => _.context.post) || [];
+  const preLines = stackframe.context?.pre || [];
+  const postLines = stackframe.context?.post || [];
   return [...preLines, line, ...postLines];
 }
 
 function getStartLineNumber(stackframe: IStackframeWithLineContext) {
-  const preLines = size(idx(stackframe, _ => _.context.pre) || []);
+  const preLines = size(stackframe.context?.pre || []);
   return stackframe.line.number - preLines;
 }
 
@@ -125,7 +124,7 @@ interface Props {
 export function Context({ stackframe, codeLanguage, isLibraryFrame }: Props) {
   const lines = getStackframeLines(stackframe);
   const startLineNumber = getStartLineNumber(stackframe);
-  const highlightedLineIndex = size(idx(stackframe, _ => _.context.pre) || []);
+  const highlightedLineIndex = size(stackframe.context?.pre || []);
   const language = codeLanguage || 'javascript'; // TODO: Add support for more languages
 
   return (

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

@@ -7,7 +7,6 @@
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import { idx } from '@kbn/elastic-idx';
 import { IStackframe } from '../../../../typings/es_schemas/raw/fields/Stackframe';
 import { fontFamilyCode, fontSize, px, units } from '../../../style/variables';
 
@@ -35,7 +34,7 @@ const FrameHeading: React.SFC<Props> = ({ stackframe, isLibraryFrame }) => {
   const FileDetail = isLibraryFrame
     ? LibraryFrameFileDetail
     : AppFrameFileDetail;
-  const lineNumber = idx(stackframe, _ => _.line.number) || 0;
+  const lineNumber = stackframe.line.number;
   return (
     <FileDetails>
       <FileDetail>{stackframe.filename}</FileDetail> in{' '}

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

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { idx } from '@kbn/elastic-idx';
 import { Transaction } from '../../../../typings/es_schemas/ui/Transaction';
 import { Summary } from './';
 import { TimestampTooltip } from '../TimestampTooltip';
@@ -22,15 +21,17 @@ interface Props {
 }
 
 const getTransactionResultSummaryItem = (transaction: Transaction) => {
-  const result = idx(transaction, _ => _.transaction.result);
+  const result = transaction.transaction.result;
   const isRumAgent = isRumAgentName(transaction.agent.name);
   const url = isRumAgent
-    ? idx(transaction, _ => _.transaction.page.url)
-    : idx(transaction, _ => _.url.full);
+    ? transaction.transaction.page?.url
+    : transaction.url?.full;
 
   if (url) {
-    const method = idx(transaction, _ => _.http.request.method);
-    const status = idx(transaction, _ => _.http.response.status_code);
+    const method = transaction.http?.request.method;
+    // TODO(TS-3.7-ESLINT)
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    const status = transaction.http?.response?.status_code;
 
     return <HttpInfoSummaryItem method={method} status={status} url={url} />;
   }