fix(ui): apiKey field not being customisable and field access control not being updated with correct data (#7591)

You can now override the apiKey field with access control by adding this
field to your auth collection:

```ts
{
  name: 'apiKey',
  type: 'text',
  access: {
    update: ({ req }) => req.user.role === 'admin',
  }
}
```

Translated labels are now also supported.

Note that `siblingData` isn't working still in FieldAccess control and
`data` only works in non-dynamic fields, eg. fields not in an array or
block for now.

Author: paulpopus

packages/next/src/views/Edit/Default/Auth/APIKey.tsx

@@ -1,11 +1,15 @@
 'use client'
-import type { PayloadRequest } from 'payload'
+import type { FieldMap, PayloadRequest } from 'payload'
 
+import { getTranslation } from '@payloadcms/translations'
 import {
   CopyToClipboard,
+  FieldDescription,
   FieldLabel,
   GenerateConfirmation,
+  useComponentMap,
   useConfig,
+  useDocumentInfo,
   useField,
   useFormFields,
   useTranslation,
@@ -18,16 +22,24 @@ const path = 'apiKey'
 const baseClass = 'api-key'
 const fieldBaseClass = 'field-type'
 
-export const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({
+export const APIKey: React.FC<{ readonly enabled: boolean; readonly readOnly?: boolean }> = ({
   enabled,
   readOnly,
 }) => {
   const [initialAPIKey] = useState(uuidv4())
   const [highlightedField, setHighlightedField] = useState(false)
-  const { t } = useTranslation()
+  const { i18n, t } = useTranslation()
   const config = useConfig()
-
   const apiKey = useFormFields(([fields]) => (fields && fields[path]) || null)
+  const { collectionSlug, docPermissions } = useDocumentInfo()
+
+  const { getFieldMap } = useComponentMap()
+
+  const fieldMap: FieldMap = getFieldMap({
+    collectionSlug,
+  })
+
+  const apiKeyField = fieldMap.find((field) => 'name' in field && field.name === 'apiKey')
 
   const validate = (val) =>
     text(val, {
@@ -48,15 +60,30 @@ export const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({
 
   const apiKeyValue = apiKey?.value
 
-  const APIKeyLabel = useMemo(
-    () => (
+  const apiKeyLabel = useMemo(() => {
+    let label: Record<string, string> | string = 'API Key'
+
+    if (apiKeyField && apiKeyField.fieldComponentProps.label) {
+      label = apiKeyField.fieldComponentProps.label
+    }
+
+    return getTranslation(label, i18n)
+  }, [apiKeyField, i18n])
+
+  const APIKeyLabelComponent = useMemo(() => {
+    return (
       <div className={`${baseClass}__label`}>
-        <span>API Key</span>
+        <span>{apiKeyLabel}</span>
         <CopyToClipboard value={apiKeyValue as string} />
       </div>
-    ),
-    [apiKeyValue],
-  )
+    )
+  }, [apiKeyLabel, apiKeyValue])
+
+  const canUpdateAPIKey = useMemo(() => {
+    if (docPermissions && docPermissions?.fields?.apiKey) {
+      return docPermissions.fields.apiKey.update.permission
+    }
+  }, [docPermissions])
 
   const fieldType = useField({
     path: 'apiKey',
@@ -98,9 +125,9 @@ export const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({
   return (
     <React.Fragment>
       <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>
-        <FieldLabel CustomLabel={APIKeyLabel} htmlFor={path} />
+        <FieldLabel CustomLabel={APIKeyLabelComponent} htmlFor={path} />
         <input
-          aria-label="API Key"
+          aria-label={apiKeyLabel}
           className={highlightedField ? 'highlight' : undefined}
           disabled
           id="apiKey"
@@ -109,7 +136,7 @@ export const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({
           value={(value as string) || ''}
         />
       </div>
-      {!readOnly && (
+      {!readOnly && canUpdateAPIKey && (
         <GenerateConfirmation highlightField={highlightField} setKey={() => setValue(uuidv4())} />
       )}
     </React.Fragment>

packages/ui/src/providers/DocumentInfo/index.tsx

@@ -276,25 +276,27 @@ const DocumentInfo: React.FC<
 
         if (docAccessURL) {
           const res = await fetch(`${serverURL}${api}${docAccessURL}?${qs.stringify(params)}`, {
+            body: JSON.stringify(data),
             credentials: 'include',
             headers: {
               'Accept-Language': i18n.language,
+              'Content-Type': 'application/json',
             },
+            method: 'post',
           })
 
           const json: DocumentPermissions = await res.json()
           const publishedAccessJSON = await fetch(
             `${serverURL}${api}${docAccessURL}?${qs.stringify(params)}`,
             {
               body: JSON.stringify({
-                data: {
-                  ...(data || {}),
-                  _status: 'published',
-                },
+                ...(data || {}),
+                _status: 'published',
               }),
               credentials: 'include',
               headers: {
                 'Accept-Language': i18n.language,
+                'Content-Type': 'application/json',
               },
               method: 'POST',
             },