ui: Use dom.root() in a few more places

hashicorp · Nov 8, 2018 · 3a81b37 · 3a81b37
1 parent 00663a2
commit 3a81b37
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 28 deletions.
diff --git a/ui-v2/app/components/app-view.js b/ui-v2/app/components/app-view.js
@@ -1,31 +1,33 @@
 import Component from '@ember/component';
-import SlotsMixin from 'ember-block-slots';
 import { get } from '@ember/object';
+import { inject as service } from '@ember/service';
+import SlotsMixin from 'ember-block-slots';
 import templatize from 'consul-ui/utils/templatize';
-const $html = document.documentElement;
 export default Component.extend(SlotsMixin, {
   loading: false,
   authorized: true,
   enabled: true,
   classNames: ['app-view'],
   classNameBindings: ['enabled::disabled', 'authorized::unauthorized'],
+  dom: service('dom'),
   didReceiveAttrs: function() {
     // right now only manually added classes are hoisted to <html>
+    const $root = get(this, 'dom').root();
     let cls = get(this, 'class') || '';
     if (get(this, 'loading')) {
       cls += ' loading';
     } else {
-      $html.classList.remove(...templatize(['loading']));
+      $root.classList.remove(...templatize(['loading']));
     }
     if (cls) {
       // its possible for 'layout' templates to change after insert
       // check for these specific layouts and clear them out
-      [...$html.classList].forEach(function(item, i) {
+      [...$root.classList].forEach(function(item, i) {
         if (templatize(['edit', 'show', 'list']).indexOf(item) !== -1) {
-          $html.classList.remove(item);
+          $root.classList.remove(item);
         }
       });
-      $html.classList.add(...templatize(cls.split(' ')));
+      $root.classList.add(...templatize(cls.split(' ')));
     }
   },
   didInsertElement: function() {
@@ -34,7 +36,8 @@ export default Component.extend(SlotsMixin, {
   didDestroyElement: function() {
     const cls = get(this, 'class') + ' loading';
     if (cls) {
-      $html.classList.remove(...templatize(cls.split(' ')));
+      const $root = get(this, 'dom').root();
+      $root.classList.remove(...templatize(cls.split(' ')));
     }
   },
 });
diff --git a/ui-v2/app/components/hashicorp-consul.js b/ui-v2/app/components/hashicorp-consul.js
@@ -1,11 +1,15 @@
 import Component from '@ember/component';
 import { get, set } from '@ember/object';
-const $html = document.documentElement;
-const $body = document.body;
+import { inject as service } from '@ember/service';
 export default Component.extend({
+  dom: service('dom'),
+  // TODO: could this be dom.viewport() ?
+  win: window,
   isDropdownVisible: false,
   didInsertElement: function() {
-    $html.classList.remove('template-with-vertical-menu');
+    get(this, 'dom')
+      .root()
+      .classList.remove('template-with-vertical-menu');
   },
   actions: {
     dropdown: function(e) {
@@ -14,12 +18,15 @@ export default Component.extend({
       }
     },
     change: function(e) {
+      const dom = get(this, 'dom');
+      const $root = dom.root();
+      const $body = dom.element('body');
       if (e.target.checked) {
-        $html.classList.add('template-with-vertical-menu');
-        $body.style.height = $html.style.height = window.innerHeight + 'px';
+        $root.classList.add('template-with-vertical-menu');
+        $body.style.height = $root.style.height = get(this, 'win').innerHeight + 'px';
       } else {
-        $html.classList.remove('template-with-vertical-menu');
-        $body.style.height = $html.style.height = null;
+        $root.classList.remove('template-with-vertical-menu');
+        $body.style.height = $root.style.height = null;
       }
     },
   },

diff --git a/ui-v2/app/components/tabular-details.js b/ui-v2/app/components/tabular-details.js
@@ -1,14 +1,14 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { get } from '@ember/object';
 import SlotsMixin from 'ember-block-slots';
-import closest from 'consul-ui/utils/dom/closest';
-import clickFirstAnchorFactory from 'consul-ui/utils/dom/click-first-anchor';
-const clickFirstAnchor = clickFirstAnchorFactory(closest);
 
 export default Component.extend(SlotsMixin, {
+  dom: service('dom'),
   onchange: function() {},
   actions: {
     click: function(e) {
-      clickFirstAnchor(e);
+      get(this, 'dom').clickFirstAnchor(e);
     },
     change: function(item, e) {
       this.onchange(e, item);

diff --git a/ui-v2/app/controllers/dc/acls/index.js b/ui-v2/app/controllers/dc/acls/index.js
@@ -27,6 +27,7 @@ export default Controller.extend(WithFiltering, {
       };
     });
   }),
+  // TODO: This should be using a searchable
   filter: function(item, { s = '', type = '' }) {
     const sLower = s.toLowerCase();
     return (

diff --git a/ui-v2/app/controllers/dc/services/show.js b/ui-v2/app/controllers/dc/services/show.js
@@ -1,6 +1,5 @@
 import Controller from '@ember/controller';
-import { get } from '@ember/object';
-import { computed } from '@ember/object';
+import { get, computed } from '@ember/object';
 import sumOfUnhealthy from 'consul-ui/utils/sumOfUnhealthy';
 import hasStatus from 'consul-ui/utils/hasStatus';
 import WithHealthFiltering from 'consul-ui/mixins/with-health-filtering';

diff --git a/ui-v2/app/helpers/css-var.js b/ui-v2/app/helpers/css-var.js
diff --git a/ui-v2/app/routes/application.js b/ui-v2/app/routes/application.js
@@ -3,32 +3,33 @@ import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
 import { next } from '@ember/runloop';
-const $html = document.documentElement;
-const removeLoading = function() {
-  return $html.classList.remove('ember-loading');
+const removeLoading = function($from) {
+  return $from.classList.remove('ember-loading');
 };
 export default Route.extend({
+  dom: service('dom'),
   init: function() {
     this._super(...arguments);
   },
   repo: service('repository/dc'),
   settings: service('settings'),
   actions: {
     loading: function(transition, originRoute) {
+      const $root = get(this, 'dom').root();
       let dc = null;
       if (originRoute.routeName !== 'dc') {
         const model = this.modelFor('dc') || { dcs: null, dc: { Name: null } };
         dc = get(this, 'repo').getActive(model.dc.Name, model.dcs);
       }
       hash({
-        loading: !$html.classList.contains('ember-loading'),
+        loading: !$root.classList.contains('ember-loading'),
         dc: dc,
       }).then(model => {
         next(() => {
           const controller = this.controllerFor('application');
           controller.setProperties(model);
           transition.promise.finally(function() {
-            removeLoading();
+            removeLoading($root);
             controller.setProperties({
               loading: false,
               dc: model.dc,
@@ -70,6 +71,7 @@ export default Route.extend({
       if (error.status === '') {
         error.message = 'Error';
       }
+      const $root = get(this, 'dom').root();
       hash({
         error: error,
         dc:
@@ -81,13 +83,13 @@ export default Route.extend({
         dcs: model && model.dcs ? model.dcs : [],
       })
         .then(model => {
-          removeLoading();
+          removeLoading($root);
           next(() => {
             this.controllerFor('error').setProperties(model);
           });
         })
         .catch(e => {
-          removeLoading();
+          removeLoading($root);
           next(() => {
             this.controllerFor('error').setProperties({ error: error });
           });

diff --git a/ui-v2/tests/unit/routes/application-test.js b/ui-v2/tests/unit/routes/application-test.js
@@ -2,7 +2,7 @@ import { moduleFor, test } from 'ember-qunit';
 
 moduleFor('route:application', 'Unit | Route | application', {
   // Specify the other units that are required for this test.
-  needs: ['service:repository/dc', 'service:settings'],
+  needs: ['service:repository/dc', 'service:settings', 'service:dom'],
 });
 
 test('it exists', function(assert) {