feat: add info icons / hover explanations throughout dashboard (DASH-296)

@devin-ai-integration[bot]checks n/achecks…devin/DASH-296-1773374471 → main6 files · +90 −9review: @palash-cupdated 2mo ago

GitHub

▸Description· 2 comments · 3 noise

feat: add info icons / hover explanations throughout dashboard

Summary

Adds a reusable InfoTooltip component and places info icons with hover explanations across the auth configs area of the dashboard, resolving DASH-296.

New component: apps/web/components/ui/InfoTooltip.tsx — wraps the existing shadcn Tooltip with a lucide InfoIcon trigger. Accepts content, side, className, and iconSize props.

Tooltips added to:

Auth Configs listing page — page header + table column headers (Connections, Auth Type, Status)
Connected Accounts listing — section header + table columns (User ID, Status)
Triggers listing — section header + table column (Status)
Auth Config Card sidebar — all four labels (Authentication Method, Auth Config ID, Toolkit Slug, Created At)
Manage Auth Config page — section header + "Tools Available For Execution" label

Tooltip copy was derived from the Composio docs and hermes codebase terminology.

Review & Testing Checklist for Human

Verify tooltip copy is accurate — all tooltip strings were authored from docs; product team should confirm wording matches intended meanings (especially status descriptions like "Active", "Expired", "Initiated")
Check table column header icon placement — the icon prop in InfiniteTable renders before the column name (e.g., [ℹ] Status). Confirm this looks acceptable or if it should appear after the name instead.
Visual check on AuthConfigCard — the <h4> tags gained flex items-center gap-1; verify the info icons align well with the uppercase labels and don't break layout on narrow screens.
Test tooltip interaction in table rows — the onClick stopPropagation on the info button should prevent row clicks; verify clicking the info icon in a table doesn't navigate or trigger row actions.

Recommended test plan: Navigate to Auth Configs list → click into an auth config → check Connected Accounts tab, Active Triggers tab, Manage Auth Config tab, and the sidebar card. Hover over each info icon and verify tooltip appears with readable text and dismisses cleanly.

Notes

Lint passes with 0 errors (328 pre-existing warnings, none introduced).
No changes to the base Tooltip component or InfiniteTable component.
Requested by: @palash-c
Link to Devin Session

@devin-ai-integration[bot]agent3mo ago

'Add info icons / hover explanations throughout dashboard' ([DASH-296](https://linear.app/composio/issue/DASH-296/add-info-icons-hover-explanations-throughout-dashboard))

User instruction: @devin follow the spec, check hermes repo for what they mean

@devin-ai-integration[bot]agent3mo ago

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
Look at CI failures and help fix them

⚙️ Control Options:

Disable automatic comment and CI monitoring

▸ 3 bot/status comments hidden

@linear[bot]3mo ago

Many UI elements lack explanations. Add info icons with hover tooltips.

Source: Loom feedback @ 11:27-11:54

Spec for Implementation

Repo: composio_dashboard

Goal: Add info icons with tooltips to explain dashboard terminology.

Elements to add tooltips:

"Active" status - explain what makes an account/trigger active
"Not used X" - explain what this counter means
Auth Config settings - explain OAuth scopes, credentials, etc.
Session/User terminology - explain Composio concepts

Implementation:

Create reusable component (if not exists):
- InfoTooltip - info icon with hover tooltip
- Use shadcn Tooltip component
Add throughout dashboard:
- Status columns in tables
- Settings/config pages
- Empty states where terminology is introduced

Pattern:

<div className="flex items-center gap-1">
  <span>Active</span>
  <InfoTooltip content="Account has valid credentials and can execute tools" />
</div>

Ready for Devin

@vercel[bot]3mo ago

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment

loading diff…

feat: add info icons / hover explanations throughout dashboard

Summary

Review & Testing Checklist for Human

Notes

🤖 Devin AI Engineer

Spec for Implementation

feat: add info icons / hover explanations throughout dashboard

Summary

Review & Testing Checklist for Human

Notes

🤖 Devin AI Engineer

Spec for Implementation

Playwright Test Results