Replace cloud tenant form with data-driven-form.

app/javascript/.eslintrc.js

@@ -1,9 +1,18 @@
 module.exports = {
+  parserOptions: {
+    "sourceType": "module",
+  },
   env: {
     browser: true,
     es6: true,
     'jest/globals': true,
   },
+  globals: {
+    miqAjaxButton: true,
+    miqSparkleOff: true,
+    miqSparkleOn: true,
+    add_flash: true,
+  },
   extends: ['airbnb', 'plugin:jest/recommended'],
   plugins: ['jest', 'react'],
   rules: {

app/javascript/components/cloud-tenant-form/cloud-tenant-form.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+import MiqFormRenderer from '../../forms/data-driven-form';
+import { http } from '../../http_api';
+import createSchema from './create-form-schema';
+
+
+class CloudTennantForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      schema: createSchema(!!props.cloudTenantFormId, props.emsChoices),
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.cloudTenantFormId) {
+      miqSparkleOn();
+      http.get(`/cloud_tenant/cloud_tenant_form_fields/${this.props.cloudTenantFormId}`)
+        .then(data => this.setState({ initialValues: { ...data } }, miqSparkleOff()));
+    }
+  }
+
+
+  render() {
+    const { cloudTenantFormId } = this.props;
+    const cancelUrl = cloudTenantFormId ? `/cloud_tenant/update/${cloudTenantFormId}?button=cancel` : '/cloud_tenant/create/new?button=cancel';
+    const submitUrl = cloudTenantFormId ? `/cloud_tenant/update/${cloudTenantFormId}?button=save` : '/cloud_tenant/create/new?button=add';
+    return (
+      <Grid fluid>
+        <h3>{cloudTenantFormId ? __('Edit Cloud Tenant') : __('Basic Information')}</h3>
+        <MiqFormRenderer
+          initialValues={this.state.initialValues}
+          schema={this.state.schema}
+          onSubmit={values => miqAjaxButton(submitUrl, values, { complete: false })}
+          onCancel={() => miqAjaxButton(cancelUrl)}
+          onReset={() => add_flash(__('All changes have been reset'), 'warn')}
+          canReset={!!cloudTenantFormId}
+          buttonsLabels={{
+            submitLabel: cloudTenantFormId ? __('Save') : __('Add'),
+          }}
+        />
+      </Grid>
+    );
+  }
+}
+
+CloudTennantForm.propTypes = {
+  cloudTenantFormId: PropTypes.number,
+  emsChoices: PropTypes.shape({
+    [PropTypes.string]: PropTypes.number,
+  }),
+};
+
+CloudTennantForm.defaultProps = {
+  cloudTenantFormId: undefined,
+  emsChoices: undefined,
+};
+
+export default CloudTennantForm;

app/javascript/components/cloud-tenant-form/create-form-schema.js

@@ -0,0 +1,35 @@
+/**
+ * @param {Boolean} renderEmsChoices
+ * @param {Object} emsChoices
+ */
+function createSchema(renderEmsChoices, emsChoices) {
+  let fields = [{
+    component: 'text-field',
+    name: 'name',
+    validate: [{
+      type: 'required-validator',
+    }],
+    label: __('Tenant Name'),
+    maxLength: 128,
+    validateOnMount: true,
+  }];
+  if (!renderEmsChoices) {
+    fields = [{
+      component: 'select-field',
+      name: 'ems_id',
+      label: __('Cloud Provider'),
+      placeholder: `<${__('Choose')}>`,
+      validateOnMount: true,
+      validate: [{
+        type: 'required-validator',
+      }],
+      options: Object.keys(emsChoices).map(key => ({
+        value: emsChoices[key],
+        label: key,
+      })),
+    }, ...fields];
+  }
+  return { fields };
+}
+
+export default createSchema;

app/javascript/forms/data-driven-form.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import FormRender from '@data-driven-forms/react-form-renderer';
+import { formFieldsMapper, layoutMapper } from '@data-driven-forms/pf3-component-mapper';
+
+const MiqFormRenderer = props => (
+  <FormRender
+    disableSubmit
+    formFieldsMapper={formFieldsMapper}
+    layoutMapper={layoutMapper}
+    {...props}
+  />
+);
+
+export default MiqFormRenderer;

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

@@ -6,6 +6,7 @@ import GenericGroupWrapper from '../react/generic_group_wrapper';
 import VmSnapshotFormComponent from '../components/vm-snapshot-form-component';
 import FormButtonsRedux from '../forms/form-buttons-redux';
 import MiqAboutModal from '../components/miq-about-modal';
