[PM-12273] Admin Console Integration Page #11883

BTreston · 2024-11-06T18:55:30Z

🎟️ 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 living the 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 · 2024-11-06T19:07:07Z

Checkmarx One – Scan Summary & Details – 79d26721-8705-4b33-975c-50a85d5ad933

New Issues

Issue	Source File / Package	Checkmarx Insight
Client_Privacy_Violation	/apps/web/src/app/tools/access-intelligence/password-health-members.component.html: 105	Attack Vector
Client_Privacy_Violation	/apps/web/src/app/tools/access-intelligence/password-health-members.component.html: 100	Attack Vector
Client_Privacy_Violation	/apps/web/src/app/tools/access-intelligence/password-health-members.component.html: 105	Attack Vector
Client_Privacy_Violation	/apps/web/src/app/tools/access-intelligence/password-health-members.component.html: 110	Attack Vector
Client_JQuery_Deprecated_Symbols	/apps/cli/src/service-container/service-container.ts: 876	Attack Vector
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_Privacy_Violation	/apps/web/src/app/tools/risk-insights/password-health-members.component.html: 55
	Client_Privacy_Violation	/apps/web/src/app/tools/risk-insights/password-health-members.component.html: 50
	Client_Privacy_Violation	/apps/web/src/app/tools/risk-insights/password-health-members.component.html: 45
	Client_Privacy_Violation	/apps/web/src/app/tools/risk-insights/password-health-members.component.html: 50

codecov · 2024-11-06T19:19:31Z

Codecov Report

Attention: Patch coverage is 34.78261% with 45 lines in your changes missing coverage. Please review.

Project coverage is 33.46%. Comparing base (4b6f70a) to head (c088806).
Report is 3 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%	3 Missing ⚠️
...nizations/layouts/organization-layout.component.ts	50.00%	2 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.41%   33.46%   +0.05%     
==========================================
  Files        2871     2879       +8     
  Lines       89827    89903      +76     
  Branches    17105    17107       +2     
==========================================
+ Hits        30012    30086      +74     
+ Misses      57453    57442      -11     
- Partials     2362     2375      +13

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

🚨 Try these New Features:

JS Bundle Analysis - Avoid shipping oversized bundles

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?

apps/web/src/app/shared/components/integrations/integration-grid/integration-grid.component.ts

apps/web/src/app/shared/components/integrations/integrations.module.ts

apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.ts

apps/web/src/app/admin-console/organizations/organization-routing.module.ts

bitwarden_license/bit-web/src/app/secrets-manager/integrations/integrations.component.spec.ts

.../web/src/app/shared/components/integrations/integration-grid/integration-grid.component.html

...b/src/app/shared/components/integrations/integration-card/integration-card.component.spec.ts

eliykat · 2024-11-13T03:08:23Z

apps/web/src/app/shared/index.ts

@@ -1,2 +1,3 @@
 export * from "./shared.module";
 export * from "./loose-components.module";
+export * from "./components/integrations/integrations.module";


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

apps/web/src/app/shared/components/integrations/models.ts

…card template

apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts

apps/web/src/locales/en/messages.json

apps/web/src/app/shared/index.ts

Co-authored-by: Thomas Rittson <[email protected]>

eliykat

Great work, I appreciate you taking the time to tighten up the implementation and write stories.

There is one last thing to do: review (and approve) the changes in Chromatic. See the process here: https://contributing.bitwarden.com/contributing/pull-requests/chromatic but let me know if you have any questions. It's important that you do this before you merge, otherwise main will have unapproved Chromatic changes and it'll leak into everyone's development branches. (You can still approve it from main, it's just more disruptive to other devs.)

Once Chromatic changes are approved, the Chromatic PR checks should have a green tick next to them.

I see that there is some visual change (in Chromatic) to the Kitchen Sink story, but it seems minor and I can't see that you've done anything to cause it. But to be safe, I recommend asking #team-eng-design-system about that one. (EDIT: or something for @bitwarden/team-design-system to check when they review)

.storybook/main.ts

willmartian

DS changes looks good 👍

Had a few non-blocking thoughts on other files:

apps/web/src/app/admin-console/organizations/integrations/integrations.component.html

willmartian · 2024-11-19T14:27:20Z

apps/web/src/app/admin-console/organizations/integrations/integrations.component.html

+  </bit-tab>
+
+  <bit-tab [label]="'userProvisioning' | i18n">
+    <section class="tw-mb-9">


There is also a bit-section component in the DS if you want consistent spacing with other sections in the app. Not sure if this needs to be different or not. cc @bitwarden/dept-design

apps/web/src/app/admin-console/organizations/integrations/integrations.component.ts

willmartian · 2024-11-19T14:30:45Z

apps/web/src/app/shared/components/integrations/integration-card/integration-card.stories.ts

Thanks for writing a story 👏

…lients into ac/pm-12273-integration-page

willmartian

DS changes look good 👍

Hinton · 2024-11-22T15:47:03Z

Images are minified, no concerns from my side.

eliykat · 2024-11-25T03:50:58Z

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -108,6 +108,16 @@ export class OrganizationLayoutComponent implements OnInit {
          provider.providerStatus !== ProviderStatusType.Billable,
      ),
    );
