improvement(slack): merge slack_v2 auth into one credential picker for accounts and custom bots

Author: TheodoreSpeaks

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Button, Combobox } from '@sim/emcn'
+import { Button, Combobox, type ComboboxOptionGroup } from '@sim/emcn'
 import { ExternalLink, KeyRound } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
@@ -104,17 +104,22 @@ export function CredentialSelector({
   const credentialsLoading = isAllCredentials ? allCredentialsLoading : oauthCredentialsLoading
 
   const credentialKind = subBlock.credentialKind
+  const isMergedKinds = credentialKind === 'any'
 
   const credentials = useMemo(() => {
     // A custom-bot or service-account picker lists only the reusable
-    // service-account credentials, including in trigger mode.
+    // service-account credentials, including in trigger mode. A merged ('any')
+    // picker lists OAuth accounts and bots together.
     if (credentialKind === 'custom-bot' || credentialKind === 'service-account') {
       return rawCredentials.filter((cred) => cred.type === 'service_account')
     }
+    if (isMergedKinds) {
+      return rawCredentials
+    }
     return isTriggerMode && !subBlock.allowServiceAccounts
       ? rawCredentials.filter((cred) => cred.type !== 'service_account')
       : rawCredentials
-  }, [rawCredentials, isTriggerMode, credentialKind, subBlock.allowServiceAccounts])
+  }, [rawCredentials, isTriggerMode, credentialKind, isMergedKinds, subBlock.allowServiceAccounts])
 
   // Resolved service-account provider metadata for the token-paste connect
   // modal. Gated on `credentialKind` and using the non-throwing lookup so it
