fix: close popover after value selected (#496)

* feat: move delay fn in a root shared folder

* fix: close popover after value selected

Author: peppescg

main/src/graceful-exit.ts

@@ -6,7 +6,7 @@ import { createClient } from '../../renderer/src/common/api/generated/client'
 import type { WorkloadsWorkload } from '../../renderer/src/common/api/generated/types.gen'
 import Store from 'electron-store'
 import log from './logger'
-import { delay } from './util'
+import { delay } from '../../utils/delay'
 
 // Create a store instance for tracking shutdown servers
 const shutdownStore = new Store({

main/src/main.ts

@@ -32,7 +32,8 @@ import {
   binPath,
 } from './toolhive-manager'
 import log from './logger'
-import { delay, getAppVersion, pollWindowReady } from './util'
+import { getAppVersion, pollWindowReady } from './util'
+import { delay } from '../../utils/delay'
 
 import Store from 'electron-store'
 

main/src/util.ts

@@ -1,6 +1,7 @@
 import { app, BrowserWindow } from 'electron'
 import { execSync } from 'node:child_process'
 import log from './logger'
+import { delay } from '../../utils/delay'
 
 function getVersionFromGit(): string {
   try {
@@ -25,10 +26,6 @@ function getVersionFromGit(): string {
   }
 }
 
-export async function delay(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
 export function getAppVersion(): string {
   if (process.env.SENTRY_RELEASE) {
     return process.env.SENTRY_RELEASE

renderer/src/common/components/secrets/form-combobox-secrets-store.tsx

@@ -1,4 +1,5 @@
 import { Check, ChevronDown } from 'lucide-react'
+import { useState } from 'react'
 import { Button } from '../ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
@@ -15,6 +16,7 @@ import { cn } from '@/common/lib/utils'
 import { useQuery } from '@tanstack/react-query'
 import { getApiV1BetaSecretsDefaultKeysOptions } from '@/common/api/generated/@tanstack/react-query.gen'
 import { RefreshButton } from '../refresh-button'
+import { delay } from '../../../../../utils/delay'
 
 type ConstrainedFieldValues = FieldValues & {
   secrets: {
@@ -35,14 +37,15 @@ export function FormComboboxSecretStore<
   T extends ConstrainedFieldValues = ConstrainedFieldValues,
 >({ form, name }: { form: UseFormReturn<T>; name: Path<T> }) {
   const { data, refetch } = useQuery(getApiV1BetaSecretsDefaultKeysOptions())
+  const [isOpen, setIsOpen] = useState(false)
 
   return (
     <FormField
       control={form.control}
       name={name}
       render={({ field }) => (
         <FormItem>
-          <Popover>
+          <Popover open={isOpen} onOpenChange={setIsOpen}>
             <PopoverTrigger asChild>
               <FormControl>
                 <Button
@@ -89,11 +92,13 @@ export function FormComboboxSecretStore<
                               key={secret.key}
                               value={secret.key}
                               className="font-mono"
-                              onSelect={(value) => {
+                              onSelect={async (value) => {
                                 field.onChange({
                                   secret: value,
                                   isFromStore: true,
                                 })
+                                await delay(150)
+                                setIsOpen(false)
                               }}
                             >
                               {secret.key}

renderer/src/common/lib/polling.ts

@@ -3,8 +3,7 @@
  */
 
 import type { WorkloadsWorkload } from '../api/generated/types.gen'
-
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+import { delay } from '../../../../utils/delay'
 
 // Types
 interface PollingConfig {

utils/delay.ts

@@ -0,0 +1,3 @@
+export async function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}