[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/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)"

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', () => {
+    describe('SidenavLayout', () => {
-        component.minimizeSidenav = false;
+        it('should have assigned correct stepOver by default', () => {
-        component.layout.container = {
+            initializeShellComponent();
-            isMobileScreenSize: true,
-            toggleMenu: () => {}
-        };
 
-        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();
+            fixture.detectChanges();
-    });
+            expect(component.layout.stepOver).toBe(breakpoint);
-
+        });
-    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();
     });
 });

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<boolean>;
 
     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));

lib/core/shell/src/lib/services/shell-app.service.ts

@@ -36,3 +36,4 @@ export const SHELL_APP_SERVICE = new InjectionToken<ShellAppService>('SHELL_APP_
 export const SHELL_AUTH_TOKEN = new InjectionToken<CanActivateFn | CanActivateChildFn>('SHELL_AUTH_TOKEN');
 export const SHELL_NAVBAR_MIN_WIDTH = new InjectionToken<number>('SHELL_NAVBAR_MIN_WIDTH');
 export const SHELL_NAVBAR_MAX_WIDTH = new InjectionToken<number>('SHELL_NAVBAR_MAX_WIDTH');
+export const SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT = new InjectionToken<number>('SHELL_NAVBAR_SMALL_SCREEN_BREAKPOINT');