refactor the logic for input parameters

app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx

@@ -3,34 +3,31 @@ import MiqFormRenderer from '@@ddf';
 import { Modal } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import { inputParameterSchema } from './schema';
-import { reformatList } from './helper';
+import { InputParameterRecordActions } from './helper';
+import AutomateMethodContext from '../automate-method-context';
 
-const AutomateMethodInputParameterForm = ({ recordId, modalStatus }) => {
+const AutomateMethodInputParameterForm = ({ modalStatus }) => {
   const { formData, updateInputParameter } = useContext(AutomateMethodContext);
 
   const [data, setData] = useState({
     isModalOpen: false,
+    initialValues: undefined,
   });
 
   useEffect(() => {
-    // TODO: find the record with record and assign it to initialValues.
-  }, [recordId]);
-
-  /** Function to handle input parameter addition */
-  const addItem = (values) => {
-    console.log('addInputParameter=', values);
-    updateInputParameter('add', { selectedId: undefined, modal: true, item: reformatList(values) });
-  };
-
-  /** Function to handle input parameter update */
-  const updateItem = (values) => {
-    console.log('updateInputParameter=', formData.inputparameter.selectedId, values);
-    // find items fommData;
-  };
-
-  const addOrUpdateInputParameter = (values) => (data.selectedItemId
-    ? updateItem(values)
-    : addItem(values));
+    const { selectedId, items } = formData.inputParameter;
+    if (selectedId) {
+      setData({
+        ...data,
+        initialValues: items[selectedId],
+        isModalOpen: true,
+      });
+    }
+  }, [formData.inputParameter.selectedId]);
+
+  const addOrUpdateInputParameter = (values) => (formData.inputParameter.selectedId
+    ? updateInputParameter(InputParameterRecordActions.UPDATE, { values })
+    : updateInputParameter(InputParameterRecordActions.ADD, { values }));
 
   return (
     <Modal
@@ -42,7 +39,7 @@ const AutomateMethodInputParameterForm = ({ recordId, modalStatus }) => {
     >
       <MiqFormRenderer
         schema={inputParameterSchema}
-        initialValues={recordId}
+        initialValues={data.initialValues}
         onSubmit={(values) => addOrUpdateInputParameter(values)}
       />
     </Modal>
@@ -52,10 +49,5 @@ const AutomateMethodInputParameterForm = ({ recordId, modalStatus }) => {
 export default AutomateMethodInputParameterForm;
 
 AutomateMethodInputParameterForm.propTypes = {
-  recordId: PropTypes.number,
   modalStatus: PropTypes.bool.isRequired,
 };
-
-AutomateMethodInputParameterForm.defaultProps = {
-  recordId: undefined,
-};

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

@@ -1,16 +1,23 @@
 /** Action buttons for the input parameter table  */
-export const InputParameterActions = {
+export const InputParameterButtonActions = {
   EDIT: 'editInputParameter',
   DELETE: 'deleteInputParameter',
 };
 
+export const InputParameterRecordActions = {
+  OPEN: 'openModal',
+  ADD: 'add',
+  UPDATE: 'update',
+  DELETE: 'delete',
+};
+
 const editInputParameterButton = () => ({
   is_button: true,
   title: __('Edit'),
   text: __('Edit'),
   alt: __('Edit'),
   kind: 'ghost',
-  callback: InputParameterActions.EDIT,
+  callback: InputParameterButtonActions.EDIT,
 });
 
 const deleteInputParameterButton = () => ({
@@ -19,15 +26,20 @@ const deleteInputParameterButton = () => ({
   text: __('Delete'),
   alt: __('Delete'),
   kind: 'ghost',
-  callback: InputParameterActions.DELETE,
+  callback: InputParameterButtonActions.DELETE,
 });
 
-export const reformatList = (items) => {
-  const rows = items.map((item, index) => ({
-    ...item,
-    id: index.toString(),
-    edit: editInputParameterButton(item, index),
-    delete: deleteInputParameterButton(item, index),
-  }));
-  return rows;
-};
+export const reformatList = (items) => items.map((item, index) => ({
+  ...item,
+  id: index.toString(),
+  edit: editInputParameterButton(item, index),
+  delete: deleteInputParameterButton(item, index),
+}));
+
+export const headers = [
+  { key: 'inputName', header: __('Input Name') },
+  { key: 'dataType', header: __('Data Type') },
+  { key: 'defaultValue', header: __('Default Value') },
+  { key: 'edit', header: __('Edit') },
+  { key: 'delete', header: __('Delete') },
+];

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

@@ -1,44 +1,22 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import { Button } from 'carbon-components-react';
-import { InputParameterActions } from './helper';
+import {
+  InputParameterButtonActions, InputParameterRecordActions, headers, reformatList,
+} from './helper';
 import MiqDataTable from '../../miq-data-table';
 import NotificationMessage from '../../notification-message';
 import AutomateMethodContext from '../automate-method-context';
 
 const AutomateMethodInputParameter = () => {
   const { formData, updateInputParameter } = useContext(AutomateMethodContext);
 
-  const headers = [
-    { key: 'inputName', header: __('Input Name') },
-    { key: 'dataType', header: __('Data Type') },
-    { key: 'defaultValue', header: __('Default Value') },
-    { key: 'edit', header: __('Edit') },
-    { key: 'delete', header: __('Delete') },
-  ];
-
-  const [data, setData] = useState({
-    isModalOpen: false,
-    initialValues: [],
-    rows: [],
-    selectedItemId: undefined,
-  });
-
-  const editInputParameter = (selectedId) => {
-    updateInputParameter('edit', { selectedId, modal: true });
-  };
-
-  /** Function to handle input parameter deletion */
-  const deleteInputParameter = (selectedId) => {
-    updateInputParameter('delete', { selectedId, modal: false });
-  };
-
   const onSelect = (item) => {
     if (item && item.callbackAction) {
       switch (item.callbackAction) {
-        case InputParameterActions.EDIT:
-          return editInputParameter(item.id);
-        case InputParameterActions.DELETE:
-          return deleteInputParameter(item.id);
+        case InputParameterButtonActions.EDIT:
+          return updateInputParameter(InputParameterRecordActions.OPEN, { selectedId: item.id });
+        case InputParameterButtonActions.DELETE:
+          return updateInputParameter(InputParameterRecordActions.DELETE, { selectedId: item.id });
         default:
           return undefined;
       }
@@ -47,7 +25,7 @@ const AutomateMethodInputParameter = () => {
   };
 
   const renderAddButton = () => (
-    <Button onClick={() => updateInputParameter(true, undefined)} kind="primary">
+    <Button onClick={() => updateInputParameter('openModal', undefined)} kind="primary">
       {__('Add Input Parameters')}
     </Button>
 
@@ -60,11 +38,11 @@ const AutomateMethodInputParameter = () => {
         {renderAddButton()}
       </div>
       {
-        data.rows.length > 0
+        formData.inputParameter.items.length > 0
           ? (
             <MiqDataTable
               headers={headers}
-              rows={data.rows}
+              rows={reformatList(formData.inputParameter.items)}
               onCellClick={(selectedRow) => onSelect(selectedRow)}
               mode="button-group-list"
             />

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

@@ -3,48 +3,53 @@ import { Dropdown } from 'carbon-components-react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
 import { createSchema } from './schema';
+import { InputParameterRecordActions } from './automate-method-input-parameter/helper';
 import componentMapper from '../../forms/mappers/componentMapper';
 import AutomateMethodInputParameter from './automate-method-input-parameter';
 import AutomateMethodCodeMirror from './automate-method-code-mirror';
 import AutomateMethodInputParameterForm from './automate-method-input-parameter/automate-method-input-parameter-form';
 import AutomateMethodContext from './automate-method-context';
 
 const AutomateMethodForm = ({ availableLocations }) => {
+  const options = availableLocations.map((item) => ({ id: item[1], label: item[0] }));
+
   const [formData, setFormData] = useState({
+    selectedType: undefined,
     inputParameter: {
       modal: false,
       selectedId: undefined,
       items: [],
     },
   });
 
-  // add = modal,
-  // edit = modal, id
-  // delete = id
-
-  console.log('formData=', formData);
-
   const updateInputParameter = (actionType, data) => {
+    const { inputParameter } = formData;
     switch (actionType) {
-      case 'add':
-        console.log('add');
+      case InputParameterRecordActions.OPEN:
+        inputParameter.modal = true;
+        if (data && data.selectedId) {
+          inputParameter.selectedId = data.selectedId;
+        }
+        break;
+      case InputParameterRecordActions.ADD:
+        inputParameter.items.push(data.values);
+        inputParameter.modal = false;
         break;
-      case 'edit':
-        console.log('edit');
+      case InputParameterRecordActions.UPDATE:
+        inputParameter.items[inputParameter.selectedId] = data.values;
+        inputParameter.modal = false;
+        inputParameter.selectedId = undefined;
         break;
-      case 'delete':
-        console.log('delete');
+
+      case InputParameterRecordActions.DELETE:
+        inputParameter.items.splice(data.selectedId, 1);
         break;
       default:
-        console.log('unknown');
+        console.warn('unknown');
     }
     setFormData({
       ...formData,
-      inputParameter: {
-        ...formData.inputParameter,
-        modal: data.status,
-        selectedId: data.selectedId,
-      },
+      inputParameter: { ...formData.inputParameter },
     });
   };
 
@@ -54,12 +59,6 @@ const AutomateMethodForm = ({ availableLocations }) => {
     'automate-method-input-parameter': AutomateMethodInputParameter,
   };
 
-  console.log('Initial props', availableLocations);
-  const [selectedOption, setSelectedOption] = useState(null);
-
-  const options = availableLocations.map((item) => ({ id: item[1], label: item[0] }));
-  console.log('options=', options);
-
   const chooseAutomateType = () => (
     <div className="mainClass">
       <h3>{__('Main Info')}</h3>
@@ -68,34 +67,36 @@ const AutomateMethodForm = ({ availableLocations }) => {
         label="Choose"
         items={options}
         itemToString={(item) => (item ? item.label : '')}
-        onChange={({ selectedItem }) => setSelectedOption(selectedItem)}
-        titleText={selectedOption ? selectedOption.label : ''}
+        onChange={({ selectedType }) => setFormData({
+          ...formData,
+          selectedType,
+        })}
+        titleText={formData.selectedType ? formData.selectedType.label : ''}
       />
     </div>
   );
 
   const renderInputParameterModal = ({ inputParameter }) => (
     <AutomateMethodInputParameterForm
-      recordId={undefined}
+      recordId={formData.inputParameter.selectedId}
       modalStatus={inputParameter.modal}
     />
   );
 
   return (
     <div className="automate-method-form">
       {chooseAutomateType()}
-      {selectedOption && (
+      {formData.selectedType && (
         <AutomateMethodContext.Provider value={{ formData, updateInputParameter }}>
           <MiqFormRenderer
-            schema={createSchema(selectedOption)}
+            schema={createSchema(formData.selectedType)}
             componentMapper={mapper}
           />
+          {
+            formData.inputParameter.modal && renderInputParameterModal(formData)
+          }
         </AutomateMethodContext.Provider>
       )}
-      {
-        formData.inputParameter.modal && renderInputParameterModal(formData)
-
-      }
     </div>
   );
 };