fix(knowledge): scope sync/update state per-connector to prevent race conditions

Author: waleedlatif1

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

@@ -73,13 +73,14 @@ export function ConnectorsSection({
   isLoading,
   canEdit,
 }: ConnectorsSectionProps) {
-  const { mutate: triggerSync, isPending: isSyncing } = useTriggerSync()
-  const { mutate: updateConnector, isPending: isUpdating } = useUpdateConnector()
+  const { mutate: triggerSync } = useTriggerSync()
+  const { mutate: updateConnector } = useUpdateConnector()
   const { mutate: deleteConnector, isPending: isDeleting } = useDeleteConnector()
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null)
   const [editingConnector, setEditingConnector] = useState<ConnectorData | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const [syncingConnectorId, setSyncingConnectorId] = useState<string | null>(null)
+  const [syncingIds, setSyncingIds] = useState<Set<string>>(() => new Set())
+  const [updatingIds, setUpdatingIds] = useState<Set<string>>(() => new Set())
 
   const syncTriggeredAt = useRef<Record<string, number>>({})
   const cooldownTimers = useRef<Set<ReturnType<typeof setTimeout>>>(new Set())
@@ -104,14 +105,18 @@ export function ConnectorsSection({
       if (isSyncOnCooldown(connectorId)) return
 
       syncTriggeredAt.current[connectorId] = Date.now()
-      setSyncingConnectorId(connectorId)
+      setSyncingIds((prev) => new Set(prev).add(connectorId))
 
       triggerSync(
         { knowledgeBaseId, connectorId },
         {
           onSuccess: () => {
             setError(null)
-            setSyncingConnectorId(null)
+            setSyncingIds((prev) => {
+              const next = new Set(prev)
+              next.delete(connectorId)
+              return next
+            })
             const timer = setTimeout(() => {
               cooldownTimers.current.delete(timer)
               forceUpdate((n) => n + 1)
@@ -121,7 +126,11 @@ export function ConnectorsSection({
           onError: (err) => {
             logger.error('Sync trigger failed', { error: err.message })
             setError(err.message)
-            setSyncingConnectorId(null)
+            setSyncingIds((prev) => {
+              const next = new Set(prev)
+              next.delete(connectorId)
+              return next
+            })
             delete syncTriggeredAt.current[connectorId]
             forceUpdate((n) => n + 1)
           },
@@ -167,12 +176,12 @@ export function ConnectorsSection({
               workspaceId={workspaceId}
               knowledgeBaseId={knowledgeBaseId}
               canEdit={canEdit}
-              isSyncing={isSyncing}
-              isSyncPending={syncingConnectorId === connector.id}
-              isUpdating={isUpdating}
+              isSyncPending={syncingIds.has(connector.id)}
+              isUpdating={updatingIds.has(connector.id)}
               syncCooldown={isSyncOnCooldown(connector.id)}
               onSync={() => handleSync(connector.id)}
-              onTogglePause={() =>
+              onTogglePause={() => {
+                setUpdatingIds((prev) => new Set(prev).add(connector.id))
                 updateConnector(
                   {
                     knowledgeBaseId,
@@ -182,14 +191,21 @@ export function ConnectorsSection({
                     },
                   },
                   {
+                    onSettled: () => {
+                      setUpdatingIds((prev) => {
+                        const next = new Set(prev)
+                        next.delete(connector.id)
+                        return next
+                      })
+                    },
                     onSuccess: () => setError(null),
                     onError: (err) => {
                       logger.error('Toggle pause failed', { error: err.message })
                       setError(err.message)
                     },
                   }
                 )
-              }
+              }}
               onEdit={() => setEditingConnector(connector)}
               onDelete={() => setDeleteTarget(connector.id)}
             />
@@ -260,7 +276,6 @@ interface ConnectorCardProps {
   workspaceId: string
   knowledgeBaseId: string
   canEdit: boolean
-  isSyncing: boolean
   isSyncPending: boolean
   isUpdating: boolean
   syncCooldown: boolean
@@ -275,7 +290,6 @@ function ConnectorCard({
   workspaceId,
   knowledgeBaseId,
   canEdit,
-  isSyncing,
   isSyncPending,
   isUpdating,
   syncCooldown,
@@ -368,7 +382,7 @@ function ConnectorCard({
                     variant='ghost'
                     className='h-7 w-7 p-0'
                     onClick={onSync}
-                    disabled={connector.status === 'syncing' || isSyncing || syncCooldown}
+                    disabled={connector.status === 'syncing' || isSyncPending || syncCooldown}
                   >
                     <RefreshCw
                       className={cn(