From 143975e88afb07292e0899241af55bd6a90d21ee Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 9 Jul 2020 14:30:17 +0100 Subject: [PATCH] ui: Replace dom-buffering components with ember-stargate Portals (#8273) * ui: Replace dom-buffering components with ember-stargate Portals --- .../app/components/dom-buffer-flush/index.hbs | 1 - .../app/components/dom-buffer-flush/index.js | 20 ------- ui-v2/app/components/dom-buffer/index.hbs | 1 - ui-v2/app/components/dom-buffer/index.js | 19 ------ ui-v2/app/components/modal-dialog/index.hbs | 58 ++++++++++--------- ui-v2/app/components/modal-dialog/index.js | 10 ++-- ui-v2/app/components/modal-layer/index.hbs | 5 +- ui-v2/app/components/modal-layer/index.js | 5 +- ui-v2/app/services/dom-buffer.js | 46 --------------- .../components/dom-buffer-flush-test.js | 26 --------- .../integration/components/dom-buffer-test.js | 26 --------- .../components/modal-dialog-test.js | 5 +- ui-v2/tests/unit/services/dom-buffer-test.js | 12 ---- 13 files changed, 46 insertions(+), 188 deletions(-) delete mode 100644 ui-v2/app/components/dom-buffer-flush/index.hbs delete mode 100644 ui-v2/app/components/dom-buffer-flush/index.js delete mode 100644 ui-v2/app/components/dom-buffer/index.hbs delete mode 100644 ui-v2/app/components/dom-buffer/index.js delete mode 100644 ui-v2/app/services/dom-buffer.js delete mode 100644 ui-v2/tests/integration/components/dom-buffer-flush-test.js delete mode 100644 ui-v2/tests/integration/components/dom-buffer-test.js delete mode 100644 ui-v2/tests/unit/services/dom-buffer-test.js diff --git a/ui-v2/app/components/dom-buffer-flush/index.hbs b/ui-v2/app/components/dom-buffer-flush/index.hbs deleted file mode 100644 index fb5c4b157d..0000000000 --- a/ui-v2/app/components/dom-buffer-flush/index.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}} \ No newline at end of file diff --git a/ui-v2/app/components/dom-buffer-flush/index.js b/ui-v2/app/components/dom-buffer-flush/index.js deleted file mode 100644 index a8d4b8bad2..0000000000 --- a/ui-v2/app/components/dom-buffer-flush/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import { inject as service } from '@ember/service'; -import Component from '@ember/component'; -const append = function(content) { - this.element.appendChild(content); -}; -export default Component.extend({ - buffer: service('dom-buffer'), - init: function() { - this._super(...arguments); - this.append = append.bind(this); - }, - didInsertElement: function() { - this._super(...arguments); - this.buffer.on('add', this.append); - }, - didDestroyElement: function() { - this._super(...arguments); - this.buffer.off('add', this.append); - }, -}); diff --git a/ui-v2/app/components/dom-buffer/index.hbs b/ui-v2/app/components/dom-buffer/index.hbs deleted file mode 100644 index fb5c4b157d..0000000000 --- a/ui-v2/app/components/dom-buffer/index.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}} \ No newline at end of file diff --git a/ui-v2/app/components/dom-buffer/index.js b/ui-v2/app/components/dom-buffer/index.js deleted file mode 100644 index eb2706e881..0000000000 --- a/ui-v2/app/components/dom-buffer/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import { inject as service } from '@ember/service'; -import Component from '@ember/component'; -export default Component.extend({ - buffer: service('dom-buffer'), - getBufferName: function() { - // TODO: Right now we are only using this for the modal layer - // moving forwards you'll be able to name your buffers - return 'modal'; - }, - didInsertElement: function() { - this._super(...arguments); - this._element = this.buffer.add(this.getBufferName(), this.element); - }, - didDestroyElement: function() { - this._super(...arguments); - this.buffer.remove(this.getBufferName(), this._element); - this._element = null; - }, -}); diff --git a/ui-v2/app/components/modal-dialog/index.hbs b/ui-v2/app/components/modal-dialog/index.hbs index 644cc2813e..ad8930ff7d 100644 --- a/ui-v2/app/components/modal-dialog/index.hbs +++ b/ui-v2/app/components/modal-dialog/index.hbs @@ -1,32 +1,36 @@ {{on-window 'resize' (action "resize") }} -{{yield}} - -
- -
-
-
- - - {{yield (hash - close=(action "close") - )}} - -
+ + {{yield}} +
+ +
+
- - {{yield (hash - close=(action "close") - )}} - +
+
+ + + {{yield (hash + close=(action "close") + )}} + +
+
+ + {{yield (hash + close=(action "close") + )}} + +
+
+ + {{yield (hash + close=(action "close") + )}} + +
+
-
- - {{yield (hash - close=(action "close") - )}} - -
-
\ No newline at end of file + \ No newline at end of file diff --git a/ui-v2/app/components/modal-dialog/index.js b/ui-v2/app/components/modal-dialog/index.js index dac48f1a53..f9553dbe2f 100644 --- a/ui-v2/app/components/modal-dialog/index.js +++ b/ui-v2/app/components/modal-dialog/index.js @@ -1,10 +1,12 @@ +import Component from '@ember/component'; import { get, set } from '@ember/object'; import { inject as service } from '@ember/service'; -import DomBufferComponent from 'consul-ui/components/dom-buffer'; import Slotted from 'block-slots'; import templatize from 'consul-ui/utils/templatize'; -export default DomBufferComponent.extend(Slotted, { + +export default Component.extend(Slotted, { + tagName: '', dom: service('dom'), checked: true, height: null, @@ -17,7 +19,7 @@ export default DomBufferComponent.extend(Slotted, { set(this, 'checked', true); if (this.height === null) { if (this.element) { - const dialogPanel = this.dom.element('[role="dialog"] > div > div', this.element); + const dialogPanel = this.dom.element('[role="dialog"] > div > div', this.modal); const rect = dialogPanel.getBoundingClientRect(); set(this, 'dialog', dialogPanel); set(this, 'height', rect.height); @@ -110,7 +112,7 @@ export default DomBufferComponent.extend(Slotted, { close: function() { const $close = this.dom.element('#modal_close'); $close.checked = true; - const $input = this.dom.element('input[name="modal"]', this.element); + const $input = this.dom.element('input[name="modal"]', this.modal); $input.onchange({ target: $input }); }, }, diff --git a/ui-v2/app/components/modal-layer/index.hbs b/ui-v2/app/components/modal-layer/index.hbs index a76e982c1c..3f206f7841 100644 --- a/ui-v2/app/components/modal-layer/index.hbs +++ b/ui-v2/app/components/modal-layer/index.hbs @@ -1 +1,4 @@ - +
+ + +
diff --git a/ui-v2/app/components/modal-layer/index.js b/ui-v2/app/components/modal-layer/index.js index 0c418901b2..689f540bbf 100644 --- a/ui-v2/app/components/modal-layer/index.js +++ b/ui-v2/app/components/modal-layer/index.js @@ -1,8 +1,9 @@ -import DomBufferFlushComponent from 'consul-ui/components/dom-buffer-flush'; +import Component from '@ember/component'; import { inject as service } from '@ember/service'; -export default DomBufferFlushComponent.extend({ +export default Component.extend({ dom: service('dom'), + tagName: '', actions: { change: function(e) { [...this.dom.elements('[name="modal"]')] diff --git a/ui-v2/app/services/dom-buffer.js b/ui-v2/app/services/dom-buffer.js deleted file mode 100644 index 88f66bffe0..0000000000 --- a/ui-v2/app/services/dom-buffer.js +++ /dev/null @@ -1,46 +0,0 @@ -import Service from '@ember/service'; -import Evented from '@ember/object/evented'; -let buffers; -// TODO: This all should be replaced with {{#in-element}} if possible -export default Service.extend(Evented, { - init: function() { - this._super(...arguments); - buffers = {}; - }, - willDestroy: function() { - Object.entries(buffers).forEach(function([key, items]) { - items.forEach(function(item) { - item.remove(); - }); - }); - buffers = null; - }, - // TODO: Consider renaming this and/or - // `delete`ing the buffer (but not the DOM element) - // flush should flush, but maybe being able to re-flush - // after you've flushed could be handy - flush: function(name) { - return buffers[name]; - }, - add: function(name, dom) { - this.trigger('add', dom); - if (typeof buffers[name] === 'undefined') { - buffers[name] = []; - } - buffers[name].push(dom); - return dom; - }, - remove: function(name, dom) { - if (typeof buffers[name] !== 'undefined') { - const buffer = buffers[name]; - const i = buffer.findIndex(item => item === dom); - if (i !== -1) { - const item = buffer.splice(i, 1)[0]; - item.remove(); - } - if (buffer.length === 0) { - delete buffers[name]; - } - } - }, -}); diff --git a/ui-v2/tests/integration/components/dom-buffer-flush-test.js b/ui-v2/tests/integration/components/dom-buffer-flush-test.js deleted file mode 100644 index 80996e4132..0000000000 --- a/ui-v2/tests/integration/components/dom-buffer-flush-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | dom buffer flush', function(hooks) { - setupRenderingTest(hooks); - - test('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.on('myAction', function(val) { ... }); - - await render(hbs`{{dom-buffer-flush}}`); - - assert.dom('*').hasText(''); - - // Template block usage: - await render(hbs` - {{#dom-buffer-flush}} - template block text - {{/dom-buffer-flush}} - `); - - assert.dom('*').hasText('template block text'); - }); -}); diff --git a/ui-v2/tests/integration/components/dom-buffer-test.js b/ui-v2/tests/integration/components/dom-buffer-test.js deleted file mode 100644 index 14488ffb00..0000000000 --- a/ui-v2/tests/integration/components/dom-buffer-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | dom buffer', function(hooks) { - setupRenderingTest(hooks); - - test('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.on('myAction', function(val) { ... }); - - await render(hbs`{{dom-buffer}}`); - - assert.dom('*').hasText(''); - - // Template block usage: - await render(hbs` - {{#dom-buffer}} - template block text - {{/dom-buffer}} - `); - - assert.dom('*').hasText('template block text'); - }); -}); diff --git a/ui-v2/tests/integration/components/modal-dialog-test.js b/ui-v2/tests/integration/components/modal-dialog-test.js index a4d55c1b10..d9af24f755 100644 --- a/ui-v2/tests/integration/components/modal-dialog-test.js +++ b/ui-v2/tests/integration/components/modal-dialog-test.js @@ -10,7 +10,7 @@ module('Integration | Component | modal dialog', function(hooks) { // Set any properties with this.set('myProperty', 'value'); // Handle any actions with this.on('myAction', function(val) { ... }); - await render(hbs`{{modal-dialog}}`); + await render(hbs``); assert.ok( find('*') @@ -20,8 +20,7 @@ module('Integration | Component | modal dialog', function(hooks) { // Template block usage: await render(hbs` - {{#modal-dialog}} - {{/modal-dialog}} + `); assert.ok( diff --git a/ui-v2/tests/unit/services/dom-buffer-test.js b/ui-v2/tests/unit/services/dom-buffer-test.js deleted file mode 100644 index e6d7ad4792..0000000000 --- a/ui-v2/tests/unit/services/dom-buffer-test.js +++ /dev/null @@ -1,12 +0,0 @@ -import { module, test } from 'qunit'; -import { setupTest } from 'ember-qunit'; - -module('Unit | Service | dom buffer', function(hooks) { - setupTest(hooks); - - // Replace this with your real tests. - test('it exists', function(assert) { - let service = this.owner.lookup('service:dom-buffer'); - assert.ok(service); - }); -});