UI: Remove LearnLink, use DocLink! (#18641)

* delete learn link, update links * update documentation * update test * Update ui/app/templates/components/wizard/replication-setup.hbs
2025-11-02 03:27:54 +00:00 · 2023-01-10 09:07:08 -08:00
parent 3f073ae3ce
commit 582a64598c
28 changed files with 57 additions and 103 deletions
--- a/ui/app/styles/components/replication-doc-link.scss
+++ b/ui/app/styles/components/replication-doc-link.scss
@@ -1,8 +0,0 @@
-.documentation-link {
-  margin: $spacing-s 0 $spacing-l 0;
-  float: right;
-
-  .doc-link {
-    font-weight: normal;
-  }
-}
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -6,4 +6,9 @@
  .helper-text {
    font-weight: normal;
  }
+
+  .float-right {
+    margin: $spacing-s 0 $spacing-l 0;
+    float: right;
+  }
 }
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -88,7 +88,6 @@
@import './components/read-more';
@import './components/regex-validator';
@import './components/replication-dashboard';
-@import './components/replication-doc-link';
@import './components/replication-header';
@import './components/replication-mode-summary';
@import './components/replication-page';
--- a/ui/app/templates/components/clients/usage-stats.hbs
+++ b/ui/app/templates/components/clients/usage-stats.hbs
@@ -5,9 +5,9 @@
      <p class="chart-description"> These totals are within this namespace and all its children. </p>
    </div>
    <div class="header-right">
-      <LearnLink @path="/tutorials/vault/usage-metrics">
+      <DocLink @path="/vault/tutorials/monitoring/usage-metrics">
        Learn more
-      </LearnLink>
+      </DocLink>
    </div>
  </div>

--- a/ui/app/templates/components/generate-credentials-database.hbs
+++ b/ui/app/templates/components/generate-credentials-database.hbs
@@ -34,9 +34,9 @@
            {{! Empty because they can't go "back" anywhere }}
          </li>
          <li>
-            <LearnLink @path="/vault/database-secrets" @class="has-text-grey">
+            <DocLink @path="/vault/docs/secrets/databases" @class="has-text-grey">
              Need help?
-            </LearnLink>
+            </DocLink>
          </li>
        </ul>
      </nav>
--- a/ui/app/templates/components/identity/item-metadata.hbs
+++ b/ui/app/templates/components/identity/item-metadata.hbs
@@ -27,8 +27,8 @@
      Edit
      {{lowercase (humanize @model.identityType)}}
    </LinkTo>
-    <LearnLink @path="/vault/identity-access-management/iam-identity">
+    <DocLink @path="/vault/tutorials/auth-methods/identity">
      Learn more
-    </LearnLink>
+    </DocLink>
  </EmptyState>
 {{/each-in}}
--- a/ui/app/templates/components/license-banners.hbs
+++ b/ui/app/templates/components/license-banners.hbs
@@ -10,9 +10,9 @@
      }}. Add a new license to your configuration and restart Vault."
      @marginless={{true}}
    >
-      <LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
+      <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
        Read documentation
-      </LearnLink>
+      </DocLink>
    </AlertBanner>
  </div>
 {{else if (lte this.licenseExpiringInDays 30)}}
@@ -31,9 +31,9 @@
      }}"
      @marginless={{true}}
    >
-      <LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
+      <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
        Read documentation
-      </LearnLink>
+      </DocLink>
    </AlertBanner>
  </div>
 {{/if}}
--- a/ui/app/templates/components/transform-advanced-templating.hbs
+++ b/ui/app/templates/components/transform-advanced-templating.hbs
@@ -12,9 +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
-      <LearnLink @path="/tutorials/vault/transform#advanced-handling">
+      <DocLink @path="/vault/tutorials/adp/transform#advanced-handling">
        our documentation.
-      </LearnLink>
+      </DocLink>
    </p>
    <div class="has-top-margin-l">
      <RegexValidator
--- a/ui/app/templates/components/wizard/replication-setup.hbs
+++ b/ui/app/templates/components/wizard/replication-setup.hbs
@@ -11,15 +11,15 @@
      more interested in speed of access?
    </p>

-    <LearnLink @path="/vault/operations/ops-replication">
+    <DocLink @path="/vault/tutorials/enterprise/performance-replication">
      <Icon @name="learn-link" />
      Learn: Setting Up Performance Replication
-    </LearnLink>
+    </DocLink>

-    <LearnLink @path="/vault/operations/ops-disaster-recovery">
+    <DocLink @path="/vault/tutorials/enterprise/disaster-recovery">
      <Icon @name="learn-link" />
      Learn: Setting up Disaster Recovery
