mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-20 16:02:19 +00:00
Guilhem
3b5c1657c7
* separate flow and status with splitpane * fix autoscroll behavior * Flow log viewer nit * not graph viewer * Improve flow job result * Create job detail header to replace metadata * Remove FlowPreviewResult * Create compact job header * Use job header in runs page * Improve runs page run preview * Use flow header in detail section * Show logs for script steps * Clean old schedule status * Limit result height * Script run detail improvement * Script run preview improvement * Fix csv table overflow * surface tertiary as background for Inputs * nit * Improve runs detail skeleton * fix check * nit * Improve node definition * fix flow module component overflow * Use component DataTable for flow schema viewer * Add language icon to step detail * improve run header * Improve Job detail header * nit * restore isOwner logic * Handle resume flows * restore execution status in run preview * restore flow execution status in the preview * flow preview, add status bar * nit module status * nit * Remove flor preview result * nit * nit * fix flow result card * nit * nit * nit * improve field selection on runs detail based on job type * Improve column layout * create JobStatusIcon component * remove job status badge icons * improve compact version * use shared job field display * improve job detail field display * fix badge alignment * increase padding * nit * nit * improve compact display * make background darker for metadata * use auto layout * fix auto layout * improve display * fix truncate logic * fix compact * improve flex adaptibility * improve responsive layout * improve extra compact header * nit * remove unused icons * nit * Improve flow result display * nit * merge progressbar and execution status * handle canceled flow better
93 lines
1.9 KiB
Svelte
93 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { twMerge } from 'tailwind-merge'
|
|
import { ChevronDown, ChevronRight } from 'lucide-svelte'
|
|
|
|
interface Props {
|
|
id: string
|
|
isCollapsible: boolean
|
|
isRunning?: boolean
|
|
isCurrent: (id: string) => boolean
|
|
isExpanded: (id: string, isRunning?: boolean) => boolean
|
|
toggleExpanded: (id: string) => void
|
|
children: import('svelte').Snippet
|
|
label: import('svelte').Snippet
|
|
class?: string
|
|
select: (id: string) => void
|
|
}
|
|
|
|
let {
|
|
id,
|
|
isCollapsible,
|
|
isRunning,
|
|
isCurrent,
|
|
isExpanded,
|
|
toggleExpanded,
|
|
children,
|
|
label,
|
|
class: className = '',
|
|
select
|
|
}: Props = $props()
|
|
|
|
function handleClick() {
|
|
if (isCollapsible) {
|
|
toggleExpanded(id)
|
|
}
|
|
select(id)
|
|
}
|
|
</script>
|
|
|
|
<li
|
|
class={twMerge(
|
|
'border-b flex flex-col',
|
|
isCurrent(id) ? 'border-l-2 !border-l-gray-400 -ml-[2px]' : ''
|
|
)}
|
|
>
|
|
<button
|
|
class={twMerge(
|
|
'py-1 leading-tight w-full flex items-center justify-left text-xs text-primary hover:text-primary hover:bg-surface-hover ',
|
|
isCurrent(id) ? 'bg-surface-hover text-primary' : '',
|
|
className
|
|
)}
|
|
tabindex="-1"
|
|
onclick={handleClick}
|
|
data-nav-id={id}
|
|
>
|
|
<div class="px-1">
|
|
{#if isCollapsible}
|
|
{#if isExpanded(id, isRunning) || id === 'root-flow'}
|
|
<ChevronDown size={8} strokeWidth={isCurrent(id) ? 4 : 2} />
|
|
{:else}
|
|
<ChevronRight size={8} strokeWidth={isCurrent(id) ? 4 : 2} />
|
|
{/if}
|
|
{:else}
|
|
<!-- Empty subflow - no collapse button, just spacing -->
|
|
<div class="w-2"></div>
|
|
{/if}
|
|
</div>
|
|
<div class="w-full leading-tight">
|
|
<div class="w-full pr-2 cursor-pointer">
|
|
{@render label()}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
{#if isExpanded(id, isRunning) || !isCollapsible}
|
|
<div class="my-1 transition-all duration-200 ease-in-out">
|
|
<div class="pl-4">
|
|
{@render children()}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</li>
|
|
|
|
<style>
|
|
.transition-all {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
[data-nav-id]:focus-visible {
|
|
outline: none;
|
|
outline-offset: 0;
|
|
}
|
|
</style>
|