From 43aa21ee2a7d57bd1b85da2aa5159472c99eb9e6 Mon Sep 17 00:00:00 2001
From: JaredScar <thewolfbadger@gmail.com>
Date: Thu, 22 Jan 2026 11:32:46 -0500
Subject: [PATCH] Adding new components to handle the different routes for the
 integrations page to make use of bit-tab-nav-bar to follow background-fill UI
 spec

---
 .../device-management.component.html          |  9 ++
 .../device-management.component.ts            | 13 +++
 .../event-management.component.html           |  9 ++
 .../event-management.component.ts             | 13 +++
 .../integrations.component.html               | 90 +++----------------
 .../single-sign-on.component.html             | 11 +++
 .../single-sign-on.component.ts               | 17 ++++
 .../user-provisioning.component.html          | 22 +++++
 .../user-provisioning.component.ts            | 13 +++
 9 files changed, 121 insertions(+), 76 deletions(-)
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts

diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html
new file mode 100644
index 00000000000..9790ef72554
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html
@@ -0,0 +1,9 @@
+<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>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts
new file mode 100644
index 00000000000..dc9631119a3
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from "@angular/core";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "device-management",
+  templateUrl: "device-management.component.html",
+})
+export class DeviceManagementComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html
new file mode 100644
index 00000000000..c166be6cce8
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html
@@ -0,0 +1,9 @@
+<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>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts
new file mode 100644
index 00000000000..1f5d0f63b27
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from "@angular/core";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "event-management",
+  template: "event-management.component.html",
+})
+export class EventManagementComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html
index a35df3677bb..43c8eebb59a 100644
--- a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html
@@ -1,78 +1,16 @@
-<app-header> </app-header>
-
 @let organization = organization$ | async;
 
-@if (organization) {
-  <bit-tab-group [(selectedIndex)]="tabIndex">
-    @if (organization?.useSso) {
-      <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>
-    }
-
-    @if (organization?.useScim || organization?.useDirectory) {
-      <bit-tab [label]="'userProvisioning' | i18n">
-        <section class="tw-mb-9" *ngIf="organization?.useScim">
-          <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" *ngIf="organization?.useDirectory">
-          <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>
-    }
-
-    @if (organization?.useEvents) {
-      <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>
-}
+<app-header>
+  @if (organization) {
+    <bit-tab-nav-bar slot="tabs">
+      <bit-tab-link route="sso">{{ "singleSignOn" | i18n }}</bit-tab-link>
+      @if (organization?.useScim || organization?.useDirectory) {
+        <bit-tab-link route="provisioning">{{ "userProvisioning" | i18n }}</bit-tab-link>
+      }
+      @if (organization?.useEvents) {
+        <bit-tab-link route="event-management">{{ "eventManagement" | i18n }}</bit-tab-link>
+      }
+      <bit-tab-link route="device-management">{{ "deviceManagement" | i18n }}</bit-tab-link>
+    </bit-tab-nav-bar>
+  }
+</app-header>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html
new file mode 100644
index 00000000000..3aae4d73c85
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html
@@ -0,0 +1,11 @@
+<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>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts
new file mode 100644
index 00000000000..8a0ae858e3f
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+
+import { IntegrationGridComponent } from "../integration-grid/integration-grid.component";
+import { FilterIntegrationsPipe } from "../integrations.pipe";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "single-sign-on",
+  templateUrl: "single-sign-on.component.html",
+  imports: [IntegrationGridComponent, FilterIntegrationsPipe],
+})
+export class SingleSignOnComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html
new file mode 100644
index 00000000000..ceb2afae7af
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html
@@ -0,0 +1,22 @@
+<section class="tw-mb-9" *ngIf="organization?.useScim">
+  <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" *ngIf="organization?.useDirectory">
+  <h2 bitTypography="h2">
+    {{ "bwdc" | i18n }}
+  </h2>
+  <p bitTypography="body1">{{ "bwdcDesc" | i18n }}</p>
+  <app-integration-grid
+    [integrations]="integrationsList | filterIntegrations: IntegrationType.BWDC"
+  ></app-integration-grid>
+</section>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts
new file mode 100644
index 00000000000..b4d0794a829
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from "@angular/core";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "user-provisioning",
+  templateUrl: "user-provisioning.component.html",
+})
+export class UserProvisioningComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}