Add story for DeleteButton

Author: fzaninotto

packages/ra-ui-materialui/src/button/DeleteButton.stories.tsx

@@ -112,6 +112,78 @@ export const FullApp = () => {
     );
 };
 
+const data = {
+    books: [
+        {
+            id: 1,
+            title: 'War and Peace',
+            author: 'Leo Tolstoy',
+            year: 1869,
+        },
+        {
+            id: 2,
+            title: 'Pride and Predjudice',
+            author: 'Jane Austen',
+            year: 1813,
+        },
+        {
+            id: 3,
+            title: 'The Picture of Dorian Gray',
+            author: 'Oscar Wilde',
+            year: 1890,
+        },
+        {
+            id: 4,
+            title: 'Le Petit Prince',
+            author: 'Antoine de Saint-Exupéry',
+            year: 1943,
+        },
+        {
+            id: 5,
+            title: "Alice's Adventures in Wonderland",
+            author: 'Lewis Carroll',
+            year: 1865,
+        },
+        {
+            id: 6,
+            title: 'Madame Bovary',
+            author: 'Gustave Flaubert',
+            year: 1856,
+        },
+        {
+            id: 7,
+            title: 'The Lord of the Rings',
+            author: 'J. R. R. Tolkien',
+            year: 1954,
+        },
+        {
+            id: 8,
+            title: "Harry Potter and the Philosopher's Stone",
+            author: 'J. K. Rowling',
+            year: 1997,
+        },
+        {
+            id: 9,
+            title: 'The Alchemist',
+            author: 'Paulo Coelho',
+            year: 1988,
+        },
+        {
+            id: 10,
+            title: 'A Catcher in the Rye',
+            author: 'J. D. Salinger',
+            year: 1951,
+        },
+        {
+            id: 11,
+            title: 'Ulysses',
+            author: 'James Joyce',
+            year: 1922,
+        },
+    ],
+    authors: [],
+};
+
 const FullAppAdmin = ({ queryClient }: { queryClient: QueryClient }) => {
     const [resourcesAccesses, setResourcesAccesses] = React.useState({
         'books.list': true,
@@ -138,6 +210,10 @@ const FullAppAdmin = ({ queryClient }: { queryClient: QueryClient }) => {
             ),
         getPermissions: () => Promise.resolve(undefined),
     };
+    const dataProvider = fakeRestDataProvider(
+        data,
+        process.env.NODE_ENV === 'development'
+    );
 
     return (
         <AdminContext
@@ -165,18 +241,6 @@ const FullAppAdmin = ({ queryClient }: { queryClient: QueryClient }) => {
     );
 };
 
-export const NotificationDefault = () => {
-    const dataProvider = {
-        delete: () => Promise.resolve({ data: { id: 1 } }),
-    } as any;
-    return (
-        <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
-            <DeleteButton record={{ id: 1 }} resource="books" />
-            <Notification />
-        </AdminContext>
-    );
-};
-
 const AccessControlLayout = ({
     children,
     resourcesAccesses,
@@ -231,94 +295,57 @@ const AccessControlLayout = ({
     );
 };
 
-const BookList = () => {
+const BookList = ({ mutationMode = 'undoable' as const }) => (
+    <List>
+        <Datagrid>
+            <TextField source="id" />
+            <TextField source="title" />
+            <TextField source="author" />
+            <TextField source="year" />
+            <DeleteButton mutationMode={mutationMode} />
+        </Datagrid>
+    </List>
+);
+
+export const InList = ({ mutationMode }) => {
+    const dataProvider = fakeRestDataProvider(
+        data,
+        process.env.NODE_ENV === 'development',
+        process.env.NODE_ENV === 'development' ? 500 : 0
+    );
     return (
-        <List>
-            <Datagrid>
-                <TextField source="id" />
-                <TextField source="title" />
-                <TextField source="author" />
-                <TextField source="year" />
-                <DeleteButton />
-            </Datagrid>
-        </List>
+        <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
+            <AdminUI>
+                <Resource
+                    name="books"
+                    list={() => <BookList mutationMode={mutationMode} />}
+                />
+            </AdminUI>
+        </AdminContext>
     );
 };
 
-const dataProvider = fakeRestDataProvider(
-    {
-        books: [
-            {
-                id: 1,
-                title: 'War and Peace',
-                author: 'Leo Tolstoy',
-                year: 1869,
-            },
-            {
-                id: 2,
-                title: 'Pride and Predjudice',
-                author: 'Jane Austen',
-                year: 1813,
-            },
-            {
-                id: 3,
-                title: 'The Picture of Dorian Gray',
-                author: 'Oscar Wilde',
-                year: 1890,
-            },
-            {
-                id: 4,
-                title: 'Le Petit Prince',
-                author: 'Antoine de Saint-Exupéry',
-                year: 1943,
-            },
-            {
-                id: 5,
-                title: "Alice's Adventures in Wonderland",
-                author: 'Lewis Carroll',
-                year: 1865,
-            },
-            {
-                id: 6,
-                title: 'Madame Bovary',
-                author: 'Gustave Flaubert',
-                year: 1856,
-            },
-            {
-                id: 7,
-                title: 'The Lord of the Rings',
-                author: 'J. R. R. Tolkien',
-                year: 1954,
-            },
-            {
-                id: 8,
-                title: "Harry Potter and the Philosopher's Stone",
-                author: 'J. K. Rowling',
-                year: 1997,
-            },
-            {
-                id: 9,
-                title: 'The Alchemist',
-                author: 'Paulo Coelho',
-                year: 1988,
-            },
-            {
-                id: 10,
-                title: 'A Catcher in the Rye',
-                author: 'J. D. Salinger',
-                year: 1951,
-            },
-            {
-                id: 11,
-                title: 'Ulysses',
-                author: 'James Joyce',
-                year: 1922,
-            },
-        ],
-        authors: [],
+InList.argTypes = {
+    mutationMode: {
+        options: ['undoable', 'optimistic', 'pessimistic'],
+        control: { type: 'select' },
     },
-    process.env.NODE_ENV === 'development'
-);
+};
+InList.args = {
+    mutationMode: 'undoable',
+};
+
+export const NotificationDefault = () => {
+    const dataProvider = {
+        delete: () => Promise.resolve({ data: { id: 1 } }),
+    } as any;
+    return (
+        <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
+            <DeleteButton record={{ id: 1 }} resource="books" />
+            <Notification />
+        </AdminContext>
+    );
+};
 
 export const NotificationTranslated = () => {
     const dataProvider = {