From 48e04b35d91635469d3c40901b9c83bc989f74e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Hal=C3=A1sz?= <dhalasz@redhat.com>
Date: Wed, 13 May 2020 19:27:40 +0200
Subject: [PATCH 1/2] Implemented ProviderForm component for creating/editing
 providers

---
 .../components/provider-form/index.jsx        | 185 ++++++++++++++++++
 .../provider-form/protocol-selector.jsx       |  95 +++++++++
 .../provider-form/provider-credentials.jsx    |  27 +++
 .../provider-form/provider-select-field.jsx   |  44 +++++
 .../validate-provider-credentials.jsx}        |  35 ++--
 .../forms/mappers/formFieldsMapper.jsx        |   3 +-
 .../packs/component-definitions-common.js     |   2 +
 7 files changed, 371 insertions(+), 20 deletions(-)
 create mode 100644 app/javascript/components/provider-form/index.jsx
 create mode 100644 app/javascript/components/provider-form/protocol-selector.jsx
 create mode 100644 app/javascript/components/provider-form/provider-credentials.jsx
 create mode 100644 app/javascript/components/provider-form/provider-select-field.jsx
 rename app/javascript/components/{async-credentials/async-provider-credentials.jsx => provider-form/validate-provider-credentials.jsx} (52%)

