Reconfigure form angular to react conversion

app/helpers/vm_infra_helper.rb

@@ -1,4 +1,36 @@
 module VmInfraHelper
   include VmHelper
   include DataTableHelper
+
+  # rubocop:disable Rails/HelperInstanceVariable
+  def reconfigure_form_data(vm = @reconfigitems.first)
+    {
+      :recordId  => @reconfigitems.collect(&:id),
+      :requestId => @request_id || 'new',
+      :roles     => {
+        :allowMemoryChange   => role_allows?(:feature => 'vm_reconfigure_memory'),
+        :allowCpuChange      => role_allows?(:feature => 'vm_reconfigure_cpu'),
+        :allowDiskChange     => role_allows?(:feature => 'vm_reconfigure_disks') && item_supports?(:reconfigure_disks),
+        :allowDiskSizeChange => item_supports?(:reconfigure_disksize),
+        :allowNetworkChange  => item_supports?(:reconfigure_network_adapters) && role_allows?(:feature => 'vm_reconfigure_networks'),
+        :allowCdromsChange   => item_supports?(:reconfigure_cdroms) && role_allows?(:feature => 'vm_reconfigure_drives'),
+        :isVmwareInfra       => vm.vendor == 'vmware' && vm.type.include?('InfraManager'),
+        :isVmwareCloud       => vm.vendor == 'vmware' && vm.type.include?('CloudManager'),
+        :isRedhat            => vm.vendor == 'redhat',
+      },
+      :memory    => {
+        :min => @reconfig_limits[:min__vm_memory],
+        :max => @reconfig_limits[:max__vm_memory],
+      },
+      :options   => {
+        :controller_types    => @reconfigitems.first.try(:scsi_controller_types) || [],
+        :vlan_options        => @vlan_options,
+        :avail_adapter_names => @avail_adapter_names,
+        :host_file_options   => @iso_options,
+        :socket_options      => @socket_options,
+        :cores_options       => @cores_options,
+      }
+    }
+  end
+  # rubocop:enable Rails/HelperInstanceVariable
 end

app/javascript/components/reconfigure-vm-form/cd-drive-table/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MiqDataTable from '../../miq-data-table';
+
+const CdDriveTable = ({
+  headers, rows, onDriveCellClick,
+}) => (
+  <div>
+    <hr />
+    <h3>{__('CD/DVD Drives')}</h3>
+    <MiqDataTable
+      headers={headers}
+      rows={rows}
+      onCellClick={(selectedRow, cellType) => onDriveCellClick(selectedRow, cellType)}
+      mode="drive-table-list"
+    />
+  </div>
+);
+
+CdDriveTable.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.any),
+  rows: PropTypes.arrayOf(PropTypes.any),
+  onDriveCellClick: PropTypes.func,
+};
+
+CdDriveTable.defaultProps = {
+  headers: undefined,
+  rows: undefined,
+  onDriveCellClick: undefined,
+};
+export default CdDriveTable;

app/javascript/components/reconfigure-vm-form/disk-form-fields.js

