chore: 🤖 Add build, lint, and format tasks to connect-client

package.json

@@ -17,16 +17,19 @@
   },
   "scripts": {
     "build:ui:core": "cd ui/core && yarn build",
-    "lint": "yarn lint:addons:api && yarn lint:addons:auth && yarn lint:addons:rose && yarn lint:ui:core",
+    "build:ui:connect-client": "cd ui/connect-client && yarn build",
+    "lint": "yarn lint:addons:api && yarn lint:addons:auth && yarn lint:addons:rose && yarn lint:ui:core && yarn lint:ui:connect-client",
     "lint:addons:api": "echo \"\n\nlint: addons/api\n\" && cd addons/api && yarn lint",
     "lint:addons:auth": "echo \"\n\nlint: addons/auth\n\" && cd addons/auth && yarn lint",
     "lint:addons:rose": "echo \"\n\nlint: addons/rose\n\" && cd addons/rose && yarn lint",
     "lint:ui:core": "echo \"\n\nlint: ui/core\n\" && cd ui/core && yarn lint",
-    "test": "yarn test:addons:api && yarn test:addons:auth && yarn test:addons:rose && yarn test:ui:core",
+    "lint:ui:connect-client": "echo \"\n\nlint: ui/connect-client\n\" && cd ui/connect-client && yarn lint",
+    "test": "yarn test:addons:api && yarn test:addons:auth && yarn test:addons:rose && yarn test:ui:core && yarn test:ui:connect-client",
     "test:addons:api": "echo \"\n\ntest: addons/api\n\" && cd addons/api && yarn test",
     "test:addons:auth": "echo \"\n\ntest: addons/auth\n\" && cd addons/auth && yarn test",
     "test:addons:rose": "echo \"\n\ntest: addons/rose\n\" && cd addons/rose && yarn test",
     "test:ui:core": "echo \"\n\ntest: ui/core\n\" && cd ui/core && yarn test",
+    "test:ui:connect-client": "echo \"\n\ntest: ui/connect-client\n\" && cd ui/connect-client && yarn test",
     "precommit": "yarn compliance:licenses && yarn audit && yarn lint && yarn test",
     "commit": "git-cz",
     "compliance:licenses": "license-checker --onlyAllow 'Apache*;Apache License, Version 2.0;Apache-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL' --excludePackages 'watchtower-ui;core@0.0.0;base64-js@0.0.2'",

ui/connect-client/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 80
+}

ui/connect-client/.sasslintrc

@@ -0,0 +1,7 @@
+files:
+  include: 'app/styles/**/*.s+(a|c)ss'
+rules:
+  leading-zero: 0
+  mixins-before-declarations: 0
+  nesting-depth: 0
+  placeholder-in-extend: 0

ui/connect-client/.template-lintrc.js

@@ -1,5 +1,10 @@
 'use strict';
 
 module.exports = {
-  extends: 'octane'
+  extends: 'octane',
+  rules: {
+    'no-bare-strings': true,
+    'no-curly-component-invocation': { allow: ['app-name'] },
+    'no-implicit-this': { allow: ['app-name'] }
+  }
 };

ui/connect-client/README.md

@@ -1,7 +1,22 @@
-# connect-client
+# Client Connect UI
 
