Add react toolbar component which will add new button to start of toolbar

[karelhala]

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"

[vojtechszocs]

Shouldn't addNewButton be called something like getNewButtonContainer or similar?

[karelhala]

It's just an example on how to use the extensible component, I guess Martin will change it a bit since he does not want to replace whole first section with one button.