Change image ref (#5582)

* update image ref to explicitly include field type

* update iamge field copy and paste button txt

* changesets

* fix test

* Update .changeset/violet-starfishes-punch.md

* omit path separators

* Update .changeset/thirty-bobcats-change.md

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>

.changeset/thirty-bobcats-change.md

@@ -0,0 +1,6 @@
+---
+'@keystone-next/fields': major
+'@keystone-next/keystone': major
+---
+
+Changed image ref to now be `${mode}:image:${id}`.

.changeset/violet-starfishes-punch.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/utils-legacy': major
+---
+
+Updated parseImageRef and getRef to accept a different signature for the image ref.

packages-next/fields/src/types/image/tests/test-fixtures.ts

@@ -85,7 +85,7 @@ export const crudTests = (keystoneTestWrapper: any) => {
           });
           expect(data).not.toBe(null);
           expect(data.avatar).toEqual({
-            ref: `local:${data.avatar.id}.jpg`,
+            ref: `local:image:${data.avatar.id}.jpg`,
             src: `/images/${data.avatar.id}.jpg`,
             id: data.avatar.id,
             __typename: 'LocalImageFieldOutput',

packages-next/fields/src/types/image/views/Field.tsx

@@ -225,7 +225,7 @@ function ImgView({
                   </a>
                 </Text>
                 <Button size="small" tone="passive" onClick={copyRef}>
-                  Copy
+                  Copy Ref
                 </Button>
               </Stack>
               <Text size="xsmall">{`${value.data.width} x ${value.data.height} (${bytes(
@@ -254,7 +254,7 @@ function ImgView({
                   });
                 }}
               >
-                Paste
+                Paste Ref
               </Button>
             ) : null}
             {value.kind === 'from-server' && (

packages/utils/src/index.ts

@@ -258,11 +258,11 @@ export const humanize = (str: string) => {
     .join(' ');
 };
 
-const IMAGEREGEX = /^(local):([^:\n]+)\.(gif|jpg|png|webp)$/;
+const IMAGEREGEX = /^(local):image:([^\\\/:\n]+)\.(gif|jpg|png|webp)$/;
 const FILEREGEX = /^(local):file:([^\\\/:\n]+)/;
 
 export const getImageRef = (mode: ImageMode, id: string, extension: ImageExtension) =>
-  `${mode}:${id}.${extension}`;
+  `${mode}:image:${id}.${extension}`;
 
 export const getFileRef = (mode: FileMode, name: string) => `${mode}:file:${name}`;
 export const parseFileRef = (ref: string) => {