UI: Update <a> tags to LinkTo's (#17866)
* chore: shared external link component, glimmerization * chore: update easy a tags * chore: update other a tags * chore: lil cleanup * changelog
This commit is contained in:
Chelsea Shaw
GitHub
parent
1bae5eed3e
commit
0589dc1f53
|
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: consolidate all <a> tag usage
|
||||
```
|
||||
|
|
@ -310,7 +310,7 @@
|
|||
<Chevron @direction="left" />
|
||||
Go back
|
||||
</LinkTo>
|
||||
<a href="https://www.vaultproject.io/api/secret/databases" target="_blank" rel="noreferrer noopener">Documentation</a>
|
||||
<DocLink @path="/api/secret/databases">Documentation</DocLink>
|
||||
</EmptyState>
|
||||
{{else}}
|
||||
{{#each @model.showAttrs as |attr|}}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,9 @@
|
|||
}}. Add a new license to your configuration and restart Vault."
|
||||
@marginless={{true}}
|
||||
>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
|
||||
Read documentation
|
||||
</a>
|
||||
</LearnLink>
|
||||
</AlertBanner>
|
||||
</div>
|
||||
{{else if (lte this.licenseExpiringInDays 30)}}
|
||||
|
|
@ -35,13 +31,9 @@
|
|||
}}"
|
||||
@marginless={{true}}
|
||||
>
|
||||
<a
|
||||
href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
|
||||
Read documentation
|
||||
</a>
|
||||
</LearnLink>
|
||||
</AlertBanner>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -4,9 +4,9 @@
|
|||
<p data-test-link-status>
|
||||
{{#if (eq this.state "connected")}}
|
||||
This self-managed Vault is linked to
|
||||
<a href="https://portal.cloud.hashicorp.com/sign-in" target="_blank" rel="noopener noreferrer">
|
||||
<ExternalLink @href="https://portal.cloud.hashicorp.com/sign-in">
|
||||
HCP.
|
||||
</a>
|
||||
</ExternalLink>
|
||||
{{else}}
|
||||
There was an error connecting to HCP. Click
|
||||
<button type="button" class="text-button is-underline" {{on "click" (fn (mut this.showModal))}}>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
<a href={{this.namespaceLink}} class={{concat "is-block " this.class}} data-test-namespace-link={{this.normalizedNamespace}}>
|
||||
<ExternalLink
|
||||
@href={{this.namespaceLink}}
|
||||
@sameTab={{true}}
|
||||
class={{concat "is-block " this.class}}
|
||||
data-test-namespace-link={{this.normalizedNamespace}}
|
||||
>
|
||||
{{#if (has-block)}}
|
||||
{{yield}}
|
||||
{{else}}
|
||||
|
|
@ -9,4 +14,4 @@
|
|||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
</ExternalLink>
|
||||
|
|
@ -208,9 +208,9 @@
|
|||
</p>
|
||||
{{#each this.downloadHrefs as |dl|}}
|
||||
<div class="box is-shadowless is-marginless is-fullwidth has-slim-padding">
|
||||
<a data-test-ca-download-link href={{dl.url}} download={{dl.name}}>
|
||||
<ExternalLink @href={{dl.url}} @sameTab={{true}} download={{dl.name}} data-test-ca-download-link>
|
||||
{{dl.display}}
|
||||
</a>
|
||||
</ExternalLink>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,12 +21,13 @@
|
|||
<ul class="menu-list">
|
||||
<li class="action">
|
||||
{{#if this.useServiceWorker}}
|
||||
<a
|
||||
href="/v1/sys/storage/raft/snapshot"
|
||||
<ExternalLink
|
||||
@href="/v1/sys/storage/raft/snapshot"
|
||||
@sameTab={{true}}
|
||||
onclick={{queue (action "downloadViaServiceWorker") (action D.actions.close)}}
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</ExternalLink>
|
||||
{{else}}
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -12,13 +12,9 @@
|
|||
<p>
|
||||
Using your template's regex as a starting point, you can specify which parts of your input to encode and decode. For
|
||||
example, you may want to handle input formatting or only decode part of an input. For more information, see
|
||||
<a
|
||||
href="https://learn.hashicorp.com/tutorials/vault/transform#advanced-handling"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<LearnLink @path="/tutorials/vault/transform#advanced-handling">
|
||||
our documentation.
|
||||
</a>
|
||||
</LearnLink>
|
||||
</p>
|
||||
<div class="has-top-margin-l">
|
||||
<RegexValidator
|
||||
|
|
|
|||
|
|
@ -7,22 +7,22 @@
|
|||
HashiCorp
|
||||
</span>
|
||||
<span>
|
||||
<a href={{changelog-url-for this.activeCluster.leaderNode.version}} class="link has-text-grey">
|
||||
<ExternalLink @href={{changelog-url-for this.activeCluster.leaderNode.version}} class="link has-text-grey">
|
||||
Vault
|
||||
{{this.activeCluster.leaderNode.version}}
|
||||
</a>
|
||||
</ExternalLink>
|
||||
</span>
|
||||
{{#if (is-version "OSS")}}
|
||||
<span>
|
||||
<a href="https://hashicorp.com/products/vault/trial?source=vaultui" class="link has-text-grey">
|
||||
<ExternalLink @href="https://hashicorp.com/products/vault/trial?source=vaultui" class="link has-text-grey">
|
||||
Upgrade to Vault Enterprise
|
||||
</a>
|
||||
</ExternalLink>
|
||||
</span>
|
||||
{{/if}}
|
||||
<span>
|
||||
<a class="has-text-grey" target="_blank" rel="noreferrer noopener" href="https://www.vaultproject.io/docs/index.html">
|
||||
<DocLink @path="/docs/index.html" class="has-text-grey">
|
||||
Documentation
|
||||
</a>
|
||||
</DocLink>
|
||||
</span>
|
||||
</footer>
|
||||
{{#if (eq this.env "development")}}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,9 @@
|
|||
@message="Your Vault license has terminated and Vault is sealed. To unseal, add a current license to your configuration and restart Vault."
|
||||
>
|
||||
<p class="align-right">
|
||||
<a
|
||||
href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
|
||||
License documentation
|
||||
</a>
|
||||
</LearnLink>
|
||||
</p>
|
||||
</EmptyState>
|
||||
</div>
|
||||
|
|
@ -67,9 +63,9 @@
|
|||
<Page.footer>
|
||||
<div class="box is-borderless is-shadowless">
|
||||
<p>
|
||||
<a target="_blank" rel="noreferrer noopener" href="https://www.vaultproject.io/docs/concepts/seal">
|
||||
<ExternalLink @href="https://www.vaultproject.io/docs/concepts/seal">
|
||||
Seal/unseal documentation
|
||||
</a>
|
||||
</ExternalLink>
|
||||
</p>
|
||||
</div>
|
||||
</Page.footer>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
import Component from '@ember/component';
|
||||
import { computed } from '@ember/object';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import ExternalLink from './external-link';
|
||||
|
||||
/**
|
||||
* @module DocLink
|
||||
* `DocLink` components are used to render anchor links to relevant Vault documentation.
|
||||
* `DocLink` components are used to render anchor links to relevant Vault documentation at vaultproject.io.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
|
|
@ -14,20 +12,10 @@ import hbs from 'htmlbars-inline-precompile';
|
|||
* @param path="/"{String} - The path to documentation on vaultproject.io that the component should link to.
|
||||
*
|
||||
*/
|
||||
export default class DocLinkComponent extends ExternalLink {
|
||||
host = 'https://www.vaultproject.io';
|
||||
|
||||
export default Component.extend({
|
||||
tagName: 'a',
|
||||
classNames: ['doc-link'],
|
||||
attributeBindings: ['target', 'rel', 'href'],
|
||||
|
||||
layout: hbs`{{yield}}`,
|
||||
|
||||
target: '_blank',
|
||||
rel: 'noreferrer noopener',
|
||||
host: 'https://www.vaultproject.io',
|
||||
|
||||
path: '/',
|
||||
href: computed('host', 'path', function () {
|
||||
return `${this.host}${this.path}`;
|
||||
}),
|
||||
});
|
||||
get href() {
|
||||
return `${this.host}${this.args.path}`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
{{#if @sameTab}}
|
||||
<a href={{this.href}} ...attributes>
|
||||
{{yield}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a href={{this.href}} target="_blank" rel="noopener noreferrer" class="doc-link" ...attributes>
|
||||
{{yield}}
|
||||
</a>
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import Component from '@glimmer/component';
|
||||
|
||||
/**
|
||||
* @module ExternalLinkComponent
|
||||
* `ExternalLink` components are used to render anchor links to non-cluster links. Automatically opens in a new tab with noopener noreferrer.
|
||||
* To link to vaultproject.io, use DocLink. To link to learn.hashicorp.com, use LearnLink.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
<ExternalLink @href="https://hashicorp.com">Arbitrary Link</ExternalLink>
|
||||
* ```
|
||||
*
|
||||
* @param href="https://example.com/"{String} - The full href with protocol
|
||||
* @param sameTab=false {Boolean} - by default, these links open in new tab. To override, pass @sameTab={{true}}
|
||||
*
|
||||
*/
|
||||
export default class ExternalLinkComponent extends Component {
|
||||
get href() {
|
||||
return this.args.href;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,22 @@
|
|||
import DocLink from './doc-link';
|
||||
import ExternalLink from './external-link';
|
||||
|
||||
export default DocLink.extend({
|
||||
host: 'https://learn.hashicorp.com',
|
||||
});
|
||||
/**
|
||||
* @module LearnLink
|
||||
* `LearnLink` components are used to render anchor links to relevant Vault learn documentation at learn.hashicorp.com.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
<LearnLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</LearnLink>
|
||||
* ```
|
||||
*
|
||||
* @param path="/"{String} - The path to documentation on learn.hashicorp.com that the component should link to.
|
||||
*
|
||||
*/
|
||||
|
||||
export default class LearnLinkComponent extends ExternalLink {
|
||||
host = 'https://learn.hashicorp.com';
|
||||
|
||||
get href() {
|
||||
return `${this.host}${this.args.path}`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,14 +60,14 @@
|
|||
Performance Replication is a feature of Vault Enterprise Premium.
|
||||
</p>
|
||||
<p class="has-text-centered">
|
||||
<a
|
||||
href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
|
||||
<ExternalLink
|
||||
@href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
|
||||
class="button is-ghost has-icon-right"
|
||||
data-test-upgrade-link="true"
|
||||
data-test-upgrade-link
|
||||
>
|
||||
Learn more
|
||||
<Chevron />
|
||||
</a>
|
||||
</ExternalLink>
|
||||
</p>
|
||||
{{else if this.replicationEnabled}}
|
||||
<h6 class="title is-6 is-uppercase">
|
||||
|
|
|
|||
|
|
@ -85,10 +85,10 @@
|
|||
</div>
|
||||
{{#if (and this.primaryUiUrl this.knownPrimaryClusterAddrs)}}
|
||||
<div class="grid-item-top-right">
|
||||
<a href={{concat this.primaryUiUrl "/ui/"}} class="toolbar-link" data-test-primary-link>
|
||||
<ExternalLink @href={{concat this.primaryUiUrl "/ui/"}} class="toolbar-link" data-test-primary-link>
|
||||
View primary cluster
|
||||
<Icon @name="chevron-right" />
|
||||
</a>
|
||||
</ExternalLink>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="grid-item-second-row">
|
||||
|
|
|
|||
|
|
@ -10,14 +10,12 @@
|
|||
@title="Upgrade to use {{this.featureName}}"
|
||||
@message="You will need {{this.minimumEdition}} with {{this.featureName}} included to use this feature."
|
||||
>
|
||||
<a
|
||||
href="https://www.hashicorp.com/products/vault/enterprise?source=vaultui_{{this.featureName}}"
|
||||
<ExternalLink
|
||||
@href="https://www.hashicorp.com/products/vault/enterprise?source=vaultui_{{this.featureName}}"
|
||||
class="link has-icon-right"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
data-test-upgrade-link="true"
|
||||
data-test-upgrade-link
|
||||
>
|
||||
Vault Enterprise
|
||||
<Chevron />
|
||||
</a>
|
||||
</ExternalLink>
|
||||
</EmptyState>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from 'core/components/external-link';
|
||||
Loading…
Reference in New Issue