@@ -239,6 +244,7 @@ export function CredentialSelector({
       const oauthCredentials = allWorkspaceCredentials.filter((c) => c.type === 'oauth')
       return oauthCredentials.map((cred) => ({ label: cred.displayName, value: cred.id }))
     }
+    if (isMergedKinds) return []
 
     const options = credentials.map((cred) => ({
       label: cred.name,
@@ -266,6 +272,7 @@ export function CredentialSelector({
     return options
   }, [
     isAllCredentials,
+    isMergedKinds,
     allWorkspaceCredentials,
     credentials,
     credentialKind,
@@ -274,6 +281,41 @@ export function CredentialSelector({
     getProviderName,
   ])
 
+  const comboboxGroups = useMemo<ComboboxOptionGroup[] | undefined>(() => {
+    if (!isMergedKinds) return undefined
+
+    const toOption = (cred: (typeof credentials)[number]) => ({
+      label: cred.name,
+      value: cred.id,
+      iconElement: getProviderIcon((cred.provider ?? provider) as OAuthProvider),
+    })
+
+    return [
+      {
+        section: `${getProviderName(provider)} accounts`,
+        items: [
+          ...credentials.filter((c) => c.type !== 'service_account').map(toOption),
+          {
+            label: `Connect ${getProviderName(provider)} account`,
+            value: '__connect_account__',
+            iconElement: <ExternalLink className='size-3' />,
+          },
+        ],
+      },
+      {
+        section: 'Custom bots',
+        items: [
+          ...credentials.filter((c) => c.type === 'service_account').map(toOption),
+          {
+            label: 'Set up a custom bot',
+            value: '__connect_bot__',
+            iconElement: <ExternalLink className='size-3' />,
+          },
+        ],
+      },
+    ]
+  }, [isMergedKinds, credentials, provider, getProviderIcon, getProviderName])
+
   const selectedCredentialProvider = selectedCredential?.provider ?? provider
   const workflowSearchHighlight = getWorkflowSearchLabelHighlight({
     activeSearchTarget,
@@ -320,9 +362,17 @@ export function CredentialSelector({
   const handleComboboxChange = useCallback(
     (value: string) => {
       if (value === '__connect_account__') {
+        if (isMergedKinds) {
+          setShowConnectModal(true)
+          return
+        }
         handleAddCredential()
         return
       }
+      if (value === '__connect_bot__') {
+        setShowSlackBotModal(true)
+        return
+      }
 
       const matchedCred = (
         isAllCredentials ? allWorkspaceCredentials.filter((c) => c.type === 'oauth') : credentials
@@ -335,13 +385,21 @@ export function CredentialSelector({
       setIsEditing(true)
       setEditingValue(value)
     },
-    [isAllCredentials, allWorkspaceCredentials, credentials, handleAddCredential, handleSelect]
+    [
+      isAllCredentials,
+      isMergedKinds,
+      allWorkspaceCredentials,
+      credentials,
+      handleAddCredential,
+      handleSelect,
+    ]
   )
 
   return (
     <div>
       <Combobox
         options={comboboxOptions}
+        groups={comboboxGroups}
         value={displayValue}
         selectedValue={selectedId}
         onChange={handleComboboxChange}
@@ -350,8 +408,10 @@ export function CredentialSelector({
           hasDependencies && !depsSatisfied ? 'Fill in required fields above first' : label
         }
         disabled={effectiveDisabled}
-        editable={true}
-        filterOptions={true}
+        editable={!isMergedKinds}
+        filterOptions={!isMergedKinds}
+        searchable={isMergedKinds}
+        searchPlaceholder='Search credentials...'
         isLoading={credentialsLoading}
         overlayContent={overlayContent}
         className={overlayContent ? 'pl-7' : ''}
@@ -371,7 +431,7 @@ export function CredentialSelector({
                 workflowId: activeWorkflowId || '',
                 displayName: selectedCredential?.name ?? getProviderName(provider),
                 providerId: effectiveProviderId,
-                preCount: credentials.length,
+                preCount: credentials.filter((c) => c.type !== 'service_account').length,
                 workspaceId,
                 requestedAt: Date.now(),
               })

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

@@ -56,11 +56,13 @@ import { useWebhookManagement } from '@/hooks/use-webhook-management'
 
 const SLACK_OVERRIDES: SelectorOverrides = {
   transformContext: (context, deps) => {
+    // v1 gates on authMethod (raw bot token vs OAuth); v2 has one merged
+    // credential field for actions and customBotCredential for triggers.
     const authMethod = deps.authMethod as string
     const oauthCredential =
       authMethod === 'bot_token'
-        ? String(deps.customBotCredential ?? deps.botToken ?? '')
-        : String(deps.credential ?? deps.customBotCredential ?? deps.triggerCredentials ?? '')
+        ? String(deps.botToken ?? '')
+        : String(deps.credential ?? deps.customBotCredential ?? '')
     return { ...context, oauthCredential }
   },
 }

apps/sim/blocks/blocks/slack.ts

@@ -2627,48 +2627,41 @@ export const SlackBlockMeta = {
   ],
 } as const satisfies BlockMeta
 
-/**
- * Custom Bot picker used by slack_v2 in place of v1's raw bot-token field — a
- * canonical basic/advanced pair (dropdown + manual credential-ID paste),
- * mirroring the OAuth `credential`/`manualCredential` pair.
- */
-const SLACK_CUSTOM_BOT_SUBBLOCKS: SubBlockConfig[] = [
-  {
-    id: 'customBotCredential',
-    title: 'Slack Bot',
-    type: 'oauth-input',
-    canonicalParamId: 'botCredential',
-    mode: 'basic',
-    serviceId: 'slack',
-    credentialKind: 'custom-bot',
-    requiredScopes: getScopesForService('slack'),
-    placeholder: 'Select a connected bot',
-    dependsOn: ['authMethod'],
-    condition: { field: 'authMethod', value: 'bot_token' },
-    required: true,
-  },
-  {
-    id: 'manualCustomBotCredential',
-    title: 'Bot Credential ID',
-    type: 'short-input',
-    canonicalParamId: 'botCredential',
-    mode: 'advanced',
-    placeholder: 'Enter bot credential ID',
-    dependsOn: ['authMethod'],
-    condition: { field: 'authMethod', value: 'bot_token' },
-    required: true,
-  },
-]
-
 const SLACK_WEBHOOK_TRIGGER_SUBBLOCK_IDS = new Set(
   getTrigger('slack_webhook').subBlocks.map((sb) => sb.id)
 )
 
+/**
+ * Adapts a v1 subblock for slack_v2's merged credential picker: fields gated on
+ * the removed `authMethod` dropdown now depend on the single `credential` field.
+ */
+function adaptSubBlockForV2(sb: SubBlockConfig): SubBlockConfig {
+  const { dependsOn, condition, ...rest } = sb
+  if (sb.id === 'credential') {
+    return { ...rest, credentialKind: 'any', placeholder: 'Select Slack account or bot' }
+  }
+  if (sb.id === 'manualCredential') {
+    return { ...rest, placeholder: 'Enter credential ID' }
+  }
+  if (dependsOn && !Array.isArray(dependsOn) && dependsOn.all?.includes('authMethod')) {
+    return { ...sb, dependsOn: ['credential'] }
+  }
+  return sb
+}
+
+const {
+  authMethod: _authMethod,
+  botToken: _botToken,
+  botCredential: _botCredential,
+  ...slackV2Inputs
+} = SlackBlock.inputs
+
 /**
  * slack_v2 — the go-forward Slack action block. Identical operations, tools, and
- * outputs to v1 (shared by reference), but the "Custom Bot" auth method selects
- * a reusable bot credential set up once, instead of pasting a raw token. Also
- * hosts the redesigned slack_oauth trigger (v1 keeps the legacy slack_webhook).
+ * outputs to v1 (shared by reference), but auth is a single credential picker
+ * listing Sim OAuth accounts and reusable custom bots together — the credential's
+ * kind is resolved server-side, so no auth-method choice is needed. Also hosts
+ * the redesigned slack_oauth trigger (v1 keeps the legacy slack_webhook).
  */
 export const SlackV2Block: BlockConfig<SlackResponse> = {
   ...SlackBlock,
@@ -2683,13 +2676,18 @@ export const SlackV2Block: BlockConfig<SlackResponse> = {
     ...SlackBlock.subBlocks.flatMap((sb) => {
       // Drop the legacy paste-secret trigger config (v1 hosts slack_webhook)
       // and v1's raw bot-token auth field — the trigger set includes an
-      // id-colliding 'botToken', so the set check covers both.
+      // id-colliding 'botToken', so the set check covers both. The authMethod
+      // dropdown is gone: the merged credential picker covers both auth kinds.
       if (SLACK_WEBHOOK_TRIGGER_SUBBLOCK_IDS.has(sb.id)) return []
-      if (sb.id === 'authMethod') return [sb, ...SLACK_CUSTOM_BOT_SUBBLOCKS]
-      return [sb]
+      if (sb.id === 'authMethod') return []
+      return [adaptSubBlockForV2(sb)]
     }),
     ...getTrigger('slack_oauth').subBlocks,
   ],
+  inputs: {
+    ...slackV2Inputs,
+    oauthCredential: { type: 'string', description: 'Slack credential (OAuth account or bot)' },
+  },
   triggers: {
     enabled: true,
     available: ['slack_oauth'],

apps/sim/blocks/types.ts

@@ -372,9 +372,10 @@ export interface SubBlockConfig {
    * connect row opens the custom-bot setup modal instead of the OAuth flow.
    * `'service-account'` is the generic equivalent for a no-OAuth provider: it lists
    * only service-account credentials and its connect row opens the descriptor-driven
-   * token-paste modal (`ConnectServiceAccountModal`).
+   * token-paste modal (`ConnectServiceAccountModal`). `'any'` lists OAuth accounts
+   * and custom bots together in a grouped dropdown with a connect action for each kind.
    */
-  credentialKind?: 'custom-bot' | 'service-account'
+  credentialKind?: 'custom-bot' | 'service-account' | 'any'
   /**
    * Opts a trigger-mode `oauth-input` selector into listing service-account
    * credentials, which are otherwise excluded in trigger mode. Set only when the

apps/sim/lib/webhooks/deploy.test.ts

@@ -62,6 +62,23 @@ const tableTrigger = trigger([
   { id: 'manualTableId', mode: 'trigger-advanced', canonicalParamId: 'tableId', required: true },
 ])
 
+const slackTrigger = trigger([
+  { id: 'eventType', mode: 'trigger', required: true },
+  {
+    id: 'customBotCredential',
+    mode: 'trigger',
+    canonicalParamId: 'botCredential',
+    serviceId: 'slack',
+    required: true,
+  },
+  {
+    id: 'manualBotCredential',
+    mode: 'trigger-advanced',
+    canonicalParamId: 'botCredential',
+    required: true,
+  },
+])
+
 function makeBlock(
   type: string,
   subBlockValues: Record<string, unknown>,
@@ -155,6 +172,28 @@ describe('buildProviderConfig canonical collapse', () => {
     const { providerConfig } = buildProviderConfig(block, 'table_new_row', tableTrigger)
     expect(providerConfig.tableId).toBe('ACTIVE')
   })
+
+  it('collapses the slack bot credential pair under botCredential for the routing branch', () => {
+    const block = makeBlock('slack_v2', {
+      eventType: 'message',
+      customBotCredential: 'cred_bot_1',
+    })
+    const result = buildProviderConfig(block, 'slack_oauth', slackTrigger)
+
+    expect(result.providerConfig.botCredential).toBe('cred_bot_1')
+    expect(result.providerConfig.eventType).toBe('message')
+    // The slack trigger has no generic triggerCredentials field — the routing
+    // branch resolves botCredential itself.
+    expect(result.credentialReference).toBeUndefined()
+    expect(result.credentialServiceId).toBeUndefined()
+  })
+
+  it('reports a missing required slack bot credential as a missing field', () => {
+    const block = makeBlock('slack_v2', { eventType: 'message' })
+    const result = buildProviderConfig(block, 'slack_oauth', slackTrigger)
+
+    expect(result.missingFields.length).toBeGreaterThan(0)
+  })
 })
 
 describe('resolveTriggerCredentialId', () => {