API integration for input parameter form

ManageIQ · Feb 27, 2024 · 5bfa4be · 5bfa4be
1 parent 255a7ab
commit 5bfa4be
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 54 deletions.
diff --git a/...mate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx b/...mate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx
@@ -10,7 +10,6 @@ const AutomateMethodInputParameterForm = ({ modalStatus }) => {
   const { formData, updateInputParameter } = useContext(AutomateMethodContext);
 
   const [data, setData] = useState({
-    isModalOpen: false,
     initialValues: undefined,
   });
 
@@ -20,7 +19,6 @@ const AutomateMethodInputParameterForm = ({ modalStatus }) => {
       setData({
         ...data,
         initialValues: items[selectedId],
-        isModalOpen: true,
       });
     }
   }, [formData.inputParameter.selectedId]);
@@ -34,11 +32,11 @@ const AutomateMethodInputParameterForm = ({ modalStatus }) => {
       open={modalStatus}
       modalHeading={__('Add Input Parameters')}
       secondaryButtonText={__('Cancel')}
-      onRequestClose={() => setData({ ...data, isModalOpen: false })}
+      onRequestClose={() => updateInputParameter(InputParameterRecordActions.CLOSE, undefined)}
       passiveModal
     >
       <MiqFormRenderer
-        schema={inputParameterSchema}
+        schema={inputParameterSchema(formData.ansibleJobTemplate)}
         initialValues={data.initialValues}
         onSubmit={(values) => addOrUpdateInputParameter(values)}
       />

diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js b/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js
@@ -6,6 +6,7 @@ export const InputParameterButtonActions = {
 
 export const InputParameterRecordActions = {
   OPEN: 'openModal',
+  CLOSE: 'closeModal',
   ADD: 'add',
   UPDATE: 'update',
   DELETE: 'delete',
@@ -43,3 +44,37 @@ export const headers = [
   { key: 'edit', header: __('Edit') },
   { key: 'delete', header: __('Delete') },
 ];
+
+export const handleInputParameterUpdate = (actionType, data, formData) => {
+  const { inputParameter } = formData;
+
+  if (actionType !== InputParameterRecordActions.DELETE) {
+    inputParameter.modal = false;
+    inputParameter.selectedId = undefined;
+  }
+
+  switch (actionType) {
+    case InputParameterRecordActions.OPEN:
+      inputParameter.modal = true;
+      if (data && data.selectedId) {
+        inputParameter.selectedId = data.selectedId;
+      }
+      break;
+    case InputParameterRecordActions.CLOSE:
+      inputParameter.modal = false;
+      break;
+    case InputParameterRecordActions.ADD:
+      inputParameter.items.push(data.values);
+      break;
+    case InputParameterRecordActions.UPDATE:
+      inputParameter.items[inputParameter.selectedId] = data.values;
+      break;
+    case InputParameterRecordActions.DELETE:
+      inputParameter.items.splice(data.selectedId, 1);
+      break;
+    default:
+      console.warn(__('Unknown action'));
+  }
+
+  return { ...formData.inputParameter };
+};
diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/schema.js b/app/javascript/components/automate-method-form/automate-method-input-parameter/schema.js
@@ -1,13 +1,14 @@
+/* eslint-disable camelcase */
 import { componentTypes, validatorTypes } from '@@ddf';
 
-const options = [
-  { label: 'Option 1', value: 'option1' },
-  { label: 'Option 2', value: 'option2' },
-  { label: 'Option 3', value: 'option3' },
-];
+// const options = [
+//   { label: 'Option 1', value: 'option1' },
+//   { label: 'Option 2', value: 'option2' },
+//   { label: 'Option 3', value: 'option3' },
+// ];
 
 /** Schema for input parameter form */
-export const inputParameterSchema = {
+export const inputParameterSchema = ({ available_datatypes }) => ({
   fields: [
     {
       component: componentTypes.TEXT_FIELD,
@@ -22,7 +23,7 @@ export const inputParameterSchema = {
       id: 'dataType',
       name: 'dataType',
       label: __('Choose'),
-      options,
+      options: available_datatypes.map((item) => ({ label: item, value: item })),
       isRequired: true,
       validate: [{ type: validatorTypes.REQUIRED }],
     },
@@ -35,4 +36,4 @@ export const inputParameterSchema = {
       validate: [{ type: validatorTypes.REQUIRED }],
     },
   ],
-};
+});
diff --git a/app/javascript/components/automate-method-form/index.jsx b/app/javascript/components/automate-method-form/index.jsx
@@ -1,19 +1,22 @@
-import React, { useState } from 'react';
-import { Dropdown } from 'carbon-components-react';
+import React, { useState, useEffect } from 'react';
+import { Dropdown, Loading } 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 { handleInputParameterUpdate } 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';
+import { http } from '../../http_api';
 
 const AutomateMethodForm = ({ availableLocations }) => {
   const options = availableLocations.map((item) => ({ id: item[1], label: item[0] }));
 
   const [formData, setFormData] = useState({
+    loading: true,
+    ansibleJobTemplate: undefined,
     selectedType: undefined,
     inputParameter: {
       modal: false,
@@ -22,34 +25,20 @@ const AutomateMethodForm = ({ availableLocations }) => {
     },
   });
 
-  const updateInputParameter = (actionType, data) => {
-    const { inputParameter } = formData;
-    switch (actionType) {
-      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 InputParameterRecordActions.UPDATE:
-        inputParameter.items[inputParameter.selectedId] = data.values;
-        inputParameter.modal = false;
-        inputParameter.selectedId = undefined;
-        break;
+  useEffect(() => {
+    http.get('/miq_ae_class/method_form_fields/new?location=ansible_job_template').then((ansibleJobTemplateResponse) => {
+      setFormData({
+        ...formData,
+        loading: false,
+        ansibleJobTemplate: ansibleJobTemplateResponse,
+      });
+    });
+  }, []);
 
-      case InputParameterRecordActions.DELETE:
-        inputParameter.items.splice(data.selectedId, 1);
-        break;
-      default:
-        console.warn('unknown');
-    }
+  const updateInputParameter = (actionType, data) => {
     setFormData({
       ...formData,
-      inputParameter: { ...formData.inputParameter },
+      inputParameter: handleInputParameterUpdate(actionType, data, formData),
     });
   };
 
@@ -67,9 +56,9 @@ const AutomateMethodForm = ({ availableLocations }) => {
         label="Choose"
         items={options}
         itemToString={(item) => (item ? item.label : '')}
-        onChange={({ selectedType }) => setFormData({
+        onChange={({ selectedItem }) => setFormData({
           ...formData,
-          selectedType,
+          selectedType: selectedItem,
         })}
         titleText={formData.selectedType ? formData.selectedType.label : ''}
       />
@@ -83,20 +72,40 @@ const AutomateMethodForm = ({ availableLocations }) => {
     />
   );
 
+  const renderLoader = () => (
+    <div className="loadingSpinner">
+      <Loading active small withOverlay={false} className="loading" />
+    </div>
+  );
+
+  const renderFormContents = () => (
+    <>
+      {
+        chooseAutomateType()
+      }
+      {
+        formData.selectedType && (
+          <AutomateMethodContext.Provider value={{ formData, updateInputParameter }}>
+            <MiqFormRenderer
+              schema={createSchema(formData.selectedType)}
+              componentMapper={mapper}
+            />
+            {
+              formData.inputParameter.modal && renderInputParameterModal(formData)
+            }
+          </AutomateMethodContext.Provider>
+        )
+      }
+    </>
+  );
+
   return (
     <div className="automate-method-form">
-      {chooseAutomateType()}
-      {formData.selectedType && (
-        <AutomateMethodContext.Provider value={{ formData, updateInputParameter }}>
-          <MiqFormRenderer
-            schema={createSchema(formData.selectedType)}
-            componentMapper={mapper}
-          />
-          {
-            formData.inputParameter.modal && renderInputParameterModal(formData)
-          }
-        </AutomateMethodContext.Provider>
-      )}
+      {
+        formData.loading
+          ? renderLoader()
+          : renderFormContents()
+      }
     </div>
   );
 };