Initial setup.

.eslintignore

@@ -0,0 +1 @@
+**/*.js

.eslintrc.build.js

@@ -0,0 +1,9 @@
+// build/production configuration extends default/development configuration
+module.exports = {
+    extends: "./.eslintrc.js",
+    rules: {
+      "eslint-comments/no-unused-disable": "warn",
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+      "no-debugger": "error"
+    }
+};

.eslintrc.js

@@ -0,0 +1,142 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "json", "react", "react-hooks"],
+  env: {
+    browser: true,
+    es6: true
+  },
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      typescript: {
+        alwaysTryTypes: true,
+        project: "."
+      }
+    },
+    react: {
+      pragma: "React",
+      version: "detect"
+    }
+  },
+  ignorePatterns: [
+    "dist/", "node_modules/"
+  ],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:eslint-comments/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:json/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  rules: {
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-confusing-non-null-assertion": "error",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-require-imports": "error",
+    "@typescript-eslint/no-shadow": ["error", { builtinGlobals: false, hoist: "all", allow: [] }],
+    "@typescript-eslint/no-unused-vars": ["warn", { args: "none", ignoreRestSiblings: true }],
+    "@typescript-eslint/prefer-optional-chain": "warn",
+    "@typescript-eslint/semi": ["warn", "always"],
+    "curly": ["error", "multi-line", "consistent"],
+    "dot-notation": "error",
+    "eol-last": "warn",
+    "eqeqeq": ["error", "smart"],
+    "eslint-comments/no-unused-disable": "off",   // enabled in .eslintrc.build.js
+    "import/no-cycle": "warn",
+    "import/no-extraneous-dependencies": "warn",
+    "import/no-useless-path-segments": "warn",
+    "jsx-quotes": ["error", "prefer-double"],
+    "max-len": ["warn", { code: 120, ignoreUrls: true }],
+    "no-bitwise": "error",
+    "no-debugger": "off",
+    "no-duplicate-imports": "error",
+    "no-sequences": "error",
+    "no-shadow": "off", // superseded by @typescript-eslint/no-shadow
+    "no-tabs": "error",
+    "no-unneeded-ternary": "error",
+    "no-unused-expressions": ["error", { allowShortCircuit: true }],
+    "no-unused-vars": "off",  // superseded by @typescript-eslint/no-unused-vars
+    "no-useless-call": "error",
+    "no-useless-concat": "error",
+    "no-useless-rename": "error",
+    "no-useless-return": "error",
+    "no-var": "error",
+    "no-whitespace-before-property": "error",
+    "object-shorthand": "error",
+    "prefer-const": ["error", { destructuring: "all" }],
+    "prefer-object-spread": "error",
+    "prefer-regex-literals": "error",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "quotes": ["error", "double", { allowTemplateLiterals: true, avoidEscape: true }],
+    "radix": "error",
+    "react/jsx-closing-tag-location": "error",
+    "react/jsx-handler-names": "off",
+    "react/jsx-no-useless-fragment": "error",
+    "react/no-access-state-in-setstate": "error",
+    "react/no-danger": "error",
+    "react/no-unsafe": ["off", { checkAliases: true }],
+    "react/no-unused-state": "error",
+    "react/prop-types": "off",
+    "semi": "off" // superseded by @typescript-eslint/semi
+  },
+  overrides: [
+    { // rules specific to Jest tests
+      files: ["src/**/*.test.*"],
+      env: {
+        node: true,
+        jest: true
+      },
+      plugins: ["jest", "testing-library"],
+      extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
+      rules: {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        // require() can be useful in mocking
+        "@typescript-eslint/no-require-imports": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "jest/no-done-callback": "off"
+      }
+    },
+    { // rules specific to Cypress tests
+      files: ["cypress/**"],
+      env: {
+        node: true,
+        "cypress/globals": true
+      },
+      plugins: ["cypress"],
+      extends: ["plugin:cypress/recommended"],
+      rules: {
+        "@typescript-eslint/no-require-imports": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "cypress/no-unnecessary-waiting": "off"
+      }
+    },
+    { // eslint configs
+      files: [".eslintrc*.js"],
+      env: {
+        node: true
+      }
+    },
+    { // webpack configs
+      files: ["**/webpack.config.js"],
+      env: {
+        node: true
+      },
+      rules: {
+        "@typescript-eslint/no-require-imports": "off",
+        "@typescript-eslint/no-var-requires": "off",
+      }
+    }
+  ]
+};