diff --git a/app/javascript/components/provider-form/index.jsx b/app/javascript/components/provider-form/index.jsx
new file mode 100644
index 00000000000..9d21871d104
--- /dev/null
+++ b/app/javascript/components/provider-form/index.jsx
@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
+import { pick, keyBy } from 'lodash';
+
+import { API } from '../../http_api';
+import MiqFormRenderer from '../../forms/data-driven-form';
+import miqRedirectBack from '../../helpers/miq-redirect-back';
+import fieldsMapper from '../../forms/mappers/formFieldsMapper';
+import ProtocolSelector from './protocol-selector';
+import ProviderSelectField from './provider-select-field';
+import ProviderCredentials from './provider-credentials';
+import ValidateProviderCredentials from './validate-provider-credentials';
+
+const findSkipSubmits = (schema, items) => {
+  const found = schema.skipSubmit && items.includes(schema.name) ? [schema.name] : [];
+  const children = Array.isArray(schema.fields) ? schema.fields.flatMap(field => findSkipSubmits(field, items)) : [];
+  return [...found, ...children];
+};
+
+const typeSelectField = (edit, filter) => ({
+  component: 'provider-select-field',
+  name: 'type',
+  label: __('Type'),
+  kind: filter,
+  placeholder: `<${__('Choose')}>`,
+  isDisabled: edit,
+  loadOptions: () =>
+    API.options('/api/providers').then(({ data: { supported_providers } }) => supported_providers // eslint-disable-line camelcase
+      .filter(({ kind }) => kind === filter)
+      .map(({ title, type }) => ({ value: type, label: title }))),
+});
+
+const commonFields = [
+  {
+    component: componentTypes.TEXT_FIELD,
+    name: 'name',
+    label: __('Name'),
+    isRequired: true,
+    validate: [{
+      type: validatorTypes.REQUIRED,
+    }],
+  },
+  {
+    component: componentTypes.SELECT,
+    name: 'zone_id',
+    label: __('Zone'),
+    placeholder: `<${__('Choose')}>`,
+    loadOptions: () =>
+      API.get('/api/zones?expand=resources&attributes=id,name,visible&filter[]=visible!=false&sort_by=name')
+        .then(({ resources }) => resources.map(({ id: value, name: label }) => ({ value, label }))),
+    isRequired: true,
+    validate: [{
+      type: validatorTypes.REQUIRED,
+    }],
+  },
+];
+
+export const loadProviderFields = (kind, type) => API.options(`/api/providers?type=${type}`).then(
+  ({ data: { provider_form_schema } }) => ([ // eslint-disable-line camelcase
+    ...commonFields,
+    {
+      component: componentTypes.SUB_FORM,
+      name: type,
+      ...provider_form_schema, // eslint-disable-line camelcase
+    },
+  ]),
+);
+
+export const EditingContext = React.createContext({});
+
+const ProviderForm = ({ providerId, kind, title, redirect }) => {
+  const edit = !!providerId;
+  const [{ fields, initialValues }, setState] = useState({ fields: edit ? undefined : [typeSelectField(false, kind)] });
+
+  useEffect(() => {
+    if (providerId) {
+      miqSparkleOn();
+      API.get(`/api/providers/${providerId}?attributes=endpoints,authentications`).then(({
+        type,
+        endpoints: _endpoints,
+        authentications: _authentications,
+        ...provider
+      }) => {
+        // DDF can handle arrays with FieldArray, but only with a heterogenous schema, which isn't enough.
+        // As a solution, we're converting the arrays to objects indexed by role/authtype and converting
+        // it back to an array of objects before submitting the form. Validation, however, should not be
+        // converted back as the schema is being used in the password sanitization process.
+        const endpoints = keyBy(_endpoints, 'role');
+        const authentications = keyBy(_authentications, 'authtype');
+
+        loadProviderFields(kind, type).then((fields) => {
+          setState({
+            fields: [typeSelectField(true, kind), ...fields],
+            initialValues: {
+              ...provider,
+              type,
+              endpoints,
+              authentications,
+            },
+          });
+        }).then(miqSparkleOff);
+      });
+    }
+  }, [providerId]);
+
+  const onCancel = () => {
+    const message = sprintf(providerId ? __('Edit of %s was cancelled by the user') : __('Add of %s was cancelled by the user'), title);
+    miqRedirectBack(message, 'success', redirect);
+  };
+
+  const onSubmit = ({ type, ..._data }, { getState }) => {
+    miqSparkleOn();
+
+    const message = sprintf(__('%s %s was saved'), title, _data.name || initialValues.name);
+
+    // Retrieve the modified fields from the schema
+    const modified = Object.keys(getState().modified);
+    // Imit the fields that have `skipSubmit` set to `true`
+    const toDelete = findSkipSubmits({ fields }, modified);
+    // Construct a list of fields to be submitted
+    const toSubmit = modified.filter(field => !toDelete.includes(field));
+
+    // Build up the form data using the list and pull out endpoints and authentications
+    const { endpoints: _endpoints = { default: {} }, authentications: _authentications = {}, ...rest } = pick(_data, toSubmit);
+    // Convert endpoints and authentications back to an array
+    const endpoints = Object.keys(_endpoints).map(key => ({ role: key, ..._endpoints[key] }));
+    const authentications = Object.keys(_authentications).map(key => ({ authtype: key, ..._authentications[key] }));
+
+    // Construct the full form data with all the necessary items
+    const data = {
+      ...rest,
+      endpoints,
+      authentications,
+      ...(edit ? undefined : { type }),
+      ddf: true,
+    };
+
+    const request = providerId ? API.patch(`/api/providers/${providerId}`, data) : API.post('/api/providers', data);
+    request.then(() => miqRedirectBack(message, 'success', redirect)).catch(miqSparkleOff);
+  };
+
+  const formFieldsMapper = {
+    ...fieldsMapper,
+    'protocol-selector': ProtocolSelector,
+    'provider-select-field': ProviderSelectField,
+    'provider-credentials': ProviderCredentials,
+    'validate-provider-credentials': ValidateProviderCredentials,
+  };
+
+  return (
+    <div>
+      { fields && (
+        <EditingContext.Provider value={{ providerId, setState }}>
+          <MiqFormRenderer
+            formFieldsMapper={formFieldsMapper}
+            schema={{ fields }}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+            initialValues={initialValues}
+            clearedValue={null}
+            canReset
+            clearOnUnmount
+          />
+        </EditingContext.Provider>
+      ) }
+    </div>
+  );
+};
+
+ProviderForm.propTypes = {
+  providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  kind: PropTypes.string,
+  title: PropTypes.string,
+  redirect: PropTypes.string,
+};
+
+ProviderForm.defaultProps = {
+  providerId: undefined,
+  kind: undefined,
+  title: undefined,
+  redirect: undefined,
+};
+
+export default ProviderForm;
diff --git a/app/javascript/components/provider-form/protocol-selector.jsx b/app/javascript/components/provider-form/protocol-selector.jsx
new file mode 100644
index 00000000000..3d73781b430
--- /dev/null
+++ b/app/javascript/components/provider-form/protocol-selector.jsx
@@ -0,0 +1,95 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import fieldsMapper from '../../forms/mappers/formFieldsMapper';
+import { EditingContext } from './index';
+
+const Component = fieldsMapper['select-field'];
+
+const filter = (items, toDelete) => Object.keys(items).filter(key => !toDelete.includes(key)).reduce((obj, key) => ({
+  ...obj,
+  [key]: items[key],
+}), {});
+
+// This is a special <Select> component that allows altering underlying endpoints/authentications which is intended to
+// be used when there's a variety of protocols for a given implemented service. For example event stream collection in
+// some providers allows the user to choose from multiple protocols.
+const ProtocolSelector = ({
+  FieldProvider, formOptions, initialValue, ...props
+}) => {
+  const [loaded, setLoaded] = useState(false);
+  const { providerId } = useContext(EditingContext);
+
+  return (
+    <FieldProvider
+      formOptions={formOptions}
+      render={({ input: { name, onChange, ...input }, options, ...rest }) => {
+        const fieldState = formOptions.getFieldState(name);
+
+        // Run this on the first render with a usable state
+        if (!loaded && fieldState) {
+          // If editing an existing provider, we need to determine which endpoint protocol is being used.
+          // This is done by checking against the pivot field for each option. If a related the pivot is
+          // set, it means that the endpoint is used. If there is no pivot selected, we fall back to the
+          // defined initialValue.
+          if (!!providerId) {
+            const selected = options.find(({ pivot }) => _.get(formOptions.getState().values, pivot));
+            const value = selected ? selected.value : initialValue;
+
+            // Reinitializing the form with the correct value for the select
+            setTimeout(() => {
+              formOptions.initialize({
+                ...formOptions.getState().values,
+                [name]: value,
+              });
+            });
+          }
+
+          setLoaded(true);
+        }
+
+        const enhancedChange = onChange => (value) => {
+          setTimeout(() => {
+            // Load the initial and current values for the endpoints/authentications after the field value has been changed
+            const {
+              initialValues: {
+                endpoints: initialEndpoints = {},
+                authentications: initialAuthentications = {},
+              },
+              values: {
+                endpoints: currentEndpoints = {},
+                authentications: currentAuthentications = {},
+              },
+            } = formOptions.getState();
+
+            // Map the values of all possible options into an array
+            const optionValues = options.map(({ value }) => value);
+            // Determine which endpoint/authentication pair has to be removed from the form state
+            const toDelete = optionValues.filter(option => option !== value);
+
+            // Adjust the endpoints/authentications and pass them to the form state
+            formOptions.change('endpoints', {
+              ...filter(initialEndpoints, toDelete),
+              ...filter(currentEndpoints, optionValues),
+            });
+            formOptions.change('authentications', {
+              ...filter(initialAuthentications, toDelete),
+              ...filter(currentAuthentications, optionValues),
+            });
+          });
+
+          return onChange(value);
+        };
+
+        return <Component input={{ name, ...input, onChange: enhancedChange(onChange) }} options={options} {...rest} />;
+      }}
+      {...props}
+    />
+  );
+};
+
+ProtocolSelector.propTypes = {
+  FieldProvider: PropTypes.func.isRequired,
+};
+
+export default ProtocolSelector;
diff --git a/app/javascript/components/provider-form/provider-credentials.jsx b/app/javascript/components/provider-form/provider-credentials.jsx
new file mode 100644
index 00000000000..f7839db9670
--- /dev/null
+++ b/app/javascript/components/provider-form/provider-credentials.jsx
@@ -0,0 +1,27 @@
+import React, { Fragment, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { EditingContext } from './index';
+
+const ProviderCredentials = ({ formOptions, fields }) => {
+  const { providerId } = useContext(EditingContext);
+
+  // Pass down the required `edit` to the password component (if it exists)
+  return (
+    <Fragment>
+      {
+        formOptions.renderForm(fields.map(field => ({
+          ...field,
+          ...(field.component === 'password-field' ? { edit: !!providerId } : undefined),
+        })), formOptions)
+      }
+    </Fragment>
+  );
+};
+
+ProviderCredentials.propTypes = {
+  formOptions: PropTypes.any.isRequired,
+  fields: PropTypes.array.isRequired,
+};
+
+export default ProviderCredentials;
diff --git a/app/javascript/components/provider-form/provider-select-field.jsx b/app/javascript/components/provider-form/provider-select-field.jsx
new file mode 100644
index 00000000000..2964bfdf140
--- /dev/null
+++ b/app/javascript/components/provider-form/provider-select-field.jsx
@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import { set } from 'lodash';
+
+import fieldsMapper from '../../forms/mappers/formFieldsMapper';
+import { EditingContext, loadProviderFields } from './index';
+
+const extractInitialValues = ({ name, initialValue, fields }) => {
+  const children = fields ? fields.reduce((obj, field) => ({ ...obj, ...extractInitialValues(field) }), {}) : {};
+  const item = name && initialValue ? { [name]: initialValue } : undefined;
+  return { ...item, ...children };
+};
+
+const ProviderSelectField = ({ kind, FieldProvider, formOptions, ...props }) => {
+  const { isDisabled: edit } = props;
+
+  const { setState } = useContext(EditingContext);
+  const Component = fieldsMapper['select-field'];
+
+  const enhancedChange = onChange => (type) => {
+    if (!edit && type) {
+      miqSparkleOn();
+
+      loadProviderFields(kind, type).then((fields) => {
+        setState(({ fields: [firstField] }) => ({ fields: [firstField, ...fields] }));
+        const initialValues = extractInitialValues({ fields });
+        formOptions.initialize(Object.keys(initialValues).reduce((obj, key) => set(obj, key, initialValues[key]), { type }));
+      }).then(miqSparkleOff);
+    }
+
+    return onChange(type);
+  };
+
+  return (
+    <FieldProvider
+      {...props}
+      formOptions={formOptions}
+      render={({ input: { onChange, ...input }, ...props }) => (
+        <Component input={{ ...input, onChange: enhancedChange(onChange) }} formOptions={formOptions} {...props} />
+      )}
+    />
+  );
+};
+
+export default ProviderSelectField;
diff --git a/app/javascript/components/async-credentials/async-provider-credentials.jsx b/app/javascript/components/provider-form/validate-provider-credentials.jsx
similarity index 52%
rename from app/javascript/components/async-credentials/async-provider-credentials.jsx
rename to app/javascript/components/provider-form/validate-provider-credentials.jsx
index b7991401593..3868fb09375 100644
--- a/app/javascript/components/async-credentials/async-provider-credentials.jsx
+++ b/app/javascript/components/provider-form/validate-provider-credentials.jsx
@@ -1,22 +1,19 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { pick } from 'lodash';
 
-import AsyncCredentials from './async-credentials';
+import AsyncCredentials from '../async-credentials/async-credentials';
+import { EditingContext } from './index';
 
-const AsyncProviderCredentials = ({ validate, ...props }) => {
-  if (!validate) {
-    // Pass down the required `edit` to the password component (if it exists)
-    return props.formOptions.renderForm(props.fields.map(field => ({
-      ...field,
-      ...(field.component === 'password-field' ? { edit: props.edit } : undefined),
-    })), props.formOptions);
-  }
+const ValidateProviderCredentials = ({ ...props }) => {
+  const { providerId } = useContext(EditingContext);
 
   const asyncValidate = (fields, fieldNames) => new Promise((resolve, reject) => {
+    const url = providerId ? `/api/providers/${providerId}` : '/api/providers';
     const resource = pick(fields, fieldNames);
-    API.post('/api/providers', { action: 'verify_credentials', resource }).then(({ results: [result] }) => {
-      const { task_id, success } = result;
+
+    API.post(url, { action: 'verify_credentials', resource }).then(({ results: [result] = [], ...single }) => {
+      const { task_id, success } = result || single;
       // The request here can either create a background task or fail
       return success ? API.wait_for_task(task_id) : Promise.reject(result);
       // The wait_for_task request can succeed with valid or invalid credentials
@@ -28,16 +25,18 @@ const AsyncProviderCredentials = ({ validate, ...props }) => {
       .catch(({ message }) => reject([__('Validation failed:'), message].join(' ')));
   });
 
-  return <AsyncCredentials asyncValidate={asyncValidate} {...props} />;
+  // The order of props is important here, because they have to be overridden
+  return <AsyncCredentials {...props} asyncValidate={asyncValidate} edit={!!providerId} />;
 };
 
-AsyncProviderCredentials.propTypes = {
-  validate: PropTypes.bool,
+ValidateProviderCredentials.propTypes = {
   ...AsyncCredentials.propTypes,
+  asyncValidate: PropTypes.func,
+  validation: PropTypes.bool,
 };
-AsyncProviderCredentials.defaultProps = {
-  validate: true,
+ValidateProviderCredentials.defaultProps = {
+  validation: true,
   ...AsyncCredentials.defaultProps,
 };
 
-export default AsyncProviderCredentials;
+export default ValidateProviderCredentials;
diff --git a/app/javascript/forms/mappers/formFieldsMapper.jsx b/app/javascript/forms/mappers/formFieldsMapper.jsx
index d1490920b0c..afc6898e6b0 100644
--- a/app/javascript/forms/mappers/formFieldsMapper.jsx
+++ b/app/javascript/forms/mappers/formFieldsMapper.jsx
@@ -3,7 +3,6 @@ import { formFieldsMapper, components } from '@data-driven-forms/pf3-component-m
 import { componentTypes } from '@@ddf';
 
 import AsyncCredentials from '../../components/async-credentials/async-credentials';
-import AsyncProviderCredentials from '../../components/async-credentials/async-provider-credentials';
 import DualGroup from '../../components/dual-group';
 import DualListSelect from '../../components/dual-list-select';
 import EditPasswordField from '../../components/async-credentials/edit-password-field';
@@ -16,13 +15,13 @@ const fieldsMapper = {
   ...formFieldsMapper,
   'code-editor': DataDrivenFormCodeEditor,
   'edit-password-field': EditPasswordField,
+  'field-array': FieldArray,
   'dual-group': DualGroup,
   'dual-list-select': DualListSelect,
   'input-with-dynamic-prefix': InputWithDynamicPrefix,
   hr: () => <hr />,
   'password-field': PasswordField,
   'validate-credentials': AsyncCredentials,
-  'validate-provider-credentials': AsyncProviderCredentials,
   'field-array': FieldArray,
   [componentTypes.SELECT]: props => <components.SelectField placeholder={`<${__('Choose')}>`} {...props} />,
 };
diff --git a/app/javascript/packs/component-definitions-common.js b/app/javascript/packs/component-definitions-common.js
index 65ef518f103..dfe66b29fe3 100644
--- a/app/javascript/packs/component-definitions-common.js
+++ b/app/javascript/packs/component-definitions-common.js
@@ -8,6 +8,7 @@ import Breadcrumbs from '../components/breadcrumbs';
 import CatalogForm from '../components/catalog-form/catalog-form';
 import CloudNetworkForm from '../components/cloud-network-form/cloud-network-form';
 import CloudTenantForm from '../components/cloud-tenant-form/cloud-tenant-form';
+import ProviderForm from '../components/provider-form';
 import CopyCatalogForm from '../components/copy-catalog-form/copy-catalog-form';
 import CopyDashboardForm from '../components/copy-dashboard-form/copy-dashboard-form';
 import FlavorForm from '../components/flavor-form/flavor-form';
@@ -55,6 +56,7 @@ ManageIQ.component.addReact('CatalogForm', CatalogForm);
 ManageIQ.component.addReact('CloudNetworkForm', CloudNetworkForm);
 ManageIQ.component.addReact('CloudTenantForm', CloudTenantForm);
 ManageIQ.component.addReact('navbar.Configuration', navbar.Configuration);
+ManageIQ.component.addReact('ProviderForm', ProviderForm);
 ManageIQ.component.addReact('CopyCatalogForm', CopyCatalogForm);
 ManageIQ.component.addReact('CopyDashboardForm', CopyDashboardForm);
 ManageIQ.component.addReact('navbar.CustomLogo', navbar.CustomLogo);

From 4e9d7562c91507203803d87243b9e6840bc180f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Hal=C3=A1sz?= <dhalasz@redhat.com>
Date: Wed, 13 May 2020 19:28:32 +0200
Subject: [PATCH 2/2] Replace cloud provider forms with the ProviderForm react
 component

---
 app/helpers/ems_cloud_helper.rb               |  4 ++++
 .../components/provider-form/index.jsx        | 10 ++++++----
 app/views/ems_cloud/edit.html.haml            | 18 +-----------------
 app/views/ems_cloud/new.html.haml             | 19 +------------------
 4 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/app/helpers/ems_cloud_helper.rb b/app/helpers/ems_cloud_helper.rb
index 7b175c6ba5c..60c6eb53f91 100644
--- a/app/helpers/ems_cloud_helper.rb
+++ b/app/helpers/ems_cloud_helper.rb
@@ -1,4 +1,8 @@
 module EmsCloudHelper
   include_concern 'TextualSummary'
   include_concern 'ComplianceSummaryHelper'
+
+  def edit_redirect_path(lastaction, ems)
+    lastaction == 'show_list' ? ems_clouds_path : ems_cloud_path(ems)
+  end
 end
diff --git a/app/javascript/components/provider-form/index.jsx b/app/javascript/components/provider-form/index.jsx
index 9d21871d104..b6b967d7b05 100644
--- a/app/javascript/components/provider-form/index.jsx
+++ b/app/javascript/components/provider-form/index.jsx
@@ -23,7 +23,6 @@ const typeSelectField = (edit, filter) => ({
   name: 'type',
   label: __('Type'),
   kind: filter,
-  placeholder: `<${__('Choose')}>`,
   isDisabled: edit,
   loadOptions: () =>
     API.options('/api/providers').then(({ data: { supported_providers } }) => supported_providers // eslint-disable-line camelcase
@@ -45,7 +44,6 @@ const commonFields = [
     component: componentTypes.SELECT,
     name: 'zone_id',
     label: __('Zone'),
-    placeholder: `<${__('Choose')}>`,
     loadOptions: () =>
       API.get('/api/zones?expand=resources&attributes=id,name,visible&filter[]=visible!=false&sort_by=name')
         .then(({ resources }) => resources.map(({ id: value, name: label }) => ({ value, label }))),
@@ -73,6 +71,8 @@ const ProviderForm = ({ providerId, kind, title, redirect }) => {
   const edit = !!providerId;
   const [{ fields, initialValues }, setState] = useState({ fields: edit ? undefined : [typeSelectField(false, kind)] });
 
+  const submitLabel = edit ? __('Save') : __('Add');
+
   useEffect(() => {
     if (providerId) {
       miqSparkleOn();
@@ -157,9 +157,11 @@ const ProviderForm = ({ providerId, kind, title, redirect }) => {
             schema={{ fields }}
             onSubmit={onSubmit}
             onCancel={onCancel}
+            onReset={() => add_flash(__('All changes have been reset'), 'warn')}
             initialValues={initialValues}
             clearedValue={null}
-            canReset
+            buttonsLabels={{ submitLabel }}
+            canReset={edit}
             clearOnUnmount
           />
         </EditingContext.Provider>
@@ -169,7 +171,7 @@ const ProviderForm = ({ providerId, kind, title, redirect }) => {
 };
 
 ProviderForm.propTypes = {
-  providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  providerId: PropTypes.string,
   kind: PropTypes.string,
   title: PropTypes.string,
   redirect: PropTypes.string,
diff --git a/app/views/ems_cloud/edit.html.haml b/app/views/ems_cloud/edit.html.haml
index f1b2d00160e..377ccf5baf7 100644
--- a/app/views/ems_cloud/edit.html.haml
+++ b/app/views/ems_cloud/edit.html.haml
@@ -1,17 +1 @@
-= form_for(@ems,
-           :url    => ems_cloud_path(@ems),
-           :method => :patch,
-           :html   => {"ng-controller"   => "emsCommonFormController",
-                       "name"            => "angularForm",
-                       "ng-show"         => "afterGet",
-                       "update-url"      => "#{ems_cloud_path(@ems)}",
-                       "form-fields-url" => "/#{controller_name}/ems_cloud_form_fields/",
-                       "novalidate"      => true}) do |f|
-  %input{:type => 'hidden', :id => "form_id", :value => "##{f.options[:html][:id]}"}
-  %input{:type => 'hidden', :id => "button_name", :name => "button", :value => "save"}
-  %input{:type => 'hidden', :id => "cred_type", :name => "cred_type", :value => "default"}
-  = render :partial => "shared/views/ems_common/angular/form"
-
-:javascript
-  ManageIQ.angular.app.value('emsCommonFormId', '#{@ems.id || "new"}');
-  miq_bootstrap($('#form_id').val());
+= react('ProviderForm', :providerId => @ems.id.to_s, :redirect => edit_redirect_path(@lastaction, @ems), :kind => 'cloud', :title => ui_lookup(:model => 'ManageIQ::Providers::CloudManager'))
diff --git a/app/views/ems_cloud/new.html.haml b/app/views/ems_cloud/new.html.haml
index 757413c401f..78fd9473e1b 100644
--- a/app/views/ems_cloud/new.html.haml
+++ b/app/views/ems_cloud/new.html.haml
@@ -1,20 +1,3 @@
 - url = @ems.persisted? ? ems_clouds_path(@ems) : ems_clouds_path
-= form_for(@ems,
-           :url    => url,
-           :method => :post,
-           :html   => {"ng-controller"   => "emsCommonFormController",
-                       "name"            => "angularForm",
-                       "ng-show"         => "afterGet",
-                       "create-url"      => "#{url}",
-                       "form-fields-url" => "/#{controller_name}/ems_cloud_form_fields/",
-                       "novalidate"      => true}) do |f|
-  %input{:type => 'hidden', :id => "form_id", :value => "##{f.options[:html][:id]}"}
-  %input{:type => 'hidden', :id => "button_name", :name => "button", :value => "add"}
-  %input{:type => 'hidden', :id => "cred_type", :name => "cred_type", :value => "default"}
-
-  = render :partial => "shared/views/ems_common/angular/form"
-
-:javascript
-  ManageIQ.angular.app.value('emsCommonFormId', '#{@ems.id || "new"}');
-  miq_bootstrap($('#form_id').val());
 
+= react('ProviderForm', :redirect => ems_clouds_path, :kind => 'cloud', :title => ui_lookup(:model => 'ManageIQ::Providers::CloudManager'))