From 4e1c62361e0eb028ce11c5f9409bbb80079eaaa4 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 18 Nov 2020 18:55:30 +0000 Subject: [PATCH] ui: Remove ember-computed-style to avoid deprecation error (#9218) --- .../app/components/list-collection/index.hbs | 4 +++- .../app/components/list-collection/index.js | 5 ++--- .../app/components/tabular-collection/index.hbs | 11 ++++++++++- .../app/components/tabular-collection/index.js | 13 +++++-------- ui/packages/consul-ui/package.json | 1 - ui/yarn.lock | 7 ------- 6 files changed, 20 insertions(+), 21 deletions(-) diff --git a/ui/packages/consul-ui/app/components/list-collection/index.hbs b/ui/packages/consul-ui/app/components/list-collection/index.hbs index ce7fbe30cc..a5dc40837d 100644 --- a/ui/packages/consul-ui/app/components/list-collection/index.hbs +++ b/ui/packages/consul-ui/app/components/list-collection/index.hbs @@ -1,6 +1,8 @@
diff --git a/ui/packages/consul-ui/app/components/list-collection/index.js b/ui/packages/consul-ui/app/components/list-collection/index.js index e4089ac8fd..6762e42c65 100644 --- a/ui/packages/consul-ui/app/components/list-collection/index.js +++ b/ui/packages/consul-ui/app/components/list-collection/index.js @@ -2,17 +2,16 @@ import { inject as service } from '@ember/service'; import { computed, get, set } from '@ember/object'; import Component from 'ember-collection/components/ember-collection'; import PercentageColumns from 'ember-collection/layouts/percentage-columns'; -import style from 'ember-computed-style'; import Slotted from 'block-slots'; const formatItemStyle = PercentageColumns.prototype.formatItemStyle; export default Component.extend(Slotted, { + tagName: '', dom: service('dom'), tagName: '', height: 500, cellHeight: 70, - style: style('getStyle'), checked: null, scroll: 'virtual', init: function() { @@ -43,7 +42,7 @@ export default Component.extend(Slotted, { return style; }; }, - getStyle: computed('height', function() { + style: computed('height', function() { if (this.scroll !== 'virtual') { return {}; } diff --git a/ui/packages/consul-ui/app/components/tabular-collection/index.hbs b/ui/packages/consul-ui/app/components/tabular-collection/index.hbs index 7b529ba642..09943dc775 100644 --- a/ui/packages/consul-ui/app/components/tabular-collection/index.hbs +++ b/ui/packages/consul-ui/app/components/tabular-collection/index.hbs @@ -1,3 +1,11 @@ + {{on-window 'resize' (action "resize") }} {{yield}} {{#if hasCaption}} @@ -25,4 +33,5 @@ {{/if}} {{~/each~}} - \ No newline at end of file + +
\ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/tabular-collection/index.js b/ui/packages/consul-ui/app/components/tabular-collection/index.js index b31744a257..a9d71e030b 100644 --- a/ui/packages/consul-ui/app/components/tabular-collection/index.js +++ b/ui/packages/consul-ui/app/components/tabular-collection/index.js @@ -3,18 +3,13 @@ import { computed, get, set } from '@ember/object'; import CollectionComponent from 'ember-collection/components/ember-collection'; import needsRevalidate from 'ember-collection/utils/needs-revalidate'; import Grid from 'ember-collection/layouts/grid'; -import style from 'ember-computed-style'; import Slotted from 'block-slots'; const formatItemStyle = Grid.prototype.formatItemStyle; export default CollectionComponent.extend(Slotted, { - tagName: 'table', - classNames: ['dom-recycling'], - classNameBindings: ['hasActions'], - attributeBindings: ['style'], + tagName: '', dom: service('dom'), - style: style('getStyle'), width: 1150, rowHeight: 50, maxHeight: 500, @@ -22,6 +17,7 @@ export default CollectionComponent.extend(Slotted, { hasCaption: false, init: function() { this._super(...arguments); + this.guid = this.dom.guid(this); // TODO: The row height should auto calculate properly from the CSS const o = this; this['cell-layout'] = new Grid(get(this, 'width'), get(this, 'rowHeight')); @@ -35,9 +31,10 @@ export default CollectionComponent.extend(Slotted, { }, didInsertElement: function() { this._super(...arguments); + this.$element = this.dom.element(`#${this.guid}`); this.actions.resize.apply(this, [{ target: this.dom.viewport() }]); }, - getStyle: computed('rowHeight', '_items', 'maxRows', 'maxHeight', function() { + style: computed('rowHeight', '_items', 'maxRows', 'maxHeight', function() { const maxRows = get(this, 'rows'); let height = get(this, 'maxHeight'); if (maxRows) { @@ -68,7 +65,7 @@ export default CollectionComponent.extend(Slotted, { }, actions: { resize: function(e) { - const $tbody = this.element; + const $tbody = this.$element; const $appContent = this.dom.element('.app-view'); if ($appContent) { const border = 1; diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json index b031d10465..9be2546019 100644 --- a/ui/packages/consul-ui/package.json +++ b/ui/packages/consul-ui/package.json @@ -104,7 +104,6 @@ "ember-cli-yadda": "^0.5.0", "ember-collection": "^1.0.0-alpha.9", "ember-composable-helpers": "~4.0.0", - "ember-computed-style": "^0.3.0", "ember-data": "~3.20.4", "ember-data-model-fragments": "5.0.0-beta.0", "ember-exam": "^4.0.0", diff --git a/ui/yarn.lock b/ui/yarn.lock index 2fabb5364d..d9f2fbca75 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -7935,13 +7935,6 @@ ember-composable-helpers@~4.0.0: ember-cli-babel "^7.11.1" resolve "^1.10.0" -ember-computed-style@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/ember-computed-style/-/ember-computed-style-0.3.0.tgz#a04375f8b48fbf72fd61e76da3358075bd195ae9" - integrity sha512-EMMlKa8HKUCUapkJVgi/2VPyqUTWxIGs/rNsxMcMiOLFErHv6D1Mw8tvByuXeCtW8KrbwAFX3vaCMNYsAZAjvQ== - dependencies: - ember-cli-babel "^6.6.0" - ember-concurrency-decorators@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/ember-concurrency-decorators/-/ember-concurrency-decorators-2.0.1.tgz#f5465785e6cf44684fb158ae6ab3aa1b131fae43"