Tree working

Author: GilbertCherrie

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

@@ -245,7 +245,7 @@ const DirectoryTreeView = () => {
   useEffect(() => {
     console.log(treeData);
     if (treeData.length > 3) {
-      setExpandedIds(['datastore_folder', '11785']);
+      setExpandedIds(['datastore_folder']);
       // setKey(treeData.length + 1);
     }
   }, [treeData]);
@@ -284,55 +284,101 @@ const DirectoryTreeView = () => {
   };
 
   const onExpand = (value) => {
-    console.log(value);
+    console.log(value.element);
     const tempData = treeData;
+    // if (value && value.element && value.element.id !== 'datastore_folder') {
+    //   API.get(`/api/automate/${value.element.name}?depth=-1`).then((newNodes) => {
+    //     console.log(newNodes);
+    //     const newChildren = [];
+    //     newNodes.resources.forEach((newNode) => {
+    //       if (value.element.id !== newNode.id) {
+    //         newChildren.
+    //       }
+    //     });
+    //   });
+    // }
 
+    // if (value.element.metadata && value.element.metadata.fqname) {
+    //   console.log(value);
+    //   console.log('STOP');
+    // }
     if (value && value.element && value.element.id !== 'datastore_folder') {
-      API.get(`/api/automate/${value.element.name}?depth=1`).then((newNodes) => {
+      let path = value.element.name;
+      if (value.element.metadata && value.element.metadata.fqname) {
+        path = value.element.metadata.fqname;
+      }
+      API.get(`/api/automate/${path}?depth=1`).then((newNodes) => {
         const newChildren = [];
         newNodes.resources.forEach((newNode) => {
           if (value.element.id !== newNode.id) {
-            newChildren.push({
-              id: newNode.id,
-              name: newNode.name,
-              children: [],
-              parent: value.element.id,
-              metadata: {},
-            });
+            if (newNode.klass !== 'MiqAeClass') {
+              newChildren.push({
+                id: newNode.id,
+                name: newNode.name,
+                children: [`${newNode.id}_child_placeholder`],
+                parent: value.element.id,
+                metadata: { fqname: newNode.fqname },
+              });
+              newChildren.push({
+                id: `${newNode.id}_child_placeholder`,
+                name: 'Loading',
+                children: [],
+                parent: newNode.id,
+                metadata: {},
+              });
+            } else {
+              newChildren.push({
+                id: newNode.id,
+                name: newNode.name,
+                children: [],
+                parent: value.element.id,
+                metadata: { fqname: newNode.fqname },
+              });
+            }
           }
         });
-        console.log(newChildren);
         return newChildren;
       }).then((newChildrenArray) => {
-        console.log(newChildrenArray);
         const tempIdsArray = treeIds;
         newChildrenArray.forEach((node) => {
           if (!treeIds.includes(node.id)) {
             tempIdsArray.push(node.id);
             tempData.forEach((parentNode) => {
               if (parentNode.id === node.parent) {
+                setExpandedIds([...expandedIds, value.element.id]);
                 const childrenNodesToKeep = [];
                 parentNode.children.forEach((child) => {
-                  console.log(typeof child === 'string');
-                  console.log(child);
                   if (typeof child === 'string') {
                     childrenNodesToKeep.push(child);
                   }
                 });
-                console.log(childrenNodesToKeep);
                 parentNode.children = childrenNodesToKeep;
-                parentNode.children = parentNode.children.concat(node.id);
+                if (parentNode.children.length >= 1) {
+                  parentNode.children.forEach((child) => {
+                    if (child.includes('_placeholder')) {
+                      parentNode.children.shift();
+                    }
+                  });
+                }
+                if (!parentNode.children.includes(node.id)) {
+                  parentNode.children = parentNode.children.concat(node.id);
+                }
+                if (node.id.includes('_placeholder')) {
+                  // console.log(node);
+                  // console.log(parentNode);
+                  // console.log(value);
+                }
               }
             });
             tempData.push(node);
-            console.log(tempData);
             setTreeIds(tempIdsArray);
             setTreeData(tempData);
             setKey(Math.random());
           }
         });
       });
     }
+
     // if (value && value.element && value.element.id === 'datastore_folder') {
     //   const ids = value.element.id.split('_');
     //   if (ids.includes('folder')) {

yarn.lock

@@ -11746,6 +11746,7 @@ __metadata:
     prop-types: "npm:^15.6.0"
     proxy-polyfill: "npm:^0.1.7"
     react: "npm:~16.13.1"
+    react-accessible-treeview: "npm:^2.10.0"
     react-bootstrap: "npm:~0.33.0"
     react-codemirror2: "npm:^6.0.0"
     react-dom: "npm:~16.13.1"
@@ -14560,6 +14561,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-accessible-treeview@npm:^2.10.0":
+  version: 2.10.0
+  resolution: "react-accessible-treeview@npm:2.10.0"
+  peerDependencies:
+    classnames: ^2.2.6
+    prop-types: ^15.7.2
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/2bdd0a1b04534e386a9cfb1392a6c6d5ae75a13c84829d573a2b7e7188a4f7a2d2a51a80f089122d80d35f32b5d6ddbf1896fefe35f0b0974a29f58f541796f9
+  languageName: node
+  linkType: hard
+
 "react-bootstrap@npm:~0.33.0":
   version: 0.33.1
   resolution: "react-bootstrap@npm:0.33.1"