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

changelog/17866.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: consolidate all <a> tag usage
+```

ui/app/templates/components/database-connection.hbs

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

ui/app/templates/components/license-banners.hbs

@@ -10,13 +10,9 @@
       }}. Add a new license to your configuration and restart Vault."
       @marginless={{true}}
     >
-      <a
+      <LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
-        href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
         Read documentation
-      </a>
+      </LearnLink>
     </AlertBanner>
   </div>
 {{else if (lte this.licenseExpiringInDays 30)}}
@@ -35,13 +31,9 @@
       }}"
       @marginless={{true}}
     >
-      <a
+      <LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
-        href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
         Read documentation
-      </a>
+      </LearnLink>
     </AlertBanner>
   </div>
 {{/if}}

ui/app/templates/components/link-status.hbs

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

ui/app/templates/components/namespace-link.hbs

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

ui/app/templates/components/pki/config-pki-ca.hbs

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

ui/app/templates/components/raft-storage-overview.hbs

@@ -21,12 +21,13 @@
           <ul class="menu-list">
             <li class="action">
               {{#if this.useServiceWorker}}
-                <a
+                <ExternalLink
-                  href="/v1/sys/storage/raft/snapshot"
+                  @href="/v1/sys/storage/raft/snapshot"
+                  @sameTab={{true}}
                   onclick={{queue (action "downloadViaServiceWorker") (action D.actions.close)}}
                 >
                   Download
-                </a>
+                </ExternalLink>
               {{else}}
                 <button
                   type="button"

ui/app/templates/components/transform-advanced-templating.hbs

@@ -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
+      <LearnLink @path="/tutorials/vault/transform#advanced-handling">
-        href="https://learn.hashicorp.com/tutorials/vault/transform#advanced-handling"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
         our documentation.
-      </a>
+      </LearnLink>
     </p>
     <div class="has-top-margin-l">
       <RegexValidator

ui/app/templates/vault.hbs

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

ui/app/templates/vault/cluster/unseal.hbs

@@ -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
+          <LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
-            href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
             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>

ui/lib/core/addon/components/doc-link.js

@@ -1,10 +1,8 @@
-import Component from '@ember/component';
+import ExternalLink from './external-link';
-import { computed } from '@ember/object';
-import hbs from 'htmlbars-inline-precompile';
 
 /**
  * @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({
+  get href() {
-  tagName: 'a',
+    return `${this.host}${this.args.path}`;
-  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}`;
-  }),
-});

ui/lib/core/addon/components/external-link.hbs

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

ui/lib/core/addon/components/external-link.js

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

ui/lib/core/addon/components/learn-link.js

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

ui/lib/core/addon/templates/components/replication-mode-summary.hbs

@@ -60,14 +60,14 @@
             Performance Replication is a feature of Vault Enterprise Premium.
           </p>
           <p class="has-text-centered">
-            <a
+            <ExternalLink
-              href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
+              @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">

ui/lib/core/addon/templates/components/replication-secondary-card.hbs

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

ui/lib/core/addon/templates/components/upgrade-page.hbs

@@ -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
+  <ExternalLink
-    href="https://www.hashicorp.com/products/vault/enterprise?source=vaultui_{{this.featureName}}"
+    @href="https://www.hashicorp.com/products/vault/enterprise?source=vaultui_{{this.featureName}}"
     class="link has-icon-right"
-    target="_blank"
+    data-test-upgrade-link
-    rel="noopener noreferrer"
-    data-test-upgrade-link="true"
   >
     Vault Enterprise
     <Chevron />
-  </a>
+  </ExternalLink>
 </EmptyState>

ui/lib/core/app/components/external-link.js

@@ -0,0 +1 @@
+export { default } from 'core/components/external-link';