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

2026-01-27 23:03:45 +00:00 · 2026-01-22 11:32:46 -05:00
parent b94835206d
commit 43aa21ee2a
9 changed files with 121 additions and 76 deletions
--- 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
@@ -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>
--- 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
@@ -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() {}
+}
--- 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
@@ -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>
--- 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
@@ -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() {}
+}
--- 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>
--- 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
@@ -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>
--- 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
@@ -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() {}
+}
--- 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
@@ -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>
--- 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
@@ -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() {}
+}