From f6f282ac775dc0340a15e4b6a6caf074657234aa Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 22 Apr 2021 12:16:56 +0100 Subject: [PATCH] ui: Add information regarding Host header for ingress gateways (#10050) * Add inline-code CSS component * Add %inline-code to all the places where we need it * Inject selected env variables into the translations file * Add ingress gateway upstream 'host header' intro text * Make sure we can use actual correct component casing for titles but still have nice consistent menu item casing in the side nav --- .../app/components/inline-code/README.mdx | 22 ++++++++++++ .../app/components/inline-code/index.scss | 2 ++ .../app/components/inline-code/layout.scss | 4 +++ .../app/components/inline-code/skin.scss | 6 ++++ .../app/instance-initializers/i18n.js | 35 +++++++++++++++++++ .../base/components/form-elements/index.scss | 6 ++++ .../base/components/form-elements/layout.scss | 6 ---- .../base/components/form-elements/skin.scss | 10 ------ .../consul-ui/app/styles/components.scss | 1 + .../consul-ui/app/styles/typography.scss | 3 ++ .../templates/dc/services/show/upstreams.hbs | 9 ++--- ui/packages/consul-ui/app/templates/debug.hbs | 4 +-- ui/packages/consul-ui/ember-cli-build.js | 2 +- ui/packages/consul-ui/translations/en-us.yaml | 10 ++++++ 14 files changed, 97 insertions(+), 23 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/inline-code/README.mdx create mode 100644 ui/packages/consul-ui/app/components/inline-code/index.scss create mode 100644 ui/packages/consul-ui/app/components/inline-code/layout.scss create mode 100644 ui/packages/consul-ui/app/components/inline-code/skin.scss create mode 100644 ui/packages/consul-ui/app/instance-initializers/i18n.js diff --git a/ui/packages/consul-ui/app/components/inline-code/README.mdx b/ui/packages/consul-ui/app/components/inline-code/README.mdx new file mode 100644 index 0000000000..20761809e9 --- /dev/null +++ b/ui/packages/consul-ui/app/components/inline-code/README.mdx @@ -0,0 +1,22 @@ +--- +class: css +--- +# inline-code + +All `p code` within `main` and any `ModalLayer`s default to use the following +inline code CSS component. + +```hbs preview-template +

+ This is so we can highlight code inline in paragraphs and such-like. +

+``` + +It can also be added to any additional elements using the following +placeholder. + +```css +p code { + @extend %inline-code; +} +``` diff --git a/ui/packages/consul-ui/app/components/inline-code/index.scss b/ui/packages/consul-ui/app/components/inline-code/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui/packages/consul-ui/app/components/inline-code/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui/packages/consul-ui/app/components/inline-code/layout.scss b/ui/packages/consul-ui/app/components/inline-code/layout.scss new file mode 100644 index 0000000000..e23fbfe00d --- /dev/null +++ b/ui/packages/consul-ui/app/components/inline-code/layout.scss @@ -0,0 +1,4 @@ +%inline-code { + display: inline-block; + padding: 0 4px; +} diff --git a/ui/packages/consul-ui/app/components/inline-code/skin.scss b/ui/packages/consul-ui/app/components/inline-code/skin.scss new file mode 100644 index 0000000000..c1a0cfd407 --- /dev/null +++ b/ui/packages/consul-ui/app/components/inline-code/skin.scss @@ -0,0 +1,6 @@ +%inline-code { + border: 1px solid; + color: var(--brand-600, inherit); + background-color: var(--gray-050); + border-color: var(--gray-200); +} diff --git a/ui/packages/consul-ui/app/instance-initializers/i18n.js b/ui/packages/consul-ui/app/instance-initializers/i18n.js new file mode 100644 index 0000000000..1019a39a2e --- /dev/null +++ b/ui/packages/consul-ui/app/instance-initializers/i18n.js @@ -0,0 +1,35 @@ +import IntlService from 'ember-intl/services/intl'; +import { inject as service } from '@ember/service'; + +class I18nService extends IntlService { + @service('env') env; + /** + * Additionally injects selected project level environment variables into the + * message formatting context for usage within translated texts + */ + formatMessage(value, formatOptions) { + const env = [ + 'CONSUL_HOME_URL', + 'CONSUL_REPO_ISSUES_URL', + 'CONSUL_DOCS_URL', + 'CONSUL_DOCS_LEARN_URL', + 'CONSUL_DOCS_API_URL', + 'CONSUL_COPYRIGHT_URL', + ].reduce((prev, key) => { + prev[key] = this.env.var(key); + return prev; + }, {}); + + formatOptions = { + ...formatOptions, + ...env, + }; + return super.formatMessage(value, formatOptions); + } +} +export default { + name: 'i18n', + initialize: function(container) { + container.register('service:intl', I18nService); + }, +}; diff --git a/ui/packages/consul-ui/app/styles/base/components/form-elements/index.scss b/ui/packages/consul-ui/app/styles/base/components/form-elements/index.scss index b09c430464..194322de6b 100644 --- a/ui/packages/consul-ui/app/styles/base/components/form-elements/index.scss +++ b/ui/packages/consul-ui/app/styles/base/components/form-elements/index.scss @@ -1,5 +1,8 @@ @import './skin'; @import './layout'; +%form h2 { + @extend %h200; +} /* TODO: This is positioning the element */ /* probably should be in a special %form class*/ %form-element { @@ -12,6 +15,9 @@ %form-element > em { @extend %form-element-note; } +%form-element-note > code { + @extend %inline-code; +} %form-element-error > strong { @extend %inline-alert-error; } diff --git a/ui/packages/consul-ui/app/styles/base/components/form-elements/layout.scss b/ui/packages/consul-ui/app/styles/base/components/form-elements/layout.scss index cb5252d03d..dbc3e374e3 100644 --- a/ui/packages/consul-ui/app/styles/base/components/form-elements/layout.scss +++ b/ui/packages/consul-ui/app/styles/base/components/form-elements/layout.scss @@ -7,9 +7,6 @@ %form-element a { display: inline; } -%form-element-note > code { - display: inline-block; -} %form-element [type='text'], %form-element [type='password'] { display: inline-flex; @@ -51,6 +48,3 @@ margin-top: -0.5em; margin-bottom: 0.5em; } -%form-element-note > code { - padding: 0 4px; -} diff --git a/ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss b/ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss index 8d552193f1..32cf2916be 100644 --- a/ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss +++ b/ui/packages/consul-ui/app/styles/base/components/form-elements/skin.scss @@ -11,17 +11,11 @@ textarea:disabled + .CodeMirror, %form-element-text-input:read-only { cursor: not-allowed; } -%form h2 { - @extend %h200; -} %form fieldset > p, %form-element-note, %form-element-text-input::placeholder { color: $gray-400; } -%form-element-note > code { - border-radius: $decor-radius-100; -} %form-element-error > input, %form-element-error > textarea { border-color: var(--decor-error-500, $red-500) !important; @@ -39,7 +33,3 @@ textarea:disabled + .CodeMirror, %form-element-label { color: var(--typo-contrast-999, inherit); } -%form-element-note > code { - background-color: $gray-200; - color: var(--typo-brand-600, inherit); -} diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index 8436a0be40..5ac8ac29c8 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -55,6 +55,7 @@ /**/ @import 'consul-ui/components/menu-panel'; +@import 'consul-ui/components/inline-code'; @import 'consul-ui/components/overlay'; @import 'consul-ui/components/tooltip'; @import 'consul-ui/components/notice'; diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss index d495ded5e0..3bacf5e4c3 100644 --- a/ui/packages/consul-ui/app/styles/typography.scss +++ b/ui/packages/consul-ui/app/styles/typography.scss @@ -50,6 +50,9 @@ pre code, %form-element-error > strong { @extend %p3; } +%main-content p code { + @extend %inline-code; +} %radio-group label { line-height: $typo-lead-200; diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs index 0288ce4699..b91768437e 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs @@ -38,10 +38,11 @@ as |route|> @filter={{filters}} /> - {{/if}} -

- Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our documentation. -

+ {{/if}} + {{t + "routes.dc.services.show.upstreams.intro" + htmlSafe=true + }} - {{child.title}} + {{classify child.title}} {{/each}} @@ -28,7 +28,7 @@ }} > - {{child.title}} + {{classify child.title}} {{/each}} diff --git a/ui/packages/consul-ui/ember-cli-build.js b/ui/packages/consul-ui/ember-cli-build.js index ac1022bc55..35572820cb 100644 --- a/ui/packages/consul-ui/ember-cli-build.js +++ b/ui/packages/consul-ui/ember-cli-build.js @@ -48,7 +48,7 @@ module.exports = function(defaults) { includePolyfill: true, }, 'ember-cli-string-helpers': { - only: ['capitalize', 'lowercase', 'truncate', 'uppercase', 'humanize', 'titleize'], + only: ['capitalize', 'lowercase', 'truncate', 'uppercase', 'humanize', 'titleize', 'classify'], }, 'ember-cli-math-helpers': { only: ['div'], diff --git a/ui/packages/consul-ui/translations/en-us.yaml b/ui/packages/consul-ui/translations/en-us.yaml index 021539dc91..9c1aa40b47 100644 --- a/ui/packages/consul-ui/translations/en-us.yaml +++ b/ui/packages/consul-ui/translations/en-us.yaml @@ -63,6 +63,16 @@ common: asc: Unhealthy to Healthy desc: Healthy to Unhealthy +routes: + dc: + services: + show: + upstreams: + intro: | +

+ Upstreams are services that may receive traffic from this gateway. If you are not using Consul DNS, please make sure your Host: header uses the correct domain name for the gateway to correctly proxy to its upstreams. Learn more about configuring gateways in our documentation. +

+ components: app: skip_to_content: Skip to Content