UI: Update TOTP Code Generation + Details Flow #30123

lane-wetmore · 2025-03-31T17:28:07Z

Description

This PR updates the flow of generating a code and viewing the details page to align with the latest design. It also adds component tests.

Previously when selecting an item from the list, it would navigate to the code generation view. Now, it will navigate to the details view.

TOTP.details.view.mov

The code generation page can be accessed two ways: 1. By clicking the Generate Code menu dropdown option in the list view and 2. Clicking Generate code on the details view.

TOTP.generate.code.mov

TODO only if you're a HashiCorp employee

Backport Labels: If this fix needs to be backported, use the appropriate backport/ label that matches the desired release branch. Note that in the CE repo, the latest release branch will look like backport/x.x.x, but older release branches will be backport/ent/x.x.x+ent.
- LTS: If this fixes a critical security vulnerability or severity 1 bug, it will also need to be backported to the current LTS versions of Vault. To ensure this, use all available enterprise labels.
ENT Breakage: If this PR either 1) removes a public function OR 2) changes the signature
of a public function, even if that change is in a CE file, double check that
applying the patch for this PR to the ENT repo and running tests doesn't
break any tests. Sometimes ENT only tests rely on public functions in CE
files.
Jira: If this change has an associated Jira, it's referenced either
in the PR description, commit message, or branch name.
RFC: If this change has an associated RFC, please link it in the description.
ENT PR: If this change has an associated ENT PR, please link it in the
description. Also, make sure the changelog is in this PR, not in your ENT PR.

github-actions · 2025-03-31T17:54:13Z

CI Results:
All Go tests succeeded! ✅

…-Generate-Flow

github-actions · 2025-04-02T17:23:23Z

Build Results:
All builds succeeded! ✅

zofskeez · 2025-04-02T20:36:21Z

ui/app/components/generate-credentials-totp.js

+  @action redirectPreviousPage() {
+    window.history.back();
+  }


Curious on the decision to not use the router here and thinking of some potential issues. One possibility is a user direct linking from somewhere other than Vault and if they are authenticated then history.back() would then take them out of Vault. Another case might be if there was previously a redirect to the login route (token expired) and on successful login the user is returned here, they would then be taken back to the login.

plus one to this, we should know where the user goes in this case and do something like this in the template or like this in the component

Those are good points. I had looked at this for reference, but it seems like it doesn't suit this case.

I'll add a comment explaining this, but the reason I added this and removed the direct route was that there are two pages that enter this code generation view. So I wanted the back button to navigate the user to either the details view or the list view depending on which one the user came from.

I ended up grabbing the previous route and passing it along from the route file. Let me know what you think 😄

zofskeez · 2025-04-02T20:37:25Z

