Migration path : 1.x to 2.x

Summary

• EditableText: no more default font style
• Typeahead and Datalist: extra element rendering in dropdown
• React-bootstrap upgrade: Panel breaking change
• Headings: style update to match the guideline
• React-CMF router: extraction in a dedicated module
• React-CMF injected props: some props are not injected by default anymore

EditableText

• PR: fix: SubHeader and Dialog headings

The text mode style in EditableText has changed. We don't apply any default font style because you can insert any component you'd like. To have the same rendering as before you must style yourself the text

.tc-editable-text-wording {
	color: $black;
	font-size: 1.4rem;
	font-weight: 900;
}

Typeahead and Datalist

• PR: fix(UIForm/Datalist): do not add empty value in title map

Use case

• you are passing an renderItemContainer props to Typeahead or Datalist
• you rely on children props to condition the render of extra elements

Previous behavior

The extra elements are rendered even if the input value is empty ('').

Next behavior

It won't render anymore if the value is empty (''). In this case, children is empty, so you have to replace your implementation with a simpler one : render prop passed as children.

What to do

-function renderItemsContainer({ children }) {
-    return (
-        <div>
-            {children}
-            {children && <button>Click</button>}
-        </div>
-    );
-}

<Typeahead
    {...props}
-    renderItemsContainer={renderItemsContainer}
>
+    (content, {searching, loading, noResult, isShown}) =>(
+        <div>
+            {content}
+            {isShown && <button>Click</button>}
+        </div>
+    )}
</Typeahead>

React-bootstrap upgrade

• PR: chore: Upgrade react-bootstrap

The library has been upgrade from 0.31.5 to 0.32.4.

What to do

• Upgrade react-bootstrap in your app (you can use Talend/ui > version > version.js script to align all lib versions)
• CollapsiblePanel has been adapted to a breaking change
• Check in your app if the components that you use directly from react-bootstrap are still ok
• If you have automated tests involving CollapsiblePanel, they may fail as the HTML markup has changed

Headings

• PR: feat(TUI-298): update headings font size

Headings font-size has been adapted to fit guideline.

What to do

• Check your apps headings compared to the guideline
• Remove the custom styles you may have.

React-CMF router

• PR: chore(CMF/TUI-271): extract router as cmfModule

The router has been extracted to its own module.

What to do

• Setup: reading the @talend/react-cmf-router documentation.

import cmf from '@talend/react-cmf';
import { browserHistory } from 'react-router';
+import getRouter from '@talend/react-cmf-router';
+import AppLoader from '@talend/react-containers/lib/AppLoader';

+// Example of sagaRouterConfig
+const sagaRouterConfig = {
+    '/preparations': { saga: refresh, runOnExactMatch: true },
+    '/preparations/:folderId': { saga: refresh, runOnExactMatch: true },
+}:
+const router = getRouter({ history: browserHistory, sagaRouterConfig });

cmf.bootstrap({
-    history: browserHistory,
-    sagaRouterConfig,
+    modules: [router.cmfModule],
+    AppLoader,
+    RootComponent: router.RootComponent,
});

• matchPath

-import matchPath from '@talend/react-cmf/lib/sagaRouter/matchPath';
+import matchPath from '@talend/react-cmf/lib/matchPath';

• Selectors

-import cmf from '@talend/react-cmf';
+import { routerAPI } from '@talend/react-cmf-router';
-cmf.selectors.router.getPath(state);
-cmf.selectors.router.getLocation(state);
+routerAPI.selectors.getPath(state);
+routerAPI.selectors.getLocation(state);

• Saga documentTitle

This saga is started by the module so if you have written down the following you have to update:

-import cmf from '@talend/react-cmf';

-function* mainSaga() {
-    yield fork(cmf.sagas.changeDocumentTitle);
-}

• Redirect container rename

It is exported and registered as Redirect but has a displayName="RedirectContainer".

{
    "props": {
-        "RedirectContainer#default": {
+        "Redirect#default": {
            to: "/datastores"
        }
    }
}

• Register @talend/react-containers

To be able to use Talend React containers, you have to register them as module.

import cmf from '@talend/react-cmf';
+import ContainersModule from '@talend/react-containers';

cmf.bootstrap({
-    modules: [router.cmfModule],
+    modules: [
+        router.cmfModule,
+        ContainersModule,
+    ],
});

React-CMF injected props

• PR: feat(CMF/TUI-305): omitCMFProps is the default now

By default, cmfConnect() set an omitCMFProps to true (previously false).
This means that the following props are not injected by default in your component

• getComponent
• componentId
• dispatch
• dispatchActionCreator
• state props : setState, deleteState, updateState, state, initState

What to do

• configure your cmfConnect using defaultState, withComponentRegistry, withComponentId, withDispatch, withDispatchActionCreator

cmfConnect({
    mapStateToProps,
    ...
+    defaultState: { myStateKey: 'my state value' }, // this injects state props
+    withComponentRegistry: true,                    // injects getComponent
+    withComponentId: true,                          // injects componentId
+    withDispatch: true,                             // injects dispatch
+    withDispatchActionCreator: true,                // injects dispatchActionCreator
})(MyComponent);

• to have the same behavior as before, injecting all props, pass the option to false

cmfConnect({
    mapStateToProps,
    ...
+    omitCMFProps: false,
})(MyComponent);