diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts index fd06640737c..0f5b8250e0f 100644 --- a/apps/desktop/src/app/app-routing.module.ts +++ b/apps/desktop/src/app/app-routing.module.ts @@ -50,7 +50,7 @@ import { VaultV2Component } from "../vault/app/vault/vault-v2.component"; import { VaultComponent } from "../vault/app/vault-v3/vault.component"; import { Fido2PlaceholderComponent } from "./components/fido2placeholder.component"; -import { UserLayoutComponent } from "./layout/user-layout.component"; +import { DesktopLayoutComponent } from "./layout/desktop-layout.component"; import { SendComponent } from "./tools/send/send.component"; import { SendsComponent } from "./tools/send-v2/sends.component"; @@ -335,7 +335,7 @@ const routes: Routes = [ }, { path: "", - component: UserLayoutComponent, + component: DesktopLayoutComponent, canActivate: [authGuard], children: [ { diff --git a/apps/desktop/src/app/layout/desktop-layout.component.html b/apps/desktop/src/app/layout/desktop-layout.component.html index 71a760735ca..8633053d83a 100644 --- a/apps/desktop/src/app/layout/desktop-layout.component.html +++ b/apps/desktop/src/app/layout/desktop-layout.component.html @@ -1,4 +1,10 @@ - - + + + + + + + + diff --git a/apps/desktop/src/app/layout/desktop-layout.component.ts b/apps/desktop/src/app/layout/desktop-layout.component.ts index 695f3db37ab..c918da1d2ce 100644 --- a/apps/desktop/src/app/layout/desktop-layout.component.ts +++ b/apps/desktop/src/app/layout/desktop-layout.component.ts @@ -1,14 +1,18 @@ -import { CommonModule } from "@angular/common"; import { ChangeDetectionStrategy, Component } from "@angular/core"; import { RouterModule } from "@angular/router"; +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { PasswordManagerLogo } from "@bitwarden/assets/svg"; import { LayoutComponent, NavigationModule } from "@bitwarden/components"; +import { DesktopSideNavComponent } from "./desktop-side-nav.component"; + @Component({ selector: "app-desktop-layout", - standalone: true, - imports: [CommonModule, RouterModule, LayoutComponent, NavigationModule], + imports: [RouterModule, JslibModule, LayoutComponent, NavigationModule, DesktopSideNavComponent], templateUrl: "./desktop-layout.component.html", changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DesktopLayoutComponent {} +export class DesktopLayoutComponent { + protected readonly logo = PasswordManagerLogo; +} diff --git a/apps/desktop/src/app/layout/desktop-layout.module.ts b/apps/desktop/src/app/layout/desktop-layout.module.ts deleted file mode 100644 index efef167c95e..00000000000 --- a/apps/desktop/src/app/layout/desktop-layout.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from "@angular/core"; - -import { NavigationModule } from "@bitwarden/components"; - -import { DesktopLayoutComponent } from "./desktop-layout.component"; -import { DesktopSideNavComponent } from "./desktop-side-nav.component"; - -@NgModule({ - imports: [DesktopLayoutComponent, DesktopSideNavComponent], - exports: [NavigationModule, DesktopLayoutComponent, DesktopSideNavComponent], - declarations: [], - providers: [], -}) -export class DesktopLayoutModule {} diff --git a/apps/desktop/src/app/layout/desktop-side-nav.component.ts b/apps/desktop/src/app/layout/desktop-side-nav.component.ts index c74e9bc989a..05298cb1367 100644 --- a/apps/desktop/src/app/layout/desktop-side-nav.component.ts +++ b/apps/desktop/src/app/layout/desktop-side-nav.component.ts @@ -5,7 +5,6 @@ import { NavigationModule, SideNavVariant } from "@bitwarden/components"; @Component({ selector: "app-desktop-side-nav", - standalone: true, templateUrl: "desktop-side-nav.component.html", imports: [CommonModule, NavigationModule], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/desktop/src/app/layout/user-layout.component.html b/apps/desktop/src/app/layout/user-layout.component.html deleted file mode 100644 index 91fa0a14f19..00000000000 --- a/apps/desktop/src/app/layout/user-layout.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/desktop/src/app/layout/user-layout.component.spec.ts b/apps/desktop/src/app/layout/user-layout.component.spec.ts deleted file mode 100644 index 00aa8486529..00000000000 --- a/apps/desktop/src/app/layout/user-layout.component.spec.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { RouterModule } from "@angular/router"; -import { mock } from "jest-mock-extended"; - -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; - -import { DesktopLayoutModule } from "./desktop-layout.module"; -import { UserLayoutComponent } from "./user-layout.component"; - -Object.defineProperty(window, "matchMedia", { - writable: true, - value: jest.fn().mockImplementation((query) => ({ - matches: true, - media: query, - onchange: null, - addListener: jest.fn(), - removeListener: jest.fn(), - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), -}); - -describe("UserLayoutComponent", () => { - let component: UserLayoutComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [UserLayoutComponent, RouterModule.forRoot([]), DesktopLayoutModule], - providers: [ - { - provide: I18nService, - useValue: mock(), - }, - ], - }).compileComponents(); - - fixture = TestBed.createComponent(UserLayoutComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("creates component", () => { - expect(component).toBeTruthy(); - }); - - it("renders desktop layout", () => { - const compiled = fixture.nativeElement; - const layoutElement = compiled.querySelector("app-desktop-layout"); - - expect(layoutElement).toBeTruthy(); - }); - - it("renders desktop side nav", () => { - const compiled = fixture.nativeElement; - const sideNavElement = compiled.querySelector("app-desktop-side-nav"); - - expect(sideNavElement).toBeTruthy(); - }); - - it("renders logo with correct properties", () => { - const compiled = fixture.nativeElement; - const logoElement = compiled.querySelector("bit-nav-logo"); - - expect(logoElement).toBeTruthy(); - expect(logoElement.getAttribute("route")).toBe("."); - }); - - it("renders vault navigation item", () => { - const compiled = fixture.nativeElement; - const navItems = compiled.querySelectorAll("bit-nav-item"); - const vaultItem = Array.from(navItems).find( - (item) => (item as Element).getAttribute("icon") === "bwi-vault", - ) as Element | undefined; - - expect(vaultItem).toBeTruthy(); - expect(vaultItem?.getAttribute("route")).toBe("new-vault"); - }); - - it("renders send navigation item", () => { - const compiled = fixture.nativeElement; - const navItems = compiled.querySelectorAll("bit-nav-item"); - const sendItem = Array.from(navItems).find( - (item) => (item as Element).getAttribute("icon") === "bwi-send", - ) as Element | undefined; - - expect(sendItem).toBeTruthy(); - expect(sendItem?.getAttribute("route")).toBe("new-sends"); - }); - - it("renders router outlet", () => { - const compiled = fixture.nativeElement; - const routerOutlet = compiled.querySelector("router-outlet"); - - expect(routerOutlet).toBeTruthy(); - }); - - it("has logo property set", () => { - expect(component["logo"]).toBeDefined(); - }); -}); diff --git a/apps/desktop/src/app/layout/user-layout.component.ts b/apps/desktop/src/app/layout/user-layout.component.ts deleted file mode 100644 index 81031b19d9a..00000000000 --- a/apps/desktop/src/app/layout/user-layout.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { CommonModule } from "@angular/common"; -import { ChangeDetectionStrategy, Component } from "@angular/core"; -import { RouterModule } from "@angular/router"; - -import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { PasswordManagerLogo } from "@bitwarden/assets/svg"; - -import { DesktopLayoutModule } from "./desktop-layout.module"; - -@Component({ - selector: "app-user-layout", - standalone: true, - templateUrl: "user-layout.component.html", - imports: [CommonModule, RouterModule, JslibModule, DesktopLayoutModule], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class UserLayoutComponent { - protected readonly logo = PasswordManagerLogo; -} diff --git a/apps/desktop/src/app/tools/send-v2/sends.component.ts b/apps/desktop/src/app/tools/send-v2/sends.component.ts index c8e9ac4c1d9..901691f03f4 100644 --- a/apps/desktop/src/app/tools/send-v2/sends.component.ts +++ b/apps/desktop/src/app/tools/send-v2/sends.component.ts @@ -2,7 +2,6 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; @Component({ selector: "app-sends-v2", - standalone: true, imports: [], template: "

Sends V2 Component

", changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/apps/desktop/src/vault/app/vault-v3/vault.component.ts b/apps/desktop/src/vault/app/vault-v3/vault.component.ts index 0a4a38742fc..b29b66225c7 100644 --- a/apps/desktop/src/vault/app/vault-v3/vault.component.ts +++ b/apps/desktop/src/vault/app/vault-v3/vault.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from "@angular/core"; @Component({ selector: "app-vault-v3", - standalone: true, imports: [], template: "

Vault V3 Component

", changeDetection: ChangeDetectionStrategy.OnPush,