feat(webui): Trigger submit action when pressing Enter on Monaco single line editor. by davemarco · Pull Request #1459 · y-scope/clp

davemarco · 2025-10-21T15:01:29Z

Description

Modifies single line editor to submit form when pressing enter. Monaco doesnt pass through the enter action like the antd input.

Checklist

The PR satisfies the contribution guidelines.
This is a breaking change and that has been indicated in the PR title, OR this isn't a
breaking change.
Necessary docs have been updated, OR no docs need to be updated.

Validation performed

Enter now works.

Summary by CodeRabbit

Release Notes

New Features
- Users can now press Enter to execute SQL queries directly from the SQL input field, streamlining query submission.
Bug Fixes
- Fixed form submission behaviour for SQL search controls to ensure proper button functionality and accessibility.

coderabbitai · 2025-10-21T15:02:01Z

Walkthrough

The pull request modifies SQL input and button components to enable form submission via the Enter key in the Monaco Editor and explicitly specifies HTML button types for form controls.

Changes

Cohort / File(s)	Change Summary
SQL Editor Action Registration `components/webui/client/src/components/SqlInput/index.tsx`	Registers a new "Run Query" editor action in Monaco Editor bound to the Enter key, which locates the enclosing form and triggers its submit button programmatically.
Form Button Type Specifications `components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx`, `components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx`	Adds `htmlType` prop to button components—`htmlType="button"` for CancelButton and `htmlType="submit"` for GuidedRunButton—to explicitly define their HTML button types.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Monaco as Monaco Editor
    participant Form as HTML Form
    participant Submit as Submit Button

    User->>Monaco: Press Enter
    activate Monaco
    Monaco->>Monaco: Trigger "Run Query" action
    Monaco->>Form: Find closest enclosing form
    activate Form
    Form-->>Monaco: Form element located
    deactivate Form
    Monaco->>Submit: Programmatically click submit
    activate Submit
    Submit->>Form: Trigger form submission
    deactivate Submit
    deactivate Monaco

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "Trigger submit action when pressing Enter on Monaco single line editor" accurately and directly describes the main change in the changeset. The primary modification across the three affected files is enabling the Enter key to submit the surrounding form in the Monaco single-line SQL editor, which is precisely what the title conveys. The title is concise, specific, and avoids vague terminology, making it clear to anyone reviewing the repository history what functionality was introduced. The scope prefix (feat(webui)) and descriptive language appropriately reflect the nature and impact of the changes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 94b501b and 03f1b5e.

📒 Files selected for processing (3)

components/webui/client/src/components/SqlInput/index.tsx (2 hunks)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx (1 hunks)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}

⚙️ CodeRabbit configuration file

Prefer false == <expression> rather than !<expression>.

Files:

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx
components/webui/client/src/components/SqlInput/index.tsx
components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: build (macos-15)
GitHub Check: rust-checks (ubuntu-22.04)
GitHub Check: lint-check (macos-15)

🔇 Additional comments (4)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx (1)

48-48: LGTM: Explicit button type prevents accidental form submission.

Setting htmlType="button" is best practice to ensure the Cancel button doesn't inadvertently submit the surrounding form.

components/webui/client/src/components/SqlInput/index.tsx (2)

4-5: LGTM: Monaco API import enables custom keybindings.

The import is necessary for defining custom editor actions.

32-42: Implementation verified—no issues identified.

All three requirements from the review comment are satisfied:

SqlInput always within a form: Verified. SqlInput is nested in GuidedControls (Select, Where, OrderBy components), which is rendered inside the form in SearchControls.

Form contains exactly one button with type="submit": Verified. GuidedRunButton (rendered in SqlSearchButton within GuidedControls) has htmlType={"submit"}, making it the only submit button in the form. Other buttons (CancelButton, FreeformRunButton) are not submit buttons.

Works correctly when Run button's onClick executes: Verified. GuidedRunButton has both htmlType={"submit"} and an onClick handler. When SqlInput triggers submitBtn.click(), both the onClick handler (which performs the query submission) and the form submission event fire. The form submission is prevented by handleSubmit, so the actual work is done via the button's onClick handler.

