[PER-10314] Make folder click show containing files

src/app/file-browser/components/file-list-item/file-list-item.component.html

@@ -49,7 +49,11 @@
 		@if (!item.isFolder && !isZip) {
 			<div
 				prBgImage
-				[bgSrc]="!inGridView ? item.thumbURL200 : item.thumbURL500"
+				[bgSrc]="
+					!inGridView
+						? item.thumbURL200 || item.thumbUrl200
+						: item.thumbURL500 || item.thumbUrl500
+				"
 				[cover]="inGridView"
 			></div>
 		}
@@ -82,7 +86,7 @@
 			>
 				{{ item.displayName }}
 			</p>
-			@if (!showAccess && item.ShareVOs?.length) {
+			@if (!showAccess && item.ShareVOs?.length && !isUnlistedShare) {
 				<i
 					class="ion-md-people"
 					@ngIfFadeInAnimation

src/app/file-browser/components/file-list-item/file-list-item.component.spec.ts

@@ -165,10 +165,6 @@ describe('FileListItemComponent', () => {
 
 		expect(TestBed.inject(DataService).registerItem).toHaveBeenCalled();
 		component.ngOnDestroy();
-
-		expect(TestBed.inject(DataService).unregisterItem).toHaveBeenCalledWith(
-			component.item,
-		);
 	});
 
 	it('should handle drag events', () => {

src/app/file-browser/components/file-list-item/file-list-item.component.ts

@@ -339,7 +339,6 @@ export class FileListItemComponent
 	}
 
 	ngOnDestroy() {
-		this.dataService.unregisterItem(this.item);
 		unsubscribeAll(this.subscriptions);
 	}
 
@@ -494,10 +493,6 @@ export class FileListItemComponent
 
 	onItemClick(event: MouseEvent) {
 		if (this.isUnlistedShare) {
-			//TO DO: make preview for folder --> story PER-10314
-			if (this.item.isFolder) {
-				return;
-			}
 			this.goToItem();
 			return;
 		}
@@ -561,6 +556,13 @@ export class FileListItemComponent
 		}
 
 		if (this.item.isFolder) {
+			if (this.isUnlistedShare) {
+				this.itemClicked.emit({
+					item: this.item,
+					selectable: false,
+				});
+				return;
+			}
 			if (this.checkFolderView && this.isFolderViewSet()) {
 				this.router.navigate([
 					rootUrl,

src/app/file-browser/components/file-list/file-list.component.html

@@ -35,6 +35,8 @@
 @if (showSidebar) {
 	<pr-sidebar class="adjust-for-announcement"></pr-sidebar>
 }
-<div [@slideUpAnimation]="o.isActivated ? o.activatedRoute : ''">
-	<router-outlet #o="outlet"></router-outlet>
-</div>
+@if (!isUnlistedShare || router.url.includes('record')) {
+	<div [@slideUpAnimation]="o.isActivated ? o.activatedRoute : ''">
+		<router-outlet #o="outlet"></router-outlet>
+	</div>
+}

src/app/file-browser/components/file-list/file-list.component.spec.ts

@@ -21,6 +21,7 @@ import { ShareLinksService } from '@root/app/share-links/services/share-links.se
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Component } from '@angular/core';
+import { ApiService } from '@shared/services/api/api.service';
 import { FileListComponent } from './file-list.component';
 
 @Component({ template: '' })
@@ -94,6 +95,16 @@ describe('FileListComponent', () => {
 			.and.returnValue(Promise.resolve(false)),
 	};
 
+	const mockApiService = {
+		folder: {
+			getWithChildren: jasmine.createSpy().and.returnValue(
+				of({
+					getFolderVO: jasmine.createSpy(),
+				}),
+			),
+		},
+	};
+
 	const mockDragService = {
 		events: () => of({ type: 'start' }),
 	};
@@ -120,6 +131,7 @@ describe('FileListComponent', () => {
 				{ provide: ShareLinksService, useValue: mockShareLinksService },
 				{ provide: Location, useValue: { replaceState: jasmine.createSpy() } },
 				{ provide: DOCUMENT, useValue: document },
+				{ provide: ApiService, useValue: mockApiService },
 			],
 		}).compileComponents();
 

src/app/file-browser/components/file-list/file-list.component.ts

@@ -17,6 +17,7 @@ import {
 	NgZone,
 	Renderer2,
 	DOCUMENT,
+	OnChanges,
 } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
@@ -81,6 +82,7 @@ const DRAG_SCROLL_STEP = 20;
 })
 export class FileListComponent
 	implements
+		OnChanges,
 		OnInit,
 		AfterViewInit,
 		OnDestroy,
@@ -90,6 +92,10 @@ export class FileListComponent
 	@ViewChildren(FileListItemComponent)
 	listItemsQuery: QueryList<FileListItemComponent>;
 
+	/**
+	 * currentFolder represents the shared folder in case of unlisted shares and
+	 * the rendered folder when the component is used in private/public/shared features
+	 */
 	currentFolder: FolderVO;
 	listItems: FileListItemComponent[] = [];
 
@@ -105,6 +111,12 @@ export class FileListComponent
 
 	@Input() allowNavigation = true;
 
+	/**
+	 * the ephemeralFolder is useful for using the component as is, without needing to change the route
+	 * also this will preserve the currentFolder, where the navigation by click starts from
+	 */
+	@Input() ephemeralFolder: FolderVO = null;
+
 	@Output() itemClicked = new EventEmitter<ItemClickEvent>();
 
 	private visibleItemsHandlerDebounced: Function;
@@ -113,6 +125,7 @@ export class FileListComponent
 	private reinit = false;
 	private inFileView = false;
 	private inDialog = false;
+	public isUnlistedShare = false;
 
 	@ViewChild('scroll') private scrollElement: ElementRef;
 	visibleItems: Set<FileListItemComponent> = new Set();
@@ -138,7 +151,7 @@ export class FileListComponent
 		private account: AccountService,
 		private route: ActivatedRoute,
 		private dataService: DataService,
-		private router: Router,
+		public router: Router,
 		private elementRef: ElementRef,
 		private folderViewService: FolderViewService,
 		private routeHistory: RouteHistoryService,
@@ -151,7 +164,8 @@ export class FileListComponent
 		private event: EventService,
 		private shareLinksService: ShareLinksService,
 	) {
-		this.currentFolder = this.route.snapshot.data.currentFolder;
+		this.currentFolder =
+			this.ephemeralFolder || this.route.snapshot.data.currentFolder;
 		// this.noFileListPadding = this.route.snapshot.data.noFileListPadding;
 		this.fileListCentered = this.route.snapshot.data.fileListCentered;
 		this.showSidebar = this.route.snapshot.data.showSidebar;
@@ -200,6 +214,10 @@ export class FileListComponent
 		}
 	}
 
+	async ngOnChanges() {
+		this.syncStateWithRouteandInput();
+	}
+
 	registerArchiveChangeHandlers() {
 		// register for archive change events to reload the root section
 		this.subscriptions.push(
@@ -315,22 +333,15 @@ export class FileListComponent
 		}
 	}
 
-	refreshView() {
-		this.ngOnInit();
+	async refreshView() {
+		await this.ngOnInit();
 		setTimeout(() => {
 			this.ngAfterViewInit();
 		}, 1);
 	}
 
-	ngOnInit() {
-		this.currentFolder = this.route.snapshot.data.currentFolder;
-		this.showSidebar = this.route.snapshot.data.showSidebar;
-		this.dataService.setCurrentFolder(this.currentFolder);
-		this.isRootFolder = this.currentFolder.type.includes('root');
-		this.showFolderDescription = this.route.snapshot.data.showFolderDescription;
-
-		this.visibleItems.clear();
-		this.reinit = true;
+	async ngOnInit() {
+		await this.syncStateWithRouteandInput();
 	}
 
 	ngAfterViewInit() {
@@ -509,28 +520,30 @@ export class FileListComponent
 
 	async loadVisibleItems(animate?: boolean) {
 		this.debug('loadVisibleItems %d items', this.visibleItems.size);
-		if (this.visibleItems.size) {
-			const visibleListItems = Array.from(this.visibleItems);
-			this.visibleItems.clear();
-			if (animate) {
-				const targetElems = visibleListItems.map(
-					(c) => c.element.nativeElement,
-				);
-				gsap.from(targetElems, 0.25, {
-					duration: 0.25,
-					opacity: 0,
-					ease: 'Power4.easeOut',
-					stagger: {
-						amount: 0.015,
-					},
-				});
-			}
+		if (this.ephemeralFolder !== null) {
+			return;
+		}
+		if (!this.visibleItems.size) {
+			return;
+		}
 
-			const itemsToFetch = visibleListItems.map((c) => c.item);
+		const visibleListItems = Array.from(this.visibleItems);
+		this.visibleItems.clear();
+		if (animate) {
+			const targetElems = visibleListItems.map((c) => c.element.nativeElement);
+			gsap.from(targetElems, 0.25, {
+				duration: 0.25,
+				opacity: 0,
+				ease: 'Power4.easeOut',
+				stagger: {
+					amount: 0.015,
+				},
+			});
+		}
 
-			if (itemsToFetch.length) {
-				await this.dataService.fetchLeanItems(itemsToFetch);
-			}
+		const itemsToFetch = visibleListItems.map((c) => c.item);
+		if (itemsToFetch.length && !this.isUnlistedShare) {
+			await this.dataService.fetchLeanItems(itemsToFetch);
 		}
 	}
 
@@ -542,4 +555,18 @@ export class FileListComponent
 			this.visibleItems.delete(event.component);
 		}
 	}
+
+	private async syncStateWithRouteandInput() {
+		this.isUnlistedShare = await this.shareLinksService.isUnlistedShare();
+
+		this.currentFolder =
+			this.ephemeralFolder || this.route.snapshot.data.currentFolder;
+		this.showSidebar = this.route.snapshot.data.showSidebar;
+		this.dataService.setCurrentFolder(this.currentFolder);
+		this.isRootFolder = this.currentFolder.type.includes('root');
+		this.showFolderDescription = this.route.snapshot.data.showFolderDescription;
+
+		this.visibleItems.clear();
+		this.reinit = true;
+	}
 }

src/app/file-browser/components/file-viewer/file-viewer.component.ts

@@ -175,10 +175,11 @@ export class FileViewerComponent implements OnInit, OnDestroy {
 	}
 
 	private setRecordsToPreview(resolvedRecord: RecordVO) {
-		this.records = filter(
-			this.dataService.currentFolder.ChildItemVOs,
-			'isRecord',
-		) as RecordVO[];
+		const currentFolderChildren =
+			this.dataService?.ephemeralFolder?.ChildItemVOs ||
+			this.dataService.currentFolder.ChildItemVOs;
+
+		this.records = filter(currentFolderChildren, 'isRecord') as RecordVO[];
 		this.currentIndex = findIndex(this.records, {
 			folder_linkId: resolvedRecord.folder_linkId,
 		});

src/app/share-preview/components/share-preview/share-preview.component.html

@@ -69,13 +69,22 @@
 	</div>
 </div>
 <div class="share-preview-content-breadcrumbs">
-	<pr-breadcrumbs></pr-breadcrumbs>
+	<pr-breadcrumbs
+		(breadcrumbClicked)="goToFolderFromBreadcrumb($event)"
+	></pr-breadcrumbs>
 </div>
 <div class="share-preview-content" [ngClass]="{ navigating: isNavigating }">
-	<router-outlet
-		(activate)="subscribeToItemClicks($event)"
-		(deactivate)="unsubscribeFromItemClicks()"
-	></router-outlet>
+	@if (ephemeralFolder !== null) {
+		<pr-file-list
+			[ephemeralFolder]="ephemeralFolder"
+			(itemClicked)="showFolder($event)"
+		></pr-file-list>
+	} @else {
+		<router-outlet
+			(activate)="subscribeToItemClicks($event)"
+			(deactivate)="unsubscribeFromItemClicks()"
+		></router-outlet>
+	}
 </div>
 <div
 	class="share-preview-cover from-bottom"

src/app/share-preview/components/share-preview/share-preview.component.spec.ts

@@ -24,6 +24,7 @@ import { ShareLinksService } from '@root/app/share-links/services/share-links.se
 import { ApiService } from '@shared/services/api/api.service';
 import { GoogleAnalyticsService } from '@shared/services/google-analytics/google-analytics.service';
 import { ShareResponse } from '@shared/services/api/share.repo';
+import { FilesystemService } from '@root/app/filesystem/filesystem.service';
 import { CreateAccountDialogComponent } from '../create-account-dialog/create-account-dialog.component';
 import { SharePreviewComponent } from './share-preview.component';
 
@@ -72,6 +73,10 @@ const mockShareLinksService = {
 	isUnlistedShare: () => true,
 };
 
+const mockFilesystemService = {
+	getFolder: jasmine.createSpy().and.returnValue(Promise.resolve({})),
+};
+
 describe('SharePreviewComponent', () => {
 	let component: SharePreviewComponent;
 	let fixture: ComponentFixture<SharePreviewComponent>;
@@ -122,6 +127,11 @@ describe('SharePreviewComponent', () => {
 			useValue: mockGoogleAnalyticsService,
 		});
 
+		config.providers.push({
+			provide: FilesystemService,
+			useValue: mockFilesystemService,
+		});
+
 		await TestBed.configureTestingModule(config).compileComponents();
 
 		dialog = TestBed.inject(DialogCdkService);
@@ -210,6 +220,7 @@ describe('SharePreviewComponent', () => {
 
 		const mockFileList = { itemClicked: new EventEmitter<any>() };
 
+		component.isUnlistedShare = false;
 		component.subscribeToItemClicks(mockFileList);
 		mockFileList.itemClicked.emit({
 			item: new RecordVO({}),