How to use @talend/react-cmf - 10 common examples

import React from 'react';
import { Map } from 'immutable';
import omit from 'lodash/omit';
import Component from '@talend/react-components/lib/ConfirmDialog';
import { cmfConnect } from '@talend/react-cmf';

import { getActionsProps } from '../actionAPI';

export const DEFAULT_STATE = new Map({
	show: false,
});

class ConfirmDialog extends React.Component {
	static displayName = 'CMFContainer(ConfirmDialog)';
	static propTypes = {
		...cmfConnect.propTypes,
	};
	static contextTypes = {
		store: PropTypes.object,
		registry: PropTypes.object,
	};

	render() {
		const state = (this.props.state || DEFAULT_STATE).toJS();
		if (!state.validateAction || !state.cancelAction) {
			return null;
		}
		// this should be enough
		/* const props = Object.assign(
		 {},
		 state,
		 omit(this.props, cmfConnect.INJECTED_PROPS),

class HeaderBar extends React.Component {
	static displayName = 'Container(HeaderBar)';

	static propTypes = {
		productsUrl: PropTypes.string,
		productsItems: PropTypes.arrayOf(
			PropTypes.shape({
				icon: PropTypes.string,
				id: PropTypes.string,
				name: PropTypes.string,
				url: PropTypes.string,
			}),
		),
		productsSort: PropTypes.func,
		prepareProducts: PropTypes.func,
		...cmfConnect.propTypes,
	};

	componentDidUpdate(prevProps) {
		// Trigger product fetch when there's an URL and
		// products URL has changed or products have not been loaded yet
		const hasProductsUrlChanged = this.props.productsUrl !== prevProps.productsUrl;
		const hasProductsNotBeenLoaded =
			this.props.state.get('productsFetchState') === Constants.PRODUCTS_NOT_LOADED;

		if (this.props.productsUrl && (hasProductsNotBeenLoaded || hasProductsUrlChanged)) {
			this.props.dispatch(fetchProducts(this.props.productsUrl));
		}
	}

	render() {
		const {

export function mapStateToProps(state, ownProps = {}) {
	let props = {};
	const context = {
		registry: cmf.registry.getRegistry(),
		store: {
			getState: () => state,
		},
	};
	if (ownProps.actionId) {
		// deprecated
		props = cmf.action.getActionInfo(context, ownProps.actionId);
	}
	const actionIds = ownProps.actionIds || props.actionIds;
	if (actionIds) {
		// deprecated
		props.items = actionIds.map(itemId => cmf.action.getActionInfo(context, itemId));
	}
	return props;
}

export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(
		'SEARCH_CATEGORIES_BY_PROVIDER',
		constants.search.SEARCH_CATEGORIES_BY_PROVIDER,
	);
	api.registry.addToRegistry('preparations:sort', preparationService.sort);

	const routerSagas = {
		...dataset.datasetSagas.datasetRoutesSagas,
	};
	const additionalRouterSagas = additionalConfiguration.routerSagas;
	if (additionalRouterSagas) {
		Object.assign(routerSagas, additionalRouterSagas);
	}

	const rootSagas = [
		fork(sagaRouter, browserHistory, routerSagas),
		fork(api.sagas.component.handle),
		fork(dataset.datasetSagas.datasetMainSaga),
		fork(cmfSagas.changeDocumentTitle),
	];
	const rootSagasToStart = {

export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(
		'SEARCH_CATEGORIES_BY_PROVIDER',
		constants.search.SEARCH_CATEGORIES_BY_PROVIDER,
	);

	const routerSagas = {
		...dataset.datasetSagas.datasetRoutesSagas,
	};
	const additionalRouterSagas = additionalConfiguration.routerSagas;
	if (additionalRouterSagas) {
		Object.assign(routerSagas, additionalRouterSagas);
	}

	const rootSagas = [

import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(
		'SEARCH_CATEGORIES_BY_PROVIDER',

import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(

import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';
import preparationService from './next/services/preparation.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(
		'SEARCH_CATEGORIES_BY_PROVIDER',

export function* fetchProducts(action) {
	const { url } = action.payload;

	yield put(Connected.setStateAction({ productsFetchState: Constants.FETCHING_PRODUCTS }));

	const { response, data } = yield call(cmf.sagas.http.get, url);

	if (response.ok) {
		// Success, update collection
		yield put(Connected.setStateAction({ productsFetchState: Constants.FETCH_PRODUCTS_SUCCESS }));
		yield put(cmf.actions.collections.addOrReplace(Constants.COLLECTION_ID, data));
	} else {
		// Loading products failed
		yield put(Connected.setStateAction({ productsFetchState: Constants.FETCH_PRODUCTS_ERROR }));
	}
}

import '@talend/dataset/lib/app/index.scss';
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api