Automate Method Form Conversion From HAML to REACT

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

@@ -0,0 +1,68 @@
+import { componentTypes } from '@@ddf';
+
+const baseSchema = (options, selectedOption) => {
+  const commonFields = [
+    {
+      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'),
+    },
+  ];
+
+  return {
+    fields: [
+      {
+        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 Workflow Template'
+        ? []
+        : [
+            {
+              component: componentTypes.RADIO,
+              id: 'hostValue',
+              name: 'hostValue',
+              label: __('Hosts'),
+              options: [
+                { value: 'localhost', label: 'Localhost' },
+                { value: 'specify', label: 'Specify host values' },
+              ],
+            },
+          ]),
+      ...commonFields,
+    ],
+  };
+};
+
+const ansibleTowerJobTemplateSchema = (options, selectedOption) => {
+  let schema = baseSchema(options, selectedOption);
+
+  return schema;
+};
+
+export default ansibleTowerJobTemplateSchema;

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

@@ -0,0 +1,38 @@
+import { componentTypes } from '@@ddf';
+
+const commonSchema = () => ({
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'type',
+      name: 'type',
+      label: __('Type'),
+      disabled: true,
+      initialValue: 'Ansible Tower Job Template',
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'fully-qualified-name',
+      name: 'fully-qualified-name',
+      label: __('Fully Qualified Name'),
+      disabled: true,
+      initialValue: '',
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'name',
+      name: 'name',
+      label: __('Name'),
+      initialValue: '',
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'displayName',
+      name: 'displayname',
+      label: __('Display Name'),
+      initialValue: '',
+    },
+  ],
+});
+
+export default commonSchema;

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

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Dropdown } from 'carbon-components-react';
+import MiqFormRenderer from '@@ddf';
+import commonSchema from './commonSchema';
+import ansibleTowerJobTemplateSchema from './ansibleTowerJobTemplateSchema';
+
+const AutomateMethodForm = (props) => {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const handleSelect = (selectedItem) => {
+    setSelectedOption(selectedItem);
+  };
+
+  const options = props.availableLocations.map(([id, label]) => ({ id, label }));
+
+  const ansibleSchema =
+    (selectedOption && selectedOption.id === 'Ansible Tower Job Template') ||
+    (selectedOption && selectedOption.id === 'Ansible Tower Workflow Template') ||
+    (selectedOption && selectedOption.id === 'Playbook')
+      ? [
+          ...commonSchema(options).fields,
+          ...ansibleTowerJobTemplateSchema(options, selectedOption).fields,
+        ]
+      : commonSchema().fields;
+        console.log(selectedOption)
+  return (
+    <>
+      {selectedOption &&
+      (selectedOption.id === 'Ansible Tower Job Template' ||
+        selectedOption.id === 'Ansible Tower Workflow Template' ||
+        selectedOption.id === 'Ansible Tower Workflow Playbook' ) ? (
+        <MiqFormRenderer schema={{ fields: ansibleSchema }} />
+      ) : (
+        <div className="mainClass">
+          <h3>Main Info</h3>
+          <Dropdown
+            id="choose"
+            label="Choose"
+            items={options}
+            itemToString={(item) => (item ? item.label : '')}
+            onChange={({ selectedItem }) => handleSelect(selectedItem)}
+            titleText={selectedOption ? selectedOption.label : ''}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AutomateMethodForm;

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

@@ -0,0 +1,72 @@
+import { componentTypes } from '@@ddf';
+
+const typeField = () => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'type',
+  name: 'type',
+  label: __('Type'),
+  disabled: true,
+  initialValue: 'Ansible Tower Job Template',
+});
+
+const qualifiedNameField = () => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'fully-qualified-name',
+  name: 'fully-qualified-name',
+  label: __('Fully Qualified Name'),
+  disabled: true,
+  initialValue: '',
+});
+
+const nameField = () => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'name',
+  name: 'name',
+  label: __('Name'),
+  initialValue: '',
+});
+
+const displayNameField = () => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'displayName',
+  name: 'displayname',
+  label: __('Display Name'),
+  initialValue: '',
+});
+
+const providerField = () => ({
+  component: componentTypes.SELECT,
+  id: 'provider',
+  name: 'provider',
+  label: __('Provider'),
+  options: options,
+});
+
+const workflowProviderField = () => ({
+  component: componentTypes.SELECT,
+  id: 'workflowProvider',
+  name: 'workflowProvider',
+  label: __('Workflow Provider'),
+  options: options,
+});
+
+const hostValueField = () => ({
+  component: componentTypes.RADIO,
+  id: 'hostValue',
+  name: 'hostValue',
+  label: __('Hosts'),
+  options: [
+    { value: 'localhost', label: 'Localhost' },
+    { value: 'specify', label: 'Specify host values' },
+  ],
+});
+
+export const schemaHelper = () => ([
+  typeField(),
+  qualifiedNameField(),
+  nameField(),
+  displayNameField(),
+  providerField(),
+  workflowProviderField(),
+  hostValueField(),
+]);

app/javascript/packs/component-definitions-common.js

@@ -18,6 +18,7 @@ import AnsiblePlaybookWorkflow from '../components/ansible-playbook-workflow';
 import AnsibleRepositoryForm from '../components/ansible-repository-form';
 import AttachDetachCloudVolumeForm from '../components/cloud-volume-form/attach-detach-cloud-volume-form';
 import AuthKeypairCloudForm from '../components/auth-key-pair-cloud';
+import AutomateMethodForm from '../components/automate-method-form'
 import AutomationSimulation from '../components/AutomationSimulation';
 import ButtonList from '../components/data-tables/button-list';
 import ButtonGroupList from '../components/data-tables/button-group-list';
@@ -187,6 +188,7 @@ ManageIQ.component.addReact('AnsiblePlaybookWorkflow', AnsiblePlaybookWorkflow);
 ManageIQ.component.addReact('AnsibleRepositoryForm', AnsibleRepositoryForm);
 ManageIQ.component.addReact('AttachDetachCloudVolumeForm', AttachDetachCloudVolumeForm);
 ManageIQ.component.addReact('AuthKeypairCloudForm', AuthKeypairCloudForm);
+ManageIQ.component.addReact('AutomateMethodForm', AutomateMethodForm);
 ManageIQ.component.addReact('AutomationSimulation', AutomationSimulation);
 ManageIQ.component.addReact('BreadcrumbsBar', BreadcrumbsBar);
 ManageIQ.component.addReact('ButtonList', ButtonList);

app/views/miq_ae_class/_method_form.html.haml

@@ -1,6 +1,7 @@
 - if @sb[:active_tab] == "methods"
 - url = url_for_only_path(:action => 'form_method_field_changed', :id => (@ae_method.id || 'new'))
 - obs = {:interval => '.5', :url => url}.to_json
+= react('AutomateMethodForm', availableLocations: available_locations_with_labels)
   %h3
     = _('Main Info')
   .form-horizontal