-This README outlines the details of collaborating on this Ember application.
-A short introduction of this app could easily go here.
+The client UI for Project Watchtower.
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Prerequisites](#prerequisites)
+- [Installation](#installation)
+- [Yarn Commands](#yarn-commands)
+- [Running / Development](#running--development)
+  - [Building for Production](#building-for-production)
+    - [Environment Variables](#environment-variables)
+  - [Running Tests](#running-tests)
+  - [Deploying](#deploying)
+- [Further Reading / Useful Links](#further-reading--useful-links)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## Prerequisites
 
@@ -15,39 +30,79 @@ You will need the following things properly installed on your computer.
 
 ## Installation
 
-* `git clone <repository-url>` this repository
-* `cd connect-client`
-* `yarn install`
+See watchtower-ui README for installation instructions.
+
+## Yarn Commands
+
+List of available project commands.  `yarn run <command-name>`
+
+| Command | Description |
+| ------- | ----------- |
+| build:development | Builds the UI in development mode. |
+| build | Builds the UI for production. |
+| lint | Runs all lint commands. |
+| lint:hbs | Lints `hbs` template files. |
+| lint:js | Lints `js` files. |
+| lint:sass | Lints `scss` files. |
+| format | Runs all auto-formatters. |
+| format:js | Auto-formats `js` files using Prettier. |
+| format:sass | Auto-formats `scss` files using Prettier. |
+| start | Runs the dummy app local server. |
+| start:desktop | Runs the dummy app as an electron app. |
+| test | Runs all tests in random order, with coverage reporting. |
+| doc:toc | Automatically generates a table of contents for this README file. |
+
 
 ## Running / Development
 
-* `ember serve`
+* `yarn start`
 * Visit your app at [http://localhost:4200](http://localhost:4200).
 * Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
-### Code Generators
+To run as a desktop app:
+* `yarn start:desktop`
 
-Make use of the many generators for code, try `ember help generate` for more details
+### Building for Production
+
+Before executing a build, be sure to set any environment variables necessary
+for your target [environment](#environment-variables).  To build this UI for
+production, run the following commads from this folder:
+
+```bash
+yarn install
+yarn build
+```
+
+The static production assets are saved into the `dist/` folder.
+
+
+#### Environment Variables
+
+These environment variables may be used to customized the build.
+
+| Variable | Default Value | Description |
+| -------- | ------------- | ----------- |
+| `APP_NAME` | Application Name | The user-facing name of the application, appearing in titles, etc. |
+| `API_HOST` | | The host of the API, if different than UI (e.g. https://example.net:1234). |
 
 ### Running Tests
 
-* `ember test`
-* `ember test --server`
+* `yarn test` runs full tests in random order with coverage
 
-### Linting
+Keep in mind that tests are executed in random order.  This is intentional
+and helps to prevent hard-to-debug order dependencies among tests.
 
-* `yarn lint:hbs`
-* `yarn lint:js`
-* `yarn lint:js --fix`
+Please also note that we report test coverage.  We strive for "the right amount
+of testing".  Use test coverage as a guide to help you identify untested
+high-value code.
 
-### Building
-
-* `ember build` (development)
-* `ember build --environment production` (production)
+We rely on `ember-a11y-testing` to validate accessibility in acceptance tests.
+If you write acceptance tests, please ensure at least one validation per
+route using `await a11yAudit();`.
 
 ### Deploying
 
-Specify what it takes to deploy your app.
+TBD
 
 ## Further Reading / Useful Links
 

ui/connect-client/app/router.js

@@ -6,5 +6,4 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function() {
-});
+Router.map(function () {});

ui/connect-client/config/environment.js

@@ -1,6 +1,9 @@
 'use strict';
 
-module.exports = function(environment) {
+const APP_NAME = process.env.APP_NAME || 'Application Name';
+const API_HOST = process.env.API_HOST || '';
+
+module.exports = function (environment) {
   let ENV = {
     modulePrefix: 'connect-client',
     environment,
@@ -11,16 +14,24 @@ module.exports = function(environment) {
         // Here you can enable experimental features on an ember canary build
         // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
       },
-      EXTEND_PROTOTYPES: {
-        // Prevent Ember Data from overriding Date.parse.
-        Date: false
-      }
+      EXTEND_PROTOTYPES: false,
+      // EXTEND_PROTOTYPES: {
+      //   // Prevent Ember Data from overriding Date.parse.
+      //   Date: false
+      // }
     },
 
     APP: {
       // Here you can pass flags/options to your application instance
       // when it is created
-    }
+    },
+
+    api: {
+      host: API_HOST,
+      namespace: 'v1',
+    },
+
+    appName: APP_NAME,
   };
 
   if (environment === 'development') {

ui/connect-client/config/targets.js

@@ -3,7 +3,7 @@
 const browsers = [
   'last 1 Chrome versions',
   'last 1 Firefox versions',
-  'last 1 Safari versions'
+  'last 1 Safari versions',
 ];
 
 const isCI = !!process.env.CI;
@@ -14,5 +14,5 @@ if (isCI || isProduction) {
 }
 
 module.exports = {
-  browsers
+  browsers,
 };

ui/connect-client/ember-cli-build.js

@@ -2,9 +2,19 @@
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-module.exports = function(defaults) {
+module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
-    // Add options here
+    babel: {
+      sourceMaps: 'inline',
+    },
+    sourcemaps: {
+      enabled: true,
+      extensions: ['js'],
+    },
+    sassOptions: {
+      onlyIncluded: true,
+      extension: 'scss',
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated

ui/connect-client/mirage/config.js

@@ -0,0 +1,8 @@
+import config from '../config/environment';
+
+export default function() {
+
+  this.passthrough('/write-coverage');
+  // It's important that the passthrough for coverage is before the namespace, otherwise it will be prefixed.
+  this.namespace = config.api.namespace;
+}

ui/connect-client/package.json

@@ -1,6 +1,7 @@
 {
   "name": "connect-client",
   "version": "0.0.0",
+  "private": true,
   "description": "Client UI for Project Watchtower.",
   "license": "MPL-2.0",
   "author": "HashiCorp",
@@ -9,12 +10,23 @@
     "test": "tests"
   },
   "scripts": {
+    "doc:toc": "doctoc README.md",
     "build": "ember build --environment=production",
+    "build:development": "ember build",
+    "lint": "yarn lint:hbs && yarn lint:js",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
+    "lint:sass": "sass-lint -v -q",
+    "format": "yarn format:js && npm run format:sass",
+    "format:js": "prettier --write '{app,config,stories,tests}/**/*.js' *.js",
+    "format:sass": "prettier --write app/**/*.scss",
     "start": "ember serve",
-    "test": "ember test",
-    "postinstall": "cd electron-app && yarn install"
+    "start:desktop": "ember electron",
+    "clean:coverage": "rm -rf coverage_*",
+    "pretest": "yarn clean:coverage",
+    "test": "COVERAGE=true ember exam --random",
+    "postinstall": "cd electron-app && yarn install",
+    "posttest": "ember coverage-merge && yarn clean:coverage"
   },
   "devDependencies": {
     "@ember/optional-features": "^1.3.0",
@@ -22,21 +34,27 @@
     "@glimmer/tracking": "^1.0.0",
     "babel-eslint": "^10.0.3",
     "broccoli-asset-rev": "^3.0.0",
+    "doctoc": "^1.4.0",
     "ember-auto-import": "^1.5.3",
     "ember-cli": "~3.16.2",
     "ember-cli-app-version": "^3.2.0",
     "ember-cli-babel": "^7.17.2",
+    "ember-cli-code-coverage": "^1.0.0-beta.9",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-eslint": "^5.1.0",
     "ember-cli-htmlbars": "^4.2.2",
     "ember-cli-inject-live-reload": "^2.0.2",
+    "ember-cli-mirage": "^1.1.7",
+    "ember-cli-sass": "^10.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-template-lint": "^1.0.0-beta.3",
     "ember-cli-uglify": "^3.0.0",
     "ember-data": "~3.16.0",
     "ember-electron": "https://github.com/adopted-ember-addons/ember-electron#v3.0.0-beta.3",
+    "ember-exam": "^5.0.1",
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^7.0.0",
+    "ember-intl": "^5.2.0",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.6.0",
@@ -46,7 +64,10 @@
     "eslint-plugin-ember": "^7.7.2",
     "eslint-plugin-node": "^11.0.0",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^1.0.0"
+    "prettier": "^2.0.5",
+    "qunit-dom": "^1.0.0",
+    "sass": "^1.26.5",
+    "sass-lint": "^1.13.1"
   },
   "engines": {
     "node": "10.* || >= 12"

ui/connect-client/testem-electron.js

@@ -4,12 +4,8 @@ module.exports = {
   launchers: {
     Electron: require('ember-electron/lib/test-runner'),
   },
-  launch_in_ci: [
-    'Electron',
-  ],
-  launch_in_dev: [
-    'Electron',
-  ],
+  launch_in_ci: ['Electron'],
+  launch_in_dev: ['Electron'],
   browser_args: {
     Electron: {
       // Note: Some these Chrome options may not be supported in Electron
@@ -22,8 +18,8 @@ module.exports = {
         '--disable-software-rasterizer',
         '--mute-audio',
         '--remote-debugging-port=0',
-        '--window-size=1440,900'
-      ].filter(Boolean)
-    }
-  }
+        '--window-size=1440,900',
+      ].filter(Boolean),
+    },
+  },
 };

ui/connect-client/testem.js

@@ -3,12 +3,8 @@
 module.exports = {
   test_page: 'tests/index.html?hidepassed',
   disable_watching: true,
-  launch_in_ci: [
-    'Chrome'
-  ],
-  launch_in_dev: [
-    'Chrome'
-  ],
+  launch_in_ci: ['Chrome'],
+  launch_in_dev: ['Chrome'],
   browser_start_timeout: 120,
   browser_args: {
     Chrome: {
@@ -20,8 +16,8 @@ module.exports = {
         '--disable-software-rasterizer',
         '--mute-audio',
         '--remote-debugging-port=0',
-        '--window-size=1440,900'
-      ].filter(Boolean)
-    }
-  }
+        '--window-size=1440,900',
+      ].filter(Boolean),
+    },
+  },
 };

yarn.lock

@@ -4980,7 +4980,7 @@ broccoli-funnel-reducer@^1.0.0:
   resolved "https://registry.yarnpkg.com/broccoli-funnel-reducer/-/broccoli-funnel-reducer-1.0.0.tgz#11365b2a785aec9b17972a36df87eef24c5cc0ea"
   integrity sha1-ETZbKnha7JsXlyo234fu8kxcwOo=
 
-broccoli-funnel@3.0.3, broccoli-funnel@^3.0.2:
+broccoli-funnel@3.0.3, broccoli-funnel@^3.0.2, broccoli-funnel@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-3.0.3.tgz#26fd42632471f67a91f4770d1987118087219937"
   integrity sha512-LPzZ91BwStoHZXdXHQAJeYORl189OrRKM5NdIi86SDU9wZ4s/3lV1PRFOiobDT/jKM10voM7CDzfvicHbCYxAQ==
@@ -8247,6 +8247,35 @@ ember-intl@^5.1.1:
     mkdirp "^1.0.4"
     silent-error "^1.1.1"
 
+ember-intl@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ember-intl/-/ember-intl-5.3.1.tgz#d401de4c0851da96b25029c8049925df5cd78cff"
+  integrity sha512-JtYx+wuCqFT7a+nB44Z9nI255hpjYxtSxQkmuh5T1i4XbRyZsTWIrMs8xF+YWTjmELiQESsFkYejvkehUWJmaA==
+  dependencies:
+    broccoli-caching-writer "^3.0.3"
+    broccoli-funnel "^3.0.3"
+    broccoli-merge-files "^0.8.0"
+    broccoli-merge-trees "^4.2.0"
+    broccoli-source "^3.0.0"
+    broccoli-stew "^3.0.0"
+    calculate-cache-key-for-tree "^2.0.0"
+    cldr-core "^36.0.0"
+    ember-auto-import "^1.5.3"
+    ember-cli-babel "^7.18.0"
+    extend "^3.0.2"
+    fast-memoize "^2.5.2"
+    has-unicode "^2.0.1"
+    intl-messageformat "^8.3.9"
+    intl-messageformat-parser "^5.0.2"
+    js-yaml "^3.13.1"
+    json-stable-stringify "^1.0.1"
+    locale-emoji "^0.3.0"
+    lodash.castarray "^4.4.0"
+    lodash.last "^3.0.0"
+    lodash.omit "^4.5.0"
+    mkdirp "^1.0.4"
+    silent-error "^1.1.1"
+
 ember-load-initializers@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.1.tgz#d1a8bead00bc44222b0ab181840869992beb30f5"