feat(ui): Add slack manifest generator (#4237)

* feat(slack): add manifest copying

* Try using wizard modal

* clean up modal

* feat(ui): Add wizard emcn component

* Made modal subblock more generic

* Fix test

* Address greptile comments

* fix handle copy behavior

* Add secret input emcn type

* Lint code

Author: TheodoreSpeaks

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

@@ -1,48 +1,56 @@
-import { Checkbox, Label } from '@/components/emcn'
+import { Info } from 'lucide-react'
+import { Checkbox, Label, Tooltip } from '@/components/emcn'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 
+interface CheckboxListOption {
+  label: string
+  id: string
+  defaultChecked?: boolean
+  description?: string
+}
+
 interface CheckboxListProps {
   blockId: string
-  subBlockId: string
-  title: string
-  options: { label: string; id: string }[]
+  options: CheckboxListOption[]
   isPreview?: boolean
   subBlockValues?: Record<string, any>
   disabled?: boolean
 }
 
 interface CheckboxItemProps {
   blockId: string
-  option: { label: string; id: string }
+  option: CheckboxListOption
   isPreview: boolean
   subBlockValues?: Record<string, any>
   disabled: boolean
 }
 
 /**
- * Individual checkbox item component that calls useSubBlockValue hook at top level
+ * Individual checkbox item component that calls useSubBlockValue hook at top level.
+ *
+ * @remarks
+ * A `null` store value means the user has never toggled the checkbox, in which
+ * case we fall back to `option.defaultChecked` for the displayed state. Any
+ * explicit boolean (including `false`) takes precedence over the default.
  */
 function CheckboxItem({ blockId, option, isPreview, subBlockValues, disabled }: CheckboxItemProps) {
-  const [storeValue, setStoreValue] = useSubBlockValue(blockId, option.id)
+  const [storeValue, setStoreValue] = useSubBlockValue<boolean>(blockId, option.id)
 
-  // Get preview value for this specific option
   const previewValue = isPreview && subBlockValues ? subBlockValues[option.id]?.value : undefined
-
-  // Use preview value when in preview mode, otherwise use store value
-  const value = isPreview ? previewValue : storeValue
+  const rawValue = isPreview ? previewValue : storeValue
+  const effectiveValue = rawValue ?? option.defaultChecked ?? false
 
   const handleChange = (checked: boolean) => {
-    // Only update store when not in preview mode or disabled
     if (!isPreview && !disabled) {
       setStoreValue(checked)
     }
   }
 
   return (
-    <div className='flex items-center space-x-2'>
+    <div className='flex items-center gap-2'>
       <Checkbox
         id={`${blockId}-${option.id}`}
-        checked={Boolean(value)}
+        checked={Boolean(effectiveValue)}
         onCheckedChange={handleChange}
         disabled={isPreview || disabled}
       />
@@ -52,21 +60,29 @@ function CheckboxItem({ blockId, option, isPreview, subBlockValues, disabled }:
       >
         {option.label}
       </Label>
+      {option.description && (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Info className='h-[14px] w-[14px] cursor-default text-[var(--text-muted)]' />
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top' align='start' className='max-w-xs'>
+            <p>{option.description}</p>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      )}
     </div>
   )
 }
 
 export function CheckboxList({
   blockId,
-  subBlockId,
-  title,
   options,
   isPreview = false,
   subBlockValues,
   disabled = false,
 }: CheckboxListProps) {
   return (
-    <div className='grid grid-cols-1 gap-4 pt-1'>
+    <div className='flex flex-col gap-y-2.5 pt-1'>
       {options.map((option) => (
         <CheckboxItem
           key={option.id}

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/index.ts

@@ -0,0 +1 @@
+export { SlackSetupWizard } from './slack-setup-wizard'