#259 - made environment selectable

src/renderer/components/sidebar/SidebarSearch.tsx

@@ -3,12 +3,13 @@ import { Button } from '@/components/ui/button';
 import { AddIcon } from '@/components/icons';
 import React from 'react';
 import { useCollectionActions } from '@/state/collectionStore';
+import { EnvironmentSelect } from '@/components/sidebar/SidebarSearch/EnvironmentSelect';
 
 export const SidebarSearch = () => {
   const { addNewRequest } = useCollectionActions();
 
   return (
-    <div className="flex w-full max-w-sm items-center space-x-[24px]">
+    <div className="flex flex-col w-full max-w-sm items-center space-x-[24px]">
       <Button
         className={cn('flex min-w-[36px] h-[36px] p-0 items-center justify-center')}
         type="button"
@@ -22,6 +23,7 @@ export const SidebarSearch = () => {
         </div>
         <span className="overflow-hidden">Create New Request</span>
       </Button>
+      <EnvironmentSelect />
     </div>
   );
 };

src/renderer/components/sidebar/SidebarSearch/EnvironmentSelect.tsx

@@ -0,0 +1,47 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuTriggerIcon,
+} from '@/components/ui/dropdown-menu';
+import { CiMenuKebab } from 'react-icons/ci';
+import { handleMouseEvent } from '@/util/callback-util';
+import React, { useCallback, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { useCollectionActions, useCollectionStore } from '@/state/collectionStore';
+import { RendererEventService } from '@/services/event/renderer-event-service';
+
+const rendererEventService = RendererEventService.instance;
+
+export const EnvironmentSelect = () => {
+  const [selectedEnvironmentKey, setSelectedEnvironmentKey] = useState<string>();
+  const environments = useCollectionStore((state) => state.collection?.environments ?? {});
+
+  const selectEnvironment = useCallback(async (key: string) => {
+    setSelectedEnvironmentKey(key);
+    await rendererEventService.selectEnvironment(key);
+  }, []);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button>
+          {selectedEnvironmentKey ?? 'Select Environment'}
+          <DropdownMenuTriggerIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className={'bg-background'}>
+        {Object.keys(environments).map((key, index) => (
+          <DropdownMenuItem
+            key={index}
+            onClick={handleMouseEvent(() => selectEnvironment(key))}
+            className="text-danger"
+          >
+            {key}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

src/renderer/components/ui/dropdown-menu.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
+import { Check, ChevronRight, Circle, ChevronDownIcon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
+const DropdownMenuTriggerIcon = ChevronDownIcon;
+
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
@@ -170,6 +172,7 @@ DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 export {
   DropdownMenu,
   DropdownMenuTrigger,
+  DropdownMenuTriggerIcon,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,