Make initial admin customization easier #2745
Description
Description
When developers want to customize the admin, it's not super straightforward because the admin is in a dynamic import:
api-platform/pwa/pages/admin/index.tsx
Lines 7 to 13 in c5240c2
In order to customize the admin, the developer has to extract this into another component, then start cusomizing the component.
A better solution would be to extract the admin app by default:
// in pwa/pages/admin/index.tsx
import Head from "next/head";
import { useEffect, useState } from "react";
import styles from "./admin.module.css";
const Admin = () => {
// Load the admin client-side
const [DynamicAdmin, setDynamicAdmin] = useState(<p>Loading...</p>);
useEffect(() => {
(async () => {
const App = (await import("../../components/admin/App")).App;
setDynamicAdmin(<App />);
})();
}, []);
return (
<div className={styles.admin}>
<Head>
<title>API Platform Admin</title>
</Head>
{DynamicAdmin}
</div>
);
};
export default Admin;and provide a ready-to-customize App component without lazy loading:
// in pwa/components/admin/App.tsx
import { HydraAdmin } from "@api-platform/admin";
export const App = () => <HydraAdmin entrypoint={window.origin}></HydraAdmin>;