Merge pull request #4 from marmelab/upgrade-react-admin-5

Upgrade to react-admin v5

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: "Test - action"
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          cache: "yarn"
+      - name: Setup react-admin registry
+        uses: react-admin/[email protected]
+        env:
+          RA_EE_CI_TOKEN: ${{secrets.RA_EE_CI_TOKEN}}
+      - name: Install dependencies
+        run: yarn
+      - name: Build
+        run: yarn build
+      - name: Test
+        run: yarn test

package.json

@@ -7,30 +7,36 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "test": "vitest"
   },
   "dependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@react-admin/ra-navigation": "next",
+    "@react-admin/ra-realtime": "next",
+    "@react-admin/ra-search": "next",
+    "@tanstack/react-query-devtools": "^5.45.1",
+    "@testing-library/dom": "^10.1.0",
     "data-generator-helpdesk": "1.0.1",
-    "@faker-js/faker": "^7.6.0",
-    "@react-admin/ra-navigation": "^4.3.3",
-    "@react-admin/ra-realtime": "^4.3.0",
-    "@react-admin/ra-search": "^4.2.0",
     "lodash": "^4.17.21",
-    "ra-data-fakerest": "^4.7.0",
-    "react": "^18.2.0",
-    "react-admin": "^4.7.0",
-    "react-dom": "^18.2.0",
-    "uuid": "^9.0.0"
+    "ra-data-fakerest": "^5.0.1",
+    "react": "^18.3.1",
+    "react-admin": "^5.0.1",
+    "react-dom": "^18.3.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.191",
-    "@types/md5": "^2.3.2",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
-    "@types/uuid": "^9.0.0",
-    "@vitejs/plugin-react": "^2.2.0",
-    "gh-pages": "^4.0.0",
-    "typescript": "^4.6.4",
-    "vite": "^3.2.3"
+    "@testing-library/react": "^16.0.0",
+    "@types/lodash": "^4.17.5",
+    "@types/md5": "^2.3.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-react": "^4.3.1",
+    "gh-pages": "^6.1.1",
+    "jsdom": "^24.1.0",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
   }
 }

src/App.spec.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, test, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+describe("App", () => {
+  test("should render without errors", async () => {
+    const errorLog = vi.spyOn(console, "error");
+    const warningLog = vi.spyOn(console, "warn");
+    // Avoid fakerest logs
+    vi.spyOn(console, "log").mockImplementation(() => {});
+
+    render(<App />);
+    await screen.findByText("Need invoice");
+
+    expect(errorLog).not.toHaveBeenCalled();
+    expect(warningLog).not.toHaveBeenCalled();
+  });
+});

src/App.tsx

@@ -6,9 +6,10 @@ import {
   Admin,
   RefreshIconButton,
   Resource,
+  ToggleThemeButton,
   localStorageStore,
 } from "react-admin";
-import { ReactQueryDevtools } from "react-query/devtools";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import customers from "./customers";
 import products from "./products";
