improvement(ui): share workflow preview actions

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx

@@ -13,12 +13,12 @@ import {
   Loader,
   OverflowText,
   Switch,
-  Tooltip,
   toast,
 } from '@sim/emcn'
 import { ArrowLeft, SquareArrowUpRight, X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import type {
   AddWorkflowGroupBodyInput,
@@ -711,27 +711,18 @@ export function WorkflowSidebarBody({
                       />
                     </div>
                     {!isEnrichment && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            aria-label='Open workflow'
-                            type='button'
-                            variant='ghost'
-                            onClick={() =>
-                              window.open(
-                                `/workspace/${workspaceId}/w/${selectedWorkflowId}`,
-                                '_blank',
-                                'noopener,noreferrer'
-                              )
-                            }
-                            iconSize='compact-fixed'
-                            className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
-                          >
-                            <SquareArrowUpRight className='size-[12px]' />
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
-                      </Tooltip.Root>
+                      <WorkflowPreviewAction
+                        aria-label='Open workflow'
+                        onClick={() =>
+                          window.open(
+                            `/workspace/${workspaceId}/w/${selectedWorkflowId}`,
+                            '_blank',
+                            'noopener,noreferrer'
+                          )
+                        }
+                      >
+                        <SquareArrowUpRight className='size-[12px]' />
+                      </WorkflowPreviewAction>
                     )}
                   </>
                 ) : (

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

@@ -24,6 +24,7 @@ import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { isMcpRuntimeReference } from '@/lib/mcp/operation-policy'
 import { resolveMcpBlockConfig } from '@/lib/mcp/workflow-config'
 import { captureEvent } from '@/lib/posthog/client'
@@ -610,21 +611,12 @@ export function Editor() {
                                 lightweight
                               />
                             </div>
-                            <Tooltip.Root>
-                              <Tooltip.Trigger asChild>
-                                <Button
-                                  aria-label='Open workflow'
-                                  type='button'
-                                  variant='ghost'
-                                  onClick={handleOpenChildWorkflow}
-                                  iconSize='compact-fixed'
-                                  className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
-                                >
-                                  <SquareArrowUpRight className='size-[12px]' />
-                                </Button>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
-                            </Tooltip.Root>
+                            <WorkflowPreviewAction
+                              aria-label='Open workflow'
+                              onClick={handleOpenChildWorkflow}
+                            >
+                              <SquareArrowUpRight className='size-[12px]' />
+                            </WorkflowPreviewAction>
                           </>
                         ) : (
                           <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx

@@ -30,6 +30,7 @@ import {
 import { formatDuration } from '@sim/utils/formatting'
 import { ReactFlowProvider } from '@xyflow/react'
 import { useParams } from 'next/navigation'
+import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
 import {
   buildCanonicalIndexForSurface,
@@ -1380,31 +1381,18 @@ function PreviewEditorContent({
                             cursorStyle='grab'
                           />
                         </div>
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <Button
-                              aria-label={
-                                isExecutionMode && onDrillDown
-                                  ? 'Expand workflow'
-                                  : 'Open in new tab'
-                              }
-                              type='button'
-                              variant='ghost'
-                              onClick={handleExpandChildWorkflow}
-                              iconSize='compact-fixed'
-                              className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
-                            >
-                              {isExecutionMode && onDrillDown ? (
-                                <Expand className='size-[12px]' />
-                              ) : (
-                                <SquareArrowUpRight className='size-[12px]' />
-                              )}
-                            </Button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content side='top'>
-                            {isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'}
-                          </Tooltip.Content>
-                        </Tooltip.Root>
+                        <WorkflowPreviewAction
+                          aria-label={
+                            isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'
+                          }
+                          onClick={handleExpandChildWorkflow}
+                        >
+                          {isExecutionMode && onDrillDown ? (
+                            <Expand className='size-[12px]' />
+                          ) : (
+                            <SquareArrowUpRight className='size-[12px]' />
+                          )}
+                        </WorkflowPreviewAction>
                       </>
                     ) : (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>

apps/sim/components/workflow/workflow-preview-action.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { type ComponentProps, forwardRef } from 'react'
+import { Button, Tooltip } from '@sim/emcn'
+
+interface WorkflowPreviewActionProps
+  extends Omit<
+    ComponentProps<typeof Button>,
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'type' | 'className'
+  > {
+  'aria-label': string
+}
+
+/** Solid corner action shared by embedded workflow previews. */
+export const WorkflowPreviewAction = forwardRef<HTMLButtonElement, WorkflowPreviewActionProps>(
+  ({ 'aria-label': label, ...props }, ref) => (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          {...props}
+          ref={ref}
+          type='button'
+          aria-label={label}
+          variant='ghost'
+          iconSize='compact-fixed'
+          className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>{label}</Tooltip.Content>
+    </Tooltip.Root>
+  )
+)
+
+WorkflowPreviewAction.displayName = 'WorkflowPreviewAction'