diff --git a/packages/grafnode-components/src/components/Navbar/index.js b/packages/grafnode-components/src/components/Navbar/index.js index 6f8e1eb4c..fa4ce30df 100644 --- a/packages/grafnode-components/src/components/Navbar/index.js +++ b/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 ( - + My Workspace diff --git a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/StyledWrapper.js index 201e2f5c3..251f5d8c5 100644 --- a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/StyledWrapper.js +++ b/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; + } + } } `; diff --git a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/index.js b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/index.js index 0d1f4b770..7b85ef1b6 100644 --- a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/index.js +++ b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/index.js @@ -1,17 +1,43 @@ -import React from 'react'; -import { IconChevronRight } from '@tabler/icons'; +import React, { forwardRef, useRef } from 'react'; +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 ( +
+ +
+ ); + }); + + const menuDropdownTippyRef = useRef(); + const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref; + const MenuIcon = forwardRef((props, ref) => { + return ( +
+ +
+ ); + }); 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}) => {
{collection.name} +
+ } placement='bottom-start'> +
+
{ + envDropdownTippyRef.current.hide(); + }}> + No Environment Selected +
+
+
+ + } placement='bottom-start'> +
+
{ + menuDropdownTippyRef.current.hide(); + }}> + Add Request +
+
+
+
{ + menuDropdownTippyRef.current.hide(); + }}> + Add Folder +
+
+
+
diff --git a/packages/grafnode-components/src/components/Sidebar/index.js b/packages/grafnode-components/src/components/Sidebar/index.js index 4a0b94b7e..57737a374 100644 --- a/packages/grafnode-components/src/components/Sidebar/index.js +++ b/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 (