From 8e15552ad72c0964ce531b46c6b65ccd7b89694d Mon Sep 17 00:00:00 2001 From: Tyler Adam Martinez Date: Thu, 2 Jul 2026 11:07:58 -0500 Subject: [PATCH 1/3] fix(AssetPreviewWithOverlay): add label to the bottom of slideshow view --- .../WellShow/AssetPreviewWithOverlay.tsx | 48 ++++++++++++------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/src/components/WellShow/AssetPreviewWithOverlay.tsx b/src/components/WellShow/AssetPreviewWithOverlay.tsx index c859b5a8..ee42bd9a 100644 --- a/src/components/WellShow/AssetPreviewWithOverlay.tsx +++ b/src/components/WellShow/AssetPreviewWithOverlay.tsx @@ -107,7 +107,6 @@ export const AssetPreviewWithOverlay = ({ onViewMore?: () => void }) => { const isSlideshow = variant === 'slideshow' - const assetLabel = asset.label || asset.name const getRefreshedAsset = async ( assetId: IAsset['id'], @@ -223,6 +222,10 @@ export const AssetPreviewWithOverlay = ({ bgcolor: 'background.paper', display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', + gridTemplateAreas: ` + "name actions" + "label label" + `, gap: 1, alignItems: 'center', px: 1.5, @@ -230,27 +233,30 @@ export const AssetPreviewWithOverlay = ({ }} > - {assetLabel} + {asset.name} event.stopPropagation()} - onMouseDown={(event) => event.stopPropagation()} - onPointerDown={(event) => event.stopPropagation()} sx={{ - pointerEvents: 'auto', + gridArea: 'actions', display: 'flex', gap: 1, + justifyContent: 'flex-end', alignItems: 'center', }} + onClick={(event) => event.stopPropagation()} + onMouseDown={(event) => event.stopPropagation()} + onPointerDown={(event) => event.stopPropagation()} > {asset.signed_url && ( @@ -279,6 +279,20 @@ export const AssetPreviewWithOverlay = ({ )} + + + {asset.label} + ) : ( - {assetLabel} + {asset?.name} {onViewMore && ( From d5ed5e7ddeb3f7e32906f9bf49fa3cb3e9125784 Mon Sep 17 00:00:00 2001 From: Tyler Adam Martinez Date: Thu, 2 Jul 2026 11:21:44 -0500 Subject: [PATCH 2/3] test(AssetPreviewWithOverlay.test): patch unit test --- src/components/WellShow/Attachments.tsx | 2 +- src/test/components/AssetPreviewWithOverlay.test.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx index 0b3eaafe..f7f33ffe 100644 --- a/src/components/WellShow/Attachments.tsx +++ b/src/components/WellShow/Attachments.tsx @@ -262,7 +262,7 @@ export const AttachmentsCard = ({ variant="caption" sx={{ position: 'absolute', - bottom: 56, + bottom: 50, left: '50%', transform: 'translateX(-50%)', bgcolor: 'rgba(0,0,0,0.5)', diff --git a/src/test/components/AssetPreviewWithOverlay.test.tsx b/src/test/components/AssetPreviewWithOverlay.test.tsx index f3dae543..7c6d56c5 100644 --- a/src/test/components/AssetPreviewWithOverlay.test.tsx +++ b/src/test/components/AssetPreviewWithOverlay.test.tsx @@ -149,7 +149,7 @@ describe('AssetPreviewWithOverlay reassociation dialog', () => { expect(mockedMutateAsset).not.toHaveBeenCalled() }) - it('shows the asset label in grid mode with a view more action', async () => { + it('shows the asset name in grid mode with a view more action', async () => { const user = userEvent.setup() const refetchAssets = vi.fn().mockResolvedValue({ data: { data: [asset] } }) const onViewMore = vi.fn() @@ -163,7 +163,7 @@ describe('AssetPreviewWithOverlay reassociation dialog', () => { /> ) - expect(screen.getByText('Field inspection photo label')).toBeTruthy() + expect(screen.getByText('field-photo.jpg')).toBeTruthy() await user.click(screen.getByRole('button', { name: 'View more' })) expect(onViewMore).toHaveBeenCalledTimes(1) From b8d1c30cede91516ee5b3769625e0ff91b0aa486 Mon Sep 17 00:00:00 2001 From: Tyler Adam Martinez Date: Thu, 2 Jul 2026 11:28:16 -0500 Subject: [PATCH 3/3] feat(Attachments): move the caption to the center footer name row --- .../WellShow/AssetPreviewWithOverlay.tsx | 26 ++++++++++++++++--- src/components/WellShow/Attachments.tsx | 19 +++----------- .../AssetPreviewWithOverlay.test.tsx | 15 +++++++++++ 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/src/components/WellShow/AssetPreviewWithOverlay.tsx b/src/components/WellShow/AssetPreviewWithOverlay.tsx index ee42bd9a..42311964 100644 --- a/src/components/WellShow/AssetPreviewWithOverlay.tsx +++ b/src/components/WellShow/AssetPreviewWithOverlay.tsx @@ -97,6 +97,7 @@ export const AssetPreviewWithOverlay = ({ refetchAssets, canManageAsset = false, onViewMore, + slideshowCaption, }: { asset: IAsset variant: 'grid' | 'slideshow' @@ -105,6 +106,7 @@ export const AssetPreviewWithOverlay = ({ > canManageAsset?: boolean onViewMore?: () => void + slideshowCaption?: string }) => { const isSlideshow = variant === 'slideshow' @@ -221,10 +223,10 @@ export const AssetPreviewWithOverlay = ({ borderColor: 'divider', bgcolor: 'background.paper', display: 'grid', - gridTemplateColumns: 'minmax(0, 1fr) auto', + gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)', gridTemplateAreas: ` - "name actions" - "label label" + "name caption actions" + "label label label" `, gap: 1, alignItems: 'center', @@ -246,6 +248,24 @@ export const AssetPreviewWithOverlay = ({ {asset.name} + {slideshowCaption && ( + + {slideshowCaption} + + )} + )} {previewAssets.length > 1 && ( @@ -258,22 +261,6 @@ export const AttachmentsCard = ({ > - - {slideshowIndex + 1} / {previewAssets.length} - )} diff --git a/src/test/components/AssetPreviewWithOverlay.test.tsx b/src/test/components/AssetPreviewWithOverlay.test.tsx index 7c6d56c5..77936564 100644 --- a/src/test/components/AssetPreviewWithOverlay.test.tsx +++ b/src/test/components/AssetPreviewWithOverlay.test.tsx @@ -182,4 +182,19 @@ describe('AssetPreviewWithOverlay reassociation dialog', () => { expect(screen.getByText('Expanded slideshow label')).toBeTruthy() }) + + it('shows the slideshow caption in the footer', () => { + const refetchAssets = vi.fn().mockResolvedValue({ data: { data: [asset] } }) + + render( + + ) + + expect(screen.getByText('2 / 5')).toBeTruthy() + }) })