[PM-12273] Admin Console Integration Page

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,200 @@
+import { Component } from "@angular/core";
+
+import { IntegrationType } from "@bitwarden/common/enums";
+
+import { HeaderModule } from "../../../layouts/header/header.module";
+import { IntegrationGridComponent } from "../../../shared/components/integrations/integration-grid/integration-grid.component";
+import { Integration } from "../../../shared/components/integrations/models";
+import { SharedModule } from "../../../shared/shared.module";
+import { SharedOrganizationModule } from "../shared";
+
+import { FilterIntegrationsPipe } from "./integrations.pipe";
+
+@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",
+        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",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/saml-onelogin/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.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",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/onelogin-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "JumpCloud",
+        linkURL: "https://bitwarden.com/help/jumpcloud-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.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",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/onelogin-directory/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Splunk",
+        linkURL: "https://bitwarden.com/help/splunk-siem/",
+        image: "../../../../../../../images/integrations/logo-splunk-black.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",
+        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/integrations/integrations.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+import { IntegrationType } from "@bitwarden/common/enums";
+
+import { Integration } from "../../../shared/components/integrations/models";
+
+@Pipe({
+  name: "filterIntegrations",
+  standalone: true,
+})
+export class FilterIntegrationsPipe implements PipeTransform {
+  transform(integrations: Integration[], type: IntegrationType): Integration[] {
+    return integrations.filter((integration) => integration.type === type);
+  }
+}

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

@@ -47,6 +47,10 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
 
   protected orgFilter = (org: Organization) => canAccessOrgAdmin(org);
 
+  protected integrationPageEnabled$ = this.configService.getFeatureFlag$(
+    FeatureFlag.PM14505AdminConsoleIntegrationPage,
+  );
+
   organization$: Observable<Organization>;
   showPaymentAndHistory$: Observable<boolean>;
   hideNewOrgButton$: Observable<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,13 +12,15 @@ 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";
 import { OrganizationLayoutComponent } from "../../admin-console/organizations/layouts/organization-layout.component";
 import { deepLinkGuard } from "../../auth/guards/deep-link.guard";
 import { VaultModule } from "../../vault/org-vault/vault.module";
 
+import { AdminConsoleIntegrationsComponent } from "./integrations/integrations.component";
 import { GroupsComponent } from "./manage/groups.component";
 
 const routes: Routes = [
@@ -36,6 +39,14 @@ const routes: Routes = [
         path: "vault",
         loadChildren: () => VaultModule,
       },
+      {
+        path: "integrations",
+        canActivate: [canAccessFeature(FeatureFlag.PM14505AdminConsoleIntegrationPage)],
+        component: AdminConsoleIntegrationsComponent,
+        data: {
+          titleId: "integrations",
+        },
+      },
       {
         path: "settings",
         loadChildren: () =>

bitwarden_license/bit-web/src/app/secrets-manager/integrations/integration-card/integration-card.component.html → apps/web/src/app/shared/components/integrations/integration-card/integration-card.component.html

@@ -1,8 +1,11 @@
 <div
   class="tw-block tw-h-full tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-600 tw-relative tw-transition-all xl:tw-w-64 hover:tw-scale-105 focus-within:tw-outline-none focus-within:tw-ring focus-within:tw-ring-primary-700 focus-within:tw-ring-offset-2"
 >
+  <div class="tw-flex tw-bg-secondary-100 tw-items-center tw-justify-end tw-pt-4 tw-pr-4">
+    <i class="bwi bwi-external-link"></i>
+  </div>
   <div
-    class="tw-flex tw-h-36 tw-bg-secondary-100 tw-items-center tw-justify-center tw-py-2 tw-px-6 lg:tw-py-4 lg:tw-px-12"
+    class="tw-flex tw-h-32 tw-bg-secondary-100 tw-items-center tw-justify-center tw-pb-2 tw-px-6 lg:tw-pb-4 lg:tw-px-12"
   >
     <div class="tw-flex tw-items-center tw-justify-center tw-h-28 tw-w-28 lg:tw-w-40">
       <img
@@ -14,14 +17,13 @@
     </div>
   </div>
   <div class="tw-p-5">
-    <h3 class="tw-mb-4 tw-text-lg tw-font-semibold">{{ name }}</h3>
+    <h3 class="tw-text-lg tw-font-semibold">{{ name }}</h3>
     <a
       class="tw-block tw-mb-0 tw-font-bold hover:tw-no-underline focus:tw-outline-none after:tw-content-[''] after:tw-block after:tw-absolute after:tw-w-full after:tw-h-full after:tw-left-0 after:tw-top-0"
       [href]="linkURL"
       rel="noopener noreferrer"
       target="_blank"
     >
-      {{ linkText }}
     </a>
     <span *ngIf="showNewBadge()" bitBadge class="tw-mt-3" variant="secondary">
       {{ "new" | i18n }}