.eslintrc.style.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: "./.eslintrc.js",
+  rules: {
+    "array-bracket-spacing": ["error", "never"],
+    "object-curly-spacing": ["error", "always"],
+    "react/jsx-curly-spacing": ["error", { "when": "never", "children": { "when": "always" } }],
+  }
+};

.github/workflows/ci.yml

@@ -0,0 +1,85 @@
+name: Continuous Integration
+
+on: push
+
+jobs:
+  build_test:
+    name: Build and Run Jest Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - name: Install Dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Run Tests
+        run: npm run test:coverage -- --runInBand
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v1
+        with:
+          flags: jest
+  cypress:
+    runs-on: ubuntu-latest
+    strategy:
+      # when one test fails, DO NOT cancel the other
+      # containers, because this will kill Cypress processes
+      # leaving the Dashboard hanging ...
+      # https://github.com/cypress-io/github-action/issues/48
+      fail-fast: false
+      matrix:
+        # run 3 copies of the current job in parallel
+        containers: [1, 2, 3]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: cypress-io/github-action@v4
+        with:
+          start: npm start
+          wait-on: 'http://localhost:8080'
+          # only record the results to dashboard.cypress.io if CYPRESS_RECORD_KEY is set
+          record: ${{ !!secrets.CYPRESS_RECORD_KEY }}
+          # only do parallel if we have a record key
+          parallel: ${{ !!secrets.CYPRESS_RECORD_KEY }}
+        env:
+          # pass the Dashboard record key as an environment variable
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # pass GitHub token to allow accurately detecting a build vs a re-run build
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # turn on code coverage when running npm start
+          # so far we've been using a webpack coverage-istanbul-loader for this
+          # but there has been work on using the code coverage support in the browser directly,
+          # which should be much faster
+          CODE_COVERAGE: true
+          # Also turn on the code coverage tasks in cypress itself, these are disabled
+          # by default.
+          CYPRESS_coverage: true
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v1
+        with:
+          flags: cypress
+  s3-deploy:
+    name: S3 Deploy
+    needs:
+      - build_test
+      - cypress
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - name: Install Dependencies
+        run: npm ci
+        env:
+          # skip installing cypress since it isn't needed for just building
+          # This decreases the deploy time quite a bit
+          CYPRESS_INSTALL_BINARY: 0
+      - uses: concord-consortium/s3-deploy-action@v1
+        with:
+          bucket: models-resources
+          prefix: nass-plugin
+          awsAccessKeyId: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          awsSecretAccessKey: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          # Parameters to GHActions have to be strings, so a regular yaml array cannot
+          # be used. Instead the `|` turns the following lines into a string
+          topBranches: |
+            ["main"]

.github/workflows/release.yml

@@ -0,0 +1,24 @@
+name: Release
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: The git tag for the version to use for index-demo.html
+        required: true
+env:
+  BUCKET: models-resources
+  PREFIX: nass-plugin
+  SRC_FILE: index-top.html
+  DEST_FILE: index-demo.html
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - run: >
+          aws s3 cp
+          s3://${{ env.BUCKET }}/${{ env.PREFIX }}/version/${{ github.event.inputs.version }}/${{ env.SRC_FILE }}
+          s3://${{ env.BUCKET }}/${{ env.PREFIX }}/${{ env.DEST_FILE }}
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_DEFAULT_REGION: us-east-1

.gitignore

