[Storybook] Add react-query-devtools to stories (#628)

* chore(deps): Upgrade react-admin and add react-query-devtools

* [Storybook]: Add react-query-devtools to all stories.

* dedupe yarn.lock

* fix TS error

* fix tests by keeping react-router v6

---------

Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>

Author: zolex

package.json

@@ -21,7 +21,7 @@
     "@api-platform/api-doc-parser": "^0.16.8",
     "jsonld": "^8.3.2",
     "lodash.isplainobject": "^4.0.6",
-    "react-admin": "^5.0.3"
+    "react-admin": "^5.8.3"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.3",
@@ -38,6 +38,7 @@
     "@storybook/react-webpack5": "^8.0.5",
     "@storybook/test": "^8.0.5",
     "@storybook/test-runner": "^0.17.0",
+    "@tanstack/react-query-devtools": "^5.80.6",
     "@testing-library/jest-dom": "^6.1.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
@@ -94,5 +95,9 @@
     "storybook:serve": "serve storybook-static",
     "storybook:test": "test-storybook"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "resolutions": {
+    "react-router-dom": "^6",
+    "react-router": "^6"
+  }
+}

src/stories/Basic.stories.tsx

@@ -3,13 +3,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 import { HydraAdmin, type HydraAdminProps } from '../hydra';
 import { OpenApiAdmin } from '../openapi';
+import DevtoolsLayout from './layout/DevtoolsLayout';
 
 /**
  * # Basic `<HydraAdmin>` component
  * The `<HydraAdmin>` component without any parameter.
  */
 const Basic = ({ entrypoint }: BasicProps) => (
-  <HydraAdmin entrypoint={entrypoint} />
+  <HydraAdmin entrypoint={entrypoint} layout={DevtoolsLayout} />
 );
 
 interface BasicProps extends Pick<HydraAdminProps, 'entrypoint'> {}

src/stories/Basic.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { HydraAdmin, type HydraAdminProps } from '../hydra';
+import DevtoolsLayout from './layout/DevtoolsLayout';
 
 /**
  * # Basic `<HydraAdmin>` component
  * The `<HydraAdmin>` component without any parameter.
  */
 const Basic = ({ entrypoint }: BasicProps) => (
-  <HydraAdmin entrypoint={entrypoint} />
+  <HydraAdmin entrypoint={entrypoint} layout={DevtoolsLayout} />
 );
 
 export default Basic;

src/stories/auth/Admin.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { HydraAdmin, type HydraAdminProps } from '../../hydra';
 import authProvider from './basicAuth';
+import DevtoolsLayout from '../layout/DevtoolsLayout';
 
 /**
  * # Protected `<HydraAdmin>`
@@ -9,7 +10,12 @@ import authProvider from './basicAuth';
  * Login with: john/123
  */
 const Admin = ({ entrypoint }: JwtAuthProps) => (
-  <HydraAdmin entrypoint={entrypoint} authProvider={authProvider} requireAuth />
+  <HydraAdmin
+    entrypoint={entrypoint}
+    authProvider={authProvider}
+    requireAuth
+    layout={DevtoolsLayout}
+  />
 );
 
 export default Admin;

src/stories/custom/AdvancedCustomization.stories.tsx

@@ -10,7 +10,6 @@ import {
   DateField,
   Edit,
   Labeled,
-  Layout,
   List,
   NumberField,
   ReferenceArrayField,
@@ -34,6 +33,7 @@ import ResourceGuesser from '../../core/ResourceGuesser';
 import FieldGuesser from '../../field/FieldGuesser';
 import { HydraAdmin } from '../../hydra';
 import InputGuesser from '../../input/InputGuesser';
+import DevtoolsLayout from '../layout/DevtoolsLayout';
 
 export default {
   title: 'Admin/Custom/AdvancedCustomization',
@@ -222,7 +222,7 @@ const ReviewList = () => (
 export const AdvancedCustomization = () => (
   <HydraAdmin
     entrypoint={process.env.ENTRYPOINT}
-    layout={Layout}
+    layout={DevtoolsLayout}
     theme={defaultLightTheme}
     darkTheme={defaultDarkTheme}>
     <ResourceGuesser

src/stories/custom/UsingGuessers.stories.tsx

@@ -9,6 +9,7 @@ import FieldGuesser from '../../field/FieldGuesser';
 import EditGuesser from '../../edit/EditGuesser';
 import InputGuesser from '../../input/InputGuesser';
 import CreateGuesser from '../../create/CreateGuesser';
+import DevtoolsLayout from '../layout/DevtoolsLayout';
 
 export default {
   title: 'Admin/Custom/UsingGuessers',
@@ -98,7 +99,7 @@ const ReviewList = () => (
 );
 
 export const UsingGuessers = () => (
-  <HydraAdmin entrypoint={process.env.ENTRYPOINT}>
+  <HydraAdmin entrypoint={process.env.ENTRYPOINT} layout={DevtoolsLayout}>
     <ResourceGuesser
       name="books"
       list={BookList}

src/stories/layout/DevtoolsLayout.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useQueryClient } from '@tanstack/react-query';
+import { Layout, type LayoutProps } from 'react-admin';
+
+const DevtoolsLayout = ({ children, ...props }: LayoutProps) => {
+  const client = useQueryClient();
+  return (
+    <Layout {...props}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} client={client} />
+    </Layout>
+  );
+};
+
+export default DevtoolsLayout;

src/types.ts

@@ -497,8 +497,9 @@ export type InputGuesserProps = Omit<
   'component'
 > & {
   transformEnum?: (value: string | number) => string | number;
-  // don't know why this TextInputProps doesn't surface in the final type, re-adding it here
+  // due to the union type some TextInputProps don't surface in the final type, re-adding them here
   multiline?: boolean;
+  readOnly?: boolean;
 } & Pick<
     ReferenceInputProps | ReferenceArrayInputProps,
     'filter' | 'page' | 'perPage' | 'sort' | 'enableGetChoices'