From 4592a8ae21d06fd847cf1ef7343f42e65e23e178 Mon Sep 17 00:00:00 2001 From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Date: Fri, 7 Aug 2026 11:55:58 +0200 Subject: [PATCH] [ACS-12390] Changes needed to fix search input visibility when resizing browser window (#12137) * [ACS-12390] Changes needed to fix search input visibility when resizing browser window * [ACS-12390] Addressed copilot comments --- .../lib/components/shell/shell.component.html | 2 +- .../components/shell/shell.component.spec.ts | 182 ++++++++++-------- .../lib/components/shell/shell.component.ts | 12 +- .../src/lib/services/shell-app.service.ts | 1 + 4 files changed, 116 insertions(+), 81 deletions(-) diff --git a/lib/core/shell/src/lib/components/shell/shell.component.html b/lib/core/shell/src/lib/components/shell/shell.component.html index 5859b800f0..58abd03151 100644 --- a/lib/core/shell/src/lib/components/shell/shell.component.html +++ b/lib/core/shell/src/lib/components/shell/shell.component.html @@ -2,7 +2,7 @@ #layout [sidenavMin]="sidenavMin" [sidenavMax]="sidenavMax" - [stepOver]="600" + [stepOver]="smallScreenBreakpoint" [hideSidenav]="hideSidenav" [expandedSidenav]="expandedSidenav" (expanded)="onExpanded($event)" diff --git a/lib/core/shell/src/lib/components/shell/shell.component.spec.ts b/lib/core/shell/src/lib/components/shell/shell.component.spec.ts index 0a79ab38a2..540e385420 100644 --- a/lib/core/shell/src/lib/components/shell/shell.component.spec.ts +++ b/lib/core/shell/src/lib/components/shell/shell.component.spec.ts @@ -20,7 +20,7 @@ import { AppConfigService } from '@alfresco/adf-core'; import { ShellLayoutComponent } from './shell.component'; import { provideRouter, RouterModule } from '@angular/router'; import { of } from 'rxjs'; -import { ShellAppService, SHELL_APP_SERVICE } from '../../services/shell-app.service'; +import { ShellAppService, SHELL_APP_SERVICE, SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT } from '../../services/shell-app.service'; import { RouterTestingHarness } from '@angular/router/testing'; describe('AppLayoutComponent', () => { @@ -30,7 +30,15 @@ describe('AppLayoutComponent', () => { let shellAppService: ShellAppService; let routerHarness: RouterTestingHarness; - beforeEach(async () => { + const initializeShellComponent = (breakpoint?: number): void => { + if (breakpoint !== undefined) { + TestBed.overrideProvider(SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT, { useValue: breakpoint }); + } + fixture = TestBed.createComponent(ShellLayoutComponent); + component = fixture.componentInstance; + }; + + beforeEach(() => { const shellService: ShellAppService = { pageHeading$: of('Title'), hideSidenavConditions: [], @@ -51,20 +59,21 @@ describe('AppLayoutComponent', () => { provideRouter([{ path: 'minimize', component: ShellLayoutComponent }]) ] }); - - fixture = TestBed.createComponent(ShellLayoutComponent); - component = fixture.componentInstance; - appConfig = TestBed.inject(AppConfigService); - shellAppService = TestBed.inject(SHELL_APP_SERVICE); - routerHarness = await RouterTestingHarness.create(); - }); - - beforeEach(() => { - appConfig.config.languages = []; - appConfig.config.locale = 'en'; }); describe('sidenav state', () => { + beforeEach(async () => { + initializeShellComponent(); + appConfig = TestBed.inject(AppConfigService); + shellAppService = TestBed.inject(SHELL_APP_SERVICE); + routerHarness = await RouterTestingHarness.create(); + }); + + beforeEach(() => { + appConfig.config.languages = []; + appConfig.config.locale = 'en'; + }); + it('should get state from configuration', () => { appConfig.config.sideNav = { expandedSidenav: false, @@ -119,75 +128,92 @@ describe('AppLayoutComponent', () => { expect(component.expandedSidenav).toBe(false); }); + + it('should close menu on mobile screen size', () => { + component.minimizeSidenav = false; + component.layout.container = { + isMobileScreenSize: true, + toggleMenu: () => {} + }; + + spyOn(component.layout.container, 'toggleMenu'); + fixture.detectChanges(); + + component.hideMenu({ preventDefault: () => {} } as any); + + expect(component.layout.container.toggleMenu).toHaveBeenCalled(); + }); + + it('should close menu on mobile screen size also when minimizeSidenav true', () => { + fixture.detectChanges(); + component.minimizeSidenav = true; + component.layout.container = { + isMobileScreenSize: true, + toggleMenu: () => {} + }; + + spyOn(component.layout.container, 'toggleMenu'); + fixture.detectChanges(); + + component.hideMenu({ preventDefault: () => {} } as any); + + expect(component.layout.container.toggleMenu).toHaveBeenCalled(); + }); + + it('should minimize menu when navigates to minimize url', async () => { + shellAppService.minimizeSidenavConditions = ['/minimize']; + component.layout.container = { + isMobileScreenSize: false, + isMenuMinimized: false, + toggleMenu: () => {} + }; + + spyOn(component.layout.container, 'toggleMenu'); + + fixture.detectChanges(); + await routerHarness.navigateByUrl('/minimize'); + fixture.detectChanges(); + + expect(component.minimizeSidenav).toBeTrue(); + expect(component.layout.isMenuMinimized).toBeTrue(); + expect(component.layout.container.toggleMenu).toHaveBeenCalled(); + }); + + it('should not minimize menu again when previous and current route contain minimize url', async () => { + shellAppService.minimizeSidenavConditions = ['/minimize']; + component.layout.container = { + isMobileScreenSize: false, + isMenuMinimized: false, + toggleMenu: () => {} + }; + + fixture.detectChanges(); + await routerHarness.navigateByUrl('/minimize?query=123'); + fixture.detectChanges(); + + expect(component.minimizeSidenav).toBeTrue(); + + await routerHarness.navigateByUrl('/minimize?query=456'); + fixture.detectChanges(); + + expect(component.minimizeSidenav).toBeFalse(); + }); }); - it('should close menu on mobile screen size', () => { - component.minimizeSidenav = false; - component.layout.container = { - isMobileScreenSize: true, - toggleMenu: () => {} - }; + describe('SidenavLayout', () => { + it('should have assigned correct stepOver by default', () => { + initializeShellComponent(); - spyOn(component.layout.container, 'toggleMenu'); - fixture.detectChanges(); + fixture.detectChanges(); + expect(component.layout.stepOver).toBe(600); + }); - component.hideMenu({ preventDefault: () => {} } as any); + it('should have assigned correct stepOver based on configured value', () => { + const breakpoint = 800; + initializeShellComponent(breakpoint); - expect(component.layout.container.toggleMenu).toHaveBeenCalled(); - }); - - it('should close menu on mobile screen size also when minimizeSidenav true', () => { - fixture.detectChanges(); - component.minimizeSidenav = true; - component.layout.container = { - isMobileScreenSize: true, - toggleMenu: () => {} - }; - - spyOn(component.layout.container, 'toggleMenu'); - fixture.detectChanges(); - - component.hideMenu({ preventDefault: () => {} } as any); - - expect(component.layout.container.toggleMenu).toHaveBeenCalled(); - }); - - it('should minimize menu when navigates to minimize url', async () => { - shellAppService.minimizeSidenavConditions = ['/minimize']; - component.layout.container = { - isMobileScreenSize: false, - isMenuMinimized: false, - toggleMenu: () => {} - }; - - spyOn(component.layout.container, 'toggleMenu'); - - fixture.detectChanges(); - await routerHarness.navigateByUrl('/minimize'); - fixture.detectChanges(); - - expect(component.minimizeSidenav).toBeTrue(); - expect(component.layout.isMenuMinimized).toBeTrue(); - expect(component.layout.container.toggleMenu).toHaveBeenCalled(); - }); - - it('should not minimize menu again when previous and current route contain minimize url', async () => { - shellAppService.minimizeSidenavConditions = ['/minimize']; - component.layout.container = { - isMobileScreenSize: false, - isMenuMinimized: false, - toggleMenu: () => {} - }; - - fixture.detectChanges(); - await routerHarness.navigateByUrl('/minimize?query=123'); - fixture.detectChanges(); - - expect(component.minimizeSidenav).toBeTrue(); - - await routerHarness.navigateByUrl('/minimize?query=456'); - fixture.detectChanges(); - - expect(component.minimizeSidenav).toBeFalse(); + fixture.detectChanges(); + expect(component.layout.stepOver).toBe(breakpoint); + }); }); }); diff --git a/lib/core/shell/src/lib/components/shell/shell.component.ts b/lib/core/shell/src/lib/components/shell/shell.component.ts index 1468d1a674..ac60c00eb3 100644 --- a/lib/core/shell/src/lib/components/shell/shell.component.ts +++ b/lib/core/shell/src/lib/components/shell/shell.component.ts @@ -29,7 +29,13 @@ import { Observable } from 'rxjs'; import { filter, map, withLatestFrom } from 'rxjs/operators'; import { BreakpointObserver } from '@angular/cdk/layout'; import { Directionality } from '@angular/cdk/bidi'; -import { SHELL_APP_SERVICE, SHELL_NAVBAR_MAX_WIDTH, SHELL_NAVBAR_MIN_WIDTH, ShellAppService } from '../../services/shell-app.service'; +import { + SHELL_APP_SERVICE, + SHELL_NAVBAR_MAX_WIDTH, + SHELL_NAVBAR_MIN_WIDTH, + SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT, + ShellAppService +} from '../../services/shell-app.service'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ @@ -56,6 +62,8 @@ export class ShellLayoutComponent implements OnInit { @ViewChild('layout', { static: true }) layout: SidenavLayoutComponent; + readonly smallScreenBreakpoint = inject(SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT, { optional: true }) ?? 600; + isSmallScreen$: Observable; expandedSidenav: boolean; @@ -76,7 +84,7 @@ export class ShellLayoutComponent implements OnInit { } ngOnInit() { - this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches)); + this.isSmallScreen$ = this.breakpointObserver.observe([`(max-width: ${this.smallScreenBreakpoint}px)`]).pipe(map((result) => result.matches)); this.hideSidenav = this.shellService.hideSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el)); this.minimizeSidenav = this.shellService.minimizeSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el)); diff --git a/lib/core/shell/src/lib/services/shell-app.service.ts b/lib/core/shell/src/lib/services/shell-app.service.ts index 9f1e261fe1..6cb87f904d 100644 --- a/lib/core/shell/src/lib/services/shell-app.service.ts +++ b/lib/core/shell/src/lib/services/shell-app.service.ts @@ -36,3 +36,4 @@ export const SHELL_APP_SERVICE = new InjectionToken('SHELL_APP_ export const SHELL_AUTH_TOKEN = new InjectionToken('SHELL_AUTH_TOKEN'); export const SHELL_NAVBAR_MIN_WIDTH = new InjectionToken('SHELL_NAVBAR_MIN_WIDTH'); export const SHELL_NAVBAR_MAX_WIDTH = new InjectionToken('SHELL_NAVBAR_MAX_WIDTH'); +export const SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT = new InjectionToken('SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT');