From bfbf2c552ebbce6611500070766feddb0fce8297 Mon Sep 17 00:00:00 2001 From: Tanishq Gandhi <56472134+tanishqgandhi1908@users.noreply.github.com> Date: Thu, 3 Sep 2026 22:28:35 +0000 Subject: [PATCH] fix(frontend): render workflow covers on the hub landing page (#8383) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### What changes were proposed in this PR? Workflow covers never rendered on the Hub landing page: every card under **Top Loved Workflows** and **Top Cloned Workflows** showed the grey placeholder, even for a workflow whose owner had set a cover, while the same workflow showed it correctly in Your Work → Workflows. Covers reach the frontend two different ways. A **workflow** cover is a downscaled **data URL** that arrives inline on the list payload and lands on `DashboardEntry.coverImageUrl`. A **dataset** or **model** cover is a committed file, so what arrives is a *path* and the card has to fetch a presigned URL from `/{id}/cover-url`. `browse-section` only ever handled the second kind — it asks the descriptor for a `coverUrl` and bails when there is none, which is always the case for a workflow, since `WorkflowResourceDescriptor` deliberately declares none. So nothing was ever cached for a workflow and `getCoverImage` fell through to the default. `getCoverImage` now reads a workflow's cover straight off the entry, mirroring the branch `card-item.component.ts:197-202` already had. Also included, since it is one line in the same area and needs no separate issue: `frontend/proxy.config.json` declared `"/api/model/**"` **twice** (both pointing at `:9092`, so the last silently won). The duplicate is removed, leaving the entry beside `/api/dataset`, so the file reads `dataset`, `model`, `access/dataset`, `access/model`. **Before** — both workflows are public; the left one has a cover, the right one does not: issue5-1-hub-landing-before **After** — the left card renders its cover, the right one still shows the placeholder: issue5-1-hub-landing-after ### Any related issues, documentation, discussions? Closes #8382. ### How was this PR tested? `browse-section.component.spec.ts`, 25 passed: - `renders a workflow's cover from the entry, since no cover is ever fetched for one` — a workflow with a cover resolves to it, one without still gets the default. - `keeps a file-backed kind on the placeholder rather than rendering its stored cover path` — a dataset whose presigned fetch answers with an empty URL stays on the placeholder instead of rendering `v1/images/preview.png`. - `skips an entity whose descriptor resolves no cover, rather than calling undefined` was already there and asserted `getCoverImage(workflow) === defaultBackground` — it pinned the bug, so it now asserts the cover comes off the entry, with the unregistered-kind row still falling back. `landing-page.component.spec.ts` also run, 17 passed. ``` cd frontend npx ng test --include src/app/hub/component/browse-section/browse-section.component.spec.ts npx ng test --include src/app/hub/component/landing-page/landing-page.component.spec.ts ``` Checked by hand against a local stack: a public workflow with a cover set from the dashboard now shows it in both hub sections, and a public workflow without one is unchanged. ### Was this PR authored or co-authored using generative AI tooling? (backported from commit 1facefb183c96e7b426ff6be35e5b6aaa7b33345) Generated-by: Claude Code (Opus 5) --- frontend/proxy.config.json | 7 +- .../browse-section.component.spec.ts | 88 +++++++++++++++++++ .../browse-section.component.ts | 11 +++ 3 files changed, 100 insertions(+), 6 deletions(-) diff --git a/frontend/proxy.config.json b/frontend/proxy.config.json index 7801e0c256f..47988f6b46e 100755 --- a/frontend/proxy.config.json +++ b/frontend/proxy.config.json @@ -15,7 +15,7 @@ "secure": false, "changeOrigin": true }, -"/api/models": { + "/api/models": { "target": "http://localhost:9096", "secure": false, "changeOrigin": true @@ -45,11 +45,6 @@ "secure": false, "changeOrigin": true }, - "/api/model/**": { - "target": "http://localhost:9092", - "secure": false, - "changeOrigin": true - }, "/api/access/model/**": { "target": "http://localhost:9092", "secure": false, diff --git a/frontend/src/app/hub/component/browse-section/browse-section.component.spec.ts b/frontend/src/app/hub/component/browse-section/browse-section.component.spec.ts index a4b1ad301a4..490df8abf56 100644 --- a/frontend/src/app/hub/component/browse-section/browse-section.component.spec.ts +++ b/frontend/src/app/hub/component/browse-section/browse-section.component.spec.ts @@ -126,6 +126,94 @@ describe("BrowseSectionComponent", () => { expect(component.getCoverImage(entity)).toBe(component.defaultBackground); }); +<<<<<<< HEAD +======= + + // `this.resourceRegistry.find(entity.type)?.coverUrl` carries two guards, and a mixed section + // can trip either. A workflow's cover is a data URL carried on the entry itself, so + // WorkflowResourceDescriptor deliberately declares no `coverUrl`; and a kind the registry does + // not carry at all has no descriptor to ask, which is why this is `find`, not `get` — one such + // row must not take the whole section's covers down, exactly as `routeFor` five lines up + // already promises for links. + it("skips an entity whose descriptor resolves no cover, rather than calling undefined", () => { + const workflow = { + id: 10, + type: "workflow", + coverImageUrl: "carried-on-the-entry", + accessibleUserIds: [], + } as unknown as DashboardEntry; + const unregistered = { + id: 12, + type: "computing-unit", + coverImageUrl: "carried-on-the-entry", + accessibleUserIds: [], + } as unknown as DashboardEntry; + component.entities = [workflow, unregistered]; + + expect(() => component.ngOnInit()).not.toThrow(); + expect(coverCache(component).has("workflow:10")).toBe(false); + expect(coverCache(component).has("computing-unit:12")).toBe(false); + // Nothing is cached for a workflow, but its cover is readable straight off the entry. + expect(component.getCoverImage(workflow)).toBe("carried-on-the-entry"); + expect(component.getCoverImage(unregistered)).toBe(component.defaultBackground); + }); + + it("renders a workflow's cover from the entry, since no cover is ever fetched for one", () => { + const withCover = { + id: 20, + type: "workflow", + coverImageUrl: "data:image/png;base64,AAAA", + accessibleUserIds: [], + } as unknown as DashboardEntry; + const withoutCover = { id: 21, type: "workflow", accessibleUserIds: [] } as unknown as DashboardEntry; + component.entities = [withCover, withoutCover]; + component.ngOnInit(); + + expect(component.getCoverImage(withCover)).toBe("data:image/png;base64,AAAA"); + expect(component.getCoverImage(withoutCover)).toBe(component.defaultBackground); + }); + + it("keeps a file-backed kind on the placeholder rather than rendering its stored cover path", () => { + // A dataset's coverImageUrl is a path relative to the dataset root, not something an + // can load, so it must never stand in for the presigned URL the descriptor resolves. + vi.spyOn(TestBed.inject(DatasetService) as any, "getDatasetCoverUrl").mockReturnValue(of({ url: "" })); + const entity = { + id: 22, + type: "dataset", + coverImageUrl: "v1/images/preview.png", + accessibleUserIds: [], + } as unknown as DashboardEntry; + component.entities = [entity]; + component.ngOnInit(); + + expect(component.getCoverImage(entity)).toBe(component.defaultBackground); + }); + + it("caches nothing when the descriptor resolves an empty cover url", () => { + // A presigned-URL endpoint with nothing to sign answers with an empty string; caching that + // would put an on the card, which the browser resolves to the page itself. + vi.spyOn(TestBed.inject(DatasetService) as any, "getDatasetCoverUrl").mockReturnValue(of({ url: "" })); + const entity = { + id: 11, + type: "dataset", + coverImageUrl: "has-cover", + accessibleUserIds: [], + } as unknown as DashboardEntry; + component.entities = [entity]; + component.ngOnInit(); + + // White-box on purpose: getCoverImage's `|| defaultBackground` makes "cached an empty string" + // and "cached nothing" indistinguishable through the public API, so only the map itself can + // say whether the guard ran. + expect(coverCache(component).has("dataset:11")).toBe(false); + expect(component.getCoverImage(entity)).toBe(component.defaultBackground); + }); + + /** The component's cover cache, which no public member exposes. */ + function coverCache(c: BrowseSectionComponent): Map { + return (c as unknown as { coverImageUrls: Map }).coverImageUrls; + } +>>>>>>> 1facefb18 (fix(frontend): render workflow covers on the hub landing page (#8383)) }); }); /** diff --git a/frontend/src/app/hub/component/browse-section/browse-section.component.ts b/frontend/src/app/hub/component/browse-section/browse-section.component.ts index 42274e82442..7a22cf31f8a 100644 --- a/frontend/src/app/hub/component/browse-section/browse-section.component.ts +++ b/frontend/src/app/hub/component/browse-section/browse-section.component.ts @@ -19,6 +19,7 @@ import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core"; import { DashboardEntry } from "../../../dashboard/type/dashboard-entry"; +import { EntityType } from "../../service/hub.service"; import { ResourceRegistryService } from "../../../dashboard/service/user/resource-registry/resource-registry.service"; import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; import { @@ -144,6 +145,16 @@ export class BrowseSectionComponent implements OnInit, OnChanges { } getCoverImage(entity: DashboardEntry): string { +<<<<<<< HEAD return this.coverImageUrls.get(this.coverCacheKey(entity)) || this.defaultBackground; +======= + // A workflow's cover is a downscaled data URL carried on the entry, so nothing is ever fetched + // for it. The file-backed kinds carry a stored path instead, which only the cache above can + // turn into something an can load. + if (entity.type === EntityType.Workflow) { + return entity.coverImageUrl ?? this.defaultBackground; + } + return this.coverImageUrls.get(this.cacheKey(entity)) || this.defaultBackground; +>>>>>>> 1facefb18 (fix(frontend): render workflow covers on the hub landing page (#8383)) } }