-    </LearnLink>
+    </DocLink>

  </WizardSection>
  <WizardSection @headerText="Cluster mode" @class="wizard-details">
--- a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs
@@ -49,8 +49,8 @@
      Create
      {{this.identityType}}
    </LinkTo>
-    <LearnLink @path="/vault/identity-access-management/iam-identity">
+    <DocLink @path="/vault/tutorials/auth-methods/identity">
      Learn more
-    </LearnLink>
+    </DocLink>
  </EmptyState>
 {{/if}}
--- a/ui/app/templates/vault/cluster/access/identity/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/index.hbs
@@ -109,8 +109,8 @@
      Create
      {{this.identityType}}
    </LinkTo>
-    <LearnLink @path="/vault/identity-access-management/iam-identity">
+    <DocLink @path="/vault/tutorials/auth-methods/identity">
      Learn more
-    </LearnLink>
+    </DocLink>
  </EmptyState>
 {{/if}}
--- a/ui/app/templates/vault/cluster/access/mfa/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/index.hbs
@@ -11,9 +11,9 @@
    Configure and enforce multi-factor authentication (MFA) for users logging into Vault, for any
    <br />
    authentication method.
-    <LearnLink @path="/tutorials/vault/multi-factor-authentication">
+    <DocLink @path="/vault/tutorials/auth-methods/multi-factor-authentication">
      Learn more
-    </LearnLink>
+    </DocLink>
  </p>
  <button
    type="submit"
--- a/ui/app/templates/vault/cluster/access/namespaces/index.hbs
+++ b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
@@ -22,9 +22,9 @@
          Create Namespace
        </LinkTo>

-        <LearnLink @path="/vault/security/namespaces">
+        <DocLink @path="/vault/tutorials/enterprise/namespaces">
          Learn more
-        </LearnLink>
+        </DocLink>
      </list.empty>
    {{else}}
      <ListItem as |Item|>
--- a/ui/app/templates/vault/cluster/access/oidc.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc.hbs
@@ -15,9 +15,9 @@
        <br />
      {{/if}}
      methods and source of identity to any client applications.
-      <LearnLink @path="/tutorials/vault/oidc-identity-provider">
+      <DocLink @path="/vault/tutorials/auth-methods/oidc-identity-provider">
        Learn more
