diff --git a/src/renderer/components/sidebar/SidebarSearch.tsx b/src/renderer/components/sidebar/SidebarSearch.tsx index 688b742d..9210e54a 100644 --- a/src/renderer/components/sidebar/SidebarSearch.tsx +++ b/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 ( -
+
Create New Request +
); }; diff --git a/src/renderer/components/sidebar/SidebarSearch/EnvironmentSelect.tsx b/src/renderer/components/sidebar/SidebarSearch/EnvironmentSelect.tsx new file mode 100644 index 00000000..9adf2a79 --- /dev/null +++ b/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(); + const environments = useCollectionStore((state) => state.collection?.environments ?? {}); + + const selectEnvironment = useCallback(async (key: string) => { + setSelectedEnvironmentKey(key); + await rendererEventService.selectEnvironment(key); + }, []); + + return ( + + + + + + {Object.keys(environments).map((key, index) => ( + selectEnvironment(key))} + className="text-danger" + > + {key} + + ))} + + + ); +}; diff --git a/src/renderer/components/ui/dropdown-menu.tsx b/src/renderer/components/ui/dropdown-menu.tsx index f78745be..357a0a47 100644 --- a/src/renderer/components/ui/dropdown-menu.tsx +++ b/src/renderer/components/ui/dropdown-menu.tsx @@ -1,6 +1,6 @@ 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'; @@ -8,6 +8,8 @@ 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,