@@ -0,0 +1,11 @@
+coverage
+coverage-cypress
+dist
+node_modules
+npm-error.log
+top-test
+.DS_Store
+.nyc_output
+
+# Editors
+.idea

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Concord Consortium
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,87 @@
+### Initial steps
+
+1. Clone this repo and `cd` into it
+2. Run `npm install` to pull dependencies
+3. Run `npm start` to run `webpack-dev-server` in development mode with hot module replacement
+
+#### Run using HTTPS
+
+Additional steps are required to run using HTTPS.
+
+1. install [mkcert](https://github.com/FiloSottile/mkcert) : `brew install mkcert` (install using Scoop or Chocolatey on Windows)
+2. Create and install the trusted CA in keychain if it doesn't already exist:   `mkcert -install`
+3. Ensure you have a `.localhost-ssl` certificate directory in your home directory (create if needed, typically `C:\Users\UserName` on Windows) and cd into that directory
+4. Make the cert files: `mkcert -cert-file localhost.pem -key-file localhost.key localhost 127.0.0.1 ::1`
+5. Run `npm run start:secure` to run `webpack-dev-server` in development mode with hot module replacement
+
+Alternately, you can run secure without certificates in Chrome:
+1. Enter `chrome://flags/#allow-insecure-localhost` in Chrome URL bar
+2. Change flag from disabled to enabled
+3. Run `npm run start:secure:no-certs` to run `webpack-dev-server` in development mode with hot module replacement
+
+### Building
+
+If you want to build a local version run `npm build`, it will create the files in the `dist` folder.
+You *do not* need to build to deploy the code, that is automatic.  See more info in the Deployment section below.
+
+### Notes
+
+1. Make sure if you are using Visual Studio Code that you use the workspace version of TypeScript.
+   To ensure that you are open a TypeScript file in VSC and then click on the version number next to
+   `TypeScript React` in the status bar and select 'Use Workspace Version' in the popup menu.
+
+## Deployment
+
+Production releases to S3 are based on the contents of the /dist folder and are built automatically by GitHub Actions
+for each branch and tag pushed to GitHub.
+
+Branches are deployed to http://nass-plugin.concord.org/branch/<name>.
+If the branch name starts or ends with a number this number is stripped off.
+
+Tags are deployed to http://nass-plugin.concord.org/version/<name>.
+
+To deploy a production release:
+
+1. Increment version number in package.json
+2. Create new entry in CHANGELOG.md
+3. Run `git log --pretty=oneline --reverse <last release tag>...HEAD | grep '#' | grep -v Merge` and add contents (after edits if needed to CHANGELOG.md)
+4. Run `npm run build`
+5. Copy asset size markdown table from previous release and change sizes to match new sizes in `dist`
+6. Create `release-<version>` branch and commit changes, push to GitHub, create PR and merge
+7. Checkout master and pull
+8. Create an annotated tag for the version, of the form `v[x].[y].[z]`, include at least the version in the tag message. On the command line this can be done with a command like `git tag -a v1.2.3 -m "1.2.3 some info about this version"`
+9. Push the tag to github with a command like: `git push origin v1.2.3`.
+10. Use https://github.com/concord-consortium/starter-projects/releases to make this tag into a GitHub release.
+11. Run the release workflow to update http://starter-projects.concord.org/index.html.
+    1. Navigate to the actions page in GitHub and the click the "Release" workflow. This should take you to this page: https://github.com/concord-consortium/starter-projects/actions/workflows/release.yml.
+    2. Click the "Run workflow" menu button.
+    3. Type in the tag name you want to release for example `v1.2.3`.  (Note this won't work until the PR has been merged to master)
+    4. Click the `Run Workflow` button.
+
+### Testing
+
+Run `npm test` to run jest tests. Run `npm run test:full` to run jest and Cypress tests.
+
+##### Cypress Run Options
+
+Inside of your `package.json` file:
+1. `--browser browser-name`: define browser for running tests
+2. `--group group-name`: assign a group name for tests running
+3. `--spec`: define the spec files to run
+4. `--headed`: show cypress test runner GUI while running test (will exit by default when done)
+5. `--no-exit`: keep cypress test runner GUI open when done running
+6. `--record`: decide whether or not tests will have video recordings
+7. `--key`: specify your secret record key
+8. `--reporter`: specify a mocha reporter
+
+##### Cypress Run Examples
+
+1. `cypress run --browser chrome` will run cypress in a chrome browser
+2. `cypress run --headed --no-exit` will open cypress test runner when tests begin to run, and it will remain open when tests are finished running.
+3. `cypress run --spec 'cypress/integration/examples/smoke-test.js'` will point to a smoke-test file rather than running all of the test files for a project.
+
+## License
+
+Starter Projects are Copyright 2018 (c) by the Concord Consortium and is distributed under the [MIT license](http://www.opensource.org/licenses/MIT).
+
+See license.md for the complete license text.