Skip to content

Commit 4b27c5d

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
improvement(ui): share workflow preview actions
1 parent 9566171 commit 4b27c5d

4 files changed

Lines changed: 64 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
@@ -29,6 +29,7 @@ import {
2929
import { formatDuration } from '@sim/utils/formatting'
3030
import { ReactFlowProvider } from '@xyflow/react'
3131
import { useParams } from 'next/navigation'
32+
import { WorkflowPreviewAction } from '@/components/workflow/workflow-preview-action'
3233
import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
3334
import {
3435
buildCanonicalIndexForSurface,
@@ -1387,31 +1388,18 @@ function PreviewEditorContent({
13871388
cursorStyle='grab'
13881389
/>
13891390
</div>
1390-
<Tooltip.Root>
1391-
<Tooltip.Trigger asChild>
1392-
<Button
1393-
aria-label={
1394-
isExecutionMode && onDrillDown
1395-
? 'Expand workflow'
1396-
: 'Open in new tab'
1397-
}
1398-
type='button'
1399-
variant='ghost'
1400-
onClick={handleExpandChildWorkflow}
1401-
iconSize='compact-fixed'
1402-
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)]'
1403-
>
1404-
{isExecutionMode && onDrillDown ? (
1405-
<Expand className='size-[12px]' />
1406-
) : (
1407-
<SquareArrowUpRight className='size-[12px]' />
1408-
)}
1409-
</Button>
1410-
</Tooltip.Trigger>
1411-
<Tooltip.Content side='top'>
1412-
{isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'}
1413-
</Tooltip.Content>
1414-
</Tooltip.Root>
1391+
<WorkflowPreviewAction
1392+
aria-label={
1393+
isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'
1394+
}
1395+
onClick={handleExpandChildWorkflow}
1396+
>
1397+
{isExecutionMode && onDrillDown ? (
1398+
<Expand className='size-[12px]' />
1399+
) : (
1400+
<SquareArrowUpRight className='size-[12px]' />
1401+
)}
1402+
</WorkflowPreviewAction>
14151403
</>
14161404
) : (
14171405
<div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>

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

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

0 commit comments

Comments
 (0)