[PM-12273] Admin Console Integration Page

[BTreston]

🎟️ Tracking

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

📔 Objective

This PR adds a new Integrations page in Admin console and refactors the Integration Card and Integration Grid components from living in Secrets Manager to being in Shared Components.

📸 Screenshots

Screen.Recording.2024-11-13.at.8.37.48.PM.mov

⏰ 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

[github-actions]

Checkmarx One – Scan Summary & Details – 83daac9b-c605-4267-a1ca-d3a5d4c658da

New Issues

Severity	Issue	Source File / Package	Checkmarx Insight
	Unsafe_Use_Of_Target_blank	/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html: 5	Attack Vector

Fixed Issues

Severity	Issue	Source File / Package
	Client_JQuery_Deprecated_Symbols	/apps/cli/src/service-container/service-container.ts: 876

[codecov]

Codecov Report

Attention: Patch coverage is 33.80282% with 47 lines in your changes missing coverage. Please review.

Project coverage is 33.53%. Comparing base (b25dc63) to head (0030483).
Report is 12 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...tions/integration-grid/integration-grid.stories.ts	0.00%	15 Missing ⚠️
...tions/integration-card/integration-card.stories.ts	0.00%	13 Missing ⚠️
...ganizations/integrations/integrations.component.ts	0.00%	10 Missing ⚠️
...nsole/organizations/organization-routing.module.ts	0.00%	4 Missing ⚠️
...nizations/layouts/organization-layout.component.ts	33.33%	2 Missing ⚠️
...le/organizations/guards/is-enterprise-org.guard.ts	50.00%	1 Missing ⚠️
...hared/components/integrations/integrations.pipe.ts	66.66%	1 Missing ⚠️
...ecrets-manager/integrations/integrations.module.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11883      +/-   ##
==========================================
- Coverage   33.53%   33.53%   -0.01%     
==========================================
  Files        2886     2891       +5     
  Lines       90157    90218      +61     
  Branches    17137    17138       +1     
==========================================
+ Hits        30234    30251      +17     
- Misses      57533    57578      +45     
+ Partials     2390     2389       -1     

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

[eliykat]

Great work!

I'm surprised we don't have any Storybook stories for the integration grid and card. Can you please add these? There are lots of examples (files ending in .stories.ts), or check out the Storybook documentation. That way it will show up at https://components.bitwarden.com (or npm run storybook locally).

Also, some of the logos look quite dark in dark mode (from your video). Can you please discuss with design and see if we can fix that somehow?

[eliykat]

Ideally you should have barrel files at each level, e.g. this would export * from "./components", then components would export * from "./integrations".

[eliykat]

I think combineLatest is a better fit here. It will emit all new values when any source observable emits, which is better for independent observables (e.g. an org and a feature flag state - you need both but they emit independently).

With your current use of withLatestFrom, if the feature flag updates during execution, it won't emit a new value until and unless the organization$ observable emits a new value (which it might never do, so you never get an updated emission).

[eliykat]

Is this right? Some integrations listed are available for Free and Teams orgs (e.g. Directory Connector is available for Teams, SM integrations are available for all plan types to my knowledge). We might need more granular logic for each section within the integration page. Can you check with Priya?

If that does need further work, you might consider merging your initial work (given that it's behind a feature flag) and then making these further changes in a separate PR.

[eliykat]

Navigation permissions should also be enforced at the routing level, see organizationPermissionsGuard. (There are lots of example uses.)

[BTreston]

@eliykat I've added the routing permissions and will merge this if its good to go. The org tier logic will come in a followup PR.

[vleague2]

Is the grid story supposed to be overlapped like this?