The optional chaining (?.) provides proper defensive handling for missing elements.

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx (1)

92-92: No issues found—form submission behaviour is correct.

The form's onSubmit handler in SearchControls/index.tsx (line 15–17) only calls ev.preventDefault() to prevent page reload. It does not interfere with the button's async onClick handler in GuidedRunButton.tsx. When the button is clicked or triggered via Enter key:

The onClick handler executes handleClick() (async logic)

The form's onSubmit handler prevents the default page reload

No conflicts occur

The implementation is safe and correct.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

hoophalab

validation: pressing enter on sql input sends the query

junhaoliao

deferring to @hoophalab 's review

* feat(webui): Add drawer to display guided query and errors. (y-scope#1421) * docs: Add Slack community invite badge to home page README. (y-scope#1418) * refactor(clp-package): Simplify StrEnum and Path serialization via Annotated serializers. (y-scope#1417) Co-authored-by: Junhao Liao <junhao@junhao.ca> Co-authored-by: Junhao Liao <junhao.liao@yscope.com> * build(clp-package): Adopt uv + hatchling as the build and packaging backend for Python components (resolves y-scope#1396); Upgrade dependencies for Python components. (y-scope#1405) * chore(docker): Add `--link` flags to COPY/ADD operations for improved build performance (fixes y-scope#1408). (y-scope#1411) * fix(ci): Correctly update and restore cache of `lint:check-cpp-lint-static-full`'s generated files (fixes y-scope#1419): (y-scope#1430) - Save cache entries using unique key per entry. - Restore latest entries using key prefix. - Avoid using outputs from optionally-run `restore` task. * fix(clp-rust-utils): Use AWS SDK default configuration with latest behavior version for S3 client. (y-scope#1445) Co-authored-by: Junhao Liao <junhao.liao@yscope.com> * refactor(clp-package): Remove unused `python-dotenv` dependency and related imports (fixes y-scope#1443). (y-scope#1444) * fix(webui): Submit queries that failed ANTLR validation to Presto. (y-scope#1450) * feat(clp-s): Explicitly reject unstructured log inputs during compression. (y-scope#1434) * feat(webui): Show query speed in native search status. (y-scope#1429) * fix(job-orchestration): Make `tag_ids` a required `list[int]` for compatibility with Spider compressor. (y-scope#1453) * feat(clp-mcp-server): Add log viewer links to query results for displaying in LLM output. (y-scope#1454) Co-authored-by: Junhao Liao <junhao.liao@yscope.com> * feat(ci): Add tasks for checking and updating Rust lock file (`Cargo.lock`); Add check to GH workflow. (y-scope#1448) * feat(webui): Trigger submit action when pressing Enter on Monaco single line editor. (y-scope#1459) * Add filters. * Update cargo lock. --------- Co-authored-by: davemarco <83603688+davemarco@users.noreply.github.com> Co-authored-by: Abigail Matthews <abigail.v.matthews@gmail.com> Co-authored-by: sitaowang1998 <sitaowang1998@outlook.com> Co-authored-by: Junhao Liao <junhao@junhao.ca> Co-authored-by: Junhao Liao <junhao.liao@yscope.com> Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com> Co-authored-by: Devin Gibson <gibber9809@users.noreply.github.com> Co-authored-by: hoophalab <200652805+hoophalab@users.noreply.github.com> Co-authored-by: Huangshi Tian <All-less@users.noreply.github.com>

* feat(webui): Add drawer to display guided query and errors. (y-scope#1421) * docs: Add Slack community invite badge to home page README. (y-scope#1418) * refactor(clp-package): Simplify StrEnum and Path serialization via Annotated serializers. (y-scope#1417) Co-authored-by: Junhao Liao <junhao@junhao.ca> Co-authored-by: Junhao Liao <junhao.liao@yscope.com> * build(clp-package): Adopt uv + hatchling as the build and packaging backend for Python components (resolves y-scope#1396); Upgrade dependencies for Python components. (y-scope#1405) * chore(docker): Add `--link` flags to COPY/ADD operations for improved build performance (fixes y-scope#1408). (y-scope#1411) * fix(ci): Correctly update and restore cache of `lint:check-cpp-lint-static-full`'s generated files (fixes y-scope#1419): (y-scope#1430) - Save cache entries using unique key per entry. - Restore latest entries using key prefix. - Avoid using outputs from optionally-run `restore` task. * fix(clp-rust-utils): Use AWS SDK default configuration with latest behavior version for S3 client. (y-scope#1445) Co-authored-by: Junhao Liao <junhao.liao@yscope.com> * refactor(clp-package): Remove unused `python-dotenv` dependency and related imports (fixes y-scope#1443). (y-scope#1444) * fix(webui): Submit queries that failed ANTLR validation to Presto. (y-scope#1450) * feat(clp-s): Explicitly reject unstructured log inputs during compression. (y-scope#1434) * feat(webui): Show query speed in native search status. (y-scope#1429) * fix(job-orchestration): Make `tag_ids` a required `list[int]` for compatibility with Spider compressor. (y-scope#1453) * feat(clp-mcp-server): Add log viewer links to query results for displaying in LLM output. (y-scope#1454) Co-authored-by: Junhao Liao <junhao.liao@yscope.com> * feat(ci): Add tasks for checking and updating Rust lock file (`Cargo.lock`); Add check to GH workflow. (y-scope#1448) * feat(webui): Trigger submit action when pressing Enter on Monaco single line editor. (y-scope#1459) * Add filters. * Update cargo lock. * Stupid fix --------- Co-authored-by: davemarco <83603688+davemarco@users.noreply.github.com> Co-authored-by: Abigail Matthews <abigail.v.matthews@gmail.com> Co-authored-by: sitaowang1998 <sitaowang1998@outlook.com> Co-authored-by: Junhao Liao <junhao@junhao.ca> Co-authored-by: Junhao Liao <junhao.liao@yscope.com> Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com> Co-authored-by: Devin Gibson <gibber9809@users.noreply.github.com> Co-authored-by: hoophalab <200652805+hoophalab@users.noreply.github.com> Co-authored-by: Huangshi Tian <All-less@users.noreply.github.com>

…le line editor. (y-scope#1459)

latest

87e33ed

Marco added 4 commits October 21, 2025 17:39

latest

4edfd71

latest

39821ed

latest

5c533ef

latest

2003b96

davemarco marked this pull request as ready for review October 21, 2025 18:15

davemarco requested a review from a team as a code owner October 21, 2025 18:15

Merge branch 'main' into newform

03f1b5e

davemarco requested a review from hoophalab October 21, 2025 18:15

hoophalab approved these changes Oct 21, 2025

View reviewed changes

junhaoliao approved these changes Oct 21, 2025

View reviewed changes

Merge branch 'main' into newform

c24d551

davemarco merged commit 8cebaa4 into y-scope:main Oct 22, 2025
19 of 22 checks passed

junhaoliao pushed a commit to junhaoliao/clp that referenced this pull request May 17, 2026

feat(webui): Trigger submit action when pressing Enter on Monaco sing…

35b816b

…le line editor. (y-scope#1459)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(webui): Trigger submit action when pressing Enter on Monaco single line editor.#1459

feat(webui): Trigger submit action when pressing Enter on Monaco single line editor.#1459
davemarco merged 7 commits into
y-scope:mainfrom
davemarco:newform

davemarco commented Oct 21, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 21, 2025 •

edited

Loading

Uh oh!

hoophalab left a comment

Uh oh!

junhaoliao left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

davemarco commented Oct 21, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Validation performed

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

hoophalab left a comment

Choose a reason for hiding this comment

Uh oh!

junhaoliao left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

davemarco commented Oct 21, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 21, 2025 •

edited

Loading