Squashed:

* bump react to >16.8 to use hooks
* add ability to debug using a sample report
* bump react-dom to same version as react
* require trailing slashes on URLs
* stop page from complaining about missing manifest.json
* add explicit versions
* remove useless imports
* fix jsdoc type
* fix jsdoc param
* Silence loud chrome warnings in the devtools console by switching our
  fontawesome CDN tag to a crossorigin-friendly tag
* First fully working commit, still needs cleanup and passing tests.
* package.json: add lodash for uncomplicated comparison and slicing of
  state (and using module import so as to not bloat production bundle)
* .eslintrc.json: Make eslint allow comments up to 120 characters for
  e.g. JSDoc examples and web links
* AssertionPane.js: export aphrodite CSS for reuse
* CenterPane.jsx: rewrite of GetCenterPane function in reportUtils.js
* state.js: major revamp of UI state management
* passing unit tests on local PC, need to combine boilerplate from
  testsuites into a central place
* finishing component unit tests
* remove optional dependencies and upgrade react-hooks-testing-library
  to the non-deprecated version @testing-library/react-hooks
* switch to redux to avoid unstable_observedBits log messages
* revert improvements
* cleanup before merge
* 4got one
* fix link style, remove extraneous action from store serializableCheck, handle testcase onClick edgecase, remove es imports
* remove import, fix lint errors, add polyfill for tests

testplan/web_ui/testing/.env

@@ -0,0 +1,4 @@
+# override this by setting the environment variable or by adding a
+# .env.local file containing the correct URL - must be of the form
+# "/[path]" or "protocol://hostname[:port]/[path]"
+REACT_APP_API_BASE_URL=/api

testplan/web_ui/testing/.eslintrc.json

@@ -24,7 +24,7 @@
     "react"
   ],
   "rules": {
-    "max-len": ["error", { "code": 80 }],
+    "max-len": ["error", { "code": 80, "comments": 120 }],
     "linebreak-style": [
       "error",
       "unix"

testplan/web_ui/testing/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+yarn-error.log
+build/

testplan/web_ui/testing/package.json

@@ -3,34 +3,46 @@
   "version": "0.2.0",
   "private": true,
   "resolutions": {
+    "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.8.7",
     "watchpack": "1.6.1"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.2",
     "@fortawesome/free-solid-svg-icons": "5.2.0",
     "@fortawesome/react-fontawesome": "0.1.3",
+    "@reduxjs/toolkit": "~1.3.4",
     "ag-grid-community": "^21.2.1",
     "ag-grid-react": "^21.2.1",
     "aphrodite": "2.2.3",
     "axios": "0.19.0",
     "bootstrap": "4.3.1",
     "date-fns": "^2.14.0",
     "eslint-plugin-react": "^7.14.3",
-    "react": "16.6.0",
+    "history": "~4.10.1",
+    "immer": "^6.0.0",
+    "lodash": "~4.17.15",
+    "qs": "^6.9.1",
+    "react": "~16.12.0",
     "react-copy-html-to-clipboard": "6.0.4",
     "react-custom-scrollbars": "4.2.1",
-    "react-dom": "16.6.0",
+    "react-dom": "~16.12.0",
     "react-portal-tooltip": "2.4.0",
+    "react-redux": "^7.2.0",
+    "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.4.0",
     "react-spinners": "^0.6.0",
     "react-syntax-highlighter": "^11.0.2",
     "react-test-renderer": "16.6.0",
     "react-vis": "^1.11.7",
-    "reactstrap": "6.3.0"
+    "reactstrap": "6.3.0",
+    "redux": "^4.0.5"
   },
   "devDependencies": {
+    "@testing-library/dom": "^6.12.2",
+    "@testing-library/jest-dom": "^4.0.0",
+    "@testing-library/react": "^9.3.2",
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.6.0",
     "enzyme-to-json": "^3.3.5",
@@ -41,8 +53,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "lint": "eslint --ext .js src",
-    "lint:fix": "eslint --ext .js src --fix",
+    "lint": "eslint --ext .js --ext .jsx src",
+    "lint:fix": "eslint --ext .js --ext .jsx src --fix",
     "eject": "react-scripts eject"
   },
   "homepage": "/",
@@ -62,6 +74,5 @@
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
     ]
-  },
-  "proxy": "http://localhost:4000"
+  }
 }

testplan/web_ui/testing/public/index.html

@@ -6,7 +6,15 @@
     <meta name="theme-color" content="#000000">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/testplan-logo.png">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
+          rel="stylesheet"
+          integrity="sha384-X7L1bhgb36bF1iFvaqvhgpaGpayKM+vXNNYRlF89BFA5s3vi1qZ8EX9086RlZjy1"
+          crossorigin="anonymous">
+    <% if(process.env.NODE_ENV !== 'production') { %>
+      <% if(process.env.REACT_APP_DEVTOOLS) { %>
+        <script src="http://localhost:8097/"></script>
+      <% } %>
+    <% } %>
     <title>Testplan</title>
   </head>
   <body style="overflow: hidden">

testplan/web_ui/testing/src/AssertionPane/AssertionTypes/DictAssertions/dictAssertionUtils.js

@@ -1,3 +1,4 @@
+import _uniq from 'lodash/uniq';
 import {any, sorted, domToString} from './../../../Common/utils';
 import {DICT_GRID_STYLE} from './../../../Common/defaults';
 
@@ -51,8 +52,8 @@ function sortFlattenedJSON(
     }
   }
 
-  const set = new Set(origFlattenedJSON.map(line => line[0]));
-  const allItemsAreSameLevel = set.size === 1;
+  const set = _uniq(origFlattenedJSON.map(line => line[0]));
+  const allItemsAreSameLevel = set.length === 1;
 
   // if all remaining items of the list are on the same depth level, 
   // they can be sorted and returned

testplan/web_ui/testing/src/Common/Message.js

@@ -13,9 +13,10 @@ class Message extends Component {
       paddingLeft: this.props.left,
       paddingTop: '4.5em',
     };
+    const Tag = this.props.tag || 'h1';
     return (
       <div style={paneStyle}>
-        <h1 className={css(styles.message)}>{this.props.message}</h1>
+        <Tag className={css(styles.message)}>{this.props.message}</Tag>
       </div>
     );
   }