[APM] useFetcher: Replace react-redux-request with hooks and Context API

package.json

@@ -293,6 +293,7 @@
     "@types/json5": "^0.0.30",
     "@types/listr": "^0.13.0",
     "@types/lodash": "^3.10.1",
+    "@types/lru-cache": "^5.1.0",
     "@types/minimatch": "^2.0.29",
     "@types/mocha": "^5.2.6",
     "@types/moment-timezone": "^0.5.8",

x-pack/package.json

@@ -44,8 +44,8 @@
     "@types/d3-array": "^1.2.1",
     "@types/d3-scale": "^2.0.0",
     "@types/d3-shape": "^1.3.1",
-    "@types/d3-time": "^1.0.7",
     "@types/d3-time-format": "^2.1.0",
+    "@types/d3-time": "^1.0.7",
     "@types/elasticsearch": "^5.0.30",
     "@types/graphql": "^0.13.1",
     "@types/history": "^4.6.2",
@@ -55,12 +55,13 @@
     "@types/jsonwebtoken": "^7.2.7",
     "@types/lodash": "^3.10.1",
     "@types/mocha": "^5.2.6",
+    "@types/object-hash": "^1.2.0",
     "@types/pngjs": "^3.3.1",
     "@types/prop-types": "^15.5.3",
-    "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
     "@types/react-redux": "^6.0.6",
     "@types/react-router-dom": "^4.3.1",
+    "@types/react": "^16.8.0",
     "@types/recompose": "^0.30.2",
     "@types/reduce-reducers": "^0.1.3",
     "@types/sinon": "^5.0.1",
@@ -115,7 +116,9 @@
     "proxyquire": "1.7.11",
     "react-docgen-typescript-loader": "^3.0.0",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
+    "react-hooks-testing-library": "^0.3.8",
     "react-test-renderer": "^16.8.0",
+    "react-testing-library": "^6.0.0",
     "redux-test-utils": "0.2.2",
     "rsync": "0.4.0",
     "run-sequence": "^2.2.1",
@@ -226,6 +229,7 @@
     "ngreact": "^0.5.1",
     "node-fetch": "^2.1.2",
     "nodemailer": "^4.6.4",
+    "object-hash": "^1.3.1",
     "object-path-immutable": "^0.5.3",
     "oppsy": "^2.0.0",
     "papaparse": "^4.6.0",

x-pack/plugins/__mocks__/ui/chrome.js

@@ -15,10 +15,14 @@ function getUiSettingsClient() {
         default:
           throw new Error(`Unexpected config key: ${key}`);
       }
-    }
+    },
   };
 }
 
+function getBasePath() {
+  return '/some/base/path';
+}
+
 function addBasePath(path) {
   return path;
 }
