Skip to content

Commit 3e6c870

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
improvement(ui): share workflow preview actions
1 parent 9c2953d commit 3e6c870

4 files changed

Lines changed: 67 additions & 62 deletions

File tree

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

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ import {
1313
Loader,
1414
OverflowText,
1515
Switch,
16-
Tooltip,
1716
toast,
1817
} from '@sim/emcn'
1918
import { ArrowLeft, SquareArrowUpRight, X } from '@sim/emcn/icons'
2019
import { toError } from '@sim/utils/errors'
2120
import { generateId } from '@sim/utils/id'
21+
import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
2222
import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
2323
import type {
2424
AddWorkflowGroupBodyInput,
@@ -711,27 +711,18 @@ export function WorkflowSidebarBody({
711711
/>
712712
</div>
713713
{!isEnrichment && (
714-
<Tooltip.Root>
715-
<Tooltip.Trigger asChild>
716-
<Button
717-
aria-label='Open workflow'
718-
type='button'
719-
variant='ghost'
720-
onClick={() =>
721-
window.open(
722-
`/workspace/${workspaceId}/w/${selectedWorkflowId}`,
723-
'_blank',
724-
'noopener,noreferrer'
725-
)
726-
}
727-
iconSize='compact-fixed'
728-
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)]'
729-
>
730-
<SquareArrowUpRight className='size-[12px]' />
731-
</Button>
732-
</Tooltip.Trigger>
733-
<Tooltip.Content side='top'>Open workflow</Tooltip.Content>
734-
</Tooltip.Root>
714+
<WorkflowPreviewAction
715+
aria-label='Open workflow'
716+
onClick={() =>
717+
window.open(
718+
`/workspace/${workspaceId}/w/${selectedWorkflowId}`,
719+
'_blank',
720+
'noopener,noreferrer'
721+
)
722+
}
723+
>
724+
<SquareArrowUpRight className='size-[12px]' />
725+
</WorkflowPreviewAction>
735726
)}
736727
</>
737728
) : (

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { useParams } from 'next/navigation'
2424
import { usePostHog } from 'posthog-js/react'
2525
import { useShallow } from 'zustand/react/shallow'
2626
import { useStoreWithEqualityFn } from 'zustand/traditional'
27+
import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
2728
import { isMcpRuntimeReference } from '@/lib/mcp/operation-policy'
2829
import { resolveMcpBlockConfig } from '@/lib/mcp/workflow-config'
2930
import { captureEvent } from '@/lib/posthog/client'
@@ -610,21 +611,12 @@ export function Editor() {
610611
lightweight
611612
/>
612613
</div>
613-
<Tooltip.Root>
614-
<Tooltip.Trigger asChild>
615-
<Button
616-
aria-label='Open workflow'
617-
type='button'
618-
variant='ghost'
619-
onClick={handleOpenChildWorkflow}
620-
iconSize='compact-fixed'
621-
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)]'
622-
>
623-
<SquareArrowUpRight className='size-[12px]' />
624-
</Button>
625-
</Tooltip.Trigger>
626-
<Tooltip.Content side='top'>Open workflow</Tooltip.Content>
627-
</Tooltip.Root>
614+
<WorkflowPreviewAction
615+
aria-label='Open workflow'
616+
onClick={handleOpenChildWorkflow}
617+
>
618+
<SquareArrowUpRight className='size-[12px]' />
619+
</WorkflowPreviewAction>
628620
</>
629621
) : (
630622
<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‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
import { formatDuration } from '@sim/utils/formatting'
3131
import { ReactFlowProvider } from '@xyflow/react'
3232
import { useParams } from 'next/navigation'
33+
import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
3334
import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
3435
import {
3536
buildCanonicalIndexForSurface,
@@ -1380,31 +1381,18 @@ function PreviewEditorContent({
13801381
cursorStyle='grab'
13811382
/>
13821383
</div>
1383-
<Tooltip.Root>
1384-
<Tooltip.Trigger asChild>
1385-
<Button
1386-
aria-label={
1387-
isExecutionMode && onDrillDown
1388-
? 'Expand workflow'
1389-
: 'Open in new tab'
1390-
}
1391-
type='button'
1392-
variant='ghost'
1393-
onClick={handleExpandChildWorkflow}
1394-
iconSize='compact-fixed'
1395-
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)]'
1396-
>
1397-
{isExecutionMode && onDrillDown ? (
1398-
<Expand className='size-[12px]' />
1399-
) : (
1400-
<SquareArrowUpRight className='size-[12px]' />
1401-
)}
1402-
</Button>
1403-
</Tooltip.Trigger>
1404-
<Tooltip.Content side='top'>
1405-
{isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'}
1406-
</Tooltip.Content>
1407-
</Tooltip.Root>
1384+
<WorkflowPreviewAction
1385+
aria-label={
1386+
isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'
1387+
}
1388+
onClick={handleExpandChildWorkflow}
1389+
>
1390+
{isExecutionMode && onDrillDown ? (
1391+
<Expand className='size-[12px]' />
1392+
) : (
1393+
<SquareArrowUpRight className='size-[12px]' />
1394+
)}
1395+
</WorkflowPreviewAction>
14081396
</>
14091397
) : (
14101398
<div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use client'
2+
3+
import { type ComponentProps, forwardRef } from 'react'
4+
import { Button, Tooltip } from '@sim/emcn'
5+
6+
interface WorkflowPreviewActionProps
7+
extends Omit<
8+
ComponentProps<typeof Button>,
9+
'variant' | 'size' | 'iconSize' | 'iconPadding' | 'type' | 'className'
10+
> {
11+
'aria-label': string
12+
}
13+
14+
/** Solid corner action shared by embedded workflow previews. */
15+
export const WorkflowPreviewAction = forwardRef<HTMLButtonElement, WorkflowPreviewActionProps>(
16+
({ 'aria-label': label, ...props }, ref) => (
17+
<Tooltip.Root>
18+
<Tooltip.Trigger asChild>
19+
<Button
20+
{...props}
21+
ref={ref}
22+
type='button'
23+
aria-label={label}
24+
variant='ghost'
25+
iconSize='compact-fixed'
26+
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)]'
27+
/>
28+
</Tooltip.Trigger>
29+
<Tooltip.Content side='top'>{label}</Tooltip.Content>
30+
</Tooltip.Root>
31+
)
32+
)
33+
34+
WorkflowPreviewAction.displayName = 'WorkflowPreviewAction'

0 commit comments

Comments
 (0)