ui: Native-ize class based helpers (#9337)

* Install ember-decorators/observes

* Remove filter-predicate

* Nativize `env` and inject env service

* Nativize all other class based helpers

ui/packages/consul-ui/app/helpers/dom-position.js

@@ -1,8 +1,10 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
-export default Helper.extend({
-  dom: service('dom'),
-  compute: function([target, from], hash) {
+
+export default class DomPosition extends Helper {
+  @service('dom') dom;
+
+  compute([target, from], hash) {
     const $target = this.dom.element(target);
     const $from = this.dom.element(from);
     const fromRect = $from.getBoundingClientRect();
@@ -10,5 +12,5 @@ export default Helper.extend({
     rect.x = rect.x - fromRect.x;
     rect.y = rect.y - fromRect.y;
     return rect;
-  },
-});
+  }
+}

ui/packages/consul-ui/app/helpers/env.js

@@ -1,6 +1,11 @@
-import { helper } from '@ember/component/helper';
-import { env } from 'consul-ui/env';
-export default helper(function([name, def = ''], hash) {
-  const val = env(name);
-  return val != null ? val : def;
-});
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+
+export default class EnvHelper extends Helper {
+  @service('env') env;
+
+  compute([name, def = ''], hash) {
+    const val = this.env.var(name);
+    return val != null ? val : def;
+  }
+}

ui/packages/consul-ui/app/helpers/filter-predicate.js

@@ -1,9 +0,0 @@
-import Helper from '@ember/component/helper';
-import { inject as service } from '@ember/service';
-
-export default Helper.extend({
-  filter: service('filter'),
-  compute([type, filters], hash) {
-    return this.filter.predicate(type)(filters);
-  },
-});

ui/packages/consul-ui/app/helpers/href-mut.js

@@ -4,8 +4,9 @@ import { hrefTo } from 'consul-ui/helpers/href-to';
 import { getOwner } from '@ember/application';
 import transitionable from 'consul-ui/utils/routing/transitionable';
 
-export default Helper.extend({
-  router: service('router'),
+export default class HrefMutHelper extends Helper {
+  @service('router') router;
+
   compute([params], hash) {
     return hrefTo(
       this,
@@ -13,5 +14,5 @@ export default Helper.extend({
       transitionable(this.router.currentRoute, params, getOwner(this)),
       hash
     );
-  },
-});
+  }
+}

ui/packages/consul-ui/app/helpers/href-to.js

@@ -5,7 +5,7 @@
 // (dynamic or wildcard) and encode or not depending on the type
 import { inject as service } from '@ember/service';
 import Helper from '@ember/component/helper';
-import { observer } from '@ember/object';
+import { observes } from '@ember-decorators/object';
 import { hrefTo as _hrefTo } from 'ember-href-to/helpers/href-to';
 
 import wildcard from 'consul-ui/utils/routing/wildcard';
@@ -38,12 +38,15 @@ export const hrefTo = function(owned, router, [targetRouteName, ...rest], namedA
   }
 };
 
-export default Helper.extend({
-  router: service('router'),
+export default class HrefToHelper extends Helper {
+  @service('router') router;
+
   compute(params, hash) {
     return hrefTo(this, this.router, params, hash);
-  },
-  onURLChange: observer('router.currentURL', function() {
+  }
+
+  @observes('router.currentURL')
+  onURLChange() {
     this.recompute();
-  }),
-});
+  }
+}

ui/packages/consul-ui/app/helpers/is-href.js

@@ -2,17 +2,20 @@
 // TODO: Remove ^
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
-import { observer } from '@ember/object';
+import { observes } from '@ember-decorators/object';
+
+export default class IsHrefHelper extends Helper {
+  @service('router') router;
 
-export default Helper.extend({
-  router: service('router'),
   compute([targetRouteName, ...rest]) {
     if (this.router.currentRouteName.startsWith('nspace.') && targetRouteName.startsWith('dc.')) {
       targetRouteName = `nspace.${targetRouteName}`;
     }
     return this.router.isActive(...[targetRouteName, ...rest]);
-  },
-  onURLChange: observer('router.currentURL', function() {
+  }
+
+  @observes('router.currentURL')
+  onURLChange() {
     this.recompute();
-  }),
-});
+  }
+}

ui/packages/consul-ui/app/helpers/refresh-route.js

@@ -2,13 +2,14 @@ import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
 
-export default Helper.extend({
-  router: service('router'),
+export default class RefreshRouteHelper extends Helper {
+  @service('router') router;
+
   compute(params, hash) {
     return () => {
       const container = getOwner(this);
       const routeName = this.router.currentRoute.name;
       return container.lookup(`route:${routeName}`).refresh();
     };
-  },
-});
+  }
+}

