Add embedded automate react component

Author: GilbertCherrie

app/controllers/catalog_controller.rb

@@ -664,6 +664,14 @@ def ae_tree_select_toggle
     session[:edit] = @edit
   end
 
+  def ae_tree_load
+    assert_new_or_edit_by_service_type
+
+    require 'byebug'
+    byebug
+    session[:edit]
+  end
+
   # Method to open the workflows dialog box
   # params[:field]    => :fqname || :retire_fqname || :reconfigure_fqname
   # params[:selected] => Holds the value of the *_configuration_script_id

app/javascript/components/automate-entry-points/index.jsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Loading, Modal, ModalBody } from 'carbon-components-react';
+import MiqDataTable from '../miq-data-table';
+import { http } from '../../http_api';
+
+const AutomateEntryPoints = ({
+  field, selected, type, setShowModal, setSelectedValue,
+}) => {
+  const [data, setData] = useState({
+    isLoading: true, list: {}, selectedItemId: selected,
+  });
+
+  const workflowTypes = {
+    provision: __('Provision'),
+    reconfigure: __('Reconfigure'),
+    retire: __('Retirement'),
+  };
+
+  useEffect(() => {
+    http.post(`/catalog/ae_tree_load?typ=${type}`, {}, { headers: {}, skipJsonParsing: true })
+      .then((_data) => {
+        console.log(data);
+        API.get('/api/automate_domains?expand=resources')
+          .then((response) => {
+            console.log(response);
+            // API.get('/api/automate_workspaces?expand=resources').then((response) => {
+            //   console.log(response);
+            // });
+            setData({
+              ...data,
+              isLoading: false,
+            });
+          });
+      });
+  }, []);
+
+  /** Function to handle a row's click event. */
+  const onSelect = (selectedItemId) => {
+    setData({
+      ...data,
+      selectedItemId: (data.selectedItemId === selectedItemId) ? undefined : selectedItemId,
+    });
+    const params = `cfp-${encodeURIComponent(selectedItemId)}&tree=automate_catalog_tree&field=${field}`;
+    window.miqJqueryRequest(`/catalog/ae_tree_select/?id=${params}&typ=${type}`);
+  };
+  if (data.isLoading) {
+    return (<Loading active small withOverlay={false} className="loading" />);
+  }
+  /** Function to handle the modal box close button click event. */
+  const onCloseModal = () => {
+    if (setShowModal) {
+      setShowModal(false);
+    } else {
+      document.getElementById(`${type}-workflows`).innerHTML = '';
+      http.post('/catalog/ae_tree_select_toggle?button=cancel', {}, { headers: {}, skipJsonParsing: true });
+    }
+  };
+  /** Function to handle the modal box apply button click event. */
+  const onApply = () => {
+    const seletedItem = data.list.rows.find((item) => item.id === data.selectedItemId);
+    const name = seletedItem.name.text;
+    if (seletedItem) {
+      if (setShowModal && setSelectedValue) {
+        setShowModal(false);
+        setSelectedValue(seletedItem);
+      } else {
+        const nameField = document.getElementById(field);
+        const selectedField = document.getElementById(`${type}_configuration_script_id`);
+
+        if (nameField && selectedField) {
+          nameField.value = name;
+          selectedField.value = data.selectedItemId;
+          http.post('/catalog/ae_tree_select_toggle?button=submit&automation_type=workflow', {}, { headers: {}, skipJsonParsing: true })
+            .then((_data) => {
+              document.getElementById(`${type}-workflows`).innerHTML = '';
+            });
+        }
+      }
+    }
+  };
+  return (
+    <Modal
+      open
+      modalHeading={sprintf(__('Select Embedded Workflow - %s Entry Point'), workflowTypes[type])}
+      primaryButtonText={__('Apply')}
+      secondaryButtonText={__('Cancel')}
+      onRequestSubmit={onApply}
+      onRequestClose={onCloseModal}
+      className="workflows-entry-point-modal"
+    >
+      <ModalBody className="workflows-entry-point-modal-body">
+        <MiqDataTable
+          headers={data.list.headers}
+          rows={data.list.rows}
+          onCellClick={(selectedRow) => onSelect(selectedRow.id)}
+          showPagination={false}
+          truncateText={false}
+          mode="automated-workflow-entry-points"
+          gridChecks={[data.selectedItemId]}
+          size="md"
+        />
+      </ModalBody>
+    </Modal>
+  );
+};
+AutomateEntryPoints.propTypes = {
+  field: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  selected: PropTypes.string,
+  setShowModal: PropTypes.func,
+  setSelectedValue: PropTypes.func,
+};
+
+AutomateEntryPoints.defaultProps = {
+  selected: '',
+  setShowModal: undefined,
+  setSelectedValue: undefined,
+};
+
+export default AutomateEntryPoints;