+
+    this.integrationPageEnabled$ = this.organization$.pipe(
+      withLatestFrom(


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 · 2024-11-25T03:53:47Z

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

+      ),
+      map(
+        ([org, featrueFlagEnabled]) =>
+          org.productTierType === ProductTierType.Enterprise && featrueFlagEnabled,


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.

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

BTreston added 4 commits November 6, 2024 11:07

Integration page initial implementation

e58470c

replace placeholder integrations

57d1996

fix linting and tests

81545e6

fix locales

9950dcd

update locale

19c81ad

BTreston marked this pull request as ready for review November 6, 2024 19:12

BTreston requested review from a team as code owners November 6, 2024 19:12

BTreston requested review from justindbaur, jrmccannon, eliykat and r-tome November 6, 2024 19:12

Change logos, add link to SCIM page

757d9af

BTreston changed the title ~~Ac/pm 12273 integration page~~ [PM-12273] Admin Console Integration Page Nov 12, 2024

eliykat requested changes Nov 13, 2024

View reviewed changes

BTreston added 4 commits November 13, 2024 11:37

refactor to standalone components, add integration filtering pipe

7a001ff

refactor modules and imports. Remove hyperlink text from integration …

d08fcf4

…card template

refactor i18n usage to be more generic

d51fd2e

Add storybooks

00d2750

justindbaur previously approved these changes Nov 14, 2024

View reviewed changes

fix tests

bd17d12

BTreston dismissed justindbaur’s stale review via bd17d12 November 14, 2024 22:11

BTreston requested a review from eliykat November 14, 2024 22:19

Merge branch 'main' into ac/pm-12273-integration-page

5d783d1

BTreston requested a review from justindbaur November 14, 2024 22:23

eliykat removed the request for review from jrmccannon November 15, 2024 03:48

eliykat added the ee Create ephemeral environment for PR label Nov 15, 2024

BTreston requested review from eliykat and Hinton November 15, 2024 17:41

eliykat requested changes Nov 18, 2024

View reviewed changes

BTreston and others added 2 commits November 18, 2024 09:41

Update apps/web/src/locales/en/messages.json

068a143

Co-authored-by: Thomas Rittson <[email protected]>

fix imports, add static dir for stories

bef43a4

BTreston requested a review from a team as a code owner November 18, 2024 16:45

BTreston requested a review from eliykat November 18, 2024 16:46

eliykat previously approved these changes Nov 19, 2024

View reviewed changes

.storybook/main.ts Show resolved Hide resolved

willmartian previously approved these changes Nov 19, 2024

View reviewed changes

BTreston added 3 commits November 19, 2024 10:35

Merge branch 'main' into ac/pm-12273-integration-page

d337521

Add darkmode svgs for integrations

8ef5ceb

Merge branch 'ac/pm-12273-integration-page' of github.com:bitwarden/c…

c5e7916

…lients into ac/pm-12273-integration-page

BTreston dismissed stale reviews from eliykat and willmartian via c5e7916 November 21, 2024 15:05

BTreston requested review from eliykat and willmartian November 21, 2024 15:07

Merge branch 'main' into ac/pm-12273-integration-page

b3ca48a

willmartian previously approved these changes Nov 21, 2024

View reviewed changes

eliykat previously approved these changes Nov 22, 2024

View reviewed changes

Hinton removed their request for review November 22, 2024 15:47

Merge branch 'main' into ac/pm-12273-integration-page

fb3b903

BTreston dismissed stale reviews from eliykat and willmartian via fb3b903 November 22, 2024 18:02

hide nav link for non enterprise orgs

c088806

BTreston requested review from Hinton, eliykat and willmartian and removed request for Hinton November 22, 2024 19:36

eliykat reviewed Nov 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PM-12273] Admin Console Integration Page #11883

[PM-12273] Admin Console Integration Page #11883

BTreston commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

codecov bot commented Nov 6, 2024 •

edited

Loading

eliykat left a comment

eliykat Nov 13, 2024

eliykat left a comment •

edited

Loading

willmartian left a comment

willmartian Nov 19, 2024

willmartian Nov 19, 2024

willmartian left a comment

Hinton commented Nov 22, 2024

eliykat Nov 25, 2024

eliykat Nov 25, 2024

eliykat Nov 25, 2024

[PM-12273] Admin Console Integration Page #11883

Are you sure you want to change the base?

[PM-12273] Admin Console Integration Page #11883

Conversation

BTreston commented Nov 6, 2024 • edited Loading

🎟️ Tracking

📔 Objective

📸 Screenshots

⏰ Reminders before review

🦮 Reviewer guidelines

github-actions bot commented Nov 6, 2024 • edited Loading

New Issues

Fixed Issues

codecov bot commented Nov 6, 2024 • edited Loading

Codecov Report

eliykat left a comment

Choose a reason for hiding this comment

eliykat Nov 13, 2024

Choose a reason for hiding this comment

eliykat left a comment • edited Loading

Choose a reason for hiding this comment

willmartian left a comment

Choose a reason for hiding this comment

willmartian Nov 19, 2024

Choose a reason for hiding this comment

willmartian Nov 19, 2024

Choose a reason for hiding this comment

willmartian left a comment

Choose a reason for hiding this comment

Hinton commented Nov 22, 2024

eliykat Nov 25, 2024

Choose a reason for hiding this comment

eliykat Nov 25, 2024

Choose a reason for hiding this comment

eliykat Nov 25, 2024

Choose a reason for hiding this comment

BTreston commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

codecov bot commented Nov 6, 2024 •

edited

Loading

eliykat left a comment •

edited

Loading