[RFR] Remove ra-tree

Makefile

@@ -74,19 +74,11 @@ build-ra-realtime:
 	@echo "Transpiling ra-realtime files...";
 	@cd ./packages/ra-realtime && yarn -s build
 
-build-ra-tree-core:
-	@echo "Transpiling ra-tree-core files...";
-	@cd ./packages/ra-tree-core && yarn -s build
-
-build-ra-tree-ui-materialui:
-	@echo "Transpiling ra-tree-ui-materialui files...";
-	@cd ./packages/ra-tree-ui-materialui && yarn -s build
-
 build-data-generator:
 	@echo "Transpiling data-generator files...";
 	@cd ./examples/data-generator && yarn -s build
 
-build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphcool build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-ra-realtime build-ra-tree-core build-ra-tree-ui-materialui build-data-generator build-react-admin  ## compile ES6 files to JS
+build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphcool build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-ra-realtime build-data-generator build-react-admin  ## compile ES6 files to JS
 
 doc: ## compile doc as html and launch doc web server
 	@yarn -s doc

UPGRADE.md

@@ -1281,4 +1281,10 @@ export default ({
     sagaMiddleware.run(saga);
     return store;
 };
-```
+```
+
+## No More Tree Packages in Core
+
+The `ra-tree` and `ra-tree-ui-material-ui` packages were removed in v3. The v2 version performed poorly, and we don't want to delay v3 to reimplement the Tree packages.
+
+If you were using these packages just for displaying a tree, you'll have to reimplement a basic tree widget, taking the Tags list from the Simple example as an inspiration. If you were using these packages for creating and updating a tree, we recommend that you wait until the core team or another community member publishes a Tree package compatible with v3.

docs/Ecosystem.md

@@ -68,8 +68,8 @@ See the [translation](./Translation.md#available-locales) page.
 ## Miscellaneous
 
 - [marmelab/ra-realtime](https://github.com/marmelab/react-admin/tree/master/packages/ra-realtime): enable realtime updates
-- [marmelab/ra-tree-ui-materialui](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/): Components to show data represented as a tree. This package is part of our [Labs](/Labs.md) experimentations. This means it misses some features and might not handle all corner cases. Use it at your own risks. Besides, we would really appreciate some feedback!
-- [marmelab/ra-tree-core](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-core/): Components providing the logic but no UI to show data represented as a tree. This package is part of our [Labs](/Labs.md) experimentations. This means it misses some features and might not handle all corner cases. Use it at your own risks. Besides, we would really appreciate some feedback!
+- [marmelab/ra-tree-ui-materialui](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/): Components to show data represented as a tree. Only compatible with react-admin v2 for now. 
+- [marmelab/ra-tree-core](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-core/): Components providing the logic but no UI to show data represented as a tree. Only compatible with react-admin v2 for now.
 - [ra-customizable-datagrid](https://github.com/fizix-io/ra-customizable-datagrid): plugin that allows to hide / show columns dynamically.
 - [FusionWorks/react-admin-google-maps](https://github.com/FusionWorks/react-admin-google-maps): Input/view components for displaying location using Google Maps.
 - [api-platform/admin](https://api-platform.com/docs/admin): create a fully featured admin using React Admin for API supporting the [Hydra Core Vocabulary](http://www.hydra-cg.com/), including but not limited to APIs created using the [API Platform framework](https://api-platform.com)

docs/List.md

@@ -1167,70 +1167,6 @@ When you want to display only one property of a list of records, instead of usin
 </ReferenceArrayField>
 ```
 
-## The `<Tree>` component
-
-When you want to display a hierarchized list of records, instead of using a `<Datagrid>`, use the `<Tree>` component. This component is available in an addon package: [`ra-tree-ui-materialui`](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/README.md).
-
-*Important*: This package is part of our [Labs](/Labs.md) experimentations. This means it misses some features and might not handle all corner cases. Use it at your own risks. Besides, we would really appreciate some feedback!
-
-It expects that every resource returned from the `List` has a `parent_id` property by default:
-
-```json
-[
-    { "id": 1, "name": "Clothing" },
-    { "id": 2, "name": "Men", "parent_id": 1 },
-    { "id": 3, "name": "Suits", "parent_id": 2 },
-    { "id": 6, "name": "Women", "parent_id": 1 },
-    { "id": 7, "name": "Dresses", "parent_id": 6 },
-    { "id": 10, "name": "Skirts", "parent_id": 6 },
-    { "id": 11, "name": "Blouses", "parent_id": 6 }
-]
-```
-
-Here's an example showing how to use it:
-
-```jsx
-// in src/categories.js
-import React from 'react';
-import { List, TextField, EditButton, DeleteButton } from 'react-admin';
-import { Tree, NodeView, NodeActions } from 'ra-tree-ui-materialui';
-
-const CategoriesActions = props => (
-    <NodeActions {...props}>
-        <EditButton />
-        <DeleteButton />
-    </NodeActions>
-);
-
-export const CategoriesList = (props) => (
-    <List {...props} perPage={10000}>
-        <Tree>
-            <NodeView actions={<CategoriesActions />}>
-                <TextField source="name" />
-            </NodeView>
-        </Tree>
-    </List>
-);
-```
-
-![ra-tree demo](./img/ra-tree.gif)
-
-**Tip**: The `<Tree>` component supports drag & drop operations:
-
-```jsx
-export const CategoriesList = (props) => (
-    <List {...props} perPage={10000}>
-        <Tree enableDragAndDrop>
-            <NodeView actions={<CategoriesActions />}>
-                <TextField source="name" />
-            </NodeView>
-        </Tree>
-    </List>
-);
-```
-
-To learn more about this component features, please refers to its [README](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/README.md).
-
 ## Using a Custom Iterator
 
 A `<List>` can delegate to any iterator component - `<Datagrid>` is just one example. An iterator component must accept at least two props:

docs/_layouts/default.html

@@ -843,11 +843,6 @@
                         </a>
                     </li>
 
-                    <li class="chapter {% if page.path == 'Labs.md' %}active{% endif %}">
-                        <a href="./Labs.html">
-                            <b>22.</b> Labs
-                        </a>
-                    </li>
                 </ul>
             </nav>
         </div>

examples/simple/package.json

@@ -42,8 +42,6 @@
         "ra-input-rich-text": "^3.0.0-alpha.0",
         "ra-language-english": "^3.0.0-alpha.0",
         "ra-language-french": "^3.0.0-alpha.0",
-        "ra-tree-core": "^3.0.0-alpha.0",
-        "ra-tree-ui-materialui": "^3.0.0-alpha.0",
         "react": "^16.9.0",
         "react-admin": "^3.0.0-alpha.0",
         "react-dom": "^16.9.0"

examples/simple/src/index.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { Admin, Resource } from 'react-admin'; // eslint-disable-line import/no-unresolved
 import { render } from 'react-dom';
 import { Route } from 'react-router-dom';
-import { reducer as tree } from 'ra-tree-ui-materialui';
 
 import authProvider from './authProvider';
 import comments from './comments';
@@ -23,7 +22,6 @@ render(
         i18nProvider={i18nProvider}
         title="Example Admin"
         layout={Layout}
-        customReducers={{ tree }}
         customRoutes={[
             <Route
                 exact

examples/simple/src/tags/TagList.js

@@ -1,45 +1,108 @@
-import React from 'react';
+import React, { Fragment, useState } from 'react';
+import { List, EditButton } from 'react-admin';
 import {
-    DeleteButton,
-    EditButton,
-    List,
-    ShowButton,
-    TextField,
-} from 'react-admin';
-import {
-    DragPreview,
-    IgnoreFormProps,
-    NodeView,
-    Tree,
-    NodeActions,
-} from 'ra-tree-ui-materialui';
+    List as MuiList,
+    ListItem,
+    ListItemText,
+    ListItemSecondaryAction,
+    Collapse,
+    Card,
+    makeStyles,
+} from '@material-ui/core';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
 
-const TagDragPreview = props => (
-    <DragPreview {...props}>{({ node }) => node.record.name}</DragPreview>
-);
+const useStyles = makeStyles({
+    card: {
+        maxWidth: '20em',
+        marginTop: '1em',
+    },
+});
+const SmallCard = ({ className, ...props }) => {
+    const classes = useStyles();
+    return <Card {...props} className={`${className} ${classes.card}`} />;
+};
 
-const CustomNodeActions = props => (
-    <NodeActions {...props}>
-        <IgnoreFormProps>
-            <EditButton />
-            <ShowButton />
-            <DeleteButton />
-        </IgnoreFormProps>
-    </NodeActions>
-);
+const SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
+    const childNodes = getChildNodes(root);
+    const hasChildren = childNodes.length > 0;
+    const open = openChildren.includes(root.id);
+    return (
+        <Fragment>
+            <ListItem
+                button={hasChildren}
+                onClick={() => hasChildren && toggleNode(root)}
+                style={{ paddingLeft: level * 16 }}
+            >
+                {hasChildren && open && <ExpandLess />}
+                {hasChildren && !open && <ExpandMore />}
+                {!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
+                <ListItemText primary={root.name} />
+
+                <ListItemSecondaryAction>
+                    <EditButton record={root} basePath="/tags" />
+                </ListItemSecondaryAction>
+            </ListItem>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+                <MuiList component="div" disablePadding>
+                    {childNodes.map(node => (
+                        <SubTree
+                            key={node.id}
+                            root={node}
+                            getChildNodes={getChildNodes}
+                            openChildren={openChildren}
+                            toggleNode={toggleNode}
+                            level={level + 1}
+                        />
+                    ))}
+                </MuiList>
+            </Collapse>
+        </Fragment>
+    );
+};
+
+const Tree = ({ ids, data }) => {
+    const [openChildren, setOpenChildren] = useState([]);
+    const toggleNode = node =>
+        setOpenChildren(state => {
+            if (state.includes(node.id)) {
+                return [
+                    ...state.splice(0, state.indexOf(node.id)),
+                    ...state.splice(state.indexOf(node.id) + 1, state.length),
+                ];
+            } else {
+                return [...state, node.id];
+            }
+        });
+    const nodes = ids.map(id => data[id]);
+    const roots = nodes.filter(node => typeof node.parent_id === 'undefined');
+    const getChildNodes = root =>
+        nodes.filter(node => node.parent_id === root.id);
+    return (
+        <MuiList>
+            {roots.map(root => (
+                <SubTree
+                    key={root.id}
+                    root={root}
+                    getChildNodes={getChildNodes}
+                    openChildren={openChildren}
+                    toggleNode={toggleNode}
+                    level={1}
+                />
+            ))}
+        </MuiList>
+    );
+};
 
 const TagList = props => (
-    <List {...props} perPage={1000}>
-        <Tree
-            allowDropOnRoot
-            enableDragAndDrop
-            parentSource="parent_id"
-            dragPreviewComponent={TagDragPreview}
-        >
-            <NodeView actions={<CustomNodeActions />}>
-                <TextField source="name" />
-            </NodeView>
-        </Tree>
+    <List
+        {...props}
+        perPage={1000}
+        pagination={false}
+        component={SmallCard}
+        actions={false}
+    >
+        <Tree />
     </List>
 );
 

examples/simple/webpack.config.js

@@ -93,22 +93,6 @@ module.exports = {
                 'ra-input-rich-text',
                 'src'
             ),
-            'ra-tree-core': path.join(
-                __dirname,
-                '..',
-                '..',
-                'packages',
-                'ra-tree-core',
-                'src'
-            ),
-            'ra-tree-ui-materialui': path.join(
-                __dirname,
-                '..',
-                '..',
-                'packages',
-                'ra-tree-ui-materialui',
-                'src'
-            ),
         },
     },
     devServer: {