Conversion progress

Author: amalvijayan03

app/javascript/components/automate-method-form/automateModal.jsx

@@ -1,12 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Modal } from 'carbon-components-react';
 import MiqFormRenderer from '@@ddf';
 
-const AutomateModal = ({ isOpen, onClose, modalLabel, schema }) => {
+const AutomateModal = ({ isOpen, onClose, modalLabel, schema, callBack }) => {
+
+  const [data, setData] = useState();
+
+  const onSubmit = (values) => {
+    const formData = {
+      type:values.type,
+      selectInput: values.selectInput,
+      defaultValue: values.defaultValue,
+    }
+    console.log("data=",formData)
+    callBack(formData);
+    onClose();
+  }
 
   return (
     <Modal open={isOpen} onRequestClose={onClose} modalLabel={modalLabel} passiveModal>
-       <MiqFormRenderer schema={schema} />
+       <MiqFormRenderer schema={schema}
+       onSubmit={onSubmit} />
     </Modal>
   );
 };

app/javascript/components/automate-method-form/index.jsx

@@ -6,6 +6,8 @@ import InputParams from './method-input-parameters';
 import AutomateModal from './automateModal';
 import { inputParameterSchema } from './method-input-parameters/helper';
 import ReactCodeMirror from './codeMirror';
+import mapper from '../../forms/mappers/componentMapper';
+import enhancedSelect from '../../helpers/enhanced-select';
 
 const MainInfo = ({ options, selectedOption, handleSelect, ansibleSchema }) => (
   <div className="mainClass">
@@ -24,6 +26,7 @@ const MainInfo = ({ options, selectedOption, handleSelect, ansibleSchema }) => (
 const AutomateMethodForm = (props) => {
   const [selectedOption, setSelectedOption] = useState(null);
   const [isModalOpen, setIsModalOpen] = useState(undefined);
+  const [inputParamsFormData, setInputParamsFormData] = useState(null);
 
   const handleSelect = (selectedItem) => {
     setSelectedOption(selectedItem);
@@ -42,11 +45,19 @@ const AutomateMethodForm = (props) => {
   let modalSchema;
   modalSchema = isModalOpen === 'inputParameter' ? inputParameterSchema : undefined;
 
+  const componentMapper = {
+    ...mapper,
+    'enhanced-select': enhancedSelect,
+  };
+
   return (
     <>
       <MainInfo options={options} selectedOption={selectedOption} handleSelect={handleSelect} ansibleSchema={ansibleSchema} />
       {selectedOption && shouldRenderForm(selectedOption) && (
-        <MiqFormRenderer schema={{ fields: ansibleSchema.fields }} />
+        <MiqFormRenderer
+          schema={{ fields: ansibleSchema.fields }}
+          componentMapper={componentMapper}
+        />
       )}
       {selectedOption && shouldRenderForm(selectedOption) && (
         <>
@@ -71,14 +82,19 @@ const AutomateMethodForm = (props) => {
             </>
           )}
           <br/>
-          <InputParams />
+          <InputParams formData={inputParamsFormData}/>
         </>
       )}
       <AutomateModal
         isOpen={ isModalOpen && modalSchema }
         onClose={closeModal}
         modalLabel="Input Parameters"
-        schema={ modalSchema }/>
+        schema={ modalSchema }
+        callBack={(formData) => {
+          console.log(formData);
+          setInputParamsFormData(formData);
+        }}
+      />
     </>
   );
 };

app/javascript/components/automate-method-form/method-input-parameters/helper.js

@@ -1,5 +1,10 @@
 import { componentTypes } from '@@ddf';
 
+const options = [
+        { id: 'option1', name: 'Option 1', label: 'Option 1'},
+        { id: 'option2', name: 'Option 2', label: 'Option 2' },
+        { id: 'option3', name: 'Option 3', label: 'Option 3' },
+]
 export const inputParameterSchema = {
   fields: [
     {
@@ -13,16 +18,12 @@ export const inputParameterSchema = {
       id: 'selectInput',
       name: 'selectInput',
       label: __('Choose'),
-      options: [
-        { id: 'option1', text: 'Option 1' },
-        { id: 'option2', text: 'Option 2' },
-        { id: 'option3', text: 'Option 3' },
-      ],
+      options: options,
     },
     {
       component: componentTypes.TEXT_FIELD,
-      id: 'DefaultValue',
-      name: 'DefaultValue',
+      id: 'defaultValue',
+      name: 'defaultValue',
       label: __('Default Value'),
     },
   ],

app/javascript/components/automate-method-form/method-input-parameters/index.js

@@ -1,45 +1,28 @@
 import React from 'react';
-import { DataTable } from 'carbon-components-react';
+import MiqDataTable from '../../miq-data-table';
 
-const InputParams = () => {
-  const data = [
-    { id: '1', inputName: 'username', dataType: 'string', defaultValue: 'guest', actions: 'Edit, Delete' },
-    { id: '2', inputName: 'password', dataType: 'password', defaultValue: '********', actions: 'Edit, Delete' },
-  ];
+const InputParams = (props) => {
+  const { formData: { defaultValue, type } } = props;
 
-  const headers = [
+  const row = {
+    inputName: 'Input Name',
+    dataType: type,
+    defaultValue: defaultValue,
+  };
+
+  const headers = inputParams.length > 0 ? [
     { key: 'inputName', header: 'Input Name' },
     { key: 'dataType', header: 'Data Type' },
     { key: 'defaultValue', header: 'Default Value' },
-    { key: 'actions', header: 'Actions' },
-  ];
+  ] : [];
 
   return (
-    <DataTable
-      rows={data}
+    <MiqDataTable
       headers={headers}
-      render={({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
-        <table {...getTableProps()} className="bx--data-table">
-          <thead>
-            <tr>
-              {headers.map((header) => (
-                <th key={header.key} {...getHeaderProps({ header })}>
-                  {header.header}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row) => (
-              <tr key={row.id} {...getRowProps({ row })}>
-                {headers.map((header) => (
-                  <td key={header.key}>{row[header.key]}</td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
+      rows={[row]}
+      onCellClick={(selectedRow) => onSelect(selectedRow)}
+      mode="button-group-list"
+      isSortable={false}
     />
   );
 };