ui/packages/consul-ui/app/helpers/state-matches.js

@@ -1,9 +1,10 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 
-export default Helper.extend({
-  state: service('state'),
+export default class StateMatchesHelper extends Helper {
+  @service('state') state;
+
   compute([state, values], hash) {
     return this.state.matches(state, values);
-  },
-});
+  }
+}

ui/packages/consul-ui/app/helpers/tween-to.js

@@ -1,9 +1,10 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 
-export default Helper.extend({
-  ticker: service('ticker'),
-  compute: function([props, id], hash) {
+export default class TweenToHelper extends Helper {
+  @service('ticker') ticker;
+
+  compute([props, id], hash) {
     return this.ticker.tweenTo(props, id);
-  },
-});
+  }
+}

ui/packages/consul-ui/app/helpers/uri.js

@@ -1,9 +1,10 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 
-export default Helper.extend({
-  encoder: service('encoder'),
+export default class UriHelper extends Helper {
+  @service('encoder') encoder;
+
   compute(params, hash) {
     return this.encoder.uriJoin(params);
-  },
-});
+  }
+}

ui/packages/consul-ui/package.json

@@ -106,6 +106,7 @@
     "ember-composable-helpers": "~4.0.0",
     "ember-data": "~3.20.4",
     "ember-data-model-fragments": "5.0.0-beta.0",
+    "ember-decorators": "^6.1.1",
     "ember-exam": "^4.0.0",
     "ember-export-application-global": "^2.0.1",
     "ember-href-to": "^3.1.0",

ui/yarn.lock

@@ -1213,7 +1213,7 @@
     ember-cli-typescript "^3.1.3"
     heimdalljs "^0.3.0"
 
-"@ember-decorators/component@^6.1.0":
+"@ember-decorators/component@^6.1.0", "@ember-decorators/component@^6.1.1":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@ember-decorators/component/-/component-6.1.1.tgz#b360dc4fa8e576ee1c840879399ef1745fd96e06"
   integrity sha512-Cj8tY/c0MC/rsipqsiWLh3YVN72DK92edPYamD/HzvftwzC6oDwawWk8RmStiBnG9PG/vntAt41l3S7HSSA+1Q==
@@ -1221,6 +1221,14 @@
     "@ember-decorators/utils" "^6.1.1"
     ember-cli-babel "^7.1.3"
 
+"@ember-decorators/object@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@ember-decorators/object/-/object-6.1.1.tgz#50c922f5ac9af3ddd381cb6a43a031dfd9a70c7a"
+  integrity sha512-cb4CNR9sRoA31J3FCOFLDuR9ztM4wO9w1WlS4JeNRS7Z69SlB/XSXB/vplA3i9OOaXEy/zKWbu5ndZrHz0gvLw==
+  dependencies:
+    "@ember-decorators/utils" "^6.1.1"
+    ember-cli-babel "^7.1.3"
+
 "@ember-decorators/utils@^6.1.0", "@ember-decorators/utils@^6.1.1":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@ember-decorators/utils/-/utils-6.1.1.tgz#6b619814942b4fb3747cfa9f540c9f05283d7c5e"
@@ -7987,6 +7995,15 @@ ember-data@~3.20.4:
     ember-cli-typescript "^3.1.3"
     ember-inflector "^3.0.1"
 
+ember-decorators@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/ember-decorators/-/ember-decorators-6.1.1.tgz#6d770f8999cf5a413a1ee459afd520838c0fc470"
+  integrity sha512-63vZPntPn1aqMyeNRLoYjJD+8A8obd+c2iZkJflswpDRNVIsp2m7aQdSCtPt4G0U/TEq2251g+N10maHX3rnJQ==
+  dependencies:
+    "@ember-decorators/component" "^6.1.1"
+    "@ember-decorators/object" "^6.1.1"
+    ember-cli-babel "^7.7.3"
+
 ember-destroyable-polyfill@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ember-destroyable-polyfill/-/ember-destroyable-polyfill-2.0.2.tgz#2cc7532bd3c00e351b4da9b7fc683f4daff79671"