diff --git a/app/javascript/components/automate-entry-points/index.jsx b/app/javascript/components/automate-entry-points/index.jsx index b7f7980c2ef..b1f8f29bfe0 100644 --- a/app/javascript/components/automate-entry-points/index.jsx +++ b/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,48 +284,93 @@ 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()); @@ -333,6 +378,7 @@ const DirectoryTreeView = () => { }); }); } + // if (value && value.element && value.element.id === 'datastore_folder') { // const ids = value.element.id.split('_'); // if (ids.includes('folder')) { diff --git a/yarn.lock b/yarn.lock index 28170486fc1..c8de09053de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11695,6 +11695,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:^8.0.0" react-dom: "npm:~16.13.1" @@ -14434,6 +14435,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"