feat(webui): Reorganize clp-s search controls onto two different lines; Remove text from buttons. #1853
feat(webui): Reorganize clp-s search controls onto two different lines; Remove text from buttons. #1853davemarco wants to merge 4 commits intoy-scope:mainfrom
Conversation
WalkthroughThe pull request refactors the NativeControls component from a single file into a modularized directory structure. The original monolithic component is replaced with separate CLP and CLP_S implementations, with conditional rendering logic moved to a new index file. Additionally, button components are updated to render icon-only variants by removing text labels. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/webui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/CancelButton.tsx (1)
44-50: Add accessible label for icon-only button.The button now lacks a text label. For accessibility, add an
aria-labelattribute to ensure screen readers can identify the button's purpose.♿ Proposed fix to add aria-label
<Button danger={true} htmlType={"button"} icon={<CloseOutlined/>} size={"middle"} type={"primary"} + aria-label={"Cancel search"} onClick={handleCancelButtonClick}/>
🤖 Fix all issues with AI agents
In
@components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.module.css:
- Around line 1-4: The .clpSRow flex container is missing vertical alignment and
wrap behavior; update the .clpSRow rule to add align-items: center to vertically
center child controls and add flex-wrap: wrap (and optionally adjust gap or
introduce a responsive media query) so the controls don’t overflow on narrow
viewports—verify in mobile/tablet sizes that elements wrap cleanly and remain
accessible.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (7)
components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpControls.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpSControls.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.module.csscomponents/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/CancelButton.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/SubmitButton/index.tsx
💤 Files with no reviewable changes (1)
- components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls.tsx
🧰 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/Native/NativeControls/index.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/CancelButton.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpSControls.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpControls.tsxcomponents/webui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/SubmitButton/index.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-08T17:20:02.560Z
Learnt from: junhaoliao
Repo: y-scope/clp PR: 1078
File: components/webui/server/src/plugins/MongoSocketIoServer/index.ts:105-108
Timestamp: 2025-07-08T17:20:02.560Z
Learning: The y-scope/clp codebase has a 100-character line length limit that takes precedence over other style preferences like template literals when they conflict.
Applied to files:
components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.module.css
🧬 Code graph analysis (1)
components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.tsx (2)
components/webui/common/src/config.ts (1)
CLP_STORAGE_ENGINES(54-54)components/webui/client/src/config/index.ts (1)
SETTINGS_STORAGE_ENGINE(24-24)
⏰ 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: check-generated
- GitHub Check: lint-check (macos-15)
- GitHub Check: lint-check (ubuntu-24.04)
🔇 Additional comments (6)
components/webui/client/src/pages/SearchPage/SearchControls/Native/SearchButton/SubmitButton/index.tsx (1)
126-139: LGTM! Icon-only button with proper accessibility.The button text removal is correct, and accessibility is maintained through the wrapping Tooltip component that provides context-sensitive messages.
components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpSControls.tsx (1)
1-28: LGTM! Clean two-row layout for CLP-S controls.The component structure is well-organized and correctly implements the two-row layout as described in the PR objectives.
components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/ClpControls.tsx (1)
1-18: LGTM! Clean single-row layout for CLP controls.The component structure is well-organized and correctly implements the single-row layout for CLP controls.
components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.tsx (1)
1-30: LGTM! Correct conditional rendering logic.The component cleanly separates CLP and CLP-S control layouts with straightforward runtime selection logic.
components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.module.css (2)
6-8: LGTM!Using
margin-left: autoto push the time range control to the right is a standard flex layout pattern and works well for the intended layout.
10-13: LGTM!The combination of
flex: 1andmin-width: 0is correct for a flexible search input. Themin-width: 0override is particularly important as it allows the flex item to shrink below its content size, preventing overflow issues and enabling proper text truncation or scrolling behaviour.
| .clpSRow { | ||
| display: flex; | ||
| gap: 10px; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding vertical alignment.
The .clpSRow flex container lacks align-items, which may cause inconsistent vertical alignment if child elements (search input, buttons, selectors) have different heights. Consider adding align-items: center; for consistent vertical centering.
Additionally, since flex-wrap defaults to nowrap, the controls might overflow horizontally on narrow screens.
♻️ Proposed enhancement
.clpSRow {
display: flex;
gap: 10px;
+ align-items: center;
}Please verify the layout behaviour on small screens (mobile/tablet viewports) to ensure controls remain accessible and don't overflow.
🤖 Prompt for AI Agents
In
@components/webui/client/src/pages/SearchPage/SearchControls/Native/NativeControls/index.module.css
around lines 1 - 4, The .clpSRow flex container is missing vertical alignment
and wrap behavior; update the .clpSRow rule to add align-items: center to
vertically center child controls and add flex-wrap: wrap (and optionally adjust
gap or introduce a responsive media query) so the controls don’t overflow on
narrow viewports—verify in mobile/tablet sizes that elements wrap cleanly and
remain accessible.
hoophalab
left a comment
hoophalab
left a comment
There was a problem hiding this comment.
One minor ui issue in clp mode. The cancel button width is changed after submitting the query.
Maybe we should fix the width of the run/cancel button?
3 participants
Description
Update clp-s ui per kirks drawing. Did not update the clp ui since there is no dataset selector. Also got rid of text in buttons per drawing.
Checklist
breaking change.
Validation performed
ui looks like drawing
Summary by CodeRabbit
Release Notes
Refactors
Style
✏️ Tip: You can customize this high-level summary in your review settings.