From b6915793d0c8ca31cecf6dbc6f9d6411558b94ae Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 11 Feb 2020 10:04:49 +0000 Subject: [PATCH] ui: Remove custom css-vars 'polyfill' and use native CSS props (#7249) * ui: Remove custom css-vars 'polyfill' and use native CSS props Previously we used a sort of polyfill for certain places where we needed CSS property-like behavior. This meant duplicating code between JS and CSS, specifically some of our SVG icons. We moved to CSS props only in the places where they are beneficial and populated the variables with our already existing SASS variables. This means we no longer have to duplicate CSS and we can remove our custom css-var helper/polyfill. --- ui-v2/app/helpers/css-var.js | 19 --------------- ui-v2/app/helpers/service/external-source.js | 2 +- .../app/styles/base/icons/base-variables.scss | 1 + .../app/styles/components/app-view/skin.scss | 6 +++++ ui-v2/app/styles/variables/index.scss | 11 +++++++++ .../templates/components/discovery-chain.hbs | 8 +++---- ui-v2/app/templates/dc/nodes/-services.hbs | 8 ++++++- .../app/templates/dc/services/-instances.hbs | 14 +++++++---- ui-v2/app/templates/dc/services/index.hbs | 8 ++++++- ui-v2/app/templates/dc/services/instance.hbs | 10 ++++---- ui-v2/app/templates/dc/services/show.hbs | 12 ++++------ .../tests/integration/helpers/css-var-test.js | 24 ------------------- 12 files changed, 56 insertions(+), 67 deletions(-) delete mode 100644 ui-v2/app/helpers/css-var.js delete mode 100644 ui-v2/tests/integration/helpers/css-var-test.js diff --git a/ui-v2/app/helpers/css-var.js b/ui-v2/app/helpers/css-var.js deleted file mode 100644 index 480abba38f..0000000000 --- a/ui-v2/app/helpers/css-var.js +++ /dev/null @@ -1,19 +0,0 @@ -import { helper } from '@ember/component/helper'; -// TODO: Look at ember-inline-svg -const cssVars = { - '--decor-border-100': '1px solid', - '--decor-border-200': '2px solid', - '--decor-radius-300': '3px', - '--white': '#FFF', - '--gray-500': '#6f7682', - '--kubernetes-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--terraform-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--nomad-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--consul-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, - '--aws-color-svg': `url('data:image/svg+xml;charset=UTF-8,')`, -}; -export function cssVar(params, hash) { - return typeof cssVars[params[0]] !== 'undefined' ? cssVars[params[0]] : params[1]; -} - -export default helper(cssVar); diff --git a/ui-v2/app/helpers/service/external-source.js b/ui-v2/app/helpers/service/external-source.js index 32cc4f3dd0..44d8107c88 100644 --- a/ui-v2/app/helpers/service/external-source.js +++ b/ui-v2/app/helpers/service/external-source.js @@ -7,7 +7,7 @@ export function serviceExternalSource(params, hash) { source = get(params[0], 'Meta.external-source'); } const prefix = typeof hash.prefix === 'undefined' ? '' : hash.prefix; - if (source) { + if (source && ['kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(source)) { return `${prefix}${source}`; } return; diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index 400fefb7e9..f4666044f7 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -7,6 +7,7 @@ $arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$aws-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/components/app-view/skin.scss b/ui-v2/app/styles/components/app-view/skin.scss index 511d08cf13..e8ba60393a 100644 --- a/ui-v2/app/styles/components/app-view/skin.scss +++ b/ui-v2/app/styles/components/app-view/skin.scss @@ -4,6 +4,12 @@ background-size: contain; width: 18px; height: 18px; + + --kubernetes-icon: #{$kubernetes-logo-color-svg}; + --terraform-icon: #{$terraform-logo-color-svg}; + --nomad-icon: #{$nomad-logo-color-svg}; + --consul-icon: #{$consul-logo-color-svg}; + --aws-icon: #{$aws-logo-color-svg}; } %app-view h2, %app-view fieldset { diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss index a06fe64e82..eb90ae130c 100644 --- a/ui-v2/app/styles/variables/index.scss +++ b/ui-v2/app/styles/variables/index.scss @@ -1,4 +1,15 @@ @import './custom-query'; + +// TODO: Setup only the CSS props we actually need here +// potentially see if our compiled can automatically remove +// unused CSS props +:root { + --white: #{$white}; + --decor-border-100: #{$decor-border-100}; + --decor-radius-300: #{$decor-radius-300}; + --gray-500: #{$gray-500}; +} + $gray: $gray-200; $gray-025: #fafbfc; diff --git a/ui-v2/app/templates/components/discovery-chain.hbs b/ui-v2/app/templates/components/discovery-chain.hbs index 9a8f4f3597..4d4682b46b 100644 --- a/ui-v2/app/templates/components/discovery-chain.hbs +++ b/ui-v2/app/templates/components/discovery-chain.hbs @@ -4,10 +4,10 @@ {{selected.nodes}} { opacity: 1 !important; - background-color: {{css-var '--white'}}; - border: {{css-var '--decor-border-100'}}; - border-radius: {{css-var '--decor-radius-300'}}; - border-color: {{css-var '--gray-500'}}; + background-color: var(--white); + border: var(--decor-border-100); + border-radius: var(--decor-radius-300); + border-color: var(--gray-500); box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); } {{/if}} diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs index f53bb7fc97..11d67c765a 100644 --- a/ui-v2/app/templates/dc/nodes/-services.hbs +++ b/ui-v2/app/templates/dc/nodes/-services.hbs @@ -18,7 +18,13 @@ {{#block-slot name='row'}} - + {{#let (service/external-source item) as |externalSource| }} + {{#if externalSource }} + + {{else}} + + {{/if}} + {{/let}} {{item.Service}}{{#if (not-eq item.ID item.Service) }} ({{item.ID}}){{/if}} diff --git a/ui-v2/app/templates/dc/services/-instances.hbs b/ui-v2/app/templates/dc/services/-instances.hbs index d0ca30a9a3..83faba5570 100644 --- a/ui-v2/app/templates/dc/services/-instances.hbs +++ b/ui-v2/app/templates/dc/services/-instances.hbs @@ -18,10 +18,16 @@ Service Checks {{/block-slot}} {{#block-slot name='row'}} - - - - {{ or item.Service.ID item.Service.Service }} + + + {{#let (service/external-source item.Service) as |externalSource| }} + {{#if externalSource }} + + {{else}} + + {{/if}} + {{/let}} + {{or item.Service.ID item.Service.Service}} diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 1484086167..348b6cd00d 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -35,7 +35,13 @@ {{#block-slot name='row'}} - + {{#let (service/external-source item) as |externalSource| }} + {{#if externalSource }} + + {{else}} + + {{/if}} + {{/let}} {{item.Name}} diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs index aad4f7b2cd..f80daa8391 100644 --- a/ui-v2/app/templates/dc/services/instance.hbs +++ b/ui-v2/app/templates/dc/services/instance.hbs @@ -13,13 +13,11 @@ {{#block-slot name='header'}}

{{ item.ID }} -{{#with (service/external-source item) as |externalSource| }} - {{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg| }} - {{#if (not-eq bg 'none') }} - Registered via {{externalSource}} +{{#let (service/external-source item) as |externalSource| }} + {{#if externalSource }} + Registered via {{externalSource}} {{/if}} - {{/with}} -{{/with}} +{{/let}} {{#if (eq item.Kind 'connect-proxy')}} Proxy {{else if (eq item.Kind 'mesh-gateway')}} diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index 846c56f783..f1b1324e40 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -11,13 +11,11 @@ {{#block-slot name='header'}}

{{item.Service.Service}} -{{#with (service/external-source item.Service) as |externalSource|}} -{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}} - {{#if (not-eq bg 'none')}} - Registered via {{externalSource}} - {{/if}} -{{/with}} -{{/with}} +{{#let (service/external-source item.Service) as |externalSource| }} + {{#if externalSource }} + Registered via {{externalSource}} + {{/if}} +{{/let}} {{#if (eq item.Service.Kind 'connect-proxy')}} Proxy {{else if (eq item.Service.Kind 'mesh-gateway')}} diff --git a/ui-v2/tests/integration/helpers/css-var-test.js b/ui-v2/tests/integration/helpers/css-var-test.js deleted file mode 100644 index 12b4f1f91e..0000000000 --- a/ui-v2/tests/integration/helpers/css-var-test.js +++ /dev/null @@ -1,24 +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('helper:css-var', function(hooks) { - setupRenderingTest(hooks); - - // Replace this with your real tests. - test("it renders nothing if the variable doesn't exist", async function(assert) { - this.set('inputValue', '1234'); - - await render(hbs`{{css-var inputValue}}`); - - assert.dom('*').hasText(''); - }); - test("it renders a default if the variable doesn't exist", async function(assert) { - this.set('inputValue', '1234'); - - await render(hbs`{{css-var inputValue 'none'}}`); - - assert.dom('*').hasText('none'); - }); -});