From 17f12ab556d65a9e0c51bd50fe9ce76a16a5ce75 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Wed, 5 Jun 2019 12:17:52 +0200 Subject: [PATCH 01/67] Ensure List Data Update when Default Filters Change Fix #3251 #3132 --- .../src/controller/ListController.spec.tsx | 22 ++++ .../ra-core/src/controller/ListController.tsx | 107 +++++++++--------- 2 files changed, 73 insertions(+), 56 deletions(-) diff --git a/packages/ra-core/src/controller/ListController.spec.tsx b/packages/ra-core/src/controller/ListController.spec.tsx index 3a3534c69b6..350a2c9e26b 100644 --- a/packages/ra-core/src/controller/ListController.spec.tsx +++ b/packages/ra-core/src/controller/ListController.spec.tsx @@ -41,6 +41,11 @@ describe('ListController', () => { toggleItem: jest.fn(), total: 100, translate: jest.fn(), + perPage: 25, + sort: { + field: 'id', + order: 'ASC', + }, }; describe('setFilters', () => { @@ -113,6 +118,23 @@ describe('ListController', () => { expect(props.changeListParams.mock.calls[0][1].filter).toEqual({}); }); + it('should update data if permanent filters change', () => { + expect.assertions(2); + const props = { + ...defaultProps, + debounce: 200, + crudGetList: jest.fn(), + filter: { foo: 1 }, + children: fakeComponent, + }; + + const wrapper = shallow(); + expect(props.crudGetList.mock.calls[0][3]).toEqual({ foo: 1 }); + + wrapper.setProps({ filter: { foo: 2 } }); + expect(props.crudGetList.mock.calls[1][3]).toEqual({ foo: 2 }); + }); + afterEach(() => { clock.uninstall(); }); diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx index a2191b78edb..c87ac6da589 100644 --- a/packages/ra-core/src/controller/ListController.tsx +++ b/packages/ra-core/src/controller/ListController.tsx @@ -1,4 +1,3 @@ -/* eslint no-console: ["error", { allow: ["warn", "error"] }] */ import { Component, isValidElement, @@ -207,24 +206,14 @@ export class UnconnectedListController extends Component< componentWillReceiveProps(nextProps: Props & EnhancedProps) { if ( + nextProps.version !== this.props.version || nextProps.resource !== this.props.resource || - nextProps.query.sort !== this.props.query.sort || - nextProps.query.order !== this.props.query.order || - nextProps.query.page !== this.props.query.page || - nextProps.query.perPage !== this.props.query.perPage || - !isEqual(nextProps.query.filter, this.props.query.filter) || + !isEqual(nextProps.query, this.props.query) || !isEqual(nextProps.filter, this.props.filter) || !isEqual(nextProps.sort, this.props.sort) || !isEqual(nextProps.perPage, this.props.perPage) ) { - this.updateData( - Object.keys(nextProps.query).length > 0 - ? nextProps.query - : nextProps.params - ); - } - if (nextProps.version !== this.props.version) { - this.updateData(); + this.updateData(nextProps); } } @@ -244,52 +233,29 @@ export class UnconnectedListController extends Component< return true; } - /** - * Check if user has already set custom sort, page, or filters for this list - * - * User params come from the Redux store as the params props. By default, - * this object is: - * - * { filter: {}, order: null, page: 1, perPage: null, sort: null } - * - * To check if the user has custom params, we must compare the params - * to these initial values. - * - * @param {object} params - */ - hasCustomParams(params: ListParams) { - return ( - params && - params.filter && - (Object.keys(params.filter).length > 0 || - params.order != null || - params.page !== 1 || - params.perPage != null || - params.sort != null) - ); - } - /** * Merge list params from 4 different sources: * - the query string * - the params stored in the state (from previous navigation) - * - the filter defaultValues * - the props passed to the List component */ - getQuery() { + getQuery(props = this.props) { const query: Partial = - Object.keys(this.props.query).length > 0 - ? this.props.query - : this.hasCustomParams(this.props.params) - ? { ...this.props.params } - : { filter: this.props.filterDefaultValues || {} }; + Object.keys(props.query).length > 0 + ? mergeWithDefaultFilters(props.query, props.filter) + : hasCustomParams(props.params) + ? mergeWithDefaultFilters(props.params, props.filter) + : mergeWithDefaultFilters( + { filter: props.filterDefaultValues || {} }, + props.filter + ); if (!query.sort) { - query.sort = this.props.sort.field; - query.order = this.props.sort.order; + query.sort = props.sort.field; + query.order = props.sort.order; } if (!query.perPage) { - query.perPage = this.props.perPage; + query.perPage = props.perPage; } if (!query.page) { query.page = 1; @@ -302,19 +268,19 @@ export class UnconnectedListController extends Component< return query.filter || {}; } - updateData(query?: any) { - const params = query || this.getQuery(); - const { sort, order, page = 1, perPage, filter } = params; + updateData(props = this.props) { + const query = this.getQuery(props); + + const { sort, order, page = 1, perPage, filter } = query; const pagination = { - page: parseInt(page, 10), - perPage: parseInt(perPage, 10), + page, + perPage, }; - const permanentFilter = this.props.filter; this.props.crudGetList( this.props.resource, pagination, { field: sort, order }, - { ...filter, ...permanentFilter } + filter ); } @@ -429,6 +395,35 @@ export class UnconnectedListController extends Component< } } +/** + * Check if user has already set custom sort, page, or filters for this list + * + * User params come from the Redux store as the params props. By default, + * this object is: + * + * { filter: {}, order: null, page: 1, perPage: null, sort: null } + * + * To check if the user has custom params, we must compare the params + * to these initial values. + * + * @param {object} params + */ +const hasCustomParams = (params: ListParams) => + params && + ((params.filter && Object.keys(params.filter).length > 0) || + params.order != null || + params.page !== 1 || + params.perPage != null || + params.sort != null); + +const mergeWithDefaultFilters = ( + params: Partial, + defaultFilters: any +) => ({ + ...params, + filter: { ...params.filter, ...defaultFilters }, +}); + const injectedProps = [ 'basePath', 'currentSort', From 034ab33eaf219f156f947dd2f84032123c417ee2 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Wed, 5 Jun 2019 14:18:04 +0200 Subject: [PATCH 02/67] Avoid leaking permanent filters to children --- .../ra-core/src/controller/ListController.tsx | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx index c87ac6da589..b7a720c9e8f 100644 --- a/packages/ra-core/src/controller/ListController.tsx +++ b/packages/ra-core/src/controller/ListController.tsx @@ -242,13 +242,10 @@ export class UnconnectedListController extends Component< getQuery(props = this.props) { const query: Partial = Object.keys(props.query).length > 0 - ? mergeWithDefaultFilters(props.query, props.filter) + ? props.query : hasCustomParams(props.params) - ? mergeWithDefaultFilters(props.params, props.filter) - : mergeWithDefaultFilters( - { filter: props.filterDefaultValues || {} }, - props.filter - ); + ? props.params + : { filter: props.filterDefaultValues || {} }; if (!query.sort) { query.sort = props.sort.field; @@ -280,7 +277,7 @@ export class UnconnectedListController extends Component< this.props.resource, pagination, { field: sort, order }, - filter + { ...filter, ...props.filter } ); } @@ -416,14 +413,6 @@ const hasCustomParams = (params: ListParams) => params.perPage != null || params.sort != null); -const mergeWithDefaultFilters = ( - params: Partial, - defaultFilters: any -) => ({ - ...params, - filter: { ...params.filter, ...defaultFilters }, -}); - const injectedProps = [ 'basePath', 'currentSort', From 3f2711fb2d58a9ef3ee7eb5258d59a3339070c93 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Thu, 6 Jun 2019 19:49:33 +0200 Subject: [PATCH 03/67] test permanent filters are not passed as displayed ones --- packages/ra-core/src/controller/ListController.spec.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ra-core/src/controller/ListController.spec.tsx b/packages/ra-core/src/controller/ListController.spec.tsx index 350a2c9e26b..7e04545a0f0 100644 --- a/packages/ra-core/src/controller/ListController.spec.tsx +++ b/packages/ra-core/src/controller/ListController.spec.tsx @@ -119,17 +119,22 @@ describe('ListController', () => { }); it('should update data if permanent filters change', () => { - expect.assertions(2); + expect.assertions(4); + + const children = jest.fn(); const props = { ...defaultProps, debounce: 200, crudGetList: jest.fn(), filter: { foo: 1 }, - children: fakeComponent, + children, }; const wrapper = shallow(); + expect(props.crudGetList.mock.calls[0][3]).toEqual({ foo: 1 }); + expect(children.mock.calls[0][0].displayedFilters).toEqual({}); + expect(children.mock.calls[0][0].filterValues).toEqual({}); wrapper.setProps({ filter: { foo: 2 } }); expect(props.crudGetList.mock.calls[1][3]).toEqual({ foo: 2 }); From b5f29286bcec191d96ff24cba340bceb8104da30 Mon Sep 17 00:00:00 2001 From: Scott Sauyet Date: Wed, 19 Jun 2019 11:33:10 -0400 Subject: [PATCH 04/67] Fixing minor typo --- docs/Inputs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Inputs.md b/docs/Inputs.md index 519a9ea365e..dafebeae5dc 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -1288,7 +1288,7 @@ const ItemEdit = (props) => ( ```html - + ``` From d71a34f7fcd1735e1ec0857d5d344d8fb96d3708 Mon Sep 17 00:00:00 2001 From: Francois Zaninotto Date: Thu, 20 Jun 2019 18:28:33 +0200 Subject: [PATCH 05/67] Fix dead link to material-ui doc in List customization Closes #3350 --- docs/List.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/List.md b/docs/List.md index db9676a68a9..a105ae27feb 100644 --- a/docs/List.md +++ b/docs/List.md @@ -646,7 +646,7 @@ const Aside = ({ data, ids }) => ( ### CSS API -The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: +The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys: * `root`: alternative to using `className`. Applied to the root element. * `header`: applied to the page header From b2a6f9794fb8c599bec3f835894b5e14d814b8cb Mon Sep 17 00:00:00 2001 From: Kmaschta Date: Fri, 21 Jun 2019 09:30:07 +0200 Subject: [PATCH 06/67] Revert "[RFR] Fix dead link to material-ui doc in List customization" --- docs/List.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/List.md b/docs/List.md index a105ae27feb..db9676a68a9 100644 --- a/docs/List.md +++ b/docs/List.md @@ -646,7 +646,7 @@ const Aside = ({ data, ids }) => ( ### CSS API -The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys: +The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: * `root`: alternative to using `className`. Applied to the root element. * `header`: applied to the page header From 8fa48035744f48ca036ac95cea64b489031cd2be Mon Sep 17 00:00:00 2001 From: Kmaschta Date: Fri, 21 Jun 2019 09:33:59 +0200 Subject: [PATCH 07/67] Link to the v1 of Material UI --- docs/List.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/List.md b/docs/List.md index db9676a68a9..6978bd9ecc5 100644 --- a/docs/List.md +++ b/docs/List.md @@ -646,7 +646,7 @@ const Aside = ({ data, ids }) => ( ### CSS API -The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: +The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v1.material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: * `root`: alternative to using `className`. Applied to the root element. * `header`: applied to the page header From 42136ef933c25a3bb2c49f22b47642536466e1ed Mon Sep 17 00:00:00 2001 From: Kmaschta Date: Mon, 24 Jun 2019 23:33:40 +0200 Subject: [PATCH 08/67] Fix DashboardMenuItem className prop --- .../ra-ui-materialui/src/layout/DashboardMenuItem.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js b/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js index c09b7f0b9b4..2b9eba169d5 100644 --- a/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js +++ b/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js @@ -5,13 +5,7 @@ import { translate } from 'ra-core'; import MenuItemLink from './MenuItemLink'; -const DashboardMenuItem = ({ - className, - locale, - onClick, - translate, - ...props -}) => ( +const DashboardMenuItem = ({ locale, onClick, translate, ...props }) => ( Date: Tue, 25 Jun 2019 14:34:15 +0200 Subject: [PATCH 09/67] Prevent Event propagation after Delete Confirm modal close Fixes #3359 When the DeleteWithConfirm modal was closed, it behaved like we clicked on the Datagrid row (triggering the `rowClick` handler of Datagrid) --- .../ra-ui-materialui/src/button/DeleteWithConfirmButton.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js index bae35e03988..ef168e478d6 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js +++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js @@ -48,11 +48,12 @@ class DeleteWithConfirmButton extends Component { state = { isOpen: false }; handleClick = e => { - this.setState({ isOpen: true }); e.stopPropagation(); + this.setState({ isOpen: true }); }; - handleDialogClose = () => { + handleDialogClose = evt => { + evt.stopPropagation(); this.setState({ isOpen: false }); }; From f0bfa9af12ccde9b2f17c12000e0e39e0bdc648c Mon Sep 17 00:00:00 2001 From: Batian Date: Tue, 25 Jun 2019 15:35:23 +0300 Subject: [PATCH 10/67] Fix dead link to bulk action buttons in 'Actions.md' --- docs/Actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Actions.md b/docs/Actions.md index 8806a55cacd..f478639066d 100644 --- a/docs/Actions.md +++ b/docs/Actions.md @@ -791,7 +791,7 @@ Almost everything we saw before about custom actions is true for custom `List` b * Bulk action button components receive the following props: `resource`, `selectedIds` and `filterValues` * They do not receive the current record in the `record` prop as there are many of them. -You can find a complete example of a custom Bulk Action button in the `List` documentation, in the [Bulk Action Buttons](/List.html#bulk-action-buttons) section. +You can find a complete example of a custom Bulk Action button in the `List` documentation, in the [Bulk Action Buttons](./List.md#bulk-action-buttons) section. ## Conclusion From 08d180f1b04bead9c7ecab1f4502fbc45f5b133a Mon Sep 17 00:00:00 2001 From: Francois Zaninotto Date: Tue, 25 Jun 2019 20:02:51 +0200 Subject: [PATCH 11/67] Update DeleteWithConfirmButton.js --- .../ra-ui-materialui/src/button/DeleteWithConfirmButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js index ef168e478d6..2c3e761cf7f 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js +++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js @@ -52,8 +52,8 @@ class DeleteWithConfirmButton extends Component { this.setState({ isOpen: true }); }; - handleDialogClose = evt => { - evt.stopPropagation(); + handleDialogClose = e => { + e.stopPropagation(); this.setState({ isOpen: false }); }; From d549079a53ee99eb90ae0f335c44e80cf34dc3bc Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Tue, 25 Jun 2019 20:23:04 +0200 Subject: [PATCH 12/67] Fix broken links to material ui v1 documentation Closes #3364 --- README.md | 4 ++-- docs/Admin.md | 4 ++-- docs/Fields.md | 6 ++---- docs/Inputs.md | 18 +++++++++--------- docs/List.md | 6 +++--- docs/Theming.md | 8 ++++---- docs/Tutorial.md | 8 ++++---- docs/index.md | 2 +- .../ra-core/src/actions/notificationActions.ts | 2 +- packages/ra-ui-materialui/README.md | 2 +- packages/react-admin/README.md | 2 +- 11 files changed, 30 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index e1b3fb63eaf..47a478ad193 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ A frontend Framework for building admin applications running in the browser on t ## Features * Adapts to any backend (REST, GraphQL, SOAP, etc.) -* Powered by [material-ui](https://material-ui.com/), [redux](https://redux.js.org/), [redux-form](https://redux-form.com/7.3.0/), [redux-saga](https://redux-saga.js.org/), [react-router](https://reacttraining.com/react-router/), [recompose](https://github.com/acdlite/recompose), [reselect](https://github.com/reduxjs/reselect) and a few more +* Powered by [material-ui](https://v1.material-ui.com/), [redux](https://redux.js.org/), [redux-form](https://redux-form.com/7.3.0/), [redux-saga](https://redux-saga.js.org/), [react-router](https://reacttraining.com/react-router/), [recompose](https://github.com/acdlite/recompose), [reselect](https://github.com/reduxjs/reselect) and a few more * Super-fast UI thanks to optimistic rendering (renders before the server returns) * Undo updates and deletes for a few seconds * Complete documentation @@ -144,7 +144,7 @@ See the [Data Providers documentation](https://marmelab.com/react-admin/DataProv ## Batteries Included But Removable -React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://www.material-ui.com/#/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design. +React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://v1.material-ui.com/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design. ## Examples diff --git a/docs/Admin.md b/docs/Admin.md index 38d682b483d..b577044b572 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -222,7 +222,7 @@ See the [Theming documentation](./Theming.md#using-a-custom-menu) for more detai ## `theme` -Material UI supports [theming](http://www.material-ui.com/#/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop: +Material UI supports [theming](http://v1.material-ui.com/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop: ```jsx import { createMuiTheme } from '@material-ui/core/styles'; @@ -242,7 +242,7 @@ const App = () => ( ![Dark theme](./img/dark-theme.png) -For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://material-ui.com/customization/themes/). +For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://v1.material-ui.com/customization/themes/). ## `appLayout` diff --git a/docs/Fields.md b/docs/Fields.md index 85dba106785..53b5b7c8388 100644 --- a/docs/Fields.md +++ b/docs/Fields.md @@ -163,7 +163,7 @@ If you need to override it, you can use the `valueLabelTrue` and `valueLabelFals ## `` -Displays a value inside a ["Chip"](http://www.material-ui.com/#/components/chip), which is Material UI's term for a label. +Displays a value inside a ["Chip"](http://v1.material-ui.com/demos/chip), which is Material UI's term for a label. ```jsx import { ChipField } from 'react-admin'; @@ -407,8 +407,6 @@ By default, the text is built by - finding a choice where the 'id' property equals the field value - using the 'name' property an the option text -**Warning**: This component name may conflict with material-ui's [``](http://www.material-ui.com/#/components/select-field) if you import both. - You can also customize the properties to use for the lookup value and text, thanks to the 'optionValue' and 'optionText' attributes. ```jsx @@ -769,7 +767,7 @@ import { UrlField } from 'react-admin'; ## Styling Fields -All field components accept a `className` prop, allowing you to customize their style to your liking. We advise you to use the Material UI styling solution, JSS, to generate those classes. See their [documentation](https://material-ui.com/customization/css-in-js/#api) about that. +All field components accept a `className` prop, allowing you to customize their style to your liking. We advise you to use the Material UI styling solution, JSS, to generate those classes. See their [documentation](https://v1.material-ui.com/customization/css-in-js/#api) about that. {% raw %} ```jsx diff --git a/docs/Inputs.md b/docs/Inputs.md index dafebeae5dc..ad84dbc0644 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -376,7 +376,7 @@ import FavoriteIcon from '@material-ui/icons/Favorite'; ![CustomBooleanInputCheckIcon](./img/custom-switch-icon.png) -Refer to [Material UI Switch documentation](http://www.material-ui.com/#/components/switch) for more details. +Refer to [Material UI Switch documentation](http://v1.material-ui.com/api/switch) for more details. `` renders as a dropdown list, allowing to choose between true, false, and null values. @@ -465,11 +465,11 @@ import { FavoriteBorder, Favorite } from '@material-ui/icons'; ``` {% endraw %} -Refer to [Material UI Checkbox documentation](https://v1-5-0.material-ui.com/api/checkbox/) for more details. +Refer to [Material UI Checkbox documentation](https://v1.material-ui.com/api/checkbox/) for more details. ## `` -Ideal for editing dates, `` renders a standard browser [Date Picker](https://material-ui.com/demos/pickers/#date-pickers), so the appearance depends on the browser (and falls back to a text input on safari). +Ideal for editing dates, `` renders a standard browser [Date Picker](https://v1.material-ui.com/demos/pickers/#date-pickers), so the appearance depends on the browser (and falls back to a text input on safari). ```jsx import { DateInput } from 'react-admin'; @@ -483,7 +483,7 @@ import { DateInput } from 'react-admin'; ## `` -An input for editing dates with time. `` renders a standard browser [Date and Time Picker](https://material-ui.com/demos/pickers/#date-amp-time-pickers), so the appearance depends on the browser (and falls back to a text input on safari). +An input for editing dates with time. `` renders a standard browser [Date and Time Picker](https://v1.material-ui.com/demos/pickers/#date-amp-time-pickers), so the appearance depends on the browser (and falls back to a text input on safari). ```jsx import { DateTimeInput } from 'react-admin'; @@ -716,7 +716,7 @@ Lastly, use the `options` attribute if you want to override any of Material UI's ``` {% endraw %} -Refer to [Material UI RadioGroup documentation](http://www.material-ui.com/#/components/radio-button) for more details. +Refer to [Material UI RadioGroup documentation](http://v1.material-ui.com/api/radio-group) for more details. **Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `` with [``](#referenceinput), and leave the `choices` empty: @@ -961,7 +961,7 @@ You can customize the rich text editor toolbar using the `toolbar` attribute, as ## `` -To let users choose a value in a list using a dropdown, use ``. It renders using [Material ui's ``](http://www.material-ui.com/#/components/select-field). Set the `choices` attribute to determine the options (with `id`, `name` tuples): +To let users choose a value in a list using a dropdown, use ``. It renders using [Material ui's ``](http://www.material-ui.com/#/components/select). Set the `choices` attribute to determine the options (with `id`, `name` tuples): +To let users choose several values in a list using a dropdown, use ``. It renders using [Material ui's ` ``` {% endraw %} -Refer to [the Select documentation](http://www.material-ui.com/#/components/select) for more details. +Refer to [the Select documentation](http://v1.material-ui.com/api/select) for more details. The `SelectArrayInput` component **cannot** be used inside a `ReferenceInput` but can be used inside a `ReferenceArrayInput`. diff --git a/docs/List.md b/docs/List.md index 6978bd9ecc5..78dc00b70b3 100644 --- a/docs/List.md +++ b/docs/List.md @@ -400,7 +400,7 @@ It does so by inspecting its `context` prop. **Tip**: Don't mix up this `filters` prop, expecting a React element, with the `filter` props, which expects an object to define permanent filters (see below). -The `Filter` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: +The `Filter` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v1.material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: * `form`: applied to the root element when rendering as a form. * `button`: applied to the root element when rendering as a button. @@ -929,7 +929,7 @@ const PostList = props => ( ### CSS API -The `Datagrid` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: +The `Datagrid` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v1.material-ui.com/customization/overrides/#overriding-with-classes)). This property accepts the following keys: * `table`: alternative to using `className`. Applied to the root element. * `tbody`: applied to the tbody @@ -995,7 +995,7 @@ export default withStyles(styles)(PostList); ## The `` component -For mobile devices, a `` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `` component serves that purpose, leveraging [material-ui's `` and `` components](https://v1-5-0.material-ui.com/demos/lists/). You can use it as `` or `` child: +For mobile devices, a `` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `` component serves that purpose, leveraging [material-ui's `` and `` components](https://v1.material-ui.com/demos/lists/). You can use it as `` or `` child: ```jsx // in src/posts.js diff --git a/docs/Theming.md b/docs/Theming.md index e798426fe08..e20e76d8c03 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -266,7 +266,7 @@ export const PostList = (props) => ( ## Using a Predefined Theme -Material UI also supports [complete theming](http://www.material-ui.com/#/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `` component, in the `theme` prop (along with `createMuiTheme()`). +Material UI also supports [complete theming](http://v1.material-ui.com/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `` component, in the `theme` prop (along with `createMuiTheme()`). ```jsx import { createMuiTheme } from '@material-ui/core/styles'; @@ -288,7 +288,7 @@ const App = () => ( ## Writing a Custom Theme -If you need more fine tuning, you'll need to write your own `theme` object, following [Material UI themes documentation](https://material-ui.com/customization/themes/). Material UI merges custom theme objects with the default theme. +If you need more fine tuning, you'll need to write your own `theme` object, following [Material UI themes documentation](https://v1.material-ui.com/customization/themes/). Material UI merges custom theme objects with the default theme. ```jsx import { createMuiTheme } from '@material-ui/core/styles'; @@ -338,7 +338,7 @@ The `muiTheme` object contains the following keys: * `spacing` * `zIndex` -**Tip**: Check [Material UI default theme documentation](https://material-ui.com/customization/default-theme/) to see the default values and meaning for these keys. +**Tip**: Check [Material UI default theme documentation](https://v1.material-ui.com/customization/default-theme/) to see the default values and meaning for these keys. Once your theme is defined, pass it to the `` component, in the `theme` prop. @@ -624,7 +624,7 @@ const App = () => ( For more drastic changes of the top component, you will probably want to create an `` from scratch instead of just passing children to react-admin's ``. -By default, React-admin uses [Material-ui's `` component](https://material-ui.com/api/app-bar/) together with [react-headroom](https://github.com/KyleAMathews/react-headroom) to hide the `AppBar` on scroll. Here is an example top bar rebuilt from scratch to remove the "headroom" effect: +By default, React-admin uses [Material-ui's `` component](https://v1.material-ui.com/api/app-bar/) together with [react-headroom](https://github.com/KyleAMathews/react-headroom) to hide the `AppBar` on scroll. Here is an example top bar rebuilt from scratch to remove the "headroom" effect: ```jsx // in src/MyAppBar.js diff --git a/docs/Tutorial.md b/docs/Tutorial.md index 6fc2a2ec87a..e09a5955dd8 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -266,7 +266,7 @@ Yes, you can replace any of react-admin's components with your own! That means r ## Customizing Styles -The `MyUrlField` component is a perfect opportunity to illustrate how to customize styles. React-admin relies on [material-ui](https://material-ui.com/), a set of React components modeled after Google's [Material Design UI Guidelines](https://material.io/). Material-ui uses [JSS](https://github.com/cssinjs/jss), a CSS-in-JS solution, for styling components. Let's take advantage of the capabilities of JSS to remove the underline from the link and add an icon: +The `MyUrlField` component is a perfect opportunity to illustrate how to customize styles. React-admin relies on [material-ui](https://v1.material-ui.com/), a set of React components modeled after Google's [Material Design UI Guidelines](https://material.io/). Material-ui uses [JSS](https://github.com/cssinjs/jss), a CSS-in-JS solution, for styling components. Let's take advantage of the capabilities of JSS to remove the underline from the link and add an icon: ```jsx // in src/MyUrlField.js @@ -297,7 +297,7 @@ export default withStyles(styles)(MyUrlField); In JSS, you define styles as a JavaScript object, using the JS variants of the CSS property names (e.g. `textDecoration` instead of `text-decoration`). To pass these styles to the component, wrap it inside a call to `withStyles(styles)`. JSS will create new class names for these styles, insert them (once) in the HTML document, and pass the new class names as a new `classes` property. Then, use these names in a `className` prop, as you would with a regular CSS class. -**Tip**: There is much more to JSS than what this tutorial covers. Read the [material-ui documentation](https://material-ui.com/) to learn more about theming, vendor prefixes, responsive utilities, etc. +**Tip**: There is much more to JSS than what this tutorial covers. Read the [material-ui documentation](https://v1.material-ui.com/) to learn more about theming, vendor prefixes, responsive utilities, etc. ## Handling Relationships @@ -732,7 +732,7 @@ export const PostList = (props) => ( ![Mobile post list](./img/tutorial_mobile_post_list.gif) -The `` component uses [material-ui's `` and `` components](http://www.material-ui.com/#/components/list), and expects functions as `primaryText`, `secondaryText`, and `tertiaryText` props. +The `` component uses [material-ui's `` and `` components](http://v1.material-ui.com/demos/lists), and expects functions as `primaryText`, `secondaryText`, and `tertiaryText` props. **Note:** Since JSONRestServer doesn't provide `views` or `published_at` values for posts, we switched to a custom API for those screenshots in order to demonstrate how to use some of the `SimpleList` component props. @@ -921,4 +921,4 @@ const App = () => ( React-admin was built with customization in mind. You can replace any react-admin component with a component of your own, for instance to display a custom list layout, or a different edit form for a given resource. -Now that you've completed the tutorial, continue reading the [react-admin documentation](http://marmelab.com/react-admin/), and read the [Material UI components documentation](http://www.material-ui.com/#/). +Now that you've completed the tutorial, continue reading the [react-admin documentation](http://marmelab.com/react-admin/), and read the [Material UI components documentation](http://v1.material-ui.com/). diff --git a/docs/index.md b/docs/index.md index 999b6ddf3e7..5b2a78242c5 100644 --- a/docs/index.md +++ b/docs/index.md @@ -141,7 +141,7 @@ See the [Data Providers documentation](./DataProviders.md) for details. ## Batteries Included But Removable -React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://www.material-ui.com/#/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design. +React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://v1.material-ui.com/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design. ## Contributing diff --git a/packages/ra-core/src/actions/notificationActions.ts b/packages/ra-core/src/actions/notificationActions.ts index 6b5d9b264f5..f2a17b13829 100644 --- a/packages/ra-core/src/actions/notificationActions.ts +++ b/packages/ra-core/src/actions/notificationActions.ts @@ -25,7 +25,7 @@ export interface ShowNotificationAction { /** * Shows a snackbar/toast notification on the screen * - * @see {@link https://material-ui.com/api/snackbar/|Material ui snackbar component} + * @see {@link https://v1.material-ui.com/api/snackbar/|Material ui snackbar component} * @see {@link https://material.io/guidelines/components/snackbars-toasts.html|Material ui reference document on snackbar} */ export const showNotification = ( diff --git a/packages/ra-ui-materialui/README.md b/packages/ra-ui-materialui/README.md index c4a3545836e..e3224a0e4ce 100644 --- a/packages/ra-ui-materialui/README.md +++ b/packages/ra-ui-materialui/README.md @@ -1,6 +1,6 @@ # ra-ui-material -UI Components for [react-admin](https://marmelab.com/react-admin/) with [MaterialUI](https://material-ui.com/). +UI Components for [react-admin](https://marmelab.com/react-admin/) with [MaterialUI](https://v1.material-ui.com/). ## License diff --git a/packages/react-admin/README.md b/packages/react-admin/README.md index f68f9a8ed78..053580df6f3 100644 --- a/packages/react-admin/README.md +++ b/packages/react-admin/README.md @@ -135,7 +135,7 @@ See the [Data Providers documentation](https://marmelab.com/react-admin/DataProv ## Batteries Included But Removable -React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://www.material-ui.com/#/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design. +React-admin is designed as a library of loosely coupled React components built on top of [material-ui](http://v1.material-ui.com/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design. ## Run the example From 1183ab147c61dfd7f391c16f09804ea15da9c3af Mon Sep 17 00:00:00 2001 From: Jesse Shieh Date: Tue, 25 Jun 2019 13:00:50 -0700 Subject: [PATCH 13/67] Remove unused import I followed the tutorial from scratch and got the following error, which this fixes. ``` ./src/App.js Line 2: 'Resource' is defined but never used no-unused-vars ``` --- docs/Tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Tutorial.md b/docs/Tutorial.md index 6fc2a2ec87a..0f1ebcefd34 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -66,7 +66,7 @@ Bootstrap the admin app by replacing the `src/App.js` by the following code: ```jsx // in src/App.js import React from 'react'; -import { Admin, Resource } from 'react-admin'; +import { Admin } from 'react-admin'; import jsonServerProvider from 'ra-data-json-server'; const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com'); From dcd6a282f3c355bb71022c26f0b7f3cda45a02a3 Mon Sep 17 00:00:00 2001 From: Jesse Shieh Date: Tue, 25 Jun 2019 22:12:09 -0700 Subject: [PATCH 14/67] Also update the deletion diff --- docs/Tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Tutorial.md b/docs/Tutorial.md index 0f1ebcefd34..3fb7af9d834 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -90,7 +90,7 @@ The `` component expects one or more `` child components. Each ```diff // in src/App.js import React from 'react'; --import { Admin, Resource } from 'react-admin'; +-import { Admin } from 'react-admin'; +import { Admin, Resource, ListGuesser } from 'react-admin'; import jsonServerProvider from 'ra-data-json-server'; From b31b7152c8c115d45435eeabbed1353a87854747 Mon Sep 17 00:00:00 2001 From: djhi Date: Wed, 26 Jun 2019 08:49:30 +0200 Subject: [PATCH 15/67] Review --- packages/ra-core/src/controller/ListController.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx index b7a720c9e8f..3c65d86d540 100644 --- a/packages/ra-core/src/controller/ListController.tsx +++ b/packages/ra-core/src/controller/ListController.tsx @@ -244,19 +244,19 @@ export class UnconnectedListController extends Component< Object.keys(props.query).length > 0 ? props.query : hasCustomParams(props.params) - ? props.params + ? { ...props.params } : { filter: props.filterDefaultValues || {} }; if (!query.sort) { query.sort = props.sort.field; query.order = props.sort.order; } - if (!query.perPage) { - query.perPage = props.perPage; - } - if (!query.page) { - query.page = 1; - } + + // @ts-ignore + query.perPage = parseInt(query.perPage ? query.perPage : props.perPage, 10); + // @ts-ignore + query.page = query.page ? parseInt(query.page, 10) : 1; + return query as ListParams; } From 708f3f6b9595f4e67d5288f2982f40ee6337e21e Mon Sep 17 00:00:00 2001 From: djhi Date: Wed, 26 Jun 2019 10:24:00 +0200 Subject: [PATCH 16/67] lint --- packages/ra-core/src/controller/ListController.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx index 3c65d86d540..a9f078e1c2a 100644 --- a/packages/ra-core/src/controller/ListController.tsx +++ b/packages/ra-core/src/controller/ListController.tsx @@ -252,8 +252,11 @@ export class UnconnectedListController extends Component< query.order = props.sort.order; } - // @ts-ignore - query.perPage = parseInt(query.perPage ? query.perPage : props.perPage, 10); + query.perPage = parseInt( + // @ts-ignore + query.perPage ? query.perPage : props.perPage, + 10 + ); // @ts-ignore query.page = query.page ? parseInt(query.page, 10) : 1; From 003abcea0d349ba84f7c2b07821e387a1eb0dbe0 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Tue, 2 Jul 2019 11:07:14 +0200 Subject: [PATCH 17/67] Prepare changelog for v2.9.4 --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6c7d6286ab..4f09cf66ff6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Changelog +## v2.9.4 + +* Fix closing elete confirmation modal triggers datagrid rowClick event ([3360](https://github.com/marmelab/react-admin/pull/3360)) ([Kmaschta](https://github.com/Kmaschta)) +* Fix `` does not use `className` prop ([3357](https://github.com/marmelab/react-admin/pull/3357)) ([Kmaschta](https://github.com/Kmaschta)) +* Fix unused import in tutorial ([3366](https://github.com/marmelab/react-admin/pull/3366)) ([jesseshieh](https://github.com/jesseshieh)) +* Fix broken links to material-ui v1 documentation ([3365](https://github.com/marmelab/react-admin/pull/3365)) ([fzaninotto](https://github.com/fzaninotto)) +* Fix broken link to Bulk Action Buttons in docs ([3361](https://github.com/marmelab/react-admin/pull/3361)) ([bmuthoga](https://github.com/bmuthoga)) +* Fix dead link to material-ui doc in List customization ([3353](https://github.com/marmelab/react-admin/pull/3353)) ([Kmaschta](https://github.com/Kmaschta)) +* Fix typo in Custom Input documentation ([3346](https://github.com/marmelab/react-admin/pull/3346)) ([CrossEye](https://github.com/CrossEye)) + ## v2.9.3 * Fix issue with `` when used inside a dialog ([3335](https://github.com/marmelab/react-admin/pull/3335)) ([griiettner](https://github.com/griiettner)) From 01085433df339caf5bb3e99ec0717e4277d433a5 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Tue, 2 Jul 2019 11:07:31 +0200 Subject: [PATCH 18/67] v2.9.4 --- lerna.json | 2 +- packages/ra-core/package.json | 2 +- packages/ra-data-json-server/package.json | 4 ++-- packages/ra-data-simple-rest/package.json | 4 ++-- packages/ra-ui-materialui/package.json | 4 ++-- packages/react-admin/package.json | 6 +++--- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/lerna.json b/lerna.json index a777156d123..52c458ac867 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "examples/data-generator", "packages/*" ], - "version": "2.9.3" + "version": "2.9.4" } diff --git a/packages/ra-core/package.json b/packages/ra-core/package.json index 037359f59c4..04e4f46641d 100644 --- a/packages/ra-core/package.json +++ b/packages/ra-core/package.json @@ -1,6 +1,6 @@ { "name": "ra-core", - "version": "2.9.3", + "version": "2.9.4", "description": "Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React", "files": [ "*.md", diff --git a/packages/ra-data-json-server/package.json b/packages/ra-data-json-server/package.json index da7b1a0a8ae..9adb37a8316 100644 --- a/packages/ra-data-json-server/package.json +++ b/packages/ra-data-json-server/package.json @@ -1,6 +1,6 @@ { "name": "ra-data-json-server", - "version": "2.9.3", + "version": "2.9.4", "description": "JSON Server data provider for react-admin", "main": "lib/index.js", "module": "esm/index.js", @@ -26,7 +26,7 @@ }, "dependencies": { "query-string": "~5.1.1", - "ra-core": "^2.9.3" + "ra-core": "^2.9.4" }, "devDependencies": { "cross-env": "^5.2.0", diff --git a/packages/ra-data-simple-rest/package.json b/packages/ra-data-simple-rest/package.json index 129d1fdfc1e..a1dff148c5f 100644 --- a/packages/ra-data-simple-rest/package.json +++ b/packages/ra-data-simple-rest/package.json @@ -1,6 +1,6 @@ { "name": "ra-data-simple-rest", - "version": "2.9.3", + "version": "2.9.4", "description": "Simple REST data provider for react-admin", "main": "lib/index.js", "module": "esm/index.js", @@ -26,7 +26,7 @@ }, "dependencies": { "query-string": "~5.1.1", - "ra-core": "^2.9.3" + "ra-core": "^2.9.4" }, "devDependencies": { "cross-env": "^5.2.0", diff --git a/packages/ra-ui-materialui/package.json b/packages/ra-ui-materialui/package.json index 2f6cbcdf4bd..2a0e6d8f483 100644 --- a/packages/ra-ui-materialui/package.json +++ b/packages/ra-ui-materialui/package.json @@ -1,6 +1,6 @@ { "name": "ra-ui-materialui", - "version": "2.9.3", + "version": "2.9.4", "description": "UI Components for react-admin with MaterialUI", "files": [ "*.md", @@ -52,7 +52,7 @@ "material-ui-chip-input": "1.0.0-beta.6 - 1.0.0-beta.8", "papaparse": "^4.1.4", "prop-types": "~15.6.1", - "ra-core": "^2.9.3", + "ra-core": "^2.9.4", "react-autosuggest": "^9.4.2", "react-dropzone": "~4.0.1", "react-headroom": "^2.2.4", diff --git a/packages/react-admin/package.json b/packages/react-admin/package.json index 28153bed5b9..796f605f0dd 100644 --- a/packages/react-admin/package.json +++ b/packages/react-admin/package.json @@ -1,6 +1,6 @@ { "name": "react-admin", - "version": "2.9.3", + "version": "2.9.4", "description": "A frontend Framework for building admin applications on top of REST services, using ES6, React and Material UI", "files": [ "*.md", @@ -34,8 +34,8 @@ "react-dom": "^16.3.0" }, "dependencies": { - "ra-core": "^2.9.3", + "ra-core": "^2.9.4", "ra-language-english": "^2.9.3", - "ra-ui-materialui": "^2.9.3" + "ra-ui-materialui": "^2.9.4" } } From 822d822a5b6819f2c285bc992ca74c230f2f6d02 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Tue, 2 Jul 2019 11:08:58 +0200 Subject: [PATCH 19/67] Fix typo in changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f09cf66ff6..e4abca92337 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## v2.9.4 -* Fix closing elete confirmation modal triggers datagrid rowClick event ([3360](https://github.com/marmelab/react-admin/pull/3360)) ([Kmaschta](https://github.com/Kmaschta)) +* Fix closing delete confirmation modal triggers datagrid rowClick event ([3360](https://github.com/marmelab/react-admin/pull/3360)) ([Kmaschta](https://github.com/Kmaschta)) * Fix `` does not use `className` prop ([3357](https://github.com/marmelab/react-admin/pull/3357)) ([Kmaschta](https://github.com/Kmaschta)) * Fix unused import in tutorial ([3366](https://github.com/marmelab/react-admin/pull/3366)) ([jesseshieh](https://github.com/jesseshieh)) * Fix broken links to material-ui v1 documentation ([3365](https://github.com/marmelab/react-admin/pull/3365)) ([fzaninotto](https://github.com/fzaninotto)) From 55fa38e48e5fbd88d022b735dbd87aecef8ba12a Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Thu, 4 Jul 2019 13:54:08 +0200 Subject: [PATCH 20/67] Ensure dataProvider callback sideeffect is called when using withDataProvider Fix #3369 --- packages/ra-core/src/util/withDataProvider.ts | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/packages/ra-core/src/util/withDataProvider.ts b/packages/ra-core/src/util/withDataProvider.ts index d1c42f5482f..4f92b5030db 100644 --- a/packages/ra-core/src/util/withDataProvider.ts +++ b/packages/ra-core/src/util/withDataProvider.ts @@ -13,6 +13,9 @@ interface DispatchProps { const mapDispatchToProps = (dispatch): DispatchProps => ({ dataProvider: (type, resource: string, payload: any, meta: any = {}) => new Promise((resolve, reject) => { + const onSuccess = get(meta, 'onSuccess', {}); + const onFailure = get(meta, 'onFailure', {}); + const action = { type: 'CUSTOM_FETCH', payload, @@ -21,15 +24,28 @@ const mapDispatchToProps = (dispatch): DispatchProps => ({ resource, fetch: type, onSuccess: { - ...get(meta, 'onSuccess', {}), - callback: ({ payload: response }) => resolve(response), + ...onSuccess, + callback: ({ payload: response }) => { + if (onSuccess.callback) { + onSuccess.callback(response); + } + + resolve(response); + }, }, onFailure: { ...get(meta, 'onFailure', {}), - callback: ({ error }) => - reject( - new Error(error.message ? error.message : error) - ), + callback: ({ error }) => { + const sanitizedError = new Error( + error.message ? error.message : error + ); + + if (onFailure.callback) { + onFailure.callback(sanitizedError); + } + + reject(sanitizedError); + }, }, }, }; From 54ae924188c2c4d5d0d36f4091301205f4608d1c Mon Sep 17 00:00:00 2001 From: firepol <1702718+firepol@users.noreply.github.com> Date: Fri, 5 Jul 2019 10:31:08 +0200 Subject: [PATCH 21/67] Fix #3387 Lists/Aside sum example --- docs/List.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/List.md b/docs/List.md index 78dc00b70b3..95ab943e045 100644 --- a/docs/List.md +++ b/docs/List.md @@ -637,7 +637,7 @@ const Aside = ({ data, ids }) => (
Posts stats - Total views: {ids.map(id => data[id]).reduce((sum, post) => sum + post.views)} + Total views: {ids.map(id => data[id]).reduce((sum, post) => sum + post.views, 0)}
); From 11350b7203028b330c420f28eb192d6ee56cabd5 Mon Sep 17 00:00:00 2001 From: Giacomo Graziosi Date: Mon, 8 Jul 2019 16:55:56 +0200 Subject: [PATCH 22/67] clarify the id requirement for Reference fields --- packages/ra-data-graphql-simple/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ra-data-graphql-simple/README.md b/packages/ra-data-graphql-simple/README.md index 9468c7136a7..8c857c3a841 100644 --- a/packages/ra-data-graphql-simple/README.md +++ b/packages/ra-data-graphql-simple/README.md @@ -60,6 +60,7 @@ class App extends Component { export default App; ``` +**Note**: the parser will generate additional `.id` properties for relation based types. These properties should be used as sources for reference based fields and inputs like `ReferenceField`: ``. ## Expected GraphQL Schema From 820f650f1a9a22bf06363512aea159766b57204b Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Sat, 13 Jul 2019 18:17:52 +0200 Subject: [PATCH 23/67] Fix click on dialog text triggers datagrid rowClick Closes #3394 --- packages/ra-ui-materialui/src/layout/Confirm.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js index 465b1ff7bac..b80e1107d0f 100644 --- a/packages/ra-ui-materialui/src/layout/Confirm.js +++ b/packages/ra-ui-materialui/src/layout/Confirm.js @@ -61,6 +61,10 @@ class Confirm extends Component { this.props.onConfirm(); }; + handleClick = e => { + e.stopPropagation(); + }; + render() { const { isOpen, @@ -80,6 +84,7 @@ class Confirm extends Component { From 8350d4a30f519caf7415d03bf14c6f31405b2232 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Sat, 13 Jul 2019 18:28:00 +0200 Subject: [PATCH 24/67] Fix List does not update if AUTH_GET_PERMISSIONS is slow Closes #3307 --- packages/ra-core/src/controller/ListController.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx index a2191b78edb..7dc831c7c32 100644 --- a/packages/ra-core/src/controller/ListController.tsx +++ b/packages/ra-core/src/controller/ListController.tsx @@ -237,7 +237,8 @@ export class UnconnectedListController extends Component< nextState === this.state && nextProps.data === this.props.data && nextProps.selectedIds === this.props.selectedIds && - nextProps.total === this.props.total + nextProps.total === this.props.total && + nextProps.permissions === this.props.permissions ) { return false; } From 3a23a677e0439f85483819661b43a7c4880ed699 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Sat, 13 Jul 2019 18:29:20 +0200 Subject: [PATCH 25/67] Revert "Fix List does not update if AUTH_GET_PERMISSIONS is slow" This reverts commit 8350d4a30f519caf7415d03bf14c6f31405b2232. --- packages/ra-core/src/controller/ListController.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx index 7dc831c7c32..a2191b78edb 100644 --- a/packages/ra-core/src/controller/ListController.tsx +++ b/packages/ra-core/src/controller/ListController.tsx @@ -237,8 +237,7 @@ export class UnconnectedListController extends Component< nextState === this.state && nextProps.data === this.props.data && nextProps.selectedIds === this.props.selectedIds && - nextProps.total === this.props.total && - nextProps.permissions === this.props.permissions + nextProps.total === this.props.total ) { return false; } From 19a63ee90f84944750418764f0a933b859a3dacf Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Sat, 13 Jul 2019 18:32:03 +0200 Subject: [PATCH 26/67] Fix List does not update if AUTH_GET_PERMISSIONS is slow Closes #3307 --- packages/ra-core/src/controller/ListController.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx index a2191b78edb..7dc831c7c32 100644 --- a/packages/ra-core/src/controller/ListController.tsx +++ b/packages/ra-core/src/controller/ListController.tsx @@ -237,7 +237,8 @@ export class UnconnectedListController extends Component< nextState === this.state && nextProps.data === this.props.data && nextProps.selectedIds === this.props.selectedIds && - nextProps.total === this.props.total + nextProps.total === this.props.total && + nextProps.permissions === this.props.permissions ) { return false; } From fb8aa85003a1fe35fd9e413b9a41adefde0faf6b Mon Sep 17 00:00:00 2001 From: Genadii Ganebnyi Date: Sun, 14 Jul 2019 10:55:38 +0300 Subject: [PATCH 27/67] Added link to Google Maps based component library --- docs/Ecosystem.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/Ecosystem.md b/docs/Ecosystem.md index 0ab6e63d0ef..638edca3602 100644 --- a/docs/Ecosystem.md +++ b/docs/Ecosystem.md @@ -71,6 +71,7 @@ See the [translation](./Translation.md#available-locales) page. - [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! - [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) - [zifnab87/ra-component-factory](https://github.com/zifnab87/ra-component-factory): centralized configuration of immutability/visibility of fields/menu-links/action buttons, easy re-ordering of fields/properties and tab reorganization based on permission roles - [ctbucha/bs-react-admin](https://github.com/ctbucha/bs-react-admin): [BuckleScript](https://bucklescript.github.io/) bindings for React Admin. From 8e56a65120725a018198a41963dd587604368c47 Mon Sep 17 00:00:00 2001 From: Matthieu Chaffotte Date: Mon, 15 Jul 2019 14:52:26 +0200 Subject: [PATCH 28/67] Change import function name generate import does not match used function. --- examples/data-generator/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/data-generator/README.md b/examples/data-generator/README.md index 962680b12b6..64067b36623 100644 --- a/examples/data-generator/README.md +++ b/examples/data-generator/README.md @@ -9,7 +9,7 @@ Used to simulate a REST / GraphQL backend in [react-admin](https://github.com/ma ## Usage ```js -import generator from 'data-generator-retail'; +import generateData from 'data-generator-retail'; const data = generateData(); // now do whatever you want with the data... From 300af45d00b63d3daa96bb6e0c5f2e0604d6ce7b Mon Sep 17 00:00:00 2001 From: Kmaschta Date: Mon, 15 Jul 2019 18:17:48 +0200 Subject: [PATCH 29/67] Improve ReferenceArrayInput error message when given bad data When passing a bad value to a ReferenceArrayInput, we have a cryptic error message. Now, we explain what data was badly formatted an its location. --- .../input/ReferenceArrayInputController.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx index ed86b3ed315..f905cd66b54 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx @@ -304,7 +304,23 @@ const makeMapStateToProps = () => [ getReferenceResource, getPossibleReferenceValues, - (_, { input: { value: referenceIds } }) => referenceIds || [], + (_, { resource, input }) => { + const { value: referenceIds } = input; + + if (!referenceIds) { + return []; + } + + if (Array.isArray(referenceIds)) { + return referenceIds; + } + + throw new Error( + ` expects value to be an array, but the value passed as '${resource}.${ + input.name + }' is type '${typeof referenceIds}': ${referenceIds}` + ); + }, ], (referenceState, possibleValues, inputIds) => ({ matchingReferences: getPossibleReferences( From 05233db6e838c033cf7e325d9d63d1d0293804d3 Mon Sep 17 00:00:00 2001 From: Yvan G <3403829+despatates@users.noreply.github.com> Date: Fri, 19 Jul 2019 09:30:54 +0200 Subject: [PATCH 30/67] fix(EmailField): prevent click bubbling in a datagrid with rowClick Similar to a54acf0152745ebb9bb262ccbec82f2862a3a011. Let's say we have a user list with an email field. Without this fix, clicking on the email was redirecting to user/edit before launching the mailto action. Now, it just execute the mailto action. --- packages/ra-ui-materialui/src/field/EmailField.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ra-ui-materialui/src/field/EmailField.tsx b/packages/ra-ui-materialui/src/field/EmailField.tsx index 75affccce1d..73f68a79f29 100644 --- a/packages/ra-ui-materialui/src/field/EmailField.tsx +++ b/packages/ra-ui-materialui/src/field/EmailField.tsx @@ -5,12 +5,16 @@ import pure from 'recompose/pure'; import sanitizeRestProps from './sanitizeRestProps'; import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types'; +// useful to prevent click bubbling in a datagrid with rowClick +const stopPropagation = e => e.stopPropagation(); + const EmailField: SFC< FieldProps & InjectedFieldProps & HtmlHTMLAttributes > = ({ className, source, record = {}, ...rest }) => ( {get(record, source)} From f7c1d0a5f6bfeb1394dfc5e030476dbb83d0cb29 Mon Sep 17 00:00:00 2001 From: Francois Zaninotto Date: Fri, 19 Jul 2019 14:12:44 +0200 Subject: [PATCH 31/67] add missing link to ReferenceArrayInput in reference documentation --- docs/Reference.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/Reference.md b/docs/Reference.md index 91476ddedb6..bc4f5cbb2b0 100644 --- a/docs/Reference.md +++ b/docs/Reference.md @@ -65,6 +65,7 @@ title: "Reference" * [``](./List.md#pagination) * [``](./Inputs.md#radiobuttongroupinput) * [``](./Fields.md#referencearrayfield) +* [``](./Inputs.md#referencearrayinput) * [``](./Fields.md#referencefield) * [``](./Inputs.md#referenceinput) * [``](./Fields.md#referencemanyfield) From 7694abe25756991c0a4160266c38dcce83158102 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Fri, 19 Jul 2019 23:11:15 +0200 Subject: [PATCH 32/67] Prepare changelog for v2.9.5 --- CHANGELOG.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e4abca92337..3f94a7e86e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # Changelog +## v2.9.5 + +* Fix data generator usage example ([3429](https://github.com/marmelab/react-admin/pull/3429)) ([mchaffotte](https://github.com/mchaffotte)) +* Fix `` error message when given bad data ([3415](https://github.com/marmelab/react-admin/pull/3415)) ([Kmaschta](https://github.com/Kmaschta)) +* Fix List does not update if `AUTH_GET_PERMISSIONS` is slow ([3408](https://github.com/marmelab/react-admin/pull/3408)) ([fzaninotto](https://github.com/fzaninotto)) +* Fix click on `` triggers `rowClick` in `` ([3426](https://github.com/marmelab/react-admin/pull/3426)) ([despatates](https://github.com/despatates)) +* Fix click on confirmation dialog text triggers `rowClick` in `` ([3407](https://github.com/marmelab/react-admin/pull/3407)) ([fzaninotto](https://github.com/fzaninotto)) +* Fix missing id requirement for Reference fields in `ra-data-graphql-simple` documentation ([3391](https://github.com/marmelab/react-admin/pull/3391)) ([esistgut](https://github.com/esistgut)) +* Fix type in `` documentation ([3388](https://github.com/marmelab/react-admin/pull/3388)) ([firepol](https://github.com/firepol)) +* Fix `callback` side effect is not called when using `withDataProvider` ([3385](https://github.com/marmelab/react-admin/pull/3385)) ([djhi](https://github.com/djhi)) +* Add mention of `react-admin-google-maps` component library in the Ecosystem documentation ([3410](https://github.com/marmelab/react-admin/pull/3410)) ([gganebnyi](https://github.com/gganebnyi)) + ## v2.9.4 * Fix closing delete confirmation modal triggers datagrid rowClick event ([3360](https://github.com/marmelab/react-admin/pull/3360)) ([Kmaschta](https://github.com/Kmaschta)) From f4ad22c222611ed2b8a7b0145c46ed792345d94a Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Fri, 19 Jul 2019 23:27:14 +0200 Subject: [PATCH 33/67] v2.9.5 --- examples/data-generator/package.json | 2 +- lerna.json | 2 +- packages/ra-core/package.json | 2 +- packages/ra-data-graphql-simple/package.json | 2 +- packages/ra-data-json-server/package.json | 4 ++-- packages/ra-data-simple-rest/package.json | 4 ++-- packages/ra-ui-materialui/package.json | 4 ++-- packages/react-admin/package.json | 6 +++--- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/data-generator/package.json b/examples/data-generator/package.json index 4c79e448898..142cc914127 100644 --- a/examples/data-generator/package.json +++ b/examples/data-generator/package.json @@ -1,6 +1,6 @@ { "name": "data-generator-retail", - "version": "2.9.3", + "version": "2.9.5", "homepage": "https://github.com/marmelab/react-admin/tree/master/examples/data-generator", "bugs": "https://github.com/marmelab/react-admin/issues", "license": "MIT", diff --git a/lerna.json b/lerna.json index 52c458ac867..f4b69c05141 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "examples/data-generator", "packages/*" ], - "version": "2.9.4" + "version": "2.9.5" } diff --git a/packages/ra-core/package.json b/packages/ra-core/package.json index 04e4f46641d..f40ad0336c7 100644 --- a/packages/ra-core/package.json +++ b/packages/ra-core/package.json @@ -1,6 +1,6 @@ { "name": "ra-core", - "version": "2.9.4", + "version": "2.9.5", "description": "Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React", "files": [ "*.md", diff --git a/packages/ra-data-graphql-simple/package.json b/packages/ra-data-graphql-simple/package.json index ea0d357c553..334c642460b 100644 --- a/packages/ra-data-graphql-simple/package.json +++ b/packages/ra-data-graphql-simple/package.json @@ -1,6 +1,6 @@ { "name": "ra-data-graphql-simple", - "version": "2.9.3", + "version": "2.9.5", "description": "A GraphQL simple data provider for react-admin", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/ra-data-json-server/package.json b/packages/ra-data-json-server/package.json index 9adb37a8316..8fc1268b42d 100644 --- a/packages/ra-data-json-server/package.json +++ b/packages/ra-data-json-server/package.json @@ -1,6 +1,6 @@ { "name": "ra-data-json-server", - "version": "2.9.4", + "version": "2.9.5", "description": "JSON Server data provider for react-admin", "main": "lib/index.js", "module": "esm/index.js", @@ -26,7 +26,7 @@ }, "dependencies": { "query-string": "~5.1.1", - "ra-core": "^2.9.4" + "ra-core": "^2.9.5" }, "devDependencies": { "cross-env": "^5.2.0", diff --git a/packages/ra-data-simple-rest/package.json b/packages/ra-data-simple-rest/package.json index a1dff148c5f..0472074fd46 100644 --- a/packages/ra-data-simple-rest/package.json +++ b/packages/ra-data-simple-rest/package.json @@ -1,6 +1,6 @@ { "name": "ra-data-simple-rest", - "version": "2.9.4", + "version": "2.9.5", "description": "Simple REST data provider for react-admin", "main": "lib/index.js", "module": "esm/index.js", @@ -26,7 +26,7 @@ }, "dependencies": { "query-string": "~5.1.1", - "ra-core": "^2.9.4" + "ra-core": "^2.9.5" }, "devDependencies": { "cross-env": "^5.2.0", diff --git a/packages/ra-ui-materialui/package.json b/packages/ra-ui-materialui/package.json index 2a0e6d8f483..9bc872dab6b 100644 --- a/packages/ra-ui-materialui/package.json +++ b/packages/ra-ui-materialui/package.json @@ -1,6 +1,6 @@ { "name": "ra-ui-materialui", - "version": "2.9.4", + "version": "2.9.5", "description": "UI Components for react-admin with MaterialUI", "files": [ "*.md", @@ -52,7 +52,7 @@ "material-ui-chip-input": "1.0.0-beta.6 - 1.0.0-beta.8", "papaparse": "^4.1.4", "prop-types": "~15.6.1", - "ra-core": "^2.9.4", + "ra-core": "^2.9.5", "react-autosuggest": "^9.4.2", "react-dropzone": "~4.0.1", "react-headroom": "^2.2.4", diff --git a/packages/react-admin/package.json b/packages/react-admin/package.json index 796f605f0dd..ab5791f5f20 100644 --- a/packages/react-admin/package.json +++ b/packages/react-admin/package.json @@ -1,6 +1,6 @@ { "name": "react-admin", - "version": "2.9.4", + "version": "2.9.5", "description": "A frontend Framework for building admin applications on top of REST services, using ES6, React and Material UI", "files": [ "*.md", @@ -34,8 +34,8 @@ "react-dom": "^16.3.0" }, "dependencies": { - "ra-core": "^2.9.4", + "ra-core": "^2.9.5", "ra-language-english": "^2.9.3", - "ra-ui-materialui": "^2.9.4" + "ra-ui-materialui": "^2.9.5" } } From 7ea3e27ab7fcf9adfb5b74758d18ce8507102e22 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Thu, 25 Jul 2019 10:51:32 +0200 Subject: [PATCH 34/67] Switch search engine to algolia --- docs/_layouts/default.html | 11 +- docs/css/style.css | 333 ++++++++++++++++++------------------- 2 files changed, 173 insertions(+), 171 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 56a5b78a58b..d01fd5e2dac 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -16,6 +16,7 @@ + @@ -23,7 +24,7 @@