only popup the vscode env var dialog once (#1066)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> Ensure the VSCode environment variables dialog only appears once by
tracking its closed state with `hasClosedEnvVarsDialogAtom`.
> 
>   - **Behavior**:
> - Introduces `hasClosedEnvVarsDialogAtom` in `EventListener.tsx` to
track if the environment variables dialog has been closed.
> - Updates `ShowSettingsButton` and `SettingsDialog` in
`SettingsDialog.tsx` to check `hasClosedEnvVarsDialogAtom` before
showing the dialog.
>   - **State Management**:
> - Uses `atomWithStorage` for `hasClosedEnvVarsDialogAtom` to persist
the closed state across sessions.
>   - **UI Logic**:
> - In `SettingsDialog.tsx`, the dialog only opens automatically if
`hasClosedEnvVarsDialogAtom` is `false`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for 2ac140b. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

typescript/playground-common/src/baml_wasm_web/EventListener.tsx

@@ -58,6 +58,11 @@ const envKeyValueStorage = atomWithStorage<[string, string][]>(
   defaultEnvKeyValues,
   vscodeLocalStorageStore,
 )
+export const hasClosedEnvVarsDialogAtom = atomWithStorage<boolean>(
+  'has-closed-env-vars-dialog',
+  false,
+  vscodeLocalStorageStore,
+)
 export const bamlCliVersionAtom = atom<string | null>(null)
 
 export const resetEnvKeyValuesAtom = atom(null, (get, set) => {

typescript/playground-common/src/shared/SettingsDialog.tsx

@@ -27,7 +27,11 @@ import {
   SettingsIcon,
   Trash2Icon,
 } from 'lucide-react'
-import { envKeyValuesAtom, runtimeRequiredEnvVarsAtom } from '../baml_wasm_web/EventListener'
+import {
+  envKeyValuesAtom,
+  hasClosedEnvVarsDialogAtom,
+  runtimeRequiredEnvVarsAtom,
+} from '../baml_wasm_web/EventListener'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../components/ui/dialog'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components/ui/tooltip'
 import clsx from 'clsx'
@@ -183,14 +187,18 @@ export const ShowSettingsButton: React.FC<{ iconClassName: string }> = ({ iconCl
   const requiredAndSetCount = useAtomValue(requiredAndSetCountAtom)
   const requiredEnvVars = useAtomValue(runtimeRequiredEnvVarsAtom)
   const requiredButUnsetCount = requiredButUnset.length
+  const hasClosedEnvVarsDialog = useAtomValue(hasClosedEnvVarsDialogAtom)
   useEffect(() => {
     if ((window as any).next?.version) {
       // dont run in nextjs
       return
     }
     if (requiredAndSetCount === 0 && requiredEnvVars.length > 0) {
       // no env vars have been set at all pop up the dialog
-      setShowSettings(true)
+      // but only if we haven't already closed the dialog
+      if (!hasClosedEnvVarsDialog) {
+        setShowSettings(true)
+      }
     }
   }, [requiredAndSetCount, requiredEnvVars, setShowSettings])
 
@@ -239,9 +247,16 @@ export const SettingsDialog: React.FC = () => {
   const [enableObservability, setEnableObservability] = useState(
     envvars.some((t) => t.type === 'tracing' && t.value.length > 0),
   )
+  const [hasClosedEnvVarsDialog, setHasClosedEnvVarsDialog] = useAtom(hasClosedEnvVarsDialogAtom)
 
   return (
-    <Dialog open={showSettings} onOpenChange={setShowSettings}>
+    <Dialog
+      open={showSettings}
+      onOpenChange={(open) => {
+        setShowSettings(open)
+        setHasClosedEnvVarsDialog(true)
+      }}
+    >
       <DialogContent className=' min-h-[550px] max-h-[550px] overflow-y-auto bg-vscode-editorWidget-background flex flex-col border-vscode-textSeparator-foreground overflow-x-clip'>
         <DialogHeader className='flex flex-row gap-x-4 items-end'>
           <DialogTitle className='font-semibold'>Environment variables</DialogTitle>