feat: improve create graph form UX

[alepane21]

Summary by CodeRabbit

• New Features

  • Smarter tag input: commit on paste/blur, backspace removal, dedupe/trim/max validation, and live count.
  • Delimiter behavior refined so commas are allowed inside matcher values.

• Bug Fixes

  • Tag/form synchronization updated to keep label matchers in sync and avoid stale state.

• Documentation

  • Expanded label matcher guidance with clearer examples and updated link text ("Learn more.").

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Checklist

• I have discussed my proposed changes in an issue and have received approval to proceed.
• I have followed the coding standards of the project.
• Tests or benchmarks have been added or updated.
• Documentation has been updated on https://github.com/wundergraph/cosmo-docs.
• I have read the Contributors Guide.

[coderabbitai]

Walkthrough

Adds synchronization from TagInput tags to the form via a useEffect in create-graph and refactors TagInput internals to centralize commit/removal logic (delimiters, paste, blur), validation/deduplication, and Backspace behavior; updates placeholder, delimiter semantics, and form description copy.

Changes

Cohort / File(s)	Summary
TagInput logic enhancements studio/src/components/ui/tag-input/tag-input.tsx	Reworked tag flow: added tryAddTag and commitInputValue to validate, dedupe, enforce maxTags, and call onTagAdd/onTagRemove; added escapeForCharClass for safe delimiter regex; handle paste, blur commit, and delimiter key commits; Backspace removes last tag when input empty via functional updater; removed local tagCount in favor of tags.length; adjusted class/layout logic and onPaste wiring.
Create-graph TagInput config & docs studio/src/components/create-graph.tsx	Replaced direct form.setValue calls with a useEffect that syncs labelMatchers when tags change; changed TagInput placeholder to "key1=value1,key2=value2 ...", removed comma from top-level delimiterList (now [" ", "Enter"]), expanded/reworded Label Matchers description and changed link text to "Learn more." (plus inline comments on delimiter semantics and sync flow).

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'feat: improve create graph form UX' is vague and overly broad, using the non-descriptive term 'improve' without specifying what aspect of the form UX is being improved.	Consider a more specific title that describes the primary change, such as 'feat: refactor tag input delimiter handling and form synchronization' or 'feat: improve tag input UX with space/Enter delimiters'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 98 lines in your changes missing coverage. Please review.
✅ Project coverage is 1.50%. Comparing base (f2e5a5b) to head (43b0208).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
studio/src/components/ui/tag-input/tag-input.tsx	0.00%	88 Missing ⚠️
studio/src/components/create-graph.tsx	0.00%	10 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##            main   #2468      +/-   ##
========================================
- Coverage   1.50%   1.50%   -0.01%     
========================================
  Files        292     292              
  Lines      46768   46816      +48     
  Branches     431     431              
========================================
  Hits         703     703              
- Misses     45782   45830      +48     
  Partials     283     283              

Files with missing lines	Coverage Δ
studio/src/components/create-graph.tsx	0.00% <0.00%> (ø)
studio/src/components/ui/tag-input/tag-input.tsx	0.00% <0.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

studio/src/components/create-graph.tsx (1)

264-279: Placeholder example now conflicts with delimiter guidance.

The placeholder still shows comma-separated matchers, but the delimiter list is now space/Enter and the comment explicitly says commas are valid inside values. Update the example to match the new UX to avoid confusion.

✅ Suggested fix

-                          placeholder="key1=value1,key2=value2 ..."
+                          placeholder="key1=value1 key2=value2 ..."

🤖 Fix all issues with AI agents

In `@studio/src/components/ui/tag-input/tag-input.tsx`:
- Around line 134-165: commitInputValue currently reads the render-time tags
variable and calls setTags(nextTags), which can cause lost updates if multiple
commits happen before re-render; change it to use the functional updater form of
setTags so each commit applies to the latest state: inside commitInputValue (and
when computing nextTags from nextTagTexts) call setTags(prevTags => { let t =
prevTags; for (const text of nextTagTexts) { t = tryAddTag(text, t); } if (t !==
prevTags) { setTagCount(t.length); return t; } return prevTags; }); remove
reliance on the outer tags variable and ensure setTagCount is updated from the
resulting tags length.
- Around line 172-197: The new handlers (handleInputBlur, handleKeyDown,
handlePaste) currently mutate tags even when readOnly/disabled is set and the
input element isn't receiving readOnly; update each handler to early-return if
props.readOnly or props.disabled is true, and ensure the input JSX forwards the
readOnly and disabled props to the <input> element so the browser prevents
edits. Specifically, add a guard at the top of handleInputBlur, handleKeyDown,
and handlePaste to skip calling commitInputValue, setTags, setTagCount, or
onTagRemove when readOnly/disabled is true, and pass readOnly={readOnly} and
disabled={disabled} into the input element so the UI reflects the non-editable
state.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@studio/src/components/create-graph.tsx`:
- Line 264: The placeholder "key1=value1,key2=value2 ..." contradicts
FormDescription which says commas denote multiple values for the same key (e.g.,
"team=A,team=B"); update the placeholder(s) used in the input(s) to match that
description (for example "team=A,team=B") so the placeholder aligns with
FormDescription; locate the placeholder prop(s) in create-graph.tsx (the input
element(s) around the current placeholder line and the similar block at lines
~285-288) and replace them consistently.

[alepane21]

@coderabbitai fullreview

[coderabbitai]

@alepane21, I'll perform a full review of the PR changes now.

✅ Actions performed

Full review triggered.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@studio/src/components/ui/tag-input/tag-input.tsx`:
- Around line 133-152: The paste/blur splitting in commitInputValue only splits
on single-character delimiters (charDelimiters) so configured "Enter" (newline)
delimiters aren't applied to multi-line input; update commitInputValue to also
detect newline delimiters from delimiterList (e.g., '\n' or '\r\n' or any
delimiter containing a newline) and, when splitByDelimiters is true, split the
trimmed text by both the existing charDelimiters regex and a newline-aware regex
(/\\r?\\n/), then merge results, trim and filter empty strings before calling
setInputValue/continuing; reference commitInputValue, delimiterList,
splitByDelimiters, charDelimiters, and escapeForCharClass.

🧹 Nitpick comments (1)

studio/src/components/ui/tag-input/tag-input.tsx (1)

155-163: Consider moving onTagAdd/onTagRemove side effects out of state updaters.
React can invoke updater functions more than once in StrictMode/concurrent rendering, which can duplicate callbacks. A useEffect diff between previous and current tags keeps callbacks deterministic.

Possible approach (conceptual)

const prevTagsRef = React.useRef<Tag[]>(tags);

React.useEffect(() => {
  const prev = prevTagsRef.current;
  // diff prev vs tags; call onTagAdd/onTagRemove as needed
  prevTagsRef.current = tags;
}, [tags, onTagAdd, onTagRemove]);

Also applies to: 185-193, 205-212

[StarpTech]

LGTM