@@ -24,13 +25,35 @@ const MyLayout = (props: any) => (
       {...props}
       maxWidth="xl"
       toolbar={
-        <Box display="flex" gap={1} mr={1}>
+        <Box display="flex" gap={1} mr={1} alignItems="center">
           <Search />
+          <ToggleThemeButton />
           <RefreshIconButton />
         </Box>
       }
+      sx={{
+        "& .RaHeader-toolbar > *": {
+          flexBasis: "33.33%",
+          // FIXME: This should be fixed in ra-navigation
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        "& .RaHeader-toolbar > *:first-of-type": {
+          justifyContent: "flex-start",
+        },
+        "& .RaHeader-toolbar > *:last-child": {
+          justifyContent: "flex-end",
+        },
+        "& .MuiTabs-flexContainer": {
+          justifyContent: "center",
+        },
+      }}
+    />
+    <ReactQueryDevtools
+      initialIsOpen={false}
+      // To avoid collision with the ConnectionWatcher notifications
+      buttonPosition="bottom-left"
     />
-    <ReactQueryDevtools initialIsOpen={false} />
     <ConnectionWatcher />
   </>
 );
@@ -46,6 +69,7 @@ const App = () => (
       </Box>
     }
     layout={MyLayout}
+    defaultTheme="light"
   >
     <Resource name="tickets" {...tickets} />
     <Resource name="customers" {...customers} />

src/customers/CustomerShow.tsx

@@ -34,8 +34,8 @@ export const CustomerShow = () => (
     >
       <Datagrid bulkActionButtons={false} rowClick="show">
         <DateField label="Date" source="updated_at" />
-        <SubjectField />
-        <FromField />
+        <SubjectField label="Subject" />
+        <FromField label="From" />
         <StatusField />
       </Datagrid>
     </ReferenceManyField>

src/index.css

@@ -1,3 +1,12 @@
 body {
   margin: 0;
+}
+
+/* 
+Because the style prop no longer exist in TanStack Query v5,
+we have to use this rule to customize ReactQueryDevtools button size:
+*/
+.tsqd-transitions-container>div {
+  height: 30px;
+  width: 30px;
 }

src/products/ProductShow.tsx

@@ -67,8 +67,8 @@ export const ProductShow = () => (
             </ReferenceField>
             <ReferenceField source="customer_id" reference="customers" />
             <TicketDateField label="Date" source="updated_at" />
-            <SubjectField />
-            <FromField />
+            <SubjectField label="Subject" />
+            <FromField label="From" />
             <StatusField />
           </Datagrid>
         </ReferenceManyField>

src/tickets/ActivityDetail.tsx

@@ -1,12 +1,12 @@
-import { ReferenceField, useGetIdentity } from "react-admin";
+import { FieldProps, ReferenceField, useGetIdentity } from "react-admin";
 import { useGetLockLive } from "@react-admin/ra-realtime";
 import { Box, Typography } from "@mui/material";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import LockIcon from "@mui/icons-material/Lock";
 
 import { useGetTicketReadsForRecord } from "./useGetTicketReadsForRecord";
 
-export const ActivityDetail = () => {
+export const ActivityDetail = (props: Omit<FieldProps, 'source'>) => {
   const { data: lock } = useGetLockLive("tickets");
   const ticketReads = useGetTicketReadsForRecord();
   const { identity } = useGetIdentity();
@@ -45,6 +45,3 @@ export const ActivityDetail = () => {
     </>
   );
 };
-ActivityDetail.defaultProps = {
-  label: "Activity",
-};

src/tickets/ActivityField.tsx

@@ -1,12 +1,12 @@
-import { useRecordContext, useGetOne } from "react-admin";
+import { useRecordContext, useGetOne, FieldProps } from "react-admin";
 import { useLocksContext } from "@react-admin/ra-realtime";
 import { Tooltip, Box } from "@mui/material";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import LockIcon from "@mui/icons-material/Lock";
 
 import { useTicketReadsContext } from "./TicketReadsContext";
 
-export const ActivityField = () => {
+export const ActivityField = (props: FieldProps) => {
   const record = useRecordContext();
 
   const locks = useLocksContext();
@@ -21,11 +21,6 @@ export const ActivityField = () => {
   return <PlaceHolder />;
 };
 
-ActivityField.defaultProps = {
-  label: "",
-  source: "lock",
-};
-
 const LockedIcon = ({ identity }: { identity?: string }) => {
   const { data: agent, isLoading } = useGetOne("agents", { id: identity });
 

src/tickets/FromField.tsx

@@ -1,6 +1,6 @@
-import { ReferenceOneField, WithRecord } from "react-admin";
+import { FieldProps, ReferenceOneField, WithRecord } from "react-admin";
 
-export const FromField = () => (
+export const FromField = (props: Omit<FieldProps, "source">) => (
   <ReferenceOneField
     label="From"
     reference="messages"
@@ -17,7 +17,3 @@ export const FromField = () => (
     />
   </ReferenceOneField>
 );
-
-FromField.defaultProps = {
-  label: "From",
-};

src/tickets/MessageList.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import { useListContext, ReferenceField } from "react-admin";
+import { useListContext, ReferenceField, Error } from "react-admin";
 import { useFormContext } from "react-hook-form";
 import {
   Divider,
@@ -14,17 +14,24 @@ import { NewMessageForm } from "./NewMessageForm";
 import { CustomerAvatar } from "../customers/CustomerAvatar";
 
 export const MessageList = () => {
-  const { data, isLoading } = useListContext();
+  const { data, error, isPending } = useListContext();
+
+  if (isPending) return null;
+  if (error) return null;
 
-  if (isLoading) return null;
   return (
     <List sx={{ width: "100%", pt: 0 }}>
       {data.map((message) => (
         <Fragment key={message.id}>
           <ListItem
             alignItems="flex-start"
             sx={
-              message.author === "agent" ? { backgroundColor: "#ffffef" } : {}
+              message.author === "agent"
+                ? {
+                    backgroundColor: (theme) =>
+                      theme.palette.background.default,
+                  }
+                : {}
             }
           >
             <ListItemAvatar>

src/tickets/NewMessageForm.tsx

@@ -28,7 +28,7 @@ export const NewMessageForm = () => {
 
   const { refetch } = useListContext();
   const record = useRecordContext();
-  const [create, { isLoading: isCreating }] = useCreate();
+  const [create, { isPending: isCreating }] = useCreate();
   const [update] = useUpdate();
   const resetForm = useRef<any>();
   const { identity } = useGetIdentity();
@@ -44,7 +44,7 @@ export const NewMessageForm = () => {
         data: {
           id: uuidv4(),
           ...message,
-          ticket_id: record.id,
+          ticket_id: record?.id,
           author: "agent",
           email: identity?.email,
           agent_id: identity?.id,
@@ -54,7 +54,7 @@ export const NewMessageForm = () => {
       {
         onSuccess: () => {
           update("tickets", {
-            id: record.id,
+            id: record?.id,
             data: { status, updated_at: timestamp },
           });
           resetForm.current && resetForm.current();
@@ -65,7 +65,12 @@ export const NewMessageForm = () => {
   };
 
   return (
-    <ListItem alignItems="flex-start" sx={{ backgroundColor: "#ffffef" }}>
+    <ListItem
+      alignItems="flex-start"
+      sx={{
+        backgroundColor: (theme) => theme.palette.background.default,
+      }}
+    >
       <ListItemAvatar>
         <Avatar src={identity?.avatar} />
       </ListItemAvatar>

src/tickets/StatusField.tsx

@@ -1,7 +1,7 @@
-import { useRecordContext } from "react-admin";
+import { FieldProps, useRecordContext } from "react-admin";
 import { Chip } from "@mui/material";
 
-export const StatusField = (_props: { label?: string }) => {
+export const StatusField = (props: Omit<FieldProps, "source">) => {
   const record = useRecordContext();
   if (!record) return null;
   return (

src/tickets/SubjectField.tsx

@@ -1,7 +1,7 @@
-import { ReferenceOneField, TextField } from "react-admin";
+import { FieldProps, ReferenceOneField, TextField } from "react-admin";
 import { Box } from "@mui/material";
 
-export const SubjectField = (_props: { label: string }) => (
+export const SubjectField = (props: Omit<FieldProps, "source">) => (
   <Box
     className="column-content"
     overflow="hidden"
@@ -21,7 +21,3 @@ export const SubjectField = (_props: { label: string }) => (
     </ReferenceOneField>
   </Box>
 );
-
-SubjectField.defaultProps = {
-  label: "Subject",
-};

src/tickets/TicketList.tsx

@@ -52,14 +52,14 @@ export const TicketList = () => {
               },
             }}
           >
-            <ActivityField />
+            <ActivityField source="lock" label="" />
             <ReferenceField source="customer_id" reference="customers" label="">
               <CustomerAvatar size="small" />
             </ReferenceField>
             <ReferenceField source="customer_id" reference="customers" />
             <DateField source="updated_at" label="Date" textAlign="right" />
-            <SubjectField />
-            <FromField />
+            <SubjectField label="Subject" />
+            <FromField label="From" />
             <StatusField />
           </Datagrid>
         </List>

src/tickets/TicketShow.tsx

@@ -42,7 +42,7 @@ const ShowAside = () => {
       <DateField source="updated_at" showTime />
       <ReferenceField source="customer_id" reference="customers" link="show" />
       <ReferenceField source="product_id" reference="products" link="show" />
-      <ActivityDetail />
+      <ActivityDetail label="Activity" />
     </SimpleShowLayout>
   );
 };