fix(ui): url encode imageCacheTag for media on dashboard (#11164)

### What?
URL encodes the imageCacheTag query param used to render Media on the
Admin Dashboard

### Why?
The format of the timestamp used as the `imageCacheTag` is causing an
`InvalidQueryStringException` when hosting with Cloudfront + Lambda
(SST/OpenNext)
[See issue](#11163)

### How?
Uses `encodeURIComponent` on instances where the `imageCacheTag` is
being formatted for the request URL. (In EditUpload, Thumbnail, and
PreviewSizes)

Fixes #11163

---------

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

Author: lucasbajoua

packages/ui/src/elements/EditUpload/index.tsx

@@ -175,7 +175,7 @@ export const EditUpload: React.FC<EditUploadProps> = ({
     setFocalPosition({ x: xCenter, y: yCenter })
   }
 
-  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc
+  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${encodeURIComponent(imageCacheTag)}` : fileSrc
 
   return (
     <div className={baseClass}>

packages/ui/src/elements/PreviewSizes/index.tsx

@@ -95,7 +95,7 @@ export const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag,
       return null
     }
     if (doc.url) {
-      return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`
+      return `${doc.url}${imageCacheTag ? `?${encodeURIComponent(imageCacheTag)}` : ''}`
     }
   }
   useEffect(() => {

packages/ui/src/elements/Thumbnail/index.tsx

@@ -50,7 +50,7 @@ export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
    */
   if (fileSrc) {
     const queryChar = fileSrc?.includes('?') ? '&' : '?'
-    src = imageCacheTag ? `${fileSrc}${queryChar}${imageCacheTag}` : fileSrc
+    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc
   }
 
   return (
@@ -100,7 +100,7 @@ export function ThumbnailComponent(props: ThumbnailComponentProps) {
    */
   if (fileSrc) {
     const queryChar = fileSrc?.includes('?') ? '&' : '?'
-    src = imageCacheTag ? `${fileSrc}${queryChar}${imageCacheTag}` : fileSrc
+    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc
   }
 
   return (

test/uploads/e2e.spec.ts

@@ -22,20 +22,20 @@ import { RESTClient } from '../helpers/rest.js'
 import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import {
   adminThumbnailFunctionSlug,
-  adminThumbnailWithSearchQueries,
-  mediaWithoutCacheTagsSlug,
   adminThumbnailSizeSlug,
+  adminThumbnailWithSearchQueries,
   animatedTypeMedia,
   audioSlug,
   customFileNameMediaSlug,
+  customUploadFieldSlug,
   focalOnlySlug,
   mediaSlug,
+  mediaWithoutCacheTagsSlug,
   relationPreviewSlug,
   relationSlug,
   withMetadataSlug,
   withOnlyJPEGMetadataSlug,
   withoutMetadataSlug,
-  customUploadFieldSlug,
 } from './shared.js'
 import { startMockCorsServer } from './startMockCorsServer.js'
 const filename = fileURLToPath(import.meta.url)
@@ -500,9 +500,9 @@ describe('Uploads', () => {
     /**
      * Regex matcher for date cache tags.
      *
-     * @example it will match `?2022-01-01T00:00:00.000Z`
+     * @example it will match `?2022-01-01T00%3A00%3A00.000Z` (`?2022-01-01T00:00:00.000Z` encoded)
      */
-    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/
+    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}%3A\d{2}%3A\d{2}\.\d{3}Z/
 
     expect(src).not.toMatch(cacheTagPattern)
   })
@@ -530,9 +530,9 @@ describe('Uploads', () => {
     /**
      * Regex matcher for date cache tags.
      *
-     * @example it will match `?2022-01-01T00:00:00.000Z`
+     * @example it will match `?2022-01-01T00%3A00%3A00.000Z` (`?2022-01-01T00:00:00.000Z` encoded)
      */
-    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/
+    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}%3A\d{2}%3A\d{2}\.\d{3}Z/
 
     expect(src).toMatch(cacheTagPattern)
   })
@@ -857,7 +857,7 @@ describe('Uploads', () => {
   })
 
   describe('remote url fetching', () => {
-    beforeAll(async () => {
+    beforeAll(() => {
       mockCorsServer = startMockCorsServer()
     })