fix(knowledge): keep history collapse accessible

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connector-actions.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Fragment, useId } from 'react'
+import { Fragment, type Ref, useId } from 'react'
 import {
   Checkbox,
   Chip,
@@ -21,14 +21,15 @@ import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/compo
 
 interface ConnectorActionsProps {
   state: ConnectorActionState
+  triggerRef?: Ref<HTMLButtonElement>
   history?: {
     expanded: boolean
     contentId: string
     onToggle: () => void
   }
 }
 
-export function ConnectorActions({ state, history }: ConnectorActionsProps) {
+export function ConnectorActions({ state, triggerRef, history }: ConnectorActionsProps) {
   if (!state.canEdit && !history) return null
   const actions = orderHeaderActions([
     ...state.actions,
@@ -45,7 +46,7 @@ export function ConnectorActions({ state, history }: ConnectorActionsProps) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Chip aria-label='Connection actions' leftIcon={MoreHorizontal} />
+        <Chip ref={triggerRef} aria-label='Connection actions' leftIcon={MoreHorizontal} />
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
         {actions.map(({ action }, index) => (

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.test.tsx

@@ -401,7 +401,20 @@ describe('Connector credential reauthorization', () => {
 
     expect(controls[0].getAttribute('aria-expanded')).toBe('true')
     expect(controls[1].getAttribute('aria-expanded')).toBe('false')
-    expect(document.getElementById(historyId!)).not.toBeNull()
+    const history = document.getElementById(historyId!)!
+    const collapse = findButton(history, 'Hide history')
+    expect(collapse.getAttribute('aria-controls')).toBe(historyId)
+    expect(collapse.getAttribute('aria-expanded')).toBe('true')
+    act(() => {
+      collapse.focus()
+      collapse.click()
+    })
+    expect(document.getElementById(historyId!)).toBeNull()
+    expect(controls[0].getAttribute('aria-expanded')).toBe('false')
+    expect(controls[1].getAttribute('aria-expanded')).toBe('false')
+    expect(document.activeElement).toBe(
+      container.querySelector('button[aria-label="Connection actions"]')
+    )
     expect(lifecycle.sync.mutate).not.toHaveBeenCalled()
   })
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useId, useState } from 'react'
-import { Badge, cn } from '@sim/emcn'
+import { useId, useRef, useState } from 'react'
+import { Badge, Chip, cn } from '@sim/emcn'
 import { Loader, Users } from '@sim/emcn/icons'
 import { format, formatDistanceToNow, isPast } from 'date-fns'
 import type { ConnectorData } from '@/lib/api/contracts/knowledge/connectors'
@@ -106,6 +106,7 @@ function ConnectorCard({
   isSearchIndex,
   onEdit,
 }: ConnectorCardProps) {
+  const actionsTriggerRef = useRef<HTMLButtonElement>(null)
   const actions = useConnectorActions({ connector, knowledgeBaseId, canEdit, onEdit })
   const historyId = useId()
   const [expanded, setExpanded] = useState(false)
@@ -155,6 +156,7 @@ function ConnectorCard({
         trailing={
           <ConnectorActions
             state={actions}
+            triggerRef={actionsTriggerRef}
             history={{
               expanded,
               contentId: historyId,
@@ -180,9 +182,21 @@ function ConnectorCard({
       <ConnectorActionFeedback state={actions} />
       {expanded && (
         <div id={historyId} className='border-[var(--border)] border-t pt-3'>
-          {syncDetails && (
-            <p className='mb-2 text-[var(--text-muted)] text-caption'>{syncDetails}</p>
-          )}
+          <div className='mb-2 flex items-start justify-end gap-2'>
+            {syncDetails && (
+              <p className='flex-1 text-[var(--text-muted)] text-caption'>{syncDetails}</p>
+            )}
+            <Chip
+              aria-expanded={expanded}
+              aria-controls={historyId}
+              onClick={() => {
+                setExpanded(false)
+                actionsTriggerRef.current?.focus()
+              }}
+            >
+              Hide history
+            </Chip>
+          </div>
           {lastSyncError && <SettingsResourceRow title={lastSyncError} />}
           <ConnectorSyncHistory connector={connector} knowledgeBaseId={knowledgeBaseId} />
         </div>