This is an automated email from the ASF dual-hosted git repository. github-merge-queue[bot] pushed a commit to branch gh-readonly-queue/main/pr-5947-7a38b6cf4c476e6f7ae0b0555fd711b50f4e85ec in repository https://gitbox.apache.org/repos/asf/texera.git
commit 116f2413471a2535bde83110cc98e14fe4f04159 Author: Xuan Gu <[email protected]> AuthorDate: Fri Jun 26 15:33:28 2026 -0700 feat: add card view to the user dataset listing (#5947) <!-- Thanks for sending a pull request (PR)! Here are some tips for you: 1. If this is your first time, please read our contributor guidelines: [Contributing to Texera](https://github.com/apache/texera/blob/main/CONTRIBUTING.md) 2. Ensure you have added or run the appropriate tests for your PR 3. If the PR is work in progress, mark it a draft on GitHub. 4. Please write your PR title to summarize what this PR proposes, we are following Conventional Commits style for PR titles as well. 5. Be sure to keep the PR description updated to reflect all changes. --> ### What changes were proposed in this PR? <!-- Please clarify what changes you are proposing. The purpose of this section is to outline the changes. Here are some tips for you: 1. If you propose a new API, clarify the use case for a new API. 2. If you fix a bug, you can clarify why it is a bug. 3. If it is a refactoring, clarify what has been changed. 3. It would be helpful to include a before-and-after comparison using screenshots or GIFs. 4. Please consider writing useful notes for better and faster reviews. --> This PR adds a card view to the user's private dataset listing (/user/dataset). The card view reuses the existing generic CardItemComponent (the list-item/card-item card already used by the private workflow listing) and renders the dataset cover image. <img width="878" height="573" alt="demo" src="https://github.com/user-attachments/assets/defc9f09-9b6a-4494-96e0-4fcc4e740b01"; /> ### Any related issues, documentation, discussions? <!-- Please use this section to link other resources if not mentioned already. 1. If this PR fixes an issue, please include `Fixes #1234`, `Resolves #1234` or `Closes #1234`. If it is only related, simply mention the issue number. 2. If there is design documentation, please add the link. 3. If there is a discussion in the mailing list, please add the link. --> Closes #5312 ### How was this PR tested? <!-- If tests were added, say they were added here. Or simply mention that if the PR is tested with existing test cases. Make sure to include/update test cases that check the changes thoroughly including negative and positive cases if possible. If it was tested in a way different from regular unit tests, please clarify how you tested step by step, ideally copy and paste-able, so that other reviewers can test and check, and descendants can verify in the future. If tests were not added, please describe why they were not added and/or why it was difficult to add. --> Added 5 unit tests covering dataset cover preview loading, fallback to the default image, image load failure handling, workflow card regression, and dataset view type updates. Also manually tested the related UI changes. ### Was this PR authored or co-authored using generative AI tooling? <!-- If generative AI tooling has been used in the process of authoring this PR, please include the phrase: 'Generated-by: ' followed by the name of the tool and its version. If no, write 'No'. Please refer to the [ASF Generative Tooling Guidance](https://www.apache.org/legal/generative-tooling.html) for details. --> Generated-by: Claude Opus 4.8 --------- Co-authored-by: Claude Opus 4.8 <[email protected]> --- .../list-item/card-item/card-item.component.html | 3 +- .../card-item/card-item.component.spec.ts | 66 ++++++++++++++++++++++ .../list-item/card-item/card-item.component.ts | 33 +++++++++-- .../user/user-dataset/user-dataset.component.html | 35 ++++++++++++ .../user-dataset/user-dataset.component.spec.ts | 51 +++++++++++++++++ .../user/user-dataset/user-dataset.component.ts | 13 +++++ 6 files changed, 195 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html index 43b965f5bc..f44f25597e 100644 --- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html +++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html @@ -39,7 +39,8 @@ <!-- Placeholder or Preview Image --> <img class="card-preview-image" - [src]="previewImage" + [src]="coverImageSrc" + (error)="onCoverError()" alt="Workflow Preview" /> </div> diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts index f39f318c34..cba5ccea2f 100644 --- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts +++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts @@ -31,6 +31,7 @@ import { commonTestProviders } from "../../../../../common/testing/test-utils"; import type { Mocked } from "vitest"; import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry"; import { HUB_WORKFLOW_RESULT_DETAIL, USER_WORKSPACE } from "../../../../../app-routing.constant"; +import { DatasetService } from "../../../../service/user/dataset/dataset.service"; function makeWorkflowEntry(overrides: Partial<DashboardEntry> = {}): DashboardEntry { return { @@ -48,18 +49,37 @@ function makeWorkflowEntry(overrides: Partial<DashboardEntry> = {}): DashboardEn } as unknown as DashboardEntry; } +function makeDatasetEntry(overrides: Partial<DashboardEntry> = {}): DashboardEntry { + return { + id: 5, + name: "ds", + description: "", + type: "dataset", + dataset: { isOwner: true }, + accessibleUserIds: [], + likeCount: 0, + viewCount: 0, + isLiked: false, + size: 0, + ...overrides, + } as unknown as DashboardEntry; +} + describe("CardItemComponent", () => { let component: CardItemComponent; let fixture: ComponentFixture<CardItemComponent>; let workflowPersistService: Mocked<WorkflowPersistService>; + let datasetService: Mocked<DatasetService>; beforeEach(async () => { const workflowPersistServiceSpy = { updateWorkflowName: vi.fn(), updateWorkflowDescription: vi.fn() }; + const datasetServiceSpy = { getDatasetCoverUrl: vi.fn() }; await TestBed.configureTestingModule({ imports: [CardItemComponent, HttpClientTestingModule, BrowserAnimationsModule, RouterTestingModule], providers: [ { provide: WorkflowPersistService, useValue: workflowPersistServiceSpy }, + { provide: DatasetService, useValue: datasetServiceSpy }, { provide: UserService, useClass: StubUserService }, NzModalService, ...commonTestProviders, @@ -69,6 +89,7 @@ describe("CardItemComponent", () => { fixture = TestBed.createComponent(CardItemComponent); component = fixture.componentInstance; workflowPersistService = TestBed.inject(WorkflowPersistService) as unknown as Mocked<WorkflowPersistService>; + datasetService = TestBed.inject(DatasetService) as unknown as Mocked<DatasetService>; component.entry = makeWorkflowEntry(); fixture.detectChanges(); }); @@ -157,4 +178,49 @@ describe("CardItemComponent", () => { expect((entry as any).checked).toBe(true); expect(spy).toHaveBeenCalledTimes(1); }); + + it("should load the dataset cover into the preview when the entry has a cover", () => { + datasetService.getDatasetCoverUrl.mockReturnValue(of({ url: "https://cover.example/img.png"; })); + component.entry = makeDatasetEntry({ id: 5, coverImageUrl: "cover/path.png" }); + component.ngOnChanges({ entry: { currentValue: component.entry } as any }); + + expect(datasetService.getDatasetCoverUrl).toHaveBeenCalledWith(5); + expect(component.coverImageSrc).toBe("https://cover.example/img.png";); + }); + + it("should fall back to the default preview when the cover fetch fails", () => { + datasetService.getDatasetCoverUrl.mockReturnValue(throwError(() => new Error("cover fetch failed"))); + component.entry = makeDatasetEntry({ coverImageUrl: "cover/path.png" }); + component.ngOnChanges({ entry: { currentValue: component.entry } as any }); + + expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE); + }); + + it("should reset the preview to the default image on cover load error", () => { + component.coverImageSrc = "https://cover.example/img.png";; + component.onCoverError(); + expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE); + }); + + it("should keep the default preview for non-dataset entries", () => { + component.entry = makeWorkflowEntry(); + component.ngOnChanges({ entry: { currentValue: component.entry } as any }); + expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE); + }); + + it("should not fetch a cover when the dataset has no cover image", () => { + component.entry = makeDatasetEntry({ coverImageUrl: undefined }); + component.ngOnChanges({ entry: { currentValue: component.entry } as any }); + + expect(datasetService.getDatasetCoverUrl).not.toHaveBeenCalled(); + expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE); + }); + + it("should use the default preview when the cover url resolves to null", () => { + datasetService.getDatasetCoverUrl.mockReturnValue(of({ url: null })); + component.entry = makeDatasetEntry({ coverImageUrl: "cover/path.png" }); + component.ngOnChanges({ entry: { currentValue: component.entry } as any }); + + expect(component.coverImageSrc).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE); + }); }); diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts index ffba9fb9ab..14f43f3ab4 100644 --- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts +++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts @@ -105,6 +105,8 @@ export class CardItemComponent implements OnChanges { hovering: boolean = false; /** The default top image, used when the user has not uploaded a custom one. */ static readonly DEFAULT_PREVIEW_IMAGE = "assets/card_background.jpg"; + /** Resolved preview/cover image; stays the placeholder until a dataset cover loads. */ + coverImageSrc: string = CardItemComponent.DEFAULT_PREVIEW_IMAGE; @Input() get entry(): DashboardEntry { @@ -134,11 +136,6 @@ export class CardItemComponent implements OnChanges { private notificationService: NotificationService ) {} - /** The top image src for the card preview. */ - get previewImage(): string { - return CardItemComponent.DEFAULT_PREVIEW_IMAGE; - } - initializeEntry() { if (this.entry.type === "workflow") { if (typeof this.entry.id === "number") { @@ -166,6 +163,7 @@ export class CardItemComponent implements OnChanges { } this.iconType = "database"; this.size = this.entry.size; + this.loadDatasetCover(this.entry.id); } } else if (this.entry.type === "file") { // not sure where to redirect @@ -184,6 +182,31 @@ export class CardItemComponent implements OnChanges { } } + /** Loads the dataset cover into the preview slot, falling back to the placeholder. */ + private loadDatasetCover(did: number): void { + if (!this.entry.coverImageUrl) { + return; + } + this.datasetService + .getDatasetCoverUrl(did) + .pipe(untilDestroyed(this)) + .subscribe({ + next: ({ url }) => { + this.coverImageSrc = url ?? CardItemComponent.DEFAULT_PREVIEW_IMAGE; + this.cdr.markForCheck(); + }, + error: () => { + this.coverImageSrc = CardItemComponent.DEFAULT_PREVIEW_IMAGE; + this.cdr.markForCheck(); + }, + }); + } + + /** Falls the preview back to the placeholder if the cover image fails to load. */ + onCoverError(): void { + this.coverImageSrc = CardItemComponent.DEFAULT_PREVIEW_IMAGE; + } + onCheckboxChange(entry: DashboardEntry): void { entry.checked = !entry.checked; this.cdr.markForCheck(); diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html index 08ce28eac6..1c08a580e4 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html @@ -32,6 +32,26 @@ nzTheme="outline"></i> <span>Create Dataset</span> </button> + <button + nz-button + title="List View" + (click)="setViewType('list')" + [nzType]="viewType === 'list' ? 'primary' : 'default'"> + <i + nz-icon + nzType="bars" + nzTheme="outline"></i> + </button> + <button + nz-button + title="Card View" + (click)="setViewType('card')" + [nzType]="viewType === 'card' ? 'primary' : 'default'"> + <i + nz-icon + nzType="appstore" + nzTheme="outline"></i> + </button> <texera-filters #filters></texera-filters> </div> </nz-card> @@ -52,9 +72,24 @@ </nz-select> </div> + <ng-template + #datasetCardTpl + let-entry> + <texera-card-item + [entry]="entry" + [currentUid]="currentUid" + [isPrivateSearch]="true" + [editable]="true" + (deleted)="deleteDataset(entry)" + (refresh)="search(true)"> + </texera-card-item> + </ng-template> + <texera-search-results [editable]="true" [isPrivateSearch]="true" + [viewMode]="viewType" + [cardTemplate]="datasetCardTpl" (deleted)="deleteDataset($event)" (refresh)="ngAfterViewInit()" [currentUid]="currentUid"></texera-search-results> diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts index f665b3ea81..0f1386bf19 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts @@ -309,4 +309,55 @@ describe("UserDatasetComponent", () => { expect(searchResultsStub.entries).toEqual([e1, e3]); }); }); + + describe("view mode toggle", () => { + const VIEW_MODE_KEY = "texera.userDataset.viewMode"; + + afterEach(() => localStorage.removeItem(VIEW_MODE_KEY)); + + it("setViewType updates viewType, persists it, and is a no-op when unchanged", () => { + // viewType defaults to "card", so switching to "list" is the real change + component.setViewType("list"); + expect(component.viewType).toBe("list"); + expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("list"); + + // setting the same value should not write again + localStorage.removeItem(VIEW_MODE_KEY); + component.setViewType("list"); + expect(localStorage.getItem(VIEW_MODE_KEY)).toBeNull(); + + component.setViewType("card"); + expect(component.viewType).toBe("card"); + expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("card"); + }); + + const makeFreshComponent = () => { + const userServiceMock = { + userChanged: () => new Subject<User | undefined>().asObservable(), + isLogin: () => true, + getCurrentUser: () => ({ uid: 42 }) as User, + }; + return new UserDatasetComponent( + modalServiceMock as any, + userServiceMock as any, + routerMock as any, + searchServiceMock as any, + datasetServiceMock as any, + messageMock as any + ); + }; + + it("defaults viewType to card when nothing is stored", () => { + localStorage.removeItem(VIEW_MODE_KEY); + expect(makeFreshComponent().viewType).toBe("card"); + }); + + it("initializes viewType to list only when explicitly stored", () => { + localStorage.setItem(VIEW_MODE_KEY, "list"); + expect(makeFreshComponent().viewType).toBe("list"); + + localStorage.setItem(VIEW_MODE_KEY, "card"); + expect(makeFreshComponent().viewType).toBe("card"); + }); + }); }); diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts index 2deedba104..6ac60916c2 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts @@ -26,6 +26,7 @@ import { DatasetService } from "../../../service/user/dataset/dataset.service"; import { SortMethod } from "../../../type/sort-method"; import { DashboardEntry } from "../../../type/dashboard-entry"; import { SearchResultsComponent } from "../search-results/search-results.component"; +import { CardItemComponent } from "../list-item/card-item/card-item.component"; import { FiltersComponent } from "../filters/filters.component"; import { firstValueFrom } from "rxjs"; import { USER_DATASET } from "../../../../app-routing.constant"; @@ -61,14 +62,18 @@ import { FormsModule } from "@angular/forms"; NzSelectComponent, FormsModule, SearchResultsComponent, + CardItemComponent, ], }) export class UserDatasetComponent implements AfterViewInit { + private static readonly VIEW_MODE_STORAGE_KEY = "texera.userDataset.viewMode"; public sortMethod = SortMethod.EditTimeDesc; lastSortMethod: SortMethod | null = null; public isLogin = this.userService.isLogin(); public currentUid = this.userService.getCurrentUser()?.uid; public hasMismatch = false; // Display warning when there are mismatched datasets + public viewType: "list" | "card" = + localStorage.getItem(UserDatasetComponent.VIEW_MODE_STORAGE_KEY) === "list" ? "list" : "card"; private _searchResultsComponent?: SearchResultsComponent; @ViewChild(SearchResultsComponent) get searchResultsComponent(): SearchResultsComponent { @@ -120,6 +125,14 @@ export class UserDatasetComponent implements AfterViewInit { .subscribe(() => this.search()); } + public setViewType(viewType: "list" | "card"): void { + if (this.viewType === viewType) { + return; + } + this.viewType = viewType; + localStorage.setItem(UserDatasetComponent.VIEW_MODE_STORAGE_KEY, viewType); + } + /* * Executes a dataset search with filtering, sorting. *
![https://cover.example/img.png"](https://cover.example/img.png"){kind=link}