api-platform / admin

A beautiful and fully-featured administration interface builder for hypermedia APIs
https://api-platform.com/docs/admin/
MIT License
481 stars 130 forks source link

Override Code isn't executable #573

Closed fzaninotto closed 1 month ago

fzaninotto commented 1 month ago

API Platform version(s) affected: 4.0.0

Description

Guesser components paste the override code in the console. For instance, the ListGuesser pastes the following:

If you want to override at least one field, paste this content in the <ListGuesser> component of your resource:

const BookList = () => (
    <ListGuesser>
        <FieldGuesser source="isbn" />
        <FieldGuesser source="title" />
        <FieldGuesser source="description" />
        <FieldGuesser source="author" />
        <FieldGuesser source="publicationDate" />
        <FieldGuesser source="reviews" />
    </ListGuesser>
);

And don't forget update your <ResourceGuesser> component:
<ResourceGuesser name="books" list={BookList} />

This is not enough because the code is missing imports and exports, and also because "paste this content in the component of your resource" isn't straightforward.

Also, the overrideCode is displayed twice (not sure why).

image

How to reproduce

Open the book list page in the API Platform distribution

Possible Solution

A better dump would be:

If you want to override at least one field, create a BookList component with this content:

import { ListGuesser, FieldGuesser } from "@api-platform/admin";

export const BookList = () => (
    <ListGuesser>
        <FieldGuesser source="isbn" />
        <FieldGuesser source="title" />
        <FieldGuesser source="description" />
        <FieldGuesser source="author" />
        <FieldGuesser source="publicationDate" />
        <FieldGuesser source="reviews" />
    </ListGuesser>
);

Then, update your main admin component:

import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";
import { BookList } from './BookList';

const App = () => (
    <HydraAdmin entrypoint={...}>
        <ResourceGuesser name="books" list={BookList} />
        <ResourceGuesser name="reviews" />
   </HydraAdmin>
);

All guesser components should have better override code.