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 (