Migration path : 1.x to 2.x - Talend/ui GitHub Wiki

Summary

EditableText

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

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

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

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

The router has been extracted to its own module.

What to do

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

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);
⚠️ **GitHub.com Fallback** ⚠️