jaegertracing · mszabo-wikia · Feb 26, 2023 · Feb 26, 2023 · Feb 26, 2023 · Feb 26, 2023
@@ -21,7 +21,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.js', 'json', '.tsx'],
+        extensions: ['.js', '.jsx', 'json', '.tsx'],
       },
     },
   },

@@ -37,12 +37,7 @@
       "packages/*"
     ],
     "nohoist": [
-      "**/customize-cra",
-      "**/customize-cra/**",
-      "**/react-scripts",
-      "**/react-scripts/**",
-      "**/react-app-rewired",
-      "**/react-app-rewired/**"
+      "**/parse5"
     ]
   },
   "scripts": {
@@ -53,8 +48,8 @@
     "fmt": "yarn prettier",
     "lint": "npm-run-all -ln --parallel prettier-lint tsc-lint eslint check-license",
     "prepare": "lerna run --stream --sort prepublishOnly",
-    "prettier": "prettier --write '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(layout.worker.bundled|react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'",
-    "prettier-lint": "prettier --list-different '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(layout.worker.bundled|react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'",
+    "prettier": "prettier --write '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(layout.worker.bundled|react-vis).{css,js,jsx,json,md,ts,tsx}' 'packages/*/*.{css,js,jsx,json,md,ts,tsx}'",
+    "prettier-lint": "prettier --list-different '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(layout.worker.bundled|react-vis).{css,js,jsx,json,md,ts,tsx}' 'packages/*/*.{css,js,jsx,json,md,ts,tsx}'",
     "test": "lerna run test",
     "tsc-lint": "tsc --build",
     "tsc-lint-debug": "tsc --listFiles",

@@ -0,0 +1,7 @@
+module.exports = {
+  globals: {
+    __REACT_APP_GA_DEBUG__: false,
+    __REACT_APP_VSN_STATE__: false,
+    __APP_ENVIRONMENT__: false,
+  },
+};
@@ -12,7 +12,7 @@
 
     <!-- NOTE: The document MUST have a <base> element. package.json#homepage is set to "." as part of resolving https://github.com/jaegertracing/jaeger-ui/issues/42 and therefore static assets are linked via relative URLs. This will break on many document URLs, e.g. /trace/abc, unless a valid base URL is provided. The base href defaults to "/" but the query-service can inject an override. -->
     <base href="/" data-inject-target="BASE_URL" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="/favicon.ico">
     <title>Jaeger UI</title>
     <script>
       // Jaeger UI config data is embedded by the query-service via search-replace.
@@ -38,15 +38,18 @@
   </head>
   <body>
     <div id="jaeger-ui-root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` in this folder.
-      To create a production bundle, use `npm run build`.
-    -->
+    <script>
+      // Workaround some legacy NPM dependencies that assume this is always defined.
+      window.global = {};
+      // Avoid noise from redux-form until https://github.com/redux-form/redux-form/pull/4723 is released.
+      window.module = {};
+      // Prevent antd's rc-menu from breaking the page.
+      window.require = function (module) {
+        if (module !== 'mutationobserver-shim') {
+          console.error('attempted to fetch module ' + module + ' via unsupported require() call')
+        }
+      };
+    </script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
@@ -2,43 +2,42 @@
   "private": true,
   "name": "jaeger-ui",
   "version": "1.27.3",
-  "main": "src/index.js",
+  "main": "src/index.tsx",
   "license": "Apache-2.0",
   "homepage": ".",
-  "workspaces": {
-    "nohoist": [
-      "customize-cra",
-      "customize-cra/**",
-      "react-scripts",
-      "react-scripts/**",
-      "react-app-rewired",
-      "react-app-rewired/**"
-    ]
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/jaegertracing/jaeger-ui.git",
     "directory": "packages/jaeger-ui"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@svgr/babel-plugin-transform-svg-component": "^6.5.1",
+    "@svgr/babel-preset": "^6.5.1",
     "@types/match-sorter": "^2.3.0",
+    "@types/react-router-redux": "^5.0.21",
     "@types/react-window": "^1.8.0",
+    "@types/redux-form": "^8.3.5",
+    "@vitejs/plugin-legacy": "^4.0.1",
+    "@vitejs/plugin-react": "^3.1.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "babel-plugin-import": "1.13.5",
+    "babel-jest": "^28.1.3",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "bluebird": "^3.5.0",
-    "customize-cra": "0.2.9",
     "enzyme": "^3.8.0",
     "enzyme-to-json": "^3.6.2",
-    "http-proxy-middleware": "^2.0.6",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "jest-junit": "^15.0.0",
     "less": "3.13.1",
-    "less-loader": "4.1.0",
-    "less-vars-to-js": "^1.2.1",
-    "react-app-rewired": "2.2.1",
-    "react-scripts": "2.1.3",
     "react-test-renderer": "^18.2.0",
     "sinon": "7.3.2",
-    "source-map-explorer": "^2.5.3"
+    "source-map-explorer": "^2.5.3",
+    "terser": "^5.16.5",
+    "vite": "^4.1.4"
   },
   "dependencies": {
     "@jaegertracing/plexus": "0.2.0",
@@ -87,7 +86,6 @@
     "raven-js": "^3.22.1",
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
-    "react-dimensions": "^1.3.1",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-helmet": "^6.1.0",
@@ -104,7 +102,7 @@
     "redux": "^3.7.2",
     "redux-actions": "^2.2.1",
     "redux-async-middleware": "^0.0.0",
-    "redux-form": "^8.3.8",
+    "redux-form": "^8.3.9",
     "redux-promise-middleware": "^5.1.1",
     "reselect": "^4.1.6",
     "store": "^2.0.12",
@@ -116,16 +114,21 @@
   },
   "scripts": {
     "analyze": "source-map-explorer build/static/js/main.*",
-    "build": "REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired build",
+    "build": "NODE_ENV=production REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) vite build",
     "coverage": "yarn run test --coverage",
-    "start:ga-debug": "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired start",
-    "start": "react-app-rewired start",
-    "test-dev": "react-app-rewired test --env=jsdom",
-    "test": "CI=1 react-app-rewired test --env=jsdom --color"
+    "start:ga-debug": "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) vite",
+    "start": "vite",
+    "test-dev": "jest",
+    "test": "CI=1 jest --color"
   },
   "jest": {
-    "globalSetup": "./jest.global-setup.js",
+    "globalSetup": "./test/jest.global-setup.js",
+    "setupFilesAfterEnv": [
+      "./test/jest-per-test-setup.js"
+    ],
     "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts",
       "!src/setup*.js",
       "!src/utils/DraggableManager/demo/*.tsx",
       "!src/utils/test/**/*.js",
@@ -135,12 +138,18 @@
     "reporters": [
       "default",
       "jest-junit"
-    ]
-  },
-  "browserslist": [
-    ">0.5%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+    ],
+    "transform": {
+      "\\.(css|png)$": "./test/generic-file-transform.js",
+      "\\.([jt]sx?|svg)$": "./test/babel-transform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$"
+    ],
+    "testEnvironment": "jsdom",
+    "snapshotFormat": {
+      "escapeString": true,
+      "printBasicPrototype": true
+    }
+  }
 }
