UI: Make empty state links consistent (#25209)

* round one of updating empty state actions

* second round of empty states

* update tests

* add changelog

changelog/25209.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix inconsistent empty state action link styles
+```

ui/app/components/clients/no-data.hbs

@@ -14,11 +14,12 @@
     @message="Tracking is disabled, and no data is being collected. To turn it on, edit the configuration."
   >
     {{#if @config.canEdit}}
-      <p>
-        <LinkTo @route="vault.cluster.clients.config">
-          Go to configuration
-        </LinkTo>
-      </p>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Go to configuration"
+        @route="vault.cluster.clients.config"
+      />
     {{/if}}
   </EmptyState>
 {{/if}}

ui/app/templates/components/dashboard/quick-actions-card.hbs

@@ -92,9 +92,12 @@
       @message="Access secret engine actions easily. Enable a compatible secret engine (such as database, KV version 2, or PKI) to get started."
       data-test-empty-state="quick-actions"
     >
-      <div>
-        <LinkTo @route="vault.cluster.settings.mount-secret-backend">Enable a secret engine</LinkTo>
-      </div>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Enable a secrets engine"
+        @route="vault.cluster.settings.mount-secret-backend"
+      />
     </EmptyState>
   {{/if}}
 </Hds::Card::Container>

ui/app/templates/components/dashboard/replication-card.hbs

@@ -89,9 +89,12 @@
       class="has-top-margin-m"
       data-test-empty-state="replication"
     >
-      <div>
-        <LinkTo @route="vault.cluster.replication">Enable replication</LinkTo>
-      </div>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Enable replication"
+        @route="vault.cluster.replication"
+      />
     </EmptyState>
   {{/if}}
 </Hds::Card::Container>

ui/app/templates/components/dashboard/secrets-engines-card.hbs

@@ -88,9 +88,12 @@
       class="has-top-margin-m"
       data-test-empty-state="secrets-engines"
     >
-      <div>
-        <LinkTo @route="vault.cluster.settings.mount-secret-backend">Enable a secret engine</LinkTo>
-      </div>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Enable a secrets engine"
+        @route="vault.cluster.settings.mount-secret-backend"
+      />
     </EmptyState>
   {{/if}}
 </Hds::Card::Container>

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

@@ -308,11 +308,13 @@
     @message="This database type cannot be viewed in the UI. You will have to use the API or CLI to perform actions here."
     @bottomBorder={{true}}
   >
-    <LinkTo @route="vault.cluster.secrets.backend.list-root" class="link">
-      <Chevron @direction="left" />
-      Go back
-    </LinkTo>
-    <DocLink @path="/api/secret/databases">Documentation</DocLink>
+    <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backend.list-root" />
+    <Hds::Link::Standalone
+      @icon="docs-link"
+      @iconPosition="trailing"
+      @text="Database API docs"
+      @href={{doc-link "/vault/api-docs/secret/databases"}}
+    />
   </EmptyState>
 {{else}}
   {{#each @model.showAttrs as |attr|}}

ui/app/templates/components/generate-credentials-database.hbs

@@ -35,7 +35,7 @@
         @iconPosition="trailing"
         @icon="docs-link"
         @text="Database documentation"
-        @href={{doc-link "/vault/docs/secrets/databases"}}
+        @href={{doc-link "/vault/api-docs/secret/databases"}}
       />
     </EmptyState>
   {{/unless}}

ui/app/templates/components/identity/item-metadata.hbs

@@ -24,16 +24,15 @@
 {{else}}
   <EmptyState
     @title="No metadata for {{@model.name}}"
-    @message="You can store custom data that you want to associate with a {{lowercase
+    @message='You can store custom data that you want to associate with this {{lowercase
       (humanize @model.identityType)
-    }}. Edit this {{lowercase (humanize @model.identityType)}} to get started."
+    }}. Click "Edit {{lowercase (humanize @model.identityType)}}" to get started.'
   >
-    <LinkTo @route="vault.cluster.access.identity.edit" @model={{@model.id}} class="link">
-      Edit
-      {{lowercase (humanize @model.identityType)}}
-    </LinkTo>
-    <DocLink @path="/vault/tutorials/auth-methods/identity">
-      Learn more
-    </DocLink>
+    <Hds::Link::Standalone
+      @text="Identity: entities and groups tutorial"
+      @href={{doc-link "/vault/tutorials/auth-methods/identity"}}
+      @icon="learn-link"
+      @iconPosition="trailing"
+    />
   </EmptyState>
 {{/each-in}}

ui/app/templates/components/keymgmt/provider-edit.hbs

@@ -183,9 +183,12 @@
               @title="No keys for this provider"
               @message="Keys for this provider will be listed here. Add a key to get started."
             >
-              <SecretLink @mode="create" @secret="" @queryParams={{hash itemType="key"}} class="link">
-                Create key
-              </SecretLink>
+              <Hds::Link::Standalone
+                @icon="plus"
+                @text="Create key"
+                @route="vault.cluster.secrets.backend.create-root"
+                @query={{hash itemType="key"}}
+              />
             </EmptyState>
           {{/if}}
         {{/let}}

ui/app/templates/vault/cluster/access/identity/aliases/index.hbs

@@ -51,14 +51,13 @@
     @title="No {{this.identityType}} aliases yet"
     @message="A list of {{this.identityType}} aliases in this namespace will be listed here. Choose one of the {{pluralize
       this.identityType
-    }} and click "Create Alias" to get started."
+    }} and click "Add alias" to get started."
   >
-    <LinkTo @route="vault.cluster.access.identity.create" @model={{pluralize this.identityType}} class="link">
-      Create
-      {{this.identityType}}
-    </LinkTo>
-    <DocLink @path="/vault/tutorials/auth-methods/identity">
-      Learn more
-    </DocLink>
+    <Hds::Link::Standalone
+      @text="Identity: entities and groups tutorial"
+      @href={{doc-link "/vault/tutorials/auth-methods/identity"}}
+      @icon="learn-link"
+      @iconPosition="trailing"
+    />
   </EmptyState>
 {{/if}}

ui/app/templates/vault/cluster/access/identity/index.hbs

@@ -110,12 +110,6 @@
       this.identityType
     }} in this namespace will be listed here. Create your first {{this.identityType}} to get started."
   >
-    <Hds::Link::Standalone
-      @text="Create {{this.identityType}}"
-      @icon="plus"
-      @route="vault.cluster.access.identity.create"
-      @model={{pluralize this.identityType}}
-    />
     <Hds::Link::Standalone
       @text="Identity: entities and groups tutorial"
       @href={{doc-link "/vault/tutorials/auth-methods/identity"}}

ui/app/templates/vault/cluster/access/leases/error.hbs

@@ -25,18 +25,14 @@
     @title="No leases with that ID"
     @message="Unable to find lease for the ID "{{this.model.keyId}}". Try going back to the lookup and re-entering the ID."
   >
-    <LinkTo @route="vault.cluster.access.leases" class="link">
-      Back to lookup
-    </LinkTo>
+    <Hds::Link::Standalone @icon="chevron-left" @text="Back to lookup" @route="vault.cluster.access.leases" />
   </EmptyState>
 {{else if (eq this.model.httpStatus 403)}}
   <EmptyState
     @title="You don't have access to a lease with that ID"
     @message="If you think you've reached this page in error, please contact your administrator."
   >
-    <LinkTo @route="vault.cluster.access.leases" class="link">
-      Back to lookup
-    </LinkTo>
+    <Hds::Link::Standalone @icon="chevron-left" @text="Back to lookup" @route="vault.cluster.access.leases" />
   </EmptyState>
 {{else}}
   {{#each this.model.errors as |error|}}

ui/app/templates/vault/cluster/access/oidc/clients/client/providers.hbs

@@ -11,8 +11,11 @@
     @title="No available providers"
     @message="Edit an existing provider or create a new one to allow this application access for authentication requests."
   >
-    <LinkTo @route="vault.cluster.access.oidc.providers">
-      View providers
-    </LinkTo>
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="View providers"
+      @route="vault.cluster.access.oidc.providers"
+    />
   </EmptyState>
 {{/if}}

ui/app/templates/vault/cluster/access/oidc/keys/key/clients.hbs

@@ -12,8 +12,11 @@
     @title="No applications allowed"
     @message="Access to this key has been limited, and no applications are allowed to use it. Edit the key to allow access."
   >
-    <LinkTo @route="vault.cluster.access.oidc.keys.key.edit">
-      Edit key
-    </LinkTo>
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="Edit key"
+      @route="vault.cluster.access.oidc.keys.key.edit"
+    />
   </EmptyState>
 {{/if}}

ui/app/templates/vault/cluster/access/oidc/providers/provider/clients.hbs

@@ -12,8 +12,11 @@
     @title="No applications allowed"
     @message="Access to this provider has been limited, and no applications are allowed to use it. Edit the provider to allow access."
   >
-    <LinkTo @route="vault.cluster.access.oidc.providers.provider.edit">
-      Edit provider
-    </LinkTo>
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="Edit provider"
+      @route="vault.cluster.access.oidc.providers.provider.edit"
+    />
   </EmptyState>
 {{/if}}

ui/app/templates/vault/cluster/access/oidc/scopes/index.hbs

@@ -61,18 +61,16 @@
     </LinkedBlock>
   {{/each}}
 {{else}}
-  <EmptyState @title="No scopes yet" data-test-oidc-scope-empty-state>
-    <div>
-      <p>Use scope to define identity information about the authenticated user.
-        <DocLink @path="/vault/docs/concepts/oidc-provider#scopes">
-          Learn more.
-        </DocLink>
-      </p>
-      <div class="has-top-margin-m">
-        <LinkTo @route="vault.cluster.access.oidc.scopes.create" data-test-oidc-scope-create-empty-state>
-          Create scope
-        </LinkTo>
-      </div>
-    </div>
+  <EmptyState
+    @title="No scopes yet"
+    @message="Use scope to define identity information about the authenticated user."
+    data-test-oidc-scope-empty-state
+  >
+    <Hds::Link::Standalone
+      @iconPosition="trailing"
+      @icon="docs-link"
+      @text="OIDC provider scopes"
+      @href={{doc-link "/vault/docs/concepts/oidc-provider#scopes"}}
+    />
   </EmptyState>
 {{/if}}

ui/app/templates/vault/cluster/access/reset-password-error.hbs

@@ -12,8 +12,10 @@
 </PageHeader>
 
 <EmptyState @title="No password reset access" @message={{this.model.message}}>
-  <p>
-    Learn more
-    <DocLink @path="vault/api-docs/auth/userpass#update-password-on-user">about updating passwords</DocLink>
-    here.</p>
+  <Hds::Link::Standalone
+    @iconPosition="trailing"
+    @icon="docs-link"
+    @text="Update password API docs"
+    @href={{doc-link "/vault/api-docs/auth/userpass#update-password-on-user"}}
+  />
 </EmptyState>

ui/app/templates/vault/cluster/policies/index.hbs

@@ -161,16 +161,21 @@
         this.policyType
       }} policy to get started."
     >
-      <LinkTo @route="vault.cluster.policies.create" class="link">
-        Create
-        {{uppercase this.policyType}}
-        policy
-        <Chevron />
-      </LinkTo>
-      <DocLink @path="/vault/tutorials/getting-started/getting-started-policies">
-        Learn more
-        <Chevron />
-      </DocLink>
+      {{#if (eq this.policyType "acl")}}
+        <Hds::Link::Standalone
+          @iconPosition="trailing"
+          @icon="learn-link"
+          @text="Getting started with policies"
+          @href={{doc-link "/vault/tutorials/getting-started/getting-started-policies"}}
+        />
+      {{else}}
+        <Hds::Link::Standalone
+          @iconPosition="trailing"
+          @icon="learn-link"
+          @text="Sentinel policies tutorial"
+          @href={{doc-link "/vault/tutorials/policies/sentinel"}}
+        />
+      {{/if}}
     </EmptyState>
   {{/if}}
 {{else}}

ui/app/templates/vault/cluster/replication-dr-promote/details.hbs

@@ -15,16 +15,14 @@
           @bottomBorder={{true}}
           class="is-shadowless"
         >
-          <Hds::ButtonSet>
-            <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
-            <Hds::Link::Standalone
-              @icon="learn-link"
-              @iconPosition="trailing"
-              @color="secondary"
-              @text="Disaster recovery tutorial"
-              @href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
-            />
-          </Hds::ButtonSet>
+          <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
+          <Hds::Link::Standalone
+            @icon="learn-link"
+            @iconPosition="trailing"
+            @color="secondary"
+            @text="Disaster recovery tutorial"
+            @href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
+          />
         </EmptyState>
       {{else}}
         <Page.dashboard

ui/app/templates/vault/cluster/replication-dr-promote/index.hbs

@@ -14,16 +14,14 @@
           @icon="alert-circle"
           @bottomBorder={{true}}
         >
-          <Hds::ButtonSet>
-            <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
-            <Hds::Link::Standalone
-              @icon="learn-link"
-              @iconPosition="trailing"
-              @color="secondary"
-              @text="Disaster recovery tutorial"
-              @href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
-            />
-          </Hds::ButtonSet>
+          <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
+          <Hds::Link::Standalone
+            @icon="learn-link"
+            @iconPosition="trailing"
+            @color="secondary"
+            @text="Disaster recovery tutorial"
+            @href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
+          />
         </EmptyState>
       {{else}}
         <section>

ui/app/templates/vault/cluster/secrets/backend/list.hbs

@@ -108,32 +108,14 @@
   {{else}}
     {{#if (eq this.baseKey.id "")}}
       {{#if (and options.firstStep (not this.tab))}}
-        <EmptyState @title="Get started with {{capitalize this.backendType}}" @message={{options.firstStep}}>
-          <SecretLink
-            @mode="create"
-            @secret=""
-            @queryParams={{hash initialKey=(or this.filter this.baseKey.id) itemType=this.tab}}
-            class="link"
-          >
-            {{options.create}}
-          </SecretLink>
-        </EmptyState>
+        <EmptyState @title="Get started with {{capitalize this.backendType}}" @message={{options.firstStep}} />
       {{else}}
         <EmptyState
           @title="No {{pluralize options.item}} in this backend"
           @message="{{pluralize (capitalize options.item)}}
             in this backend will be listed here.
             {{or options.message (concat 'Add a ' options.item ' to get started.')}}"
-        >
-          <SecretLink
-            @mode="create"
-            @secret=""
-            @queryParams={{hash initialKey=(or this.filter this.baseKey.id) itemType=this.tab}}
-            class="link"
-          >
-            {{options.create}}
-          </SecretLink>
-        </EmptyState>
+        />
       {{/if}}
     {{else}}
       {{#if this.filterIsFolder}}

ui/app/templates/vault/cluster/secrets/backend/overview.hbs

@@ -16,15 +16,13 @@
     <Toolbar />
     <EmptyState @title="Connect a database" @message={{this.emptyStateMessage}}>
       {{#if (or this.model.connectionCapabilities.canCreate this.model.connectionCapabilities.canUpdate)}}
-        <SecretLink
-          @mode="create"
-          @secret=""
-          @queryParams={{hash initialKey=(or this.filter this.baseKey.id) itemType=this.tab}}
-          class="link"
+        <Hds::Link::Standalone
+          @icon="plus"
+          @text="Connect a database"
+          @query={{hash itemType="connection"}}
+          @route="vault.cluster.secrets.backend.create-root"
           data-test-secret-create="connections"
-        >
-          Connect a database
-        </SecretLink>
+        />
       {{/if}}
     </EmptyState>
   </div>

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

@@ -14,11 +14,12 @@
         @bottomBorder={{true}}
         @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">
-          <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
-            License documentation
-          </DocLink>
-        </p>
+        <Hds::Link::Standalone
+          @icon="learn-link"
+          @iconPosition="trailing"
+          @text="Install an enterprise license tutorial"
+          @href={{doc-link "/vault/tutorials/enterprise/hashicorp-enterprise-license"}}
+        />
       </EmptyState>
     </div>
   </div>

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

@@ -15,12 +15,11 @@
   @title="Upgrade to use {{this.featureName}}"
   @message="You will need {{this.minimumEdition}} with {{this.featureName}} included to use this feature."
 >
-  <ExternalLink
+  <Hds::Link::Standalone
+    @icon="chevron-right"
+    @iconPosition="trailing"
+    @text="Vault Enterprise"
     @href="https://www.hashicorp.com/products/vault/enterprise?source=vaultui_{{this.featureName}}"
-    class="link has-icon-right"
     data-test-upgrade-link
-  >
-    Vault Enterprise
-    <Chevron />
-  </ExternalLink>
+  />
 </EmptyState>

ui/lib/kmip/addon/templates/configuration.hbs

@@ -30,9 +30,5 @@
   <EmptyState
     @title="No configuration for this secrets engine"
     @message="We'll need to configure a few things before getting started."
-  >
-    <LinkTo @route="configure">
-      Configure
-    </LinkTo>
-  </EmptyState>
+  />
 {{/if}}

ui/lib/kubernetes/addon/components/config-cta.hbs

@@ -8,7 +8,5 @@
   @title="Kubernetes not configured"
   @message="Get started by establishing the URL of the Kubernetes API to connect to, along with some additional options."
 >
-  <LinkTo class="has-top-margin-xs" @route="configure">
-    Configure Kubernetes
-  </LinkTo>
+  <Hds::Link::Standalone @icon="chevron-right" @iconPosition="trailing" @text="Configure Kubernetes" @route="configure" />
 </EmptyState>

ui/lib/kubernetes/addon/components/page/roles.hbs

@@ -26,11 +26,7 @@
       data-test-config-cta
       @title="No roles yet"
       @message="When created, roles will be listed here. Create a role to start generating service account tokens."
-    >
-      <LinkTo class="has-top-margin-xs" @route="roles.create">
-        Create role
-      </LinkTo>
-    </EmptyState>
+    />
   {{/if}}
 {{else}}
   <div class="has-bottom-margin-s">

ui/lib/kv/addon/components/page/list.hbs

@@ -134,17 +134,13 @@
     />
   {{else}}
     {{#if @filterValue}}
-      <EmptyState @title="There are no secrets matching &quot;{{@filterValue}}&quot;." />
+      <EmptyState @title='There are no secrets matching "{{@filterValue}}".' />
     {{else}}
       <EmptyState
         data-test-secret-list-empty-state
         @title="No secrets yet"
         @message="When created, secrets will be listed here. Create a secret to get started."
-      >
-        <LinkTo class="has-top-margin-xs" @route="create">
-          Create secret
-        </LinkTo>
-      </EmptyState>
+      />
     {{/if}}
   {{/if}}
 {{/if}}

ui/lib/kv/addon/components/page/secret/details.hbs

@@ -133,7 +133,12 @@
 {{#if this.emptyState}}
   <EmptyState @title={{this.emptyState.title}} @message={{this.emptyState.message}}>
     {{#if this.emptyState.link}}
-      <DocLink @path={{this.emptyState.link}}>Learn more</DocLink>
+      <Hds::Link::Standalone
+        @icon="docs-link"
+        @iconPosition="trailing"
+        @text="KV v2 API docs"
+        @href={{doc-link this.emptyState.link}}
+      />
     {{/if}}
   </EmptyState>
 {{else}}

ui/lib/kv/addon/components/page/secret/metadata/details.hbs

@@ -42,9 +42,13 @@
         @message="This data is version-agnostic and is usually used to describe the secret being stored."
       >
         {{#if @secret.canUpdateMetadata}}
-          <LinkTo @route="secret.metadata.edit" @model={{@path}} data-test-add-custom-metadata>
-            Add metadata
-          </LinkTo>
+          <Hds::Link::Standalone
+            @icon="plus"
+            @text="Add metadata"
+            @route="secret.metadata.edit"
+            @model={{@path}}
+            data-test-add-custom-metadata
+          />
         {{/if}}
       </EmptyState>
     {{/each-in}}

ui/lib/kv/addon/components/page/secret/metadata/edit.hbs

@@ -51,9 +51,12 @@
     @title="You do not have permissions to edit metadata"
     @message="Ask your administrator if you think you should have access."
   >
-    <LinkTo @route="secret.metadata.index">
-      View Metadata
-    </LinkTo>
-    <DocLink @path="/vault/api-docs/secret/kv/kv-v2#create-update-metadata">More here</DocLink>
+    <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="secret.metadata.index" />
+    <Hds::Link::Standalone
+      @icon="docs-link"
+      @iconPosition="trailing"
+      @text="KV v2 metadata API docs"
+      @href={{doc-link "/vault/api-docs/secret/kv/kv-v2#create-update-metadata"}}
+    />
   </EmptyState>
 {{/if}}

ui/lib/ldap/addon/components/config-cta.hbs

@@ -8,7 +8,5 @@
   @title="LDAP not configured"
   @message="Get started by setting up the connection with your existing LDAP system."
 >
-  <LinkTo class="has-top-margin-xs" @route="configure">
-    Configure LDAP
-  </LinkTo>
+  <Hds::Link::Standalone @icon="chevron-right" @iconPosition="trailing" @text="Configure LDAP" @route="configure" />
 </EmptyState>

ui/lib/ldap/addon/components/page/libraries.hbs

@@ -38,11 +38,7 @@
       data-test-config-cta
       @title="No libraries created yet"
       @message="Use libraries to manage a set of highly privileged accounts that can be shared among a team."
-    >
-      <LinkTo class="has-top-margin-xs" @route="libraries.create">
-        Create library
-      </LinkTo>
-    </EmptyState>
+    />
   {{/if}}
 {{else}}
   <div class="has-bottom-margin-s">

ui/lib/ldap/addon/components/page/roles.hbs

@@ -38,11 +38,7 @@
       data-test-config-cta
       @title="No roles created yet"
       @message="Roles in Vault will allow you to manage LDAP credentials. Create a role to get started."
-    >
-      <LinkTo class="has-top-margin-xs" @route="roles.create">
-        Create role
-      </LinkTo>
-    </EmptyState>
+    />
   {{/if}}
 {{else}}
   <div class="has-bottom-margin-s">

ui/lib/pki/addon/components/page/pki-issuer-list.hbs

@@ -108,9 +108,12 @@
   </:list>
   <:empty>
     <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-      <LinkTo @route="configuration.create">
-        Configure PKI
-      </LinkTo>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Configure PKI"
+        @route="configuration.create"
+      />
     </EmptyState>
   </:empty>
 </PkiPaginatedList>

ui/lib/pki/addon/components/page/pki-key-list.hbs

@@ -79,9 +79,12 @@
 
   <:configure>
     <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-      <LinkTo @route="configuration.create">
-        Configure PKI
-      </LinkTo>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Configure PKI"
+        @route="configuration.create"
+      />
     </EmptyState>
   </:configure>
 </PkiPaginatedList>

ui/lib/pki/addon/templates/certificates/index.hbs

@@ -44,22 +44,19 @@
     {{/each}}
   </:list>
   <:empty>
-    <EmptyState @title="No certificates yet">
-      <div>
-        <p>When created, certificates will be listed here. Select a role to start generating certificates.</p>
-        <div class="has-top-margin-m">
-          <LinkTo @route="roles.index">
-            View roles
-          </LinkTo>
-        </div>
-      </div>
-    </EmptyState>
+    <EmptyState
+      @title="No certificates yet"
+      @message="When created, certificates will be listed here. Select a role to start generating certificates"
+    />
   </:empty>
   <:configure>
     <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-      <LinkTo @route="configuration.create">
-        Configure PKI
-      </LinkTo>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Configure PKI"
+        @route="configuration.create"
+      />
     </EmptyState>
   </:configure>
 </PkiPaginatedList>

ui/lib/pki/addon/templates/configuration/index.hbs

@@ -24,9 +24,12 @@
     </ToolbarActions>
   </Toolbar>
   <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-    <LinkTo @route="configuration.create">
-      Configure PKI
-    </LinkTo>
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="Configure PKI"
+      @route="configuration.create"
+    />
   </EmptyState>
 {{/if}}
 

ui/lib/pki/addon/templates/overview.hbs

@@ -19,8 +19,11 @@
   <Page::PkiOverview @issuers={{this.model.issuers}} @roles={{this.model.roles}} @engine={{this.model.engine}} />
 {{else}}
   <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-    <LinkTo @route="configuration.create">
-      Configure PKI
-    </LinkTo>
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="Configure PKI"
+      @route="configuration.create"
+    />
   </EmptyState>
 {{/if}}

ui/lib/pki/addon/templates/roles/index.hbs

@@ -50,22 +50,19 @@
     {{/each}}
   </:list>
   <:empty>
-    <EmptyState @title="No roles yet">
-      <div>
-        <p>When created, roles will be listed here. Create a role to start generating certificates.</p>
-        <div class="has-top-margin-m">
-          <LinkTo @route="roles.create">
-            Create role
-          </LinkTo>
-        </div>
-      </div>
-    </EmptyState>
+    <EmptyState
+      @title="No roles yet"
+      @message="When created, roles will be listed here. Create a role to start generating certificates."
+    />
   </:empty>
   <:configure>
     <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-      <LinkTo @route="configuration.create">
-        Configure PKI
-      </LinkTo>
+      <Hds::Link::Standalone
+        @icon="chevron-right"
+        @iconPosition="trailing"
+        @text="Configure PKI"
+        @route="configuration.create"
+      />
     </EmptyState>
   </:configure>
 </PkiPaginatedList>

ui/lib/pki/addon/templates/tidy/index.hbs

@@ -10,8 +10,11 @@
 {{else}}
   <Toolbar />
   <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
-    <LinkTo @route="configuration.create">
-      Configure PKI
-    </LinkTo>
+    <Hds::Link::Standalone
+      @icon="chevron-right"
+      @iconPosition="trailing"
+      @text="Configure PKI"
+      @route="configuration.create"
+    />
   </EmptyState>
 {{/if}}

ui/lib/replication/addon/templates/mode/secondaries/index.hbs

@@ -68,14 +68,12 @@
       @title="No known {{this.performanceMode}} secondary clusters associated with this cluster"
       @message="Associated secondary clusters will be listed here. Add your first secondary cluster to get started."
     >
-      {{#if this.model.canAddSecondary}}
-        <LinkTo @route="mode.secondaries.add" @model={{this.replicationMode}} class="link">
-          Add secondary
-        </LinkTo>
-      {{/if}}
-      <DocLink @path="/vault/docs/internals/replication">
-        Learn more
-      </DocLink>
+      <Hds::Link::Standalone
+        @icon="docs-link"
+        @iconPosition="trailing"
+        @text="Replication documentation"
+        @href={{doc-link "/vault/docs/internals/replication"}}
+      />
     </EmptyState>
   {{/if}}
 {{/if}}

ui/lib/sync/addon/components/secrets/page/overview.hbs

@@ -48,9 +48,12 @@
         @title="Error fetching information"
         @message="Ensure that the policy has access to read sync associations."
       >
-        <DocLink @path="/vault/api-docs/system/secrets-sync#read-associations">
-          API reference
-        </DocLink>
+        <Hds::Link::Standalone
+          @icon="docs-link"
+          @iconPosition="trailing"
+          @text="Secrets sync association API docs"
+          @href={{doc-link "/vault/api-docs/system/secrets-sync#read-associations"}}
+        />
       </EmptyState>
     {{else}}
       <Hds::Table>

ui/tests/acceptance/oidc-config/providers-scopes-test.js

@@ -53,12 +53,12 @@ module('Acceptance |  oidc-config providers and scopes', function (hooks) {
     assert
       .dom(SELECTORS.scopeEmptyState)
       .hasText(
-        `No scopes yet Use scope to define identity information about the authenticated user. Learn more. Create scope`,
+        `No scopes yet Use scope to define identity information about the authenticated user. OIDC provider scopes`,
         'renders empty state no scopes are configured'
       );
     assert
-      .dom(SELECTORS.scopeCreateButtonEmptyState)
-      .hasAttribute('href', '/ui/vault/access/oidc/scopes/create', 'empty state renders create scope link');
+      .dom(SELECTORS.scopeCreateButton)
+      .hasAttribute('href', '/ui/vault/access/oidc/scopes/create', 'toolbar renders create scope link');
   });
 
   // LIST SCOPE EXIST

ui/tests/acceptance/secrets/backend/database/secret-test.js

@@ -558,7 +558,7 @@ module('Acceptance | secrets/database/*', function (hooks) {
     assert.dom('[data-test-secret-list-tab="Roles"]').exists('renders connections tab');
 
     await click('[data-test-secret-create="connections"]');
-    assert.strictEqual(currentURL(), `/vault/secrets/${backend}/create`);
+    assert.strictEqual(currentURL(), `/vault/secrets/${backend}/create?itemType=connection`);
 
     // Login with restricted policy
     await logout.visit();

ui/tests/acceptance/secrets/backend/database/workflow-test.js

@@ -99,7 +99,11 @@ module('Acceptance | database workflow', function (hooks) {
       await visit(`/vault/secrets/${this.backend}/overview`);
       assert.dom(PAGE.emptyStateTitle).hasText('Connect a database', 'empty state title is correct');
       await click(PAGE.emptyStateAction);
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.backend}/create`, 'Takes you to create page');
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.backend}/create?itemType=connection`,
+        'Takes you to create page'
+      );
 
       // fill in connection details
       await fillOutConnection(`connect-${this.backend}`);
@@ -128,7 +132,11 @@ module('Acceptance | database workflow', function (hooks) {
       await visit(`/vault/secrets/${this.backend}/overview`);
       assert.dom(PAGE.emptyStateTitle).hasText('Connect a database', 'empty state title is correct');
       await click(PAGE.emptyStateAction);
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.backend}/create`, 'Takes you to create page');
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.backend}/create?itemType=connection`,
+        'Takes you to create page'
+      );
 
       // fill in connection details
       await fillOutConnection(`connect-${this.backend}`);
@@ -158,7 +166,11 @@ module('Acceptance | database workflow', function (hooks) {
       await visit(`/vault/secrets/${this.backend}/overview`);
       assert.dom(PAGE.emptyStateTitle).hasText('Connect a database', 'empty state title is correct');
       await click(PAGE.emptyStateAction);
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.backend}/create`, 'Takes you to create page');
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.backend}/create?itemType=connection`,
+        'Takes you to create page'
+      );
 
       // fill in connection details
       await fillOutConnection(`bad-connection`);
@@ -189,7 +201,11 @@ module('Acceptance | database workflow', function (hooks) {
       await visit(`/vault/secrets/${this.backend}/overview`);
       assert.dom(PAGE.emptyStateTitle).hasText('Connect a database', 'empty state title is correct');
       await click(PAGE.emptyStateAction);
-      assert.strictEqual(currentURL(), `/vault/secrets/${this.backend}/create`, 'Takes you to create page');
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets/${this.backend}/create?itemType=connection`,
+        'Takes you to create page'
+      );
 
       // fill in connection details
       await fillOutConnection(`fail-rotate`);

ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-navigation-test.js

