Made modal subblock more generic

Author: TheodoreSpeaks

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

@@ -22,7 +22,6 @@ export { ScheduleInfo } from './schedule-info/schedule-info'
 export { SelectorInput, type SelectorOverrides } from './selector-input/selector-input'
 export { ShortInput } from './short-input/short-input'
 export { SkillInput } from './skill-input/skill-input'
-export { SlackSetupWizard } from './slack-setup-wizard/slack-setup-wizard'
 export { SliderInput } from './slider-input/slider-input'
 export { SortBuilder } from './sort-builder/sort-builder'
 export { InputFormat } from './starter/input-format'

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

@@ -0,0 +1,29 @@
+import type { ComponentType } from 'react'
+import { SlackSetupWizard } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard'
+
+/**
+ * Props every `type: 'modal'` sub-block component must accept. The sub-block
+ * dispatcher passes these through from the surrounding editor shell.
+ */
+export interface ModalSubBlockProps {
+  blockId: string
+  isPreview?: boolean
+  disabled?: boolean
+}
+
+/**
+ * Registry of available modal sub-block components keyed by the `modalId`
+ * string that trigger / block configs pass in their `SubBlockConfig`.
+ *
+ * @remarks
+ * Adding a new modal sub-block is two lines: import the component, then
+ * register it under a unique id. The id travels through config and
+ * persistence as a plain string, so nothing here leaks into serialization.
+ * Keep this file client-only — it imports React components and must not be
+ * pulled into trigger / block config modules.
+ */
+export const MODAL_REGISTRY: Readonly<Record<string, ComponentType<ModalSubBlockProps>>> = {
+  'slack-setup-wizard': SlackSetupWizard,
+}
+
+export type ModalId = keyof typeof MODAL_REGISTRY

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

@@ -339,23 +339,14 @@ function StepSecret({ blockId, value, onChange, disabled }: StepSecretProps) {
         </SubStep>
         <SubStep n={3}>Paste it into the field below.</SubStep>
       </SubStepList>
-      <div className='space-y-1.5'>
-        <Label
-          htmlFor={`${blockId}-wizard-signing-secret`}
-          className='font-medium text-[var(--text-secondary)] text-xs'
-        >
-          Signing Secret
-        </Label>
-        <Input
-          id={`${blockId}-wizard-signing-secret`}
-          type='password'
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          placeholder='Paste your signing secret'
-          className='h-9 text-sm'
-        />
-      </div>
+      <SecretInput
+        id={`${blockId}-wizard-signing-secret`}
+        label='Signing Secret'
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        placeholder='Paste your signing secret'
+      />
     </div>
   )
 }
