Merge branch 'next' into fork

* next:
  Fix typos
  Allowing for more fine tuning of Quill without rewriting RichTextInput (marmelab#3714)
  Add redux-devtools-extension trace feature in development mode if available. (marmelab#3781)
  Reorganize Upgrade guide
  Pagination resets after filtering

docs/Authentication.md

@@ -210,17 +210,27 @@ But what if you want to use an email instead of a username? What if you want to
 
 For all these cases, it's up to you to implement your own `LoginPage` component, which will be displayed under the `/login` route instead of the default username/password form, and your own `LogoutButton` component, which will be displayed in the sidebar. Pass both these components to the `<Admin>` component:
 
-**Tip**: Use the `useLogin` and `useLogout` hooks in your custom `Login` and `Logout` components.
+```jsx
+// in src/App.js
+import MyLoginPage from './MyLoginPage';
+import MyLogoutButton from './MyLogoutButton';
+
+const App = () => (
+    <Admin loginPage={MyLoginPage} logoutButton={MyLogoutButton} authProvider={authProvider}>
+    ...
+    </Admin>
+);
+```
+
+Use the `useLogin` and `useLogout` hooks in your custom `LoginPage` and `LogoutButton` components.
 
 ```jsx
 // in src/MyLoginPage.js
 import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { useLogin, useNotify } from 'react-admin';
 import { ThemeProvider } from '@material-ui/styles';
 
 const MyLoginPage = ({ theme }) => {
-    const dispatch = useDispatch()
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const login = useLogin();
@@ -245,13 +255,11 @@ export default MyLoginPage;
 
 // in src/MyLogoutButton.js
 import React, { forwardRef } from 'react';
-import { useDispatch } from 'react-redux';
 import { useLogout } from 'react-admin';
 import MenuItem from '@material-ui/core/MenuItem';
 import ExitIcon from '@material-ui/icons/PowerSettingsNew';
 
 const MyLogoutButton = forwardRef((props, ref) => {
-    const dispatch = useDispatch();
     const logout = useLogout();
     const handleClick = () => logout();
     return (
@@ -265,16 +273,6 @@ const MyLogoutButton = forwardRef((props, ref) => {
 });
 
 export default MyLogoutButton;
-
-// in src/App.js
-import MyLoginPage from './MyLoginPage';
-import MyLogoutButton from './MyLogoutButton';
-
-const App = () => (
-    <Admin loginPage={MyLoginPage} logoutButton={MyLogoutButton} authProvider={authProvider}>
-    ...
-    </Admin>
-);
 ```
 
 **Tip**: By default, react-admin redirects the user to '/login' after they log out. This can be changed by passing the url to redirect to as parameter to the `logout()` function:
@@ -348,8 +346,7 @@ To avoid rendering a component and force waiting for the `authProvider` response
 
 - `loading`: `true` just after mount, while the `authProvider` is being called. `false` once the `authProvider` has answered
 - `loaded`: the opposite of `loading`.
-- `connected`: `undefined` while loading. then `true` or `false` depending on the `authProvider` response.
-
+- `authenticated`: `undefined` while loading. then `true` or `false` depending on the `authProvider` response.
 
 You can render different content depending on the authenticated status. 
 

docs/CustomApp.md

@@ -53,20 +53,27 @@ export default ({
     };
     const sagaMiddleware = createSagaMiddleware();
 
+    const composeEnhancers =
+        (process.env.NODE_ENV === 'development' &&
+            typeof window !== 'undefined' &&
+            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
+            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                trace: true,
+                traceLimit: 25,
+            })) ||
+        compose;
+
     const store = createStore(
         resettableAppReducer,
         { /* set your initial state here */ },
-        compose(
+        composeEnhancers(
             applyMiddleware(
                 sagaMiddleware,
                 routerMiddleware(history),
                 // add your own middlewares here
             ),
-            typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
-                ? window.__REDUX_DEVTOOLS_EXTENSION__()
-                : f => f
             // add your own enhancers here
-        )
+        ),        
     );
     sagaMiddleware.run(saga);
     return store;

docs/Inputs.md

@@ -873,6 +873,18 @@ You can customize the rich text editor toolbar using the `toolbar` attribute, as
 <RichTextInput source="body" toolbar={[ ['bold', 'italic', 'underline', 'link'] ]} />
 ```
 
+If you need more customization, you can access the quill object through the `configureQuill` callback that will be called just after its initialization.
+
+```js
+const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
+    this.quill.format('bold', value)
+});
+
+// ...
+
+<RichTextInput source="text" configureQuill={configureQuill}/>
+```
+
 ## `<SelectInput>`
 
 To let users choose a value in a list using a dropdown, use `<SelectInput>`. It renders using [Material ui's `<Select>`](http://material-ui.com/api/select). Set the `choices` attribute to determine the options (with `id`, `name` tuples):

packages/ra-core/src/controller/useListParams.ts

@@ -140,7 +140,14 @@ const useListParams = ({
     );
 
     const changeParams = useCallback(action => {
-        const newParams = queryReducer(query, action);
+        const newQuery = getQuery({
+            location: window.location,
+            params,
+            filterDefaultValues,
+            sort,
+            perPage,
+        });
+        const newParams = queryReducer(newQuery, action);
         history.push({
             search: `?${stringify({
                 ...newParams,

packages/ra-core/src/createAdminStore.ts

@@ -10,7 +10,7 @@ import { adminSaga } from './sideEffect';
 import { CLEAR_STATE } from './actions/clearActions';
 
 interface Window {
-    __REDUX_DEVTOOLS_EXTENSION__?: () => () => void;
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: (traceOptions: object) => Function;
 }
 
 export type InitialState = object | (() => object);
@@ -61,15 +61,21 @@ export default ({
     const sagaMiddleware = createSagaMiddleware();
     const typedWindow = window as Window;
 
+    const composeEnhancers =
+        (process.env.NODE_ENV === 'development' &&
+            typeof typedWindow !== 'undefined' &&
+            typedWindow.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
+            typedWindow.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                trace: true,
+                traceLimit: 25,
+            })) ||
+        compose;
+
     const store = createStore(
         resettableAppReducer,
         typeof initialState === 'function' ? initialState() : initialState,
-        compose(
-            applyMiddleware(sagaMiddleware, routerMiddleware(history)),
-            typeof typedWindow !== 'undefined' &&
-                typedWindow.__REDUX_DEVTOOLS_EXTENSION__
-                ? typedWindow.__REDUX_DEVTOOLS_EXTENSION__()
-                : f => f
+        composeEnhancers(
+            applyMiddleware(sagaMiddleware, routerMiddleware(history))
         )
     );
     sagaMiddleware.run(saga);

packages/ra-input-rich-text/README.md

@@ -43,6 +43,18 @@ You can customize the rich text editor toolbar using the `toolbar` attribute, as
 <RichTextInput source="body" toolbar={[ ['bold', 'italic', 'underline', 'link'] ]} />
 ```
 
+If you need more customization, you can access the quill object through the `configureQuill` callback that will be called just after its initialization.
+
+```js
+const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
+    this.quill.format('bold', value)
+});
+
+// ...
+
+<RichTextInput source="text" configureQuill={configureQuill}/>
+```
+
 ## License
 
 This library is licensed under the MIT License, and sponsored by [marmelab](http://marmelab.com).

packages/ra-input-rich-text/src/index.js

@@ -29,6 +29,7 @@ export class RichTextInput extends Component {
             }),
         ]),
         fullWidth: PropTypes.bool,
+        configureQuill: PropTypes.func,
     };
 
     static defaultProps = {
@@ -52,6 +53,10 @@ export class RichTextInput extends Component {
             ...options,
         });
 
+        if (this.props.configureQuill) {
+            this.props.configureQuill(this.quill);
+        }
+
         this.quill.setContents(this.quill.clipboard.convert(value));
 
         this.editor = this.divRef.querySelector('.ql-editor');