fix(alt-text): respect update access in the admin UI (#161)

Author: jhb-dev

alt-text/CHANGELOG.md

@@ -5,6 +5,7 @@
 - fix: enforce collection access control in the generate and bulk-generate endpoints by running the Local API reads and writes under the requesting user (`overrideAccess: false`)
 - fix: filter the alt text health report (endpoint and dashboard widget) to the collections the requesting user may read, so the aggregate no longer discloses counts and document IDs for collections their role cannot access
 - feat: `healthCheck` now accepts an access function that gates the health endpoint and hides the dashboard widget, letting the collection-wide report be restricted (e.g. to admins) separately from the generate endpoints
+- fix: respect update access in the admin UI — render the alt text field read-only and hide the single-document and bulk generate buttons for users without update access
 
 ## 0.7.0
 

alt-text/dev/src/collections/Media.ts

@@ -9,6 +9,11 @@ export const Media: CollectionConfig = {
   upload: {
     mimeTypes: ['image/*', 'video/*'],
   },
+  access: {
+    // change the email in the next line to test if the 'generate alt text' buttons are correctly hidden
+    // and the alt text field is readonly
+    update: ({ req }) => req.user?.email === 'dev@payloadcms.com',
+  },
   fields: [
     // The plugin will automatically inject context, alt, and keywords fields
 

alt-text/src/components/AltTextField.tsx

@@ -8,7 +8,7 @@ import { matchesMimeType } from '../utilities/mimeTypes.js'
 import { GenerateAltTextButton } from './GenerateAltTextButton.js'
 
 export const AltTextField = (clientProps: TextareaFieldClientProps) => {
-  const { field, path } = clientProps
+  const { field, path, readOnly } = clientProps
 
   const supportedMimeTypes = field.admin?.custom?.supportedMimeTypes as string[] | undefined
   const trackedMimeTypes = field.admin?.custom?.trackedMimeTypes as string[] | undefined
@@ -41,9 +41,12 @@ export const AltTextField = (clientProps: TextareaFieldClientProps) => {
 
       <div className="field-type__wrap">
         <TextareaInput
-          AfterInput={<GenerateAltTextButton supportedMimeTypes={supportedMimeTypes} />}
+          AfterInput={
+            readOnly ? undefined : <GenerateAltTextButton supportedMimeTypes={supportedMimeTypes} />
+          }
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}
           path={path}
+          readOnly={readOnly}
           required={required}
           value={value}
         />

alt-text/src/components/BulkGenerateAltTextsButton.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, toast, useConfig, useSelection, useTranslation } from '@payloadcms/ui'
+import { Button, toast, useAuth, useConfig, useSelection, useTranslation } from '@payloadcms/ui'
 import { useRouter } from 'next/navigation.js'
 import { useTransition } from 'react'
 
@@ -15,7 +15,10 @@ import { Spinner } from './icons/Spinner.js'
 export function BulkGenerateAltTextsButton({ collectionSlug }: { collectionSlug: string }) {
   const { t } = useTranslation<PluginAltTextTranslations, PluginAltTextTranslationKeys>()
   const [isPending, startTransition] = useTransition()
+  const { permissions } = useAuth()
   const { selected, setSelection } = useSelection()
+
+  const canUpdateCollection = Boolean(permissions?.collections?.[collectionSlug]?.update)
   const {
     config: {
       routes: { api: apiRoute },
@@ -97,6 +100,7 @@ export function BulkGenerateAltTextsButton({ collectionSlug }: { collectionSlug:
   }
 
   return (
+    canUpdateCollection &&
     selectedIds.length > 0 && (
       <div className="m-0" style={{ display: 'flex', justifyContent: 'right' }}>
         <Button

alt-text/src/components/GenerateAltTextButton.tsx

@@ -21,7 +21,7 @@ import { Spinner } from './icons/Spinner.js'
 
 export function GenerateAltTextButton({ supportedMimeTypes }: { supportedMimeTypes?: string[] }) {
   const { t } = useTranslation<PluginAltTextTranslations, PluginAltTextTranslationKeys>()
-  const { id, collectionSlug } = useDocumentInfo()
+  const { id, collectionSlug, docPermissions } = useDocumentInfo()
   const locale = useLocale()
   const [isPending, startTransition] = useTransition()
   const {
@@ -38,6 +38,12 @@ export function GenerateAltTextButton({ supportedMimeTypes }: { supportedMimeTyp
   const isUnsupportedMimeType =
     !!mimeType && !!supportedMimeTypes && !supportedMimeTypes.includes(mimeType)
 
+  // Hide the generate button from users who cannot update the document — the
+  // generated alt text would not be persistable by them anyway.
+  if (!docPermissions?.update) {
+    return null
+  }
+
   const handleGenerateAltText = () => {
     if (!collectionSlug || !id) {
       toast.error(t('@jhb.software/payload-alt-text-plugin:cannotGenerateMissingFields'))