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

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
+<p>
+  This is so we can highlight code <code>inline</code> in paragraphs and such-like.
+</p>
+```
+
+It can also be added to any additional elements using the following
+placeholder.
+
+```css
+p code {
+  @extend %inline-code;
+}
+```

ui/packages/consul-ui/app/components/inline-code/index.scss

@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';

ui/packages/consul-ui/app/components/inline-code/layout.scss

@@ -0,0 +1,4 @@
+%inline-code {
+  display: inline-block;
+  padding: 0 4px;
+}

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);
+}

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);
+  },
+};

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;
 }

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;
-}

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);
-}

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';

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;

ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs

@@ -38,10 +38,11 @@ as |route|>
 
         @filter={{filters}}
         />
-  {{/if}}
-        <p>
-          Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our <a href="{{env 'CONSUL_DOCS_URL'}}/connect/ingress-gateway" target="_blank" rel="noopener noreferrer">documentation</a>.
-        </p>
+      {{/if}}
+        {{t
+          "routes.dc.services.show.upstreams.intro"
+          htmlSafe=true
+        }}
         <DataCollection
           @type="service"
           @sort={{sort.value}}

ui/packages/consul-ui/app/templates/debug.hbs

@@ -13,7 +13,7 @@
             class={{if (is-href (to-route child.url)) 'is-active'}}
           >
             <DocfyLink @to={{child.url}}>
-              {{child.title}}
+              {{classify child.title}}
             </DocfyLink>
           </li>
   {{/each}}
@@ -28,7 +28,7 @@
             }}
           >
             <DocfyLink @to={{child.url}}>
-              {{child.title}}
+              {{classify child.title}}
             </DocfyLink>
           </li>
     {{/each}}

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'],

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: |
+            <p>
+              Upstreams are services that may receive traffic from this gateway. If you are not using Consul DNS, please make sure your <code>Host:</code> header uses the correct domain name for the gateway to correctly proxy to its upstreams. Learn more about configuring gateways in our <a href="{CONSUL_DOCS_URL}/connect/ingress-gateways" target="_blank" rel="noopener noreferrer">documentation</a>.
+            </p>
+
 components:
   app:
     skip_to_content: Skip to Content