+import CloudTennantForm from '../components/cloud-tenant-form/cloud-tenant-form';
 
 /**
 * Add component definitions to this file.
@@ -22,3 +23,4 @@ ManageIQ.component.addReact('TextualSummaryWrapper', TextualSummaryWrapper);
 ManageIQ.component.addReact('VmSnapshotFormComponent', VmSnapshotFormComponent);
 ManageIQ.component.addReact('FormButtonsRedux', FormButtonsRedux);
 ManageIQ.component.addReact('MiqAboutModal', MiqAboutModal);
+ManageIQ.component.addReact('CloudTennantForm', CloudTennantForm);

app/javascript/spec/.eslintrc.json

@@ -10,5 +10,8 @@
   },
   "env": {
     "jest": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
   }
 }

app/javascript/spec/cloud-tenant-form/__snapshots__/cloud-tenant-form.spec.js.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cloud tenant form component should render adding form variant 1`] = `
+<div
+  className="container-fluid"
+>
+  <h3>
+    Basic Information
+  </h3>
+  <MiqFormRenderer
+    buttonsLabels={
+      Object {
+        "submitLabel": "Add",
+      }
+    }
+    canReset={false}
+    onCancel={[Function]}
+    onReset={[Function]}
+    onSubmit={[Function]}
+    schema={
+      Object {
+        "fields": Array [
+          Object {
+            "component": "select-field",
+            "label": "Cloud Provider",
+            "name": "ems_id",
+            "options": Array [
+              Object {
+                "label": "Label 1",
+                "value": 1,
+              },
+              Object {
+                "label": "Label 2",
+                "value": 2,
+              },
+              Object {
+                "label": "Label 3",
+                "value": 3,
+              },
+              Object {
+                "label": "Label 4",
+                "value": 4,
+              },
+            ],
+            "placeholder": "<Choose>",
+            "validate": Array [
+              Object {
+                "type": "required-validator",
+              },
+            ],
+            "validateOnMount": true,
+          },
+          Object {
+            "component": "text-field",
+            "label": "Tenant Name",
+            "maxLength": 128,
+            "name": "name",
+            "validate": Array [
+              Object {
+                "type": "required-validator",
+              },
+            ],
+            "validateOnMount": true,
+          },
+        ],
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Cloud tenant form component should render editing form variant 1`] = `
+<div
+  className="container-fluid"
+>
+  <h3>
+    Edit Cloud Tenant
+  </h3>
+  <MiqFormRenderer
+    buttonsLabels={
+      Object {
+        "submitLabel": "Save",
+      }
+    }
+    canReset={true}
+    onCancel={[Function]}
+    onReset={[Function]}
+    onSubmit={[Function]}
+    schema={
+      Object {
+        "fields": Array [
+          Object {
+            "component": "text-field",
+            "label": "Tenant Name",
+            "maxLength": 128,
+            "name": "name",
+            "validate": Array [
+              Object {
+                "type": "required-validator",
+              },
+            ],
+            "validateOnMount": true,
+          },
+        ],
+      }
+    }
+  />
+</div>
+`;

app/javascript/spec/cloud-tenant-form/cloud-tenant-form.spec.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import fetchMock from 'fetch-mock';
+import CloudTennantForm from '../../components/cloud-tenant-form/cloud-tenant-form';
+
+describe('Cloud tenant form component', () => {
+  let emsChoices;
+  let submitSpy;
+  beforeEach(() => {
+    emsChoices = {
+      'Label 1': 1,
+      'Label 2': 2,
+      'Label 3': 3,
+      'Label 4': 4,
+    };
+    submitSpy = jest.spyOn(window, 'miqAjaxButton');
+  });
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+    submitSpy.mockRestore();
+  });
+
+  it('should render adding form variant', () => {
+    const wrapper = shallow(<CloudTennantForm emsChoices={emsChoices} />).dive();
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('should render editing form variant', () => {
+    fetchMock
+      .getOnce('/cloud_tenant/cloud_tenant_form_fields/1', { name: 'foo' });
+    const wrapper = shallow(<CloudTennantForm cloudTenantFormId={1} />).dive();
+    expect(fetchMock._calls[0]).toHaveLength(2);
+    expect(fetchMock._calls[0][0]).toEqual('/cloud_tenant/cloud_tenant_form_fields/1');
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('should call cancel callback ', () => {
+    const wrapper = mount(<CloudTennantForm emsChoices={emsChoices} />);
+
+    const button = wrapper.find('button').last();
+    button.simulate('click');
+    expect(submitSpy).toHaveBeenCalledWith('/cloud_tenant/create/new?button=cancel');
+  });
+});