UI: Package upgrades (#4740)

Upgrade all patch and minor upgradeable packages, also uses `only`
in ember-cli-build to reduce the included helpers from certain helper
packages.

Make some major version upgrades for some dev tools

- husky
- lint-staged
- ember-cli-yadda
- ember-cli-sass (also moved from node-sass to dart-sass)

Minor tweak: spotted css file (instead of scss file), rename

The move to `dart-sass`:

dart-sass has been the primary implementation of sass for ~6 months and
will receive updates earlier than libsass (ruby-sass itself is now deprecated)

Other benefits include not having to recompile (via `npm rebuild` or similar)
when switching platforms and an 'almost' javascript based solution.

This update also alters some media queries that, whilst wouldn't compile
anymore with either an updated libsass or dart-sass, where probably a
little over complicated anyway, I've therefore made them similar to
other breakpoints that made sense.

ui-v2/app/styles/components/icons/index.scss

@@ -63,7 +63,7 @@
 }
 %with-hashicorp::before {
   @extend %pseudo-icon;
-  opacity: .45;
+  opacity: 0.45;
   background-image: $hashicorp-svg;
   background-size: cover;
   width: 20px;
@@ -152,7 +152,7 @@
 %with-inverted-tick {
   @extend %pseudo-icon;
   background-color: $ui-color-transparent;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="#{$magenta-800-url-encoded}"/></svg>');
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="##{$magenta-800-no-hash}"/></svg>');
   height: 20px !important;
   width: 16px !important;
 }

ui-v2/app/styles/components/product.scss

@@ -64,12 +64,12 @@ main {
 #toolbar-toggle {
   display: none;
 }
-@media #{$--expanded-filters} {
+@media #{$--horizontal-selects} {
   [for='toolbar-toggle'] {
     display: none;
   }
 }
-@media #{$--lt-expanded-filters} {
+@media #{$--lt-horizontal-selects} {
   %app-view header h1 {
     display: inline-block;
   }

ui-v2/app/styles/variables/custom-query.scss

@@ -23,11 +23,8 @@ $--lt-tall-footer: '(max-height: 814px)';
 $--wide-footer: '(min-width: 421px)';
 $--lt-wide-footer: '(max-width: 420px)';
 
-$--expanded-filters: '(min-width: 421px) (min-height: 815px)';
+$--spacious-page-header: '(min-width: 850px)';
-$--lt-expanded-filters: '(max-width: 420px) (max-height: 814px)';
+$--lt-spacious-page-header: '(max-width: 849px)';
-
-$--spacious-page-header: '(min-width: 421px) (min-height: 815px)';
-$--lt-spacious-page-header: '(max-width: 420px) (max-height: 814px)';
 
 $--spacious-healthcheck-status: '(min-width: 421px)';
 $--lt-spacious-healthcheck-status: '(max-width: 420px)';

ui-v2/app/styles/variables/index.scss

@@ -2,7 +2,7 @@
 $gray: $ui-gray-200;
 $ui-gray-025: #fafbfc;
 
-$magenta-800-url-encoded: %235a1434;
+$magenta-800-no-hash: 5a1434;
 
 $keyline-light: $ui-gray-100; // h1
 $keyline-mid: $ui-gray-200; // td, footer

ui-v2/ember-cli-build.js

@@ -19,7 +19,10 @@ module.exports = function(defaults) {
       includePolyfill: true
     },
     'ember-cli-string-helpers': {
-      only: ['capitalize']
+      only: ['capitalize', 'lowercase']
+    },
+    'ember-cli-math-helpers': {
+      only: ['div']
     },
     'babel': {
       plugins: [
@@ -38,6 +41,7 @@ module.exports = function(defaults) {
       },
     },
     'sassOptions': {
+      implementation: require('dart-sass'),
       sourceMapEmbed: sourcemaps,
     },
     'autoprefixer': {
@@ -48,9 +52,6 @@ module.exports = function(defaults) {
         "ie 11"
       ]
     },
-    'ember-cli-string-helpers': {
-      only: ['lowercase']
-    }
   });
   // Use `app.import` to add additional libraries to the generated
   // output files.

ui-v2/package.json

@@ -16,8 +16,12 @@
     "start": "ember serve",
     "start:api": "api-double --dir ./node_modules/@hashicorp/consul-api-double",
     "test": "ember test",
-    "test:view": "ember test --server",
+    "test:view": "ember test --server"
-    "precommit": "lint-staged"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
   "lint-staged": {
     "{app,config,lib,server,tests}/**/*.js": [
@@ -35,6 +39,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "base64-js": "^1.3.0",
     "broccoli-asset-rev": "^2.4.5",
+    "dart-sass": "^1.14.1",
     "ember-ajax": "^3.0.0",
     "ember-block-slots": "^1.1.11",
     "ember-browserify": "^1.2.2",
@@ -54,12 +59,12 @@
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-page-object": "^1.15.0-beta.2",
     "ember-cli-qunit": "^4.1.1",
-    "ember-cli-sass": "^7.1.4",
+    "ember-cli-sass": "^8.0.1",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-string-helpers": "^1.9.0",
     "ember-cli-uglify": "^2.0.0",
-    "ember-cli-yadda": "^0.4.0",
+    "ember-cli-yadda": "^0.5.0",
     "ember-collection": "^1.0.0-alpha.9",
     "ember-composable-helpers": "^2.1.0",
     "ember-computed-style": "^0.3.0",
@@ -74,13 +79,13 @@
     "ember-resolver": "^4.0.0",
     "ember-sinon-qunit": "^2.1.0",
     "ember-source": "~2.18.2",
-    "ember-test-selectors": "^0.3.9",
+    "ember-test-selectors": "^1.0.0",
     "ember-truth-helpers": "^2.0.0",
     "ember-url": "^0.6.0",
     "eslint-plugin-ember": "^5.0.0",
-    "husky": "^0.14.3",
+    "husky": "^1.1.0",
     "ivy-codemirror": "^2.1.0",
-    "lint-staged": "^6.1.0",
+    "lint-staged": "^7.0.0",
     "loader.js": "^4.2.3",
     "prettier": "^1.10.2",
     "svgo": "^1.0.5",

ui-v2/tests/helpers/api.js

@@ -28,6 +28,9 @@ export const get = function(_url, options = { headers: { cookie: {} } }) {
       },
       {
         set: function() {},
+        status: function() {
+          return this;
+        },
         send: function(content) {
           resolve(JSON.parse(content));
         },