Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Override Code isn't executable #573

Closed
fzaninotto opened this issue Jul 25, 2024 · 0 comments · Fixed by #577
Closed

Override Code isn't executable #573

fzaninotto opened this issue Jul 25, 2024 · 0 comments · Fixed by #577
Assignees

Comments

@fzaninotto
Copy link
Contributor

fzaninotto commented Jul 25, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant