This will add react toolbar common pack which will be included in every page and will listen if any new extensible component has name toolbar if so, it will render on certain place button with Click me! which by clicking on it will show in console items of component.
To enable it in ui-classic apply this diff
diff --git a/app/assets/javascripts/controllers/toolbar_controller.js b/app/assets/javascripts/controllers/toolbar_controller.js
index 75470ff..0f98eb3 100644
--- a/app/assets/javascripts/controllers/toolbar_controller.js
+++ b/app/assets/javascripts/controllers/toolbar_controller.js
@@ -57,13 +57,27 @@
* @param $location service for managing browser's location.
* this contructor will assign all params to `this`, it will init endpoits, set if toolbar is used on list page.
*/
- var ToolbarController = function(MiQToolbarSettingsService, MiQEndpointsService, $scope, $location) {
+ var ToolbarController = function(MiQToolbarSettingsService, MiQEndpointsService, $scope, $location, $element) {
this.MiQToolbarSettingsService = MiQToolbarSettingsService;
this.MiQEndpointsService = MiQEndpointsService;
this.$scope = $scope;
this.$location = $location;
initEndpoints(this.MiQEndpointsService);
this.isList = _.contains(location.pathname, 'show_list');
+
+ ManageIQ.extensionComponents.newComponent('toolbar', {
+ getItems: function() {
+ return this.toolbarItems;
+ }.bind(this)
+ }, {
+ addNewButton: function(button) {
+ return $element.find('.miq-toolbar-group')[0];
+ }.bind(this)
+ });
+ };
+
+ ToolbarController.prototype.onSomething = function(item) {
+ console.log(this, item);
};
/**
@@ -192,7 +206,7 @@
}
};
- ToolbarController.$inject = ['MiQToolbarSettingsService', 'MiQEndpointsService', '$scope', '$location'];
+ ToolbarController.$inject = ['MiQToolbarSettingsService', 'MiQEndpointsService', '$scope', '$location', '$element'];
miqHttpInject(angular.module('ManageIQ.toolbar'))
.controller('miqToolbarController', ToolbarController);
})();
diff --git a/app/javascript/packs/application-common.js b/app/javascript/packs/application-common.js
index 54b106e..5256289 100644
--- a/app/javascript/packs/application-common.js
+++ b/app/javascript/packs/application-common.js
@@ -8,3 +8,5 @@
// layout file, like app/views/layouts/application.html.erb
console.log('Hello World from Webpacker')
+import * as React from 'react';
+window.React = React;
diff --git a/package.json b/package.json
index f8d0c76..15f555e 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,12 @@
"@angular/core": "~4.0.3",
"@angular/platform-browser": "~4.0.3",
"@angular/platform-browser-dynamic": "~4.0.3",
+ "babel-loader": "^7.0.0",
+ "babel-preset-es2015": "^6.24.1",
+ "babel-preset-react": "^6.24.1",
"core-js": "~2.4.1",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1",
"rxjs": "~5.3.0",
"ui-select": "0.19.8",
"zone.js": "~0.8.5"
This will add react toolbar common pack which will be included in every page and will listen if any new extensible component has name
toolbar
if so, it will render on certain place button withClick me!
which by clicking on it will show in console items of component.To enable it in ui-classic apply this diff