fix(connectors): explain disabled settings with tooltips

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.test.tsx

@@ -123,7 +123,17 @@ describe('connection method selection', () => {
     expect(container.textContent).toContain(label)
     expect(container.textContent).not.toContain('Add a new connection')
     expect(container.querySelector('[role="radiogroup"]')).toBeNull()
-    expect(container.querySelector('button')).toBeNull()
+    const trigger = container.querySelector('button')!
+    expect(trigger).toBeDisabled()
+    expect(document.querySelector('[role="tooltip"]')).toBeNull()
+    await act(async () => {
+      trigger.parentElement!.dispatchEvent(
+        new MouseEvent('pointerover', { bubbles: true, clientX: 200, clientY: 200 })
+      )
+    })
+    expect(document.querySelector('[role="tooltip"]')).toHaveTextContent(
+      'Add a new connection to change the sync method.'
+    )
     expect(onChange).not.toHaveBeenCalled()
   })
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx

@@ -5,9 +5,11 @@ import {
   ChipButtonGroup,
   ChipButtonGroupItem,
   ChipCombobox,
+  ChipDropdown,
   ChipLink,
   ChipModalField,
   type ComboboxOption,
+  Tooltip,
 } from '@sim/emcn'
 import type { ConnectorAccessMode } from '@/lib/api/contracts/knowledge/connectors'
 import { type ResourceScope, resourceScopeFromOwner } from '@/lib/core/resource-scope'
@@ -164,7 +166,22 @@ export function ConnectorAccessField({
       }
     >
       <div className='flex flex-col gap-2'>
-        {slackSetupOnly ? null : !lockAccessMode && showModeSelector ? (
+        {slackSetupOnly ? null : lockAccessMode ? (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <span className='inline-flex w-fit cursor-not-allowed'>
+                <ChipDropdown
+                  aria-label={`Sync using: ${currentMode?.label ?? 'Unavailable'}`}
+                  value={value.accessMode}
+                  options={visibleModes.map(({ mode, label }) => ({ value: mode, label }))}
+                  disabled
+                  className='pointer-events-none w-fit'
+                />
+              </span>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Add a new connection to change the sync method.</Tooltip.Content>
+          </Tooltip.Root>
+        ) : showModeSelector ? (
           <ChipButtonGroup
             value={value.accessMode}
             disabled={disabled}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/connector-settings-fields.tsx

@@ -91,7 +91,6 @@ export interface ConnectorSettingsFieldsProps {
   hasMaxAccess: boolean
   isSaving: boolean
   error: string | null
-  saveBlockedReason?: string
   access: ConnectorAccessSelection
   onAccessChange: (access: ConnectorAccessSelection) => void
   canAdmin: boolean
@@ -134,7 +133,6 @@ export function ConnectorSettingsFields({
   hasMaxAccess,
   isSaving,
   error,
-  saveBlockedReason,
   access,
   onAccessChange,
   canAdmin,
@@ -553,11 +551,6 @@ export function ConnectorSettingsFields({
         </ChipModalField>
       )}
 
-      {saveBlockedReason && (
-        <p role='status' className='px-2 text-[var(--text-muted)] text-caption'>
-          {saveBlockedReason}
-        </p>
-      )}
       <ChipModalError>{error}</ChipModalError>
     </>
   )

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx

@@ -108,6 +108,7 @@ export function EditConnectorModal({
             label: form.saving ? 'Saving…' : 'Save',
             onClick: form.save,
             disabled: !form.canSave,
+            disabledTooltip: form.saveBlockedReason,
           }}
         />
       )}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/use-connector-settings-form.ts

@@ -519,7 +519,6 @@ export function useConnectorSettingsForm({
     hasMaxAccess,
     isSaving,
     error: error ?? searchSetupError,
-    saveBlockedReason,
     access,
     onAccessChange: setAccess,
     canAdmin,