Conversion progress

ManageIQ · Feb 6, 2024 · d5c4137 · d5c4137
1 parent 7995404
commit d5c4137
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 122 deletions.
diff --git a/app/javascript/components/automate-method-form/automateModal.jsx b/app/javascript/components/automate-method-form/automateModal.jsx
@@ -1,18 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Modal } from 'carbon-components-react';
 import MiqFormRenderer from '@@ddf';
 
 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();
   }

diff --git a/app/javascript/components/automate-method-form/combinedSchema.js b/app/javascript/components/automate-method-form/combinedSchema.js
@@ -1,6 +1,12 @@
 import { componentTypes } from '@@ddf';
 
 const combinedSchema = (options, selectedOption) => {
+  /** Dummy data */
+  const repositoryOptions = [
+    { label: 'Repository 1', value: 'repo1' },
+    { label: 'Repository 2', value: 'repo2' },
+    { label: 'Repository 3', value: 'repo3' },
+  ];
   const commonFields = [
     {
       component: componentTypes.TEXT_FIELD,
@@ -63,76 +69,135 @@ const combinedSchema = (options, selectedOption) => {
     }
   ];
 
+  const playBookFields = [
+    {
+      component: componentTypes.SELECT,
+      id: 'repository',
+      name: 'repository',
+      label: __('Repository'),
+      placeholder: __('<Choose>'),
+      options: repositoryOptions,
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'playbook',
+      name: 'playbook',
+      label: __('PlayBook'),
+      condition: {
+        when: "repository",
+        isNotEmpty: true
+      }
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'machineCredential',
+      name: 'machineCredential',
+      label: __('Machine Credential'),
+      condition: {
+        when: "repository",
+        isNotEmpty: true
+      }
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'vaultCredential',
+      name: 'vaultCredential',
+      label: __('Vault Credential'),
+      condition: {
+        when: "repository",
+        isNotEmpty: true
+      }
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'cloudType',
+      name: 'cloudType',
+      label: __('Cloud Type'),
+      condition: {
+        when: "repository",
+        isNotEmpty: true
+      }
+    }
+  ];
+
+  const ansibleFields = [
+    {
+      component: componentTypes.SELECT,
+      id: 'provider',
+      name: 'provider',
+      label: __('Provider'),
+      options: options,
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'workflowTemplate',
+      name: 'workflowTemplate',
+      label:__('Workflow Template'),
+      options: options,
+    },
+  ]
+
+  const additionalFields = [
+    {
+      id: 'hostValue',
+      component: componentTypes.RADIO,
+      label: __('Hosts'),
+      name: 'hostValue',
+      options: [
+        { value: 'localhost', label: 'Localhost' },
+        { value: 'specify', label: 'Specify host values' },
+      ],
+    },
+    {
+    component: componentTypes.TEXTAREA,
+    name: 'specify-details',
+    label: __('Specify details'),
+    condition: {
+      and: [{ when: 'hostValue', is: 'specify' }],
+    },
+    },
+  ]
+
+  const ansibleFieldsCommon = [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'maxttl',
+      name: 'maxttl',
+      label: __('Max TTL(mins)'),
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'loggingOutput',
+      name: 'loggingOutput',
+      label: __('Logging Output'),
+    },
+  ]
+
+  const verbosityField = [
+    {
+      component: componentTypes.SELECT,
+      id: 'verbosity',
+      name: 'verbosity',
+      label: __('Verbosity'),
+      options: options,
+    }
+  ]
+
   return {
-    fields: selectedOption && selectedOption.id === 'Built-in'
-      ? [...commonFields, ...builtInFields]
-      : selectedOption && selectedOption.id === 'Expression'
-        ? [...commonFields, ...expressionFields]
-        :selectedOption && selectedOption.id === 'Inline'
-        ?[...commonFields]
-        : [
-          ...commonFields,
-          {
-            component: componentTypes.SELECT,
-            id: 'provider',
-            name: 'provider',
-            label: __('Provider'),
-            options: options,
-          },
-          {
-            component: componentTypes.SELECT,
-            id: 'workflowTemplate',
-            name: 'workflowTemplate',
-            label: __('Workflow Template'),
-            options: options,
-          },
-          ...(selectedOption && (selectedOption.id === 'Ansible Tower Job Template' || selectedOption.id === 'Playbook')
-            ? [
-              {
-                component: componentTypes.RADIO,
-                id: 'hostValue',
-                name: 'hostValue',
-                label: __('Hosts'),
-                options: [
-                  { value: 'localhost', label: 'Localhost' },
-                  { value: 'specify', label: 'Specify host values' },
-                ],
-              },
-            ]
-            : []),
-          {
-            component: componentTypes.TEXTAREA,
-            name: 'specify-details',
-            label: __('Specify details'),
-            condition: {
-              and: [{ when: 'hostValue', is: 'specify' }],
-            },
-          },
-          {
-            component: componentTypes.TEXT_FIELD,
-            id: 'maxttl',
-            name: 'maxttl',
-            label: __('Max TTL(mins)'),
-          },
-          {
-            component: componentTypes.SELECT,
-            id: 'loggingOutput',
-            name: 'loggingOutput',
-            label: __('Logging Output'),
-          },
-          ...(selectedOption && selectedOption.id === 'Playbook'
-            ? [
-              {
-                component: componentTypes.SELECT,
-                id: 'verbosity',
-                name: 'verbosity',
-                label: __('Verbosity'),
-                options: options,
-              },
-            ]
-            : []),
-        ],
-  };
+    fields: selectedOption && selectedOption.id === 'Ansible Tower Job Template'
+    ?[...commonFields, ...ansibleFields, ...additionalFields, ...ansibleFieldsCommon]
+    :selectedOption && selectedOption.id === 'Ansible Tower Workflow Template'
+    ?[...commonFields, ...ansibleFields, ...ansibleFieldsCommon]
+    :selectedOption && selectedOption.id === 'Built-in'
+    ?[...commonFields, ...builtInFields]
+    :selectedOption && selectedOption.id === 'Expression'
+    ?[...commonFields, ...expressionFields]
+    :selectedOption && selectedOption.id === 'Inline'
+    ?[...commonFields]
+    :selectedOption && selectedOption.id === 'Playbook'
+    ?[...commonFields, ...playBookFields, ...additionalFields, ...ansibleFieldsCommon, ...verbosityField]
+    :[]
+  }
 };
 
 export default combinedSchema;
