From 91b22f21ba141edcfe49032195f0b03f0eb5a87d Mon Sep 17 00:00:00 2001 From: Kenia <19161242+kaxcode@users.noreply.github.com> Date: Wed, 20 May 2020 12:43:25 -0400 Subject: [PATCH] ui: Implement EmberTooltips to Upstreams (#7930) * Add ember-tooltips addon * Create Tooltip component with styling and test * Implement Tooltip into Upstreams --- ui-v2/app/components/tooltip/index.hbs | 3 + ui-v2/app/components/tooltip/index.js | 5 ++ .../base/components/tooltip/layout.scss | 5 ++ .../styles/base/components/tooltip/skin.scss | 11 +++- ui-v2/app/styles/core/typography.scss | 5 ++ .../templates/dc/services/instance/proxy.hbs | 11 +++- .../templates/dc/services/show/upstreams.hbs | 6 ++ ui-v2/package.json | 1 + .../integration/components/tooltip-test.js | 25 ++++++++ ui-v2/yarn.lock | 64 ++++++++++++++++++- 10 files changed, 133 insertions(+), 3 deletions(-) create mode 100644 ui-v2/app/components/tooltip/index.hbs create mode 100644 ui-v2/app/components/tooltip/index.js create mode 100644 ui-v2/tests/integration/components/tooltip-test.js diff --git a/ui-v2/app/components/tooltip/index.hbs b/ui-v2/app/components/tooltip/index.hbs new file mode 100644 index 0000000000..6292eac5a6 --- /dev/null +++ b/ui-v2/app/components/tooltip/index.hbs @@ -0,0 +1,3 @@ + + {{yield}} + \ No newline at end of file diff --git a/ui-v2/app/components/tooltip/index.js b/ui-v2/app/components/tooltip/index.js new file mode 100644 index 0000000000..4798652642 --- /dev/null +++ b/ui-v2/app/components/tooltip/index.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: '', +}); diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss index 8c7b0d0e7e..8b66248397 100644 --- a/ui-v2/app/styles/base/components/tooltip/layout.scss +++ b/ui-v2/app/styles/base/components/tooltip/layout.scss @@ -50,3 +50,8 @@ %tooltip-bottom::after { bottom: -12px; } + +// Ember Tooltips +.ember-tooltip { + padding: 12px; +} diff --git a/ui-v2/app/styles/base/components/tooltip/skin.scss b/ui-v2/app/styles/base/components/tooltip/skin.scss index 148ab5a523..d9ff4374d6 100644 --- a/ui-v2/app/styles/base/components/tooltip/skin.scss +++ b/ui-v2/app/styles/base/components/tooltip/skin.scss @@ -24,6 +24,15 @@ border-bottom-width: 18px; } %tooltip-bubble { - border-radius: $decor-radius-200; + border-radius: $decor-radius-100; box-shadow: $decor-elevation-400; } + +// Ember Tooltips +.ember-tooltip { + background-color: $gray-700; + border-radius: $decor-radius-100; +} +.ember-tooltip[x-placement^='top'] .ember-tooltip-arrow { + border-top-color: $gray-700; +} diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index bdce4fbd5c..5db9b42e7d 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -130,3 +130,8 @@ pre code, font-size: 16px !important; } } + +//Ember Tooltip +.ember-tooltip { + font-size: $typo-size-800; +} diff --git a/ui-v2/app/templates/dc/services/instance/proxy.hbs b/ui-v2/app/templates/dc/services/instance/proxy.hbs index 98d1644100..47bba0d070 100644 --- a/ui-v2/app/templates/dc/services/instance/proxy.hbs +++ b/ui-v2/app/templates/dc/services/instance/proxy.hbs @@ -8,7 +8,7 @@ {{/if}} {{#if (gt proxy.Proxy.Upstreams.length 0)}}
-

Upstreams

+

Upstreams

diff --git a/ui-v2/package.json b/ui-v2/package.json index 22289a6c47..cc0c26cf38 100644 --- a/ui-v2/package.json +++ b/ui-v2/package.json @@ -106,6 +106,7 @@ "ember-sinon-qunit": "4.0.1", "ember-source": "~3.16.0", "ember-test-selectors": "^4.0.0", + "ember-tooltips": "^3.4.3", "ember-truth-helpers": "^2.0.0", "eslint-plugin-ember": "^7.7.2", "eslint-plugin-node": "^11.0.0", diff --git a/ui-v2/tests/integration/components/tooltip-test.js b/ui-v2/tests/integration/components/tooltip-test.js new file mode 100644 index 0000000000..05dff14318 --- /dev/null +++ b/ui-v2/tests/integration/components/tooltip-test.js @@ -0,0 +1,25 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | tooltip', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + + + `); + + assert.equal(this.element.textContent.trim(), ''); + }); +}); diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock index fe780fc5fa..35170d6efc 100644 --- a/ui-v2/yarn.lock +++ b/ui-v2/yarn.lock @@ -3306,7 +3306,7 @@ broccoli-output-wrapper@^3.1.1: heimdalljs-logger "^0.1.10" symlink-or-copy "^1.2.0" -broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3: +broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3: version "1.4.6" resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615" integrity sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw== @@ -3456,6 +3456,11 @@ broccoli-source@^1.1.0: resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-1.1.0.tgz#54f0e82c8b73f46580cbbc4f578f0b32fca8f809" integrity sha1-VPDoLItz9GWAy7xPV48LMvyo+Ak= +broccoli-source@^2.0.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-2.1.2.tgz#e9ae834f143b607e9ec114ade66731500c38b90b" + integrity sha512-1lLayO4wfS0c0Sj50VfHJXNWf94FYY0WUhxj0R77thbs6uWI7USiOWFqQV5dRmhAJnoKaGN4WyLGQbgjgiYFwQ== + broccoli-source@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-3.0.0.tgz#c7c9ba24505941b72a0244568285bc859f69dfbd" @@ -3494,6 +3499,14 @@ broccoli-stew@^3.0.0: symlink-or-copy "^1.2.0" walk-sync "^1.1.3" +broccoli-string-replace@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/broccoli-string-replace/-/broccoli-string-replace-0.1.2.tgz#1ed92f85680af8d503023925e754e4e33676b91f" + integrity sha1-HtkvhWgK+NUDAjkl51Tk4zZ2uR8= + dependencies: + broccoli-persistent-filter "^1.1.5" + minimatch "^3.0.3" + broccoli-templater@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/broccoli-templater/-/broccoli-templater-2.0.2.tgz#285a892071c0b3ad5ebc275d9e8b3465e2d120d6" @@ -5216,6 +5229,26 @@ ember-cli-htmlbars@^4.0.5, ember-cli-htmlbars@^4.0.8, ember-cli-htmlbars@^4.2.2: strip-bom "^4.0.0" walk-sync "^2.0.2" +ember-cli-htmlbars@^4.2.0: + version "4.3.1" + resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.3.1.tgz#4af8adc21ab3c4953f768956b7f7d207782cb175" + integrity sha512-CW6AY/yzjeVqoRtItOKj3hcYzc5dWPRETmeCzr2Iqjt5vxiVtpl0z5VTqHqIlT5fsFx6sGWBQXNHIe+ivYsxXQ== + dependencies: + "@ember/edition-utils" "^1.2.0" + babel-plugin-htmlbars-inline-precompile "^3.0.1" + broccoli-debug "^0.6.5" + broccoli-persistent-filter "^2.3.1" + broccoli-plugin "^3.1.0" + common-tags "^1.8.0" + ember-cli-babel-plugin-helpers "^1.1.0" + fs-tree-diff "^2.0.1" + hash-for-dep "^1.5.1" + heimdalljs-logger "^0.1.10" + json-stable-stringify "^1.0.1" + semver "^6.3.0" + strip-bom "^4.0.0" + walk-sync "^2.0.2" + ember-cli-inject-live-reload@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/ember-cli-inject-live-reload/-/ember-cli-inject-live-reload-2.0.2.tgz#95edb543b386239d35959e5ea9579f5382976ac7" @@ -5941,6 +5974,23 @@ ember-text-measurer@^0.5.0: dependencies: ember-cli-babel "^7.1.0" +ember-tooltips@^3.4.3: + version "3.4.3" + resolved "https://registry.yarnpkg.com/ember-tooltips/-/ember-tooltips-3.4.3.tgz#a017de33e53a9b9ca6d38b8c2f829cc3024b8f8b" + integrity sha512-/swhfhodVvpKi6R+tkcqLgS0YTMo3S6Mzb8qtfTneFSz+tBhY/kd/+eI8OIZf9qocpJ9b54dbbqTw5ZBkeZe2g== + dependencies: + broccoli-file-creator "^2.1.1" + broccoli-funnel "^2.0.2" + broccoli-merge-trees "^2.0.0" + broccoli-source "^2.0.0" + broccoli-string-replace "^0.1.2" + ember-cli-babel "^7.13.0" + ember-cli-htmlbars "^4.2.0" + ember-maybe-in-element "^0.4.0" + popper.js "^1.12.5" + resolve "^1.10.1" + tooltip.js "^1.1.5" + ember-truth-helpers@2.1.0, ember-truth-helpers@^2.0.0, ember-truth-helpers@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ember-truth-helpers/-/ember-truth-helpers-2.1.0.tgz#d4dab4eee7945aa2388126485977baeb33ca0798" @@ -10356,6 +10406,11 @@ pn@^1.1.0: resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA== +popper.js@^1.0.2, popper.js@^1.12.5: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + portfinder@^1.0.25: version "1.0.25" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca" @@ -12420,6 +12475,13 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== +tooltip.js@^1.1.5: + version "1.3.3" + resolved "https://registry.yarnpkg.com/tooltip.js/-/tooltip.js-1.3.3.tgz#2ad0d77bb6776a76e117eac0afcd3c7d3a237121" + integrity sha512-XWWuy/dBdF/F/YpRE955yqBZ4VdLfiTAUdOqoU+wJm6phJlMpEzl/iYHZ+qJswbeT9VG822bNfsETF9wzmoy5A== + dependencies: + popper.js "^1.0.2" + torii@^0.10.1: version "0.10.1" resolved "https://registry.yarnpkg.com/torii/-/torii-0.10.1.tgz#caad0a81e82189fc0483b65e68ee28041ad3590f"