api-platform / admin

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

Compatibility with react-admin base components #490

Open julienV opened 1 year ago

julienV commented 1 year ago

API Platform version(s) affected: 3.4.3 (api platform admin version)

Description
I am having multiple issues when trying to use regular react-admin components. For example trying to use a 'TextField' in ListGuesser doesn't display anything. Worse, if i try to replace the ListGuesser with a regular List + Datagrid, I am getting error about useNavigate() needing a Router. If i encapsulate HydraAdmin with BrowserRouter, i am getting a 'theme' is null error instead... and on and on... I am just wondering if this is something i am doing wrong, or if it's just not ready at the moment ? I managed to get to login with jwt, but ran into numerous issues too despite using the code in the documentation. Basically, can't replace the login page either, running also in the router + theme issues...

How to reproduce
only modification from the base project, in the pwa/admin/index.tsx page

import Head from "next/head";
import { useEffect, useState } from "react";
import {FieldGuesser, ListGuesser, ResourceGuesser} from "@api-platform/admin";
import {TextField} from "react-admin";

const GreetingList = props => (
  <ListGuesser {...props}>
    <FieldGuesser source={"name"} />
    <TextField source={"name"} />
  </ListGuesser>
);

const Admin = () => {
  // Load the admin client-side
  const [DynamicAdmin, setDynamicAdmin] = useState(<p>Loading...</p>);
  useEffect(() => {
    (async () => {
      const HydraAdmin = (await import("@api-platform/admin")).HydraAdmin;

      setDynamicAdmin(<HydraAdmin entrypoint={window.origin}>
        <ResourceGuesser name={"greetings"} list={GreetingList} />
      </HydraAdmin>);
    })();
  }, []);

  return (
    <>
      <Head>
        <title>API Platform Admin</title>
      </Head>

      {DynamicAdmin}
    </>
  );
};
export default Admin;

Possible Solution

Additional Context

akserikawa commented 1 year ago

Having the same issues. Apparently you have to use a dynamic import for the ListGuesser and all sub-components inside the aync await function on useEffect. You cannot pass them from outside :/