Automate Method Form Conversion From HAML to REACT

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

@@ -0,0 +1,46 @@
+import React, { useRef, useEffect } from 'react';
+import CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript';
+
+const AutomateMethodCodeMirror = () => {
+  const codeMirrorRef = useRef(null);
+
+  useEffect(() => {
+    const editor = CodeMirror.fromTextArea(codeMirrorRef.current, {
+      mode: 'javascript',
+      theme: 'material',
+      lineNumbers: true,
+    });
+
+    editor.on('change', (instance) => {
+      console.log(instance)
+    });
+
+    editor.setValue('test');
+
+    return () => {
+      editor.toTextArea();
+    };
+  }, []);
+
+  return (
+    <div>
+      <CodeMirror
+        className="miq-codemirror miq-automate-method-code-mirror"
+        options={{
+          mode,
+          lineNumbers: true,
+          matchBrackets: true,
+          theme: 'eclipse',
+          readOnly: 'nocursor',
+          viewportMargin: Infinity,
+        }}
+        value={'asdasd'}
+      />
+      <Button kind="primary">Validate</Button>
+    </div>
+  );
+};
+
+export default AutomateMethodCodeMirror;

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

@@ -0,0 +1,31 @@
+export const InputParameterActions = {
+  EDIT: 'editInputParameter',
+  DELETE: 'deleteInputParameter',
+}
+const editInputParameterButton = () => ({
+    is_button: true,
+    title: __('Edit'),
+    text: __('Edit'),
+    alt: __('Edit'),
+    kind: 'ghost',
+    callback: InputParameterActions.EDIT,
+});
+
+const deleteInputParameterButton = () => ({
+  is_button: true,
+  title: __('Delete'),
+  text: __('Delete'),
+  alt: __('Delete'),
+  kind: 'ghost',
+  callback: InputParameterActions.DELETE,
+});
+
+export const inputParametersList = (items) => {
+  const rows = items.map((item, index) => ({
+    ...item,
+    id: index.toString(),
+    edit: editInputParameterButton(item, index),
+    delete: deleteInputParameterButton(item, index),
+  }));
+  return rows;
+}

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

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { inputParameterSchema } from './schema';
+import {Button, Modal} from 'carbon-components-react';
+import MiqFormRenderer from '@@ddf';
+import { inputParametersList, InputParameterActions } from './helper';
+import MiqDataTable from '../../miq-data-table';
+import NotificationMessage from '../../notification-message';
+
+const AutomateMethodInputParameter = () => {
+
+  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 addInputParameter = (values) => {
+    console.log('actionType=', values);
+    const newList = [...data.initialValues, values];
+    console.log(newList);
+    setData({
+      ...data,
+      initialValues: newList,
+      rows: inputParametersList(newList),
+      selectedItemId: undefined,
+      isModalOpen: false,
+    })
+  };
+
+  const updateInputParameter = (values) => {
+    data.initialValues[data.selectedItemId] = values;
+    setData({
+      ...data,
+      initialValues: data.initialValues,
+      rows: inputParametersList(data.initialValues),
+      selectedItemId: undefined,
+      isModalOpen: false,
+    });
+  }
+
+  const addOrUpdateInputParameter = (values) => {
+    data.selectedItemId
+      ? updateInputParameter(values)
+      : addInputParameter(values);
+  }
+
+  const editInputParameter = (id) => {
+    console.log('Edit', id);
+
+    console.log(data.initialValues);
+    setData({
+      ...data,
+      isModalOpen: true,
+      selectedItemId: id,
+    });
+  }
+
+  const deleteInputParameter = (id) => {
+    console.log('Delete', id);
+    data.initialValues.splice(id, 1);
+    setData({
+      ...data,
+      initialValues: data.initialValues,
+      rows: inputParametersList(data.initialValues),
+    })
+  }
+
+  const onSelect = (item) => {
+    console.log(item);
+    if (item && item.callbackAction) {
+      switch(item.callbackAction) {
+        case InputParameterActions.EDIT:
+          return editInputParameter(item.id);
+        case InputParameterActions.DELETE:
+          return deleteInputParameter(item.id);
+      }
+    }
+  }
+
+  console.log("data====", data);
+
+  return (
+    <div>
+      <Button
+        onClick={() => setData({...data, isModalOpen: true})}
+        kind="primary"
+      >
+          Add Input Parameters
+      </Button>
+
+      {
+        data.rows.length > 0
+          ? <MiqDataTable
+              headers={headers}
+              rows={data.rows}
+              onCellClick={(selectedRow) => onSelect(selectedRow)}
+              mode="button-group-list"
+            />
+          : <NotificationMessage type="info" message={__('Input parameters are not available.')} />
+      }
+
+      {
+        data.isModalOpen &&
+        <Modal
+          open={data.isModalOpen}
+          modalHeading={__('Add Input Parameters')}
+          secondaryButtonText={__('Cancel')}
+          onRequestClose={() => setData({...data, isModalOpen: false})}
+          passiveModal
+        >
+          <MiqFormRenderer
+            schema={inputParameterSchema}
+            initialValues={data.selectedItemId && data.initialValues[data.selectedItemId]}
+            onSubmit={(values) => addOrUpdateInputParameter(values)} />
+        </Modal>
+      }
+
+    </div>
+  )
+}
+
+export default AutomateMethodInputParameter

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

@@ -0,0 +1,38 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+
+const options = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+]
+
+export const inputParameterSchema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'inputName',
+      name: 'inputName',
+      label: __('Input Name'),
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }],
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'dataType',
+      name: 'dataType',
+      label: __('Choose'),
+      options: options,
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }],
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'defaultValue',
+      name: 'defaultValue',
+      label: __('Default Value'),
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }],
+    },
+  ],
+};
+

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

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Dropdown } from 'carbon-components-react';
+import MiqFormRenderer from '@@ddf';
+import {createSchema} from './schema';
+import componentMapper from '../../forms/mappers/componentMapper';
+import AutomateMethodInputParameter from './automate-method-input-parameter';
+import AutomateMethodCodeMirror from './automate-method-code-mirror';
+
+const AutomateMethodForm = (props) => {
+
+  const mapper = {
+    ...componentMapper,
+    'automate-method-inline': AutomateMethodCodeMirror,
+    'automate-method-input-parameter': AutomateMethodInputParameter,
+  };
+
+  console.log('Initial props',props)
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const options = props.availableLocations.map((item) => ({ id: item[1], label: item[0] }));
+  console.log('options=', options);
+
+  const renderMainInfo = () => {
+    console.log('renderMainInfo'. options);
+    return <div className="mainClass">
+      <h3>Main Info</h3>
+      <Dropdown
+        id="choose"
+        label="Choose"
+        items={options}
+        itemToString={(item) => (item ? item.label : '')}
+        onChange={({ selectedItem }) => setSelectedOption(selectedItem)}
+        titleText={selectedOption ? selectedOption.label : ''}
+      />
+    </div>
+  }
+
+  const renderInputParameters = () => (<AutomateMethodInputParameter />)
+
+  return (
+    <>
+      {renderMainInfo()}
+      {selectedOption && (
+        <MiqFormRenderer
+          schema={createSchema(selectedOption)}
+          componentMapper={mapper}
+        />
+      )}
+
+
+    </>
+  );
+};
+
+export default AutomateMethodForm;