Better locale handling in the collection overview

[yobottehg]

We have a project with 3 languages.
Not all pages are translated in all languages.
The creation language is not the same in all content entries and also not the same as the fallback language.

This yields strange situations where a lot of entires in the "pages" collection overview page yield the term "no title":

I know that the locale selector at the top only set the users preferred language.
My authors translate this to their knowledge of other CMSs and understand this differently as a filter like on the website frontend.

They are confused with these entries and I don't see a way how to help them easily.

What the authors can do is to apply a filter on the page with "title" > "exists" > "true" which will hide the untranslated items.

However they should not do this all the time.

There is no hook to hide items in the collection overview based on the locale and going the "access control route" does not seem correct.

I found a way using the beforeOperationHook which replicates settings this filter internally with abusing the bouncerPattern a lot but this is error prone and ugly.

I think something like this should be achievable easily and is also not so complicated. On the other hand I'm unsure if my case here is so special and no one wants / needs this?

Here my current hack if someone wants / needs this.

import type {
  CollectionBeforeOperationHook,
  PayloadRequest,
  SanitizedCollectionConfig,
} from 'payload'

const isEmpty = (obj: object) => {
  for (const prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
      return false
    }
  }

  return true
}

const collectionTitleIsLocalized = (
  collection: SanitizedCollectionConfig,
  titleField: string,
): boolean => {
  let result = false
  collection.fields.forEach((field) => {
    // special case for fields in tabs
    if (field.type === 'tabs') {
      field.tabs.forEach((tab) => {
        tab.fields.forEach((tabField) => {
          if (tabField.name !== titleField) return
          if (!Object.prototype.hasOwnProperty.call(tabField, 'localized')) return
          result = !!tabField?.localized
        })
      })
    }

    if (field.name !== titleField) return
    if (!Object.prototype.hasOwnProperty.call(field, 'localized')) return
    result = !!field?.localized
  })
  return result
}

const argsIsValidAndIsEmpty = (args: any): boolean => {
  if (!args) return false
  if (typeof args !== 'object') return false
  if (!Object.hasOwn(args as object, 'where')) return false
  if (typeof args.where !== 'object') return false
  if (!isEmpty(args.where)) return false

  return true
}

const requestIsBackofficeCollectionListingView = (req: PayloadRequest): boolean => {
  if (!req?.user) return false
  if (Object.prototype.hasOwnProperty.call(req.context, 'seed')) return false
  if (Object.prototype.hasOwnProperty.call(req.context, 'internal')) return false
  if (req?.url?.includes('/api/graphql')) return false

  return true
}

// This hook filters out items that do not have a translation for the title field
export const filterOutItemsWithoutTranslation: CollectionBeforeOperationHook = ({
  args,
  collection,
  operation,
  req,
}) => {
  // Make this hook resilient to only interfere with the Backend
  // And there also only in certain situations
  if (!argsIsValidAndIsEmpty(args)) return args as unknown
  if (operation !== 'read') return args as unknown
  if (!requestIsBackofficeCollectionListingView(req)) return args as unknown

  const titleField = collection?.admin?.useAsTitle

  if (!titleField) return args as unknown
  if (!collectionTitleIsLocalized(collection, titleField)) return args as unknown

  // This mimics the internal filter of the UI
  const titleFieldObject = {}
  titleFieldObject[titleField] = { exists: true }
  args.where = {
    or: [
      {
        and: [titleFieldObject],
      },
    ],
  }

  return args as unknown
}