feat: EnvironmentSelector Component

renderer/components/EnvironmentSelector/StyledWrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .current-enviroment {
+    background: #efefef;
+    border-radius: 15px;
+  }
+`;
+
+export default Wrapper;

renderer/components/EnvironmentSelector/index.js

@@ -0,0 +1,54 @@
+import React, { useRef, forwardRef } from 'react';
+import Dropdown from 'components/Dropdown';
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconAdjustmentsHorizontal } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const EnvironmentSelector = () => {
+  const dropdownTippyRef = useRef();
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="current-enviroment flex items-center justify-center px-3 py-1 select-none">
+        No Environment <FontAwesomeIcon className="ml-2 text-gray-500" icon={faCaretDown} style={{fontSize: 13}}/>
+      </div>
+    );
+  });
+
+  const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
+
+  return (
+    <StyledWrapper>
+      <div className="flex items-center cursor-pointer environment-selector pr-3">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-start'>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            <span>QA1</span>
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            <span>STG</span>
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            <span>No Environment</span>
+          </div>
+          <div className="dropdown-item" style={{borderTop: 'solid 1px #e7e7e7'}} onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            <div className="pr-2 text-gray-600">
+              <IconAdjustmentsHorizontal size={18} strokeWidth={1.5}/>
+            </div>
+            <span>Settings</span>
+          </div>
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default EnvironmentSelector;

renderer/components/RequestTabs/CollectionTitleBar/index.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { IconStack, IconGitFork } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-
-const CollectionTitleBar = ({collection}) => {
-  return (
-    <StyledWrapper>
-      <div className="flex items-center p-2">
-        <IconStack size={18} strokeWidth={1.5}/>
-        <span className="ml-2 mr-4 font-semibold">anoop<span style={{paddingInline: 2}}>/</span>{collection.name}</span>
-        <IconGitFork size={16} strokeWidth={1}/>
-        <span className="ml-1 text-xs">from anoop/notebase</span>
-      </div>
-    </StyledWrapper>
-  )
-};
-
-export default CollectionTitleBar;

renderer/components/RequestTabs/CollectionToolBar/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IconStack, IconGitFork } from '@tabler/icons';
+import EnvironmentSelector from 'components/EnvironmentSelector';
+import StyledWrapper from './StyledWrapper';
+
+const CollectionToolBar = ({collection}) => {
+  return (
+    <StyledWrapper>
+      <div className="flex items-center p-2">
+        <div className="flex flex-1 items-center">
+          <IconStack size={18} strokeWidth={1.5}/>
+          <span className="ml-2 mr-4 font-semibold">anoop<span style={{paddingInline: 2}}>/</span>{collection.name}</span>
+          <IconGitFork size={16} strokeWidth={1}/>
+          <span className="ml-1 text-xs">from anoop/notebase</span>
+        </div>
+        <div className="flex flex-1 items-center justify-end">
+          <EnvironmentSelector />
+        </div>
+      </div>
+    </StyledWrapper>
+  )
+};
+
+export default CollectionToolBar;

renderer/components/RequestTabs/index.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { IconHome2 } from '@tabler/icons';
 import { useStore } from 'providers/Store';
 import actions from 'providers/Store/actions';
-import CollectionTitleBar from './CollectionTitleBar';
+import CollectionToolBar from './CollectionToolBar';
 import StyledWrapper from './StyledWrapper';
 
 const RequestTabs = () => {
@@ -75,7 +75,7 @@ const RequestTabs = () => {
     <StyledWrapper>
       {collectionRequestTabs && collectionRequestTabs.length ? (
         <>
-          <CollectionTitleBar collection={activeCollection}/>
+          <CollectionToolBar collection={activeCollection}/>
           <div className="mt-1 flex items-center">
             <ul role="tablist">
               <li className="select-none new-tab mr-1" onClick={createNewTab}>

renderer/components/Sidebar/Collections/Collection/index.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef } from 'react';
-import { IconChevronRight, IconDots, IconWorld } from '@tabler/icons';
+import { IconChevronRight, IconDots } from '@tabler/icons';
 import CollectionItem from './CollectionItem';
 import Dropdown from '../../../Dropdown';
 import get from 'lodash/get';
@@ -9,14 +9,6 @@ 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">
-        <IconWorld size={18} strokeWidth={1.5}/>
-      </div>
-    );
-  });
 
   const menuDropdownTippyRef = useRef();
   const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
@@ -50,16 +42,6 @@ const Collection = ({collection, actions, dispatch, activeRequestTabId}) => {
         <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) => {