Add Extensible component to hawkular new provider

app/javascript/extensible-components/index.ts

@@ -65,3 +65,4 @@ source.subscribe((component: IExtensionComponent) => {
     console.error('Unsupported action with extension components.');
   }
 });
+

app/javascript/middleware/forms/new-provider-reducer.ts

@@ -29,7 +29,7 @@ function updateNewProvider(state, action): AppState {
       }
     }
   };
-  console.log({ ...merge(state, newProvider) });
+
   return { ...merge(state, newProvider) }
 }
 

app/javascript/middleware/forms/new.ts

@@ -1,6 +1,8 @@
 import * as ng from 'angular';
 import { reducers } from './new-provider-reducer';
 import { DefaultFormController, IFormController } from '../../forms-common/defaultFormController';
+import { IExtensibleComponent, IMiQApiCallback, addComponent } from '../../extensible-components/lib';
+import { ExtensibleComponent } from '../../extensible-components';
 
 export default class NewProviderForm implements ng.IComponentOptions {
   public templateUrl: string = '/static/middleware/new-provider.html.haml';
@@ -15,7 +17,8 @@ export default class NewProviderForm implements ng.IComponentOptions {
   };
 }
 
-class NewProviderController extends DefaultFormController implements IFormController {
+class NewProviderController extends DefaultFormController implements IFormController, IExtensibleComponent {
+  public extensibleComponent: ExtensibleComponent;
   public zones: any;
   public types: any[];
   public formObject: any;
@@ -35,6 +38,7 @@ class NewProviderController extends DefaultFormController implements IFormContro
 
   constructor(private $element: Element, private $scope: ng.IScope, private $timeout: ng.ITimeoutService) {
     super(reducers);
+    this.extensibleComponent = addComponent('new-provider', this.apiCallbacks(), this.renderCallbacks());
   }
 
   public updateFormObject() {
@@ -54,4 +58,28 @@ class NewProviderController extends DefaultFormController implements IFormContro
     super.$onInit();
     this.selects = this.$element.querySelectorAll('select');
   }
+
+  public $onDestroy() {
+    super.$onDestroy();
+    this.extensibleComponent.delete();
+  }
+
+  public apiCallbacks(): IMiQApiCallback {
+    return {
+      checkUrl: () => {
+        console.log(this);
+      }
+    }
+  }
+
+  public renderCallbacks(): IMiQApiCallback {
+    return {
+      addCredentialsTab: () => {
+        console.log(this);
+      },
+      newFieldsElement: () => {
+        return angular.element(this.$element).find('.form-group.additional-fields')[0];
+      }
+    }
+  }
 }

app/javascript/miq-redux/redux-types.ts

@@ -5,6 +5,7 @@ export interface IMiqAction extends Action {
   type: string;
   payload?: any;
 }
+
 export interface IMiqReducerHash {
   [propName: string]: AppReducer;
 }

app/javascript/packs/application-common.js

@@ -8,3 +8,6 @@
 // layout file, like app/views/layouts/application.html.erb
 
 console.log('Hello World from Webpacker')
+
+import * as React from 'react';
+window.React = React;

app/views/static/middleware/new-provider.html.haml

@@ -30,6 +30,7 @@
               "ng-value"  => "newProv.formObject.zone",
               "ng-change" => "newProv.onChangeForm()",
               "selectpicker-for-select-tag" => ""}
+  .form-group.additional-fields
   %hr
     %div{"ng-if" => "newProv.formObject.type"}
       .form-group

config/webpack/loaders/react.js

@@ -0,0 +1,8 @@
+module.exports = {
+  test: /.jsx?$/,
+  loader: 'babel-loader',
+  exclude: /node_modules/,
+  query: {
+    presets: ['es2015', 'react']
+  }
+}

config/webpacker.yml

@@ -10,6 +10,7 @@ default: &default
     - .erb
     - .js
     - .jsx
+    - .tsx
     - .ts
     - .vue
     - .sass

package.json

@@ -23,6 +23,8 @@
     "@angular/platform-browser": "~4.0.3",
     "@angular/platform-browser-dynamic": "~4.0.3",
     "core-js": "~2.4.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
     "redux": "^3.7.2",
     "reselect": "^3.0.1",
     "rxjs": "~5.3.0",
@@ -34,13 +36,16 @@
     "@types/lodash": "^4.14.73",
     "@types/redux": "^3.6.0",
     "autoprefixer": "~6.7.7",
-    "babel-core": "~6.24.1",
+    "awesome-typescript-loader": "^3.2.3",
+    "babel-core": "^6.24.1",
     "babel-eslint": "~6.0.4",
-    "babel-loader": "~7.0",
+    "babel-loader": "^7.0.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "~1.4.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "coffee-loader": "~0.7.3",
     "coffee-script": "~1.12.5",
     "compression-webpack-plugin": "~0.4.0",

tsconfig.json

@@ -7,7 +7,8 @@
     "module": "es6",
     "moduleResolution": "node",
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "jsx": "react"
   },
   "exclude": [
     "**/*.spec.ts",