improvement(kb-connectors): restore field descriptions as info-icon tooltips

waleedlatif1 · waleedlatif1 · commit 37a34cf6d09a · 2026-05-22T08:42:27.000-07:00
Restores the 41 field-level `description` lines stripped in fc64421, but instead of rendering them as inline muted-text paragraphs they're shown via a small Info icon next to each field title. Hovering or focusing the icon reveals the description in the existing emcn Tooltip. Keeps the modal layout tight while preserving the per-field guidance. Used <button type="button"> as the tooltip trigger (Radix asChild) rather than <span tabIndex={0}> to satisfy a11y/noNoninteractiveTabindex.
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ArrowLeft, ArrowLeftRight, Plus, Search } from 'lucide-react'
+import { ArrowLeft, ArrowLeftRight, Info, Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Button,
@@ -347,12 +347,28 @@ export function AddConnectorModal({
                   return (
                     <div key={field.id} className='flex flex-col gap-2'>
                       <div className='flex items-center justify-between'>
-                        <Label>
-                          {field.title}
-                          {field.required && (
-                            <span className='ml-0.5 text-[var(--text-error)]'>*</span>
+                        <div className='flex items-center gap-1'>
+                          <Label>
+                            {field.title}
+                            {field.required && (
+                              <span className='ml-0.5 text-[var(--text-error)]'>*</span>
+                            )}
+                          </Label>
+                          {field.description && (
+                            <Tooltip.Root>
+                              <Tooltip.Trigger asChild>
+                                <button
+                                  type='button'
+                                  className='flex size-[14px] cursor-help items-center justify-center text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
+                                  aria-label={`About ${field.title}`}
+                                >
+                                  <Info className='size-[12px]' />
+                                </button>
+                              </Tooltip.Trigger>
+                              <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
+                            </Tooltip.Root>
                           )}
-                        </Label>
+                        </div>
                         {hasCanonicalPair && canonicalId && (
                           <Tooltip.Root>
                             <Tooltip.Trigger asChild>
@@ -372,9 +388,6 @@ export function AddConnectorModal({
                           </Tooltip.Root>
                         )}
                       </div>
-                      {field.description && (
-                        <p className='text-[var(--text-muted)] text-xs'>{field.description}</p>
-                      )}
                       {field.type === 'selector' && field.selectorKey ? (
                         <ConnectorSelectorField
                           field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowLeftRight, ExternalLink, RotateCcw } from 'lucide-react'
+import { ArrowLeftRight, ExternalLink, Info, RotateCcw } from 'lucide-react'
 import {
   Button,
   ButtonGroup,
@@ -385,10 +385,26 @@ function SettingsTab({
         return (
           <div key={field.id} className='flex flex-col gap-2'>
             <div className='flex items-center justify-between'>
-              <Label>
-                {field.title}
-                {field.required && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
-              </Label>
+              <div className='flex items-center gap-1'>
+                <Label>
+                  {field.title}
+                  {field.required && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
+                </Label>
+                {field.description && (
+                  <Tooltip.Root>
+                    <Tooltip.Trigger asChild>
+                      <button
+                        type='button'
+                        className='flex size-[14px] cursor-help items-center justify-center text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
+                        aria-label={`About ${field.title}`}
+                      >
+                        <Info className='size-[12px]' />
+                      </button>
+                    </Tooltip.Trigger>
+                    <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
+                  </Tooltip.Root>
+                )}
+              </div>
               {hasCanonicalPair && canonicalId && (
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
@@ -406,9 +422,6 @@ function SettingsTab({
                 </Tooltip.Root>
               )}
             </div>
-            {field.description && (
-              <p className='text-[var(--text-muted)] text-xs'>{field.description}</p>
-            )}
             {field.type === 'selector' && field.selectorKey ? (
               <ConnectorSelectorField
                 field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
diff --git a/apps/sim/connectors/discord/discord.ts b/apps/sim/connectors/discord/discord.ts
@@ -154,6 +154,7 @@ export const discordConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. 123456789012345678',
       required: true,
+      description: 'The Discord channel ID to sync messages from',
     },
     {
       id: 'maxMessages',
diff --git a/apps/sim/connectors/dropbox/dropbox.ts b/apps/sim/connectors/dropbox/dropbox.ts
@@ -115,6 +115,7 @@ export const dropboxConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. /Documents (default: entire Dropbox)',
       required: false,
+      description: 'Leave empty to sync all supported files',
     },
     {
       id: 'maxFiles',
diff --git a/apps/sim/connectors/evernote/evernote.ts b/apps/sim/connectors/evernote/evernote.ts
@@ -383,6 +383,7 @@ export const evernoteConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'Leave empty to sync all notebooks',
       required: false,
+      description: 'Sync only notes from this notebook (optional)',
     },
   ],
 
diff --git a/apps/sim/connectors/fireflies/fireflies.ts b/apps/sim/connectors/fireflies/fireflies.ts
@@ -140,6 +140,7 @@ export const firefliesConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. john@example.com',
       required: false,
+      description: 'Only sync transcripts hosted by this email',
     },
     {
       id: 'maxTranscripts',
diff --git a/apps/sim/connectors/gmail/gmail.ts b/apps/sim/connectors/gmail/gmail.ts
@@ -360,6 +360,7 @@ export const gmailConnector: ConnectorConfig = {
       multi: true,
       placeholder: 'Select one or more labels',
       required: false,
+      description: 'Only sync emails matching any of these labels. Leave empty for all mail.',
     },
     {
       id: 'label',
@@ -370,6 +371,7 @@ export const gmailConnector: ConnectorConfig = {
       multi: true,
       placeholder: 'e.g. INBOX, IMPORTANT (comma-separated; commas in label names not supported)',
       required: false,
+      description: 'Only sync emails matching any of these labels. Leave empty for all mail.',
     },
     {
       id: 'dateRange',
@@ -411,6 +413,7 @@ export const gmailConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. from:boss@company.com subject:report has:attachment',
       required: false,
+      description: 'Additional Gmail search filter. Uses the same syntax as the Gmail search bar.',
     },
     {
       id: 'maxThreads',
diff --git a/apps/sim/connectors/google-calendar/google-calendar.ts b/apps/sim/connectors/google-calendar/google-calendar.ts
@@ -267,6 +267,7 @@ export const googleCalendarConnector: ConnectorConfig = {
       multi: true,
       placeholder: 'Select one or more calendars',
       required: false,
+      description: 'Calendars to sync from. Defaults to your primary calendar.',
     },
     {
       id: 'calendarId',
@@ -298,6 +299,7 @@ export const googleCalendarConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. standup, sprint review (optional)',
       required: false,
+      description: 'Filter events by text search across all fields.',
     },
     {
       id: 'maxEvents',
diff --git a/apps/sim/connectors/google-sheets/google-sheets.ts b/apps/sim/connectors/google-sheets/google-sheets.ts
@@ -216,6 +216,7 @@ export const googleSheetsConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms',
       required: true,
+      description: 'The ID from the spreadsheet URL: docs.google.com/spreadsheets/d/{ID}/edit',
     },
     {
       id: 'sheetFilter',
diff --git a/apps/sim/connectors/intercom/intercom.ts b/apps/sim/connectors/intercom/intercom.ts
@@ -285,6 +285,7 @@ export const intercomConnector: ConnectorConfig = {
       title: 'Content Type',
       type: 'dropdown',
       required: true,
+      description: 'Choose what to sync from Intercom',
       options: [
         { label: 'Articles Only', id: 'articles' },
         { label: 'Conversations Only', id: 'conversations' },
@@ -296,6 +297,7 @@ export const intercomConnector: ConnectorConfig = {
       title: 'Article State',
       type: 'dropdown',
       required: false,
+      description: 'Filter articles by state (default: published)',
       options: [
         { label: 'Published', id: 'published' },
         { label: 'Draft', id: 'draft' },
@@ -307,6 +309,7 @@ export const intercomConnector: ConnectorConfig = {
       title: 'Conversation State',
       type: 'dropdown',
       required: false,
+      description: 'Filter conversations by state (default: all)',
       options: [
         { label: 'Open', id: 'open' },
         { label: 'Closed', id: 'closed' },
@@ -319,6 +322,7 @@ export const intercomConnector: ConnectorConfig = {
       type: 'short-input',
       required: false,
       placeholder: `e.g. 200 (default: ${DEFAULT_MAX_ITEMS})`,
+      description: 'Maximum number of articles or conversations to sync',
     },
   ],
 
diff --git a/apps/sim/connectors/microsoft-teams/microsoft-teams.ts b/apps/sim/connectors/microsoft-teams/microsoft-teams.ts
@@ -222,6 +222,7 @@ export const microsoftTeamsConnector: ConnectorConfig = {
       mode: 'advanced',
       placeholder: 'e.g. fbe2bf47-16c8-47cf-b4a5-4b9b187c508b',
       required: true,
+      description: 'The ID of the Microsoft Teams team',
     },
     {
       id: 'channelSelector',
@@ -244,6 +245,7 @@ export const microsoftTeamsConnector: ConnectorConfig = {
       multi: true,
       placeholder: 'e.g. General, Announcements (comma-separated for multiple)',
       required: true,
+      description: 'Channel names or IDs to sync messages from',
     },
     {
       id: 'maxMessages',
diff --git a/apps/sim/connectors/obsidian/obsidian.ts b/apps/sim/connectors/obsidian/obsidian.ts
@@ -183,13 +183,15 @@ export const obsidianConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'https://127.0.0.1:27124',
       required: true,
+      description: 'Base URL of your Obsidian Local REST API (default port: 27124 for HTTPS)',
     },
     {
       id: 'folderPath',
       title: 'Folder Path',
       type: 'short-input',
       placeholder: 'e.g. Projects/Notes',
       required: false,
+      description: 'Only sync notes from this folder (leave empty for entire vault)',
     },
   ],
 
diff --git a/apps/sim/connectors/outlook/outlook.ts b/apps/sim/connectors/outlook/outlook.ts
@@ -334,6 +334,7 @@ export const outlookConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. from:boss@company.com subject:report hasAttachment:true',
       required: false,
+      description: 'Search filter using Outlook KQL syntax.',
     },
     {
       id: 'maxConversations',
diff --git a/apps/sim/connectors/reddit/reddit.ts b/apps/sim/connectors/reddit/reddit.ts
@@ -262,12 +262,14 @@ export const redditConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. machinelearning',
       required: true,
+      description: 'Subreddit name to sync posts from (without r/ prefix)',
     },
     {
       id: 'sort',
       title: 'Sort',
       type: 'dropdown',
       required: false,
+      description: 'How to sort posts',
       options: [
         { label: 'Hot', id: 'hot' },
         { label: 'New', id: 'new' },
@@ -295,6 +297,7 @@ export const redditConnector: ConnectorConfig = {
       type: 'short-input',
       required: false,
       placeholder: `e.g. 100 (default: ${DEFAULT_MAX_POSTS})`,
+      description: 'Maximum number of posts to sync',
     },
   ],
 
diff --git a/apps/sim/connectors/servicenow/servicenow.ts b/apps/sim/connectors/servicenow/servicenow.ts
@@ -452,19 +452,22 @@ export const servicenowConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'yourinstance.service-now.com',
       required: true,
+      description: 'Your ServiceNow instance URL',
     },
     {
       id: 'username',
       title: 'Username',
       type: 'short-input',
       placeholder: 'admin',
       required: true,
+      description: 'ServiceNow username for Basic Auth',
     },
     {
       id: 'contentType',
       title: 'Content Type',
       type: 'dropdown',
       required: true,
+      description: 'Type of content to sync from ServiceNow',
       options: [
         { label: 'Knowledge Base Articles', id: 'kb_knowledge' },
         { label: 'Incidents', id: 'incident' },
@@ -475,6 +478,7 @@ export const servicenowConnector: ConnectorConfig = {
       title: 'Article State',
       type: 'dropdown',
       required: false,
+      description: 'Filter KB articles by workflow state',
       options: [
         { label: 'All States', id: 'all' },
         { label: 'Published', id: 'published' },
@@ -490,12 +494,14 @@ export const servicenowConnector: ConnectorConfig = {
       type: 'short-input',
       required: false,
       placeholder: 'e.g. IT, HR, General',
+      description: 'Filter KB articles by category label',
     },
     {
       id: 'incidentState',
       title: 'Incident State',
       type: 'dropdown',
       required: false,
+      description: 'Filter incidents by state',
       options: [
         { label: 'All States', id: 'all' },
         { label: 'New', id: '1' },
@@ -511,6 +517,7 @@ export const servicenowConnector: ConnectorConfig = {
       title: 'Incident Priority',
       type: 'dropdown',
       required: false,
+      description: 'Filter incidents by priority',
       options: [
         { label: 'All Priorities', id: 'all' },
         { label: 'Critical', id: '1' },
@@ -526,6 +533,7 @@ export const servicenowConnector: ConnectorConfig = {
       type: 'short-input',
       required: false,
       placeholder: `e.g. 200 (default: ${DEFAULT_MAX_ITEMS})`,
+      description: 'Maximum number of items to sync',
     },
   ],
 
diff --git a/apps/sim/connectors/slack/slack.ts b/apps/sim/connectors/slack/slack.ts
@@ -513,6 +513,7 @@ export const slackConnector: ConnectorConfig = {
       multi: true,
       placeholder: 'Select one or more channels',
       required: true,
+      description: 'Channels to sync messages from',
     },
     {
       id: 'channel',
@@ -523,6 +524,7 @@ export const slackConnector: ConnectorConfig = {
       multi: true,
       placeholder: 'e.g. general, C01ABC23DEF (comma-separated for multiple)',
       required: true,
+      description: 'Channel names or IDs to sync messages from',
     },
     {
       id: 'maxMessages',
diff --git a/apps/sim/connectors/wordpress/wordpress.ts b/apps/sim/connectors/wordpress/wordpress.ts
@@ -115,12 +115,14 @@ export const wordpressConnector: ConnectorConfig = {
       type: 'short-input',
       placeholder: 'e.g. mysite.wordpress.com',
       required: true,
+      description: 'WordPress site domain',
     },
     {
       id: 'postType',
       title: 'Post Type',
       type: 'dropdown',
       required: false,
+      description: 'Filter by content type',
       options: [
         { label: 'Both', id: 'Both' },
         { label: 'Posts', id: 'Posts' },
@@ -133,6 +135,7 @@ export const wordpressConnector: ConnectorConfig = {
       type: 'short-input',
       required: false,
       placeholder: `e.g. 50 (default: ${DEFAULT_MAX_POSTS})`,
+      description: 'Maximum number of posts to sync',
     },
   ],
 
diff --git a/apps/sim/connectors/zendesk/zendesk.ts b/apps/sim/connectors/zendesk/zendesk.ts

Original file line number	Diff line number	Diff line change
`@@ -154,6 +154,7 @@ export const discordConnector: ConnectorConfig = {`
`154`	`154`	`type: 'short-input',`
`155`	`155`	`placeholder: 'e.g. 123456789012345678',`
`156`	`156`	`required: true,`
	`157`	`+ description: 'The Discord channel ID to sync messages from',`
`157`	`158`	`},`
`158`	`159`	`{`
`159`	`160`	`id: 'maxMessages',`
Original file line number	Diff line number	Diff line change
`@@ -115,6 +115,7 @@ export const dropboxConnector: ConnectorConfig = {`
`115`	`115`	`type: 'short-input',`
`116`	`116`	`placeholder: 'e.g. /Documents (default: entire Dropbox)',`
`117`	`117`	`required: false,`
	`118`	`+ description: 'Leave empty to sync all supported files',`
`118`	`119`	`},`
`119`	`120`	`{`
`120`	`121`	`id: 'maxFiles',`
Original file line number	Diff line number	Diff line change
`@@ -140,6 +140,7 @@ export const firefliesConnector: ConnectorConfig = {`
`140`	`140`	`type: 'short-input',`
`141`	`141`	`placeholder: 'e.g. john@example.com',`
`142`	`142`	`required: false,`
	`143`	`+ description: 'Only sync transcripts hosted by this email',`
`143`	`144`	`},`
`144`	`145`	`{`
`145`	`146`	`id: 'maxTranscripts',`
Original file line number	Diff line number	Diff line change
`@@ -216,6 +216,7 @@ export const googleSheetsConnector: ConnectorConfig = {`
`216`	`216`	`type: 'short-input',`
`217`	`217`	`placeholder: 'e.g. 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms',`
`218`	`218`	`required: true,`
	`219`	`+ description: 'The ID from the spreadsheet URL: docs.google.com/spreadsheets/d/{ID}/edit',`
`219`	`220`	`},`
`220`	`221`	`{`
`221`	`222`	`id: 'sheetFilter',`