From 84ba56c926f0b4c823cba7d8eda36d644db0562a Mon Sep 17 00:00:00 2001 From: Gilbert Cherrie Date: Thu, 5 Dec 2024 14:27:39 -0500 Subject: [PATCH] Added api calls to demo --- .../automate-entry-points/index.jsx | 338 +++++++++++------- 1 file changed, 200 insertions(+), 138 deletions(-) diff --git a/app/javascript/components/automate-entry-points/index.jsx b/app/javascript/components/automate-entry-points/index.jsx index c65e722a3c2..9fdaa316732 100644 --- a/app/javascript/components/automate-entry-points/index.jsx +++ b/app/javascript/components/automate-entry-points/index.jsx @@ -131,83 +131,110 @@ const DirectoryTreeView = () => { // }, // ]); - const folder = { - id: 'root', - name: '', - children: [ - { - id: 'src_folder', - name: 'src', - children: [ - { - id: 'index.js_file', - name: 'index.js', - metadata: { a: '1', b: '2', c: 'test' }, - }, - { - id: 'styles.css_file', - name: 'styles.css', - metadata: { a: '1', b: '2', c: 'test' }, - }], - }, - { - id: 'node_modules_folder', - name: 'node_modules', - children: [ - { - id: 'react-accessible-treeview-folder', - name: 'react-accessible-treeview', - children: [{ - id: 'index.js_file2', - name: 'index.js', - }], - }, - { - id: 'react_folder', - name: 'react', - children: [{ - id: 'index.js_file3', - name: 'index.js', - }], - }, - ], - }, - { - id: '.npmignore_file', - name: '.npmignore', - }, - { - id: 'package.json_file', - name: 'package.json', - }, - { - id: 'webpack.config.js_file', - name: 'webpack.config.js', - }, - ], - }; + // const folder = { + // id: 'root', + // name: '', + // children: [ + // { + // id: 'src_folder', + // name: 'src', + // children: [ + // { + // id: 'index.js_file', + // name: 'index.js', + // metadata: { a: '1', b: '2', c: 'test' }, + // }, + // { + // id: 'styles.css_file', + // name: 'styles.css', + // metadata: { a: '1', b: '2', c: 'test' }, + // }], + // }, + // { + // id: 'node_modules_folder', + // name: 'node_modules', + // children: [ + // { + // id: 'react-accessible-treeview-folder', + // name: 'react-accessible-treeview', + // children: [{ + // id: 'index.js_file2', + // name: 'index.js', + // }], + // }, + // { + // id: 'react_folder', + // name: 'react', + // children: [{ + // id: 'index.js_file3', + // name: 'index.js', + // }], + // }, + // ], + // }, + // { + // id: '.npmignore_file', + // name: '.npmignore', + // }, + // { + // id: 'package.json_file', + // name: 'package.json', + // }, + // { + // id: 'webpack.config.js_file', + // name: 'webpack.config.js', + // }, + // ], + // }; - const data = flattenTree(folder); - console.log(data); - - const initialData = { + const root = { id: 'root', name: '', children: [ - { - id: 'root-node', - name: '', - }, + // { + // id: 'datastore_folder', + // name: __('Datastore'), + // children: [{}], + // }, ], }; - const [rawTreeData, setRawTreeData] = useState(folder); - const [treeData, setTreeData] = useState(flattenTree(initialData)); + const [rawTreeData, setRawTreeData] = useState(root); + const [treeData, setTreeData] = useState(flattenTree(root)); const [expandedIds, setExpandedIds] = useState([]); + const [treeIds, setTreeIds] = useState(['datastore_folder']); const [key, setKey] = useState('initial'); useEffect(() => { - setTreeData(data); + const newChildren = []; + API.get('/api/automate_domains?expand=resources').then((apiData) => { + console.log(apiData); + apiData.resources.forEach((domain) => { + newChildren.push({ + id: domain.id, + name: domain.name, + children: [{}], + parent: 'datastore_folder', + metadata: {}, + }); + }); + return newChildren; + }).then((newChildren) => { + const tempIdsArray = treeIds; + newChildren.forEach((node) => { + if (!treeIds.includes(node.id)) { + tempIdsArray.push(node.id); + } + }); + const tempData = root; + tempData.children = [{ + id: 'datastore_folder', + name: __('Datastore'), + }]; + tempData.children[0].children = newChildren; + setTreeIds(tempIdsArray); + setTreeData(flattenTree(tempData)); + }); }, []); useEffect(() => { @@ -217,9 +244,9 @@ const DirectoryTreeView = () => { useEffect(() => { console.log(treeData); - if (treeData.length > 12) { - setExpandedIds(['src_folder']); - setKey('new'); + if (treeData.length > 3) { + setExpandedIds(['datastore_folder']); + setKey(treeData.length); } }, [treeData]); @@ -231,18 +258,22 @@ const DirectoryTreeView = () => { )); const FileIcon = ({ filename }) => { - const extension = filename.slice(filename.lastIndexOf('.') + 1); - switch (extension) { - case 'js': - return ; - case 'css': - return ; - case 'json': - return ; - case 'npmignore': - return ; - default: - return ; + if (filename) { + const extension = filename.slice(filename.lastIndexOf('.') + 1); + switch (extension) { + case 'js': + return ; + case 'css': + return ; + case 'json': + return ; + case 'npmignore': + return ; + default: + return ; + } + } else { + return ; } }; @@ -257,73 +288,104 @@ const DirectoryTreeView = () => { const tempData = treeData; const newChildren = []; - if (value && value.element) { - const ids = value.element.id.split('_'); - if (ids.includes('folder')) { - tempData.forEach((item) => { - if (item.id === value.element.id) { - console.log(item.name); - API.get('/api/automate_domains?expand=resources').then((apiData) => { - console.log(apiData); - apiData.resources.forEach((domain) => { - newChildren.push({ - id: domain.id, - name: domain.name, - children: [], - parent: item.id, - metadata: {}, - }); - }); - return newChildren; - }).then((newChildrenArray) => { - const newTreeData = treeData.concat(newChildrenArray[2]); - if (treeData.includes(newChildrenArray[0]) === false) { - newTreeData[1].children = ['index.js_file', 'styles.css_file', '1177']; - if (treeData.length === 12) { - setTreeData(newTreeData); - // Send all relevant data including new children and the clicked item to a new useffect using a new state variable - // From this new use effect we can set the treedata, expandedids and the key state variables - } - } + if (value && value.element && value.element.id !== 'datastore_folder') { + API.get(`/api/automate/${value.element.name}?depth=1`).then((test) => { + tempData.forEach((node) => { + if (node.id === value.element.id) { + node.children = ['new-test-0']; + tempData.push({ + id: 'new-test-0', + name: 'new test', + children: [], + parent: node.id, + metadata: {}, }); + console.log(tempData); + setTreeData(tempData); } }); - } + }); } + // if (value && value.element && value.element.id === 'datastore_folder') { + // const ids = value.element.id.split('_'); + // if (ids.includes('folder')) { + // tempData.forEach((item) => { + // if (item.id === value.element.id) { + // console.log(item.name); + // API.get('/api/automate_domains?expand=resources').then((apiData) => { + // console.log(apiData); + // apiData.resources.forEach((domain) => { + // newChildren.push({ + // id: domain.id, + // name: domain.name, + // children: [], + // parent: item.id, + // metadata: {}, + // }); + // }); + // return newChildren; + // }).then((newChildrenArray) => { + // const newTreeData = treeData; + // const tempIdsArray = treeIds; + // newChildrenArray.forEach((node) => { + // if (!treeIds.includes(node.id)) { + // newTreeData.push(node); + // tempIdsArray.push(node.id); + // newTreeData[1].children.push(node.id); + // } + // }); + // setTreeIds(tempIdsArray); + // setTreeData(newTreeData); + // // if (treeData.includes(newChildrenArray[0]) === false) { + // // // newTreeData[1].children = ['index.js_file', 'styles.css_file', '1177']; + // // if (treeData.length === 12) { + // // setTreeData(newTreeData); + // // // Send all relevant data including new children and the clicked item to a new useffect using a new state variable + // // // From this new use effect we can set the treedata, expandedids and the key state variables + // // } + // // } + // }); + // } + // }); + // } + // } }; return (
- { - getNodeProps(); - return ( -
- {isBranch ? ( - - ) : ( - - )} + {treeData.length > 1 + ? ( + { + getNodeProps(); + return ( +
+ {isBranch ? ( + + ) : ( + + )} - {element.name} -
- ); - }} - /> + {element.name} +
+ ); + }} + /> + ) : null}
);