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
pull/10102/head
John Cowen 2021-04-22 12:16:56 +01:00 committed by hashicorp-ci
parent 2ae163e467
commit d6667880d4
14 changed files with 97 additions and 23 deletions

View File

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

View File

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

View File

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

View File

@ -0,0 +1,6 @@
%inline-code {
border: 1px solid;
color: var(--brand-600, inherit);
background-color: var(--gray-050);
border-color: var(--gray-200);
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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