feat(registry): show tooltip for secrets and env var (#620)

Author: peppescg

renderer/src/common/components/ui/tooltip-info-icon.tsx

@@ -13,7 +13,10 @@ export function TooltipInfoIcon({
   return (
     <Tooltip>
       <TooltipTrigger asChild autoFocus={false}>
-        <InfoIcon className="text-muted-foreground size-4 rounded-full" />
+        <InfoIcon
+          className="text-muted-foreground size-4 rounded-full"
+          data-testid="tooltip-info-icon"
+        />
       </TooltipTrigger>
       <TooltipContent className={className}>{children}</TooltipContent>
     </Tooltip>

renderer/src/features/registry-servers/components/__tests__/form-run-from-registry.test.tsx

@@ -2,7 +2,7 @@ import type {
   RegistryEnvVar,
   RegistryImageMetadata,
 } from '@/common/api/generated'
-import { render, screen, waitFor, act } from '@testing-library/react'
+import { render, screen, waitFor, act, within } from '@testing-library/react'
 import { it, expect, vi, describe, beforeEach } from 'vitest'
 import { FormRunFromRegistry } from '../form-run-from-registry'
 import userEvent from '@testing-library/user-event'
@@ -55,7 +55,7 @@ const REGISTRY_SERVER: RegistryImageMetadata = {
 const ENV_VARS_OPTIONAL = [
   {
     name: 'ENV_VAR',
-    description: 'foo bar',
+    description: 'description of env var',
     required: false,
   },
 
@@ -120,6 +120,14 @@ describe('FormRunFromRegistry', () => {
     expect(screen.getByLabelText('Command arguments')).toBeInTheDocument()
     expect(screen.getByLabelText('SECRET value')).toBeInTheDocument()
     expect(screen.getByLabelText('ENV_VAR value')).toBeInTheDocument()
+    const formLabel = screen.getByText(/env_var/i).closest('label')
+    const tooltipIcon = within(formLabel!).getByTestId('tooltip-info-icon')
+    await userEvent.hover(tooltipIcon)
+    await waitFor(() => {
+      const tooltip = screen.getByRole('tooltip')
+      expect(tooltip).toBeInTheDocument()
+      expect(tooltip).toHaveTextContent('description of env var')
+    })
     expect(
       screen.getByRole('button', { name: 'Install server' })
     ).toBeInTheDocument()

renderer/src/features/registry-servers/components/form-run-from-registry/configuration-tab-content.tsx

@@ -15,6 +15,7 @@ import type { GroupedEnvVars } from '../../lib/group-env-vars'
 import type { RegistryEnvVar } from '@/common/api/generated/types.gen'
 import { cn } from '@/common/lib/utils'
 import { FormComboboxSecretStore } from '@/common/components/secrets/form-combobox-secrets-store'
+import { TooltipInfoIcon } from '@/common/components/ui/tooltip-info-icon'
 
 interface ConfigurationTabContentProps {
   error: string | null
@@ -51,6 +52,9 @@ function SecretRow({
                   )}
                 >
                   {secret.name}
+                  <TooltipInfoIcon className="m-w-90">
+                    {secret.description}
+                  </TooltipInfoIcon>
                 </FormLabel>
               </FormControl>
             </div>
@@ -127,10 +131,13 @@ function EnvVarRow({
                   htmlFor={`envVar.${index}.value`}
                   className={cn(
                     `text-muted-foreground !border-input flex h-full
-                    items-center gap-1 font-mono !ring-0`
+                    items-center gap-2 font-mono !ring-0`
                   )}
                 >
                   {envVar.name}
+                  <TooltipInfoIcon className="w-90">
+                    {envVar.description}
+                  </TooltipInfoIcon>
                 </FormLabel>
               </FormControl>
             </div>