@@ -108,7 +108,7 @@ module('Acceptance | kv-v2 workflow | navigation', function (hooks) {
       return;
     });
     test('empty backend - breadcrumbs, title, tabs, emptyState (a)', async function (assert) {
-      assert.expect(18);
+      assert.expect(15);
       const backend = this.emptyBackend;
       await navToBackend(backend);
 
@@ -128,23 +128,8 @@ module('Acceptance | kv-v2 workflow | navigation', function (hooks) {
       assert.dom(PAGE.list.filter).doesNotExist('List filter does not show because no secrets exists.');
       // Page content correct
       assert.dom(PAGE.emptyStateTitle).hasText('No secrets yet');
-      assert.dom(PAGE.emptyStateActions).hasText('Create secret');
       assert.dom(PAGE.list.createSecret).hasText('Create secret');
 
-      // Click empty state CTA
-      await click(`${PAGE.emptyStateActions} a`);
-      assert.ok(
-        currentURL().startsWith(`/vault/secrets/${backend}/kv/create`),
-        `url includes /vault/secrets/${backend}/kv/create`
-      );
-
-      // Click cancel btn
-      await click(FORM.cancelBtn);
-      assert.ok(
-        currentURL().startsWith(`/vault/secrets/${backend}/kv/list`),
-        `url includes /vault/secrets/${backend}/kv/list`
-      );
-
       // click toolbar CTA
       await click(PAGE.list.createSecret);
       assert.ok(
@@ -551,7 +536,7 @@ module('Acceptance | kv-v2 workflow | navigation', function (hooks) {
       return;
     });
     test('empty backend - breadcrumbs, title, tabs, emptyState (dlr)', async function (assert) {
-      assert.expect(18);
+      assert.expect(15);
       const backend = this.emptyBackend;
       await navToBackend(backend);
 
@@ -571,23 +556,8 @@ module('Acceptance | kv-v2 workflow | navigation', function (hooks) {
       assert.dom(PAGE.list.filter).doesNotExist('List filter does not show because no secrets exists.');
       // Page content correct
       assert.dom(PAGE.emptyStateTitle).hasText('No secrets yet');
-      assert.dom(PAGE.emptyStateActions).hasText('Create secret');
       assert.dom(PAGE.list.createSecret).hasText('Create secret');
 
-      // Click empty state CTA
-      await click(`${PAGE.emptyStateActions} a`);
-      assert.ok(
-        currentURL().startsWith(`/vault/secrets/${backend}/kv/create`),
-        `url includes /vault/secrets/${backend}/kv/create`
-      );
-
-      // Click cancel btn
-      await click(FORM.cancelBtn);
-      assert.ok(
-        currentURL().startsWith(`/vault/secrets/${backend}/kv/list`),
-        `url includes /vault/secrets/${backend}/kv/list`
-      );
-
       // click toolbar CTA
       await click(PAGE.list.createSecret);
       assert.ok(
@@ -737,7 +707,7 @@ module('Acceptance | kv-v2 workflow | navigation', function (hooks) {
       return;
     });
     test('empty backend - breadcrumbs, title, tabs, emptyState (mm)', async function (assert) {
-      assert.expect(18);
+      assert.expect(15);
       const backend = this.emptyBackend;
       await navToBackend(backend);
 
@@ -757,23 +727,8 @@ module('Acceptance | kv-v2 workflow | navigation', function (hooks) {
       assert.dom(PAGE.list.filter).doesNotExist('List filter does not show because no secrets exists.');
       // Page content correct
       assert.dom(PAGE.emptyStateTitle).hasText('No secrets yet');
-      assert.dom(PAGE.emptyStateActions).hasText('Create secret');
       assert.dom(PAGE.list.createSecret).hasText('Create secret');
 
-      // Click empty state CTA
-      await click(`${PAGE.emptyStateActions} a`);
-      assert.ok(
-        currentURL().startsWith(`/vault/secrets/${backend}/kv/create`),
-        `url includes /vault/secrets/${backend}/kv/create`
-      );
-
-      // Click cancel btn
-      await click(FORM.cancelBtn);
-      assert.ok(
-        currentURL().startsWith(`/vault/secrets/${backend}/kv/list`),
-        `url includes /vault/secrets/${backend}/kv/list`
-      );
-
       // click toolbar CTA
       await click(PAGE.list.createSecret);
       assert.ok(

ui/tests/helpers/oidc-config.js

@@ -37,7 +37,6 @@ export const SELECTORS = {
   scopeEditButton: '[data-test-oidc-scope-edit]',
   scopeDetailsTab: '[data-test-oidc-scope-details]',
   scopeEmptyState: '[data-test-oidc-scope-empty-state]',
-  scopeCreateButtonEmptyState: '[data-test-oidc-scope-create-empty-state]',
   scopeCreateButton: '[data-test-oidc-scope-create]',
 
   // key route

ui/tests/integration/components/kubernetes/page/roles-test.js

@@ -76,7 +76,6 @@ module('Integration | Component | kubernetes | Page::Roles', function (hooks) {
         'When created, roles will be listed here. Create a role to start generating service account tokens.',
         'Message renders'
       );
-    assert.dom('[data-test-empty-state-actions] a').hasText('Create role', 'Action renders');
   });
 
   test('it should render no matches filter message', async function (assert) {

ui/tests/integration/components/ldap/page/libraries-test.js

@@ -87,7 +87,6 @@ module('Integration | Component | ldap | Page::Libraries', function (hooks) {
         'Use libraries to manage a set of highly privileged accounts that can be shared among a team.',
         'Message renders'
       );
-    assert.dom('[data-test-empty-state-actions] a').hasText('Create library', 'Action renders');
   });
 
   test('it should render libraries list', async function (assert) {

ui/tests/integration/components/ldap/page/roles-test.js

@@ -89,7 +89,6 @@ module('Integration | Component | ldap | Page::Roles', function (hooks) {
         'Roles in Vault will allow you to manage LDAP credentials. Create a role to get started.',
         'Message renders'
       );
-    assert.dom('[data-test-empty-state-actions] a').hasText('Create role', 'Action renders');
   });
 
   test('it should render roles list', async function (assert) {