fix: unable to load documents with non-standard ids (#9407)

### What?
Non-standard ids caused an issue when finding the document on the
server.

This is an odd regression, in 2.0 we were fetching the document on the
client so the request would handle decoding the url. Now we are fetching
the document on the server and need to do this manually when reading id
from route params.

### Why?
The slug pulled out of the url for an id of `id 1` would equate to
`id%201` which would fail in the `payload.find` call since there is not
an id stored as `id%201` but instead `id 1`.

### How?
Wherever we are calling payload.find in the views and querying by `id`
it gets ran through a helper function that decodes it properly.

Fixes #9373

test/fields/collections/CustomID/index.ts

@@ -0,0 +1,14 @@
+import type { CollectionConfig } from 'payload'
+
+import { customIdSlug } from '../../slugs.js'
+
+export const CustomIdCollection: CollectionConfig = {
+  slug: customIdSlug,
+  versions: true,
+  fields: [
+    {
+      name: 'id',
+      type: 'text',
+    },
+  ],
+}

test/fields/config.ts

@@ -12,6 +12,7 @@ import CheckboxFields from './collections/Checkbox/index.js'
 import CodeFields from './collections/Code/index.js'
 import CollapsibleFields from './collections/Collapsible/index.js'
 import ConditionalLogic from './collections/ConditionalLogic/index.js'
+import { CustomIdCollection } from './collections/CustomID/index.js'
 import DateFields from './collections/Date/index.js'
 import EmailFields from './collections/Email/index.js'
 import GroupFields from './collections/Group/index.js'
@@ -68,6 +69,7 @@ export const collectionSlugs: CollectionConfig[] = [
   CodeFields,
   CollapsibleFields,
   ConditionalLogic,
+  CustomIdCollection,
   DateFields,
   EmailFields,
   RadioFields,

test/fields/e2e.spec.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -19,6 +20,7 @@ import {
   arrayFieldsSlug,
   blockFieldsSlug,
   collapsibleFieldsSlug,
+  customIdSlug,
   tabsFields2Slug,
   tabsFieldsSlug,
 } from './slugs.js'
@@ -588,4 +590,31 @@ describe('fields', () => {
       })
     })
   })
+
+  describe('id', () => {
+    let url: AdminUrlUtil
+    beforeAll(() => {
+      url = new AdminUrlUtil(serverURL, customIdSlug)
+    })
+
+    function createCustomIDDoc(id: string) {
+      return payload.create({
+        collection: customIdSlug,
+        data: {
+          id,
+        },
+      })
+    }
+
+    test('allow create of non standard ID', async () => {
+      await createCustomIDDoc('id 1')
+      await page.goto(url.list)
+
+      await navigateToDoc(page, url)
+
+      // Page should load and ID should be correct
+      await expect(page.locator('#field-id')).toHaveValue('id 1')
+      await expect(page.locator('.id-label')).toContainText('id 1')
+    })
+  })
 })

test/fields/payload-types.ts

@@ -39,6 +39,7 @@ export interface Config {
     'code-fields': CodeField;
     'collapsible-fields': CollapsibleField;
     'conditional-logic': ConditionalLogic;
+    'custom-id': CustomId;
     'date-fields': DateField;
     'email-fields': EmailField;
     'radio-fields': RadioField;
@@ -80,6 +81,7 @@ export interface Config {
     'code-fields': CodeFieldsSelect<false> | CodeFieldsSelect<true>;
     'collapsible-fields': CollapsibleFieldsSelect<false> | CollapsibleFieldsSelect<true>;
     'conditional-logic': ConditionalLogicSelect<false> | ConditionalLogicSelect<true>;
+    'custom-id': CustomIdSelect<false> | CustomIdSelect<true>;
     'date-fields': DateFieldsSelect<false> | DateFieldsSelect<true>;
     'email-fields': EmailFieldsSelect<false> | EmailFieldsSelect<true>;
     'radio-fields': RadioFieldsSelect<false> | RadioFieldsSelect<true>;
@@ -121,9 +123,9 @@ export interface Config {
   user: User & {
     collection: 'users';
   };
-  jobs: {
+  jobs?: {
     tasks: unknown;
-    workflows: unknown;
+    workflows?: unknown;
   };
 }
 export interface UserAuthOperations {
@@ -948,6 +950,15 @@ export interface ConditionalLogic {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-id".
+ */
+export interface CustomId {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "date-fields".
@@ -1796,6 +1807,10 @@ export interface PayloadLockedDocument {
         relationTo: 'conditional-logic';
         value: string | ConditionalLogic;
       } | null)
+    | ({
+        relationTo: 'custom-id';
+        value: string | CustomId;
+      } | null)
     | ({
         relationTo: 'date-fields';
         value: string | DateField;
@@ -2587,6 +2602,15 @@ export interface ConditionalLogicSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-id_select".
+ */
+export interface CustomIdSelect<T extends boolean = true> {
+  id?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "date-fields_select".

test/fields/slugs.ts

@@ -5,6 +5,7 @@ export const checkboxFieldsSlug = 'checkbox-fields'
 export const codeFieldsSlug = 'code-fields'
 export const collapsibleFieldsSlug = 'collapsible-fields'
 export const conditionalLogicSlug = 'conditional-logic'
+export const customIdSlug = 'custom-id'
 export const dateFieldsSlug = 'date-fields'
 export const emailFieldsSlug = 'email-fields'
 export const groupFieldsSlug = 'group-fields'