Squashed:

* add ability to debug using a sample report
* require trailing slashes on URLs
* stop page from complaining about missing manifest.json
* Silence loud chrome warnings in the devtools console by switching our
  fontawesome CDN tag to a crossorigin-friendly tag
* add lodash
* .eslintrc.json: Make eslint allow comments up to 120 characters
* AssertionPane.js: export aphrodite CSS for reuse
* CenterPane.jsx: rewrite of GetCenterPane function in reportUtils.js
* state.js: major revamp of UI state management
  * switch to redux to avoid unstable_observedBits log messages
* remove optional dependencies and upgrade react-hooks-testing-library
  to the non-deprecated version @testing-library/react-hooks
* revert improvements
* fix link style, remove extraneous action from store serializableCheck,
  handle testcase onClick edgecase, remove es imports
* remove uriComponentCodec, make imports easier
* make connect easier
* simplify build girth, simplify rigidity, simplify & segregate redux
* remove as much hard to read code as is possible
* deal with special .env test rules
* make travis env vars work
* setup new API URL - env var scheme

.gitignore

@@ -48,3 +48,5 @@ Thumbs.db
 /doc/en/_build/
 /doc/en/html
 /pip-wheel-metadata
+node_modules/
+yarn-error.log

.travis.yml

@@ -2,7 +2,10 @@ dist: bionic
 language: python
 
 env:
-  - BLACK_VERSION: "19.10b0"
+  global:
+    - REACT_APP_API_BASE_URL: "/fake/api/endpoint"
+  jobs:
+    - BLACK_VERSION: "19.10b0"
 
 python:
   - "2.7"
@@ -53,4 +56,3 @@ script:
   - ./scripts/utils/crlf_check.sh
   - pylint --rcfile pylintrc testplan
   - pytest tests --verbose
-

testplan/web_ui/testing/.env

@@ -0,0 +1,50 @@
+# When debugging locally, create a file ".env.local" next to this file
+# containing:
+
+REACT_APP_API_BASE_URL=/path/to/api/endpoint
+
+# ... if your API is served from the same origin as this webapp. For example,
+# if this web app is available at "https://www.myapp.mil/" and the API is 
+# available at "https://www.myapp.mil/api" then you'd set:
+
+REACT_APP_API_BASE_URL=/api
+
+# If your API is served from a different origin (e.g. if you're debugging 
+# locally at http://localhost:3000) than your API (say it's still 
+# "https://www.myapp.mil/api") then set:
+
+REACT_APP_API_BASE_URL=https://www.myapp.mil/api
+
+# This will also work if the web app and API are served from the same origin. 
+# The app will set basic CORS headers when NODE_ENV == "development" or "test".
+# More info: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
+# 
+#=============================================================================#
+# Note that NOT setting REACT_APP_API_BASE_URL - either in the environment or #
+# in another .env.* file - will result in a build error.                      #
+#=============================================================================#
+#
+# The .env.* files override one another like so (highest > lowest priority):
+#   > when NODE_ENV === "development":
+#     - (variables from environment)
+#     - .env.development.local
+#     - .env.development
+#     - .env.local
+#     - .env
+#   > when NODE_ENV === "production":
+#     - (variables from environment)
+#     - .env.production.local
+#     - .env.production
+#     - .env.local
+#     - .env
+#   > when NODE_ENV === "test": (omits .env.local)
+#     - (variables from environment)
+#     - .env.test.local
+#     - .env.test
+#     - .env
+#
+# More info:
+# - https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
+# - https://create-react-app.dev/docs/advanced-configuration
+#
+REACT_APP_API_BASE_URL=OverrideMeOrThereWillBeABuildError

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/package.json

@@ -3,32 +3,40 @@
   "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",
+    "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": {
     "enzyme": "3.7.0",
@@ -41,8 +49,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 +70,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 _ from 'lodash';
 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>
     );
   }