[PM-12273] Admin Console Integration Page (#11883)

* Integration page initial implementation

* replace placeholder integrations

* fix linting and tests

* fix locales

* update locale

* Change logos, add link to SCIM page

* refactor to standalone components, add integration filtering pipe

* refactor modules and imports. Remove hyperlink text from integration card template

* refactor i18n usage to be more generic

* Add storybooks

* fix tests

* minify svgs, include spec files in TS config, fix stories

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

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* fix imports, add static dir for stories

* Add darkmode svgs for integrations

* hide nav link for non enterprise orgs

* add router guard

* change rxjs selector

* Remove tailwind class causing style issues

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.spec.ts

@@ -59,8 +59,14 @@ describe("Is Enterprise Org Guard", () => {
           {
             path: "organizations/:organizationId/enterpriseOrgsOnly",
             component: IsEnterpriseOrganizationComponent,
-            canActivate: [isEnterpriseOrgGuard()],
+            canActivate: [isEnterpriseOrgGuard(true)],
           },
+          {
+            path: "organizations/:organizationId/enterpriseOrgsOnlyNoError",
+            component: IsEnterpriseOrganizationComponent,
+            canActivate: [isEnterpriseOrgGuard(false)],
+          },
+
           {
             path: "organizations/:organizationId/billing/subscription",
             component: OrganizationUpgradeScreenComponent,
@@ -115,6 +121,24 @@ describe("Is Enterprise Org Guard", () => {
     );
   });
 
+  it.each([
+    ProductTierType.Free,
+    ProductTierType.Families,
+    ProductTierType.Teams,
+    ProductTierType.TeamsStarter,
+  ])("does not proceed with the navigation for productTierType '%s'", async (productTierType) => {
+    const org = orgFactory({
+      type: OrganizationUserType.User,
+      productTierType: productTierType,
+    });
+    organizationService.get.calledWith(org.id).mockResolvedValue(org);
+    await routerHarness.navigateByUrl(`organizations/${org.id}/enterpriseOrgsOnlyNoError`);
+    expect(dialogService.openSimpleDialog).not.toHaveBeenCalled();
+    expect(
+      routerHarness.routeNativeElement?.querySelector("h1")?.textContent?.trim() ?? "",
+    ).not.toBe("This component can only be accessed by a enterprise organization!");
+  });
+
   it("proceeds with navigation if the organization in question is a enterprise organization", async () => {
     const org = orgFactory({ productTierType: ProductTierType.Enterprise });
     organizationService.get.calledWith(org.id).mockResolvedValue(org);

apps/web/src/app/admin-console/organizations/guards/is-enterprise-org.guard.ts

@@ -17,7 +17,7 @@ import { DialogService } from "@bitwarden/components";
  * if they have access to upgrade the organization. If the organization is
  * enterprise routing proceeds."
  */
-export function isEnterpriseOrgGuard(): CanActivateFn {
+export function isEnterpriseOrgGuard(showError: boolean = true): CanActivateFn {
   return async (route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
     const router = inject(Router);
     const organizationService = inject(OrganizationService);
@@ -29,7 +29,7 @@ export function isEnterpriseOrgGuard(): CanActivateFn {
       return router.createUrlTree(["/"]);
     }
 
-    if (org.productTierType != ProductTierType.Enterprise) {
+    if (org.productTierType != ProductTierType.Enterprise && showError) {
       // Users without billing permission can't access billing
       if (!org.canEditSubscription) {
         await dialogService.openSimpleDialog({

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

@@ -0,0 +1,66 @@
+<app-header> </app-header>
+
+<bit-tab-group [(selectedIndex)]="tabIndex">
+  <bit-tab [label]="'singleSignOn' | i18n">
+    <section class="tw-mb-9">
+      <h2 bitTypography="h2">{{ "singleSignOn" | i18n }}</h2>
+      <p bitTypography="body1">
+        {{ "ssoDescStart" | i18n }}
+        <a bitLink routerLink="../settings/sso" class="tw-lowercase">{{ "singleSignOn" | i18n }}</a>
+        {{ "ssoDescEnd" | i18n }}
+      </p>
+      <app-integration-grid
+        [integrations]="integrationsList | filterIntegrations: IntegrationType.SSO"
+      ></app-integration-grid>
+    </section>
+  </bit-tab>
+
+  <bit-tab [label]="'userProvisioning' | i18n">
+    <section class="tw-mb-9">
+      <h2 bitTypography="h2">
+        {{ "scimIntegration" | i18n }}
+      </h2>
+      <p bitTypography="body1">
+        {{ "scimIntegrationDescStart" | i18n }}
+        <a bitLink routerLink="../settings/scim">{{ "scimIntegration" | i18n }}</a>
+        {{ "scimIntegrationDescEnd" | i18n }}
+      </p>
+      <app-integration-grid
+        [integrations]="integrationsList | filterIntegrations: IntegrationType.SCIM"
+      ></app-integration-grid>
+    </section>
+    <section class="tw-mb-9">
+      <h2 bitTypography="h2">
+        {{ "bwdc" | i18n }}
+      </h2>
+      <p bitTypography="body1">{{ "bwdcDesc" | i18n }}</p>
+      <app-integration-grid
+        [integrations]="integrationsList | filterIntegrations: IntegrationType.BWDC"
+      ></app-integration-grid>
+    </section>
+  </bit-tab>
+
+  <bit-tab [label]="'eventManagement' | i18n">
+    <section class="tw-mb-9">
+      <h2 bitTypography="h2">
+        {{ "eventManagement" | i18n }}
+      </h2>
+      <p bitTypography="body1">{{ "eventManagementDesc" | i18n }}</p>
+      <app-integration-grid
+        [integrations]="integrationsList | filterIntegrations: IntegrationType.EVENT"
+      ></app-integration-grid>
+    </section>
+  </bit-tab>
+
+  <bit-tab [label]="'deviceManagement' | i18n">
+    <section class="tw-mb-9">
+      <h2 bitTypography="h2">
+        {{ "deviceManagement" | i18n }}
+      </h2>
+      <p bitTypography="body1">{{ "deviceManagementDesc" | i18n }}</p>
+      <app-integration-grid
+        [integrations]="integrationsList | filterIntegrations: IntegrationType.DEVICE"
+      ></app-integration-grid>
+    </section>
+  </bit-tab>
+</bit-tab-group>

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

@@ -0,0 +1,207 @@
+import { Component } from "@angular/core";
+
+import { IntegrationType } from "@bitwarden/common/enums";
+
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { FilterIntegrationsPipe, IntegrationGridComponent, Integration } from "../../../shared/";
+import { SharedModule } from "../../../shared/shared.module";
+import { SharedOrganizationModule } from "../shared";
+
+@Component({
+  selector: "ac-integrations",
+  templateUrl: "./integrations.component.html",
+  standalone: true,
+  imports: [
+    SharedModule,
+    SharedOrganizationModule,
+    IntegrationGridComponent,
+    HeaderModule,
+    FilterIntegrationsPipe,
+  ],
+})
+export class AdminConsoleIntegrationsComponent {
+  integrationsList: Integration[] = [];
+  tabIndex: number;
+
+  constructor() {
+    this.integrationsList = [
+      {
+        name: "AD FS",
+        linkURL: "https://bitwarden.com/help/saml-adfs/",
+        image: "../../../../../../../images/integrations/azure-active-directory.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Auth0",
+        linkURL: "https://bitwarden.com/help/saml-auth0/",
+        image: "../../../../../../../images/integrations/logo-auth0-badge-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "AWS",
+        linkURL: "https://bitwarden.com/help/saml-aws/",
+        image: "../../../../../../../images/integrations/aws-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/aws-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Microsoft Entra ID",
+        linkURL: "https://bitwarden.com/help/saml-azure/",
+        image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Duo",
+        linkURL: "https://bitwarden.com/help/saml-duo/",
+        image: "../../../../../../../images/integrations/logo-duo-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Google",
+        linkURL: "https://bitwarden.com/help/saml-google/",
+        image: "../../../../../../../images/integrations/logo-google-badge-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "JumpCloud",
+        linkURL: "https://bitwarden.com/help/saml-jumpcloud/",
+        image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "KeyCloak",
+        linkURL: "https://bitwarden.com/help/saml-keycloak/",
+        image: "../../../../../../../images/integrations/logo-keycloak-icon.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Okta",
+        linkURL: "https://bitwarden.com/help/saml-okta/",
+        image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/saml-onelogin/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "PingFederate",
+        linkURL: "https://bitwarden.com/help/saml-pingfederate/",
+        image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Microsoft Entra ID",
+        linkURL: "https://bitwarden.com/help/microsoft-entra-id-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "Okta",
+        linkURL: "https://bitwarden.com/help/okta-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/onelogin-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "JumpCloud",
+        linkURL: "https://bitwarden.com/help/jumpcloud-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "Ping Identity",
+        linkURL: "https://bitwarden.com/help/ping-identity-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "Active Directory",
+        linkURL: "https://bitwarden.com/help/ldap-directory/",
+        image: "../../../../../../../images/integrations/azure-active-directory.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Microsoft Entra ID",
+        linkURL: "https://bitwarden.com/help/microsoft-entra-id/",
+        image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Google Workspace",
+        linkURL: "https://bitwarden.com/help/workspace-directory/",
+        image: "../../../../../../../images/integrations/logo-google-badge-color.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Okta",
+        linkURL: "https://bitwarden.com/help/okta-directory/",
+        image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/onelogin-directory/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Splunk",
+        linkURL: "https://bitwarden.com/help/splunk-siem/",
+        image: "../../../../../../../images/integrations/logo-splunk-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/splunk-darkmode.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Microsoft Sentinel",
+        linkURL: "https://bitwarden.com/help/microsoft-sentinel-siem/",
+        image: "../../../../../../../images/integrations/logo-microsoft-sentinel-color.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Rapid7",
+        linkURL: "https://bitwarden.com/help/rapid7-siem/",
+        image: "../../../../../../../images/integrations/logo-rapid7-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/rapid7-darkmode.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Elastic",
+        linkURL: "https://bitwarden.com/help/elastic-siem/",
+        image: "../../../../../../../images/integrations/logo-elastic-badge-color.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Panther",
+        linkURL: "https://bitwarden.com/help/panther-siem/",
+        image: "../../../../../../../images/integrations/logo-panther-round-color.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Microsoft Intune",
+        linkURL: "https://bitwarden.com/help/deploy-browser-extensions-with-intune/",
+        image: "../../../../../../../images/integrations/logo-microsoft-intune-color.svg",
+        type: IntegrationType.DEVICE,
+      },
+    ];
+  }
+
+  get IntegrationType(): typeof IntegrationType {
+    return IntegrationType;
+  }
+}

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

@@ -60,6 +60,12 @@
         <bit-nav-item [text]="'billingHistory' | i18n" route="billing/history"></bit-nav-item>
       </ng-container>
     </bit-nav-group>
+    <bit-nav-item
+      icon="bwi-providers"
+      [text]="'integrations' | i18n"
+      route="integrations"
+      *ngIf="integrationPageEnabled$ | async"
+    ></bit-nav-item>
     <bit-nav-group
       icon="bwi-cog"
       [text]="'settings' | i18n"

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

@@ -18,6 +18,7 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli
 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
 import { PolicyType, ProviderStatusType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -47,12 +48,15 @@ export class OrganizationLayoutComponent implements OnInit {
 
   protected orgFilter = (org: Organization) => canAccessOrgAdmin(org);
 
+  protected integrationPageEnabled$: Observable<boolean>;
+
   organization$: Observable<Organization>;
   canAccessExport$: Observable<boolean>;
   showPaymentAndHistory$: Observable<boolean>;
   hideNewOrgButton$: Observable<boolean>;
   organizationIsUnmanaged$: Observable<boolean>;
   isAccessIntelligenceFeatureEnabled = false;
+  enterpriseOrganization$: Observable<boolean>;
 
   constructor(
     private route: ActivatedRoute,
@@ -104,6 +108,16 @@ export class OrganizationLayoutComponent implements OnInit {
           provider.providerStatus !== ProviderStatusType.Billable,
       ),
     );
+
+    this.integrationPageEnabled$ = combineLatest(
+      this.organization$,
+      this.configService.getFeatureFlag$(FeatureFlag.PM14505AdminConsoleIntegrationPage),
+    ).pipe(
+      map(
+        ([org, featureFlagEnabled]) =>
+          org.productTierType === ProductTierType.Enterprise && featureFlagEnabled,
+      ),
+    );
   }
 
   canShowVaultTab(organization: Organization): boolean {

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

@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { authGuard } from "@bitwarden/angular/auth/guards";
+import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
 import {
   canAccessOrgAdmin,
   canAccessGroupsTab,
@@ -11,6 +12,7 @@ import {
   canAccessSettingsTab,
 } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
 import { organizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard";
 import { organizationRedirectGuard } from "../../admin-console/organizations/guards/org-redirect.guard";
@@ -18,6 +20,8 @@ import { OrganizationLayoutComponent } from "../../admin-console/organizations/l
 import { deepLinkGuard } from "../../auth/guards/deep-link.guard";
 import { VaultModule } from "../../vault/org-vault/vault.module";
 
+import { isEnterpriseOrgGuard } from "./guards/is-enterprise-org.guard";
+import { AdminConsoleIntegrationsComponent } from "./integrations/integrations.component";
 import { GroupsComponent } from "./manage/groups.component";
 
 const routes: Routes = [
@@ -36,6 +40,17 @@ const routes: Routes = [
         path: "vault",
         loadChildren: () => VaultModule,
       },
+      {
+        path: "integrations",
+        canActivate: [
+          canAccessFeature(FeatureFlag.PM14505AdminConsoleIntegrationPage),
+          isEnterpriseOrgGuard(false),
+        ],
+        component: AdminConsoleIntegrationsComponent,
+        data: {
+          titleId: "integrations",
+        },
+      },
       {
         path: "settings",
         loadChildren: () =>