[ACA-4728] fix file order in viewer (#3631)

* [ACA-4728] fix file order in viewer

* [ACA-4728] refactor viewer and preview, save and restore previous sorting in viewer and document pages when client sorting, add viewer unit tests

* [ACA-4728] remove duplicated license

* [ACA-4728] add missing imports

* [ACA-4728] address comments, improve initial sorting setting, improve tests, reduce duplication

* [ACA-4728] further reduce code duplication, remove/replace faulty unit tests

* [ACA-4728] move reusable unit test config to testing module

* [ACA-4728] address comments

* [ACA-4728] address comment - remove reduntant if

* [ACA-4728] update headers in new files

projects/aca-content/preview/ng-package.json

@@ -1,5 +0,0 @@
-{
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

projects/aca-content/preview/src/lib/components/preview.component.spec.ts

@@ -1,798 +0,0 @@
-/*!
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Alfresco Example Content Application
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail. Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Router, ActivatedRoute } from '@angular/router';
-import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
-import {
-  UserPreferencesService,
-  AlfrescoApiService,
-  AlfrescoApiServiceMock,
-  AuthenticationService,
-  TranslationMock,
-  TranslationService,
-  PipeModule
-} from '@alfresco/adf-core';
-import { UploadService, NodesApiService, DiscoveryApiService } from '@alfresco/adf-content-services';
-import { AppState, ClosePreviewAction } from '@alfresco/aca-shared/store';
-import { PreviewComponent } from './preview.component';
-import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
-import { ContentApiService, AppHookService, DocumentBasePageService } from '@alfresco/aca-shared';
-import { Store, StoreModule } from '@ngrx/store';
-import { Node, NodePaging, FavoritePaging, SharedLinkPaging, PersonEntry, ResultSetPaging, RepositoryInfo, VersionInfo } from '@alfresco/js-api';
-import { PreviewModule } from '../preview.module';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HttpClientModule } from '@angular/common/http';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { EffectsModule } from '@ngrx/effects';
-
-class DocumentBasePageServiceMock extends DocumentBasePageService {
-  canUpdateNode(): boolean {
-    return true;
-  }
-  canUploadContent(): boolean {
-    return true;
-  }
-}
-
-export const INITIAL_APP_STATE: AppState = {
-  appName: 'Alfresco Content Application',
-  logoPath: 'assets/images/alfresco-logo-white.svg',
-  customCssPath: '',
-  webFontPath: '',
-  sharedUrl: '',
-  user: {
-    isAdmin: null,
-    id: null,
-    firstName: '',
-    lastName: ''
-  },
-  selection: {
-    nodes: [],
-    libraries: [],
-    isEmpty: true,
-    count: 0
-  },
-  navigation: {
-    currentFolder: null
-  },
-  currentNodeVersion: null,
-  infoDrawerOpened: false,
-  infoDrawerPreview: false,
-  infoDrawerMetadataAspect: '',
-  showFacetFilter: true,
-  fileUploadingDialog: true,
-  showLoader: false,
-  repository: {
-    status: {
-      isQuickShareEnabled: true
-    }
-  } as any
-};
-
-describe('PreviewComponent', () => {
-  let fixture: ComponentFixture<PreviewComponent>;
-  let component: PreviewComponent;
-  let router: Router;
-  let route: ActivatedRoute;
-  let preferences: UserPreferencesService;
-  let contentApi: ContentApiService;
-  let uploadService: UploadService;
-  let nodesApiService: NodesApiService;
-  let appHookService: AppHookService;
-  let store: Store<any>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        PreviewModule,
-        NoopAnimationsModule,
-        HttpClientModule,
-        RouterTestingModule,
-        TranslateModule.forRoot(),
-        StoreModule.forRoot(
-          { app: (state) => state },
-          {
-            initialState: {
-              app: INITIAL_APP_STATE
-            },
-            runtimeChecks: {
-              strictStateImmutability: false,
-              strictActionImmutability: false
-            }
-          }
-        ),
-        EffectsModule.forRoot([]),
-        PipeModule
-      ],
-      providers: [
-        { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
-        { provide: TranslationService, useClass: TranslationMock },
-        { provide: DocumentBasePageService, useVale: new DocumentBasePageServiceMock() },
-        {
-          provide: DiscoveryApiService,
-          useValue: {
-            ecmProductInfo$: new BehaviorSubject<RepositoryInfo | null>(null),
-            getEcmProductInfo: (): Observable<RepositoryInfo> =>
-              of(
-                new RepositoryInfo({
-                  version: {
-                    major: '10.0.0'
-                  } as VersionInfo
-                })
-              )
-          }
-        },
-        {
-          provide: AuthenticationService,
-          useValue: {
-            isEcmLoggedIn: (): boolean => true,
-            getRedirect: (): string | null => null,
-            setRedirect() {},
-            isOauth: (): boolean => false,
-            isOAuthWithoutSilentLogin: (): boolean => false
-          }
-        }
-      ]
-    });
-
-    fixture = TestBed.createComponent(PreviewComponent);
-    component = fixture.componentInstance;
-
-    router = TestBed.inject(Router);
-    route = TestBed.inject(ActivatedRoute);
-    preferences = TestBed.inject(UserPreferencesService);
-    contentApi = TestBed.inject(ContentApiService);
-    uploadService = TestBed.inject(UploadService);
-    nodesApiService = TestBed.inject(NodesApiService);
-    appHookService = TestBed.inject(AppHookService);
-    store = TestBed.inject(Store);
-  });
-
-  it('should extract the property path root', () => {
-    expect(component.getRootField('some.property.path')).toBe('some');
-    expect(component.getRootField('some')).toBe('some');
-    expect(component.getRootField('')).toBe('');
-    expect(component.getRootField(null)).toBe(null);
-  });
-
-  it('should navigate to previous node in sub-folder', () => {
-    spyOn(router, 'navigate').and.stub();
-    const clickEvent = new MouseEvent('click');
-
-    component.previewLocation = 'personal-files';
-    component.folderId = 'folder1';
-    component.previousNodeId = 'previous1';
-    component.onNavigateBefore(clickEvent);
-
-    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'previous1']);
-  });
-
-  it('should navigate back to previous node in the root path', () => {
-    spyOn(router, 'navigate').and.stub();
-    const clickEvent = new MouseEvent('click');
-
-    component.previewLocation = 'personal-files';
-    component.folderId = null;
-    component.previousNodeId = 'previous1';
-    component.onNavigateBefore(clickEvent);
-
-    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'previous1']);
-  });
-
-  it('should not navigate back if node unset', () => {
-    spyOn(router, 'navigate').and.stub();
-    const clickEvent = new MouseEvent('click');
-
-    component.previousNodeId = null;
-    component.onNavigateBefore(clickEvent);
-
-    expect(router.navigate).not.toHaveBeenCalled();
-  });
-
-  it('should navigate to next node in sub-folder', () => {
-    spyOn(router, 'navigate').and.stub();
-    const clickEvent = new MouseEvent('click');
-
-    component.previewLocation = 'personal-files';
-    component.folderId = 'folder1';
-    component.nextNodeId = 'next1';
-    component.onNavigateNext(clickEvent);
-
-    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'next1']);
-  });
-
-  it('should navigate to next node in the root path', () => {
-    spyOn(router, 'navigate').and.stub();
-    const clickEvent = new MouseEvent('click');
-
-    component.previewLocation = 'personal-files';
-    component.folderId = null;
-    component.nextNodeId = 'next1';
-    component.onNavigateNext(clickEvent);
-
-    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'next1']);
-  });
-
-  it('should not navigate back if node unset', () => {
-    spyOn(router, 'navigate').and.stub();
-    const clickEvent = new MouseEvent('click');
-
-    component.nextNodeId = null;
-    component.onNavigateNext(clickEvent);
-
-    expect(router.navigate).not.toHaveBeenCalled();
-  });
-
-  it('should generate preview path for a folder only', () => {
-    component.previewLocation = 'personal-files';
-
-    expect(component.getPreviewPath('folder1', null)).toEqual(['personal-files', 'folder1']);
-  });
-
-  it('should generate preview path for a folder and a node', () => {
-    component.previewLocation = 'personal-files';
-
-    expect(component.getPreviewPath('folder1', 'node1')).toEqual(['personal-files', 'folder1', 'preview', 'node1']);
-  });
-
-  it('should generate preview path for a node only', () => {
-    component.previewLocation = 'personal-files';
-
-    expect(component.getPreviewPath(null, 'node1')).toEqual(['personal-files', 'preview', 'node1']);
-  });
-
-  it('should generate preview for the location only', () => {
-    component.previewLocation = 'personal-files';
-
-    expect(component.getPreviewPath(null, null)).toEqual(['personal-files']);
-  });
-
-  it('should navigate back to root path upon close', () => {
-    spyOn(router, 'navigate').and.stub();
-
-    component.routesSkipNavigation = [];
-    component.previewLocation = 'libraries';
-    component.folderId = null;
-
-    component.onVisibilityChanged(false);
-
-    expect(router.navigate).toHaveBeenCalledWith(['libraries', {}]);
-  });
-
-  it('should navigate back to folder path upon close', () => {
-    spyOn(router, 'navigate').and.stub();
-
-    component.routesSkipNavigation = [];
-    component.previewLocation = 'libraries';
-    component.folderId = 'site1';
-
-    component.onVisibilityChanged(false);
-
-    expect(router.navigate).toHaveBeenCalledWith(['libraries', {}, 'site1']);
-  });
-
-  it('should not navigate to root path for certain routes upon close', () => {
-    spyOn(router, 'navigate').and.stub();
-
-    component.routesSkipNavigation = ['shared'];
-    component.previewLocation = 'shared';
-    component.folderId = 'folder1';
-
-    component.onVisibilityChanged(false);
-
-    expect(router.navigate).toHaveBeenCalledWith(['shared', {}]);
-  });
-
-  it('should not navigate back if viewer is still visible', () => {
-    spyOn(router, 'navigate').and.stub();
-
-    component.routesSkipNavigation = [];
-    component.previewLocation = 'shared';
-
-    component.onVisibilityChanged(true);
-
-    expect(router.navigate).not.toHaveBeenCalled();
-  });
-
-  it('should enable multiple document navigation from route data', () => {
-    route.snapshot.data = {
-      navigateMultiple: true
-    };
-
-    component.ngOnInit();
-
-    expect(component.navigateMultiple).toBeTruthy();
-  });
-
-  it('should not enable multiple document navigation from route data', () => {
-    route.snapshot.data = {};
-
-    component.ngOnInit();
-
-    expect(component.navigateMultiple).toBeFalsy();
-  });
-
-  it('should fetch navigation source from route', () => {
-    route.snapshot.data = {
-      navigateSource: 'personal-files'
-    };
-
-    component.ngOnInit();
-
-    expect(component.navigateSource).toBe('personal-files');
-  });
-
-  it('should fetch case-insensitive source from route', () => {
-    route.snapshot.data = {
-      navigateSource: 'PERSONAL-FILES'
-    };
-
-    component.navigationSources = ['personal-files'];
-    component.ngOnInit();
-
-    expect(component.navigateSource).toBe('PERSONAL-FILES');
-  });
-
-  it('should fetch only permitted navigation source from route', () => {
-    route.snapshot.data = {
-      navigateSource: 'personal-files'
-    };
-
-    component.navigationSources = ['shared'];
-    component.ngOnInit();
-
-    expect(component.navigateSource).toBeNull();
-  });
-
-  it('should display document upon init', () => {
-    route.params = of({
-      folderId: 'folder1',
-      nodeId: 'node1'
-    });
-
-    spyOn(component, 'displayNode').and.stub();
-
-    component.ngOnInit();
-
-    expect(component.folderId).toBe('folder1');
-    expect(component.displayNode).toHaveBeenCalledWith('node1');
-  });
-
-  it('should return empty nearest nodes for missing node id', async () => {
-    const nearest = await component.getNearestNodes(null, 'folder1');
-
-    expect(nearest).toEqual({ left: null, right: null });
-  });
-
-  it('should return empty nearest nodes for missing folder id', async () => {
-    const nearest = await component.getNearestNodes('node1', null);
-
-    expect(nearest).toEqual({ left: null, right: null });
-  });
-
-  it('should return empty nearest nodes for crashed fields id request', async () => {
-    spyOn(component, 'getFileIds').and.returnValue(Promise.reject(new Error('err')));
-
-    const nearest = await component.getNearestNodes('node1', 'folder1');
-
-    expect(nearest).toEqual({ left: null, right: null });
-  });
-
-  it('should return nearest nodes', async () => {
-    spyOn(component, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
-
-    let nearest = await component.getNearestNodes('node1', 'folder1');
-    expect(nearest).toEqual({ left: null, right: 'node2' });
-
-    nearest = await component.getNearestNodes('node3', 'folder1');
-    expect(nearest).toEqual({ left: 'node2', right: 'node4' });
-
-    nearest = await component.getNearestNodes('node5', 'folder1');
-    expect(nearest).toEqual({ left: 'node4', right: null });
-  });
-
-  it('should return empty nearest nodes if node is already deleted', async () => {
-    spyOn(component, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
-
-    const nearest = await component.getNearestNodes('node9', 'folder1');
-    expect(nearest).toEqual({ left: null, right: null });
-  });
-
-  it('should not display node when id is missing', async () => {
-    spyOn(router, 'navigate').and.stub();
-    spyOn(contentApi, 'getNodeInfo').and.returnValue(of(null));
-
-    await component.displayNode(null);
-
-    expect(contentApi.getNodeInfo).not.toHaveBeenCalled();
-    expect(router.navigate).not.toHaveBeenCalled();
-  });
-
-  it('should navigate to original location if node not found', async () => {
-    spyOn(router, 'navigate').and.stub();
-    spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
-
-    component.previewLocation = 'personal-files';
-    await component.displayNode('folder1');
-
-    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
-    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
-  });
-
-  it('should navigate to original location if node is not a File', async () => {
-    spyOn(router, 'navigate').and.stub();
-    spyOn(contentApi, 'getNodeInfo').and.returnValue(
-      of({
-        isFile: false
-      } as Node)
-    );
-
-    component.previewLocation = 'personal-files';
-    await component.displayNode('folder1');
-
-    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
-    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
-  });
-
-  it('should navigate to original location in case of Alfresco API errors', async () => {
-    spyOn(router, 'navigate').and.stub();
-    spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
-
-    component.previewLocation = 'personal-files';
-    await component.displayNode('folder1');
-
-    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
-    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
-  });
-
-  it('should fetch and sort file ids for personal-files', async () => {
-    preferences.set('personal-files.sorting.key', 'name');
-    preferences.set('personal-files.sorting.direction', 'desc');
-
-    spyOn(contentApi, 'getNodeChildren').and.returnValue(
-      of({
-        list: {
-          entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
-        }
-      } as NodePaging)
-    );
-
-    const ids = await component.getFileIds('personal-files', 'folder1');
-    expect(ids).toEqual(['node2', 'node1']);
-  });
-
-  it('should fetch file ids for personal-files with default sorting for missing key', async () => {
-    preferences.set('personal-files.sorting.key', 'missing');
-    preferences.set('personal-files.sorting.direction', 'desc');
-
-    spyOn(contentApi, 'getNodeChildren').and.returnValue(
-      of({
-        list: {
-          entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
-        }
-      } as NodePaging)
-    );
-
-    const ids = await component.getFileIds('personal-files', 'folder1');
-    expect(ids).toEqual(['node1', 'node2']);
-  });
-
-  it('should sort file ids for personal-files with [modifiedAt desc]', async () => {
-    spyOn(preferences, 'get').and.returnValue(null);
-
-    spyOn(contentApi, 'getNodeChildren').and.returnValue(
-      of({
-        list: {
-          entries: [
-            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } },
-            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } }
-          ]
-        }
-      } as NodePaging)
-    );
-
-    const ids = await component.getFileIds('personal-files', 'folder1');
-    expect(ids).toEqual(['node2', 'node1']);
-  });
-
-  it('should fetch and sort file ids for libraries', async () => {
-    preferences.set('personal-files.sorting.key', 'name');
-    preferences.set('personal-files.sorting.direction', 'desc');
-
-    spyOn(contentApi, 'getNodeChildren').and.returnValue(
-      of({
-        list: {
-          entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
-        }
-      } as NodePaging)
-    );
-
-    const ids = await component.getFileIds('libraries', 'site1');
-    expect(ids).toEqual(['node2', 'node1']);
-  });
-
-  it('should require folder id to fetch ids for libraries', async () => {
-    const ids = await component.getFileIds('libraries', null);
-    expect(ids).toEqual([]);
-  });
-
-  it('should sort file ids for libraries with [modifiedAt desc]', async () => {
-    spyOn(preferences, 'get').and.returnValue(null);
-
-    spyOn(contentApi, 'getNodeChildren').and.returnValue(
-      of({
-        list: {
-          entries: [
-            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } },
-            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } }
-          ]
-        }
-      } as NodePaging)
-    );
-
-    const ids = await component.getFileIds('libraries', 'folder1');
-    expect(ids).toEqual(['node2', 'node1']);
-  });
-
-  it('should fetch and sort ids for favorites', async () => {
-    preferences.set('favorites.sorting.key', 'name');
-    preferences.set('favorites.sorting.direction', 'desc');
-
-    spyOn(contentApi, 'getFavorites').and.returnValue(
-      of({
-        list: {
-          entries: [
-            { entry: { target: { file: { id: 'file3', name: 'file 3' } } } },
-            { entry: { target: { file: { id: 'file1', name: 'file 1' } } } },
-            { entry: { target: { file: { id: 'file2', name: 'file 2' } } } }
-          ]
-        }
-      } as FavoritePaging)
-    );
-
-    const ids = await component.getFileIds('favorites');
-    expect(ids).toEqual(['file3', 'file2', 'file1']);
-  });
-
-  it('should sort file ids for favorites with [modifiedAt desc]', async () => {
-    spyOn(preferences, 'get').and.returnValue(null);
-
-    spyOn(contentApi, 'getFavorites').and.returnValue(
-      of({
-        list: {
-          entries: [
-            {
-              entry: {
-                target: { file: { id: 'file3', modifiedAt: new Date(3) } }
-              }
-            },
-            {
-              entry: {
-                target: { file: { id: 'file1', modifiedAt: new Date(1) } }
-              }
-            },
-            {
-              entry: {
-                target: { file: { id: 'file2', modifiedAt: new Date(2) } }
-              }
-            }
-          ]
-        }
-      } as FavoritePaging)
-    );
-
-    const ids = await component.getFileIds('favorites');
-    expect(ids).toEqual(['file3', 'file2', 'file1']);
-  });
-
-  it('should fetch and sort file ids for shared files', async () => {
-    preferences.set('shared.sorting.key', 'name');
-    preferences.set('shared.sorting.direction', 'asc');
-
-    spyOn(contentApi, 'findSharedLinks').and.returnValue(
-      of({
-        list: {
-          entries: [
-            {
-              entry: {
-                nodeId: 'node2',
-                name: 'node 2',
-                modifiedAt: new Date(2)
-              }
-            },
-            {
-              entry: {
-                nodeId: 'node1',
-                name: 'node 1',
-                modifiedAt: new Date(1)
-              }
-            }
-          ]
-        }
-      } as SharedLinkPaging)
-    );
-
-    const ids = await component.getFileIds('shared');
-    expect(ids).toEqual(['node1', 'node2']);
-  });
-
-  it('should sort file ids for favorites with [modifiedAt desc]', async () => {
-    spyOn(preferences, 'get').and.returnValue(null);
-
-    spyOn(contentApi, 'findSharedLinks').and.returnValue(
-      of({
-        list: {
-          entries: [
-            {
-              entry: {
-                nodeId: 'node2',
-                name: 'node 2',
-                modifiedAt: new Date(2)
-              }
-            },
-            {
-              entry: {
-                nodeId: 'node1',
-                name: 'node 1',
-                modifiedAt: new Date(1)
-              }
-            }
-          ]
-        }
-      } as SharedLinkPaging)
-    );
-
-    const ids = await component.getFileIds('shared');
-    expect(ids).toEqual(['node2', 'node1']);
-  });
-
-  it('should fetch and sort ids for recent-files', async () => {
-    preferences.set('recent-files.sorting.key', 'name');
-    preferences.set('recent-files.sorting.direction', 'asc');
-
-    spyOn(contentApi, 'getPerson').and.returnValue(
-      of({
-        entry: { id: 'user' }
-      } as PersonEntry)
-    );
-
-    spyOn(contentApi, 'search').and.returnValue(
-      of({
-        list: {
-          entries: [
-            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } },
-            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } }
-          ]
-        }
-      } as ResultSetPaging)
-    );
-
-    const ids = await component.getFileIds('recent-files');
-    expect(ids).toEqual(['node1', 'node2']);
-  });
-
-  it('should sort file ids for favorites with [modifiedAt desc]', async () => {
-    spyOn(preferences, 'get').and.returnValue(null);
-
-    spyOn(contentApi, 'getPerson').and.returnValue(
-      of({
-        entry: { id: 'user' }
-      } as PersonEntry)
-    );
-
-    spyOn(contentApi, 'search').and.returnValue(
-      of({
-        list: {
-          entries: [
-            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } },
-            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } }
-          ]
-        }
-      } as ResultSetPaging)
-    );
-
-    const ids = await component.getFileIds('recent-files');
-    expect(ids).toEqual(['node2', 'node1']);
-  });
-
-  it('should return to parent folder on nodesDeleted event', async () => {
-    spyOn(component, 'navigateToFileLocation');
-    fixture.detectChanges();
-    await fixture.whenStable();
-    appHookService.nodesDeleted.next();
-
-    expect(component.navigateToFileLocation).toHaveBeenCalled();
-  });
-
-  it('should return to parent folder on fileUploadDeleted event', async () => {
-    spyOn(component, 'navigateToFileLocation');
-    fixture.detectChanges();
-    await fixture.whenStable();
-    uploadService.fileUploadDeleted.next();
-
-    expect(component.navigateToFileLocation).toHaveBeenCalled();
-  });
-
-  it('should emit nodeUpdated event on fileUploadComplete event', fakeAsync(() => {
-    spyOn(nodesApiService.nodeUpdated, 'next');
-    fixture.detectChanges();
-    uploadService.fileUploadComplete.next({ data: { entry: {} } } as any);
-    tick(300);
-
-    expect(nodesApiService.nodeUpdated.next).toHaveBeenCalled();
-  }));
-
-  it('should return to parent folder when event emitted from extension', async () => {
-    spyOn(component, 'navigateToFileLocation');
-    fixture.detectChanges();
-    await fixture.whenStable();
-    store.dispatch(new ClosePreviewAction());
-    expect(component.navigateToFileLocation).toHaveBeenCalled();
-  });
-
-  describe('Keyboard navigation', () => {
-    beforeEach(() => {
-      component.nextNodeId = 'nextNodeId';
-      component.previousNodeId = 'previousNodeId';
-      spyOn(router, 'navigate').and.stub();
-    });
-
-    afterEach(() => {
-      fixture.destroy();
-    });
-
-    it('should not navigate on keyboard event if target is child of sidebar container', () => {
-      const parent = document.createElement('div');
-      parent.className = 'adf-viewer__sidebar';
-
-      const child = document.createElement('button');
-      child.addEventListener('keyup', function (e) {
-        component.onNavigateNext(e);
-      });
-      parent.appendChild(child);
-      document.body.appendChild(parent);
-
-      child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
-
-      expect(router.navigate).not.toHaveBeenCalled();
-    });
-
-    it('should not navigate on keyboard event if target is child of cdk overlay', () => {
-      const parent = document.createElement('div');
-      parent.className = 'cdk-overlay-container';
-
-      const child = document.createElement('button');
-      child.addEventListener('keyup', function (e) {
-        component.onNavigateNext(e);
-      });
-      parent.appendChild(child);
-      document.body.appendChild(parent);
-
-      child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
-
-      expect(router.navigate).not.toHaveBeenCalled();
-    });
-  });
-});

projects/aca-content/preview/src/lib/preview.module.ts

@@ -1,32 +0,0 @@
-/*!
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Alfresco Example Content Application
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail. Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { NgModule } from '@angular/core';
-import { PreviewComponent } from './components/preview.component';
-
-@NgModule({
-  imports: [PreviewComponent],
-  exports: [PreviewComponent]
-})
-export class PreviewModule {}

projects/aca-content/preview/src/public-api.ts

@@ -1,30 +0,0 @@
-/*!
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Alfresco Example Content Application
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail. Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
- */
-
-/*
- * Public API Surface of aca-preview
- */
-
-export * from './lib/components/preview.component';
-export * from './lib/preview.module';

projects/aca-content/preview/src/test.ts

@@ -1,49 +0,0 @@
-/*!
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Alfresco Example Content Application
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail. Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
- */
-
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);

projects/aca-content/src/lib/aca-content.module.ts

@@ -63,7 +63,7 @@ import { CommentsTabComponent } from './components/info-drawer/comments-tab/comm
 import { LibraryMetadataTabComponent } from './components/info-drawer/library-metadata-tab/library-metadata-tab.component';
 import { MetadataTabComponent } from './components/info-drawer/metadata-tab/metadata-tab.component';
 import { VersionsTabComponent } from './components/info-drawer/versions-tab/versions-tab.component';
-import { PreviewComponent } from '@alfresco/aca-content/preview';
+import { PreviewComponent } from '@alfresco/aca-content/viewer';
 import { ToggleEditOfflineComponent } from './components/toolbar/toggle-edit-offline/toggle-edit-offline.component';
 import { ToggleFavoriteLibraryComponent } from './components/toolbar/toggle-favorite-library/toggle-favorite-library.component';
 import { ToggleFavoriteComponent } from './components/toolbar/toggle-favorite/toggle-favorite.component';

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html

@@ -45,6 +45,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
                 <ng-template let-context>
                   <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -64,6 +65,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
               </data-column>
             </ng-container>

projects/aca-content/src/lib/components/favorites/favorites.component.html

@@ -40,6 +40,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
                 <ng-template let-context>
                   <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -59,6 +60,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
               </data-column>
             </ng-container>

projects/aca-content/src/lib/components/files/files.component.html

@@ -23,7 +23,7 @@
           [node]="nodeResult"
           [allowDropFiles]="true"
           [navigate]="false"
-          [sorting]="['name', 'ASC']"
+          [sorting]="['name', 'asc']"
           [imageResolver]="imageResolver"
           [headerFilters]="true"
           [filterValue]="queryParams"
@@ -31,7 +31,6 @@
           [blurOnResize]="false"
           (node-dblclick)="handleNodeClick($event)"
           (name-click)="handleNodeClick($event)"
-          (sorting-changed)="onSortingChanged($event)"
           (filterSelection)="onFilterSelected($event)"
           (error)="onError()"
         >

projects/aca-content/src/lib/components/files/files.component.ts

@@ -39,7 +39,7 @@ import {
 } from '@alfresco/aca-shared';
 import { SetCurrentFolderAction, isAdmin, UploadFileVersionAction, showLoaderSelector } from '@alfresco/aca-shared/store';
 import { debounceTime, takeUntil } from 'rxjs/operators';
-import { FilterSearch, ShareDataRow, FileUploadEvent, BreadcrumbModule, UploadModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { BreadcrumbModule, DocumentListModule, FileUploadEvent, FilterSearch, ShareDataRow, UploadModule } from '@alfresco/adf-content-services';
 import { DocumentListPresetRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
@@ -74,14 +74,13 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
   isAdmin = false;
   selectedNode: NodeEntry;
   queryParams = null;
-
   showLoader$ = this.store.select(showLoaderSelector);
   private nodePath: PathElement[];
 
   columns: DocumentListPresetRef[] = [];
   isFilterHeaderActive = false;
 
-  constructor(private route: ActivatedRoute, private contentApi: ContentApiService, private nodeActionsService: NodeActionsService) {
+  constructor(private contentApi: ContentApiService, private nodeActionsService: NodeActionsService, private route: ActivatedRoute) {
     super();
   }
 
@@ -103,9 +102,9 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
           this.isValidPath = true;
 
           if (node?.entry?.isFolder) {
-            this.updateCurrentNode(node.entry);
+            void this.updateCurrentNode(node.entry);
           } else {
-            this.router.navigate(['/personal-files', node.entry.parentId], {
+            void this.router.navigate(['/personal-files', node.entry.parentId], {
               replaceUrl: true
             });
           }
@@ -145,7 +144,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
     const currentNodeId = this.route.snapshot.paramMap.get('folderId');
     const urlWithoutParams = decodeURIComponent(this.router.url).split('?')[0];
     const urlToNavigate: string[] = this.getUrlToNavigate(urlWithoutParams, currentNodeId, nodeId);
-    this.router.navigate(urlToNavigate);
+    void this.router.navigate(urlToNavigate);
   }
 
   private getUrlToNavigate(currentURL: string, currentNodeId: string, nextNodeId: string): string[] {
@@ -350,7 +349,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
       this.isFilterHeaderActive = true;
       this.navigateToFilter(activeFilters);
     } else {
-      this.router.navigate(['.'], { relativeTo: this.route });
+      void this.router.navigate(['.'], { relativeTo: this.route });
       this.isFilterHeaderActive = false;
       this.showHeader = ShowHeaderMode.Data;
       this.onAllFilterCleared();
@@ -369,7 +368,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
       objectFromMap[filter.key] = paramValue;
     });
 
-    this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
+    void this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
   }
 
   onError() {

projects/aca-content/src/lib/components/libraries/libraries.component.html

@@ -44,6 +44,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
                 <ng-template let-context>
                   <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -63,6 +64,7 @@
                 [resizable]="column.resizable"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
               </data-column>
             </ng-container>

projects/aca-content/src/lib/components/recent-files/recent-files.component.html

@@ -40,6 +40,7 @@
                 [draggable]="column.draggable"
                 [resizable]="column.resizable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
                 <ng-template let-context>
                   <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -59,6 +60,7 @@
                 [isHidden]="column.isHidden"
                 [draggable]="column.draggable"
                 [resizable]="column.resizable"
+                [sortingKey]="column.sortingKey || column.key"
               >
               </data-column>
             </ng-container>

projects/aca-content/src/lib/components/shared-files/shared-files.component.html

@@ -39,6 +39,7 @@
                 [isHidden]="column.isHidden"
                 [draggable]="column.draggable"
                 [resizable]="column.resizable"
+                [sortingKey]="column.sortingKey || column.key"
               >
                 <ng-template let-context>
                   <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -58,6 +59,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
               </data-column>
             </ng-container>

projects/aca-content/src/lib/components/trashcan/trashcan.component.html

@@ -45,6 +45,7 @@
                 [class]="column.class"
                 [sortable]="column.sortable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
                 <ng-template let-context>
                   <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
@@ -64,6 +65,7 @@
                 [draggable]="column.draggable"
                 [resizable]="column.resizable"
                 [isHidden]="column.isHidden"
+                [sortingKey]="column.sortingKey || column.key"
               >
               </data-column>
             </ng-container>

projects/aca-content/src/lib/directives/document-list.directive.ts

@@ -66,11 +66,6 @@ export class DocumentListDirective implements OnInit, OnDestroy {
       this.router.url.startsWith('/search-libraries');
 
     if (this.sortingPreferenceKey) {
-      const current = this.documentList.sorting;
-
-      const key = this.preferences.get(`${this.sortingPreferenceKey}.sorting.sortingKey`, current[0]);
-      const direction = this.preferences.get(`${this.sortingPreferenceKey}.sorting.direction`, current[1]);
-
       if (this.preferences.hasItem(`${this.sortingPreferenceKey}.columns.width`)) {
         this.documentList.setColumnsWidths = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.width`));
       }
@@ -83,9 +78,11 @@ export class DocumentListDirective implements OnInit, OnDestroy {
         this.documentList.setColumnsOrder = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.order`));
       }
 
-      this.documentList.sorting = [key, direction];
+      const mode = this.documentList.sortingMode;
-      // TODO: bug in ADF, the `sorting` binding is not updated when changed from code
+      this.preferences.set(`${this.sortingPreferenceKey}.sorting.mode`, mode);
-      this.documentList.data.setSorting({ key, direction });
+      if (mode === 'server') {
+        this.restoreSorting();
+      }
     }
 
     this.documentList.ready
@@ -112,6 +109,9 @@ export class DocumentListDirective implements OnInit, OnDestroy {
   @HostListener('sorting-changed', ['$event'])
   onSortingChanged(event: CustomEvent) {
     if (this.sortingPreferenceKey) {
+      if (this.documentList.sortingMode === 'client') {
+        this.storePreviousSorting();
+      }
       this.preferences.set(`${this.sortingPreferenceKey}.sorting.key`, event.detail.key);
       this.preferences.set(`${this.sortingPreferenceKey}.sorting.sortingKey`, event.detail.sortingKey);
       this.preferences.set(`${this.sortingPreferenceKey}.sorting.direction`, event.detail.direction);
@@ -154,6 +154,7 @@ export class DocumentListDirective implements OnInit, OnDestroy {
 
   onReady() {
     this.updateSelection();
+    this.restoreSorting();
   }
 
   private updateSelection() {
@@ -180,4 +181,40 @@ export class DocumentListDirective implements OnInit, OnDestroy {
     this.documentList.resetSelection();
     this.store.dispatch(new SetSelectedNodesAction([]));
   }
+
+  private setSorting(key: string, direction: string) {
+    this.documentList.sorting = [key, direction];
+    this.documentList.data.setSorting({ key, direction });
+  }
+
+  private storePreviousSorting() {
+    if (this.preferences.hasItem(`${this.sortingPreferenceKey}.sorting.key`)) {
+      const keyToSave = this.preferences.get(`${this.sortingPreferenceKey}.sorting.key`);
+
+      if (!keyToSave.includes(this.documentList.sorting[0])) {
+        const dirToSave = this.preferences.get(`${this.sortingPreferenceKey}.sorting.direction`);
+        this.preferences.set(`${this.sortingPreferenceKey}.sorting.previousKey`, keyToSave);
+        this.preferences.set(`${this.sortingPreferenceKey}.sorting.previousDirection`, dirToSave);
+      }
+    }
+  }
+
+  private restoreSorting() {
+    const [previousKey, previousDir] = [
+      this.preferences.get(`${this.sortingPreferenceKey}.sorting.previousKey`, null),
+      this.preferences.get(`${this.sortingPreferenceKey}.sorting.previousDirection`, null)
+    ];
+
+    const [currentKey, currentDir] = [
+      this.preferences.get(`${this.sortingPreferenceKey}.sorting.key`, null),
+      this.preferences.get(`${this.sortingPreferenceKey}.sorting.direction`, null)
+    ];
+
+    if (previousKey) {
+      this.setSorting(previousKey, previousDir);
+    }
+    if (currentKey) {
+      this.setSorting(currentKey, currentDir);
+    }
+  }
 }

projects/aca-content/viewer/src/lib/components/preview/preview.component.spec.ts

@@ -0,0 +1,352 @@
+/*!
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail. Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Router, ActivatedRoute } from '@angular/router';
+import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
+import { AuthenticationService } from '@alfresco/adf-core';
+import { UploadService, NodesApiService, DiscoveryApiService } from '@alfresco/adf-content-services';
+import { ClosePreviewAction } from '@alfresco/aca-shared/store';
+import { PreviewComponent } from './preview.component';
+import { of, throwError } from 'rxjs';
+import {
+  ContentApiService,
+  AppHookService,
+  DocumentBasePageService,
+  LibTestingModule,
+  discoveryApiServiceMockValue,
+  DocumentBasePageServiceMock
+} from '@alfresco/aca-shared';
+import { Store } from '@ngrx/store';
+import { Node } from '@alfresco/js-api';
+import { AcaViewerModule } from '../../viewer.module';
+
+const clickEvent = new MouseEvent('click');
+
+describe('PreviewComponent', () => {
+  let fixture: ComponentFixture<PreviewComponent>;
+  let component: PreviewComponent;
+  let router: Router;
+  let route: ActivatedRoute;
+  let contentApi: ContentApiService;
+  let uploadService: UploadService;
+  let nodesApiService: NodesApiService;
+  let appHookService: AppHookService;
+  let store: Store<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LibTestingModule, AcaViewerModule],
+      providers: [
+        { provide: DocumentBasePageService, useValue: DocumentBasePageServiceMock },
+        { provide: DiscoveryApiService, useValue: discoveryApiServiceMockValue },
+        { provide: AuthenticationService, useValue: {} }
+      ]
+    });
+
+    fixture = TestBed.createComponent(PreviewComponent);
+    component = fixture.componentInstance;
+
+    router = TestBed.inject(Router);
+    route = TestBed.inject(ActivatedRoute);
+    contentApi = TestBed.inject(ContentApiService);
+    uploadService = TestBed.inject(UploadService);
+    nodesApiService = TestBed.inject(NodesApiService);
+    appHookService = TestBed.inject(AppHookService);
+    store = TestBed.inject(Store);
+  });
+
+  describe('Navigation', () => {
+    beforeEach(() => {
+      spyOn(router, 'navigate').and.stub();
+    });
+
+    describe('From personal-files', () => {
+      beforeEach(() => {
+        component.previewLocation = 'personal-files';
+      });
+
+      it('should navigate to previous node in sub-folder', () => {
+        component.folderId = 'folder1';
+        component.previousNodeId = 'previous1';
+        component.onNavigateBefore(clickEvent);
+
+        expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'previous1']);
+      });
+
+      it('should navigate back to previous node in the root path', () => {
+        component.folderId = null;
+        component.previousNodeId = 'previous1';
+        component.onNavigateBefore(clickEvent);
+
+        expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'previous1']);
+      });
+
+      it('should navigate to next node in sub-folder', () => {
+        component.folderId = 'folder1';
+        component.nextNodeId = 'next1';
+
+        component.onNavigateNext(clickEvent);
+
+        expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'next1']);
+      });
+
+      it('should navigate to next node in the root path', () => {
+        component.folderId = null;
+        component.nextNodeId = 'next1';
+
+        component.onNavigateNext(clickEvent);
+
+        expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'next1']);
+      });
+    });
+
+    it('should not navigate to nearest nodes if node unset', () => {
+      component.previousNodeId = null;
+      component.nextNodeId = null;
+
+      component.onNavigateBefore(clickEvent);
+      component.onNavigateNext(clickEvent);
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('should navigate back to root path upon close', () => {
+      component.routesSkipNavigation = [];
+      component.previewLocation = 'libraries';
+      component.folderId = null;
+
+      component.onVisibilityChanged(false);
+
+      expect(router.navigate).toHaveBeenCalledWith(['libraries', {}]);
+    });
+
+    it('should navigate back to folder path upon close', () => {
+      component.routesSkipNavigation = [];
+      component.previewLocation = 'libraries';
+      component.folderId = 'site1';
+
+      component.onVisibilityChanged(false);
+
+      expect(router.navigate).toHaveBeenCalledWith(['libraries', {}, 'site1']);
+    });
+
+    it('should not navigate to root path for certain routes upon close', () => {
+      component.routesSkipNavigation = ['shared'];
+      component.previewLocation = 'shared';
+      component.folderId = 'folder1';
+
+      component.onVisibilityChanged(false);
+
+      expect(router.navigate).toHaveBeenCalledWith(['shared', {}]);
+    });
+
+    it('should not navigate back if viewer is still visible', () => {
+      component.routesSkipNavigation = [];
+      component.previewLocation = 'shared';
+
+      component.onVisibilityChanged(true);
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Generate paths', () => {
+    beforeEach(() => {
+      component.previewLocation = 'personal-files';
+    });
+
+    it('should generate preview path for a folder only', () => {
+      expect(component.getPreviewPath('folder1', null)).toEqual(['personal-files', 'folder1']);
+    });
+
+    it('should generate preview path for a folder and a node', () => {
+      expect(component.getPreviewPath('folder1', 'node1')).toEqual(['personal-files', 'folder1', 'preview', 'node1']);
+    });
+
+    it('should generate preview path for a node only', () => {
+      expect(component.getPreviewPath(null, 'node1')).toEqual(['personal-files', 'preview', 'node1']);
+    });
+
+    it('should generate preview for the location only', () => {
+      expect(component.getPreviewPath(null, null)).toEqual(['personal-files']);
+    });
+  });
+
+  it('should enable multiple document navigation from route data', () => {
+    route.snapshot.data = {
+      navigateMultiple: true
+    };
+
+    component.ngOnInit();
+
+    expect(component.navigateMultiple).toBeTruthy();
+  });
+
+  it('should not enable multiple document navigation from route data', () => {
+    route.snapshot.data = {};
+
+    component.ngOnInit();
+
+    expect(component.navigateMultiple).toBeFalsy();
+  });
+
+  it('should set folderId and call displayNode with nodeId upon init', () => {
+    route.params = of({
+      folderId: 'folder1',
+      nodeId: 'node1'
+    });
+
+    spyOn(component, 'displayNode').and.stub();
+
+    component.ngOnInit();
+
+    expect(component.folderId).toBe('folder1');
+    expect(component.displayNode).toHaveBeenCalledWith('node1');
+  });
+
+  it('should navigate to original location if node not found', async () => {
+    spyOn(router, 'navigate').and.stub();
+    spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
+
+    component.previewLocation = 'personal-files';
+    await component.displayNode('folder1');
+
+    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
+  });
+
+  it('should navigate to original location if node is not a File', async () => {
+    spyOn(router, 'navigate').and.stub();
+    spyOn(contentApi, 'getNodeInfo').and.returnValue(
+      of({
+        isFile: false
+      } as Node)
+    );
+
+    component.previewLocation = 'personal-files';
+    await component.displayNode('folder1');
+
+    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
+  });
+
+  it('should navigate to original location in case of Alfresco API errors', async () => {
+    spyOn(router, 'navigate').and.stub();
+    spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
+
+    component.previewLocation = 'personal-files';
+    await component.displayNode('folder1');
+
+    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
+  });
+
+  it('should return to parent folder on nodesDeleted event', async () => {
+    spyOn(component, 'navigateToFileLocation');
+    fixture.detectChanges();
+    await fixture.whenStable();
+    appHookService.nodesDeleted.next();
+
+    expect(component.navigateToFileLocation).toHaveBeenCalled();
+  });
+
+  it('should return to parent folder on fileUploadDeleted event', async () => {
+    spyOn(component, 'navigateToFileLocation');
+    fixture.detectChanges();
+    await fixture.whenStable();
+    uploadService.fileUploadDeleted.next();
+
+    expect(component.navigateToFileLocation).toHaveBeenCalled();
+  });
+
+  it('should emit nodeUpdated event on fileUploadComplete event', fakeAsync(() => {
+    spyOn(nodesApiService.nodeUpdated, 'next');
+    fixture.detectChanges();
+    uploadService.fileUploadComplete.next({ data: { entry: {} } } as any);
+    tick(300);
+
+    expect(nodesApiService.nodeUpdated.next).toHaveBeenCalled();
+  }));
+
+  it('should return to parent folder when event emitted from extension', async () => {
+    spyOn(component, 'navigateToFileLocation');
+    fixture.detectChanges();
+    await fixture.whenStable();
+    store.dispatch(new ClosePreviewAction());
+    expect(component.navigateToFileLocation).toHaveBeenCalled();
+  });
+
+  it('should fetch navigation source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'personal-files'
+    };
+
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBe('personal-files');
+  });
+
+  it('should fetch case-insensitive source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'PERSONAL-FILES'
+    };
+
+    component.navigationSources = ['personal-files'];
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBe('PERSONAL-FILES');
+  });
+
+  it('should fetch only permitted navigation source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'personal-files'
+    };
+
+    component.navigationSources = ['shared'];
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBeNull();
+  });
+
+  it('should not navigate on keyboard event if target is child of sidebar container or cdk overlay', () => {
+    component.nextNodeId = 'node';
+    spyOn(router, 'navigate').and.stub();
+
+    const parent = document.createElement('div');
+    const child = document.createElement('button');
+    child.addEventListener('keyup', function (e) {
+      component.onNavigateNext(e);
+    });
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    parent.className = 'adf-viewer__sidebar';
+    child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+    expect(router.navigate).not.toHaveBeenCalled();
+
+    parent.className = 'cdk-overlay-container';
+    child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+});

projects/aca-content/viewer/src/lib/components/preview/preview.component.ts

@@ -24,9 +24,9 @@
 
 import { Component, OnInit, OnDestroy, ViewEncapsulation, HostListener } from '@angular/core';
 import { CommonModule, Location } from '@angular/common';
-import { ActivatedRoute, UrlTree, UrlSegmentGroup, UrlSegment, PRIMARY_OUTLET } from '@angular/router';
+import { UrlTree, UrlSegmentGroup, UrlSegment, PRIMARY_OUTLET, ActivatedRoute } from '@angular/router';
 import { debounceTime, map, takeUntil } from 'rxjs/operators';
-import { UserPreferencesService, ObjectUtils, ViewerModule } from '@alfresco/adf-core';
+import { ViewerModule } from '@alfresco/adf-core';
 import { ClosePreviewAction, ViewerActionTypes, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
 import {
   PageComponent,
@@ -36,11 +36,11 @@ import {
   ToolbarMenuItemComponent,
   ToolbarComponent
 } from '@alfresco/aca-shared';
-import { ContentActionRef, ViewerExtensionRef } from '@alfresco/adf-extensions';
+import { ContentActionRef } from '@alfresco/adf-extensions';
-import { SearchRequest } from '@alfresco/js-api';
 import { from } from 'rxjs';
 import { Actions, ofType } from '@ngrx/effects';
 import { AlfrescoViewerModule, NodesApiService } from '@alfresco/adf-content-services';
+import { ViewerService } from '../../services/viewer.service';
 
 @Component({
   standalone: true,
@@ -52,55 +52,30 @@ import { AlfrescoViewerModule, NodesApiService } from '@alfresco/adf-content-ser
   host: { class: 'app-preview' }
 })
 export class PreviewComponent extends PageComponent implements OnInit, OnDestroy {
-  previewLocation: string = null;
+  folderId: string = null;
-  routesSkipNavigation = ['shared', 'recent-files', 'favorites'];
+  navigateBackAsClose = false;
+  navigateMultiple = false;
   navigateSource: string = null;
   navigationSources = ['favorites', 'libraries', 'personal-files', 'recent-files', 'shared'];
-  folderId: string = null;
-  nodeId: string = null;
-  previousNodeId: string;
   nextNodeId: string;
-  navigateMultiple = false;
+  nodeId: string = null;
   openWith: Array<ContentActionRef> = [];
-  contentExtensions: Array<ViewerExtensionRef> = [];
+  previewLocation: string = null;
+  previousNodeId: string;
+  routesSkipNavigation = ['favorites', 'recent-files', 'shared'];
   showRightSide = false;
-  navigateBackAsClose = false;
   simplestMode = false;
 
-  recentFileFilters = [
-    'TYPE:"content"',
-    '-PATH:"//cm:wiki/*"',
-    '-TYPE:"app:filelink"',
-    '-TYPE:"fm:post"',
-    '-TYPE:"cm:thumbnail"',
-    '-TYPE:"cm:failedThumbnail"',
-    '-TYPE:"cm:rating"',
-    '-TYPE:"dl:dataList"',
-    '-TYPE:"dl:todoList"',
-    '-TYPE:"dl:issue"',
-    '-TYPE:"dl:contact"',
-    '-TYPE:"dl:eventAgenda"',
-    '-TYPE:"dl:event"',
-    '-TYPE:"dl:task"',
-    '-TYPE:"dl:simpletask"',
-    '-TYPE:"dl:meetingAgenda"',
-    '-TYPE:"dl:location"',
-    '-TYPE:"fm:topic"',
-    '-TYPE:"fm:post"',
-    '-TYPE:"ia:calendarEvent"',
-    '-TYPE:"lnk:link"'
-  ];
-
   private containersSkipNavigation = ['adf-viewer__sidebar', 'cdk-overlay-container', 'adf-image-viewer'];
 
   constructor(
-    private contentApi: ContentApiService,
-    private preferences: UserPreferencesService,
-    private route: ActivatedRoute,
-    private nodesApiService: NodesApiService,
     private actions$: Actions,
+    private appHookService: AppHookService,
+    private contentApi: ContentApiService,
     private location: Location,
-    private appHookService: AppHookService
+    private nodesApiService: NodesApiService,
+    private route: ActivatedRoute,
+    private viewerService: ViewerService
   ) {
     super();
   }
@@ -135,7 +110,7 @@ export class PreviewComponent extends PageComponent implements OnInit, OnDestroy
       this.folderId = params.folderId;
       const id = params.nodeId;
       if (id) {
-        this.displayNode(id);
+        void this.displayNode(id);
       }
     });
 
@@ -178,11 +153,12 @@ export class PreviewComponent extends PageComponent implements OnInit, OnDestroy
         this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
 
         if (this.node?.isFile) {
-          const nearest = await this.getNearestNodes(this.node.id, this.node.parentId);
-
-          this.previousNodeId = nearest.left;
-          this.nextNodeId = nearest.right;
           this.nodeId = this.node.id;
+          if (this.navigateMultiple) {
+            const nearest = await this.viewerService.getNearestNodes(this.node.id, this.node.parentId, this.navigateSource);
+            this.previousNodeId = nearest.left;
+            this.nextNodeId = nearest.right;
+          }
           return;
         }
         await this.router.navigate([this.previewLocation, id]);
@@ -225,7 +201,7 @@ export class PreviewComponent extends PageComponent implements OnInit, OnDestroy
         if (!shouldSkipNavigation && this.folderId) {
           route.push(this.folderId);
         }
-        this.router.navigate(route);
+        void this.router.navigate(route);
       }
     }
   }
@@ -237,7 +213,7 @@ export class PreviewComponent extends PageComponent implements OnInit, OnDestroy
     }
 
     if (this.previousNodeId) {
-      this.router.navigate(this.getPreviewPath(this.folderId, this.previousNodeId));
+      void this.router.navigate(this.getPreviewPath(this.folderId, this.previousNodeId));
     }
   }
 
@@ -248,7 +224,7 @@ export class PreviewComponent extends PageComponent implements OnInit, OnDestroy
     }
 
     if (this.nextNodeId) {
-      this.router.navigate(this.getPreviewPath(this.folderId, this.nextNodeId));
+      void this.router.navigate(this.getPreviewPath(this.folderId, this.nextNodeId));
     }
   }
 
@@ -272,165 +248,6 @@ export class PreviewComponent extends PageComponent implements OnInit, OnDestroy
     return route;
   }
 
-  /**
-   * Retrieves nearest node information for the given node and folder.
-   *
-   * @param nodeId Unique identifier of the document node
-   * @param folderId Unique identifier of the containing folder node.
-   */
-  async getNearestNodes(nodeId: string, folderId: string): Promise<{ left: string; right: string }> {
-    const empty = {
-      left: null,
-      right: null
-    };
-
-    if (nodeId && folderId) {
-      try {
-        const ids = await this.getFileIds(this.navigateSource, folderId);
-        const idx = ids.indexOf(nodeId);
-
-        if (idx >= 0) {
-          return {
-            left: ids[idx - 1] || null,
-            right: ids[idx + 1] || null
-          };
-        } else {
-          return empty;
-        }
-      } catch {
-        return empty;
-      }
-    } else {
-      return empty;
-    }
-  }
-
-  /**
-   * Retrieves a list of node identifiers for the folder and data source.
-   *
-   * @param source Data source name. Allowed values are: personal-files, libraries, favorites, shared, recent-files.
-   * @param folderId Containing folder node identifier for 'personal-files' and 'libraries' sources.
-   */
-  async getFileIds(source: string, folderId?: string): Promise<string[]> {
-    if ((source === 'personal-files' || source === 'libraries') && folderId) {
-      const sortKey = this.preferences.get('personal-files.sorting.key') || 'modifiedAt';
-      const sortDirection = this.preferences.get('personal-files.sorting.direction') || 'desc';
-      const nodes = await this.contentApi
-        .getNodeChildren(folderId, {
-          // orderBy: `${sortKey} ${sortDirection}`,
-          fields: ['id', this.getRootField(sortKey)],
-          where: '(isFile=true)'
-        })
-        .toPromise();
-
-      const entries = nodes.list.entries.map((obj) => obj.entry);
-      this.sort(entries, sortKey, sortDirection);
-
-      return entries.map((obj) => obj.id);
-    }
-
-    if (source === 'favorites') {
-      const nodes = await this.contentApi
-        .getFavorites('-me-', {
-          where: '(EXISTS(target/file))',
-          fields: ['target']
-        })
-        .toPromise();
-
-      const sortKey = this.preferences.get('favorites.sorting.key') || 'modifiedAt';
-      const sortDirection = this.preferences.get('favorites.sorting.direction') || 'desc';
-      const files = nodes.list.entries.map((obj) => obj.entry.target.file);
-      this.sort(files, sortKey, sortDirection);
-
-      return files.map((f) => f.id);
-    }
-
-    if (source === 'shared') {
-      const sortingKey = this.preferences.get('shared.sorting.key') || 'modifiedAt';
-      const sortingDirection = this.preferences.get('shared.sorting.direction') || 'desc';
-
-      const nodes = await this.contentApi
-        .findSharedLinks({
-          fields: ['nodeId', this.getRootField(sortingKey)]
-        })
-        .toPromise();
-
-      const entries = nodes.list.entries.map((obj) => obj.entry);
-      this.sort(entries, sortingKey, sortingDirection);
-
-      return entries.map((obj) => obj.nodeId);
-    }
-
-    if (source === 'recent-files') {
-      const person = await this.contentApi.getPerson('-me-').toPromise();
-      const username = person.entry.id;
-      const sortingKey = this.preferences.get('recent-files.sorting.key') || 'modifiedAt';
-      const sortingDirection = this.preferences.get('recent-files.sorting.direction') || 'desc';
-
-      const query: SearchRequest = {
-        query: {
-          query: '*',
-          language: 'afts'
-        },
-        filterQueries: [
-          { query: `cm:modified:[NOW/DAY-30DAYS TO NOW/DAY+1DAY]` },
-          { query: `cm:modifier:${username} OR cm:creator:${username}` },
-          {
-            query: this.recentFileFilters.join(' AND ')
-          }
-        ],
-        fields: ['id', this.getRootField(sortingKey)],
-        include: ['path', 'properties', 'allowableOperations'],
-        sort: [
-          {
-            type: 'FIELD',
-            field: 'cm:modified',
-            ascending: false
-          }
-        ]
-      };
-      const nodes = await this.contentApi.search(query).toPromise();
-
-      const entries = nodes.list.entries.map((obj) => obj.entry);
-      this.sort(entries, sortingKey, sortingDirection);
-
-      return entries.map((obj) => obj.id);
-    }
-
-    return [];
-  }
-
-  private sort(items: any[], key: string, direction: string) {
-    const options: Intl.CollatorOptions = {};
-
-    if (key.includes('sizeInBytes') || key === 'name') {
-      options.numeric = true;
-    }
-
-    items.sort((a: any, b: any) => {
-      let left = ObjectUtils.getValue(a, key) ?? '';
-      left = left instanceof Date ? left.valueOf().toString() : left.toString();
-
-      let right = ObjectUtils.getValue(b, key) ?? '';
-      right = right instanceof Date ? right.valueOf().toString() : right.toString();
-
-      return direction === 'asc' ? left.localeCompare(right, undefined, options) : right.localeCompare(left, undefined, options);
-    });
-  }
-
-  /**
-   * Get the root field name from the property path.
-   * Example: 'property1.some.child.property' => 'property1'
-   *
-   * @param path Property path
-   */
-  getRootField(path: string) {
-    if (path) {
-      return path.split('.')[0];
-    }
-    return path;
-  }
-
   private getNavigationCommands(url: string): any[] {
     const urlTree: UrlTree = this.router.parseUrl(url);
     const urlSegmentGroup: UrlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];

projects/aca-content/viewer/src/lib/components/viewer/viewer.component.spec.ts

@@ -22,41 +22,235 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router, ActivatedRoute } from '@angular/router';
-import { AcaViewerComponent } from '@alfresco/aca-content/viewer';
+import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
-import { NodesApiService } from '@alfresco/adf-content-services';
+import { AuthenticationService } from '@alfresco/adf-core';
-import { RefreshPreviewAction } from '@alfresco/aca-shared/store';
+import { UploadService, NodesApiService, DiscoveryApiService } from '@alfresco/adf-content-services';
+import { ClosePreviewAction, RefreshPreviewAction, ReloadDocumentListAction, ViewNodeAction } from '@alfresco/aca-shared/store';
+import { AcaViewerComponent } from './viewer.component';
+import { of } from 'rxjs';
+import {
+  ContentApiService,
+  AppHookService,
+  DocumentBasePageService,
+  LibTestingModule,
+  discoveryApiServiceMockValue,
+  DocumentBasePageServiceMock
+} from '@alfresco/aca-shared';
+import { Store } from '@ngrx/store';
 import { Node } from '@alfresco/js-api';
-import { EMPTY } from 'rxjs';
+import { AcaViewerModule } from '../../viewer.module';
-import { CoreTestingModule } from '@alfresco/adf-core';
+
-import { Store, StoreModule } from '@ngrx/store';
+const apiError = `{
+"error": { 
+  "errorKey":"EntityNotFound",
+  "statusCode":404,
+  "briefSummary":"The entity with id: someId was not found",
+  "stackTrace":"not displayed",
+  "descriptionURL":"some url",
+  "logId":"some logId"
+  }
+}`;
+
+const fakeLocation = 'fakeLocation';
 
 describe('AcaViewerComponent', () => {
   let fixture: ComponentFixture<AcaViewerComponent>;
   let component: AcaViewerComponent;
+  let router: Router;
+  let route: ActivatedRoute;
+  let contentApi: ContentApiService;
+  let uploadService: UploadService;
   let nodesApiService: NodesApiService;
+  let appHookService: AppHookService;
   let store: Store<any>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [CoreTestingModule, StoreModule.forRoot({})]
+      imports: [LibTestingModule, AcaViewerModule],
+      providers: [
+        { provide: DocumentBasePageService, useValue: DocumentBasePageServiceMock },
+        { provide: DiscoveryApiService, useValue: discoveryApiServiceMockValue },
+        { provide: AuthenticationService, useValue: {} }
+      ]
     });
 
-    store = TestBed.inject(Store);
-    spyOn(store, 'select').and.returnValue(EMPTY);
     fixture = TestBed.createComponent(AcaViewerComponent);
     component = fixture.componentInstance;
+
+    router = TestBed.inject(Router);
+    route = TestBed.inject(ActivatedRoute);
+    contentApi = TestBed.inject(ContentApiService);
+    uploadService = TestBed.inject(UploadService);
     nodesApiService = TestBed.inject(NodesApiService);
+    appHookService = TestBed.inject(AppHookService);
+    store = TestBed.inject(Store);
   });
 
-  describe('Load content', () => {
+  it('should set folderId and call displayNode with nodeId upon init', () => {
-    it('should call node update after RefreshPreviewAction is triggered', () => {
+    route.params = of({
-      spyOn(nodesApiService.nodeUpdated, 'next');
+      folderId: 'folder1',
-      component.ngOnInit();
+      nodeId: 'node1'
-      const node = new Node();
+    });
+    spyOn(component, 'displayNode').and.stub();
 
-      store.dispatch(new RefreshPreviewAction(node));
+    component.ngOnInit();
-      expect(nodesApiService.nodeUpdated.next).toHaveBeenCalledWith(node);
+
+    expect(component.folderId).toBe('folder1');
+    expect(component.displayNode).toHaveBeenCalledWith('node1');
+  });
+
+  it('should navigate to next and previous nodes', () => {
+    spyOn(store, 'dispatch');
+    spyOn<any>(component, 'getFileLocation').and.returnValue(fakeLocation);
+    const clickEvent = new MouseEvent('click');
+
+    component.previousNodeId = 'previous';
+    component.onNavigateBefore(clickEvent);
+    expect(store.dispatch).toHaveBeenCalledWith(new ViewNodeAction('previous', { location: fakeLocation }));
+
+    component.nextNodeId = 'next';
+    component.onNavigateNext(clickEvent);
+    expect(store.dispatch).toHaveBeenCalledWith(new ViewNodeAction('next', { location: fakeLocation }));
+  });
+
+  describe('Navigate back to node location', () => {
+    beforeEach(async () => {
+      spyOn<any>(component, 'navigateToFileLocation').and.callThrough();
+      component['navigationPath'] = fakeLocation;
+      spyOn(router, 'navigateByUrl').and.stub();
+    });
+
+    it('should reload document list and navigate to node location upon close', async () => {
+      spyOn(store, 'dispatch');
+
+      component.onViewerVisibilityChanged();
+
+      expect(store.dispatch).toHaveBeenCalledWith(new ReloadDocumentListAction());
+      expect(component['navigateToFileLocation']).toHaveBeenCalled();
+      expect(router.navigateByUrl).toHaveBeenCalledWith(fakeLocation);
+    });
+
+    it('should navigate to node location if it is not a file', async () => {
+      spyOn(contentApi, 'getNodeInfo').and.returnValue(
+        of({
+          isFile: false
+        } as Node)
+      );
+
+      await component.displayNode('folder1');
+
+      expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+      expect(component['navigateToFileLocation']).toHaveBeenCalled();
+      expect(router.navigateByUrl).toHaveBeenCalledWith(fakeLocation);
     });
   });
+
+  it('should navigate to node location in case of Alfresco API errors', async () => {
+    component['previewLocation'] = 'personal-files';
+    spyOn(contentApi, 'getNodeInfo').and.throwError(apiError);
+    spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+
+    await component.displayNode('folder1');
+
+    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
+  });
+
+  it('should emit nodeUpdated event on fileUploadComplete event', fakeAsync(() => {
+    spyOn(nodesApiService.nodeUpdated, 'next');
+    fixture.detectChanges();
+    uploadService.fileUploadComplete.next({ data: { entry: {} } } as any);
+    tick(300);
+
+    expect(nodesApiService.nodeUpdated.next).toHaveBeenCalled();
+  }));
+
+  describe('return on event', () => {
+    beforeEach(async () => {
+      spyOn<any>(component, 'navigateToFileLocation');
+      fixture.detectChanges();
+      await fixture.whenStable();
+    });
+
+    it('should return to parent folder on fileUploadDeleted event', async () => {
+      uploadService.fileUploadDeleted.next();
+
+      expect(component['navigateToFileLocation']).toHaveBeenCalled();
+    });
+
+    it('should return to parent folder when event emitted from extension', async () => {
+      store.dispatch(new ClosePreviewAction());
+
+      expect(component['navigateToFileLocation']).toHaveBeenCalled();
+    });
+
+    it('should return to parent folder on nodesDeleted event', async () => {
+      appHookService.nodesDeleted.next();
+
+      expect(component['navigateToFileLocation']).toHaveBeenCalled();
+    });
+  });
+
+  it('should fetch navigation source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'personal-files'
+    };
+
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBe('personal-files');
+  });
+
+  it('should fetch only permitted navigation source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'personal-files'
+    };
+
+    component.navigationSources = ['shared'];
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBeNull();
+  });
+
+  it('should fetch case-insensitive source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'PERSONAL-FILES'
+    };
+
+    component.navigationSources = ['personal-files'];
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBe('PERSONAL-FILES');
+  });
+
+  it('should not navigate on keyboard event if target is child of sidebar container or cdk overlay', () => {
+    component.nextNodeId = 'node';
+    spyOn(router, 'navigate').and.stub();
+
+    const parent = document.createElement('div');
+    const child = document.createElement('button');
+    child.addEventListener('keyup', function (e) {
+      component.onNavigateNext(e);
+    });
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    parent.className = 'adf-viewer__sidebar';
+    child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+    expect(router.navigate).not.toHaveBeenCalled();
+
+    parent.className = 'cdk-overlay-container';
+    child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+
+  it('should call node update after RefreshPreviewAction is triggered', () => {
+    spyOn(nodesApiService.nodeUpdated, 'next');
+    component.ngOnInit();
+    const node = new Node();
+
+    store.dispatch(new RefreshPreviewAction(node));
+    expect(nodesApiService.nodeUpdated.next).toHaveBeenCalledWith(node);
+  });
 });

projects/aca-content/viewer/src/lib/components/viewer/viewer.component.ts

@@ -43,16 +43,17 @@ import {
   ViewNodeAction
 } from '@alfresco/aca-shared/store';
 import { ContentActionRef, SelectionState } from '@alfresco/adf-extensions';
-import { Node, SearchRequest, VersionEntry, VersionsApi } from '@alfresco/js-api';
+import { Node, VersionEntry, VersionsApi } from '@alfresco/js-api';
 import { Component, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, PRIMARY_OUTLET, Router } from '@angular/router';
-import { AlfrescoApiService, AppConfigModule, ObjectUtils, UserPreferencesService, ViewerModule } from '@alfresco/adf-core';
+import { AlfrescoApiService, AppConfigModule, ViewerModule } from '@alfresco/adf-core';
 import { Store } from '@ngrx/store';
 import { from, Observable, Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { Actions, ofType } from '@ngrx/effects';
 import { AlfrescoViewerModule, NodesApiService, UploadService } from '@alfresco/adf-content-services';
 import { CommonModule } from '@angular/common';
+import { ViewerService } from '../../services/viewer.service';
 
 @Component({
   standalone: true,
@@ -74,62 +75,36 @@ export class AcaViewerComponent implements OnInit, OnDestroy {
 
   fileName: string;
   folderId: string = null;
-  nodeId: string = null;
-  versionId: string = null;
-  node: Node;
-  selection: SelectionState;
   infoDrawerOpened$: Observable<boolean>;
-
-  showRightSide = false;
-  openWith: ContentActionRef[] = [];
-  toolbarActions: ContentActionRef[] = [];
-
-  navigateSource: string = null;
-  previousNodeId: string;
-  nextNodeId: string;
   navigateMultiple = true;
-  routesSkipNavigation = ['shared', 'recent-files', 'favorites'];
+  navigateSource: string = null;
   navigationSources = ['favorites', 'libraries', 'personal-files', 'recent-files', 'shared'];
-  recentFileFilters = [
+  nextNodeId: string;
-    'TYPE:"content"',
+  node: Node;
-    '-PATH:"//cm:wiki/*"',
+  nodeId: string = null;
-    '-TYPE:"app:filelink"',
+  openWith: ContentActionRef[] = [];
-    '-TYPE:"fm:post"',
+  previousNodeId: string;
-    '-TYPE:"cm:thumbnail"',
+  selection: SelectionState;
-    '-TYPE:"cm:failedThumbnail"',
+  showRightSide = false;
-    '-TYPE:"cm:rating"',
+  toolbarActions: ContentActionRef[] = [];
-    '-TYPE:"dl:dataList"',
+  versionId: string = null;
-    '-TYPE:"dl:todoList"',
-    '-TYPE:"dl:issue"',
-    '-TYPE:"dl:contact"',
-    '-TYPE:"dl:eventAgenda"',
-    '-TYPE:"dl:event"',
-    '-TYPE:"dl:task"',
-    '-TYPE:"dl:simpletask"',
-    '-TYPE:"dl:meetingAgenda"',
-    '-TYPE:"dl:location"',
-    '-TYPE:"fm:topic"',
-    '-TYPE:"fm:post"',
-    '-TYPE:"ia:calendarEvent"',
-    '-TYPE:"lnk:link"'
-  ];
 
   private navigationPath: string;
   private previewLocation: string;
   private containersSkipNavigation = ['adf-viewer__sidebar', 'cdk-overlay-container', 'adf-image-viewer'];
 
   constructor(
-    private router: Router,
-    private route: ActivatedRoute,
-    private store: Store<AppStore>,
-    private extensions: AppExtensionService,
-    private contentApi: ContentApiService,
     private actions$: Actions,
-    private preferences: UserPreferencesService,
     private apiService: AlfrescoApiService,
+    private appHookService: AppHookService,
+    private contentApi: ContentApiService,
+    private extensions: AppExtensionService,
     private nodesApiService: NodesApiService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private store: Store<AppStore>,
     private uploadService: UploadService,
-    private appHookService: AppHookService
+    private viewerService: ViewerService
   ) {}
 
   ngOnInit() {
@@ -167,7 +142,7 @@ export class AcaViewerComponent implements OnInit, OnDestroy {
       const { nodeId } = params;
       this.versionId = params.versionId;
       if (this.versionId) {
-        this.versionsApi.getVersion(nodeId, this.versionId).then((version: VersionEntry) => {
+        void this.versionsApi.getVersion(nodeId, this.versionId).then((version: VersionEntry) => {
           if (version) {
             this.store.dispatch(new SetCurrentNodeVersionAction(version));
           }
@@ -234,26 +209,24 @@ export class AcaViewerComponent implements OnInit, OnDestroy {
         this.node = await this.contentApi.getNodeInfo(nodeId).toPromise();
         this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
         this.navigateMultiple = this.extensions.canShowViewerNavigation({ entry: this.node });
-        if (!this.navigateMultiple) {
-          this.nodeId = this.node.id;
-          this.fileName = this.node.name + this.node?.properties?.['cm:versionLabel'];
-          return;
-        }
 
         if (this.node?.isFile) {
-          const nearest = await this.getNearestNodes(this.node.id, this.node.parentId);
           this.nodeId = this.node.id;
-          this.previousNodeId = nearest.left;
-          this.nextNodeId = nearest.right;
           this.fileName = this.node.name + this.node?.properties?.['cm:versionLabel'];
+          if (this.navigateMultiple) {
+            const nearest = await this.viewerService.getNearestNodes(this.node.id, this.node.parentId, this.navigateSource);
+            this.previousNodeId = nearest.left;
+            this.nextNodeId = nearest.right;
+          }
           return;
         }
+        this.navigateToFileLocation();
       } catch (error) {
         const statusCode = JSON.parse(error.message).error.statusCode;
 
         if (statusCode !== 401) {
-          this.router.navigate([this.previewLocation, { outlets: { viewer: null } }]).then(() => {
+          await this.router.navigate([this.previewLocation, { outlets: { viewer: null } }]).then(() => {
-            this.router.navigate([this.previewLocation, nodeId]);
+            void this.router.navigate([this.previewLocation, nodeId]);
           });
         }
       }
@@ -278,147 +251,6 @@ export class AcaViewerComponent implements OnInit, OnDestroy {
     this.store.dispatch(new ViewNodeAction(this.nextNodeId, { location }));
   }
 
-  /**
-   * Retrieves nearest node information for the given node and folder.
-   *
-   * @param nodeId Unique identifier of the document node
-   * @param folderId Unique identifier of the containing folder node.
-   */
-  async getNearestNodes(nodeId: string, folderId: string): Promise<{ left: string; right: string }> {
-    const empty = {
-      left: null,
-      right: null
-    };
-
-    if (nodeId && folderId) {
-      try {
-        const ids = await this.getFileIds(this.navigateSource, folderId);
-        const idx = ids.indexOf(nodeId);
-
-        if (idx >= 0) {
-          return {
-            left: ids[idx - 1] || null,
-            right: ids[idx + 1] || null
-          };
-        } else {
-          return empty;
-        }
-      } catch {
-        return empty;
-      }
-    } else {
-      return empty;
-    }
-  }
-
-  /**
-   * Retrieves a list of node identifiers for the folder and data source.
-   *
-   * @param source Data source name. Allowed values are: personal-files, libraries, favorites, shared, recent-files.
-   * @param folderId Containing folder node identifier for 'personal-files' and 'libraries' sources.
-   */
-  async getFileIds(source: string, folderId?: string): Promise<string[]> {
-    if ((source === 'personal-files' || source === 'libraries') && folderId) {
-      const sortKey = this.preferences.get('personal-files.sorting.key') || 'modifiedAt';
-      const sortDirection = this.preferences.get('personal-files.sorting.direction') || 'desc';
-      const nodes = await this.contentApi
-        .getNodeChildren(folderId, {
-          // orderBy: `${sortKey} ${sortDirection}`,
-          fields: ['id', this.getRootField(sortKey)],
-          where: '(isFile=true)'
-        })
-        .toPromise();
-
-      const entries = nodes.list.entries.map((obj) => obj.entry);
-      this.sort(entries, sortKey, sortDirection);
-
-      return entries.map((obj) => obj.id);
-    }
-
-    if (source === 'favorites') {
-      const nodes = await this.contentApi
-        .getFavorites('-me-', {
-          where: '(EXISTS(target/file))',
-          fields: ['target']
-        })
-        .toPromise();
-
-      const sortKey = this.preferences.get('favorites.sorting.key') || 'modifiedAt';
-      const sortDirection = this.preferences.get('favorites.sorting.direction') || 'desc';
-      const files = nodes.list.entries.map((obj) => obj.entry.target.file);
-      this.sort(files, sortKey, sortDirection);
-
-      return files.map((f) => f.id);
-    }
-
-    if (source === 'shared') {
-      const sortingKey = this.preferences.get('shared.sorting.key') || 'modifiedAt';
-      const sortingDirection = this.preferences.get('shared.sorting.direction') || 'desc';
-
-      const nodes = await this.contentApi
-        .findSharedLinks({
-          fields: ['nodeId', this.getRootField(sortingKey)]
-        })
-        .toPromise();
-
-      const entries = nodes.list.entries.map((obj) => obj.entry);
-      this.sort(entries, sortingKey, sortingDirection);
-
-      return entries.map((obj) => obj.nodeId);
-    }
-
-    if (source === 'recent-files') {
-      const person = await this.contentApi.getPerson('-me-').toPromise();
-      const username = person.entry.id;
-      const sortingKey = this.preferences.get('recent-files.sorting.key') || 'modifiedAt';
-      const sortingDirection = this.preferences.get('recent-files.sorting.direction') || 'desc';
-
-      const query: SearchRequest = {
-        query: {
-          query: '*',
-          language: 'afts'
-        },
-        filterQueries: [
-          { query: `cm:modified:[NOW/DAY-30DAYS TO NOW/DAY+1DAY]` },
-          { query: `cm:modifier:${username} OR cm:creator:${username}` },
-          {
-            query: this.recentFileFilters.join(' AND ')
-          }
-        ],
-        fields: ['id', this.getRootField(sortingKey)],
-        include: ['path', 'properties', 'allowableOperations'],
-        sort: [
-          {
-            type: 'FIELD',
-            field: 'cm:modified',
-            ascending: false
-          }
-        ]
-      };
-      const nodes = await this.contentApi.search(query).toPromise();
-
-      const entries = nodes.list.entries.map((obj) => obj.entry);
-      this.sort(entries, sortingKey, sortingDirection);
-
-      return entries.map((obj) => obj.id);
-    }
-
-    return [];
-  }
-
-  /**
-   * Get the root field name from the property path.
-   * Example: 'property1.some.child.property' => 'property1'
-   *
-   * @param path Property path
-   */
-  getRootField(path: string) {
-    if (path) {
-      return path.split('.')[0];
-    }
-    return path;
-  }
-
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
     const key = event.key;
@@ -429,27 +261,9 @@ export class AcaViewerComponent implements OnInit, OnDestroy {
     }
   }
 
-  private sort(items: any[], key: string, direction: string) {
-    const options: Intl.CollatorOptions = {};
-
-    if (key.includes('sizeInBytes') || key === 'name') {
-      options.numeric = true;
-    }
-
-    items.sort((a: any, b: any) => {
-      let left = ObjectUtils.getValue(a, key) ?? '';
-      left = left instanceof Date ? left.valueOf().toString() : left.toString();
-
-      let right = ObjectUtils.getValue(b, key) ?? '';
-      right = right instanceof Date ? right.valueOf().toString() : right.toString();
-
-      return direction === 'asc' ? left.localeCompare(right, undefined, options) : right.localeCompare(left, undefined, options);
-    });
-  }
-
   private navigateToFileLocation() {
     const location = this.getFileLocation();
-    this.router.navigateByUrl(location);
+    void this.router.navigateByUrl(location);
   }
 
   private getFileLocation(): string {

projects/aca-content/viewer/src/lib/services/viewer.service.spec.ts

@@ -0,0 +1,218 @@
+/*!
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail. Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { TranslationMock, TranslationService, UserPreferencesService } from '@alfresco/adf-core';
+import { ContentApiService } from '@alfresco/aca-shared';
+import { FavoritePaging, NodePaging, SharedLinkPaging } from '@alfresco/js-api';
+import { ViewerService } from './viewer.service';
+import { of } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+import { HttpClientModule } from '@angular/common/http';
+
+const list = {
+  list: {
+    entries: [
+      { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } },
+      { entry: { id: 'node3', name: 'node 3', modifiedAt: new Date(2) } },
+      { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(1) } }
+    ]
+  }
+};
+
+const favoritesList = {
+  list: {
+    entries: [
+      { entry: { target: { file: { id: 'node1', name: 'node 1' } } } },
+      { entry: { target: { file: { id: 'node2', name: 'node 2' } } } },
+      { entry: { target: { file: { id: 'node3', name: 'node 3' } } } }
+    ]
+  }
+};
+
+const emptyAdjacent = {
+  left: null,
+  right: null
+};
+
+const preferencesNoPrevSortValues = ['client', '', ''];
+const preferencesCurSortValues = [...preferencesNoPrevSortValues, 'name', 'desc'];
+const preferencesNoCurSortValues = [...preferencesNoPrevSortValues, '', ''];
+const resultDesc = ['node3', 'node2', 'node1'];
+const resultAsc = ['node1', 'node2', 'node3'];
+
+describe('ViewerService', () => {
+  let preferences: UserPreferencesService;
+  let contentApi: ContentApiService;
+  let viewerService: ViewerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), HttpClientModule],
+      providers: [{ provide: TranslationService, useClass: TranslationMock }, ViewerService, UserPreferencesService, ContentApiService]
+    });
+
+    preferences = TestBed.inject(UserPreferencesService);
+    contentApi = TestBed.inject(ContentApiService);
+    viewerService = TestBed.inject(ViewerService);
+  });
+
+  describe('Sorting for different sources', () => {
+    beforeEach(() => {
+      spyOn(preferences, 'get').and.returnValues(...preferencesCurSortValues, ...preferencesCurSortValues);
+    });
+
+    it('should fetch and sort file ids for personal files and libraries', async () => {
+      spyOn(contentApi, 'getNodeChildren').and.returnValue(of(list as unknown as NodePaging));
+
+      const idsPersonal = await viewerService.getFileIds('personal-files', 'folder1');
+      const idsLibraries = await viewerService.getFileIds('libraries', 'folder1');
+
+      expect(idsPersonal).toEqual(resultDesc);
+      expect(idsLibraries).toEqual(resultDesc);
+    });
+
+    it('should fetch and sort file ids for favorites', async () => {
+      spyOn(contentApi, 'getFavorites').and.returnValue(of(favoritesList as FavoritePaging));
+      const idsFavorites = await viewerService.getFileIds('favorites');
+      expect(idsFavorites).toEqual(resultDesc);
+    });
+
+    it('should fetch and sort file ids for shared', async () => {
+      spyOn(contentApi, 'findSharedLinks').and.returnValue(
+        of({
+          list: {
+            entries: [
+              {
+                entry: {
+                  nodeId: 'node1',
+                  name: 'node 1'
+                }
+              },
+              {
+                entry: {
+                  nodeId: 'node2',
+                  name: 'node 2'
+                }
+              },
+              {
+                entry: {
+                  nodeId: 'node3',
+                  name: 'node 3'
+                }
+              }
+            ]
+          }
+        } as SharedLinkPaging)
+      );
+      const idsShared = await viewerService.getFileIds('shared');
+      expect(idsShared).toEqual(resultDesc);
+    });
+  });
+
+  it('should use default with no sorting for personal-files and other sources', async () => {
+    spyOn(preferences, 'get').and.returnValues(...preferencesNoCurSortValues);
+
+    spyOn(contentApi, 'getNodeChildren').and.returnValue(of(list as unknown as NodePaging));
+    const idsFiles = await viewerService.getFileIds('personal-files', 'folder1');
+
+    spyOn(contentApi, 'getFavorites').and.returnValue(of(favoritesList as FavoritePaging));
+    const idsOther = await viewerService.getFileIds('favorites');
+
+    expect(idsFiles).toEqual(resultAsc);
+    expect(idsOther).toEqual(resultAsc);
+  });
+
+  describe('Other sorting scenarios', () => {
+    beforeEach(() => {
+      spyOn(contentApi, 'getNodeChildren').and.returnValue(of(list as unknown as NodePaging));
+    });
+
+    it('should not sort when server-side sorting is set', async () => {
+      spyOn(preferences, 'get').and.returnValues('server', '', '', 'name', 'desc');
+      const ids = await viewerService.getFileIds('personal-files', 'folder1');
+      expect(ids).toEqual(['node1', 'node3', 'node2']);
+    });
+
+    it('should sort with previous and current sorting', async () => {
+      spyOn(preferences, 'get').and.returnValues('client', 'name', 'asc', 'modifiedAt', 'desc');
+      const ids = await viewerService.getFileIds('personal-files', 'folder1');
+      expect(ids).toEqual(['node3', 'node1', 'node2']);
+    });
+  });
+
+  it('should extract the property path root', () => {
+    expect(viewerService.getRootField('some.property.path')).toBe('some');
+    expect(viewerService.getRootField('some')).toBe('some');
+    expect(viewerService.getRootField('')).toBe('');
+    expect(viewerService.getRootField(null)).toBe(null);
+  });
+
+  it('should return empty adjacent nodes for missing node id or wrong source', async () => {
+    const noNodeId = await viewerService.getNearestNodes(null, 'folder1', 'source');
+    const wrongSource = await viewerService.getNearestNodes('id', 'folder1', 'source');
+
+    expect(noNodeId).toEqual(emptyAdjacent);
+    expect(wrongSource).toEqual(emptyAdjacent);
+  });
+
+  it('should return empty nearest nodes for missing folder id', async () => {
+    const nearest = await viewerService.getNearestNodes('node1', null, 'source');
+
+    expect(nearest).toEqual({ left: null, right: null });
+  });
+
+  it('should return empty nearest nodes for crashed fields id request', async () => {
+    spyOn(viewerService, 'getFileIds').and.returnValue(Promise.reject(new Error('err')));
+
+    const nearest = await viewerService.getNearestNodes('node1', 'folder1', 'source');
+
+    expect(nearest).toEqual({ left: null, right: null });
+  });
+
+  it('should return nearest nodes', async () => {
+    spyOn(viewerService, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
+
+    let nearest = await viewerService.getNearestNodes('node1', 'folder1', 'source');
+    expect(nearest).toEqual({ left: null, right: 'node2' });
+
+    nearest = await viewerService.getNearestNodes('node3', 'folder1', 'source');
+    expect(nearest).toEqual({ left: 'node2', right: 'node4' });
+
+    nearest = await viewerService.getNearestNodes('node5', 'folder1', 'source');
+    expect(nearest).toEqual({ left: 'node4', right: null });
+  });
+
+  it('should return empty nearest nodes if node is already deleted', async () => {
+    spyOn(viewerService, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
+
+    const nearest = await viewerService.getNearestNodes('node9', 'folder1', 'source');
+    expect(nearest).toEqual({ left: null, right: null });
+  });
+
+  it('should require folder id to fetch ids for personal-files and libraries', async () => {
+    const ids = await viewerService.getFileIds('libraries', null);
+    expect(ids).toEqual([]);
+  });
+});

projects/aca-content/viewer/src/lib/services/viewer.service.ts

@@ -0,0 +1,227 @@
+/*!
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail. Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ObjectUtils, UserPreferencesService } from '@alfresco/adf-core';
+import { FavoritePaging, Node, NodePaging, SearchRequest, ResultSetPaging, SharedLink, SharedLinkPaging } from '@alfresco/js-api';
+import { Injectable } from '@angular/core';
+import { ContentApiService } from '@alfresco/aca-shared';
+
+interface AdjacentFiles {
+  left: string;
+  right: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ViewerService {
+  constructor(private preferences: UserPreferencesService, private contentApi: ContentApiService) {}
+
+  recentFileFilters = [
+    'TYPE:"content"',
+    '-PATH:"//cm:wiki/*"',
+    '-TYPE:"app:filelink"',
+    '-TYPE:"fm:post"',
+    '-TYPE:"cm:thumbnail"',
+    '-TYPE:"cm:failedThumbnail"',
+    '-TYPE:"cm:rating"',
+    '-TYPE:"dl:dataList"',
+    '-TYPE:"dl:todoList"',
+    '-TYPE:"dl:issue"',
+    '-TYPE:"dl:contact"',
+    '-TYPE:"dl:eventAgenda"',
+    '-TYPE:"dl:event"',
+    '-TYPE:"dl:task"',
+    '-TYPE:"dl:simpletask"',
+    '-TYPE:"dl:meetingAgenda"',
+    '-TYPE:"dl:location"',
+    '-TYPE:"fm:topic"',
+    '-TYPE:"fm:post"',
+    '-TYPE:"ia:calendarEvent"',
+    '-TYPE:"lnk:link"'
+  ];
+
+  /**
+   * Retrieves nearest node information for the given node and folder.
+   *
+   * @param nodeId Unique identifier of the document node
+   * @param folderId Unique identifier of the containing folder node.
+   * @param source Data source name. Returns file ids for personal-files, libraries, favorites, shared and recent-files, otherwise returns empty.
+   */
+  async getNearestNodes(nodeId: string, folderId: string, source: string): Promise<AdjacentFiles> {
+    const empty: AdjacentFiles = {
+      left: null,
+      right: null
+    };
+
+    if (nodeId && folderId) {
+      try {
+        const ids = await this.getFileIds(source, folderId);
+        const idx = ids.indexOf(nodeId);
+
+        if (idx >= 0) {
+          return {
+            left: ids[idx - 1] || null,
+            right: ids[idx + 1] || null
+          };
+        }
+      } catch {}
+    }
+    return empty;
+  }
+
+  /**
+   * Retrieves a list of node identifiers for the folder and data source.
+   *
+   * @param source Data source name. Returns file ids for personal-files, libraries, favorites, shared and recent-files, otherwise returns empty.
+   * @param folderId Optional parameter containing folder node identifier for 'personal-files' and 'libraries' sources.
+   */
+  async getFileIds(source: string, folderId?: string): Promise<string[]> {
+    if (source === 'libraries') {
+      source = 'libraries-files';
+    }
+    const isClient = this.preferences.get(`${source}.sorting.mode`) === 'client';
+    const [sortKey, sortDirection, previousSortKey, previousSortDir] = this.getSortKeyDir(source);
+    let entries: Node[] | SharedLink[] = [];
+    let nodes: NodePaging | FavoritePaging | SharedLinkPaging | ResultSetPaging;
+
+    if (source === 'personal-files' || source === 'libraries-files') {
+      if (!folderId) {
+        return [];
+      }
+      const orderBy = isClient ? null : ['isFolder desc', `${sortKey} ${sortDirection}`];
+      nodes = await this.contentApi
+        .getNodeChildren(folderId, {
+          orderBy: orderBy,
+          fields: this.getFields(sortKey, previousSortKey),
+          where: '(isFile=true)'
+        })
+        .toPromise();
+    }
+
+    if (source === 'favorites') {
+      nodes = await this.contentApi
+        .getFavorites('-me-', {
+          where: '(EXISTS(target/file))',
+          fields: ['target']
+        })
+        .toPromise();
+    }
+
+    if (source === 'shared') {
+      nodes = await this.contentApi
+        .findSharedLinks({
+          fields: ['nodeId', this.getRootField(sortKey)]
+        })
+        .toPromise();
+    }
+
+    if (source === 'recent-files') {
+      const person = await this.contentApi.getPerson('-me-').toPromise();
+      const username = person.entry.id;
+      const query: SearchRequest = {
+        query: {
+          query: '*',
+          language: 'afts'
+        },
+        filterQueries: [
+          { query: `cm:modified:[NOW/DAY-30DAYS TO NOW/DAY+1DAY]` },
+          { query: `cm:modifier:${username} OR cm:creator:${username}` },
+          {
+            query: this.recentFileFilters.join(' AND ')
+          }
+        ],
+        fields: this.getFields(sortKey, previousSortKey),
+        include: ['path', 'properties', 'allowableOperations'],
+        sort: [
+          {
+            type: 'FIELD',
+            field: 'cm:modified',
+            ascending: false
+          }
+        ]
+      };
+      nodes = await this.contentApi.search(query).toPromise();
+    }
+
+    entries = nodes.list.entries.map((obj) => obj.entry.target?.file ?? obj.entry);
+    if (isClient) {
+      if (previousSortKey) {
+        this.sort(entries, previousSortKey, previousSortDir);
+      }
+      this.sort(entries, sortKey, sortDirection);
+    }
+    return entries.map((entry) => entry.id ?? entry.nodeId);
+  }
+
+  /**
+   * Get the root field name from the property path.
+   * Example: 'property1.some.child.property' => 'property1'
+   *
+   * @param path Property path
+   */
+  getRootField(path: string): string {
+    if (path) {
+      return path.split('.')[0];
+    }
+    return path;
+  }
+
+  private sort(items: Node[] | SharedLink[], key: string, direction: string) {
+    const options: Intl.CollatorOptions = {};
+    if (key.includes('sizeInBytes') || key === 'name') {
+      options.numeric = true;
+    }
+
+    items.sort((a: Node | SharedLink, b: Node | SharedLink) => {
+      let left = ObjectUtils.getValue(a, key) ?? '';
+      left = left instanceof Date ? left.valueOf().toString() : left.toString();
+
+      let right = ObjectUtils.getValue(b, key) ?? '';
+      right = right instanceof Date ? right.valueOf().toString() : right.toString();
+
+      return direction === 'asc' ? left.localeCompare(right, undefined, options) : right.localeCompare(left, undefined, options);
+    });
+  }
+
+  private getFields(sortKey: string, previousSortKey?: string): string[] {
+    return ['id', this.getRootField(sortKey), this.getRootField(previousSortKey)];
+  }
+
+  private getSortKeyDir(source: string): string[] {
+    const previousSortKey = this.preferences.get(`${source}.sorting.previousKey`);
+    const previousSortDir = this.preferences.get(`${source}.sorting.previousDirection`);
+    const sortKey = this.preferences.get(`${source}.sorting.key`) || this.getDefaults(source)[0];
+    const sortDirection = this.preferences.get(`${source}.sorting.direction`) || this.getDefaults(source)[1];
+    return [sortKey, sortDirection, previousSortKey, previousSortDir];
+  }
+
+  private getDefaults(source: string): string[] {
+    if (source === 'personal-files' || source === 'libraries-files') {
+      return ['name', 'asc'];
+    } else {
+      return ['modifiedAt', 'desc'];
+    }
+  }
+}

projects/aca-content/viewer/src/lib/viewer.module.ts

@@ -24,6 +24,7 @@
 
 import { NgModule } from '@angular/core';
 import { AcaViewerComponent } from './components/viewer/viewer.component';
+import { PreviewComponent } from './components/preview/preview.component';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
@@ -38,7 +39,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes), AcaViewerComponent],
+  imports: [RouterModule.forChild(routes), AcaViewerComponent, PreviewComponent],
-  exports: [AcaViewerComponent]
+  exports: [AcaViewerComponent, PreviewComponent]
 })
 export class AcaViewerModule {}

projects/aca-content/viewer/src/public-api.ts

@@ -27,4 +27,5 @@
  */
 
 export * from './lib/components/viewer/viewer.component';
+export * from './lib/components/preview/preview.component';
 export * from './lib/viewer.module';

projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts

@@ -25,7 +25,7 @@
 import { DocumentListComponent, ShareDataRow, UploadService } from '@alfresco/adf-content-services';
 import { ShowHeaderMode } from '@alfresco/adf-core';
 import { ContentActionRef, DocumentListPresetRef, SelectionState } from '@alfresco/adf-extensions';
-import { OnDestroy, OnInit, OnChanges, ViewChild, SimpleChanges, Directive, inject } from '@angular/core';
+import { OnDestroy, OnInit, OnChanges, ViewChild, SimpleChanges, Directive, inject, HostListener } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { NodeEntry, Node, NodePaging } from '@alfresco/js-api';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -207,6 +207,7 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
     return location.href.includes('viewer:view');
   }
 
+  @HostListener('sorting-changed', ['$event'])
   onSortingChanged(event: any) {
     this.filterSorting = event.detail.key + '-' + event.detail.direction;
   }

projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts

@@ -25,64 +25,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PageComponent } from './document-base-page.component';
 import { AppState, ReloadDocumentListAction, SetSelectedNodesAction, ViewNodeAction } from '@alfresco/aca-shared/store';
-import { AppExtensionService } from '@alfresco/aca-shared';
+import { AppExtensionService, LibTestingModule, discoveryApiServiceMockValue, DocumentBasePageServiceMock } from '@alfresco/aca-shared';
-import { NodeEntry, NodePaging, RepositoryInfo, VersionInfo } from '@alfresco/js-api';
+import { NodeEntry, NodePaging } from '@alfresco/js-api';
 import { DocumentBasePageService } from './document-base-page.service';
-import { Store, StoreModule } from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import { Component, Injectable } from '@angular/core';
+import { Component } from '@angular/core';
 import { DiscoveryApiService, DocumentListComponent } from '@alfresco/adf-content-services';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { AuthModule, MaterialModule, PipeModule } from '@alfresco/adf-core';
+import { AuthModule, MaterialModule } from '@alfresco/adf-core';
 import { HttpClientModule } from '@angular/common/http';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { EffectsModule } from '@ngrx/effects';
+import { Subscription } from 'rxjs';
-import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
-
-export const INITIAL_APP_STATE: AppState = {
-  appName: 'Alfresco Content Application',
-  logoPath: 'assets/images/alfresco-logo-white.svg',
-  customCssPath: '',
-  webFontPath: '',
-  sharedUrl: '',
-  user: {
-    isAdmin: null,
-    id: null,
-    firstName: '',
-    lastName: ''
-  },
-  selection: {
-    nodes: [],
-    libraries: [],
-    isEmpty: true,
-    count: 0
-  },
-  navigation: {
-    currentFolder: null
-  },
-  currentNodeVersion: null,
-  infoDrawerOpened: false,
-  infoDrawerPreview: false,
-  infoDrawerMetadataAspect: '',
-  showFacetFilter: true,
-  fileUploadingDialog: true,
-  showLoader: false,
-  repository: {
-    status: {
-      isQuickShareEnabled: true
-    }
-  } as any
-};
-
-@Injectable()
-class DocumentBasePageServiceMock extends DocumentBasePageService {
-  canUpdateNode(): boolean {
-    return true;
-  }
-  canUploadContent(): boolean {
-    return true;
-  }
-}
 
 @Component({
   selector: 'aca-test',
@@ -107,47 +61,11 @@ describe('PageComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
+      imports: [LibTestingModule, MaterialModule, AuthModule.forRoot()],
-        NoopAnimationsModule,
-        HttpClientModule,
-        RouterTestingModule,
-        MaterialModule,
-        AuthModule.forRoot(),
-        StoreModule.forRoot(
-          { app: (state) => state },
-          {
-            initialState: {
-              app: INITIAL_APP_STATE
-            },
-            runtimeChecks: {
-              strictStateImmutability: false,
-              strictActionImmutability: false
-            }
-          }
-        ),
-        EffectsModule.forRoot([]),
-        PipeModule
-      ],
       declarations: [TestComponent],
       providers: [
-        {
+        { provide: DocumentBasePageService, useClass: DocumentBasePageServiceMock },
-          provide: DocumentBasePageService,
+        { provide: DiscoveryApiService, useValue: discoveryApiServiceMockValue },
-          useClass: DocumentBasePageServiceMock
-        },
-        {
-          provide: DiscoveryApiService,
-          useValue: {
-            ecmProductInfo$: new BehaviorSubject<RepositoryInfo | null>(null),
-            getEcmProductInfo: (): Observable<RepositoryInfo> =>
-              of(
-                new RepositoryInfo({
-                  version: {
-                    major: '10.0.0'
-                  } as VersionInfo
-                })
-              )
-          }
-        },
         AppExtensionService
       ]
     });
@@ -298,20 +216,7 @@ describe('Info Drawer state', () => {
       providers: [
         { provide: DocumentBasePageService, useClass: DocumentBasePageServiceMock },
         AppExtensionService,
-        {
+        { provide: DiscoveryApiService, useValue: discoveryApiServiceMockValue },
-          provide: DiscoveryApiService,
-          useValue: {
-            ecmProductInfo$: new BehaviorSubject<RepositoryInfo | null>(null),
-            getEcmProductInfo: (): Observable<RepositoryInfo> =>
-              of(
-                new RepositoryInfo({
-                  version: {
-                    major: '10.0.0'
-                  } as VersionInfo
-                })
-              )
-          }
-        },
         provideMockStore({
           initialState: { app: appState }
         })
@@ -337,7 +242,7 @@ describe('Info Drawer state', () => {
     window.history.pushState({}, null, `${locationHref}#test`);
     fixture.detectChanges();
 
-    fixture.whenStable().then(() => {
+    void fixture.whenStable().then(() => {
       component.infoDrawerOpened$.subscribe((state) => {
         expect(state).toBe(true);
         done();
@@ -356,7 +261,7 @@ describe('Info Drawer state', () => {
     window.history.pushState({}, null, `${locationHref}#test(viewer:view)`);
     fixture.detectChanges();
 
-    fixture.whenStable().then(() => {
+    void fixture.whenStable().then(() => {
       component.infoDrawerOpened$.subscribe((state) => {
         expect(state).toBe(true);
         done();

projects/aca-shared/src/lib/testing/lib-testing-module.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { NgModule } from '@angular/core';
+import { Injectable, NgModule } from '@angular/core';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -40,6 +40,9 @@ import { StoreModule } from '@ngrx/store';
 import { CommonModule } from '@angular/common';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { RepositoryInfo, VersionInfo } from '@alfresco/js-api';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { DocumentBasePageService } from '../../public-api';
 
 export const initialState = {
   app: {
@@ -72,6 +75,28 @@ export const initialState = {
   }
 };
 
+export const discoveryApiServiceMockValue = {
+  ecmProductInfo$: new BehaviorSubject<RepositoryInfo | null>(null),
+  getEcmProductInfo: (): Observable<RepositoryInfo> =>
+    of(
+      new RepositoryInfo({
+        version: {
+          major: '10.0.0'
+        } as VersionInfo
+      })
+    )
+};
+
+@Injectable()
+export class DocumentBasePageServiceMock extends DocumentBasePageService {
+  canUpdateNode(): boolean {
+    return true;
+  }
+  canUploadContent(): boolean {
+    return true;
+  }
+}
+
 @NgModule({
   imports: [
     NoopAnimationsModule,