SM-1146: Display total counts of projects, machine accounts, secrets in Secrets Manager

[mzieniukbw]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/SM-1146

📔 Objective

Display total counts of projects, machine accounts, secrets in Secrets Manager:

• Navigation: Projects, Secrets, Machine accounts
• Organization overview: Projects, Secrets
• Project details: Secrets, People, Machine accounts
• Machine account details: Projects, People, Access Tokens

Notes

• libs/components/src/tabs/tab-nav-bar/tab-link.component.html Added explicit end slot, so the total counts can have it's own styles. By default excluding hover underline.
• See server PR https://github.com/bitwarden/server/pull/4200

📸 Screenshots

Navigation and Organization overview:

Project details

Machine account details

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 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

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 42.62295% with 70 lines in your changes missing coverage. Please review.

Project coverage is 32.05%. Comparing base (dcb21c2) to head (969f8ec). Report is 2 commits behind head on main.

Files	Patch %	Lines
...app/secrets-manager/layout/navigation.component.ts	0.00%	26 Missing :warning:
...ager/service-accounts/service-account.component.ts	0.00%	12 Missing :warning:
...ts-manager/settings/porting/sm-import.component.ts	0.00%	12 Missing :warning:
...rets-manager/projects/project/project.component.ts	0.00%	11 Missing :warning:
...app/secrets-manager/overview/overview.component.ts	0.00%	6 Missing :warning:
...anager/settings/services/sm-porting-api.service.ts	87.50%	0 Missing and 1 partial :warning:
...app/secrets-manager/shared/counts/count.service.ts	92.30%	0 Missing and 1 partial :warning:
libs/components/src/tabs/tabs.stories.ts	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9791      +/-   ##
==========================================
+ Coverage   31.83%   32.05%   +0.22%     
==========================================
  Files        2629     2633       +4     
  Lines       80045    80117      +72     
  Branches    15102    15106       +4     
==========================================
+ Hits        25480    25684     +204     
+ Misses      52593    52452     -141     
- Partials     1972     1981       +9     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

Checkmarx One – Scan Summary & Details – c9b2421a-ed0d-4c67-bfba-e0806a50731c

No New Or Fixed Issues Found

[mzieniukbw]

Hey @mzieniukbw! Could you add a story that showcase the new feature?

@bitwarden/dept-design could this be added to the tab's Figma spec?

@willmartian

Added with https://github.com/bitwarden/clients/pull/9791/commits/2f743cabbbb1c05cc92ff9e1456811fa9ae91a2e

Screenshot: Note: I noticed a bug that the content of the tab does not display in one theme when both Light & Dark themes are selected. It was there before i made the change.

[mzieniukbw]

@willmartian I had to make the slot conditional, due to a defect (SM-1337) and i have found that the implementation with the endSlot.childElementCount causes angular exception. This is because the condition is async, the div component renders empty first and then updates, causes the angular change detection, which apparently does not work out of the box - was getting NG0100 complaining about 'tw-hidden' being added. I could not get this working correctly, since it's a chicken-egg scenario and did not want to go with the programatic way, so i just changed it to empty:tw-hidden. See change in https://github.com/bitwarden/clients/pull/9791/commits/076102992cc88588a0454284523e9dfb9a96fc34

Note that this will actually not hide the slot's content from rendering when ngIf is used on the slot, since empty selector only works when there is 0 characters (including whitespaces and html comments). Angular community is aware of this issue and it actually got fixed with angular v18 PR.

For reference this is how it looks when ngIf is used (does not cause any visible changes as to was before, just empty space):

if you have any other idea on how to fix this or you prefer to hide it programatically, i am open to suggestions.

[mzieniukbw]

@coltonhurst I have modified the SM import error handling that you have wrote a while ago, since i could not get it working with projects for the Unit Test in https://github.com/bitwarden/clients/pull/9791/commits/bddc739fed9b7e671e4ae067fad85bb4d9c18407 I have also tested the success and edge cases on various scenarios (like missing fields, invalid format of the data) both in projects and secrets and it works fine now. Appreciate any feedback on this.

[jtouchstonebw]

Hey @mzieniukbw! Could you add a story that showcase the new feature?

@bitwarden/dept-design could this be added to the tab's Figma spec?

The legacy tailwind figma has been updated with examples. Working on the other figma library atm.

[mzieniukbw]

I had to run prettier to fix the linting issue which updated loads of files and added a lot of teams as reviewers. I have removed them now from reviewers. I can imagine this would also fail on main ?

[Thomas-Avery]

I had to run prettier to fix the linting issue which updated loads of files and added a lot of teams as reviewers. I have removed them now from reviewers. I can imagine this would also fail on main ?

Looks like that is now fixed.

[jtouchstonebw]

Hey @mzieniukbw! Could you add a story that showcase the new feature? @bitwarden/dept-design could this be added to the tab's Figma spec?

The legacy tailwind figma has been updated with examples. Working on the other figma library atm.

Following up on this @willmartian - the Figma spec has been updated to show the configuration/variant for including count in tab content.

[mzieniukbw]

@willmartian could you approve if everything looks ok ? The changes have been QA tested, waiting for approvals.