[PM-10439] Vault generator components

[nick-livefront]

🎟️ Tracking

PM-10439

📔 Objective

Integrate the PasswordGeneratorComponent and UsernameGeneratorComponent into the web & browser vaults.

• Added the needed translations for the web
• There are some interesting scenarios occurring with the generation functionality, some of which still appears to be in flight.

📸 Screenshots

Extension	Web
Screen.Recording.2024-10-01.at.3.22.35.PM.mov	Screen.Recording.2024-10-01.at.3.20.08.PM.mov

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[github-actions]

Checkmarx One – Scan Summary & Details – 1f80dad2-77ce-4c98-a583-5d0ef4d5ad58

No New Or Fixed Issues Found

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 33.24%. Comparing base (229b712) to head (488b12c).
Report is 11 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11350      +/-   ##
==========================================
- Coverage   33.27%   33.24%   -0.04%     
==========================================
  Files        2729     2729              
  Lines       85547    85521      -26     
  Branches    16318    16310       -8     
==========================================
- Hits        28469    28433      -36     
- Misses      54817    54830      +13     
+ Partials     2261     2258       -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[shane-melton]

Vault implementation looks good! Love how easy it is to use the new generator components! 🎉

One odd thing I noticed though; in your demo, the the values do not automatically regenerate in the Web client when settings are modified. However, they do in your browser extension 🤔. I don't see anything different between the client implementation on our end, so I suspect there may be something internal going awry with the new generator components.

I don't think this is blocking for this PR, but wanted to make note of it.

cc: @danielleflinn

[audreyality]

Vault implementation looks good! Love how easy it is to use the new generator components! 🎉

One odd thing I noticed though; in your demo, the the values do not automatically regenerate in the Web client when settings are modified. However, they do in your browser extension 🤔. I don't see anything different between the client implementation on our end, so I suspect there may be something internal going awry with the new generator components.

I don't think this is blocking for this PR, but wanted to make note of it.

cc: @danielleflinn

The username component logic introduced a bug in the password component. I think fixing that should also fix the behavior you see in the web demo. That said, web support is out of scope of the password generator UI modernization. You may need to invoke the generator service manually in that environment if the behavior persists. (I don't think it will--the username component updates the way I'd expect it to.)

[danielleflinn]

Agree with Shane's comment that the behavior is not blocking

A few UI nits I noticed @nick-livefront

1. Please make sure the generator dialogs are using https://components.bitwarden.com/?path=/story/component-library-dialogs-dialog--with-cards so the background is slightly darker than the card elements
2. Is the extra spacing below the generator content in the web app coming from the bit-section (we have a fix to reduce this in the feature branch, but just want to make sure that is what is causing it)?

[nick-livefront]

1. Please make sure the generator dialogs are using https://components.bitwarden.com/?path=/story/component-library-dialogs-dialog--with-cards so the background is slightly darker than the card elements

Fixed! 4f3e31b

2. Is the extra spacing below the generator content in the web app coming from the bit-section (we have a fix to reduce this in the feature branch, but just want to make sure that is what is causing it)?

Yes! Removed here: fde20b6

@danielleflinn To be safe, here's screenshots of the dialog on top of the ps/extension-refresh branch.

Password	Passphrase	Username

@audreyality While removing the margin that Danielle spotted above, I noticed that the username component had a div that had extra margin on it. This isn't needed because of the bit-section used above it provides margin. In this case the margin collapses and the div margin doesn't impact spacing, as shown in this video:

Screen.Recording.2024-10-02.at.9.12.51.PM.mov

[shane-melton]

💭 Hmm, hopefully we can get rid of these in the future as it seems somewhat brittle if the settings sections every change or the general layout of the tools- generator components change.

[nick-livefront]

Great point. Another option could be to add a prop to the two generator components to disable the trailing margin that way.

@audreyality What do you think about that?

[audreyality]

Shane's right. You shouldn't be adjusting the inner margins of the control. So long as this effects web only, and is a minor visual artifact, it's a non-issue. Please do not modify the controls. I'll address this when we get to incorporating web support.

[nick-livefront]

@audreyality Sounds good! Do you have an epic you're working off of or a ticket for web integration. That way I can get ahead of our QA pointing it out 😄

[audreyality]

You can track bugs as a "QA Bug" subtask on the layout update story. If you want more visibility than a subtask, track a bug against the parent epic.

[nick-livefront]

🚀 PM-13132 has been wrote to account for the spacing

[nick-livefront]

@audreyality While removing the margin that Danielle spotted above, I noticed that the username component had a div that had extra margin on it.

That's there because the section headers can be disabled. When they don't render, the margin uncollapses to preserve spacing with whatever the parent becomes. (I don't think I've added it to the username component yet, but you can see it on the password options components.)

👍 Good to know! This can be worked through as a part of the spacing bug as well. Thanks @audreyality !

[shane-melton]

Looks good, thanks! 🚀