How to add a react component to foreman

add_a_react_component.md

Folder structre

Create a folder under /webpack/assets/javascripts/react_app/components/ with the following structure (filenames should be upper CamelCase):

webpack/assets/javascripts/react_app/components/<Compoment-name>
├── <Compoment-name>Actions.js
├── <Compoment-name>Reducer.js
├── <Compoment-name>.fixtures.js 
├── <Compoment-name>.scss.js // if needed
├── <Compoment-name>.js
├── index.js // the redux connected file 
└── __tests__
    ├── <Compoment-name>Actions.test.js
    ├── <Compoment-name>Reducer.test.js
    ├── <Compoment-name>.test.js
    ├── integration.test.js
    └── __snapshots__
        ├── All snapshot files (created automatlicy by `npm test -- -u`)

Register

in /webpack/assets/javascripts/react_app/components/componentRegistry.js file Import the new component:

import <Component-Name> from '<component-path>';

under coreComponets array, add this item:

  { name: '<Compoment-registered-name>', type: <component-name> },

Mount

Create a mounter in a specific erb.html file

<%= mount_react_component(`<Compoment-registered-name>`, `<elemnt id which wrapps the component>`, <component data>.to_json) %> 

where the component data goes to component's props as data prop (this.props.data)