UI: Make empty state links consistent (#25209)

* round one of updating empty state actions * second round of empty states * update tests * add changelog
hashicorp · Feb 7, 2024 · e4d6759 · e4d6759
1 parent becb282
commit e4d6759
Show file tree

Hide file tree

Showing 51 changed files with 260 additions and 299 deletions.
diff --git a/changelog/25209.txt b/changelog/25209.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix inconsistent empty state action link styles
+```
diff --git a/ui/app/components/clients/no-data.hbs b/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}}
diff --git a/ui/app/templates/components/dashboard/quick-actions-card.hbs b/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>
diff --git a/ui/app/templates/components/dashboard/replication-card.hbs b/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>
diff --git a/ui/app/templates/components/dashboard/secrets-engines-card.hbs b/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>
diff --git a/ui/app/templates/components/database-connection.hbs b/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|}}

diff --git a/ui/app/templates/components/generate-credentials-database.hbs b/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}}

diff --git a/ui/app/templates/components/identity/item-metadata.hbs b/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}}
diff --git a/ui/app/templates/components/keymgmt/provider-edit.hbs b/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}}

diff --git a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs b/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 &quot;Create Alias&quot; to get started."
+    }} and click &quot;Add alias&quot; 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}}
diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/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"}}

diff --git a/ui/app/templates/vault/cluster/access/leases/error.hbs b/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 &quot;{{this.model.keyId}}&quot;. 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|}}

diff --git a/ui/app/templates/vault/cluster/access/oidc/clients/client/providers.hbs b/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}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/keys/key/clients.hbs b/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}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/providers/provider/clients.hbs b/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}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/scopes/index.hbs b/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}}
diff --git a/ui/app/templates/vault/cluster/access/reset-password-error.hbs b/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>
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/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}}

diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs b/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

diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs b/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>