fix(ui): properly handles ID field component type based on payload.db.defaultIDType (#7416)

## Description

Fixes #7354 

Since the `defaultIDType` for IDs in `postgres` are of type `number` -
the `contains` operator should be available in the filter options.

This PR checks the `defaultIDType` of ID and properly outputs the
correct component type for IDs

I.e if ID is of type `number` - the filter operators for ID should
correspond to the the operators of type number as well

The `contains` operator only belongs on fields of type string, aka of
component type `text`

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] Existing test suite passes locally with my changes

packages/payload/src/admin/RichText.ts

@@ -6,7 +6,7 @@ import type { SanitizedCollectionConfig, TypeWithID } from '../collections/confi
 import type { SanitizedConfig } from '../config/types.js'
 import type { Field, FieldAffectingData, RichTextField, Validate } from '../fields/config/types.js'
 import type { SanitizedGlobalConfig } from '../globals/config/types.js'
-import type { JsonObject, PayloadRequest, RequestContext } from '../types/index.js'
+import type { JsonObject, Payload, PayloadRequest, RequestContext } from '../types/index.js'
 import type { WithServerSidePropsComponentProps } from './elements/WithServerSideProps.js'
 
 export type RichTextFieldProps<Value extends object, AdapterProps, ExtraFieldProperties = {}> = {
@@ -189,6 +189,7 @@ type RichTextAdapterBase<
     WithServerSideProps: React.FC<Omit<WithServerSidePropsComponentProps, 'serverOnlyProps'>>
     config: SanitizedConfig
     i18n: I18nClient
+    payload: Payload
     schemaPath: string
   }) => Map<string, React.ReactNode>
   generateSchemaMap?: (args: {

packages/richtext-lexical/src/features/typesServer.ts

@@ -11,6 +11,7 @@ import type {
 import type {
   Field,
   JsonObject,
+  Payload,
   PayloadRequest,
   ReplaceAny,
   RequestContext,
@@ -283,6 +284,7 @@ export type ServerFeature<ServerProps, ClientFeatureProps> = {
   generateComponentMap?: (args: {
     config: SanitizedConfig
     i18n: I18nClient
+    payload: Payload
     props: ServerProps
     schemaPath: string
   }) => {

packages/richtext-lexical/src/utilities/generateComponentMap.tsx

@@ -10,7 +10,7 @@ export const getGenerateComponentMap =
   (args: {
     resolvedFeatureMap: ResolvedServerFeatureMap
   }): RichTextAdapter['generateComponentMap'] =>
-  ({ WithServerSideProps, config, i18n, schemaPath }) => {
+  ({ WithServerSideProps, config, i18n, payload, schemaPath }) => {
     const componentMap = new Map()
 
     // turn args.resolvedFeatureMap into an array of [key, value] pairs, ordered by value.order, lowest order first:
@@ -35,6 +35,7 @@ export const getGenerateComponentMap =
             const components = resolvedFeature.generateComponentMap({
               config,
               i18n,
+              payload,
               props: resolvedFeature.sanitizedServerFeatureProps,
               schemaPath,
             })
@@ -80,6 +81,7 @@ export const getGenerateComponentMap =
                   fieldSchema: fields,
                   i18n,
                   parentPath: `${schemaPath}.lexical_internal_feature.${featureKey}.fields.${schemaKey}`,
+                  payload,
                   readOnly: false,
                 })
 

packages/richtext-slate/src/generateComponentMap.tsx

@@ -12,7 +12,7 @@ import { defaultLeaves as leafTypes } from './field/leaves/index.js'
 
 export const getGenerateComponentMap =
   (args: AdapterArguments): RichTextAdapter['generateComponentMap'] =>
-  ({ WithServerSideProps, config, i18n }) => {
+  ({ WithServerSideProps, config, i18n, payload }) => {
     const componentMap = new Map()
 
     ;(args?.admin?.leaves || Object.values(leafTypes)).forEach((leaf) => {
@@ -67,6 +67,7 @@ export const getGenerateComponentMap =
               config,
               fieldSchema: args.admin?.link?.fields as Field[],
               i18n,
+              payload,
               readOnly: false,
             })
 
@@ -93,6 +94,7 @@ export const getGenerateComponentMap =
                   config,
                   fieldSchema: args?.admin?.upload?.collections[collection.slug]?.fields,
                   i18n,
+                  payload,
                   readOnly: false,
                 })
 

packages/ui/src/providers/ComponentMap/buildComponentMap/collections.tsx

@@ -2,6 +2,7 @@ import type { I18nClient } from '@payloadcms/translations'
 import type {
   AdminViewProps,
   EditViewProps,
+  Payload,
   SanitizedCollectionConfig,
   SanitizedConfig,
 } from 'payload'
@@ -26,6 +27,7 @@ export const mapCollections = (args: {
   collections: SanitizedCollectionConfig[]
   config: SanitizedConfig
   i18n: I18nClient
+  payload: Payload
   readOnly?: boolean
 }): {
   [key: SanitizedCollectionConfig['slug']]: CollectionComponentMap
@@ -38,6 +40,7 @@ export const mapCollections = (args: {
     config,
     i18n,
     i18n: { t },
+    payload,
     readOnly: readOnlyOverride,
   } = args
 
@@ -189,6 +192,7 @@ export const mapCollections = (args: {
         config,
         fieldSchema: fields,
         i18n,
+        payload,
         readOnly: readOnlyOverride,
       }),
       isPreviewEnabled: !!collectionConfig?.admin?.preview,

packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx

@@ -22,6 +22,7 @@ import type {
   MappedTab,
   NumberFieldProps,
   Option,
+  Payload,
   PointFieldProps,
   RadioFieldProps,
   ReducedBlock,
@@ -67,6 +68,7 @@ export const mapFields = (args: {
   filter?: (field: Field) => boolean
   i18n: I18nClient
   parentPath?: string
+  payload: Payload
   readOnly?: boolean
 }): FieldMap => {
   const {
@@ -78,6 +80,7 @@ export const mapFields = (args: {
     i18n,
     i18n: { t },
     parentPath,
+    payload,
     readOnly: readOnlyOverride,
   } = args
 
@@ -193,6 +196,7 @@ export const mapFields = (args: {
                 filter,
                 i18n,
                 parentPath: path,
+                payload,
                 readOnly: readOnlyOverride,
               }),
               isSortable: field.admin?.isSortable,
@@ -217,6 +221,7 @@ export const mapFields = (args: {
                 filter,
                 i18n,
                 parentPath: `${path}.${block.slug}`,
+                payload,
                 readOnly: readOnlyOverride,
               })
 
@@ -303,6 +308,7 @@ export const mapFields = (args: {
                 filter,
                 i18n,
                 parentPath: path,
+                payload,
                 readOnly: readOnlyOverride,
               }),
               initCollapsed: field.admin?.initCollapsed,
@@ -364,6 +370,7 @@ export const mapFields = (args: {
                 filter,
                 i18n,
                 parentPath: path,
+                payload,
                 readOnly: readOnlyOverride,
               }),
               hideGutter: field.admin?.hideGutter,
@@ -494,6 +501,7 @@ export const mapFields = (args: {
                 WithServerSideProps,
                 config,
                 i18n,
+                payload,
                 schemaPath: path,
               })
 
@@ -526,6 +534,7 @@ export const mapFields = (args: {
                 filter,
                 i18n,
                 parentPath: path,
+                payload,
                 readOnly: readOnlyOverride,
               }),
               readOnly: field.admin?.readOnly,
@@ -548,6 +557,7 @@ export const mapFields = (args: {
                 filter,
                 i18n,
                 parentPath: path,
+                payload,
                 readOnly: readOnlyOverride,
               })
 
@@ -835,7 +845,7 @@ export const mapFields = (args: {
     // TODO: For all fields (not just this one) we need to add the name to both .fieldComponentPropsBase.name AND .name. This can probably be improved
     result.push({
       name: 'id',
-      type: 'text',
+      type: payload.db.defaultIDType === 'number' ? 'number' : 'text',
       CustomField: null,
       cellComponentProps: {
         name: 'id',

packages/ui/src/providers/ComponentMap/buildComponentMap/globals.tsx

@@ -1,5 +1,5 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { EditViewProps, SanitizedConfig, SanitizedGlobalConfig } from 'payload'
+import type { EditViewProps, Payload, SanitizedConfig, SanitizedGlobalConfig } from 'payload'
 
 import { isReactComponentOrFunction } from 'payload/shared'
 import React from 'react'
@@ -23,6 +23,7 @@ export const mapGlobals = ({
     config: SanitizedConfig
     globals: SanitizedGlobalConfig[]
     i18n: I18nClient
+    payload: Payload
     readOnly?: boolean
   }
 }): {
@@ -35,6 +36,7 @@ export const mapGlobals = ({
     globals,
     i18n,
     i18n: { t },
+    payload,
     readOnly: readOnlyOverride,
   } = args
 
@@ -122,6 +124,7 @@ export const mapGlobals = ({
         config,
         fieldSchema: fields,
         i18n,
+        payload,
         readOnly: readOnlyOverride,
       }),
       isPreviewEnabled: !!globalConfig?.admin?.preview,

packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx

@@ -52,6 +52,7 @@ export const buildComponentMap = (args: {
     collections: config.collections,
     config,
     i18n,
+    payload,
     readOnly,
   })
 
@@ -62,6 +63,7 @@ export const buildComponentMap = (args: {
       config,
       globals: config.globals,
       i18n,
+      payload,
       readOnly,
     },
   })