feat: collection action icons

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconBox } from '@tabler/icons';
+import { IconLayoutGrid } from '@tabler/icons';
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import StyledWrapper from './StyledWrapper';
@@ -7,7 +7,7 @@ import StyledWrapper from './StyledWrapper';
 const Navbar = () => {
   return (
     <StyledWrapper className="px-2 py-2 flex items-center">
-      <IconBox size={22} strokeWidth={1.5}/>
+      <IconLayoutGrid size={18} strokeWidth={1.5}/>
       <span className="ml-2">My Workspace</span>
       <FontAwesomeIcon className="ml-2" icon={faCaretDown} style={{fontSize: 13}}/>
     </StyledWrapper>

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

@@ -13,6 +13,23 @@ const Wrapper = styled.div`
     .rotate-90 {
       transform: rotateZ(90deg);
     }
+
+    .collection-actions {
+      display: none;
+      flex-grow: 1;
+      justify-content: flex-end;
+
+      svg {
+        height: 22px;
+        color: rgb(110 110 110);
+      }
+    }
+
+    &:hover {
+      .collection-actions {
+        display: flex;
+      }
+    }
   }
 `;
 

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

@@ -1,17 +1,43 @@
-import React from 'react';
+import React, { forwardRef, useRef } from 'react';
-import { IconChevronRight } from '@tabler/icons';
+import { IconChevronRight, IconDots, IconDatabase } from '@tabler/icons';
 import CollectionItem from './CollectionItem';
+import Dropdown from '../../../Dropdown';
+import get from 'lodash/get';
 import classnames from 'classnames';
 
 import StyledWrapper from './StyledWrapper';
 
 const Collection = ({collection, actions, dispatch, activeRequestTabId}) => {
+  const envDropdownTippyRef = useRef();
+  const onEnvDropdownCreate = (ref) => envDropdownTippyRef.current = ref;
+  const EnvIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="mr-2">
+        <IconDatabase size={18} strokeWidth={1.5}/>
+      </div>
+    );
+  });
+
+  const menuDropdownTippyRef = useRef();
+  const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
+  const MenuIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref}>
+        <IconDots size={22}/>
+      </div>
+    );
+  });
 
   const iconClassName = classnames({
     'rotate-90': collection.collapsed
   });
 
-  const handleClick = () => {
+  const handleClick = (event) => {
+    let envTippyEl = get(envDropdownTippyRef, 'current.reference');
+    if(envTippyEl && envTippyEl.contains && envTippyEl.contains(event.target)) {
+      return;
+    }
+
     dispatch({
       type: actions.SIDEBAR_COLLECTION_CLICK,
       id: collection.id
@@ -23,6 +49,34 @@ const Collection = ({collection, actions, dispatch, activeRequestTabId}) => {
       <div className="flex py-1 collection-name items-center" onClick={handleClick}>
         <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{width:16, color: 'rgb(160 160 160)'}}/>
         <span className="ml-1">{collection.name}</span>
+        <div className="collection-actions">
+          <Dropdown onCreate={onEnvDropdownCreate} icon={<EnvIcon />} placement='bottom-start'>
+            <div>
+              <div className="dropdown-item" onClick={(e) => {
+                envDropdownTippyRef.current.hide();
+              }}>
+                No Environment Selected
+              </div>
+            </div>
+          </Dropdown>
+
+          <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
+            <div>
+              <div className="dropdown-item" onClick={(e) => {
+                menuDropdownTippyRef.current.hide();
+              }}>
+                Add Request
+              </div>
+            </div>
+            <div>
+              <div className="dropdown-item" onClick={(e) => {
+                menuDropdownTippyRef.current.hide();
+              }}>
+                Add Folder
+              </div>
+            </div>
+          </Dropdown>
+        </div>
       </div>
 
       <div>

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

@@ -1,15 +1,16 @@
 import React from 'react';
 import Collections from './Collections';
 import Navbar from '../Navbar';
-import { IconDatabase, IconSearch } from '@tabler/icons';
+import { IconBox, IconSearch } from '@tabler/icons';
 
 const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
   return (
     <aside>
       <Navbar />
+
       <div className="mt-4 px-2 flex">
-        <IconDatabase size={20} strokeWidth={1.5}/>
+        <IconBox size={20} strokeWidth={1.5}/>
-        <span className="ml-2">No Environment</span>
+        <span className="ml-2">Collections</span>
       </div>
 
       <div className="mt-4 relative collection-filter px-2">