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