feat: menu icon + dropdown in collection item

packages/grafnode-components/package.json

@@ -24,6 +24,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
+    "@tabler/icons": "^1.46.0",
     "classnames": "^2.3.1",
     "codemirror": "^5.64.0",
     "escape-html": "^1.0.3",

packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js

@@ -1,6 +1,12 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  .menu-icon {
+    display: none;
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+
   .collection-item-name {
     height: 1.875rem;
     cursor: pointer;
@@ -10,9 +16,21 @@ const Wrapper = styled.div`
       transform: rotateZ(90deg);
     }
 
-    &.item-focused-in-tab, &:hover {
+    &.item-focused-in-tab {
       background:#ededed;
     }
+
+    &:hover {
+      background: #f7f7f7;
+      .menu-icon {
+        display: flex;
+      }
+    }
+
+    div.tippy-box {
+      position: relative;
+      top: -0.625rem;
+    }
   }
 `;
 

packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { useRef, forwardRef } from 'react';
 import range from 'lodash/range';
-import { IconChevronRight } from '@tabler/icons';
+import get from 'lodash/get';
+import { IconChevronRight, IconDots } from '@tabler/icons';
 import classnames from 'classnames';
+import Dropdown from '../../../../Dropdown';
 
 import StyledWrapper from './StyledWrapper';
 
 const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTabId}) => {
+  const dropdownTippyRef = useRef();
+
+  const MenuIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref}>
+        <IconDots size={22} style={{color: 'rgb(110 110 110)'}}/>
+      </div>
+    );
+  });
 
   const iconClassName = classnames({
     'rotate-90': item.collapsed
@@ -15,7 +26,12 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
     'item-focused-in-tab': item.id == activeRequestTabId
   });
 
-  const handleClick = () => {
+  const handleClick = (event) => {
+    let tippyEl = get(dropdownTippyRef, 'current.reference');
+    if(tippyEl && tippyEl.contains && tippyEl.contains(event.target)) {
+      return;
+    }
+
     dispatch({
       type: actions.SIDEBAR_COLLECTION_ITEM_CLICK,
       itemId: item.id,
@@ -25,6 +41,12 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
 
   let indents = range(item.depth);
 
+  const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
+
+  const stopEventPropogation = (event) => {
+    event.stopPropagation();
+  };
+
   return (
     <StyledWrapper className="flex flex-col">
       <div
@@ -60,6 +82,19 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
             
             <span className="ml-1">{item.name}</span>
           </div>
+          <div className="menu-icon pr-2">
+            <Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
+              <div>
+                <div className="dropdown-item" onClick={(e) => {
+                  dropdownTippyRef.current.hide();
+                  stopEventPropogation(e);
+                  console.log('Clicked');
+                }}>
+                  Add Request
+                </div>
+              </div>
+            </Dropdown>
+          </div>
         </div>
       </div>
 

packages/grafnode-components/src/components/Sidebar/index.js

@@ -9,7 +9,7 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
       <Navbar />
       <div className="mt-4 px-2 flex">
         <IconDatabase size={20} strokeWidth={1.5}/>
-        <span className="ml-1">No Environment</span>
+        <span className="ml-2">No Environment</span>
       </div>
 
       <div className="mt-4 relative collection-filter px-2">