@@ -13,12 +13,13 @@
 // limitations under the License.
 
 import * as React from 'react';
+import { History as RouterHistory, Location } from 'history';
 import _get from 'lodash/get';
 import memoizeOne from 'memoize-one';
 import queryString from 'query-string';
 import { connect } from 'react-redux';
 
-import { DeepDependencyGraphPageImpl, TOwnProps, TProps, TReduxProps } from '.';
+import { DeepDependencyGraphPageImpl, TReduxProps } from '.';
 import { getUrlState, sanitizeUrlState } from './url';
 import { ROUTE_PATH } from '../SearchTracePage/url';
 import GraphModel, { makeGraph } from '../../model/ddg/GraphModel';
@@ -33,6 +34,11 @@ import { ReduxState } from '../../types';
 // Required for proper memoization of subsequent function calls
 const svcOp = memoizeOne((service, operation) => ({ service, operation }));
 
+type TOwnProps = {
+  history: RouterHistory;
+  location: Location;
+};
+
 // export for tests
 export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxProps {
   const urlState = getUrlState(ownProps.location.search);
@@ -60,7 +66,7 @@ export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxP
 }
 
 // export for tests
-export class TracesDdgImpl extends React.PureComponent<TProps & { showSvcOpsHeader: never; baseUrl: never }> {
+export class TracesDdgImpl extends React.PureComponent<TOwnProps & TReduxProps> {
   render(): React.ReactNode {
     const { location } = this.props;
     const urlArgs = queryString.parse(location.search);