From d3cf0b8b751f5953d8b3406c248b67f53a5b0a19 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 17 Jun 2026 08:53:34 +0000 Subject: [PATCH] Fix entity type icon rendering for relative URLs Replace direct icon rendering with EntityOrTypeIcon component in: - draft-entities-filters.tsx: Use EntityOrTypeIcon for filter type icons - entity-type-header.tsx: Use EntityOrTypeIcon instead of manual URL conversion - graph-data-loader.tsx: Convert relative URLs to absolute before passing to graph This ensures relative icon URLs (starting with '/') are properly converted to absolute URLs and rendered correctly throughout the application. Co-authored-by: Ciaran Morinan --- .../draft-entities/draft-entities-filters.tsx | 24 +++++++------- .../shared/entity-type-header.tsx | 32 +++++++++++-------- .../graph-container/graph-data-loader.tsx | 6 +++- 3 files changed, 37 insertions(+), 25 deletions(-) diff --git a/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx b/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx index 6f7ead03e1a..d6254a3793d 100644 --- a/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx +++ b/apps/hash-frontend/src/pages/actions.page/draft-entities/draft-entities-filters.tsx @@ -6,18 +6,19 @@ import { extractBaseUrl, extractWebIdFromEntityId, } from "@blockprotocol/type-system"; -import { WandMagicSparklesIcon } from "@hashintel/design-system"; +import { + EntityOrTypeIcon, + WandMagicSparklesIcon, +} from "@hashintel/design-system"; import { useOrgs } from "../../../components/hooks/use-orgs"; import { useUsers } from "../../../components/hooks/use-users"; -import { AsteriskLightIcon } from "../../../shared/icons/asterisk-light-icon"; import { CalendarDayLightIcon } from "../../../shared/icons/calendar-day-light-icon"; import { CalendarDaysLightIcon } from "../../../shared/icons/calendar-days-light-icon"; import { CalendarLightIcon } from "../../../shared/icons/calendar-light-icon"; import { CalendarWeekLightIcon } from "../../../shared/icons/calendar-week-light-icon"; import { CalendarsLightIcon } from "../../../shared/icons/calendars-light-icon"; import { HashSolidIcon } from "../../../shared/icons/hash-solid-icon"; -import { LinkRegularIcon } from "../../../shared/icons/link-regular-icon"; import { UserIcon } from "../../../shared/icons/user-icon"; import { UsersRegularIcon } from "../../../shared/icons/users-regular-icon"; import { Button } from "../../../shared/ui"; @@ -353,14 +354,15 @@ export const DraftEntitiesFilters: FunctionComponent<{ const { baseUrl, icon, isLink, title } = entityType; return { - icon: icon ? ( - - {icon} - - ) : isLink ? ( - - ) : ( - + icon: ( + palette.gray[50]} + sx={{ mr: 1.25 }} + /> ), label: title, value: baseUrl, diff --git a/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx b/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx index c812d71078b..1ccd080bf3c 100644 --- a/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx +++ b/apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx @@ -11,6 +11,7 @@ import { import { ArrowUpRightFromSquareRegularIcon, ArrowUpRightIcon, + EntityOrTypeIcon, EntityTypeIcon, LinkTypeIcon, } from "@hashintel/design-system"; @@ -115,32 +116,37 @@ export const EntityTypeHeader = ({ control={control} name="icon" render={({ field }) => { - const iconImgUrl = field.value?.startsWith("/") - ? new URL(field.value, window.location.origin).href - : field.value; + const iconValue = field.value; /** * @todo allow uploading new SVG icons */ - if (iconImgUrl?.startsWith("http")) { + if ( + typeof iconValue === "string" && + (iconValue.startsWith("http") || + iconValue.startsWith("/")) + ) { return ( ({ - backgroundColor: palette.gray[50], - webkitMask: `url(${iconImgUrl}) no-repeat center / contain`, - mask: `url(${iconImgUrl}) no-repeat center / contain`, - width: 40, - height: 40, + sx={{ position: "relative", top: entityTypeNameSize.lineHeight / 2 - 20, - })} - /> + }} + > + palette.gray[50]} + /> + ); } return ( field.onChange(updatedIcon)} defaultIcon={ diff --git a/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx b/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx index 5e13f8aaae2..8675a919f65 100644 --- a/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx +++ b/apps/hash-frontend/src/pages/shared/graph-visualizer/graph-container/graph-data-loader.tsx @@ -47,6 +47,10 @@ export const GraphDataLoader = memo(({ edges, nodes }: GraphLoaderProps) => { !!node.icon?.startsWith("https://") || node.icon?.startsWith("/"); + const imageUrl = node.icon?.startsWith("/") + ? new URL(node.icon, window.location.origin).href + : node.icon; + graph.addNode(node.nodeId, { borderColor: node.borderColor ?? node.color, /** @@ -58,7 +62,7 @@ export const GraphDataLoader = memo(({ edges, nodes }: GraphLoaderProps) => { x: index % 20, y: Math.floor(index / 20), iconColor: customColors.gray[10], - image: node.icon, + image: imageUrl, label: node.label, nodeId: node.nodeId, nodeTypeId: node.nodeTypeId,