Update create-react-app to 2.1.2

.eslintrc

@@ -49,14 +49,6 @@
     /* import */
     "import/prefer-default-export": 1,
     "import/no-named-default": 0,
-    "import/extensions": 0,
-
-    "new-cap": [2, {
-      "capIsNewExceptions": [
-        "Immutable.Map",
-        "Immutable.List",
-        "Immutable.Set"
-      ]
-    }]
+    "import/extensions": 0
   }
 }

package.json

@@ -2,8 +2,8 @@
   "private": true,
   "license": "Apache-2.0",
   "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "eslint": "^4.5.0",
+    "babel-eslint": "9.x.x",
+    "eslint": "5.6.0",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-config-prettier": "^2.3.0",
     "eslint-config-react-app": "^2.0.0",
@@ -16,7 +16,8 @@
     "husky": "^0.14.3",
     "lerna": "^2.10.2",
     "lint-staged": "^7.0.4",
-    "prettier": "^1.10.2"
+    "prettier": "^1.10.2",
+    "rxjs-compat": "6.3.3"
   },
   "workspaces": ["packages/*"],
   "scripts": {

packages/jaeger-ui/config-overrides.js

@@ -13,27 +13,38 @@
 // limitations under the License.
 
 /* eslint-disable import/no-extraneous-dependencies */
-
-const path = require('path');
 const fs = require('fs');
 const { injectBabelPlugin } = require('react-app-rewired');
 const rewireLess = require('react-app-rewire-less');
 const lessToJs = require('less-vars-to-js');
-const rewireBabelLoader = require('react-app-rewire-babel-loader');
-
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
-// Read the less file in as string
+// Convert less vars to JS
 const loadedVarOverrides = fs.readFileSync('config-overrides-antd-vars.less', 'utf8');
-
-// Pass in file contents
 const modifyVars = lessToJs(loadedVarOverrides);
 
-module.exports = function override(_config, env) {
+function webpack(_config, env) {
   let config = _config;
-  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
-  config = rewireLess.withLoaderOptions({ modifyVars })(config, env);
-  config = rewireBabelLoader.include(config, resolveApp('../../node_modules/drange'));
+  config = rewireLess.withLoaderOptions({
+    modifyVars,
+    javascriptEnabled: true,
+  })(config, env);
+  config = injectBabelPlugin(
+    ['import', { libraryName: 'antd', style: true, libraryDirectory: 'lib' }],
+    config
+  );
   return config;
-};
+}
+
+// Don't use react-app-rewired/scripts/utils/babelTransform.js for the jest
+// transform - it has an issue with automatically loading decorators.
+function jest(config) {
+  const _config = config;
+  Object.keys(_config.transform).forEach(key => {
+    if (_config.transform[key].endsWith('babelTransform.js')) {
+      _config.transform[key] = require.resolve('./jest-babel-transform.js');
+    }
+  });
+  return config;
+}
+
+module.exports = { jest, webpack };

packages/jaeger-ui/jest-babel-transform.js

@@ -0,0 +1,23 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const babelJest = require('babel-jest');
+
+// Derived from react-app-rewired/scripts/utils/babelTransform.js
+module.exports = babelJest.createTransformer({
+  presets: [require.resolve('babel-preset-react-app')],
+  plugins: [],
+  babelrc: true,
+});

packages/jaeger-ui/package.json

@@ -4,28 +4,19 @@
   "version": "0.0.1",
   "main": "src/index.js",
   "license": "Apache-2.0",
-  "proxy": {
-    "/api": {
-      "target": "http://localhost:16686",
-      "logLevel": "silent",
-      "secure": false,
-      "changeOrigin": true,
-      "ws": true,
-      "xfwd": true
-    }
-  },
   "homepage": ".",
   "devDependencies": {
-    "babel-plugin-import": "^1.6.3",
+    "babel-plugin-import": "1.11.0",
     "bluebird": "^3.5.0",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "enzyme-to-json": "^3.3.0",
+    "http-proxy-middleware": "^0.19.1",
     "less-vars-to-js": "^1.2.1",
     "react-app-rewire-babel-loader": "^0.1.1",
-    "react-app-rewire-less": "^2.1.0",
-    "react-app-rewired": "^1.4.0",
-    "react-scripts": "^1.0.11",
+    "react-app-rewire-less": "2.1.3",
+    "react-app-rewired": "2.0.2-next.0",
+    "react-scripts": "2.1.2",
     "react-test-renderer": "^15.6.1",
     "sinon": "^3.2.1",
     "source-map-explorer": "^1.6.0"
@@ -47,7 +38,6 @@
     "history": "^4.6.3",
     "is-promise": "^2.1.0",
     "isomorphic-fetch": "^2.2.1",
-    "jest": "^21.2.1",
     "json-markup": "^1.1.0",
     "lodash": "^4.17.4",
     "logfmt": "^1.2.0",
@@ -96,5 +86,6 @@
       "!src/utils/test/**/*.js",
       "!src/demo/**/*.js"
     ]
-  }
+  },
+  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
 }

