[PM-26031] Drawer Service State Refactoring

[AlexRubik]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-26031

📔 Objective

Jira Description:
The draft pull request includes changes to the drawer state to be more easily consumable. This scope of this ticket is to capture the changes made to the drawer state and usage across components.

Changes in scope:

Create the drawerDetailsSubject in the RiskInsightsDataService and update the usage regarding this state

• See the Drawer functions section in the data service

Update angular components that are using this state

• Take note of the special case getters in the risk-insights.component.ts file for syncing the drawer state to the service state

---

Refactors the Risk Insights drawer state management from individual properties to a unified reactive observable pattern, improving maintainability and performance. Based on patterns established in draft PR #16005.

Changes by File:

Core Service Layer

• risk-insights-data.service.ts:
  • Replaced 6 individual drawer properties (openDrawer, drawerInvokerId, etc.) with unified drawerDetailsSubject BehaviorSubject
  • Added reactive Observable getters (drawerDetails$, isActiveDrawerType$(), isDrawerOpenForInvoker$())
  • Implemented smart toggle logic in drawer setter methods to preserve click-to-toggle UX
  • Centralized all drawer state management in single typed DrawerDetails object

Main Component Integration

• risk-insights.component.ts:

  • Added special case getter/setter for isDrawerOpen to sync component two-way binding with service state
  • Implemented subscription to drawerDetails$ with takeUntilDestroyed() cleanup
  • Enables reactive patterns while maintaining template simplicity

• risk-insights.component.html:

  • Replaced direct property access with @if (dataService.drawerDetails$ | async; as drawerDetails) pattern
  • Updated isActiveDrawerType() calls to reactive isActiveDrawerType$() | async
  • Uses unified drawerDetails object throughout template for better performance

Applications Components

• all-applications.component.html & critical-applications.component.html:

  • Replaced dataService.drawerInvokerId comparisons with (dataService.drawerDetails$ | async)?.invokerId
  • Updated table component bindings from function callbacks to direct reactive properties

• all-applications.component.ts & critical-applications.component.ts:

  • Removed deprecated isDrawerOpenForTableRow() and trackByFunction() methods
  • Cleaned up unused imports for better code hygiene

Table Component

⚠️ These changes might be conflicting with this pending PR for PM-25616. I lean towards pulling in the current/target PR (PM-26031, drawer refactor) and resolving potential conflicts in the separate scrollable table pr (25616).

• app-table-row-scrollable.component.ts:

  • Updated input from isDrawerIsOpenForThisRecord function to openApplication string property
  • Simplifies component interface and improves performance

• app-table-row-scrollable.component.html:

  • Replaced all function calls with direct string comparisons (row.applicationName === openApplication)
  • Eliminates 9 function calls per table row for better rendering performance

Key Benefits

• Reactive Architecture: All drawer state now uses Observable patterns for automatic updates
• Performance: Eliminated function calls in templates with direct property comparisons
• Type Safety: Unified DrawerDetails interface provides strong typing throughout
• Maintainability: Centralized state management makes future changes easier
• UX Preservation: Maintains original toggle behavior (click same button twice to close)

Testing Notes

• All linting passes with no errors
• Prettier formatting verified across all files
• Drawer toggle behavior preserved (open/close/switch functionality)
• Reactive updates work automatically when drawer state changes

⏰ 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]

Codecov Report

❌ Patch coverage is 0% with 38 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.29%. Comparing base (8ba22f3) to head (3e28619).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...sk-insights/services/risk-insights-data.service.ts	0.00%	27 Missing ⚠️
...irt/access-intelligence/risk-insights.component.ts	0.00%	9 Missing ⚠️
.../access-intelligence/all-applications.component.ts	0.00%	1 Missing ⚠️
...ss-intelligence/critical-applications.component.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #16580      +/-   ##
==========================================
- Coverage   38.30%   38.29%   -0.01%     
==========================================
  Files        3404     3404              
  Lines       97592    97591       -1     
  Branches    14683    14692       +9     
==========================================
- Hits        37380    37373       -7     
- Misses      58585    58591       +6     
  Partials     1627     1627              

☔ View full report in Codecov by Sentry.
📢 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.

[github-actions]

Checkmarx One – Scan Summary & Details – 3db09267-fc4e-4159-abb9-8cd94f7e486f

Great job! No new security vulnerabilities introduced in this pull request

[Banrion]

Added some comments to improve duplicate subscriptions. You can most likely remove the observable function that checks the drawer type if it's not used outside of the components.

[Banrion]

⚠️ Avoid multiple subscriptions via dataService.drawerDetails$ | async). Each async usage creates a new subscription. You can create a variable above the card to capture the drawer details in the html.

[Banrion]

⚠️ Use drawerDetails with boolean function

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud