Repository: api-platform/admin (ts)

Issue:
Not Found error is shown when deleting items from edit view
**API Platform version(s) affected**
2.6.1 (standard distribution) with 2.5.8 admin

**Description**  
When I delete any item from the edit view by clicking the delete button, the following happens:
- The item is deleted from the database as expected
- User gets redirected to the listing page
- After some time an error with message "Element does not exist" appears

For example deleting a book (following the APIP setup guide examples) with id 6, a DELETE request is sent to _https://localhost/books/6_. That request gets 204 as a response code with empty response body.

Right after the previous request a new GET request is now sent to _https://localhost/books/6_. Now the book with id 6 doesn't exist anymore and the request gets a 404 response, which in turn is shown in the UI.

NOTE: This only happens when deleting items by clicking the delete button. Deleting directly from the listing works fine.

I tried this with both a fresh install of the latest standard distribution and custom built apps with the same versions. I've tried setting _undoable_ to both _true_ and _false_.

This causes two kinds of problems for me:

1. Annoying error messages
2. Automatic redirection to a wrong page when I have a custom redirection path set for delete success 

I need to release my application in the coming days and this is a huge show stopper. I cannot figure out a way to fix this myself.

**How to reproduce**  

1. Install the latest standard distribution following the instructions on the APIP get started manual.
2. Create any entity and set it as ApiResource (like Book and Review in the example).
3. Go to admin UI and create a new instance
4. Go to the edit page of the created instance
5. Press delete button to delete the instance

**Possible Solution**  
To my understanding, React Admin expects DELETE to return the deleted instance back. Currently nothing is returned. Could this be the reason for the extra request?


Pull request:
Improve react-admin compatibility
| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tickets       | fixes #363
| License       | MIT
| Doc PR        | N/A

Use Admin instead of AdminContext and AdminUI.
Avoid to create AdminContext before having the resources loaded.

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ba6fe7..a77030c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.5.9
+
+* Improve react-admin compatibility
+
 ## 2.5.8
 
 * Fix `customSagas` prop type in `AdminGuesser`
diff --git a/src/AdminGuesser.js b/src/AdminGuesser.js
index ee274d4..0c9c5ef 100644
--- a/src/AdminGuesser.js
+++ b/src/AdminGuesser.js
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  AdminContext,
-  AdminUI,
+  Admin,
   ComponentPropType,
   Error as DefaultError,
   Loading,
