From 3be03029f6f75badd28884dd2a104a6f5948bcd5 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 8 Dec 2020 09:27:28 +0000 Subject: [PATCH] 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 --- .../consul-ui/app/helpers/dom-position.js | 12 +++++++----- ui/packages/consul-ui/app/helpers/env.js | 17 +++++++++++------ .../consul-ui/app/helpers/filter-predicate.js | 9 --------- ui/packages/consul-ui/app/helpers/href-mut.js | 9 +++++---- ui/packages/consul-ui/app/helpers/href-to.js | 17 ++++++++++------- ui/packages/consul-ui/app/helpers/is-href.js | 17 ++++++++++------- .../consul-ui/app/helpers/refresh-route.js | 9 +++++---- .../consul-ui/app/helpers/state-matches.js | 9 +++++---- ui/packages/consul-ui/app/helpers/tween-to.js | 11 ++++++----- ui/packages/consul-ui/app/helpers/uri.js | 9 +++++---- ui/packages/consul-ui/package.json | 1 + ui/yarn.lock | 19 ++++++++++++++++++- 12 files changed, 83 insertions(+), 56 deletions(-) delete mode 100644 ui/packages/consul-ui/app/helpers/filter-predicate.js diff --git a/ui/packages/consul-ui/app/helpers/dom-position.js b/ui/packages/consul-ui/app/helpers/dom-position.js index c133ddeb4b..a310b53cd9 100644 --- a/ui/packages/consul-ui/app/helpers/dom-position.js +++ b/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; - }, -}); + } +} diff --git a/ui/packages/consul-ui/app/helpers/env.js b/ui/packages/consul-ui/app/helpers/env.js index cfe0b34750..8da0ffbc40 100644 --- a/ui/packages/consul-ui/app/helpers/env.js +++ b/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; + } +} diff --git a/ui/packages/consul-ui/app/helpers/filter-predicate.js b/ui/packages/consul-ui/app/helpers/filter-predicate.js deleted file mode 100644 index d90b370075..0000000000 --- a/ui/packages/consul-ui/app/helpers/filter-predicate.js +++ /dev/null @@ -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); - }, -}); diff --git a/ui/packages/consul-ui/app/helpers/href-mut.js b/ui/packages/consul-ui/app/helpers/href-mut.js index ec60bdabdc..2c8e1a0139 100644 --- a/ui/packages/consul-ui/app/helpers/href-mut.js +++ b/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 ); - }, -}); + } +} diff --git a/ui/packages/consul-ui/app/helpers/href-to.js b/ui/packages/consul-ui/app/helpers/href-to.js index 617da11f3c..bd05149349 100644 --- a/ui/packages/consul-ui/app/helpers/href-to.js +++ b/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(); - }), -}); + } +} diff --git a/ui/packages/consul-ui/app/helpers/is-href.js b/ui/packages/consul-ui/app/helpers/is-href.js index 5928018a0b..202664bf60 100644 --- a/ui/packages/consul-ui/app/helpers/is-href.js +++ b/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(); - }), -}); + } +} diff --git a/ui/packages/consul-ui/app/helpers/refresh-route.js b/ui/packages/consul-ui/app/helpers/refresh-route.js index bb8d083a0d..367b2b940c 100644 --- a/ui/packages/consul-ui/app/helpers/refresh-route.js +++ b/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(); }; - }, -}); + } +} diff --git a/ui/packages/consul-ui/app/helpers/state-matches.js b/ui/packages/consul-ui/app/helpers/state-matches.js index 354898fccd..27dadc81cd 100644 --- a/ui/packages/consul-ui/app/helpers/state-matches.js +++ b/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); - }, -}); + } +} diff --git a/ui/packages/consul-ui/app/helpers/tween-to.js b/ui/packages/consul-ui/app/helpers/tween-to.js index 37c441f751..e679d3b92a 100644 --- a/ui/packages/consul-ui/app/helpers/tween-to.js +++ b/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); - }, -}); + } +} diff --git a/ui/packages/consul-ui/app/helpers/uri.js b/ui/packages/consul-ui/app/helpers/uri.js index fb1ae3747b..46dd443d1b 100644 --- a/ui/packages/consul-ui/app/helpers/uri.js +++ b/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); - }, -}); + } +} diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json index 59c247d935..cfb074357c 100644 --- a/ui/packages/consul-ui/package.json +++ b/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", diff --git a/ui/yarn.lock b/ui/yarn.lock index 04a620445d..84ab08da9e 100644 --- a/ui/yarn.lock +++ b/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"