feat(cmf): react-router v4 integration

[jmfrancois]

Please check if the PR fulfills these requirements

• The commit(s) message(s) follows our
  guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Integration has been done in one project (add PR link to it)
• example app provided
• versions script updated
• wrapchildren patch has been removed

What is the current behavior? (You can also link to an open issue here)

we are using react-router v3.X
#90

What is the new behavior?

We have an app under examples/cmf-app, you can install and start (this is the output from yo talend:react-cmf)

react-router v4.0.0 integration.
The concept has completly changed, so we need to re-think our integration.
Now routing is done using , , ... components.
Please check the docs: https://github.com/ReactTraining/react-router
and the migration guide: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md

The idea behind this new integration is to keep routes in configuration.

Does this PR introduce a breaking change?

• Yes
• No

React-router v4

• cmf: route onLeave/onEnter
• PR: feat(cmf): react-router v4 integration
• Change: adapt route configuration and hook parameters to react-router v4 formats

UIRouter to CMFRouter

The component UIRouter has been renamed to CMFRouter.
But you should not use this component explicitly and let CMF handle this.

Before

import { UIRouter } from '@talend/cmf';

After

import { CMFRouter } from '@talend/cmf';

Optional path parameters

From (/:paramName) to /:paramName?.

Before

// settings.json
{
  "routes": {
    "path": "/",
    "component": "App",
    "childRoutes": [
      {
        "path": "preparations(/:folderId)", // optional parameter
        "component": "HomeListView",
        "view": "preparations",
        "onEnter": "preparation:fetch"
      }
    ]
  }
}

After

// settings.json
{
  "routes": {
    "path": "/",
    "component": "App",
    "childRoutes": [
      {
        "path": "preparations/:folderId?", // optional parameter
        "component": "HomeListView",
        "view": "preparations",
        "onEnter": "preparation:fetch"
      }
    ]
  }
}

onEnter/onLeave router parameters

Now the router parameter has the react-router v4 match object instead of react-router v3 nextState object.

Before

function onEnter({ router, dispatch }) {
	const { nextState, replace } = router;
	const pathParams = nextState.params;
}

After

function onEnter({ router, dispatch }) {
	const { match, replace } = router;
	const pathParams = match.params;
}

HomeListView stacked drawers

The stacked drawers route settings are not hierarchical anymore, they are siblings.

Before

{
  "routes": {
    "path": "/",
    "component": "App",
    "childRoutes": [
      {
        "path": "preparations/:folderId?",
        "component": "HomeListView",
        "view": "home",
        "childRoutes" : [
          {
            "path": "add",
            "component": "FirstDrawer",
            "childRoutes": [
              {
                "path": "dataset/add",
                "component": "SecondDrawer"
              }
            ]
          }
        ]
      }
    ]
  }
}

After

{
  "routes": {
    "path": "/",
    "component": "App",
    "childRoutes": [
      {
        "path": "preparations/:folderId?",
        "component": "HomeListView",
        "view": "home",
        "childRoutes" : [
          {
            "path": "add",
            "component": "FirstDrawer"
          },
          {
            "path": "add/dataset/add",
            "component": "SecondDrawer"
          }
        ]
      }
    ]
  }
}

WithDrawer

This component is used in HomeListView stacked drawers implementation. It used to manage drawers transitions in this entry point, but that not the case anymore.

To ensure that your drawer has an enter/leave animation, wrap it with <Drawer.Animation>. Please read the next section to see how to use it.

Before

function FirstDrawer(props) {
	return (
		<Drawer.Container id="first-drawer" stacked>
            <Drawer.Title title={'First drawer'} />
            <div>
                This is the first drawer, deal with it
            </div>
            <Drawer.Footer>
                <Button onClick={props.gotToPage}>Close</Button>
                <Button bsStyle={'info'} onClick={props.addDataset}>Add Dataset</Button>
            </Drawer.Footer>
        </Drawer.Container>
	);
}

After

function FirstDrawer(props) {
	return (
		<Drawer.Animation className={'tc-with-drawer-wrapper'} onClose={props.gotToPage} >
        	{({ close }) => (
                <Drawer.Container id="first-drawer" stacked>
                    <Drawer.Title title={'First drawer'} />
                    <div>
                        This is the first drawer, deal with it
                    </div>
                    <Drawer.Footer>
                        <Button onClick={close}>Close</Button>
                        <Button bsStyle={'info'} onClick={props.addDataset}>Add Dataset</Button>
                    </Drawer.Footer>
                </Drawer.Container>
            )}
        </Drawer.Animation>
	);
}

Drawer.Animation

<Drawer.Animation> api has changed to manage the open and close animation. The children can now trigger a close animation and callback.

Props	Change	Description
withTransition	Removed	Drawer.Animation is animates, if you don't want animation, please don't use it.
onClose	Added	The action to perform on close. This callback is executed after the animation.
children	Changed	It's now a render function : ({ close, transitioned, active }) => <React element>. close(): a function to close the drawer with its animation. transitioned: boolean that indicates if the animation is finished. active: boolean that indicates if the drawer is open.

Drawer

It had a z-index set to 100. This is unlikely, but you may experiment issues that some element under the drawer appears on top.
In that case you should rework your HTML markup to not rely on z-indexes. Otherwise, contribute to fix if possible without z-index.

Other information:
Because CMF support custom routing you already use react-router v4 but you can't use customization through the registry, so this is why this PR is still important.

Status

[jsomsanith-tlnd]

With this repleacement, our history.js is deprecated but still here but not working, it imports import { hashHistory } from 'react-router'; which is not available anymore.
I suggest to remove it

[jsomsanith-tlnd]

Done

[jsomsanith-tlnd]

This should not be used explicitly. It is used by App.js which inject the history. We can drop that createHashHistory()

[jsomsanith-tlnd]

Since this is only for the root configuration, it would be better to move this directly in CMFRouter

Another thing that we mentionned together was to use the <Redirect> component from react-router instead of our custom one for the / route. This would introduce a breaking change, since settings.json would change for this root route

[jsomsanith-tlnd]

UIRouter.js needs to be tested

[build-travis-ci]

Demo is available here

[build-travis-ci]

Demo is available here