UI: HDS adoption replace Breadcrumbs #24387

hellobontempo · 2023-12-05T23:24:53Z

Replaces our old breadcrumb styles with the Hds::Breadcrumb component. Where possible, also updated breadcrumbs to be more accurate

current

before

…9/hds-adoption-replace-breadcrumbs

hellobontempo · 2023-12-05T23:27:03Z

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

-              </li>
-            </ul>
-          </nav>
+          <Hds::ButtonSet>


hellobontempo · 2023-12-05T23:30:09Z

ui/app/styles/components/empty-state-component.scss

@@ -53,9 +53,6 @@
  a,
  .link,
  a:not(.button):not(.file-delete-button):not(.tag) {
-    color: $blue;


Removing so styling properly applies to HDS elements yielded to empty state. Removing these styles also more closely align our existing empty state LinkTo elements to their HDS counterparts

hellobontempo · 2023-12-05T23:30:31Z

ui/app/styles/components/page-header-old.scss

@@ -26,7 +26,7 @@
  }

  .title {
-    margin-top: $spacing-36;
+    margin-top: $spacing-16;


Until we replace this component, reducing to match the gap: 16 that the HDS page header uses

hellobontempo · 2023-12-05T23:32:29Z

ui/lib/core/addon/components/key-value-header.hbs

This component should ultimately be replaced since all of the getters are overly robust and every instance I spot checked only rendered a single breadcrumb.

However, replacing felt outside the scope of this PR. As a stop-gap I replaced instances of this component that just yielded breadcrumbs and in this file just updated the stying

github-actions · 2023-12-05T23:46:36Z

Build Results:
All builds succeeded! ✅

hellobontempo · 2023-12-06T02:18:57Z

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

@@ -33,18 +31,11 @@
      @bottomBorder={{true}}
      @message={{@model.errorMessage}}
    >
-      <nav class="breadcrumb" aria-label="help breadcrumb">


See screenshot above for before + after - shouldn't have been breadcrumbs to begin with

hellobontempo · 2023-12-06T02:19:24Z

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

+        @route="vault.cluster.secrets.backend.overview"
+        @model={{@backendPath}}
+      />
+      <Hds::Breadcrumb::Item @text={{@roleName}} @current={{true}} />


In places where it made sense, I added a @current breadcrumb that matches the h1 tag

hellobontempo · 2023-12-06T02:23:45Z

ui/app/templates/components/generated-item-list.hbs

@@ -5,16 +5,10 @@

 <PageHeader as |p|>
  <p.top>
-    <KeyValueHeader @path="vault.cluster.access.methods">


I replaced KeyValueHeader components that yielded breadcrumbs, but left self-closing KeyValueHeader components and updated the hbs file

hellobontempo · 2023-12-06T03:30:56Z

ui/lib/core/addon/components/page/breadcrumbs.js

made typescript

hellobontempo · 2023-12-06T03:45:36Z

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

@@ -5,16 +5,14 @@

 <PageHeader as |p|>
  <p.top>
-    <nav class="breadcrumb" aria-label="breadcrumbs">


before + after

Monkeychip · 2023-12-06T16:46:55Z

ui/app/styles/core.scss

Monkeychip · 2023-12-06T16:56:39Z

ui/app/templates/vault/cluster/access/mfa/methods/create.hbs

-    </nav>
+    <Hds::Breadcrumb>
+      <Hds::Breadcrumb::Item @text="Methods" @route="vault.cluster.access.mfa.methods.index" />
+      <Hds::Breadcrumb::Item @text="Configure MFA Method" @current={{true}} />


It appears (ex: Auth methods) we're not title casing the Breadcrumbs text (e.g. Auth Methods vs Auth methods). So here, should it be "Configure MFA method"?

Monkeychip · 2023-12-06T16:59:00Z

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

+              @icon="learn-link"
+              @iconPosition="trailing"
+              @color="secondary"
+              @text="Disaster recovery tutorial"


so much better than "Need help?"

Monkeychip · 2023-12-06T17:07:18Z

ui/lib/core/addon/components/page/breadcrumbs.hbs

+      @models={{breadcrumb.models}}
+      @query={{breadcrumb.query}}
+      @isRouteExternal={{breadcrumb.linkExternal}}


thank you for the comment!

Monkeychip · 2023-12-06T17:07:50Z

ui/lib/core/addon/components/page/breadcrumbs.ts

way to typescript this! It does help to see the types for params.

Monkeychip

Really great work. Very detailed and lots of small cleanup along the way. Thank you!

hellobontempo added 23 commits December 4, 2023 15:30

upgrade to 3.1.0

d64e180

VAULT-22471 upgrade to latest version

2ca429f

fix other selectors

8b100ab

fix pki tests

f95fa5a

fix copy dropdown

d82a08e

generated breadcrumbs

49503ed

mfa crumbs

2a76e6f

oidc crumbs

3a53965

identity crumbs

51964b8

use hds crumbs in page::breadcrumbs file

ac538ef

rename selectors to be consistent

6468fba

Merge branch 'ui/hds-adoption-replace-breadcrumbs' into ui/VAULT-1730…

af30e58

…9/hds-adoption-replace-breadcrumbs

remaining oidc

6df616b

update empty state link style to match hds

f134619

repl empty state

ffc4453

rep empty state 2

0f4749e

policy and secret error template

4696d09

replace yielded KeyValueHeader elements directly with HDS breadcrumbs

d501d16

remove yield from KeyValueHeader

b35f45b

use key value header in secret header

ad57a58

update pki header

efcbc50

kmip breadcrumbs

9b89fcb

replace key-value-header classes

8e6bf40

hellobontempo added the ui label Dec 5, 2023

hellobontempo added this to the 1.16.0-rc1 milestone Dec 5, 2023

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Dec 5, 2023

Merge branch 'main' into ui/VAULT-17309/hds-adoption-replace-breadcrumbs

f6806c9

hellobontempo commented Dec 5, 2023

View reviewed changes

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

</li>

</ul>

</nav>

<Hds::ButtonSet>

Copy link

Contributor Author

hellobontempo Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hellobontempo commented Dec 5, 2023

View reviewed changes

replace key value with breadcrumbs

e187d7d

hellobontempo commented Dec 5, 2023

View reviewed changes

hellobontempo added 3 commits December 5, 2023 17:37

update selectors part 1

d9ea21d

add a tags

a46003b

policy tests

1a312dd

hellobontempo commented Dec 6, 2023

View reviewed changes

hellobontempo added 6 commits December 5, 2023 18:24

add crumb index back

d50d8fa

add current route to generated item

7a867c8

another round of test updates

ad57846

remove root link test selector

40a14bf

secrets/secrete test

d47f8c6

add changelog

e6763e4

hellobontempo commented Dec 6, 2023

View reviewed changes

ui/lib/core/addon/components/page/breadcrumbs.js Outdated

Copy link

Contributor Author

hellobontempo Dec 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

made typescript

hellobontempo commented Dec 6, 2023

View reviewed changes

hellobontempo added 2 commits December 5, 2023 19:46

trailing icon

092b0a8

delete breadcrumb css

fbaf257

Monkeychip reviewed Dec 6, 2023

View reviewed changes

ui/app/styles/core.scss Outdated

Copy link

Contributor

Monkeychip Dec 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

Monkeychip reviewed Dec 6, 2023

View reviewed changes

Monkeychip approved these changes Dec 6, 2023

View reviewed changes

hellobontempo added 2 commits December 6, 2023 10:11

consistently change to sentence case

9f23dfd

titlsecase!

f179137

hellobontempo merged commit 3403203 into main Dec 6, 2023

hellobontempo deleted the ui/VAULT-17309/hds-adoption-replace-breadcrumbs branch December 6, 2023 18:56

hellobontempo mentioned this pull request Dec 6, 2023

UI: Update breadcrumb selectors for enterprise tests #24410

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: HDS adoption replace Breadcrumbs #24387

UI: HDS adoption replace Breadcrumbs #24387

hellobontempo commented Dec 5, 2023

hellobontempo Dec 5, 2023

hellobontempo Dec 5, 2023 •

edited

Loading

hellobontempo Dec 5, 2023

hellobontempo Dec 5, 2023 •

edited

Loading

github-actions bot commented Dec 5, 2023

hellobontempo Dec 6, 2023 •

edited

Loading

hellobontempo Dec 6, 2023 •

edited

Loading

hellobontempo Dec 6, 2023

hellobontempo Dec 6, 2023

hellobontempo Dec 6, 2023

hellobontempo Dec 6, 2023

Monkeychip Dec 6, 2023

Monkeychip Dec 6, 2023

Monkeychip Dec 6, 2023

Monkeychip Dec 6, 2023

Monkeychip Dec 6, 2023

Monkeychip left a comment

UI: HDS adoption replace Breadcrumbs #24387

UI: HDS adoption replace Breadcrumbs #24387

Conversation

hellobontempo commented Dec 5, 2023

current

before

Choose a reason for hiding this comment

hellobontempo Dec 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hellobontempo Dec 5, 2023 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Dec 5, 2023

hellobontempo Dec 6, 2023 • edited Loading

Choose a reason for hiding this comment

hellobontempo Dec 6, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Monkeychip left a comment

Choose a reason for hiding this comment

hellobontempo Dec 5, 2023 •

edited

Loading

hellobontempo Dec 5, 2023 •

edited

Loading

hellobontempo Dec 6, 2023 •

edited

Loading

hellobontempo Dec 6, 2023 •

edited

Loading