Files
windmill/frontend/src/lib/components/custom_ui.ts
T
GuilhemandClaude Opus 4.8 09c8f3b1f3 feat: redesign flow step, loop and branch settings panels (#10026)
* feat: responsive modal step panel for the flow editor in sessions

On narrow layouts the flow editor's step-details pane opens as a modal
(double-click a graph node) instead of a split pane, with a dock/float
toggle. Scoped to sessions via allowModalPanel; the full-page editor is
unchanged.

- FlowEditor: modal/docked modes gated by mount width + allowModalPanel,
  small header (step-id Badge + subtle dock/close), standing
  double-click hint, and a per-step hint in the name tooltip
- selectionManager: onSelectIntent hook so flow-level panels (settings,
  input, triggers…) open the modal on single click
- PropPickerWrapper: collapse the prop picker until connect and animate
  it in via AnimatedPane (runs-page pattern), no blue connect ring in
  modal mode
- StepInputGen: drop the TAB/Wand autocompletion button + spinner
  (feature still works via focus + Tab)
- InputTransformForm: decouple the Help dropdown from the AI suggestion
- FlowModuleHeader: move 'Save to workspace' into an ellipsis dropdown

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: loop editor rendering and nested splitpanes splitters in the sessions modal

- Loop iterator/parallelism: keep the picker split pane (forceExpanded) so
  the editor fills its box and the picker shows; the collapse-until-connect
  mode stays for the step inputs
- Remove the intrusive AI TAB/Wand autocompletion button from IteratorGen
  (generation still runs headless via focus + Tab)
- Size the iterator connect plug and restyle the loop header/labels/toggles
- Scope the global `.splitter-hidden` splitter-hiding rule to direct children
  so it no longer leaks into nested Splitpanes under the sessions preview

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: redesign flow step advanced settings as a single toggle-first column

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: taller step test pane by default and restyle advanced section titles

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: show flow run-settings params disabled when a setting is toggled off

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: single-column for-loop panel reusing the run-settings accordion

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: single-column while-loop panel reusing the run-settings accordion

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: single-column branch panels reusing the run-settings accordion

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: auto-open modal panel when creating an AI agent tool

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: redesign branch panels with card layout and shared predicate editor

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor: remove per-setting status badges from flow map nodes

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore: sync package-lock after windmill-utils-internal bump

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* style: polish prop-picker plug button and branch panel layouts

* fix: persist skip-if-stopped toggles in early stop settings

* fix: open the step panel modal on demand and cap its width

* fix: restore graph step setting badges, strip panel header chips instead

* feat: docked panel header with detach action and open-details step menu

* feat: width-based panel mode on every surface with inline detach action

* refactor: single source for flow step settings and their defaults

* docs: pin flow editor vocabulary in CONTEXT.md

* fix: open the trigger panel on double click or a specific trigger

* fix: keep module pickers inside their pane and dismissable

* fix: drop the misleading chevron on the MCP tool entry

* fix: resolve flow approvals against the job's workspace, not the nav one

* refactor: derive the approval workspace from the job, not from callers

* fix: restore S3 snippets and gate params while their setting is off

* fix: restore branch mock controls and address review findings

* chore: drop stray debug log from the flow map item

* feat: pinned output section for loop and branch panels

* fix: open the panel for deliberate navigation from the flow header

* perf: mount branch predicate editors on demand

* fix: skip predicate picker previews the previous step's result

* fix: flow-level graph nodes open their panel on a single click

* fix: open the step panel for AI chat selections, not for undo

* chore: drop dead console.log and duplicated modalPanel doc

* fix: re-sync expression editors and scope error-handler settings

* fix: match the failure module exactly and ignore unselectable nodes

* fix: keep concurrency editable, honour module cache_ttl, tighten panel ids

* fix: open panel from indirect selections, use presence for value-driven toggles

* fix: don't open settings on error-handler delete, flush editors on unmount

* fix: guard editor destroy flush, keep retry kind reachable

* refactor: name the run settings panel after the domain vocabulary

* fix: only write editor flushes to the step they belong to

* fix: bind step panels by id so a delete can't retarget editor writes

* fix: don't let the trigger picker's escape close the drawer beneath it

* docs: condense two comments to the constraint they record

* fix: arbitrate escape through the overlay stack instead of deferring to it

* fix: key nested step blocks by identity so anchored bindings can't go stale

* fix: untrack the overlay-stack push and drop the frozen branch binding

* chore: state the escape rationale once, key branch lists, format

* fix: let the topmost overlay own escape instead of the graph

* fix: keep the dynamic-input help box out of static template fields

* fix: restore the graph connect on the for-loop iterator

* fix: end connect mode with the modal and keep it to docked panels

* fix: never enter graph connect mode from the modal panel

* fix: reveal inserted steps, restore editor pane size, unleak the drawer stack

* fix: keep the enable-AI popover reachable in session panes

* feat: add the connect policy and its single armed slot

* refactor: one picker for every expression input

* refactor: route every connect through one armed slot

* fix: give every connect button the same footprint

* fix: keep the connect ring from showing through the button

* fix: keep flow card actions right-aligned beside the detach button

* fix: give the connect ring an opaque ground to mask against

* feat: dock the panel back without reopening it

* feat: dock the panel from the graph control bar

* style: round the graph control bar and size its glyphs

* style: customize the graph controls through their supported api

* style: build the graph control bar from lucide icons

* fix: use the graph's tooltip component in the zoom controls

* style: pad the graph controls and enlarge their glyphs

* style: pad the graph controls and put dock at the bar's end

* refactor: give settings rows the same popover picker as other expressions

* fix: pass the wrapper's pickable properties to nested inputs

* refactor: stack step settings and render every expression through the step input form

* feat: split loop panels into tabs and rework the approval form

* feat: anchor drawers to their host pane and give them a size floor

* fix: mark the loop iterator expression as required

* refactor: badge ee-only toggles instead of a warning line

* fix: flag an empty loop iterator expression as an error

* refactor: pick the early-stop flow status from one toggle group

* fix: keep parallel loops uncapped unless a limit is opted into

* fix: scope the overlay stack to its host and disarm connect on dismissal

* fix: anchor the trigger picker to its host pane

* feat: move diff into the menu when the top bar is narrow

* fix: gate the result logs toggle to the graph popover

* feat: raise the modal-panel breakpoint to 1280

* fix: anchor flow editor popovers and fullscreen to their host pane

* fix: anchor overlays to their host pane and mute them when hidden

* fix: portal hosted modals and menus into the pane they anchor to

* fix: keep non-listening dialogs off the overlay stack

* fix: drop the topmost gate from confirmation dialogs

* fix: silence overlays in a collapsed preview panel

* feat: rework the branch panels with tabs, reordering and add/delete

* refactor: fold the detached-panel chrome into the card header

* fix: give every flow panel a titled card header

* fix: stop the step panel oscillating on an auto-height editor

* feat: consolidate script panel actions and restore branch predicate AI

* fix: restore the logs toggle on the flow result popover

* fix: collapse the idle property picker in modal step panels

* fix: stop the docked pane scrolling alongside its panel

* fix: space the last settings row off the panel bottom

* revert: always show the property picker pane in step panels

* chore: keep the inline script AI button identical to main

* fix: ask for AI input suggestions on click, not on hover

* fix: keep graph connects armed and remount the parallelism input

* style: reveal the predicate AI button on row hover

* style: give branch cards a handle and delete column

* refactor: arbitrate flow overlay escape through Disposable

* fix: give the popover picker its results and re-narrow the EE badge

* docs: correct loopSubset and guard the modal width measurement

* fix: insert picked properties at the cursor in expression inputs

* fix: give the expanded-subflow panel the shared header chrome

* style: rename the suspend setting to Suspend until approval/resume

* feat: open a step's modal when clicking the step already selected

* feat: add an auto/attached/detached toggle for the step panel

* refactor: pick the step panel's placement from one named menu

* refactor: keep the panel-mode module's exports to what is consumed

* feat: show each configured setting's value on its badge

* fix: carry the suspend rename into the step settings registry

* docs: name both gestures in the step explore hint

* test: pin where the step panel goes for a given width and preference

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 12:25:25 +02:00

180 lines
5.4 KiB
TypeScript

import type { SupportedLanguage } from '$lib/common'
export type FlowBuilderWhitelabelCustomUi = {
/** Opt out of FlowEditor's `modalPanel` to keep the classic always-docked pane. */
modalPanel?: boolean
topBar?: {
path?: boolean
editablePath?: boolean
export?: boolean
history?: boolean
aiBuilder?: boolean
tutorials?: boolean
diff?: boolean
extraDeployOptions?: boolean
editableSummary?: boolean
settings?: boolean
draft?: boolean
}
settingsPanel?: boolean
settingsTabs?: {
schedule?: boolean
sharedDiretory?: boolean
earlyStop?: boolean
earlyReturn?: boolean
workerGroup?: boolean
concurrency?: boolean
debouncing?: boolean
cache?: boolean
}
triggers?: boolean
flowNode?: boolean
hub?: boolean
hubCode?: boolean
graph?: { aiBuilder?: boolean; dataflow?: boolean }
stepInputs?: { ai?: boolean }
stepAdvancedSettings?: boolean
languages?: (SupportedLanguage | 'docker' | 'bunnative')[]
scriptFork?: boolean
scriptEdit?: boolean
tagEdit?: boolean
editorBar?: EditorBarUi
downloadLogs?: boolean
tagSelectPlaceholder?: string
tagSelectNoLabel?: boolean
tagLabel?: string
aiAgent?: boolean
aiSandbox?: boolean
suggestIntegration?: boolean
suggestScript?: boolean
// Default timeout (in seconds) prefilled when enabling a custom step timeout.
// Defaults to 300 (5 minutes) when unset.
defaultTimeout?: number
}
export type DisplayResultUi = {
disableAiFix?: boolean
disableDownload?: boolean
}
export type PreviewPanelUi = {
disableHistory?: boolean
disableTracing?: boolean
disableTriggerCaptures?: boolean
disableTriggerButton?: boolean
disableJsonView?: boolean
displayResult?: DisplayResultUi
disableVariablePicker?: boolean
disableDownload?: boolean
tagLabel?: string
// Hide the args/SchemaForm pane entirely (use cases where the script
// is known to take no inputs — e.g. the pipeline editor's per-script
// preview). When set, the Test/Cancel button is rendered as a small
// floating affordance at the top-left of the preview area instead of
// inside the (now-absent) args column.
hideArgs?: boolean
// Render the LogPanel's logs/result as a left/right split instead of
// the default top/bottom. Pairs naturally with `hideArgs` when the
// preview area is the full bottom band.
logsResultSideBySide?: boolean
// Number of scripts that subscribe to assets this script writes (via
// `// on s3://…` etc.). When > 0, the Test button is rendered as a
// split: primary action runs just this step (cascade suppressed via
// `_wmill_skip_asset_dispatch`), and a caret exposes "Test + trigger N
// downstream" that lets the asset-dispatch hook fire downstream jobs.
// Undefined or 0 → plain Test button (no cascade UI).
downstreamSubscribers?: number
// Pairs with `hideArgs`: still hide the full args column, but when the
// script actually declares inputs render a compact SchemaForm between
// the floating Test button and the logs/result panel (e.g. a
// partitioned pipeline script that needs a `partition` arg to run).
// No-op when the script has no input properties.
argsAboveLogs?: boolean
// On mount, query the most recent top-level completed job for this
// script's path and load it into the preview pane so users immediately
// see the last run's logs/result instead of an empty panel. Used by the
// asset-graph details pane where selecting a script node should expose
// "what happened the last time this ran". No-op when a test is already
// in progress (we don't clobber a live run).
loadLastRunOnMount?: boolean
// Pipeline-only: when set, the Test split's caret popover gains a "Run
// downstream up to…" entry that calls this, letting the user bound the
// cascade from the script they're editing. Wired by the pipeline details
// pane only when the open script is a valid bounded-run start.
onBoundedRun?: () => void
}
export type EditorBarUi = {
contextVar?: boolean
variable?: boolean
resource?: boolean
reset?: boolean
type?: boolean
assistants?: boolean
multiplayer?: boolean
autoformatting?: boolean
editorSettings?: boolean
vimMode?: boolean
relativeLineNumbers?: boolean
aiGen?: boolean
aiCompletion?: boolean
library?: boolean
useVsCode?: boolean
diffMode?: boolean
s3object?: boolean
database?: boolean
ducklake?: boolean
metrics?: boolean
dataTable?: boolean
debug?: boolean
history?: boolean
saveToWorkspace?: boolean
}
export type EditableSchemaFormUi = {
jsonOnly?: boolean
disableVariablePicker?: boolean
}
export type SettingsPanelMetadataUi = {
languages?: SupportedLanguage[]
disableScriptKind?: boolean
editableSchemaForm?: EditableSchemaFormUi
disableMute?: boolean
disableAiFilling?: boolean
}
export type SettingsPanelUi = {
metadata?: SettingsPanelMetadataUi
disableMetadata?: boolean
disableRuntime?: boolean
disableGeneratedUi?: boolean
disableTriggers?: boolean
}
export type ScriptEditorWhitelabelCustomUi = {
editorBar?: EditorBarUi
previewPanel?: PreviewPanelUi
disableTooltips?: boolean
}
export type ScriptBuilderWhitelabelCustomUi = {
topBar?: {
path?: boolean
editablePath?: boolean
settings?: boolean
extraDeployOptions?: boolean
editableSummary?: boolean
diff?: boolean
tagEdit?: boolean
}
settingsPanel?: SettingsPanelUi
disableTooltips?: boolean
editorBar?: EditorBarUi
previewPanel?: PreviewPanelUi
tagSelectPlaceholder?: string
// Default timeout (in seconds) prefilled when enabling a custom script timeout.
// Defaults to 300 (5 minutes) when unset.
defaultTimeout?: number
}