Skip to content

[PM-40848] Add the shared folder card grid component (libs/vault) - #22390

Draft
jengstrom-bw wants to merge 8 commits into
mainfrom
vault/pm-40848/add-the-shared-folder-card-grid-component-libs-vault
Draft

[PM-40848] Add the shared folder card grid component (libs/vault)#22390
jengstrom-bw wants to merge 8 commits into
mainfrom
vault/pm-40848/add-the-shared-folder-card-grid-component-libs-vault

Conversation

@jengstrom-bw

@jengstrom-bw jengstrom-bw commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

🎟️ Tracking

Jira

📔 Objective

Add a standalone, presentational Angular component to libs/vault (@bitwarden/vault) that renders a shared folder's direct child folders as a responsive card grid. Each card is an anchor whose link is built via the host-provided RoutedVaultFilterService.createRoute (no navigate output, no hardcoded query param) and shows a folder icon, the folder name, and a trailing chevron. The first three rows always render; overflow rows collapse inside a bit-disclosure toggled by bitDisclosureTriggerFor, and because the revealed rows appear above the trigger, expanding is announced with LiveAnnouncer. The section header and count use the existing Vfo1I18nPipe, and the folder icon uses Vfo1TerminologyService (falling back to bwi-collection-shared until the collectionIconClass signal from PM-40193 lands). Do not re-add the feature flag or hardcode terminology/icons. The component fetches no data and has no loading state of its own. Mirror the composition of vault-add-item-grid, but use the responsive auto-fill / minmax(240px) layout up to 3 columns instead of its fixed breakpoints.

📸 Screenshots

Screenshot 2026-08-12 at 3 15 46 PM

@jengstrom-bw jengstrom-bw added ai-review-vnext Request a Claude code review using the vNext workflow t:feature Change Type - Feature Development labels Aug 12, 2026
@github-actions

github-actions Bot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

🤖 Bitwarden Claude Code Review

Overall Assessment: APPROVE

Re-reviewed SharedFolderCardGridComponent in libs/vault after the two latest UI commits (update spacing, add more vertical padding on card), plus the component spec, stories, the six new VFO1 keys in the web and desktop en locales, the new web-only showAll key, and the barrel export. The component remains presentational, standalone, signal-based, and OnPush; card hrefs are built through the host-provided RoutedVaultFilterService.createRoute inside a computed, so a terminology-flag flip recomputes both routes and copy; terminology and icons flow through Vfo1I18nPipe / Vfo1IconPipe; and expanding the overflow disclosure is still announced via LiveAnnouncer because the revealed rows render above the trigger. No security, correctness, or breaking-change findings.

Code Review Details

No findings.

Verified this pass: the previously flagged tw-mb-0 collision is resolved via the noMargin input that TypographyDirective exposes; linkType="default" is the non-deprecated variant of LinkComponent; the new tw-py-4 on bit-item-content does take effect over the directive's default tw-py-2 (Tailwind emits the larger spacing value later) while still yielding to bit-compact:tw-py-1.5; no duplicate keys were introduced in either locale file, and showAll/showLess already existed in desktop so only web needed showAll; collectionCount / sharedFolderCount follow the existing non-pluralized itemCount pattern in these locale files; the sentinel used to bold the count matches assign-collections.component.ts; folder names are interpolated (escaped) and only counts — never names — reach LiveAnnouncer.

Noted but not flagged (repeat of the earlier pass, since the spacing commit landed after it): removing tw-mb-3 from the header row while also adding noMargin to the h2 leaves zero vertical space between the header row and the first card row, since the grid ul carries tw-m-0. Worth one look against the design — the PR screenshot predates these spacing commits, so it does not show the current state.

@codecov

codecov Bot commented Aug 12, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 92.98246% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 53.65%. Comparing base (4845f9d) to head (e4be3f1).
⚠️ Report is 9 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...der-card-grid/shared-folder-card-grid.component.ts 92.85% 1 Missing and 3 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #22390      +/-   ##
==========================================
+ Coverage   53.45%   53.65%   +0.20%     
==========================================
  Files        4275     4288      +13     
  Lines      135303   136110     +807     
  Branches    21326    21503     +177     
==========================================
+ Hits        72328    73034     +706     
- Misses      57688    57728      +40     
- Partials     5287     5348      +61     

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

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ai-review-vnext Request a Claude code review using the vNext workflow t:feature Change Type - Feature Development

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant