Convert the Cloud Subnet Form to DDF and get rid of react-ui-components

.travis.yml

@@ -7,7 +7,6 @@ rvm:
 sudo: required
 cache:
   bundler: true
-  yarn: true
 env:
   global:
   - RUBY_GC_HEAP_GROWTH_MAX_SLOTS=300000
@@ -16,18 +15,12 @@ env:
   - BUNDLE_WITH=qpid_proton
   matrix:
   - TEST_SUITE=spec
-  - TEST_SUITE=yarn:test
-matrix:
-  exclude:
-  - rvm: 2.5.7
-    env: TEST_SUITE=yarn:test
 addons:
   postgresql: '10'
 before_install:
 - source ${TRAVIS_BUILD_DIR}/tools/ci/before_install.sh
 install:
 - bin/setup
-- bundle exec rake yarn:install
 script: bundle exec rake $TEST_SUITE
 after_script: bundle exec codeclimate-test-reporter
 notifications:

Rakefile

@@ -19,12 +19,6 @@ namespace :yarn do
     system('yarn install')
     exit $CHILD_STATUS.exitstatus
   end
-
-  desc "run jest tests"
-  task :test do
-    system('yarn test')
-    exit $CHILD_STATUS.exitstatus
-  end
 end
 
 task :default => :spec

app/javascript/components/create-nuage-cloud-subnet-form.jsx

@@ -1,50 +1,58 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import NuageCloudSubnetForm from './forms/nuage-cloud-subnet-form'
-import { handleApiError, createSubnet, fetchRouter } from '../utils/api.js'
+import MiqFormRenderer from '@@ddf';
 
-class CreateNuageCloudSubnetForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleFormStateUpdate = this.handleFormStateUpdate.bind(this);
-    this.state = {
-      loading: true
-    }
-  }
+import createSchema from './create-nuage-cloud-subnet-form.schema';
 
-  componentDidMount() {
-    this.props.dispatch({
+const CreateNuageCloudSubnetForm = ({ dispatch }) => {
+  useEffect(() => {
+    dispatch({
       type: 'FormButtons.init',
       payload: {
         newRecord: true,
         pristine: true,
-        addClicked: () => createSubnet(this.state.values, this.state.emsId, this.state.routerRef)
-      }
+      },
     });
-    fetchRouter(ManageIQ.record.recordId).then(router => {
-      this.setState({emsId: router.ems_id, routerRef: router.ems_ref, loading: false});
-    }, handleApiError(this));
-  }
+  }, []);
 
-  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 });
-  }
+  const submitValues = (values) => {
+    API.get(`/api/network_routers/${ManageIQ.record.recordId}?attributes=ems_ref,name,ems_id`).then(({ ems_ref: router_ref, ems_id }) =>
+      API.post(`/api/providers/${ems_id}/cloud_subnets`, {
+        action: "create",
+        resource: { ...values, router_ref },
+      }).then(({ results }) =>
+        results.forEach((res) => window.add_flash(res.message, res.success ? "success" : "error"))
+      )
+    ).catch((err) => {
+      window.add_flash(err.data && err.data.error && err.data.error.message || __('Unknown API error'), "error");
+    });
+  };
+
+  const handleFormStateUpdate = (formState) => {
+    dispatch({
+      type: 'FormButtons.saveable',
+      payload: formState.valid,
+    });
+    dispatch({
+      type: 'FormButtons.pristine',
+      payload: formState.pristine,
+    });
+    dispatch({
+      type: 'FormButtons.callbacks',
+      payload: { addClicked: () => submitValues(formState.values) },
+    });
+  };
 
-  render() {
-    if(this.state.error) {
-      return <p>{this.state.error}</p>
-    }
-    return (
-      <NuageCloudSubnetForm
-        updateFormState={this.handleFormStateUpdate}
-        loading={this.state.loading}
-      />
-    );
-  }
-}
+  return (
+    <MiqFormRenderer
+      schema={createSchema()}
+      onSubmit={submitValues}
+      showFormControls={false}
+      onStateUpdate={handleFormStateUpdate}
+    />
+  )
+};
 
 CreateNuageCloudSubnetForm.propTypes = {
   dispatch: PropTypes.func.isRequired,

app/javascript/components/create-nuage-cloud-subnet-form.schema.js

@@ -0,0 +1,76 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+
+const IPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+const mask = /^(((128|192|224|240|248|252|254)\.0\.0\.0)|(255\.(0|128|192|224|240|248|252|254)\.0\.0)|(255\.255\.(0|128|192|224|240|248|252|254)\.0)|(255\.255\.255\.(0|128|192|224|240|248|252|254)))$/;
+
+const createSchema = () => ({
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'name',
+      label: __('Name'),
+      placeholder: __('Subnet Name'),
+      isRequired: true,
+      validate: [{
+        type: validatorTypes.REQUIRED,
+        message: __('Required'),
+      }],
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'address',
+      label: __('Address'),
+      placeholder: '100.100.100.0',
+      isRequired: true,
+      validate: [
+        {
+          type: validatorTypes.REQUIRED,
+          message: __('Required'),
+        },
+        {
+          type: validatorTypes.PATTERN_VALIDATOR,
+          pattern: IPv4,
+          message: __('Must be a valid IPv4 address'),
+        }
+      ],
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'netmask',
+      label: __('Netmask'),
+      placeholder: '255.255.255.0',
+      isRequired: true,
+      validate: [
+        {
+          type: validatorTypes.REQUIRED,
+          message: __('Required'),
+        },
+        {
+          type: validatorTypes.PATTERN_VALIDATOR,
+          pattern: mask,
+          message: __('Must be a valid netmask'),
+        }
+      ],
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'gateway',
+      label: __('Gateway'),
+      placeholder: '100.100.100.1',
+      isRequired: true,
+      validate: [
+        {
+          type: validatorTypes.REQUIRED,
+          message: __('Required'),
+        },
+        {
+          type: validatorTypes.PATTERN_VALIDATOR,
+          pattern: IPv4,
+          message: __('Must be a valid IPv4 address'),
+        }
+      ],
+    },
+  ],
+});
+
+export default createSchema;

package.json

@@ -13,41 +13,17 @@
     "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",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-to-json": "^3.3.4",
-    "jest": "^23.4.2"
-  },
+  "dependencies": {},
   "engines": {
     "node": ">= 6.9.1",
     "npm": ">= 3.10.3",
     "yarn": ">= 0.20.1"
   },
-  "scripts": {
-    "test": "jest"
-  },
   "jest": {
     "testURL": "http://localhost",
     "setupTestFrameworkScriptFile": "<rootDir>/spec/javascript/setup.js",
-    "roots": ["<rootDir>/spec/javascript"]
+    "roots": [
+      "<rootDir>/spec/javascript"
+    ]
   }
 }