Fix tree

Author: GilbertCherrie

app/javascript/components/vm-snapshot-tree-select/snapshot-tree.jsx

@@ -1,102 +1,55 @@
 import React, { useEffect, useState } from 'react';
-import { ChevronRight16, ChevronDown16 } from '@carbon/icons-react';
+import {
+  Camera16, ChevronRight16, ChevronDown16, VirtualMachine16,
+} from '@carbon/icons-react';
 import TreeView, { flattenTree } from 'react-accessible-treeview';
 import './styles.css';
-
-const atree = [
-  {
-    key: 'a',
-    text: 'ag-cp4ai-ia-4-6-0',
-    nodes: [
-      {
-        key: 'sn-1553',
-        text: 'snapshot1',
-        nodes: [
-          {
-            key: 'sn-1553_sn-1554',
-            text: 'snapshot2 (Active)',
-            nodes: [
-              {
-                key: 'sn-1553_sn-1554_sn-1555',
-                text: 'snapshot3',
-              },
-              {
-                key: 'sn-1553_sn-1554_sn-1550',
-                text: 'snapshot0',
-              },
-            ],
-          },
-        ],
-      },
-      {
-        key: 'sn-1556',
-        text: 'snapshot4',
-        nodes: [
-          {
-            key: 'sn-1556_sn-1557',
-            text: 'snapshot5',
-            nodes: [
-              {
-                key: 'sn-1556_sn-1557_sn-1558',
-                text: 'snapshot6',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const folder = {
-  name: '',
-  id: 'root',
-  children: [
-    {
-      name: 'Fruits',
-      children: [
-        { name: 'Avocados', id: 'a' },
-        { name: 'Bananas', id: 'b' },
-        { name: 'Berries', id: 'c' },
-        { name: 'Oranges', id: 'd' },
-        { name: 'Pears', id: 'e' },
-      ],
-    },
-    {
-      name: 'Drinks',
-      id: 'f',
-      children: [
-        {
-          name: 'Hot drinks',
-          id: 7,
-          children: [
-            {
-              name: 'Non-alcohol',
-              id: 8,
-              children: [
-                {
-                  name: 'Tea',
-                  id: 9,
-                  children: [
-                    {
-                      name: 'Black Tea',
-                      id: 10,
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      name: 'Vegetables',
-      id: 11,
-      children: [{ name: 'Beets', id: 12 }],
-    },
-  ],
-};
+import PropTypes from 'prop-types';
+
+// const atree = [
+//   {
+//     key: 'a',
+//     text: 'ag-cp4ai-ia-4-6-0',
+//     nodes: [
+//       {
+//         key: 'sn-1553',
+//         text: 'snapshot1',
+//         nodes: [
+//           {
+//             key: 'sn-1553_sn-1554',
+//             text: 'snapshot2 (Active)',
+//             nodes: [
+//               {
+//                 key: 'sn-1553_sn-1554_sn-1555',
+//                 text: 'snapshot3',
+//               },
+//               {
+//                 key: 'sn-1553_sn-1554_sn-1550',
+//                 text: 'snapshot0',
+//               },
+//             ],
+//           },
+//         ],
+//       },
+//       {
+//         key: 'sn-1556',
+//         text: 'snapshot4',
+//         nodes: [
+//           {
+//             key: 'sn-1556_sn-1557',
+//             text: 'snapshot5',
+//             nodes: [
+//               {
+//                 key: 'sn-1556_sn-1557_sn-1558',
+//                 text: 'snapshot6',
+//               },
+//             ],
+//           },
+//         ],
+//       },
+//     ],
+//   },
+// ];
 
 const allNodeData = [];
 
@@ -132,18 +85,18 @@ const SnapshotTree = ({ nodes }) => {
 
     allNodeData.forEach((nodeData) => {
       if (nodeData.id === node.id) {
-        const metaData = {
+        const metadata = {
           selectable: nodeData.selectable || false,
           tooltip: nodeData.tooltip || nodeData.name,
           icon: nodeData.icon || 'fa fa-camera',
         };
-        node.metadata = metaData;
+        node.metadata = metadata;
       }
     });
   });
 
-  const testClick = (e) => {
-    if (e.target.id === selectedNode || e.target.id === 'root') {
+  const nodeClick = (e, node) => {
+    if (node.metadata.selectable === false || e.target.id === selectedNode) {
       // If the clicked node is already selected or root is selected, do nothing
       if (e.target.id === selectedNode) {
         e.stopPropagation();
@@ -168,7 +121,6 @@ const SnapshotTree = ({ nodes }) => {
   };
 
   useEffect(() => {
-    console.log(selectedNode);
     addSelectedClassName();
   }, [selectedNode]);
 
@@ -187,6 +139,13 @@ const SnapshotTree = ({ nodes }) => {
     return <ChevronRight16 />;
   };
 
+  const NodeIcon = (icon) => {
+    if (icon === 'pficon pficon-virtual-machine') {
+      return <VirtualMachine16 />;
+    }
+    return <Camera16 />;
+  };
+
   // First pull in node data and go through flattened tree to add metadata like icons and selectable
   // Then add icons, tooltip and special handling
 
@@ -215,11 +174,16 @@ const SnapshotTree = ({ nodes }) => {
               style={{ paddingLeft: 40 * (level - 1) }}
             >
               {isBranch && <ArrowIcon isOpen={isExpanded} />}
+              {element.metadata && element.metadata.icon && (
+                <div className="node-icon-div">
+                  <NodeIcon icon={element.metadata.icon} />
+                </div>
+              )}
               <span
                 key={element.id}
                 id={element.id}
-                onClick={testClick}
-                onKeyDown={(e) => e.key === 'Enter' && testClick(e)}
+                onClick={(e) => nodeClick(e, element)}
+                onKeyDown={(e) => e.key === 'Enter' && nodeClick(e)}
                 role="button"
                 tabIndex={0}
                 className="name"
@@ -234,4 +198,11 @@ const SnapshotTree = ({ nodes }) => {
   );
 };
 
+SnapshotTree.propTypes = {
+  nodes: PropTypes.arrayOf(PropTypes.any).isRequired,
+};
+
+SnapshotTree.defaultProps = {
+};
+
 export default SnapshotTree;

app/javascript/components/vm-snapshot-tree-select/styles.css

@@ -13,6 +13,11 @@
     margin-left: 0px;
   }
 
+  .node-icon-div {
+    margin-right: 5px;
+    display: inline-flex;
+  }
+
   .checkbox .tree,
   .checkbox .tree-node,
   .checkbox .tree-node-group {
@@ -36,6 +41,7 @@
 
   .checkbox .tree-node--focused .name {
     background: rgba(0, 0, 0, 0.2);
+    display: inline-flex;
   }
 
   .checkbox .tree-node {