From adf81fcd736cb5bf14ee84a6d86b0ccb2f174090 Mon Sep 17 00:00:00 2001 From: Alexander Brown Date: Thu, 12 Mar 2026 09:13:20 -0700 Subject: [PATCH] refactor: centralize display_name || name into getAssetDisplayName (#9641) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Centralize the inline `display_name || name` pattern into `getAssetDisplayName`, adding `display_name` to the existing metadata fallback chain. ## Changes - **What**: Update `getAssetDisplayName` fallback chain to `user_metadata.name → metadata.name → display_name → name`. Replace all 6 inline `asset.display_name || asset.name` call sites with the shared utility. Remove duplicate local function in `AssetsSidebarListView.vue`. ## Review Focus The fallback order preserves user_metadata overrides while incorporating the `display_name` field added in #9626. All callers now go through a single code path. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9641-refactor-centralize-display_name-name-into-getAssetDisplayName-31e6d73d365081e09e5de85486583443) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp Co-authored-by: GitHub Action --- .../sidebar/tabs/AssetsSidebarListView.vue | 5 +--- .../sidebar/tabs/AssetsSidebarTab.vue | 3 ++- src/platform/assets/components/AssetCard.vue | 2 +- .../assets/components/MediaAssetCard.vue | 5 ++-- .../assets/components/MediaImageTop.vue | 5 ++-- .../composables/useMediaAssetActions.ts | 5 ++-- .../assets/utils/assetMetadataUtils.test.ts | 25 +++++++++++++++---- .../assets/utils/assetMetadataUtils.ts | 4 +-- 8 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue index c6db1a23fb..50d6ae75c7 100644 --- a/src/components/sidebar/tabs/AssetsSidebarListView.vue +++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue @@ -90,6 +90,7 @@ import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue' import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks' import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema' import type { AssetItem } from '@/platform/assets/schemas/assetSchema' +import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils' import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil' import { useAssetsStore } from '@/stores/assetsStore' import { @@ -135,10 +136,6 @@ const listGridStyle = { gap: '0.5rem' } -function getAssetDisplayName(asset: AssetItem): string { - return asset.display_name || asset.name -} - function getAssetPrimaryText(asset: AssetItem): string { return truncateFilename(getAssetDisplayName(asset)) } diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue index db19624a34..21faa21d4d 100644 --- a/src/components/sidebar/tabs/AssetsSidebarTab.vue +++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue @@ -236,6 +236,7 @@ import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks' import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema' import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema' import type { AssetItem } from '@/platform/assets/schemas/assetSchema' +import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils' import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema' import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil' import { isCloud } from '@/platform/distribution/types' @@ -569,7 +570,7 @@ const handleZoomClick = (asset: AssetItem) => { const dialogStore = useDialogStore() dialogStore.showDialog({ key: 'asset-3d-viewer', - title: asset.display_name || asset.name, + title: getAssetDisplayName(asset), component: Load3dViewerContent, props: { modelUrl: asset.preview_url || '' diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue index 5f35da07c6..e27bb069a3 100644 --- a/src/platform/assets/components/AssetCard.vue +++ b/src/platform/assets/components/AssetCard.vue @@ -186,7 +186,7 @@ const tooltipDelay = computed(() => const { isLoading, error } = useImage({ src: asset.preview_url ?? '', - alt: asset.display_name || asset.name + alt: displayName.value }) function handleSelect() { diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue index 2f515284fe..176c61a72c 100644 --- a/src/platform/assets/components/MediaAssetCard.vue +++ b/src/platform/assets/components/MediaAssetCard.vue @@ -5,7 +5,7 @@ :aria-label=" asset ? $t('assetBrowser.ariaLabel.assetCard', { - name: asset.display_name || asset.name, + name: getAssetDisplayName(asset), type: fileKind }) : $t('assetBrowser.ariaLabel.loadingAsset') @@ -152,6 +152,7 @@ import { cn } from '@/utils/tailwindUtil' import { getAssetType } from '../composables/media/assetMappers' import { useMediaAssetActions } from '../composables/useMediaAssetActions' import type { AssetItem } from '../schemas/assetSchema' +import { getAssetDisplayName } from '../utils/assetMetadataUtils' import type { MediaKind } from '../schemas/mediaAssetSchema' import { MediaAssetKey } from '../schemas/mediaAssetSchema' import MediaTitle from './MediaTitle.vue' @@ -225,7 +226,7 @@ const canInspect = computed(() => isPreviewableMediaType(fileKind.value)) // Get filename without extension const fileName = computed(() => { - return getFilenameDetails(asset?.display_name || asset?.name || '').filename + return getFilenameDetails(asset ? getAssetDisplayName(asset) : '').filename }) // Adapt AssetItem to legacy AssetMeta format for existing components diff --git a/src/platform/assets/components/MediaImageTop.vue b/src/platform/assets/components/MediaImageTop.vue index 4232777196..9906ac66da 100644 --- a/src/platform/assets/components/MediaImageTop.vue +++ b/src/platform/assets/components/MediaImageTop.vue @@ -6,7 +6,7 @@
{ - const filename = asset.display_name || asset.name + const filename = getAssetDisplayName(asset) const downloadUrl = asset.preview_url || getAssetUrl(asset) downloadFile(downloadUrl, filename) }) diff --git a/src/platform/assets/utils/assetMetadataUtils.test.ts b/src/platform/assets/utils/assetMetadataUtils.test.ts index 0e0d94383e..df3476db96 100644 --- a/src/platform/assets/utils/assetMetadataUtils.test.ts +++ b/src/platform/assets/utils/assetMetadataUtils.test.ts @@ -70,20 +70,35 @@ describe('assetMetadataUtils', () => { { name: 'returns name from user_metadata when present', user_metadata: { name: 'My Custom Name' }, + display_name: 'ComfyUI_00001_.png', expected: 'My Custom Name' }, { - name: 'falls back to asset name for non-string', - user_metadata: { name: 123 }, + name: 'returns display_name when user_metadata.name is absent', + user_metadata: undefined, + display_name: 'ComfyUI_00001_.png', + expected: 'ComfyUI_00001_.png' + }, + { + name: 'falls back to asset name when both are absent', + user_metadata: undefined, + display_name: undefined, expected: 'test-model' }, { - name: 'falls back to asset name for undefined', + name: 'skips non-string user_metadata.name', + user_metadata: { name: 123 }, + display_name: 'ComfyUI_00001_.png', + expected: 'ComfyUI_00001_.png' + }, + { + name: 'falls back to asset name when display_name is empty', user_metadata: undefined, + display_name: '', expected: 'test-model' } - ])('$name', ({ user_metadata, expected }) => { - const asset = { ...mockAsset, user_metadata } + ])('$name', ({ user_metadata, display_name, expected }) => { + const asset = { ...mockAsset, user_metadata, display_name } expect(getAssetDisplayName(asset)).toBe(expected) }) }) diff --git a/src/platform/assets/utils/assetMetadataUtils.ts b/src/platform/assets/utils/assetMetadataUtils.ts index 4da1f89c74..d290cb29ad 100644 --- a/src/platform/assets/utils/assetMetadataUtils.ts +++ b/src/platform/assets/utils/assetMetadataUtils.ts @@ -58,12 +58,12 @@ export function getAssetBaseModels(asset: AssetItem): string[] { /** * Gets the display name for an asset - * Checks user_metadata.name first, then metadata.name, then asset.name + * Checks user_metadata.name, then metadata.name, then display_name, then asset.name * @param asset - The asset to get display name from * @returns The display name */ export function getAssetDisplayName(asset: AssetItem): string { - return getStringProperty(asset, 'name') ?? asset.name + return getStringProperty(asset, 'name') || asset.display_name || asset.name } /**