diff --git a/app/javascript/components/automate-method-form/index.jsx b/app/javascript/components/automate-method-form/index.jsx
@@ -2,12 +2,10 @@ import React, { useState } from 'react';
 import { Dropdown, Button } from 'carbon-components-react';
 import MiqFormRenderer from '@@ddf';
 import combinedSchema from './combinedSchema';
-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';
+import MiqDataTable from '../miq-data-table';
 
 const MainInfo = ({ options, selectedOption, handleSelect, ansibleSchema }) => (
   <div className="mainClass">
@@ -24,9 +22,14 @@ const MainInfo = ({ options, selectedOption, handleSelect, ansibleSchema }) => (
 );
 
 const AutomateMethodForm = (props) => {
+  console.log('Initialprops',props)
   const [selectedOption, setSelectedOption] = useState(null);
   const [isModalOpen, setIsModalOpen] = useState(undefined);
-  const [inputParamsFormData, setInputParamsFormData] = useState(null);
+  const [formData, setFormData] = useState([]);
+
+  const handleFormDataSubmit = (newFormData) => {
+    setFormData((prevFormData) => [...prevFormData, newFormData]);
+  };
 
   const handleSelect = (selectedItem) => {
     setSelectedOption(selectedItem);
@@ -44,32 +47,40 @@ const AutomateMethodForm = (props) => {
   const ansibleSchema = combinedSchema(options, selectedOption);
   let modalSchema;
   modalSchema = isModalOpen === 'inputParameter' ? inputParameterSchema : undefined;
+  console.log('selectedOption: ',selectedOption)
+  const headers = [
+    { key: 'inputName', header: 'Input Name' },
+    { key: 'dataType', header: 'Data Type' },
+    { key: 'defaultValue', header: 'Default Value' },
+    { key: 'action', header: 'Action' },
+  ];
 
-  const componentMapper = {
-    ...mapper,
-    'enhanced-select': enhancedSelect,
-  };
+  const rows = formData.map((data) => ({
+    id: 'one',
+    inputName: data.type,
+    dataType: data.selectInput,
+    defaultValue: data.defaultValue,
+  }));
 
   return (
     <>
       <MainInfo options={options} selectedOption={selectedOption} handleSelect={handleSelect} ansibleSchema={ansibleSchema} />
       {selectedOption && shouldRenderForm(selectedOption) && (
         <MiqFormRenderer
           schema={{ fields: ansibleSchema.fields }}
-          componentMapper={componentMapper}
         />
       )}
       {selectedOption && shouldRenderForm(selectedOption) && (
         <>
           {selectedOption.id === 'Inline' && (
             <>
-               <Button onClick={openModal} kind="primary">
+              <Button onClick={openModal} kind="primary">
                 Add Method
-               </Button>
+              </Button>
               <ReactCodeMirror code={'fg'} onChange={(newCode) => console.log(newCode)} />
               <Button kind="primary">
                 Validate
-               </Button>
+              </Button>
               <br/>
             </>
           )}
@@ -82,19 +93,28 @@ const AutomateMethodForm = (props) => {
             </>
           )}
           <br/>
-          <InputParams formData={inputParamsFormData}/>
+          {formData && formData.length > 0 && (
+            <MiqDataTable
+              headers={headers}
+              rows={rows}
+              onCellClick={(selectedRow) => onSelect(selectedRow)}
+              mode="button-group-list"
+            />
+          )}
         </>
       )}
       <AutomateModal
         isOpen={ isModalOpen && modalSchema }
         onClose={closeModal}
         modalLabel="Input Parameters"
         schema={ modalSchema }
-        callBack={(formData) => {
-          console.log(formData);
-          setInputParamsFormData(formData);
+        callBack={(newFormData) => {
+          handleFormDataSubmit(newFormData);
+          console.log('newFormData', newFormData);
+          console.log('setFormData', formData);
         }}
       />
+      {console.log('formData.length', formData.length)}
     </>
   );
 };

diff --git a/app/javascript/components/automate-method-form/method-input-parameters/helper.js b/app/javascript/components/automate-method-form/method-input-parameters/helper.js
@@ -1,10 +1,11 @@
 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' },
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
 ]
+
 export const inputParameterSchema = {
   fields: [
     {

diff --git a/app/javascript/components/automate-method-form/method-input-parameters/index.js b/app/javascript/components/automate-method-form/method-input-parameters/index.js