packages/jaeger-ui/src/api/jaeger.js

@@ -92,7 +92,9 @@ const JaegerAPI = {
     return getJSON(`${this.apiRoot}services/${encodeURIComponent(serviceName)}/operations`);
   },
   fetchDependencies(endTs = new Date().getTime(), lookback = DEFAULT_DEPENDENCY_LOOKBACK) {
-    return getJSON(`${this.apiRoot}dependencies`, { query: { endTs, lookback } });
+    return getJSON(`${this.apiRoot}dependencies`, {
+      query: { endTs, lookback },
+    });
   },
 };
 

packages/jaeger-ui/src/components/DependencyGraph/index.test.js

@@ -112,6 +112,8 @@ describe('mapStateToProps()', () => {
 
 describe('mapDispatchToProps()', () => {
   it('providers the `fetchDependencies` prop', () => {
-    expect(mapDispatchToProps({})).toEqual({ fetchDependencies: expect.any(Function) });
+    expect(mapDispatchToProps({})).toEqual({
+      fetchDependencies: expect.any(Function),
+    });
   });
 });

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.js

@@ -91,7 +91,9 @@ export default class ResultItem extends React.PureComponent<Props> {
                     <li key={name} className="ub-inline-block ub-m1">
                       <Tag
                         className="ResultItem--serviceTag"
-                        style={{ borderLeftColor: colorGenerator.getColorByKey(name) }}
+                        style={{
+                          borderLeftColor: colorGenerator.getColorByKey(name),
+                        }}
                       >
                         {name} ({count})
                       </Tag>

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.js

@@ -69,7 +69,9 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
     } = this.props;
     // Use a div when the ResultItemTitle doesn't link to anything
     let WrapperComponent = 'div';
-    const wrapperProps: { [string]: string } = { className: 'ResultItemTitle--item ub-flex-auto' };
+    const wrapperProps: { [string]: string } = {
+      className: 'ResultItemTitle--item ub-flex-auto',
+    };
     if (linkTo) {
       WrapperComponent = Link;
       wrapperProps.to = linkTo;

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js

@@ -50,7 +50,11 @@ describe('<SearchResults>', () => {
   });
 
   it('hide scatter plot if queryparam hideGraph', () => {
-    wrapper.setProps({ hideGraph: true, embed: true, getSearchURL: () => 'SEARCH_URL' });
+    wrapper.setProps({
+      hideGraph: true,
+      embed: true,
+      getSearchURL: () => 'SEARCH_URL',
+    });
     expect(wrapper.find(ScatterPlot).length).toBe(0);
   });
 

packages/jaeger-ui/src/components/SearchTracePage/index.test.js

@@ -137,7 +137,11 @@ describe('mapStateToProps()', () => {
         state: fetchedState.DONE,
       },
       traces: {
-        [trace.traceID]: { id: trace.traceID, data: trace, state: fetchedState.DONE },
+        [trace.traceID]: {
+          id: trace.traceID,
+          data: trace,
+          state: fetchedState.DONE,
+        },
       },
     };
     const stateServices = {

packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.js

@@ -52,7 +52,10 @@ export default class TraceDiffGraph extends React.PureComponent<Props> {
 
   constructor(props: Props) {
     super(props);
-    this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
+    this.layoutManager = new LayoutManager({
+      useDotEdges: true,
+      splines: 'polyline',
+    });
   }
 
   componentWillUnmount() {

packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/duck.js

@@ -68,7 +68,12 @@ function archiveErred(state: TracesArchive, { meta, payload }: ArchiveAction) {
     // make flow happy
     throw new Error('Invalid state, missing API error details');
   }
-  const traceArchive = { error: payload, isArchived: false, isError: true, isAcknowledged: false };
+  const traceArchive = {
+    error: payload,
+    isArchived: false,
+    isError: true,
+    isAcknowledged: false,
+  };
   return { ...state, [meta.id]: traceArchive };
 }
 

packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.js

@@ -156,7 +156,10 @@ export default class TraceGraph extends React.PureComponent<Props, State> {
       showHelp: false,
       mode: MODE_SERVICE,
     };
-    this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
+    this.layoutManager = new LayoutManager({
+      useDotEdges: true,
+      splines: 'polyline',
+    });
   }
 
   componentWillUnmount() {

packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/render-into-canvas.test.js

@@ -34,7 +34,11 @@ const getBgFillRect = items => ({
 });
 
 describe('renderIntoCanvas()', () => {
-  const basicItem = { valueWidth: 100, valueOffset: 50, serviceName: 'some-name' };
+  const basicItem = {
+    valueWidth: 100,
+    valueOffset: 50,
+    serviceName: 'some-name',
+  };
 
   class CanvasContext {
     constructor() {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.js

@@ -176,8 +176,9 @@ export default class ListView extends React.Component<ListViewProps> {
     // _knownHeights is (item-key -> observed height) of list items
     this._knownHeights = new Map();
 
-    this._startIndexDrawn = 2 ** 20;
-    this._endIndexDrawn = -(2 ** 20);
+    // eslint-disable-next-line no-bitwise
+    this._startIndexDrawn = 1 << 20;
+    this._endIndexDrawn = -this._startIndexDrawn;
     this._startIndex = 0;
     this._endIndex = 0;
     this._viewHeight = -1;

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.test.js

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from 'react';
-import Bluebird from 'bluebird';
 import { mount, shallow } from 'enzyme';
 
 import ListView from './index';
@@ -205,14 +204,16 @@ describe('<ListView>', () => {
         expect(eventListeners.scroll).toEqual([instance._onScroll]);
       });
 
-      it('calls _positionList when the document is scrolled', async () => {
+      it('calls _positionList when the document is scrolled', done => {
         const event = new Event('scroll');
         const fn = jest.spyOn(instance, '_positionList');
         expect(instance._isScrolledOrResized).toBe(false);
         window.dispatchEvent(event);
         expect(instance._isScrolledOrResized).toBe(true);
-        await Bluebird.resolve().delay(0);
-        expect(fn).toHaveBeenCalled();
+        window.requestAnimationFrame(() => {
+          expect(fn).toHaveBeenCalled();
+          done();
+        });
       });
 
       it('uses the root HTML element to determine if the view has changed', () => {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.js

@@ -63,7 +63,9 @@ KeyValuesSummary.defaultProps = {
 export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
   const { className, data, highContrast, isOpen, label, linksGetter, onToggle } = props;
   const isEmpty = !Array.isArray(data) || !data.length;
-  const iconCls = cx('u-align-icon', { 'AccordianKeyValues--emptyIcon': isEmpty });
+  const iconCls = cx('u-align-icon', {
+    'AccordianKeyValues--emptyIcon': isEmpty,
+  });
   return (
     <div className={cx(className, 'u-tx-ellipsis')}>
       <div

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js

@@ -71,8 +71,14 @@ describe('<KeyValuesTable>', () => {
       linksGetter: (array, i) =>
         array[i].key === 'span.kind'
           ? [
-              { url: `http://example.com/1?kind=${encodeURIComponent(array[i].value)}`, text: 'Example 1' },
-              { url: `http://example.com/2?kind=${encodeURIComponent(array[i].value)}`, text: 'Example 2' },
+              {
+                url: `http://example.com/1?kind=${encodeURIComponent(array[i].value)}`,
+                text: 'Example 1',
+              },
+              {
+                url: `http://example.com/2?kind=${encodeURIComponent(array[i].value)}`,
+                text: 'Example 2',
+              },
             ]
           : [],
     });

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js

@@ -48,7 +48,9 @@ describe('<TimelineColumnResizer>', () => {
 
   describe('uses DraggableManager', () => {
     it('handles mouse down on the dragger', () => {
-      const dragger = wrapper.find({ onMouseDown: instance._dragManager.handleMouseDown });
+      const dragger = wrapper.find({
+        onMouseDown: instance._dragManager.handleMouseDown,
+      });
       expect(dragger.length).toBe(1);
       expect(dragger.is('.TimelineColumnResizer--dragger')).toBe(true);
     });