Integration of code mirror component and input params component

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Modal } from 'carbon-components-react';
+import MiqFormRenderer from '@@ddf';
+
+const AutomateModal = ({ isOpen, onClose, modalLabel, schema }) => {
+
+  return (
+    <Modal open={isOpen} onRequestClose={onClose} modalLabel={modalLabel} passiveModal>
+       <MiqFormRenderer schema={schema} />
+    </Modal>
+  );
+};
+
+export default AutomateModal;

app/javascript/components/automate-method-form/codeMirror.js

@@ -0,0 +1,35 @@
+import React, { useRef, useEffect } from 'react';
+import CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript';
+
+const ReactCodeMirror = ({ code, onChange }) => {
+  const codeMirrorRef = useRef(null);
+
+  useEffect(() => {
+    const editor = CodeMirror.fromTextArea(codeMirrorRef.current, {
+      mode: 'javascript',
+      theme: 'material',
+      lineNumbers: true,
+    });
+
+    editor.on('change', (instance) => {
+      if (onChange) {
+        onChange(instance.getValue());
+      }
+    });
+    editor.setValue(code);
+
+    return () => {
+      editor.toTextArea();
+    };
+  }, [code, onChange]);
+
+  return (
+    <div>
+      <textarea ref={codeMirrorRef} />
+    </div>
+  );
+};
+
+export default ReactCodeMirror;

app/javascript/components/automate-method-form/combinedSchema.js

@@ -0,0 +1,137 @@
+import { componentTypes } from '@@ddf';
+
+const combinedSchema = (options, selectedOption) => {
+  const commonFields = [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'type',
+      name: 'type',
+      label: __('Type'),
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'fully-qualified-name',
+      name: 'fully-qualified-name',
+      label: __('Fully Qualified Name'),
+      initialValue: '',
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'name',
+      name: 'name',
+      label: __('Name'),
+      initialValue: '',
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'displayName',
+      name: 'displayname',
+      label: __('Display Name'),
+      initialValue: '',
+    },
+  ];
+
+  const builtInFields = [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'built-in',
+      name: 'built-in',
+      label: __('Optional, if not specified, method name is used'),
+    },
+  ];
+
+  const expressionFields = [
+    {
+      component: componentTypes.SELECT,
+      id: 'expressionObject',
+      name: 'expressionObject',
+      label: __('Expression Object'),
+      options: options,
+    },
+    {
+      component: componentTypes.TEXTAREA,
+      id: 'editexpression',
+      name: 'editexpression',
+      label: __('Placeholder For Edit Expression'),
+    },
+    {
+      component: componentTypes.TEXTAREA,
+      id: 'editselected',
+      name: 'editselected',
+      label: __('Placeholder For Edit Selected Element'),
+    }
+  ];
+
+  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,
+              },
+            ]
+            : []),
+        ],
+  };
+};
+
+export default combinedSchema;