@@ -0,0 +1,118 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+import { restructureOptions } from './helper';
+import { getCellData, getObjectData } from './helpers/general';
+
+const getSwitchData = (row, field) => (getCellData(row, field) === 'Yes');
+
+const nameField = (data) => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'name',
+  name: 'name',
+  label: __('Name'),
+  isReadOnly: true,
+  initialValue: data.form.action === 'resize' ? getCellData(data.editingRow, 'name') : '',
+  hideField: data.form.action === 'add',
+});
+
+const sizeField = (data) => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'size',
+  name: 'size',
+  label: __('Size'),
+  isRequired: true,
+  initialValue: data.form.action === 'resize' ? getCellData(data.editingRow, 'size') : '',
+  validate: [
+    {
+      type: 'diskMemoryCheck',
+      size: data.form.action === 'resize' ? Number(getObjectData(data.editingRow.id.substring(4), data.dataTable.disks, 'orgHdSize')) + 1 : 1,
+      unit: data.form.action === 'resize' ? getObjectData(data.editingRow.id.substring(4), data.dataTable.disks, 'orgHdUnit') : __('MB'),
+    },
+  ],
+});
+
+const unitField = (data) => ({
+  component: componentTypes.SELECT,
+  id: 'unit',
+  name: 'unit',
+  label: __('Unit'),
+  initialValue: data.form.action === 'resize' ? getCellData(data.editingRow, 'unit') : '',
+  options: restructureOptions([__('GB'), __('MB')]),
+});
+
+const typeField = (data) => ({
+  component: componentTypes.SELECT,
+  id: 'type',
+  name: 'type',
+  label: __('Type'),
+  autoFocus: true,
+  options: restructureOptions(['thin', 'thick']),
+  validate: [{ type: validatorTypes.REQUIRED }],
+  isReadOnly: data.form.action !== 'add',
+  isRequired: true,
+  placeholder: __('<Choose>'),
+  includeEmpty: true,
+  disabled: data.form.action === 'resize',
+  initialValue: data.form.action === 'resize' ? getCellData(data.editingRow, 'type') : '',
+});
+
+const modeField = (data, roles) => ({
+  component: componentTypes.SELECT,
+  id: 'mode',
+  name: 'mode',
+  label: __('Mode'),
+  options: restructureOptions(['persistent', 'nonpersistent']),
+  isReadOnly: data.form.action !== 'add',
+  hideField: !roles.isVmwareInfra,
+  isRequired: true,
+  placeholder: __('<Choose>'),
+  includeEmpty: true,
+  disabled: data.form.action === 'resize',
+  validate: [{ type: 'customRequired', hideField: !roles.isVmwareInfra }],
+  initialValue: data.form.action === 'resize' ? getCellData(data.editingRow, 'mode') : '',
+});
+
+const controllerField = (data, roles, options) => ({
+  component: componentTypes.SELECT,
+  id: 'controller',
+  name: 'controller',
+  label: __('Controller'),
+  options: restructureOptions(options),
+  isReadOnly: data.form.action !== 'add',
+  hideField: !roles.isVmwareInfra,
+  disabled: data.form.action === 'resize',
+  initialValue: data.form.action === 'resize' ? getCellData(data.editingRow, 'controller') : '',
+});
+
+const dependentField = (data, roles) => ({
+  component: 'switch',
+  id: 'dependent',
+  name: 'dependent',
+  label: __('Dependent'),
+  onText: __('Yes'),
+  offText: __('No'),
+  hideField: !roles.isVmwareInfra,
+  disabled: data.form.action === 'resize',
+  initialValue: data.form.action === 'resize' ? getSwitchData(data.editingRow, 'dependent') : '',
+});
+
+const bootableField = (data, roles) => ({
+  component: 'switch',
+  name: 'bootable',
+  label: __('Bootable'),
+  onText: __('Yes'),
+  offText: __('No'),
+  isReadOnly: data.form.action !== 'add',
+  hideField: !roles.isRedhat,
+  initialValue: data.form.action === 'resize' ? getSwitchData(data.editingRow, 'bootable') : '',
+});
+
+export const diskFormFields = (data, roles, options, memory) => ([
+  nameField(data),
+  typeField(data),
+  sizeField(data),
+  unitField(data, memory),
+  modeField(data, roles),
+  controllerField(data, roles, options.controller_types),
+  dependentField(data, roles),
+  bootableField(data, roles),
+]);

app/javascript/components/reconfigure-vm-form/disk-table/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MiqDataTable from '../../miq-data-table';
+
+const DiskTable = ({
+  headers, rows, onDiskCellClick, buttonClick,
+}) => (
+  <div>
+    <hr />
+    <h3>{__('Disks')}</h3>
+    <button className="bx--btn bx--btn--primary pull-right disk-add" id="addDisk" onClick={() => buttonClick('new', 'disk', 'add')} type="button">
+      {__('Add Disk')}
+    </button>
+    <MiqDataTable
+      headers={headers}
+      rows={rows}
+      onCellClick={(selectedRow, cellType) => onDiskCellClick(selectedRow, cellType)}
+      mode="disk-table-list"
+    />
+  </div>
+);
+
+DiskTable.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.any),
+  rows: PropTypes.arrayOf(PropTypes.any),
+  onDiskCellClick: PropTypes.func,
+  buttonClick: PropTypes.func,
+};
+
+DiskTable.defaultProps = {
+  headers: undefined,
+  rows: undefined,
+  onDiskCellClick: undefined,
+  buttonClick: undefined,
+};
+export default DiskTable;

app/javascript/components/reconfigure-vm-form/drive-form-fields.js

@@ -0,0 +1,31 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+import { restructureOptions } from './helper';
+import { getCellData } from './helpers/general';
+
+export const nameField = (data) => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'name',
+  name: 'name',
+  label: __('Name'),
+  initialValue: getCellData(data.editingRow, 'name'),
+  autoFocus: true,
+  isReadOnly: true,
+});
+
+export const hostField = (data, options) => ({
+  component: componentTypes.SELECT,
+  id: 'host_file',
+  name: 'host_file',
+  label: __('Host File'),
+  options: restructureOptions(options),
+  validate: [{ type: validatorTypes.REQUIRED }],
+  isRequired: true,
+  placeholder: __('<Choose>'),
+  includeEmpty: true,
+  initialValue: getCellData(data.editingRow, 'hostFile'),
+});
+
+export const driveFormFields = (data, options) => ([
+  nameField(data),
+  hostField(data, options.host_file_options),
+]);