[WIP] Amazon provider modal form demo

.babelrc

@@ -0,0 +1,31 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": [
+            "> 1%",
+            "last 2 versions",
+            "Firefox ESR",
+            "IE 10",
+            "IE 11"
+          ]
+        }
+      }
+    ],
+    "react",
+    "es2015",
+  ],
+  "plugins": [
+    "transform-class-properties",
+    "transform-export-extensions",
+    "transform-object-rest-spread",
+    "transform-object-assign"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["transform-es2015-modules-commonjs"]
+    }
+  }
+}

.gitignore

@@ -14,3 +14,6 @@
 /config/environments/*.local.yml
 
 /spec/manageiq
+
+node_modules/
+yarn.lock

.npmrc

@@ -0,0 +1,2 @@
+# using yarn
+package-lock = false

.postcssrc.yml

@@ -0,0 +1,4 @@
+plugins:
+  postcss-smart-import: {}
+  precss: {}
+  autoprefixer: {}

app/helpers/manageiq/providers/amazon/toolbar_overrides/ems_cloud_center.rb

@@ -0,0 +1,33 @@
+module ManageIQ
+  module Providers
+    module Amazon
+      module ToolbarOverrides
+        class EmsCloudCenter < ::ApplicationHelper::Toolbar::Override
+          button_group('magic', [
+            button(
+              :magic,
+              'fa fa-magic fa-lg',
+              t = N_('Magic'),
+              t,
+              :data  => {'function'      => 'sendDataWithRx',
+                         'function-data' => {:controller     => 'provider_dialogs', # this one is required
+                                             :button         => :magic,
+                                             :modal_title    => N_('Create a Security Group'),
+                                             :component_name => 'CreateAmazonSecurityGroupForm',
+                                             :ems_id         => EmsCloud.first.id}.to_json}, # this line to be removed, usage replaced with ManageIQ.record.recordId
+              :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck),
+            button(
+              :magic_dialog,
+              'fa fa-magic fa-lg',
+              t = N_('Magic'),
+              t,
+              :data  => {'function'      => 'sendDataWithRx',
+                         'function-data' => {:controller => 'provider_dialogs', # this one is required
+                                             :button     => :magic_dialog}.to_json},
+              :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck),
+          ])
+        end
+      end
+    end
+  end
+end

app/helpers/manageiq/providers/amazon/toolbar_overrides/x_vm_cloud_center.rb

@@ -0,0 +1,43 @@
+module ManageIQ
+  module Providers
+    module Amazon
+      module ToolbarOverrides
+        class XVmCloudCenter < ::ApplicationHelper::Toolbar::Override
+          button_group('amazon_stuff', [
+            select(
+              :amazon_stuff,
+              'fa fa-cog fa-lg',
+              t = N_('Amazon Stuff'),
+              t,
+              :items => [
+                button(
+                  :amazon_do_start_instance,
+                  'fa fa-refresh fa-lg',
+                  N_('Do something to this Instance'),
+                  N_('Start this Instance'),
+                  :confirm => N_("Really wanna do something?"),
+                  :klass   => ApplicationHelper::Button::ButtonWithoutRbacCheck,
+                ),
+                button(
+                  :amazon_do_stop_instance,
+                  'fa fa-search fa-lg',
+                  N_('Do something more to this Instance'),
+                  N_('Stop this Instance'),
+                  :confirm => N_("Still not enough?"),
+                  :klass   => ApplicationHelper::Button::ButtonWithoutRbacCheck,
+                ),
+                button(
+                  :amazon_do_stop_instance,
+                  'fa fa-search fa-lg',
+                  N_('Do something more to this Instance'),
+                  N_('Create security group'),
+                  :klass   => ApplicationHelper::Button::ButtonWithoutRbacCheck,
+                ),
+              ]
+            )
+          ])
+        end
+      end
+    end
+  end
+end

app/javascript/components/create-amazon-security-group-form.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { AmazonSecurityGroupForm } from '@manageiq/react-ui-components/dist/amazon-security-form-group';
+
+const API = window.API;
+
+const getData = () => API.get("/api/cloud_networks/?attributes=ems_ref,name,type&expand=resources&filter[]=type='ManageIQ::Providers::Amazon*'")
+  .then(data => data.resources.map(resource => ({
+    value: resource.ems_ref,
+    label: resource.name,
+  })));
+
+const createGroups = (values, providerId) =>
+  API.post(`/api/providers/${providerId}/security_groups`, {
+    action: 'create',
+    resource: { ...values },
+  });
+
+class CreateAmazonSecurityGroupForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      values: {},
+    };
+    this.handleFormStateUpdate = this.handleFormStateUpdate.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.dispatch({
+      type: 'FormButtons.init',
+      payload: {
+        newRecord: true,
+        pristine: true,
+        addClicked: () => {
+          createGroups(this.state.values, ManageIQ.record.recordId);
+        },
+      },
+    });
+  }
+
+  handleFormStateUpdate(formState) {
+    this.props.dispatch({
+      type: 'FormButtons.saveable',
+      payload: formState.valid,
+    });
+    this.props.dispatch({
+      type: 'FormButtons.pristine',
+      payload: formState.pristine,
+    });
+    this.setState({ values: formState.values });
+  }
+
+  render() {
+    return (
+      <AmazonSecurityGroupForm
+        onSave={values => createGroups(values, ManageIQ.record.recordId)}
+        onCancel={() => console.log('Cancel clicked')}
+        loadData={getData}
+        updateFormState={this.handleFormStateUpdate}
+        hideControls
+      />
+    );
+  }
+}
+
+CreateAmazonSecurityGroupForm.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+};
+
+export default connect()(CreateAmazonSecurityGroupForm);

app/javascript/packs/component-definitions-common.js

@@ -0,0 +1,4 @@
+import CreateAmazonSecurityGroupForm from '../components/create-amazon-security-group-form';
+import '@manageiq/react-ui-components/dist/amazon-security-form-group.css';
+
+ManageIQ.component.addReact('CreateAmazonSecurityGroupForm', CreateAmazonSecurityGroupForm);

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "manageiq-providers-amazon",
+  "version": "1.0.0",
+  "description": "ManageIQ Cloud Management Platform",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ManageIQ/manageiq.git"
+  },
+  "author": "ManageIQ",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/ManageIQ/manageiq/issues"
+  },
+  "homepage": "https://github.com/ManageIQ/manageiq#readme",
+  "dependencies": {
+    "@manageiq/react-ui-components": "~0.9.5",
+    "prop-types": "^15.6.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0"
+  },
+  "devDependencies": {
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-object-assign": "^6.8.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1"
+  },
+  "engines": {
+    "node": ">= 6.9.1",
+    "npm": ">= 3.10.3",
+    "yarn": ">= 0.20.1"
+  }
+}