fix(search): match tool descriptions to permission group info badges

Author: waleedlatif1

apps/docs/content/docs/search/connect-your-account.mdx

@@ -46,7 +46,7 @@ Creating Jira sprints requires the Jira sprint permission. If your account was c
 
 ## Tool permissions
 
-Open the app in **Integrations** and select your account. Tool permissions appear in its details when the app has supported Assistant tools available to you. Set a preference for each operation or use the **Read-only tools** and **Write tools** group controls:
+Open the app in **Integrations** and select your account. Tool permissions appear in its details when the app has supported Assistant tools available to you. Hover over or focus the info button beside a tool to read its description. Set a preference for each operation or use the **Read-only tools** and **Write tools** group controls:
 
 | Preference | Behavior |
 | --- | --- |

apps/sim/app/o/[organizationId]/integrations/accounts/[credentialId]/tool-permissions.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ChipInput, ChipLink, ChipSelect, ChipSwitch, Tooltip, toast } from '@sim/emcn'
+import { ChipInput, ChipLink, ChipSelect, ChipSwitch, Info, toast } from '@sim/emcn'
 import { ArrowLeft, Search } from '@sim/emcn/icons'
 import { useQueryStates } from 'nuqs'
 import type {
@@ -211,13 +211,13 @@ function ToolPermissionGroup({
           key={tool.toolId}
           className='flex flex-col items-start gap-3 py-3 sm:flex-row sm:items-center sm:justify-between'
         >
-          <div className='min-w-0 flex-1'>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <span className='text-[var(--text-body)] text-small'>{tool.name}</span>
-              </Tooltip.Trigger>
-              <Tooltip.Content>{tool.description}</Tooltip.Content>
-            </Tooltip.Root>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
+            <span className='text-[var(--text-body)] text-small'>{tool.name}</span>
+            {tool.description && (
+              <Info side='top' className='shrink-0'>
+                {tool.description}
+              </Info>
+            )}
           </div>
           <ChipSwitch
             className='max-w-full shrink-0'

apps/sim/scripts/test-assistant-actions-e2e.ts

@@ -948,6 +948,21 @@ try {
     await policy.getByRole('radio', { name: 'Ask', exact: true }).click()
     await expect(policy.getByRole('radio', { name: 'Ask', exact: true })).toBeChecked()
     await capture('tool-permissions-desktop')
+    const toolDescription = page
+      .getByRole('button', { name: 'More information', exact: true })
+      .first()
+    await toolDescription.hover()
+    await expect(page.getByRole('tooltip')).toBeVisible()
+    await capture('tool-permission-description')
+    await page.mouse.move(0, 0)
+    await expect(page.getByRole('tooltip')).toBeHidden()
+    await toolDescription.focus()
+    await page.keyboard.press('Tab')
+    await page.keyboard.press('Shift+Tab')
+    await expect(toolDescription).toBeFocused()
+    await expect(page.getByRole('tooltip')).toBeVisible()
+    await page.keyboard.press('Tab')
+    await expect(page.getByRole('tooltip')).toBeHidden()
     await page.setViewportSize({ width: 390, height: 844 })
     await capture('tool-permissions-mobile')
     assert(