[no ci] wip: docs: revamp the customizing the admin doc

Author: slax57

admin/customizing.md

@@ -1,4 +1,56 @@
-# Customizing the Admin
+# Customizing the Guessers
+
+Using `<HydraAdmin>` or `<OpenApiAdmin>` directly is a great way to quickly get started with API Platform Admin. They will introspect your API's schema and automatically generate CRUD pages for all the resources it exposes. They will even [configure filtering, sorting, and real-time updates with Mercure](./schema-org.md) if your API supports it.
+
+For some this may be enough, but you will often find yourself wanting to customize the generated pages further. For instance, you may want to:
+
+- Hide or reorder resources in the menu
+- Hide or reorder columns in the list view
+- Hide or reorder fields in the show view
+- Hide or reorder inputs in the create and edit forms
+- Customize the generated list, e.g. add a default sort order
+- Customize the generated inputs, e.g. set a custom label or make a text input multiline
+
+Such changes can't be achieved by modifying the Schema, they require customizing the React components generated by API Platform Admin.
+
+Fortunately, API Platform Admin has you covered!
+
+## From `<AdminGuesser>` To `<ResourceGuesser>`
+
+If you are using `<HydraAdmin>` or `<OpenApiAdmin>` directly, there is a simple way to start customizing the generated pages.
+
+Simply open your browser's developer tools and look at the console. You will see messages like this:
+
+```
+If you want to override at least one resource, paste this content in the <AdminGuesser> component of your app:
+
+<ResourceGuesser name="books" />
+<ResourceGuesser name="greetings" />
+<ResourceGuesser name="reviews" />
+```
+
+This message tells you which resources are exposed by your API and how to customize the generated pages for each of them.
+
+Let's say we'd like to hide the `greetings` resource from the menu. We can do this by replacing the `<AdminGuesser>` component (`<HydraAdmin>` in our case) children with a list of `<ResourceGuesser>`:
+
+```diff
+-import { HydraAdmin } from "@api-platform/admin";
++import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";
+
+const App = () => (
+-   <HydraAdmin entrypoint={...} />
++   <HydraAdmin entrypoint={...}>
++       <ResourceGuesser name="books" />
++       <ResourceGuesser name="reviews" />
++   </HydraAdmin>
+);
+```
+
+Now the `greetings` resource will no longer be displayed in the menu.
+
+![Customized Admin menu](./images/admin-menu.png)
+
+## ...
 
 Customizing API Platform Admin is easy and idiomatic. The tool gives you the ability to customize everything, from the list of resource types that must be administrable to every single input or button.