@@ -380,23 +371,53 @@ function StepToken({ blockId, value, onChange, disabled }: StepTokenProps) {
         </SubStep>
         <SubStep n={3}>Paste it into the field below.</SubStep>
       </SubStepList>
-      <div className='space-y-1.5'>
-        <Label
-          htmlFor={`${blockId}-wizard-bot-token`}
-          className='font-medium text-[var(--text-secondary)] text-xs'
-        >
-          Bot Token
-        </Label>
-        <Input
-          id={`${blockId}-wizard-bot-token`}
-          type='password'
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          placeholder='xoxb-...'
-          className='h-9 text-sm'
-        />
-      </div>
+      <SecretInput
+        id={`${blockId}-wizard-bot-token`}
+        label='Bot Token'
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        placeholder='xoxb-...'
+      />
+    </div>
+  )
+}
+
+interface SecretInputProps {
+  id: string
+  label: string
+  value: string
+  onChange: (next: string) => void
+  disabled: boolean
+  placeholder?: string
+}
+
+/**
+ * Password-style input that masks its value with bullets only while the
+ * field is unfocused. Typing, pasting, and selection all see the real text
+ * so users can verify what they just pasted before clicking Next.
+ */
+function SecretInput({ id, label, value, onChange, disabled, placeholder }: SecretInputProps) {
+  const [isFocused, setIsFocused] = useState<boolean>(false)
+  const displayValue = isFocused ? value : '•'.repeat(value.length)
+
+  return (
+    <div className='space-y-1.5'>
+      <Label htmlFor={id} className='font-medium text-[var(--text-secondary)] text-xs'>
+        {label}
+      </Label>
+      <Input
+        id={id}
+        type='text'
+        value={displayValue}
+        onChange={(e) => onChange(e.target.value)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        disabled={disabled}
+        placeholder={placeholder}
+        autoComplete='off'
+        className='h-9 text-sm'
+      />
     </div>
   )
 }

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

@@ -39,7 +39,6 @@ import {
   type SelectorOverrides,
   ShortInput,
   SkillInput,
-  SlackSetupWizard,
   SliderInput,
   SortBuilder,
   Switch,
@@ -51,6 +50,7 @@ import {
   VariablesInput,
   WorkflowSelectorInput,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components'
+import { MODAL_REGISTRY } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/modal-registry'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useWebhookManagement } from '@/hooks/use-webhook-management'
@@ -1137,8 +1137,17 @@ function SubBlockComponent({
             }
           />
         )
-      case 'slack-setup-wizard':
-        return <SlackSetupWizard blockId={blockId} isPreview={isPreview} disabled={isDisabled} />
+      case 'modal': {
+        const ModalComponent = config.modalId ? MODAL_REGISTRY[config.modalId] : undefined
+        if (!ModalComponent) {
+          return (
+            <div className='text-[var(--text-error)] text-sm'>
+              Unknown modal: {String(config.modalId)}
+            </div>
+          )
+        }
+        return <ModalComponent blockId={blockId} isPreview={isPreview} disabled={isDisabled} />
+      }
       case 'messages-input':
         return (
           <MessagesInput

apps/sim/blocks/types.ts

@@ -162,7 +162,7 @@ export type SubBlockType =
   | 'text' // Read-only text display
   | 'router-input' // Router route definitions with descriptions
   | 'table-selector' // Table selector with link to view table
-  | 'slack-setup-wizard' // Slack app setup wizard (manifest + credentials) in a modal
+  | 'modal' // Launches a modal component resolved via the client-side modal registry
 
 /**
  * Selector types that require display name hydration
@@ -330,6 +330,7 @@ export interface SubBlockConfig {
   hideWhenEnvSet?: string // Hide this subblock when the named NEXT_PUBLIC_ env var is truthy
   description?: string
   tooltip?: string // Tooltip text displayed via info icon next to the title
+  modalId?: string // Registry key when type is 'modal'; see sub-block/components/modal-registry.ts
   value?: (params: Record<string, any>) => string
   grouped?: boolean
   scrollable?: boolean

apps/sim/triggers/slack/capabilities.ts

@@ -68,18 +68,10 @@ export const SLACK_CAPABILITIES: readonly SlackCapability[] = [
     events: ['message.groups'],
   },
   {
-    id: 'trigger_public_channel_reaction',
-    label: 'Public channel reaction',
-    description: 'Trigger when emoji reactions are added or removed in public channels.',
-    defaultChecked: true,
-    group: 'trigger',
-    scopes: ['reactions:read'],
-    events: ['reaction_added', 'reaction_removed'],
-  },
-  {
-    id: 'trigger_any_reaction',
-    label: 'Reaction (any channel)',
-    description: 'Trigger on any emoji reaction your bot can see — public or private.',
+    id: 'trigger_reaction',
+    label: 'Reaction',
+    description:
+      'Trigger when an emoji reaction is added or removed anywhere the bot can see — public, private, or DM. Slack does not allow restricting the reactions scope by channel type.',
     defaultChecked: true,
     group: 'trigger',
     scopes: ['reactions:read'],
@@ -123,14 +115,6 @@ export const SLACK_CAPABILITIES: readonly SlackCapability[] = [
   },
 ] as const
 
-export const SLACK_TRIGGER_OPTIONS = SLACK_CAPABILITIES.filter((c) => c.group === 'trigger').map(
-  ({ id, label, description, defaultChecked }) => ({ id, label, description, defaultChecked })
-)
-
-export const SLACK_ACTION_OPTIONS = SLACK_CAPABILITIES.filter((c) => c.group === 'action').map(
-  ({ id, label, description, defaultChecked }) => ({ id, label, description, defaultChecked })
-)
-
 const WEBHOOK_URL_PLACEHOLDER = '<deploy workflow to generate webhook URL>'
 
 export interface BuildManifestOptions {

apps/sim/triggers/slack/webhook.ts

@@ -54,7 +54,8 @@ export const slackWebhookTrigger: TriggerConfig = {
     {
       id: 'setupWizard',
       title: 'Slack app setup',
-      type: 'slack-setup-wizard',
+      type: 'modal',
+      modalId: 'slack-setup-wizard',
       description: 'Walk through manifest creation, app install, and pasting credentials.',
       hideFromPreview: true,
       mode: 'trigger',