ui/app/components/totp-edit.js

    } catch (err) {
-      // err will display via model state
-      return;
+      this.flashMessages.danger(errorMessage(err));


zofskeez · 2025-04-02T20:38:55Z

ui/tests/helpers/general-selectors.ts

@@ -34,6 +34,7 @@ export const GENERAL = {
  emptyStateMessage: '[data-test-empty-state-message]',
  emptyStateActions: '[data-test-empty-state-actions]',
  menuTrigger: '[data-test-popup-menu-trigger]',
+  menuItem: (name: string) => `[data-test-popup-menu="${name}"]`,


This seems like a common thing to click. Thanks for adding it in here!

zofskeez · 2025-04-02T20:40:06Z

ui/tests/integration/components/totp/key-form-test.js

Nice job with the test coverage!

beagins · 2025-04-02T20:33:39Z

ui/app/components/generate-credentials-totp.js

@@ -58,4 +59,8 @@ export default class GenerateCredentialsTotp extends Component {
      return;
    }
  }
+
+  @action redirectPreviousPage() {
+    window.history.back();


Is it possible to accomplish this utilizing the router instead? like

export default class GenerateCredentialsTotp extends Component { @service router; ... @action redirectPreviousPage() { router.goBack(); }

I was thinking about this as well. I don't know if the ember router has a back method, but you can explicitly choose point it back to the TOTP list page with transitionTo

I ended up grabbing the previous route and passing it along from the route file. Let me know what you think 😄

ui/tests/acceptance/secrets/backend/totp/key-test.js

emoncuso

Just one quick modernization change!

Otherwise looks good!

emoncuso · 2025-04-02T20:37:58Z

ui/app/components/generate-credentials-totp.hbs

@@ -40,8 +40,7 @@
    <Hds::Button
      @text="Back"
      @color="secondary"
-      @route="vault.cluster.secrets.backend.list-root"
-      @model={{this.backendPath}}
+      {{on "click" (action "redirectPreviousPage")}}


You should be able to use the more modern style

Suggested change

{{on "click" (action "redirectPreviousPage")}}

{{on "click" this.redirectPreviousPage}}

hellobontempo · 2025-04-02T21:26:21Z

ui/app/components/totp-edit.js

@@ -70,11 +71,10 @@ export default class TotpEdit extends Component {
    try {
      await this.args.model.destroyRecord();
      this.transitionToRoute(LIST_ROOT_ROUTE);
+      this.flashMessages.success(`${this.args.model.id} was successfully deleted.`);


does this render as expected? since the model is destroyed, i'm not sure id will have a value. we could save it as a const above line 72 and interpolate that here instead

It does, but I could see that being a bit uncertain, so I can update it just to be safe

I think if the transition was awaited that would be the case but since it's synchronous the component isn't torn down before this fires (disclaimer: haven't actually tested 😁). But I agree that from a code flow standpoint it would be better to move it before.

Co-authored-by: Shannon Roberts (Beagin) <beagins@users.noreply.github.com>

emoncuso · 2025-04-02T20:58:04Z

ui/app/components/generate-credentials-totp.js

@@ -58,4 +59,8 @@ export default class GenerateCredentialsTotp extends Component {
      return;
    }
  }
+
+  @action redirectPreviousPage() {
+    window.history.back();


I was thinking about this as well. I don't know if the ember router has a back method, but you can explicitly choose point it back to the TOTP list page with transitionTo

lane-wetmore added 3 commits March 24, 2025 14:05

match read key and generate code flow to design

c368b07

add qr code view to acceptance tests

e1def1b

add component tests

474a0fd

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Mar 31, 2025

lane-wetmore added 5 commits April 1, 2025 11:55

remove unneeded variables

4596e21

add backend and id

2ec82a2

updated tests

1989e18

flash error message in delete key

74bbed6

move test selector

b155da9

lane-wetmore marked this pull request as ready for review April 2, 2025 17:18

lane-wetmore requested a review from a team as a code owner April 2, 2025 17:18

Merge branch 'ui-totp-sidebranch' into ui/VAULT-34069-Update-Read-and…

158b874

…-Generate-Flow

vercel bot deployed to Preview April 2, 2025 17:26 View deployment

lane-wetmore added 2 commits April 2, 2025 14:33

add generate code link from details view

b253d9e

update back button to be dynamic

3361167

zofskeez reviewed Apr 2, 2025

View reviewed changes

beagins reviewed Apr 2, 2025

View reviewed changes

emoncuso approved these changes Apr 2, 2025

View reviewed changes

hellobontempo reviewed Apr 2, 2025

View reviewed changes

lane-wetmore changed the title ~~UI/vault 34069 update read and generate flow~~ UI: Update TOTP Code Generation + Details Flow Apr 2, 2025

Update ui/tests/acceptance/secrets/backend/totp/key-test.js

e2eaf6f

Co-authored-by: Shannon Roberts (Beagin) <beagins@users.noreply.github.com>

emoncuso requested changes Apr 2, 2025

View reviewed changes

save id for success message and update routing for back button

21ef510

lane-wetmore requested review from emoncuso, beagins, hellobontempo and zofskeez April 3, 2025 20:30

hellobontempo approved these changes Apr 15, 2025

View reviewed changes

lane-wetmore merged commit 9185dd9 into ui-totp-sidebranch Apr 15, 2025
25 checks passed

lane-wetmore deleted the ui/VAULT-34069-Update-Read-and-Generate-Flow branch April 15, 2025 17:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Update TOTP Code Generation + Details Flow #30123

UI: Update TOTP Code Generation + Details Flow #30123

lane-wetmore commented Mar 31, 2025 •

edited

Loading

github-actions bot commented Mar 31, 2025 •

edited

Loading

github-actions bot commented Apr 2, 2025

zofskeez Apr 2, 2025

hellobontempo Apr 2, 2025 •

edited

Loading

lane-wetmore Apr 2, 2025

lane-wetmore Apr 2, 2025

lane-wetmore Apr 3, 2025

zofskeez Apr 2, 2025

zofskeez Apr 2, 2025

zofskeez Apr 2, 2025

beagins Apr 2, 2025

emoncuso Apr 2, 2025

lane-wetmore Apr 4, 2025

emoncuso left a comment

emoncuso Apr 2, 2025

hellobontempo Apr 2, 2025

lane-wetmore Apr 2, 2025

zofskeez Apr 2, 2025

emoncuso Apr 2, 2025

	{{on "click" (action "redirectPreviousPage")}}
	{{on "click" this.redirectPreviousPage}}

UI: Update TOTP Code Generation + Details Flow #30123

UI: Update TOTP Code Generation + Details Flow #30123

Conversation

lane-wetmore commented Mar 31, 2025 • edited Loading

Description

TODO only if you're a HashiCorp employee

github-actions bot commented Mar 31, 2025 • edited Loading

github-actions bot commented Apr 2, 2025

Choose a reason for hiding this comment

hellobontempo Apr 2, 2025 • 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

emoncuso left a 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

lane-wetmore commented Mar 31, 2025 •

edited

Loading

github-actions bot commented Mar 31, 2025 •

edited

Loading

hellobontempo Apr 2, 2025 •

edited

Loading