From 89417a1bebaf4e7483dd1893cca90f8499283d52 Mon Sep 17 00:00:00 2001 From: Karel Hala Date: Wed, 30 Aug 2017 16:10:25 +0200 Subject: [PATCH] Add Extensible component to hawkular new provider --- app/javascript/extensible-components/index.ts | 1 + .../middleware/forms/new-provider-reducer.ts | 2 +- app/javascript/middleware/forms/new.ts | 30 ++++++++++++++++++- app/javascript/miq-redux/redux-types.ts | 1 + app/javascript/packs/application-common.js | 3 ++ .../static/middleware/new-provider.html.haml | 1 + config/webpack/loaders/react.js | 8 +++++ config/webpacker.yml | 1 + package.json | 9 ++++-- tsconfig.json | 3 +- 10 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 config/webpack/loaders/react.js diff --git a/app/javascript/extensible-components/index.ts b/app/javascript/extensible-components/index.ts index 412e9d96e972..49ca3e03ad1b 100644 --- a/app/javascript/extensible-components/index.ts +++ b/app/javascript/extensible-components/index.ts @@ -65,3 +65,4 @@ source.subscribe((component: IExtensionComponent) => { console.error('Unsupported action with extension components.'); } }); + diff --git a/app/javascript/middleware/forms/new-provider-reducer.ts b/app/javascript/middleware/forms/new-provider-reducer.ts index 0923bf44c71b..f6fef76c99df 100644 --- a/app/javascript/middleware/forms/new-provider-reducer.ts +++ b/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) } } diff --git a/app/javascript/middleware/forms/new.ts b/app/javascript/middleware/forms/new.ts index a49263408f5a..bcb5b578b93f 100644 --- a/app/javascript/middleware/forms/new.ts +++ b/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]; + } + } + } } diff --git a/app/javascript/miq-redux/redux-types.ts b/app/javascript/miq-redux/redux-types.ts index 12548d728172..1a307d38073d 100644 --- a/app/javascript/miq-redux/redux-types.ts +++ b/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; } diff --git a/app/javascript/packs/application-common.js b/app/javascript/packs/application-common.js index 54b106ee07fd..68a6f00761d8 100644 --- a/app/javascript/packs/application-common.js +++ b/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; \ No newline at end of file diff --git a/app/views/static/middleware/new-provider.html.haml b/app/views/static/middleware/new-provider.html.haml index b9d6db82972c..ba9ab5d89037 100644 --- a/app/views/static/middleware/new-provider.html.haml +++ b/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 diff --git a/config/webpack/loaders/react.js b/config/webpack/loaders/react.js new file mode 100644 index 000000000000..326d69017f2e --- /dev/null +++ b/config/webpack/loaders/react.js @@ -0,0 +1,8 @@ +module.exports = { + test: /.jsx?$/, + loader: 'babel-loader', + exclude: /node_modules/, + query: { + presets: ['es2015', 'react'] + } +} diff --git a/config/webpacker.yml b/config/webpacker.yml index 823f4cdd28e4..0fddea2afe9e 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -10,6 +10,7 @@ default: &default - .erb - .js - .jsx + - .tsx - .ts - .vue - .sass diff --git a/package.json b/package.json index 2fa2141e43ef..d12a020bfb00 100644 --- a/package.json +++ b/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", diff --git a/tsconfig.json b/tsconfig.json index 92d92aff8b9e..8e8d141338ea 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,8 @@ "module": "es6", "moduleResolution": "node", "sourceMap": true, - "target": "es5" + "target": "es5", + "jsx": "react" }, "exclude": [ "**/*.spec.ts",