@@ -37,11 +36,14 @@ const displayOverrideCode = (resources) => {
  * If no children are passed, a `<ResourceGuesser>` component is created for each resource type exposed by the API, in the order they are specified in the API documentation.
  */
 export const AdminResourcesGuesser = ({
+  // Admin props
+  customReducers = {},
+  loadingPage: LoadingPage = Loading,
+  // Props
   children,
   includeDeprecated,
   resources,
   loading,
-  loadingPage: LoadingPage = Loading,
   ...rest
 }) => {
   if (loading) {
@@ -60,9 +62,12 @@ export const AdminResourcesGuesser = ({
   }
 
   return (
-    <AdminUI loading={LoadingPage} {...rest}>
+    <Admin
+      customReducers={{ introspect: introspectReducer, ...customReducers }}
+      loading={LoadingPage}
+      {...rest}>
       {resourceChildren}
-    </AdminUI>
+    </Admin>
   );
 };
 
@@ -81,23 +86,14 @@ const defaultTheme = createMuiTheme({
 const AdminGuesser = ({
   // Props for SchemaAnalyzerContext
   schemaAnalyzer,
-  // Props for AdminContext
-  dataProvider,
-  authProvider,
-  i18nProvider,
-  history,
-  customReducers = {},
-  customSagas,
-  initialState,
   // Props for AdminResourcesGuesser
   includeDeprecated = false,
-  // Props for AdminUI
+  // Admin props
+  dataProvider,
+  history,
   customRoutes = [],
-  appLayout,
   layout = Layout,
-  loginPage,
   loading: loadingPage,
-  locale,
   theme = defaultTheme,
   // Other props
   children,
@@ -113,22 +109,6 @@ const AdminGuesser = ({
     history = typeof window === 'undefined' ? {} : createHashHistory();
   }
 
-  if (appLayout && process.env.NODE_ENV !== 'production') {
-    console.warn(
-      'You are using deprecated prop "appLayout", it was replaced by "layout", see https://github.com/marmelab/react-admin/issues/2918',
-    );
-  }
-  if (loginPage === true && process.env.NODE_ENV !== 'production') {
-    console.warn(
-      'You passed true to the loginPage prop. You must either pass false to disable it or a component class to customize it',
-    );
-  }
-  if (locale && process.env.NODE_ENV !== 'production') {
-    console.warn(
-      'You are using deprecated prop "locale". You must now pass the initial locale to your i18nProvider',
-    );
-  }
-
   useEffect(() => {
     if (typeof dataProvider.introspect !== 'function') {
       throw new Error(
@@ -165,27 +145,19 @@ const AdminGuesser = ({
         },
       }}>
       <SchemaAnalyzerContext.Provider value={schemaAnalyzer}>
-        <AdminContext
-          authProvider={authProvider}
+        <AdminResourcesGuesser
+          includeDeprecated={includeDeprecated}
+          resources={resources}
+          loading={loading}
           dataProvider={dataProvider}
-          i18nProvider={i18nProvider}
           history={history}
-          customReducers={{ introspect: introspectReducer, ...customReducers }}
-          customSagas={customSagas}
-          initialState={initialState}>
-          <AdminResourcesGuesser
-            includeDeprecated={includeDeprecated}
-            resources={resources}
-            customRoutes={[...addedCustomRoutes, ...customRoutes]}
-            loading={loading}
-            layout={appLayout || layout}
-            loginPage={loginPage}
-            loadingPage={loadingPage}
-            theme={theme}
-            {...rest}>
-            {children}
-          </AdminResourcesGuesser>
-        </AdminContext>
+          customRoutes={[...addedCustomRoutes, ...customRoutes]}
+          layout={layout}
+          loadingPage={loadingPage}
+          theme={theme}
+          {...rest}>
+          {children}
+        </AdminResourcesGuesser>
       </SchemaAnalyzerContext.Provider>
     </IntrospectionContext.Provider>
   );


Test patch:
diff --git a/src/__snapshots__/AdminGuesser.test.js.snap b/src/__snapshots__/AdminGuesser.test.js.snap
index 6c13281..567cbce 100644
--- a/src/__snapshots__/AdminGuesser.test.js.snap
+++ b/src/__snapshots__/AdminGuesser.test.js.snap
@@ -8,69 +8,42 @@ exports[`<AdminGuesser /> renders loading 1`] = `
 `;
 
 exports[`<AdminGuesser /> renders with custom resources 1`] = `
-<AdminUI
-  catchAll={[Function]}
-  layout={[Function]}
-  loading={[Function]}
-  loginPage={[Function]}
-  logout={
+<Admin
+  customReducers={
     Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "propTypes": Object {
-        "className": [Function],
-        "icon": [Function],
-        "redirectTo": [Function],
-      },
-      "render": [Function],
+      "introspect": [Function],
     }
   }
+  loading={[Function]}
 >
   <ResourceGuesser
     name="custom"
   />
-</AdminUI>
+</Admin>
 `;
 
 exports[`<AdminGuesser /> renders without custom resources 1`] = `
-<AdminUI
-  catchAll={[Function]}
-  layout={[Function]}
-  loading={[Function]}
-  loginPage={[Function]}
-  logout={
+<Admin
+  customReducers={
     Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "propTypes": Object {
-        "className": [Function],
-        "icon": [Function],
-        "redirectTo": [Function],
-      },
-      "render": [Function],
+      "introspect": [Function],
     }
   }
+  loading={[Function]}
 >
   <ResourceGuesser
     name="books"
   />
-</AdminUI>
+</Admin>
 `;
 
 exports[`<AdminGuesser /> renders without data 1`] = `
-<AdminUI
-  catchAll={[Function]}
-  layout={[Function]}
-  loading={[Function]}
-  loginPage={[Function]}
-  logout={
+<Admin
+  customReducers={
     Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "propTypes": Object {
-        "className": [Function],
-        "icon": [Function],
-        "redirectTo": [Function],
-      },
-      "render": [Function],
+      "introspect": [Function],
     }
   }
+  loading={[Function]}
 />
 `;