Using dependency injection for improved customizability of the admin panel

[joas8211]

I was thinking to do quite a lot of customization for Payload admin panel to get a feature working. If I understood correctly, the admin panel is quite customizable, but when going down the React component tree it becomes harder to replace one component to another, and extending a big component is not as easy at it could be.

Then I got an idea that could make admin panel customization easier if Payload had support for it. I've been creating a library to make dependency injection on frontend better. So now the idea is that Payload would be the perfect candidate for implementing it to allow customization and extensibility of admin panel.

The library enables to choose and swap parts (aka. components) of an application also within other parts. It uses factory pattern and a dependency container to resolve the application and TypeScript to preserve the type of a part between different implementations. A part can be of any type that TypeScript supports so React components are not a problem. So in practice Payload could export React components as "parts" that can be implemented and overridden by the application developer by adding them to the Payload config.

Let's look at a example situation where there is a CollectionHeader component that is a dependency for CollectionList component.

export const CollectionHeader = createPart(
  // Name of the part
  "CollectionHeader",
  // Dependencies
  [],
  // Init function receiving dependencies
  (): React.FC<CollectionHeaderProps> =>
    // Implementation
    ({ collection }) => {
      const { i18n } = useTranslation();
      return (
        <h1>
          {getTranslation(collection.labels.plural, i18n)}
        </h1>
      );
    },
);

export const CollectionList = createPart(
  // Name of the part
  "CollectionList",
  // Dependencies
  [CollectionHeader],
  // Init function receiving dependencies
  ([CollectionHeader]): React.FC<CollectionListProps> =>
    // Implementation
    ({ collection }) => {
      return (
        <div>
          <CollectionHeader collection={collection}>
          {/* ... rest of the collection list component ... */}
        </div>
      );
    },
);

Then application developer could extend CollectionHeader by implementing it and passing it to the Payload config.

const MyCollectionHeader = createPart(
  // Definition
  CollectionHeader,
  // Dependencies (original implementation for example)
  [CollectionHeader],
  // Init function receiving dependencies
  ([CollectionHeader]) =>
    // Implementation (type inferred from definition)
    ({ collection }) => {
      return (
        <div>Text before header</div>
        <CollectionHeader collection={collection} />
        <div>Text after header</div>
      );
    },
)

export default buildConfig({
  collections: [
    {
      slug: "myCollection",
      admin: {
        // This array is a container of parts to override / extend for this collection:
        parts: [MyCollectionHeader],
      },
      fields: [],
    }
  ],
})

The libary is not yet published but I will be more motivated to publish it and maybe help implement it to Payload if this idea gains traction and is well received by the maintainers and the community.