-      </LearnLink>
+      </DocLink>
    </p>
    {{#if this.isCta}}
      <button
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -166,10 +166,10 @@
        policy
        <Chevron />
      </LinkTo>
-      <LearnLink @path="/vault/getting-started/policies">
+      <DocLink @path="/vault/tutorials/getting-started/getting-started-policies">
        Learn more
        <Chevron />
-      </LearnLink>
+      </DocLink>
    </EmptyState>
  {{/if}}
 {{else}}
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -18,9 +18,9 @@
                </LinkTo>
              </li>
              <li>
-                <LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
+                <DocLink @path="/vault/tutorials/enterprise/disaster-recovery" @class="has-text-grey">
                  Need help?
-                </LearnLink>
+                </DocLink>
              </li>
            </ul>
          </nav>
--- a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
@@ -18,9 +18,9 @@
                </LinkTo>
              </li>
              <li>
-                <LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
+                <DocLink @path="/vault/tutorials/enterprise/disaster-recovery" @class="has-text-grey">
                  Need help?
-                </LearnLink>
+                </DocLink>
              </li>
            </ul>
          </nav>
--- a/ui/app/templates/vault/cluster/unseal.hbs
+++ b/ui/app/templates/vault/cluster/unseal.hbs
@@ -22,9 +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">
-          <LearnLink @path="/tutorials/nomad/hashicorp-enterprise-license">
+          <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
            License documentation
-          </LearnLink>
+          </DocLink>
        </p>
      </EmptyState>
    </div>
--- a/ui/lib/core/addon/components/doc-link.js
+++ b/ui/lib/core/addon/components/doc-link.js
@@ -2,14 +2,14 @@ import ExternalLink from './external-link';

 /**
 * @module DocLink
- * `DocLink` components are used to render anchor links to relevant Vault documentation at vaultproject.io.
+ * `DocLink` components are used to render anchor links to relevant Vault documentation at developer.hashicorp.com.
 *
 * @example
 * ```js
    <DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
 * ```
 *
- * @param path="/"{String} - The path to documentation on vaultproject.io that the component should link to.
+ * @param {string} path="/" - The path to documentation on developer.hashicorp.com that the component should link to.
 *
 */
 export default class DocLinkComponent extends ExternalLink {
--- a/ui/lib/core/addon/components/external-link.js
+++ b/ui/lib/core/addon/components/external-link.js
@@ -3,15 +3,15 @@ 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.
+ *  To link to developer.hashicorp.com, use DocLink .
 *
 * @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}}
+ * @param {string} href="https://example.com/" - The full href with protocol
+ * @param {boolean} [sameTab=false] - by default, these links open in new tab. To override, pass @sameTab={{true}}
 *
 */
 export default class ExternalLinkComponent extends Component {
--- a/ui/lib/core/addon/components/learn-link.js
+++ b/ui/lib/core/addon/components/learn-link.js
@@ -1,23 +0,0 @@
-import ExternalLink from './external-link';
-
-/**
- * @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.
- *
- */
-
-// TODO update host to 'https://developer.hashicorp.com' once updated paths are established
-export default class LearnLinkComponent extends ExternalLink {
-  host = 'https://learn.hashicorp.com';
-
-  get href() {
-    return `${this.host}${this.args.path}`;
-  }
-}
--- a/ui/lib/core/addon/components/replication-doc-link.js
+++ b/ui/lib/core/addon/components/replication-doc-link.js
@@ -1,17 +0,0 @@
-import Component from '@ember/component';
-import layout from '../templates/components/replication-doc-link';
-
-/**
- * @module ReplicationDocLink
- * The `ReplicationDocLink` component is a learn link with helper text used on the Replication Dashboards.
- * The link takes you to the key monitoring metrics learn doc.
- *
- * @example
- * ```js
- * <ReplicationDocLink />
- * ```
- */
-
-export default Component.extend({
-  layout,
-});
--- a/ui/lib/core/addon/templates/components/replication-dashboard.hbs
+++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
@@ -61,6 +61,13 @@
  {{/if}}
  {{#unless this.isSummaryDashboard}}
    <ReplicationTableRows @replicationDetails={{this.replicationDetails}} @clusterMode={{this.clusterMode}} />
-    <ReplicationDocLink data-test-replication-doc-link />
+    <div class="replication helper-text float-right" data-test-replication-doc-link>
+      <p class="has-text-grey">
+        We have additional time series telemetry that can be found
+        <DocLink @path="/vault/tutorials/monitoring/monitor-replication#key-monitoring-metrics">
+          in our documentation.
+        </DocLink>
+      </p>
+    </div>
  {{/unless}}
 </div>
--- a/ui/lib/core/addon/templates/components/replication-doc-link.hbs
+++ b/ui/lib/core/addon/templates/components/replication-doc-link.hbs
@@ -1,9 +0,0 @@
-<div class="documentation-link">
-  <p class="has-text-grey">
-    We have additional timeseries telemetry that can be found
-    <LearnLink @path="/vault/operations/monitor-replication#key-monitoring-metrics">
-      in our documentation
-    </LearnLink>
-    .
-  </p>
-</div>
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -105,9 +105,9 @@
          @title="No known_primary_cluster_addrs"
          @message="These addresses are used by the secondary to communicate with the primary cluster. Should always be non-zero in a functioning replication setup."
        >
-          <LearnLink @path="/vault/operations/monitor-replication">
+          <DocLink @path="/vault/tutorials/monitoring/monitor-replication">
            Learn more
-          </LearnLink>
+          </DocLink>
        </EmptyState>
      {{else}}
        <InfoTable @title="Known Primary Cluster Addrs" @header="cluster_addr" @items={{this.knownPrimaryClusterAddrs}} />
--- a/ui/lib/core/app/components/learn-link.js
+++ b/ui/lib/core/app/components/learn-link.js
@@ -1 +0,0 @@
-export { default } from 'core/components/learn-link';
--- a/ui/lib/core/app/components/replication-doc-link.js
+++ b/ui/lib/core/app/components/replication-doc-link.js
@@ -1 +0,0 @@
-export { default } from 'core/components/replication-doc-link';
--- a/ui/tests/integration/components/clients/usage-stats-test.js
+++ b/ui/tests/integration/components/clients/usage-stats-test.js
@@ -18,7 +18,9 @@ module('Integration | Component | clients/usage-stats', function (hooks) {
    assert
      .dom('[data-test-stat-text="non-entity-clients"] .stat-value')
      .hasText('0', 'Value defaults to zero');
-    assert.dom('a').hasAttribute('href', 'https://learn.hashicorp.com/tutorials/vault/usage-metrics');
+    assert
+      .dom('a')
+      .hasAttribute('href', 'https://developer.hashicorp.com/vault/tutorials/monitoring/usage-metrics');
  });

  test('it renders with data', async function (assert) {
				`@@ -1 +0,0 @@`
				`export { default } from 'core/components/learn-link';`