From 426238772eaf3d4c6b623f709799c7c12fca4ba3 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Tue, 30 Jun 2020 11:37:40 -0400 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20build,=20lint,=20?= =?UTF-8?q?and=20format=20tasks=20to=20connect-client?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 7 +- ui/connect-client/.prettierrc | 4 + ui/connect-client/.sasslintrc | 7 ++ ui/connect-client/.template-lintrc.js | 7 +- ui/connect-client/README.md | 95 +++++++++++++++---- ui/connect-client/app/router.js | 3 +- .../app/styles/{app.css => app.scss} | 0 ui/connect-client/config/environment.js | 23 +++-- ui/connect-client/config/targets.js | 4 +- ui/connect-client/ember-cli-build.js | 14 ++- ui/connect-client/mirage/config.js | 8 ++ ui/connect-client/package.json | 27 +++++- ui/connect-client/testem-electron.js | 16 ++-- ui/connect-client/testem.js | 16 ++-- yarn.lock | 31 +++++- 15 files changed, 203 insertions(+), 59 deletions(-) create mode 100644 ui/connect-client/.prettierrc create mode 100644 ui/connect-client/.sasslintrc rename ui/connect-client/app/styles/{app.css => app.scss} (100%) create mode 100644 ui/connect-client/mirage/config.js diff --git a/package.json b/package.json index aaa76f8d0..5f5f9e813 100644 --- a/package.json +++ b/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'", diff --git a/ui/connect-client/.prettierrc b/ui/connect-client/.prettierrc new file mode 100644 index 000000000..2ddc9656d --- /dev/null +++ b/ui/connect-client/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "printWidth": 80 +} diff --git a/ui/connect-client/.sasslintrc b/ui/connect-client/.sasslintrc new file mode 100644 index 000000000..fbccde1bf --- /dev/null +++ b/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 diff --git a/ui/connect-client/.template-lintrc.js b/ui/connect-client/.template-lintrc.js index f38737001..61df6a727 100644 --- a/ui/connect-client/.template-lintrc.js +++ b/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'] } + } }; diff --git a/ui/connect-client/README.md b/ui/connect-client/README.md index 3dad99b7f..d5084d78a 100644 --- a/ui/connect-client/README.md +++ b/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. + + + +**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) + + ## Prerequisites @@ -15,39 +30,79 @@ You will need the following things properly installed on your computer. ## Installation -* `git clone ` this repository -* `cd connect-client` -* `yarn install` +See watchtower-ui README for installation instructions. + +## Yarn Commands + +List of available project commands. `yarn run ` + +| 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 diff --git a/ui/connect-client/app/router.js b/ui/connect-client/app/router.js index 224ca426a..818c8d496 100644 --- a/ui/connect-client/app/router.js +++ b/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 () {}); diff --git a/ui/connect-client/app/styles/app.css b/ui/connect-client/app/styles/app.scss similarity index 100% rename from ui/connect-client/app/styles/app.css rename to ui/connect-client/app/styles/app.scss diff --git a/ui/connect-client/config/environment.js b/ui/connect-client/config/environment.js index f62e6cd7b..6cbe437d5 100644 --- a/ui/connect-client/config/environment.js +++ b/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') { diff --git a/ui/connect-client/config/targets.js b/ui/connect-client/config/targets.js index 8ffae3636..cc5539285 100644 --- a/ui/connect-client/config/targets.js +++ b/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, }; diff --git a/ui/connect-client/ember-cli-build.js b/ui/connect-client/ember-cli-build.js index d690a2531..9528c38e4 100644 --- a/ui/connect-client/ember-cli-build.js +++ b/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 diff --git a/ui/connect-client/mirage/config.js b/ui/connect-client/mirage/config.js new file mode 100644 index 000000000..9e4af180e --- /dev/null +++ b/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; +} diff --git a/ui/connect-client/package.json b/ui/connect-client/package.json index d9a7b8165..9af33e871 100644 --- a/ui/connect-client/package.json +++ b/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" diff --git a/ui/connect-client/testem-electron.js b/ui/connect-client/testem-electron.js index 3272b9174..7ac31d81f 100644 --- a/ui/connect-client/testem-electron.js +++ b/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), + }, + }, }; diff --git a/ui/connect-client/testem.js b/ui/connect-client/testem.js index 49f53feed..ed2f37124 100644 --- a/ui/connect-client/testem.js +++ b/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), + }, + }, }; diff --git a/yarn.lock b/yarn.lock index 7d2860557..5c4a10c5f 100644 --- a/yarn.lock +++ b/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"