ui: Remove ember-computed-style to avoid deprecation error (#9218)

ui/packages/consul-ui/app/components/list-collection/index.hbs

@@ -1,6 +1,8 @@
 <div
   class="list-collection list-collection-scroll-{{scroll}}"
-  style={{{style}}}
+  style={{{concat
+    'height:' style.height 'px'
+  }}}
   id={{guid}}
   ...attributes
 >

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 {};
     }

ui/packages/consul-ui/app/components/tabular-collection/index.hbs

@@ -1,3 +1,11 @@
+<table
+  class="tabular-collection dom-recycling {{if hasActions 'has-actions' ''}}"
+  id={{guid}}
+  style={{{concat
+    'height:' style.height 'px'
+  }}}
+  ...attributes
+>
 {{on-window 'resize' (action "resize") }}
 {{yield}}
 {{#if hasCaption}}
@@ -25,4 +33,5 @@
 {{/if}}
     </tr>
 {{~/each~}}
-  </EmberNativeScrollable>
+  </EmberNativeScrollable>
+</table>

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',
+  tagName: '',
-  classNames: ['dom-recycling'],
-  classNameBindings: ['hasActions'],
-  attributeBindings: ['style'],
   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;

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",

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"