improvement(selectors): consolidate all integration selectors to use the combobox (#2020)

* improvement(selectors): consolidate all integration selectors to use the combobox

* improved credential selector and file-upload styling to use emcn combobox

* update mcp subblocks to use emcn components, delete unused mcp server modal

* fix filterOptions change

* fix project selector

* attempted jira fix

* fix gdrive inf calls

* rewrite credential selector

* fix docs

* fix onedrive folder

* fix

* fix

* fix excel cred fetch

* fix excel part 2

---------

Co-authored-by: waleed <[email protected]>

Author: icecrasher321

apps/sim/app/api/auth/oauth/microsoft/file/route.ts

@@ -1,12 +1,9 @@
-import { db } from '@sim/db'
-import { account } from '@sim/db/schema'
-import { eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
-import { getSession } from '@/lib/auth'
+import { authorizeCredentialUse } from '@/lib/auth/credential-access'
 import { createLogger } from '@/lib/logs/console/logger'
 import { validateMicrosoftGraphId } from '@/lib/security/input-validation'
 import { generateRequestId } from '@/lib/utils'
-import { refreshAccessTokenIfNeeded } from '@/app/api/auth/oauth/utils'
+import { getCredential, refreshAccessTokenIfNeeded } from '@/app/api/auth/oauth/utils'
 
 export const dynamic = 'force-dynamic'
 
@@ -15,15 +12,10 @@ const logger = createLogger('MicrosoftFileAPI')
 export async function GET(request: NextRequest) {
   const requestId = generateRequestId()
   try {
-    const session = await getSession()
-
-    if (!session?.user?.id) {
-      return NextResponse.json({ error: 'User not authenticated' }, { status: 401 })
-    }
-
     const { searchParams } = new URL(request.url)
     const credentialId = searchParams.get('credentialId')
     const fileId = searchParams.get('fileId')
+    const workflowId = searchParams.get('workflowId') || undefined
 
     if (!credentialId || !fileId) {
       return NextResponse.json({ error: 'Credential ID and File ID are required' }, { status: 400 })
@@ -35,19 +27,27 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: fileIdValidation.error }, { status: 400 })
     }
 
-    const credentials = await db.select().from(account).where(eq(account.id, credentialId)).limit(1)
+    const authz = await authorizeCredentialUse(request, {
+      credentialId,
+      workflowId,
+      requireWorkflowIdForInternal: false,
+    })
 
-    if (!credentials.length) {
-      return NextResponse.json({ error: 'Credential not found' }, { status: 404 })
+    if (!authz.ok || !authz.credentialOwnerUserId) {
+      const status = authz.error === 'Credential not found' ? 404 : 403
+      return NextResponse.json({ error: authz.error || 'Unauthorized' }, { status })
     }
 
-    const credential = credentials[0]
-
-    if (credential.userId !== session.user.id) {
-      return NextResponse.json({ error: 'Unauthorized' }, { status: 403 })
+    const credential = await getCredential(requestId, credentialId, authz.credentialOwnerUserId)
+    if (!credential) {
+      return NextResponse.json({ error: 'Credential not found' }, { status: 404 })
     }
 
-    const accessToken = await refreshAccessTokenIfNeeded(credentialId, session.user.id, requestId)
+    const accessToken = await refreshAccessTokenIfNeeded(
+      credentialId,
+      authz.credentialOwnerUserId,
+      requestId
+    )
 
     if (!accessToken) {
       return NextResponse.json({ error: 'Failed to obtain valid access token' }, { status: 401 })

apps/sim/app/api/auth/oauth/microsoft/files/route.ts

@@ -1,11 +1,8 @@
-import { db } from '@sim/db'
-import { account } from '@sim/db/schema'
-import { eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
-import { getSession } from '@/lib/auth'
+import { authorizeCredentialUse } from '@/lib/auth/credential-access'
 import { createLogger } from '@/lib/logs/console/logger'
 import { generateRequestId } from '@/lib/utils'
-import { refreshAccessTokenIfNeeded } from '@/app/api/auth/oauth/utils'
+import { getCredential, refreshAccessTokenIfNeeded } from '@/app/api/auth/oauth/utils'
 
 export const dynamic = 'force-dynamic'
 
@@ -18,46 +15,39 @@ export async function GET(request: NextRequest) {
   const requestId = generateRequestId()
 
   try {
-    // Get the session
-    const session = await getSession()
-
-    // Check if the user is authenticated
-    if (!session?.user?.id) {
-      logger.warn(`[${requestId}] Unauthenticated request rejected`)
-      return NextResponse.json({ error: 'User not authenticated' }, { status: 401 })
-    }
-
     // Get the credential ID from the query params
     const { searchParams } = new URL(request.url)
     const credentialId = searchParams.get('credentialId')
     const query = searchParams.get('query') || ''
+    const workflowId = searchParams.get('workflowId') || undefined
 
     if (!credentialId) {
       logger.warn(`[${requestId}] Missing credential ID`)
       return NextResponse.json({ error: 'Credential ID is required' }, { status: 400 })
     }
 
-    // Get the credential from the database
-    const credentials = await db.select().from(account).where(eq(account.id, credentialId)).limit(1)
+    const authz = await authorizeCredentialUse(request, {
+      credentialId,
+      workflowId,
+      requireWorkflowIdForInternal: false,
+    })
 
-    if (!credentials.length) {
-      logger.warn(`[${requestId}] Credential not found`, { credentialId })
-      return NextResponse.json({ error: 'Credential not found' }, { status: 404 })
+    if (!authz.ok || !authz.credentialOwnerUserId) {
+      const status = authz.error === 'Credential not found' ? 404 : 403
+      return NextResponse.json({ error: authz.error || 'Unauthorized' }, { status })
     }
 
-    const credential = credentials[0]
-
-    // Check if the credential belongs to the user
-    if (credential.userId !== session.user.id) {
-      logger.warn(`[${requestId}] Unauthorized credential access attempt`, {
-        credentialUserId: credential.userId,
-        requestUserId: session.user.id,
-      })
-      return NextResponse.json({ error: 'Unauthorized' }, { status: 403 })
+    const credential = await getCredential(requestId, credentialId, authz.credentialOwnerUserId)
+    if (!credential) {
+      return NextResponse.json({ error: 'Credential not found' }, { status: 404 })
     }
 
     // Refresh access token if needed using the utility function
-    const accessToken = await refreshAccessTokenIfNeeded(credentialId, session.user.id, requestId)
+    const accessToken = await refreshAccessTokenIfNeeded(
+      credentialId,
+      authz.credentialOwnerUserId,
+      requestId
+    )
 
     if (!accessToken) {
       return NextResponse.json({ error: 'Failed to obtain valid access token' }, { status: 401 })

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/channel-selector/channel-selector-input.tsx

@@ -1,16 +1,14 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'next/navigation'
 import { Tooltip } from '@/components/emcn'
-import {
-  type SlackChannelInfo,
-  SlackChannelSelector,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/channel-selector/components/slack-channel-selector'
+import { SelectorCombobox } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/selector-combobox/selector-combobox'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useForeignCredential } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/hooks/use-foreign-credential'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/hooks/use-sub-block-value'
 import type { SubBlockConfig } from '@/blocks/types'
+import type { SelectorContext } from '@/hooks/selectors/types'
 
 interface ChannelSelectorInputProps {
   blockId: string
@@ -41,14 +39,12 @@ export function ChannelSelectorInput({
   const effectiveAuthMethod = previewContextValues?.authMethod ?? authMethod
   const effectiveBotToken = previewContextValues?.botToken ?? botToken
   const effectiveCredential = previewContextValues?.credential ?? connectedCredential
-  const [selectedChannelId, setSelectedChannelId] = useState<string>('')
-  const [_channelInfo, setChannelInfo] = useState<SlackChannelInfo | null>(null)
+  const [_channelInfo, setChannelInfo] = useState<string | null>(null)
 
-  // Get provider-specific values
   const provider = subBlock.provider || 'slack'
   const isSlack = provider === 'slack'
   // Central dependsOn gating
-  const { finalDisabled, dependsOn, dependencyValues } = useDependsOnGate(blockId, subBlock, {
+  const { finalDisabled, dependsOn } = useDependsOnGate(blockId, subBlock, {
     disabled,
     isPreview,
     previewContextValues,
@@ -69,70 +65,60 @@ export function ChannelSelectorInput({
   // Get the current value from the store or prop value if in preview mode (same pattern as file-selector)
   useEffect(() => {
     const val = isPreview && previewValue !== undefined ? previewValue : storeValue
-    if (val && typeof val === 'string') {
-      setSelectedChannelId(val)
+    if (typeof val === 'string') {
+      setChannelInfo(val)
     }
   }, [isPreview, previewValue, storeValue])
 
-  // Clear channel when any declared dependency changes (e.g., authMethod/credential)
-  const prevDepsSigRef = useRef<string>('')
-  useEffect(() => {
-    if (dependsOn.length === 0) return
-    const currentSig = JSON.stringify(dependencyValues)
-    if (prevDepsSigRef.current && prevDepsSigRef.current !== currentSig) {
-      if (!isPreview) {
-        setSelectedChannelId('')
-        setChannelInfo(null)
-        setStoreValue('')
-      }
-    }
-    prevDepsSigRef.current = currentSig
-  }, [dependsOn, dependencyValues, isPreview, setStoreValue])
+  const requiresCredential = dependsOn.includes('credential')
+  const missingCredential = !credential || credential.trim().length === 0
+  const shouldForceDisable = requiresCredential && (missingCredential || isForeignCredential)
 
-  // Handle channel selection (same pattern as file-selector)
-  const handleChannelChange = (channelId: string, info?: SlackChannelInfo) => {
-    setSelectedChannelId(channelId)
-    setChannelInfo(info || null)
-    if (!isPreview) {
-      setStoreValue(channelId)
-    }
-    onChannelSelect?.(channelId)
-  }
+  const context: SelectorContext = useMemo(
+    () => ({
+      credentialId: credential,
+      workflowId: workflowIdFromUrl,
+    }),
+    [credential, workflowIdFromUrl]
+  )
 
-  // Render Slack channel selector
-  if (isSlack) {
+  if (!isSlack) {
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <div className='w-full'>
-            <SlackChannelSelector
-              value={selectedChannelId}
-              onChange={(channelId: string, channelInfo?: SlackChannelInfo) => {
-                handleChannelChange(channelId, channelInfo)
-              }}
-              credential={credential}
-              label={subBlock.placeholder || 'Select Slack channel'}
-              disabled={finalDisabled}
-              workflowId={workflowIdFromUrl}
-              isForeignCredential={isForeignCredential}
-            />
+          <div className='w-full rounded border border-dashed p-4 text-center text-muted-foreground text-sm'>
+            Channel selector not supported for provider: {provider}
           </div>
         </Tooltip.Trigger>
+        <Tooltip.Content side='top'>
+          <p>This channel selector is not yet implemented for {provider}</p>
+        </Tooltip.Content>
       </Tooltip.Root>
     )
   }
 
-  // Default fallback for unsupported providers
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <div className='w-full rounded border border-dashed p-4 text-center text-muted-foreground text-sm'>
-          Channel selector not supported for provider: {provider}
+        <div className='w-full'>
+          <SelectorCombobox
+            blockId={blockId}
+            subBlock={subBlock}
+            selectorKey='slack.channels'
+            selectorContext={context}
+            disabled={finalDisabled || shouldForceDisable || isForeignCredential}
+            isPreview={isPreview}
+            previewValue={previewValue ?? null}
+            placeholder={subBlock.placeholder || 'Select Slack channel'}
+            onOptionChange={(value) => {
+              setChannelInfo(value)
+              if (!isPreview) {
+                onChannelSelect?.(value)
+              }
+            }}
+          />
         </div>
       </Tooltip.Trigger>
-      <Tooltip.Content side='top'>
-        <p>This channel selector is not yet implemented for {provider}</p>
-      </Tooltip.Content>
     </Tooltip.Root>
   )
 }