feat(webui): Add focus and hover to Monaco editor to mimic Antd styles.

[davemarco]

Description

Adds focus and hover to monaco editor component. Used antd tokens where possible.

I looked at doing it with css, but was more difficult than to use the Antd token, and deal with multiple states. Using the state logic seemed cleaner.

There are still some issues with centering, and border radius. will look into in another PR

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

Focus and hover work correctly.

Summary by CodeRabbit

• New Features

  • Adds keyboard focusability to the editor when enabled.
  • Provides clear focus and hover feedback with dynamic styling.
  • Disables pointer interactions when the editor is disabled.

• Style

  • Introduces smooth transitions for border colour and box shadow.
  • Applies dynamic border colour and subtle shadow on focus/hover for improved visual clarity.

[coderabbitai]

Walkthrough

Adds focus and hover state handling to SqlEditor: introduces React state (isFocused, isHovered), event handlers (focus/blur/mouse enter/leave), dynamic container styles (borderColor, boxShadow, pointerEvents, tabIndex), and a CSS transition for border-color and box-shadow.

Changes

Cohort / File(s)	Summary
SqlEditor styling components/webui/client/src/components/SqlEditor/index.module.css	Add transition for border-color and box-shadow on the .editor class (0.2s).
SqlEditor interaction and rendering components/webui/client/src/components/SqlEditor/index.tsx	Add isFocused / isHovered state, event handlers (onFocus, onBlur, onMouseEnter, onMouseLeave), compute dynamic styles (borderColor, boxShadow, pointerEvents), and toggle tabIndex based on disabled; integrate these into the editor container. No exported/public signatures changed.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant SqlEditor as SqlEditor (React)
  participant State as State (isFocused, isHovered)
  participant DOM as DOM Styles

  User->>SqlEditor: focus
  SqlEditor->>State: set isFocused = true
  State-->>SqlEditor: state update
  SqlEditor->>DOM: apply borderColor (colorPrimary), boxShadow, pointerEvents

  User->>SqlEditor: mouse enter
  SqlEditor->>State: set isHovered = true
  State-->>SqlEditor: state update
  SqlEditor->>DOM: apply borderColor (colorPrimaryHover)

  User->>SqlEditor: blur / mouse leave
  SqlEditor->>State: set isFocused = false / isHovered = false
  State-->>SqlEditor: state update
  SqlEditor->>DOM: restore borderColor, remove boxShadow

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 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 succinctly describes the primary change—adding focus and hover states to the Monaco editor to mimic Ant Design styling—which aligns with the PR objectives and file 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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5fab7df and d8a313d.

📒 Files selected for processing (2)

• components/webui/client/src/components/SqlEditor/index.module.css (1 hunks)
• components/webui/client/src/components/SqlEditor/index.tsx (3 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/components/SqlEditor/index.tsx

🔇 Additional comments (8)

components/webui/client/src/components/SqlEditor/index.module.css (1)

6-6: LGTM! Transition properties align with dynamic styling.

The CSS transition for border-color and box-shadow with a 0.2s duration properly supports the focus and hover state changes implemented in the TypeScript component.

components/webui/client/src/components/SqlEditor/index.tsx (7)

4-4: LGTM! Necessary import for state management.

The useState import is correctly added to support focus and hover state tracking.

---

41-42: LGTM! State initialization is appropriate.

Both isFocused and isHovered are correctly initialized to false, representing the initial unfocused and unhovered states.

---

82-87: LGTM! Border colour logic correctly prioritises states.

The conditional logic appropriately prioritises focused state over hovered state, with a fallback to the default border colour.

---

93-95: LGTM! Pointer events correctly disabled when component is disabled.

The ternary operator appropriately sets pointerEvents to "none" when disabled, preventing user interaction.

---

102-106: LGTM! Dynamic styling correctly applied.

The container style appropriately applies the computed borderColor, boxShadow, and pointerEvents values based on the component's focus, hover, and disabled states.

---

107-109: LGTM! TabIndex correctly manages keyboard accessibility.

Setting tabIndex to -1 when disabled appropriately removes the editor from the keyboard tab order, whilst 0 includes it in the natural tab order when enabled.

---

110-121: LGTM! Event handlers correctly manage focus and hover state.

The onBlur, onFocus, onMouseEnter, and onMouseLeave handlers appropriately update the component's focus and hover state, enabling the dynamic styling behaviour.

[hoophalab]

lgtm. two minor style comments

[junhaoliao]

deferring to @hoophalab 's review

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d8a313d and 89ec1b1.

📒 Files selected for processing (1)

• components/webui/client/src/components/SqlEditor/index.tsx (3 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/components/SqlEditor/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). (4)

• GitHub Check: package-image
• GitHub Check: lint-check (ubuntu-24.04)
• GitHub Check: rust-checks (ubuntu-24.04)
• GitHub Check: rust-checks (ubuntu-22.04)

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Avoid introducing an extra tab stop.

Setting tabIndex={0} on the wrapper makes the container focusable ahead of Monaco’s own tabbable element, so keyboard users must tab twice before they can edit. Either drop the wrapper tabIndex (letting the editor surface handle focus) or forward focus to the Monaco instance when the wrapper receives focus, and keep it -1 otherwise.

🤖 Prompt for AI Agents

In components/webui/client/src/components/SqlEditor/index.tsx around lines 107
to 109, the wrapper sets tabIndex={0} which creates an extra tab stop before
Monaco’s editor; either remove the wrapper tabIndex entirely so the editor
surface handles focus, or keep the wrapper tabIndex at -1 and add an onFocus
handler that forwards focus to the Monaco editor instance (use the editor ref
and call its focus method) so keyboard users land directly in the editor.