Repository: api-platform/admin
Pull request #537 (2024-03-06 23:11:38)

chore: simplify migration
| Q             | A
| ------------- | ---
| Branch?       | main
| Tickets       | Closes #534 
| License       | MIT
| Doc PR        | n/a


Patch:
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c5f7042..76e1896 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -22,39 +22,44 @@ Then, if it appears that it's a real bug, you may report it using GitHub by foll
 
 ### Writing a Pull Request
 
-Please base your changes on the `master` branch.
+Please base your changes on the `main` branch.
 
 ### Installing the Source Version
 
 To install the source version of API Platform Admin in your project and contribute a patch, follow the instructions below.
 
-Create your client that will use `api-platform-admin` (replace `<yourproject>` by your project's name):
+Create your client that will use `@api-platform/admin` (replace `<yourproject>` by your project's name):
 
-```shell
-yarn create react-app <yourproject>
+```console
+yarn create vite <yourproject> --template react-ts
 cd <yourproject>
 yarn add @api-platform/admin
 ```
 
-Replace `src/App.js` by this one:
+Replace `src/App.tsx` by this one:
 
-```javascript
-import React from 'react';
+```typescript
 import { HydraAdmin } from '@api-platform/admin';
 
-export default () => <HydraAdmin entrypoint="https://demo.api-platform.com" />; // Replace with your own API entrypoint
+function App() {
+  return (
+    <HydraAdmin entrypoint="https://demo.api-platform.com" />
+  )
+}
+
+export default App
 ```
 
 Install your own version of `@api-platform/admin`:
 
-```shell
+```console
 cd ..
 git clone https://github.com/api-platform/admin.git
 ```
 
 Link it:
 
-```shell
+```console
 cd admin
 yarn link
 cd ../<yourproject>
@@ -63,17 +68,17 @@ yarn link "@api-platform/admin"
 
 Use the React version of your project to build `@api-platform/admin`:
 
-```shell
+```console
 cd node_modules/react/
 yarn link
 cd ../../../admin
 yarn link react
 ```
 
-Start your `api-platform-admin` version:
+Build continuously your `@api-platform/admin` version:
 
-```shell
-yarn install
+```console
+yarn install --force
 yarn watch
 ```
 
@@ -81,18 +86,26 @@ Open a new terminal console with the same path.
 
 Start your client:
 
-```shell
+```console
 cd ../<yourproject>/
-yarn start
+yarn install --force
+yarn dev --force
 ```
 
 You can now hack in the cloned repository of `api-platform-admin`.
 
+Each time you change your code, you must restart vite with `--force` option [for your changes to be taken into account](https://vitejs.dev/guide/troubleshooting.html#outdated-pre-bundled-deps-when-linking-to-a-local-package
+):
+
+```console
+yarn dev --force
+```
+
 ### Testing Your Changes
 
 Before sending a Pull Request, make sure the tests pass correctly:
 
-```shell
+```console
 yarn test
 ```
 
diff --git a/src/AdminGuesser.tsx b/src/AdminGuesser.tsx
index c92ca6c..5c335fc 100644
--- a/src/AdminGuesser.tsx
+++ b/src/AdminGuesser.tsx
@@ -1,15 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Admin,
+  AdminContext,
+  AdminUI,
   ComponentPropType,
-  I18nContextProvider,
   Loading,
-  ThemeProvider,
-  ThemesContext,
   defaultI18nProvider,
 } from 'react-admin';
-import { createHashHistory, createMemoryHistory } from 'history';
 import { ErrorBoundary } from 'react-error-boundary';
 import type { FallbackProps } from 'react-error-boundary';
 import type { ComponentType, ErrorInfo } from 'react';
@@ -23,6 +20,7 @@ import {
   Error as DefaultError,
   Layout,
   LoginPage,
+  darkTheme,
   lightTheme,
 } from './layout/index.js';
 import getRoutesAndResourcesFromNodes, {
@@ -68,7 +66,7 @@ const getOverrideCode = (resources: Resource[]) => {
 export const AdminResourcesGuesser = ({
   // Admin props
   loadingPage: LoadingPage = Loading,
-  admin: AdminEl = Admin,
+  admin: AdminEl = AdminUI,
   // Props
   children,
   includeDeprecated,
@@ -116,7 +114,7 @@ const AdminGuesser = ({
   includeDeprecated = false,
   // Admin props
   dataProvider,
-  history,
+  i18nProvider,
   layout = Layout,
   loginPage = LoginPage,
   loading: loadingPage,
@@ -129,14 +127,6 @@ const AdminGuesser = ({
   const [loading, setLoading] = useState(true);
   const [, setError] = useState();
   const [introspect, setIntrospect] = useState(true);
-  let adminHistory = history;
-
-  if (!adminHistory) {
-    adminHistory =
-      typeof window === 'undefined'
-        ? createMemoryHistory()
-        : createHashHistory();
-  }
 
   useEffect(() => {
     if (typeof dataProvider.introspect !== 'function') {
@@ -175,23 +165,29 @@ const AdminGuesser = ({
   );
 
   return (
-    <IntrospectionContext.Provider value={introspectionContext}>
-      <SchemaAnalyzerContext.Provider value={schemaAnalyzer}>
-        <AdminResourcesGuesser
-          includeDeprecated={includeDeprecated}
-          resources={resources}
-          loading={loading}
-          dataProvider={dataProvider}
-          history={adminHistory}
-          layout={layout}
-          loginPage={loginPage}
-          loadingPage={loadingPage}
-          theme={theme}
-          {...rest}>
-          {children}
-        </AdminResourcesGuesser>
-      </SchemaAnalyzerContext.Provider>
-    </IntrospectionContext.Provider>
+    <AdminContext
+      i18nProvider={i18nProvider}
+      dataProvider={dataProvider}
+      theme={theme}
+      darkTheme={darkTheme}
+      lightTheme={lightTheme}>
+      <IntrospectionContext.Provider value={introspectionContext}>
+        <SchemaAnalyzerContext.Provider value={schemaAnalyzer}>
+          <AdminResourcesGuesser
+            includeDeprecated={includeDeprecated}
+            resources={resources}
+            loading={loading}
+            dataProvider={dataProvider}
+            layout={layout}
+            loginPage={loginPage}
+            loadingPage={loadingPage}
+            theme={theme}
+            {...rest}>
+            {children}
+          </AdminResourcesGuesser>
+        </SchemaAnalyzerContext.Provider>
+      </IntrospectionContext.Provider>
+    </AdminContext>
   );
 };
 
@@ -231,19 +227,9 @@ const AdminGuesserWithError = ({
   );
 
   return (
-    <I18nContextProvider value={i18nProvider}>
-      <ThemesContext.Provider value={theme}>
-        <ThemeProvider>
-          <ErrorBoundary onError={handleError} fallbackRender={renderError}>
-            <AdminGuesser
-              {...props}
-              i18nProvider={i18nProvider}
-              theme={theme}
-            />
-          </ErrorBoundary>
-        </ThemeProvider>
-      </ThemesContext.Provider>
-    </I18nContextProvider>
+    <ErrorBoundary onError={handleError} fallbackRender={renderError}>
+      <AdminGuesser {...props} i18nProvider={i18nProvider} theme={theme} />
+    </ErrorBoundary>
   );
 };
 
diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
index 3dc83d5..429b6f9 100644
--- a/src/layout/AppBar.tsx
+++ b/src/layout/AppBar.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  AppBar,
-  AppBarClasses,
-  ToggleThemeButton,
-  useAuthProvider,
-} from 'react-admin';
+import { AppBar, AppBarClasses, useAuthProvider } from 'react-admin';
 import type { AppBarProps } from 'react-admin';
 import { Box, Typography } from '@mui/material';
 
@@ -23,7 +18,6 @@ const CustomAppBar = ({ classes, userMenu, ...props }: AppBarProps) => {
       />
       <Logo />
       <Box component="span" sx={{ flex: 1 }} />
-      <ToggleThemeButton />
     </AppBar>
   );
 };


Test patch:
diff --git a/src/__snapshots__/AdminGuesser.test.tsx.snap b/src/__snapshots__/AdminGuesser.test.tsx.snap
index 073fa11..85acc1f 100644
--- a/src/__snapshots__/AdminGuesser.test.tsx.snap
+++ b/src/__snapshots__/AdminGuesser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AdminGuesser /> renders loading 1`] = `<Loading />`;
 
 exports[`<AdminGuesser /> renders with custom resources 1`] = `
-<Admin
+<AdminUI
   dataProvider={
     {
       "create": [Function],
@@ -25,11 +25,11 @@ exports[`<AdminGuesser /> renders with custom resources 1`] = `
   <ResourceGuesser
     name="custom"
   />
-</Admin>
+</AdminUI>
 `;
 
 exports[`<AdminGuesser /> renders without custom resources 1`] = `
-<Admin
+<AdminUI
   dataProvider={
     {
       "create": [Function],
@@ -51,11 +51,11 @@ exports[`<AdminGuesser /> renders without custom resources 1`] = `
   <ResourceGuesser
     name="books"
   />
-</Admin>
+</AdminUI>
 `;
 
 exports[`<AdminGuesser /> renders without data 1`] = `
-<Admin
+<AdminUI
   dataProvider={
     {
       "create": [Function],