@@ -43,6 +47,7 @@ function getXsrfToken() {
 export default {
   getInjected,
   addBasePath,
+  getBasePath,
   getUiSettingsClient,
-  getXsrfToken
+  getXsrfToken,
 };

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

@@ -7,8 +7,6 @@
 import { shallow } from 'enzyme';
 import { Location } from 'history';
 import React from 'react';
-import { RRRRenderResponse } from 'react-redux-request';
-import { ErrorGroupAPIResponse } from 'x-pack/plugins/apm/server/lib/errors/get_error_group';
 import { APMError } from 'x-pack/plugins/apm/typings/es_schemas/ui/APMError';
 import { mockMoment } from '../../../../utils/testHelpers';
 import { DetailView } from './index';
@@ -31,21 +29,17 @@ describe('DetailView', () => {
   });
 
   it('should render Discover button', () => {
-    const errorGroup: RRRRenderResponse<ErrorGroupAPIResponse> = {
-      args: [],
-      status: 'SUCCESS',
-      data: {
-        occurrencesCount: 10,
-        error: ({
-          '@timestamp': 'myTimestamp',
-          http: { request: { method: 'GET' } },
-          url: { full: 'myUrl' },
-          service: { name: 'myService' },
-          user: { id: 'myUserId' },
-          error: { exception: { handled: true } },
-          transaction: { id: 'myTransactionId', sampled: true }
-        } as unknown) as APMError
-      }
+    const errorGroup = {
+      occurrencesCount: 10,
+      error: ({
+        '@timestamp': 'myTimestamp',
+        http: { request: { method: 'GET' } },
+        url: { full: 'myUrl' },
+        service: { name: 'myService' },
+        user: { id: 'myUserId' },
+        error: { exception: { handled: true } },
+        transaction: { id: 'myTransactionId', sampled: true }
+      } as unknown) as APMError
     };
     const wrapper = shallow(
       <DetailView
@@ -60,13 +54,9 @@ describe('DetailView', () => {
   });
 
   it('should render StickyProperties', () => {
-    const errorGroup: RRRRenderResponse<ErrorGroupAPIResponse> = {
-      args: [],
-      status: 'SUCCESS',
-      data: {
-        occurrencesCount: 10,
-        error: {} as APMError
-      }
+    const errorGroup = {
+      occurrencesCount: 10,
+      error: {} as APMError
     };
     const wrapper = shallow(
       <DetailView
@@ -80,17 +70,13 @@ describe('DetailView', () => {
   });
 
   it('should render tabs', () => {
-    const errorGroup: RRRRenderResponse<ErrorGroupAPIResponse> = {
-      args: [],
-      status: 'SUCCESS',
-      data: {
-        occurrencesCount: 10,
-        error: ({
-          '@timestamp': 'myTimestamp',
-          service: {},
-          user: {}
-        } as unknown) as APMError
-      }
+    const errorGroup = {
+      occurrencesCount: 10,
+      error: ({
+        '@timestamp': 'myTimestamp',
+        service: {},
+        user: {}
+      } as unknown) as APMError
     };
     const wrapper = shallow(
       <DetailView
@@ -105,16 +91,12 @@ describe('DetailView', () => {
   });
 
   it('should render TabContent', () => {
-    const errorGroup: RRRRenderResponse<ErrorGroupAPIResponse> = {
-      args: [],
-      status: 'SUCCESS',
-      data: {
-        occurrencesCount: 10,
-        error: ({
-          '@timestamp': 'myTimestamp',
-          context: {}
-        } as unknown) as APMError
-      }
+    const errorGroup = {
+      occurrencesCount: 10,
+      error: ({
+        '@timestamp': 'myTimestamp',
+        context: {}
+      } as unknown) as APMError
     };
     const wrapper = shallow(
       <DetailView

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

@@ -16,15 +16,13 @@ import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
 import { get } from 'lodash';
 import React from 'react';
-import { RRRRenderResponse } from 'react-redux-request';
 import styled from 'styled-components';
 import { idx } from 'x-pack/plugins/apm/common/idx';
 import {
   fromQuery,
   history,
   toQuery
 } from 'x-pack/plugins/apm/public/components/shared/Links/url_helpers';
-import { STATUS } from 'x-pack/plugins/apm/public/constants';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
 import { ErrorGroupAPIResponse } from 'x-pack/plugins/apm/server/lib/errors/get_error_group';
 import { APMError } from 'x-pack/plugins/apm/typings/es_schemas/ui/APMError';
@@ -49,16 +47,13 @@ const HeaderContainer = styled.div`
 `;
 
 interface Props {
-  errorGroup: RRRRenderResponse<ErrorGroupAPIResponse>;
+  errorGroup: ErrorGroupAPIResponse;
   urlParams: IUrlParams;
   location: Location;
 }
 
 export function DetailView({ errorGroup, urlParams, location }: Props) {
-  if (errorGroup.status !== STATUS.SUCCESS) {
-    return null;
-  }
-  const { transaction, error, occurrencesCount } = errorGroup.data;
+  const { transaction, error, occurrencesCount } = errorGroup;
 
   if (!error) {
     return null;