feat(integrations): operations list above templates on integration detail page

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx

@@ -1,13 +1,14 @@
 'use client'
 
+import { type ReactNode, useMemo } from 'react'
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { ChipLink } from '@/components/emcn'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
 import { cn } from '@/lib/core/utils/cn'
 import { blockTypeToIconMap, type Integration } from '@/lib/integrations'
 import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
-import { getTemplatesForBlock, type ScopedBlockTemplate } from '@/blocks/registry'
+import { getBlock, getTemplatesForBlock, type ScopedBlockTemplate } from '@/blocks/registry'
 
 /** Maximum number of overlapping icon tiles rendered per template row. */
 const TEMPLATE_CLUSTER_MAX = 3 as const
@@ -26,6 +27,7 @@ interface IntegrationBlockDetailProps {
 export function IntegrationBlockDetail({ integration, workspaceId }: IntegrationBlockDetailProps) {
   const Icon = blockTypeToIconMap[integration.type]
   const matchingTemplates = getTemplatesForBlock(integration.type)
+  const operations = useMemo(() => getBlockOperations(integration.type), [integration.type])
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
@@ -53,6 +55,10 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
             </div>
           </div>
 
+          {operations.length > 0 && (
+            <OperationsSection integration={integration} operations={operations} />
+          )}
+
           {matchingTemplates.length > 0 && (
             <TemplatesSection
               integration={integration}
@@ -66,6 +72,54 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
   )
 }
 
+interface IntegrationRowProps {
+  leftIcon: ReactNode
+  title: string
+  subtitle?: string
+  onClick?: () => void
+}
+
+/**
+ * Shared row primitive for the integration detail page's "Operations" and
+ * "Templates" sections. Layout is identical in both modes — same `p-2`,
+ * `gap-2.5`, same title typography (`text-[14px] text-[var(--text-body)]`) so
+ * row heights line up regardless of whether a subtitle is present (the
+ * 36px-tall `IntegrationTile` icon sets the minimum height).
+ *
+ * Interactive mode (when `onClick` is supplied) renders a `<button>` with a
+ * `group` class enabling hover-state coordination with child icons, a
+ * `hover-hover:` background, and a trailing `ArrowRight`. Read-only mode
+ * renders a plain `<div>` with no hover affordance and no trailing chevron.
+ */
+function IntegrationRow({ leftIcon, title, subtitle, onClick }: IntegrationRowProps) {
+  const content = (
+    <>
+      {leftIcon}
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <span className='truncate text-[14px] text-[var(--text-body)]'>{title}</span>
+        {subtitle ? (
+          <span className='truncate text-[12px] text-[var(--text-muted)]'>{subtitle}</span>
+        ) : null}
+      </div>
+      {onClick ? <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' /> : null}
+    </>
+  )
+
+  if (onClick) {
+    return (
+      <button
+        type='button'
+        onClick={onClick}
+        className='group flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return <div className='flex items-center gap-2.5 rounded-lg p-2'>{content}</div>
+}
+
 interface TemplatesSectionProps {
   integration: Integration
   templates: readonly ScopedBlockTemplate[]
@@ -91,12 +145,12 @@ function TemplatesSection({ integration, templates, workspaceId }: TemplatesSect
             TEMPLATE_CLUSTER_MAX
           )
           return (
-            <TemplateRow
+            <IntegrationRow
               key={template.title}
-              blockTypes={blockTypes}
+              leftIcon={<TemplateIcons blockTypes={blockTypes} />}
               title={template.title}
-              prompt={template.prompt}
-              onSelect={handleSelect}
+              subtitle={template.prompt}
+              onClick={() => handleSelect(template.prompt)}
             />
           )
         })}
@@ -105,36 +159,6 @@ function TemplatesSection({ integration, templates, workspaceId }: TemplatesSect
   )
 }
 
-interface TemplateRowProps {
-  blockTypes: string[]
-  title: string
-  prompt: string
-  onSelect: (prompt: string) => void
-}
-
-/**
- * Template row that mirrors `IntegrationItem` from the integrations index
- * byte-for-byte (icon cluster · title · description · trailing `ArrowRight`).
- * Renders as a `<button>` because click seeds the home page chat with `prompt`
- * and navigates to the workspace home, matching the `ShowcaseWithExplore` flow.
- */
-function TemplateRow({ blockTypes, title, prompt, onSelect }: TemplateRowProps) {
-  return (
-    <button
-      type='button'
-      onClick={() => onSelect(prompt)}
-      className='group flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-    >
-      <TemplateIcons blockTypes={blockTypes} />
-      <div className='flex min-w-0 flex-1 flex-col'>
-        <span className='truncate text-[14px] text-[var(--text-body)]'>{title}</span>
-        <span className='truncate text-[12px] text-[var(--text-muted)]'>{prompt}</span>
-      </div>
-      <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
-    </button>
-  )
-}
-
 interface TemplateIconsProps {
   blockTypes: string[]
 }
@@ -177,3 +201,69 @@ function TemplateIcons({ blockTypes }: TemplateIconsProps) {
     </span>
   )
 }
+
+interface OperationOption {
+  label: string
+  id: string
+}
+
+/**
+ * Extracts the operation list from a block's `subBlocks`. Looks for a dropdown
+ * subBlock with `id === 'operation'` and returns its `options` flattened to
+ * `{ label, id }`. Supports both static array `options` and function `options`,
+ * filters out entries marked `hidden`. Returns an empty array when the block
+ * has no operation selector or no visible options.
+ */
+function getBlockOperations(blockType: string): OperationOption[] {
+  const block = getBlock(blockType)
+  if (!block) return []
+  const operationSubBlock = block.subBlocks.find(
+    (sb) => sb.id === 'operation' && sb.type === 'dropdown'
+  )
+  if (!operationSubBlock?.options) return []
+  const rawOptions =
+    typeof operationSubBlock.options === 'function'
+      ? operationSubBlock.options()
+      : operationSubBlock.options
+  return rawOptions
+    .filter((option) => !option.hidden)
+    .map((option) => ({ label: option.label, id: option.id }))
+}
+
+interface OperationsSectionProps {
+  integration: Integration
+  operations: OperationOption[]
+}
+
+/**
+ * Lists every operation exposed by the block's `operation` subBlock. Mirrors
+ * `TemplatesSection`'s heading, divider, and outer spacing so the two sections
+ * stack uniformly on the detail page. Each row reuses the same
+ * `IntegrationRow` primitive as templates with no `onClick` and a single
+ * `IntegrationTile` icon — no cluster, no chevron, no hover state.
+ */
+function OperationsSection({ integration, operations }: OperationsSectionProps) {
+  const Icon = blockTypeToIconMap[integration.type]
+  const leftIcon = Icon ? (
+    <IntegrationTile blockType={integration.type} icon={Icon} />
+  ) : (
+    <div
+      className='flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)] text-white'
+      style={{ background: integration.bgColor }}
+    >
+      {integration.name.charAt(0)}
+    </div>
+  )
+
+  return (
+    <section className='flex flex-col'>
+      <span className='pl-0.5 text-[var(--text-muted)] text-small'>Operations</span>
+      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+      <div className='-mx-2 flex flex-col gap-y-0.5'>
+        {operations.map((operation) => (
+          <IntegrationRow key={operation.id} leftIcon={leftIcon} title={operation.label} />
+        ))}
+      </div>
+    </section>
+  )
+}