[POC] Use readux and extensible component together

app/javascript/middleware-new-form/formUpdate.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';  
+
+class FormUpdate extends React.Component {
+  constructor(props) {
+    super(props);
+    console.log(this);
+  }
+
+  componentDidMount() {
+    this.updateValue('');
+  };
+
+  updateValue(value) {
+    this.props.updateForm({reactThingy: value});
+  }
+
+  render(){
+    return (
+      <div>
+        <label className="col-md-2 control-label" htmlFor="react-thingy">React thingy</label>
+        <div className="col-md-8">
+          <input id="react-thingy"
+                 type="text"
+                 className="form-control"
+                 value={this.props.formObject.reactThingy}
+                 onChange={event => this.updateValue(event.target.value)}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state, ownProps) {  
+  return {
+    formObject: state.providers.middleware.hawkular.newProvider
+  }
+}
+
+function mapDispatchToProps(dispatch) {  
+  return {
+    updateForm: (payload) => {
+      dispatch({type: 'UPDATE_FORM', payload: payload});
+    }
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormUpdate);

app/javascript/middleware-new-form/index.jsx

@@ -0,0 +1,16 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import FormUpdate from './formUpdate';
+import {Provider} from 'react-redux';
+
+var subscriber = ManageIQ.extensions.subscribe('new-provider-hawkular');
+subscriber.with(createNewFormFields);
+
+function createNewFormFields(component: any) {
+  let element = component.render.newFieldsElement((element) => {
+    element && ReactDOM.render(
+    <Provider store={ManageIQ.redux.store}>
+      <FormUpdate/>
+    </Provider>, element);
+  });
+}

app/javascript/packs/middleware-new-form-common.js

@@ -0,0 +1 @@
+require('../middleware-new-form');

bower.json

@@ -0,0 +1,18 @@
+{
+  "name": "miq_plugin_example",
+  "homepage": "https://github.com/karelhala/miq_plugin_example",
+  "authors": [
+    "Karel Hala <[email protected]>"
+  ],
+  "description": "",
+  "main": "",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "miq_plugin_example",
+  "version": "1.0.0",
+  "description": "Short description and motivation.",
+  "main": "index.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/karelhala/miq_plugin_example.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/karelhala/miq_plugin_example/issues"
+  },
+  "homepage": "https://github.com/karelhala/miq_plugin_example#readme",
+  "dependencies": {
+    "@angular/platform-browser": "^4.3.3",
+    "@manageiq/ui-components": "0.0.20",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "rxjs": "^5.4.2",
+    "zone.js": "^0.8.16"
+  }
+}

tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "es5",
+        "jsx": "react"
+    }
+}