From 3c25033741d00d655c0a42ce526f9441dd3b3881 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Fri, 11 Nov 2022 09:56:44 -0600
Subject: [PATCH] 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                           |  3 ++
 .../components/database-connection.hbs        |  2 +-
 .../templates/components/license-banners.hbs  | 16 +++--------
 ui/app/templates/components/link-status.hbs   |  4 +--
 .../templates/components/namespace-link.hbs   |  9 ++++--
 .../components/pki/config-pki-ca.hbs          |  4 +--
 .../components/raft-storage-overview.hbs      |  7 +++--
 .../transform-advanced-templating.hbs         |  8 ++----
 ui/app/templates/vault.hbs                    | 12 ++++----
 ui/app/templates/vault/cluster/unseal.hbs     | 12 +++-----
 ui/lib/core/addon/components/doc-link.js      | 28 ++++++-------------
 .../core/addon/components/external-link.hbs   |  9 ++++++
 ui/lib/core/addon/components/external-link.js | 21 ++++++++++++++
 ui/lib/core/addon/components/learn-link.js    | 25 ++++++++++++++---
 .../components/replication-mode-summary.hbs   |  8 +++---
 .../components/replication-secondary-card.hbs |  4 +--
 .../templates/components/upgrade-page.hbs     | 10 +++----
 ui/lib/core/app/components/external-link.js   |  1 +
 18 files changed, 105 insertions(+), 78 deletions(-)
 create mode 100644 changelog/17866.txt
 create mode 100644 ui/lib/core/addon/components/external-link.hbs
 create mode 100644 ui/lib/core/addon/components/external-link.js
 create mode 100644 ui/lib/core/app/components/external-link.js

diff --git a/changelog/17866.txt b/changelog/17866.txt
new file mode 100644
index 0000000000..7e173f8de7
--- /dev/null
+++ b/changelog/17866.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: consolidate all <a> tag usage
+```
\ No newline at end of file
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index d21d8c0a41..74d97d70f6 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/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|}}
diff --git a/ui/app/templates/components/license-banners.hbs b/ui/app/templates/components/license-banners.hbs
index 1416290972..5e7d751318 100644
--- a/ui/app/templates/components/license-banners.hbs
+++ b/ui/app/templates/components/license-banners.hbs
@@ -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}}
\ No newline at end of file
diff --git a/ui/app/templates/components/link-status.hbs b/ui/app/templates/components/link-status.hbs
index 2ff89bd0dc..5bd005a08a 100644
--- a/ui/app/templates/components/link-status.hbs
+++ b/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))}}>
diff --git a/ui/app/templates/components/namespace-link.hbs b/ui/app/templates/components/namespace-link.hbs
index 42e8e04e6b..24452b7e8b 100644
--- a/ui/app/templates/components/namespace-link.hbs
+++ b/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>
\ No newline at end of file
+</ExternalLink>
\ No newline at end of file
diff --git a/ui/app/templates/components/pki/config-pki-ca.hbs b/ui/app/templates/components/pki/config-pki-ca.hbs
index 6ad4ed2ee1..f749f241f4 100644
--- a/ui/app/templates/components/pki/config-pki-ca.hbs
+++ b/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}}
 
diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
index f4af3b8d02..b6bd618f32 100644
--- a/ui/app/templates/components/raft-storage-overview.hbs
+++ b/ui/app/templates/components/raft-storage-overview.hbs
@@ -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"
diff --git a/ui/app/templates/components/transform-advanced-templating.hbs b/ui/app/templates/components/transform-advanced-templating.hbs
index d5e23330e6..877f23de7c 100644
--- a/ui/app/templates/components/transform-advanced-templating.hbs
+++ b/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
-        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
diff --git a/ui/app/templates/vault.hbs b/ui/app/templates/vault.hbs
index 6106e707d0..ac169064c8 100644
--- a/ui/app/templates/vault.hbs
+++ b/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")}}
diff --git a/ui/app/templates/vault/cluster/unseal.hbs b/ui/app/templates/vault/cluster/unseal.hbs
index e411dde881..f4b99b17fc 100644
--- a/ui/app/templates/vault/cluster/unseal.hbs
+++ b/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
-            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>
diff --git a/ui/lib/core/addon/components/doc-link.js b/ui/lib/core/addon/components/doc-link.js
index 763dfed57b..6b86e15f16 100644
--- a/ui/lib/core/addon/components/doc-link.js
+++ b/ui/lib/core/addon/components/doc-link.js
@@ -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}`;
+  }
+}
diff --git a/ui/lib/core/addon/components/external-link.hbs b/ui/lib/core/addon/components/external-link.hbs
new file mode 100644
index 0000000000..17270ca8fb
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/external-link.js b/ui/lib/core/addon/components/external-link.js
new file mode 100644
index 0000000000..6407b78736
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ui/lib/core/addon/components/learn-link.js b/ui/lib/core/addon/components/learn-link.js
index 1071690186..3d4b1564e7 100644
--- a/ui/lib/core/addon/components/learn-link.js
+++ b/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}`;
+  }
+}
diff --git a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs b/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
index fba50f57ea..9b2f992eb5 100644
--- a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
+++ b/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
-              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">
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index 731c90144a..f0fb6788ef 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/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">
diff --git a/ui/lib/core/addon/templates/components/upgrade-page.hbs b/ui/lib/core/addon/templates/components/upgrade-page.hbs
index 381c347919..1b0145ad10 100644
--- a/ui/lib/core/addon/templates/components/upgrade-page.hbs
+++ b/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
-    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>
\ No newline at end of file
diff --git a/ui/lib/core/app/components/external-link.js b/ui/lib/core/app/components/external-link.js
new file mode 100644
index 0000000000..2208dadf0e
--- /dev/null
+++ b/ui/lib/core/app/components/external-link.js
@@ -0,0 +1 @@
+export { default } from 'core/components/external-link';