Add unselect

Author: GilbertCherrie

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

@@ -96,21 +96,23 @@ const SnapshotTree = ({ nodes }) => {
   });
 
   const nodeClick = (e, node) => {
-    if (node.metadata.selectable === false || e.target.id === selectedNode) {
+    if (node.metadata.selectable === false) {
       // If the clicked node is already selected or root is selected, do nothing
-      if (e.target.id === selectedNode) {
-        e.stopPropagation();
-      }
       return;
     }
-    e.stopPropagation();
-    setSelectedNode(e.target.id);
 
     // Remove 'selected' class from all elements
     const selectedElements = document.querySelectorAll('.selected-snapshot');
     selectedElements.forEach((el) => {
       el.classList.remove('selected-snapshot');
     });
+
+    e.stopPropagation();
+    if (node.id === selectedNode) {
+      setSelectedNode('');
+    } else {
+      setSelectedNode(e.target.id);
+    }
   };
 
   const addSelectedClassName = () => {
@@ -133,10 +135,11 @@ const SnapshotTree = ({ nodes }) => {
   }, []);
 
   const ArrowIcon = (isOpen) => {
+    let icon = <ChevronRight16 />;
     if (isOpen && isOpen.isOpen) {
-      return <ChevronDown16 />;
+      icon = <ChevronDown16 />;
     }
-    return <ChevronRight16 />;
+    return <div className="arrow-div">{icon}</div>;
   };
 
   const NodeIcon = (icon) => {

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

@@ -11,6 +11,20 @@
     color: white;
     width: 100%;
     margin-left: 0px;
+    pointer-events: none;
+
+    .arrow-div {
+      pointer-events: all;
+    }
+
+    span {
+      pointer-events: all;
+    }
+  }
+
+  .arrow-div {
+    display: inline-flex;
+    margin-right: 5px;
   }
 
   .node-icon-div {
@@ -41,7 +55,6 @@
 
   .checkbox .tree-node--focused .name {
     background: rgba(0, 0, 0, 0.2);
-    display: inline-flex;
   }
 
   .checkbox .tree-node {