[RFR] Relax material ui version dependency

docs/FAQ.md

@@ -11,7 +11,6 @@ title: "FAQ"
 - [How can I customize the UI depending on the user permissions?](#how-can-i-customize-the-ui-depending-on-the-user-permissions)
 - [How can I customize forms depending on its inputs values?](#how-can-i-customize-forms-depending-on-its-inputs-values)
 - [My Resource is defined but not displayed on the Menu](#my-resource-is-defined-but-not-displayed-on-the-menu)
-- [Why React Admin Doesn't Support The Latest Version Of Material-UI?](#why-react-admin-doesnt-support-the-latest-version-of-material-ui)
 
 ## Can I have custom identifiers/primary keys for my resources?
 
@@ -133,13 +132,3 @@ In order to have a specific resource without `list` prop listed on the menu, you
     </div>
 );
 ```
-
-## Why Doesn't React Admin Support The Latest Version Of Material-UI?
-
-React Admin users and third-party libraries maintainers might have noticed that the default UI template `ra-ui-materialui` [has `@material-ui/core@^1.4.0` as dependency](https://github.com/marmelab/react-admin/blob/ae45a2509b391a6ea81cdf9c248ff9d28364b6e1/packages/ra-ui-materialui/package.json#L44) even though the latest version of Material UI is already 3.x.
-
-We chose not to upgrade to Material UI v3 when it was released because the MUI team was already hard at work preparing the next major version ([which includes major breaking changes](https://github.com/mui-org/material-ui/issues/13663)). In fact, material-ui published a release schedule for one major version every 6 months. This means that developers using material-ui have to upgrade their codebase every six months to get the latest updates. On the other hand, react-admin plans to release a major version once every year, minimizing the upgrade work for developers. This gain in stability is a tradeoff - react-admin users can't use the latest version of material-ui for about half a year.
-
-Feel free to discuss this policy in [issue #2399](https://github.com/marmelab/react-admin/issues/2399).
-
-If you are a maintainer of a third-party library based on React Admin, your library has to add material-ui v1.x as a peer dependency.

examples/demo/package.json

@@ -3,8 +3,8 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "~1.5.1",
-        "@material-ui/icons": "~1.1.1",
+        "@material-ui/core": "~3.9.3",
+        "@material-ui/icons": "~3.0.2",
         "data-generator-retail": "^2.7.0",
         "fakerest": "~2.1.0",
         "fetch-mock": "~6.3.0",

examples/simple/package.json

@@ -37,8 +37,8 @@
         "webpack-dev-server": "~3.1.11"
     },
     "dependencies": {
-        "@material-ui/core": "~1.5.1",
-        "@material-ui/icons": "~1.1.1",
+        "@material-ui/core": "~3.9.3",
+        "@material-ui/icons": "~3.0.2",
         "@babel/polyfill": "^7.0.0",
         "ra-data-fakerest": "^2.0.0",
         "ra-input-rich-text": "^2.0.0",

examples/tutorial/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "~1.5.1",
+        "@material-ui/core": "~3.9.3",
         "ra-data-json-server": "^2.0.0",
         "react": "~16.3.1",
         "react-admin": "^2.0.0",

packages/ra-ui-materialui/package.json

@@ -26,8 +26,8 @@
         "watch": "rimraf ./lib && tsc --watch"
     },
     "devDependencies": {
-        "@material-ui/core": "~1.5.1",
-        "@material-ui/icons": "^1.1.1",
+        "@material-ui/core": "~3.9.3",
+        "@material-ui/icons": "~3.0.2",
         "cross-env": "^5.2.0",
         "enzyme": "~3.7.0",
         "enzyme-adapter-react-16": "~1.6.0",
@@ -43,8 +43,8 @@
         "react-dom": "^16.3.0"
     },
     "dependencies": {
-        "@material-ui/core": "^1.4.0",
-        "@material-ui/icons": "^1.0.0",
+        "@material-ui/core": "^1.4.0 || ^3.0.0",
+        "@material-ui/icons": "^1.0.0 || ^3.0.0",
         "autosuggest-highlight": "^3.1.1",
         "classnames": "~2.2.5",
         "inflection": "~1.12.0",

packages/ra-ui-materialui/src/auth/Login.tsx

@@ -27,7 +27,6 @@ interface Props {
     backgroundImage?: string;
     loginForm: ReactElement<any>;
     theme: object;
-    staticContext: StaticContext;
 }
 
 const styles = (theme: Theme) =>
@@ -77,18 +76,6 @@ const styles = (theme: Theme) =>
 class Login extends Component<
     Props & WithStyles<typeof styles> & HtmlHTMLAttributes<HTMLDivElement>
 > {
-    static propTypes = {
-        backgroundImage: PropTypes.string,
-        loginForm: PropTypes.element,
-        theme: PropTypes.object,
-    };
-
-    static defaultProps = {
-        backgroundImage: 'https://source.unsplash.com/random/1600x900/daily',
-        theme: defaultTheme,
-        loginForm: <DefaultLoginForm />,
-    };
-
     theme = createMuiTheme(this.props.theme);
     containerRef = React.createRef<HTMLDivElement>();
     backgroundImageLoaded = false;
@@ -128,7 +115,6 @@ class Login extends Component<
             classes,
             className,
             loginForm,
-            staticContext,
             ...rest
         } = this.props;
 
@@ -156,4 +142,15 @@ class Login extends Component<
 
 const EnhancedLogin = withStyles(styles)(Login) as ComponentType<Props>;
 
+EnhancedLogin.propTypes = {
+    backgroundImage: PropTypes.string,
+    loginForm: PropTypes.element,
+    theme: PropTypes.object,
+};
+
+EnhancedLogin.defaultProps = {
+    backgroundImage: 'https://source.unsplash.com/random/1600x900/daily',
+    theme: defaultTheme,
+    loginForm: <DefaultLoginForm />,
+};
 export default EnhancedLogin;

packages/ra-ui-materialui/src/field/BooleanField.js

@@ -60,7 +60,7 @@ export const BooleanField = ({
                 {...sanitizeRestProps(rest)}
             >
                 <span className={classes.label}>{ariaLabel}</span>
-                <FalseIcon />
+                <FalseIcon data-testid="false" />
             </Typography>
         );
     }
@@ -74,7 +74,7 @@ export const BooleanField = ({
                 {...sanitizeRestProps(rest)}
             >
                 <span className={classes.label}>{ariaLabel}</span>
-                <TrueIcon />
+                <TrueIcon data-testid="true" />
             </Typography>
         );
     }

packages/ra-ui-materialui/src/field/BooleanField.spec.js

@@ -1,113 +1,81 @@
 import React from 'react';
-import assert from 'assert';
-import { shallow } from 'enzyme';
+import expect from 'expect';
 import { BooleanField } from './BooleanField';
+import { render, cleanup } from 'react-testing-library';
 
 describe('<BooleanField />', () => {
+    afterEach(cleanup);
     it('should display tick and truthy text if value is true', () => {
-        const wrapper = shallow(
+        const { queryByText, getByRole } = render(
             <BooleanField
                 record={{ published: true }}
                 source="published"
                 resource="posts"
             />
         );
-        assert.ok(wrapper.first().is('WithStyles(Typography)'));
-        assert.equal(wrapper.first().find('pure(Done)').length, 1);
-        assert.equal(
-            wrapper
-                .first()
-                .find('span')
-                .text(),
-            'ra.boolean.true'
-        );
+        expect(queryByText('ra.boolean.true')).not.toBeNull();
+        expect(getByRole('presentation').dataset.testid).toBe('true');
+        expect(queryByText('ra.boolean.false')).toBeNull();
     });
 
-    it('should display tick and custom truthy text if value is true', () => {
-        const wrapper = shallow(
+    it('should use valueLabelTrue for custom truthy text', () => {
+        const { queryByText } = render(
             <BooleanField
                 record={{ published: true }}
                 source="published"
                 resource="posts"
                 valueLabelTrue="Has been published"
             />
         );
-        assert.ok(wrapper.first().is('WithStyles(Typography)'));
-        assert.equal(wrapper.first().find('pure(Done)').length, 1);
-        assert.equal(
-            wrapper
-                .first()
-                .find('span')
-                .text(),
-            'Has been published'
-        );
+        expect(queryByText('ra.boolean.true')).toBeNull();
+        expect(queryByText('Has been published')).not.toBeNull();
     });
 
     it('should display cross and falsy text if value is false', () => {
-        const wrapper = shallow(
+        const { queryByText, getByRole } = render(
             <BooleanField
                 record={{ published: false }}
                 source="published"
                 resource="posts"
             />
         );
-
-        assert.ok(wrapper.first().is('WithStyles(Typography)'));
-        assert.equal(wrapper.first().find('pure(Clear)').length, 1);
-        assert.equal(
-            wrapper
-                .first()
-                .find('span')
-                .text(),
-            'ra.boolean.false'
-        );
+        expect(queryByText('ra.boolean.true')).toBeNull();
+        expect(getByRole('presentation').dataset.testid).toBe('false');
+        expect(queryByText('ra.boolean.false')).not.toBeNull();
     });
 
-    it('should display tick and custom falsy text if value is true', () => {
-        const wrapper = shallow(
+    it('should use valueLabelFalse for custom falsy text', () => {
+        const { queryByText } = render(
             <BooleanField
                 record={{ published: false }}
                 source="published"
                 resource="posts"
-                valueLabelFalse="Has not been published yet"
+                valueLabelFalse="Has not been published"
             />
         );
-        assert.ok(wrapper.first().is('WithStyles(Typography)'));
-        assert.equal(wrapper.first().find('pure(Clear)').length, 1);
-        assert.equal(
-            wrapper
-                .first()
-                .find('span')
-                .text(),
-            'Has not been published yet'
-        );
+        expect(queryByText('ra.boolean.false')).toBeNull();
+        expect(queryByText('Has not been published')).not.toBeNull();
     });
 
     it('should not display anything if value is null', () => {
-        const wrapper = shallow(
+        const { queryByText } = render(
             <BooleanField record={{ published: null }} source="published" />
         );
-
-        assert.equal(wrapper.first().children().length, 0);
+        expect(queryByText('ra.boolean.true')).toBeNull();
+        expect(queryByText('ra.boolean.false')).toBeNull();
     });
 
-    it('should use custom className', () =>
-        assert.deepEqual(
-            shallow(
-                <BooleanField
-                    record={{ foo: true }}
-                    source="foo"
-                    className="foo"
-                />
-            ).prop('className'),
-            'foo'
-        ));
+    it('should use custom className', () => {
+        const { container } = render(
+            <BooleanField record={{ foo: true }} source="foo" className="foo" />
+        );
+        expect(container.firstChild.classList.contains('foo')).toBe(true);
+    });
 
     it('should handle deep fields', () => {
-        const wrapper = shallow(
+        const { queryByText } = render(
             <BooleanField record={{ foo: { bar: true } }} source="foo.bar" />
         );
-        assert.ok(wrapper.first().is('WithStyles(Typography)'));
-        assert.equal(wrapper.first().find('pure(Done)').length, 1);
+        expect(queryByText('ra.boolean.true')).not.toBeNull();
     });
 });

packages/ra-ui-materialui/src/input/BooleanInput.spec.js

@@ -1,44 +1,43 @@
-import assert from 'assert';
-import { shallow } from 'enzyme';
 import React from 'react';
+import expect from 'expect';
+import { render, cleanup } from 'react-testing-library';
 
 import { BooleanInput } from './BooleanInput';
 
 describe('<BooleanInput />', () => {
-    it('should render as a mui Toggle', () => {
-        const wrapper = shallow(<BooleanInput source="foo" input={{}} />)
-            .find('WithStyles(FormControlLabel)')
-            .shallow()
-            .dive();
-        const choices = wrapper.find('WithStyles(Switch)');
-        assert.equal(choices.length, 1);
+    afterEach(cleanup);
+
+    it('should render as a checkbox', () => {
+        const { getByLabelText } = render(
+            <BooleanInput resource="foo" source="bar" input={{}} />
+        );
+        expect(getByLabelText('resources.foo.fields.bar').type).toBe(
+            'checkbox'
+        );
     });
 
     it('should be checked if the value is true', () => {
-        const wrapper = shallow(
-            <BooleanInput source="foo" input={{ value: true }} />
-        )
-            .find('WithStyles(FormControlLabel)')
-            .shallow()
-            .dive();
-        assert.equal(wrapper.find('WithStyles(Switch)').prop('checked'), true);
+        const { getByLabelText } = render(
+            <BooleanInput resource="foo" source="bar" input={{ value: true }} />
+        );
+        expect(getByLabelText('resources.foo.fields.bar').checked).toBe(true);
     });
 
     it('should not be checked if the value is false', () => {
-        const wrapper = shallow(
-            <BooleanInput source="foo" input={{ value: false }} />
-        )
-            .find('WithStyles(FormControlLabel)')
-            .shallow()
-            .dive();
-        assert.equal(wrapper.find('WithStyles(Switch)').prop('checked'), false);
+        const { getByLabelText } = render(
+            <BooleanInput
+                resource="foo"
+                source="bar"
+                input={{ value: false }}
+            />
+        );
+        expect(getByLabelText('resources.foo.fields.bar').checked).toBe(false);
     });
 
     it('should not be checked if the value is undefined', () => {
-        const wrapper = shallow(<BooleanInput source="foo" input={{}} />)
-            .find('WithStyles(FormControlLabel)')
-            .shallow()
-            .dive();
-        assert.equal(wrapper.find('WithStyles(Switch)').prop('checked'), false);
+        const { getByLabelText } = render(
+            <BooleanInput resource="foo" source="bar" input={{}} />
+        );
+        expect(getByLabelText('resources.foo.fields.bar').checked).toBe(false);
     });
 });