app/javascript/components/embedded-automate-entry-point/index.jsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { Button, TextInput } from 'carbon-components-react';
 import { Close16, TreeViewAlt16 } from '@carbon/icons-react';
 import { useFieldApi } from '@@ddf';
-import WorkflowEntryPoints from '../workflows/workflow-entry-points';
+import AutomateEntryPoints from '../automate-entry-points';
 
-const EmbeddedEntryPoint = (props) => {
+const EmbeddedAutomateEntryPoint = (props) => {
   const {
     label, initialValue, id, field, selected, type,
   } = props;
@@ -33,7 +33,7 @@ const EmbeddedEntryPoint = (props) => {
   return (
     <div>
       {showModal ? (
-        <WorkflowEntryPoints
+        <AutomateEntryPoints
           field={field}
           selected={selected}
           type={type}
@@ -70,7 +70,7 @@ const EmbeddedEntryPoint = (props) => {
   );
 };
 
-EmbeddedEntryPoint.propTypes = {
+EmbeddedAutomateEntryPoint.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   initialValue: PropTypes.string,
@@ -79,9 +79,9 @@ EmbeddedEntryPoint.propTypes = {
   type: PropTypes.string.isRequired,
 };
 
-EmbeddedEntryPoint.defaultProps = {
+EmbeddedAutomateEntryPoint.defaultProps = {
   initialValue: '',
   selected: '',
 };
 
-export default EmbeddedEntryPoint;
+export default EmbeddedAutomateEntryPoint;

app/javascript/components/terraform-template-catalog-form/terraform-template-catalog-form.schema.js

@@ -49,6 +49,19 @@ const basicInformationTabSchema = (availableCatalogs, tenantTree, roleAllows, zo
           is: 'embedded_automate',
         },
       },
+      // {
+      //   component: 'embedded-automate-entry-point',
+      //   id: 'provisioning_entry_point_automate',
+      //   name: 'provisioning_entry_point_automate',
+      //   label: 'Provisioning Entry Point',
+      //   field: 'fqname',
+      //   selected: '',
+      //   type: 'provision',
+      //   condition: {
+      //     when: 'provisioning_entry_point_type',
+      //     is: 'embedded_automate',
+      //   },
+      // },
       {
         component: 'embedded-workflow-entry-point',
         id: 'provisioning_entry_point_workflow',

app/javascript/components/workflows/workflow-entry-points.jsx

@@ -8,7 +8,6 @@ import { http } from '../../http_api';
 const WorkflowEntryPoints = ({
   field, selected, type, setShowModal, setSelectedValue,
 }) => {
-  console.log(selected);
   const [data, setData] = useState({
     isLoading: true, list: {}, selectedItemId: selected,
   });

app/javascript/forms/mappers/componentMapper.jsx

@@ -10,15 +10,17 @@ import { TreeViewField, TreeViewSelector } from '../../components/tree-view';
 import MultiSelectWithSelectAll from '../../components/multiselect-with-selectall';
 import FontIconPicker from '../../components/fonticon-picker';
 import FontIconPickerDdf from '../../components/fonticon-picker/font-icon-picker-ddf';
+import EmbeddedAutomateEntryPoint from '../../components/embedded-automate-entry-point';
 import EmbeddedWorkflowEntryPoint from '../../components/embedded-workflow-entry-point';
 
 const mapper = {
   ...componentMapper,
   'code-editor': CodeEditor,
+  'embedded-automate-entry-point': EmbeddedAutomateEntryPoint,
+  'embedded-workflow-entry-point': EmbeddedWorkflowEntryPoint,
   'edit-password-field': EditPasswordField,
   'file-upload': FileUploadComponent,
   'password-field': PasswordField,
-  'embedded-workflow-entry-point': EmbeddedWorkflowEntryPoint,
   'validate-credentials': AsyncCredentials,
   'tree-view': TreeViewField,
   'tree-selector': TreeViewSelector,

config/routes.rb

@@ -310,6 +310,7 @@
         ae_tree_select
         ae_tree_select_discard
         ae_tree_select_toggle
+        ae_tree_load
         atomic_form_field_changed
         atomic_st_edit
         automate_button_field_changed