Commit Graph

3 Commits

Author SHA1 Message Date
Guilhem 032f0c1f8c feat: UX/UI full overhaul to meet new design system 2025-10-22 15:56:36 +00:00
Diego Imbert 72b744c4e1 feat: UX improvements (all inputs)
* Monaco transparent bg

* started improving input transform form

* always show static/f selector

* fix connecting btn changing size

* pretty Fill Inputs button

* ResizeTransitionWrapper

* Prettier TemplateEditor

* prevent double onpointerdown when clicking button to close

* text hint

* force focus border for TemplateEditor

* styling in js mode

* update select style

* fix jittery fake monaco placeholder

* select nits

* aiproviderpicker + nits

* smaller ${...} badge

* no-default-style

* select dropdown slide

* nit

* Refresh button in flow picker quick

* jsonEditor pretty

* ai provider toggle button more

* change resource edit button pos

* ResourcePicker Add and Refresh btn

* fix scrollbar

* Fix FileInput and S3 Arg Input

* fix textarea styling

* nicer refresh button in Test This Step

* fix togglebutton border in darkmode

* rounded nit

* Fix multiselect styling

* Prevent crash when selecting dyn-multiselect

* missing $derived and $state => reactivity issue when switching between DynSelect and DynMultiselect

* forgot $effect.pre

* fix nested objects

* nits

* prettier json toggle and array inputs

* array input nits

* nit

* fix json toggle appearing in fileinputs

* nit

* started updating PropertyEditor

* (stash) fix select dropdown animation teleporting from bottom to top

* nit

* nit

* resize transition in schemaform

* nit

* nit typo

* nit enableFlyTransition

* shadow nit

* small consistency changes

* user setting nit

* resize transition in module preview form

* more space

* nit readability on hover

* DateTimeInput new style

* nit fix

* remove yPadding in template and simple editor

* nits

* Revert "remove yPadding in template and simple editor"

This reverts commit 8f27c8d0b8.

* nit

* Fix proppicker border

* fix inconsistent spacing btw arginput and input transform form field headers

* consistent add item button

* nit

* s3 settings nits

* RunsFilter fix

* gray ${...} badge

* border fix darkmode

* nit

* nit app editor consistency

* fix step input gen style

* nit fix

* nits

* toggle border

* nit toggle button

* nit font-medium

* nit font-medium

* nit font-medium

* nit font-medium

* nit

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
2025-09-27 21:52:13 +00:00
centdix 56ddad2d5a feat(flow): Add helper to add expression to arrays (#6629)
* Implement array expression helper for number arrays in JS mode

- Add showArrayExprPicker state to manage helper UI
- Add shouldShowArrayHelper() to check conditions (JS mode + number array)
- Add 'Add item' button that shows picker UI when clicked
- Implement picker row with disabled input, FlowPlugConnect, and Cancel button
- Connect callback sets array expression [property] and updates Monaco editor
- Include helpful text and proper cleanup on cancel/connect

* Enhance array expression helper to append items to existing arrays

- Check if current expr is already an array expression [...]
- If it is, append new item to existing content: [existing, newItem]
- If not or empty, create new array with single item: [newItem]
- Update helper text to reflect append behavior
- Maintains backward compatibility with non-array expressions

* Add S3 resource array helper for JavaScript mode

- Add shouldShowS3ArrayHelper() function to detect S3 resource arrays
- Show direct FlowPlugConnect for S3 arrays instead of Add item button
- Apply same append logic: add to existing array or create new one
- Include helpful text explaining S3 resource connection
- Support both s3_object and s3object resourceType variants

* Add S3 resource catalog helper for static mode arrays

- Add shouldShowS3ArrayStaticHelper() to detect S3 arrays in static mode
- Show 'Add an object from the catalog' button below static S3 array inputs
- Button switches to JavaScript mode and immediately activates connect mode
- Sets initial empty array [] then replaces with [selectedPath] when connected
- Includes helpful text explaining the mode switch and connection

* Fix reactivity issue when switching from static to JS mode

- Make button click handler async and await tick() before activating connect mode
- Add Monaco editor update after setting expression in connect callback
- Use tick().then() to ensure Monaco is available before calling setCode()
- This ensures the SimpleEditor displays the new array expression immediately

* Add plug icon to 'Add object from an expression' button

- Import Plug icon from lucide-svelte
- Add startIcon with Plug to the S3 array static helper button
- Makes the button visually consistent with other connection-related UI elements

* Unify S3 resource button style across static and JS modes

- Replace 'Add S3 resource:' text + FlowPlugConnect with consistent Button style
- Use same variant, color, size, and plug icon as static mode button
- Maintain same functionality but with unified visual appearance
- Both S3 helpers now use identical button styling

* Consolidate and clean up array expression helpers

- Extract appendPathToArrayExpr() to eliminate duplicate array building logic
- Add switchToJsAndConnect() helper for consistent mode switching flow
- Add emitChange() and updateEditor() utilities for consistent updates
- Add safety reset of showArrayExprPicker when switching away from JS mode
- Reduce code duplication across number and S3 array helpers
- Improve maintainability and consistency

* Remove number array helper functionality

- Remove shouldShowArrayHelper() function for number arrays
- Remove showArrayExprPicker state variable and related UI
- Remove number array 'Add item' button and picker interface
- Keep only S3 resource array helpers (static and JS modes)
- Clean up unused safety reset logic for array picker

* Create reusable S3ArrayHelperButton component

- Extract S3 array helper button into dedicated component
- Add consistent styling with Plug icon and configurable label
- Replace both static and JavaScript mode button implementations
- Reduce code duplication and improve maintainability
- Component dispatches click event for parent handling

* cleaning

* Hide S3ArrayHelperButton when in connect mode

- Add connecting prop to S3ArrayHelperButton component
- Hide button when connecting is true to avoid UI clutter
- Pass connecting state from InputTransformForm to both button instances
- Improves UX by removing unnecessary button when plug is already active

* cleaning

* cleaning
2025-09-18 09:20:26 +00:00