Update automate entry point

Author: GilbertCherrie

_history

@@ -0,0 +1,6 @@
+simulate_queue_worker
+simulate_queue_worker
+simulate_queue_worker
+simulate_queue_worker
+simulate_queue_worker
+exit

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

@@ -1,62 +1,15 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Loading } from 'carbon-components-react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { Loading, Modal, ModalBody } from 'carbon-components-react';
+import PropTypes, { number } from 'prop-types';
 import {
-  CheckboxCheckedFilled16,
   Document16,
   Folder16,
   FolderOpen16,
-  CheckboxIndeterminateFilled16,
-  Checkbox16,
-  CaretDown16,
 } from '@carbon/icons-react';
 import TreeView from 'react-accessible-treeview';
-import cx from 'classnames';
 import './styles.css';
 
-let initialData = [
-  {
-    name: '',
-    id: 0,
-    children: [1, 2, 3],
-    parent: null,
-  },
-  {
-    name: 'Fruits',
-    children: [],
-    id: 1,
-    parent: 0,
-    isBranch: true,
-  },
-  {
-    name: 'Drinks',
-    children: [4, 5],
-    id: 2,
-    parent: 0,
-    isBranch: true,
-  },
-  {
-    name: 'Vegetables',
-    children: [],
-    id: 3,
-    parent: 0,
-    isBranch: true,
-  },
-  {
-    name: 'Pine colada',
-    children: [],
-    id: 4,
-    parent: 2,
-  },
-  {
-    name: 'Water',
-    children: [],
-    id: 5,
-    parent: 2,
-  },
-];
-
-initialData = [
+const initialData = [
   {
     name: 'Datastore',
     id: 'datastore_folder',
@@ -66,14 +19,13 @@ initialData = [
 ];
 
 const MultiSelectCheckboxAsync = () => {
-  const loadedAlertElement = useRef(null);
   const [data, setData] = useState(initialData);
   const [nodesAlreadyLoaded, setNodesAlreadyLoaded] = useState([]);
+  const [open, setOpen] = useState(true);
+  const [selectedValue, setSelectedValue] = useState();
+  const [disableSubmit, setDisableSubmit] = useState(true);
 
   const updateTreeData = (list, id, children) => {
-    console.log(list);
-    console.log(id);
-    console.log(children);
     const data = list.map((node) => {
       if (node.id === id) {
         node.children = children.map((el) => el.id);
@@ -110,78 +62,73 @@ const MultiSelectCheckboxAsync = () => {
   }, []);
 
   const onLoadData = ({ element }) => {
-    console.log(element);
-    return new Promise((resolve) => {
-      if (element.children.length > 0) {
-        resolve();
-        return;
-      }
-      setTimeout(() => {
-        setData((value) =>
-          updateTreeData(value, element.id, [
-            {
-              name: `Child Node ${value.length}`,
+    let path = element.name;
+    if (element.metadata && element.metadata.fqname) {
+      path = element.metadata.fqname;
+    }
+    API.get(`/api/automate/${path}?depth=1`).then((newNodes) => {
+      const newChildren = [];
+      newNodes.resources.forEach((newNode) => {
+        if (element.id !== newNode.id) {
+          if (newNode.klass !== 'MiqAeClass') {
+            newChildren.push({
+              id: newNode.id,
+              name: newNode.name,
               children: [],
-              id: value.length,
-              parent: element.id,
               isBranch: true,
-            },
-            {
-              name: 'Another child Node',
+              parent: element.id,
+              metadata: { fqname: newNode.fqname },
+            });
+          } else {
+            newChildren.push({
+              id: newNode.id,
+              name: newNode.name,
               children: [],
-              id: value.length + 1,
               parent: element.id,
-            },
-          ]));
-        resolve();
-      }, 1000);
+              metadata: { fqname: newNode.fqname },
+            });
+          }
+        }
+      });
+      return new Promise((resolve) => {
+        if (element.children.length > 0) {
+          resolve();
+          return;
+        }
+        setTimeout(() => {
+          setData((value) =>
+            updateTreeData(value, element.id, newChildren));
+          resolve();
+        }, 1000);
+      });
     });
   };
 
-  const wrappedOnLoadData = async(props) => {
-    const nodeHasNoChildData = props.element.children.length === 0;
+  const wrappedOnLoadData = async({ element }) => {
+    const nodeHasNoChildData = element.children.length === 0;
     const nodeHasAlreadyBeenLoaded = nodesAlreadyLoaded.find(
-      (e) => e.id === props.element.id
+      (e) => e.id === element.id
     );
 
-    await onLoadData(props);
+    await onLoadData({ element });
 
     if (nodeHasNoChildData && !nodeHasAlreadyBeenLoaded) {
-      setNodesAlreadyLoaded([...nodesAlreadyLoaded, props.element]);
+      setNodesAlreadyLoaded([...nodesAlreadyLoaded, element]);
 
-      // Clearing aria-live region so loaded node alerts no longer appear in DOM
       setTimeout(() => {
-      }, 5000);
+      }, 1000);
     }
   };
-
-  const onSelect = (value) => {
-    if (value.isBranch === false && value.isSelected) {
-      console.log(value);
-    }
+  wrappedOnLoadData.propTypes = {
+    element: PropTypes.objectOf({ children: PropTypes.array, id: number }).isRequired,
   };
-
-  const ArrowIcon = ({ isOpen, className }) => {
-    const baseClass = 'arrow';
-    const classes = cx(
-      baseClass,
-      { [`${baseClass}--closed`]: !isOpen },
-      { [`${baseClass}--open`]: isOpen },
-      className
-    );
-    return <CaretDown16 className={classes} />;
+  wrappedOnLoadData.defaultProps = {
   };
 
-  const CheckBoxIcon = ({ variant, ...rest }) => {
-    switch (variant) {
-      case 'all':
-        return <CheckboxCheckedFilled16 />;
-      case 'none':
-        return <Checkbox16 />;
-      case 'some':
-        return <CheckboxIndeterminateFilled16 />;
-      default:
-        return null;
+  const onSelect = (value) => {
+    if (value.isBranch === false && value.isSelected) {
+      setSelectedValue(value);
+      setDisableSubmit(false);
     }
   };
 
@@ -191,76 +138,84 @@ const MultiSelectCheckboxAsync = () => {
     ) : (
       <Folder16 className="icon" />
     ));
+
   FolderIcon.propTypes = {
-    isOpen: PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool,
+  };
+  FolderIcon.defaultProps = {
+    isOpen: false,
   };
 
   const FileIcon = () => <Document16 className="icon" />;
 
   return (
-    <>
-      <div>
-        <div className="checkbox">
-          <TreeView
-            data={data}
-            aria-label="Checkbox tree"
-            onSelect={(value) => onSelect(value)}
-            onLoadData={wrappedOnLoadData}
-            togglableSelect
-            nodeRenderer={({
-              element,
-              isBranch,
-              isExpanded,
-              isSelected,
-              isHalfSelected,
-              getNodeProps,
-              level,
-            }) => {
-              const branchNode = (isExpanded, element) => (isExpanded && element.children.length === 0 ? (
-                <div className="loadingDiv">
-                  <Loading small withOverlay={false} />
-                </div>
-              ) : (
-                null
-              ));
-              return (
-                <div
-                  {...getNodeProps()}
-                  style={{ marginLeft: 40 * (level - 1) }}
-                >
-                  {isBranch && branchNode(isExpanded, element)}
-                  {/* <CheckBoxIcon
-                      className="checkbox-icon"
-                      onClick={(e) => {
-                        handleSelect(e);
-                        e.stopPropagation();
-                      }}
-                      variant={
-                        isHalfSelected ? "some" : isSelected ? "all" : "none"
-                      }
-                    /> */}
-                  {isBranch ? (
-                    <div className="iconDiv">
-                      <FolderIcon isOpen={isExpanded} />
-                    </div>
-                  ) : (
-                    <div className="iconDiv">
-                      <FileIcon filename={element.name} />
-                    </div>
-                  )}
-                  <span className="name">{element.name}</span>
-                </div>
-              );
-            }}
-          />
+    <Modal
+      open={open}
+      primaryButtonText={__('OK')}
+      secondaryButtonText={__('Cancel')}
+      onRequestSubmit={() => {
+        console.log(selectedValue);
+        setOpen(false);
+      }}
+      onRequestClose={() => {
+        setOpen(false);
+      }}
+      onSecondarySubmit={() => {
+        setOpen(false);
+      }}
+      primaryButtonDisabled={disableSubmit}
+    >
+      <ModalBody>
+        <div>
+          <div className="checkbox">
+            <TreeView
+              data={data}
+              aria-label="Checkbox tree"
+              onSelect={(value) => onSelect(value)}
+              onLoadData={wrappedOnLoadData}
+              togglableSelect
+              nodeRenderer={({
+                element,
+                isBranch,
+                isExpanded,
+                getNodeProps,
+                level,
+              }) => {
+                const branchNode = (isExpanded, element) => (isExpanded && element.children.length === 0 ? (
+                  <div className="loadingDiv">
+                    <Loading small withOverlay={false} />
+                  </div>
+                ) : (
+                  null
+                ));
+                return (
+                  <div
+                    {...getNodeProps()}
+                    style={{ marginLeft: 40 * (level - 1) }}
+                  >
+                    {isBranch && branchNode(isExpanded, element)}
+                    {isBranch ? (
+                      <div className="iconDiv">
+                        <FolderIcon isOpen={isExpanded} />
+                      </div>
+                    ) : (
+                      <div className="iconDiv">
+                        <FileIcon filename={element.name} />
+                      </div>
+                    )}
+                    <span className="name">{element.name}</span>
+                  </div>
+                );
+              }}
+            />
+          </div>
         </div>
-      </div>
-    </>
+      </ModalBody>
+    </Modal>
   );
 };
 
 MultiSelectCheckboxAsync.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
 };
 
 MultiSelectCheckboxAsync.defaultProps = {