only pop up if there are some required (#1035)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> Modify `ShowSettingsButton` in `SettingsDialog.tsx` to check
`requiredEnvVars` before showing the dialog and add `rel="noreferrer"`
to an anchor tag.
> 
>   - **Behavior**:
> - Modify `ShowSettingsButton` in `SettingsDialog.tsx` to check
`requiredEnvVars` before showing the settings dialog if no env vars are
set.
> - Add `rel="noreferrer"` to anchor tag in `SettingsDialog.tsx` for
security.
>   - **Misc**:
>     - Minor formatting change (extra newline) in `SettingsDialog.tsx`.
> 
> <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 b73012a. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

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

@@ -181,18 +181,23 @@ export const ShowSettingsButton: React.FC<{ iconClassName: string }> = ({ iconCl
  const setShowSettings = useSetAtom(showSettingsAtom)
  const requiredButUnset = useAtomValue(requiredButUnsetAtom)
  const requiredAndSetCount = useAtomValue(requiredAndSetCountAtom)
+ const requiredEnvVars = useAtomValue(runtimeRequiredEnvVarsAtom)
  const requiredButUnsetCount = requiredButUnset.length
- if ((window as any).next?.version) {
- // dont run in nextjs
- return null
- }
-
  useEffect(() => {
- if (requiredAndSetCount === 0) {
+ 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)
  }
- }, [requiredAndSetCount])
+ }, [requiredAndSetCount, requiredEnvVars, setShowSettings])
+
+ if ((window as any).next?.version) {
+ // dont run in nextjs
+ return null
+ }
 
  const button = (
  <Button
@@ -263,7 +268,12 @@ export const SettingsDialog: React.FC = () => {
  <>
  <p className='text-xs italic text-vscode-descriptionForeground'>
  You can get these from{' '}
- <a className='text-blue-400 underline' target='_blank' href='https://app.boundaryml.com'>
+ <a
+ className='text-blue-400 underline'
+ target='_blank'
+ href='https://app.boundaryml.com'
+ rel='noreferrer'
+ >
  Boundary Studio
  </a>
  </p>