feat(new-webui): Add a case sensitivity toggle to QueryBox.#949
Conversation
WalkthroughA case sensitivity toggle feature was added to the query input in the log viewer web UI. This includes a new reusable toggle component, updates to the query box to accept and display the toggle, integration with the search state using Zustand, and state management for case sensitivity throughout the search UI. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant QueryBox
participant CaseSensitiveToggle
participant SearchStore
User->>CaseSensitiveToggle: Click toggle button
CaseSensitiveToggle->>QueryBox: onCaseSensitiveChange(newValue)
QueryBox->>SearchStore: updateQueryIsCaseSensitive(newValue)
SearchStore-->>QueryBox: queryIsCaseSensitive (updated)
QueryBox-->>CaseSensitiveToggle: isCaseSensitive (updated prop)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1)`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.
⏰ Context from checks skipped due to timeout of 90000ms (2)
🔇 Additional comments (10)
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
components/log-viewer-webui/client/src/components/QueryBox/index.tsx(2 hunks)components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx(3 hunks)components/log-viewer-webui/client/src/pages/SearchPage/SearchState/index.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.
**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}: - Preferfalse == <expression>rather than!<expression>.
components/log-viewer-webui/client/src/pages/SearchPage/SearchState/index.tsxcomponents/log-viewer-webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsxcomponents/log-viewer-webui/client/src/components/QueryBox/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: lint-check (macos-latest)
- GitHub Check: lint-check (ubuntu-latest)
🔇 Additional comments (4)
components/log-viewer-webui/client/src/pages/SearchPage/SearchState/index.tsx (1)
17-17: LGTM! Well-integrated state management implementation.The case sensitivity state has been properly integrated into the search store following the established patterns. The default value of
false(case insensitive) is a sensible choice for user experience, and the implementation is consistent with other state properties.Also applies to: 32-35, 63-63, 76-78
components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx (1)
24-30: LGTM! Clean integration with the search store.The integration of case sensitivity state follows the established patterns perfectly. The props are appropriately named and the callback correctly updates the store state.
Also applies to: 64-64, 73-75
components/log-viewer-webui/client/src/components/QueryBox/index.tsx (2)
15-48: Excellent component design with clean separation of concerns.The
CaseSensitiveTogglecomponent is well-designed with:
- Comprehensive JSDoc documentation
- Good use of Ant Design components for UI consistency
- Clear visual feedback with different button variants and disabled text
- Helpful tooltip for user guidance
51-51: LGTM! Well-integrated QueryBox enhancement.The QueryBox component has been appropriately extended to include the case sensitivity toggle. The props are properly typed by extending the interface, and the toggle is sensibly positioned as a suffix within the input field.
Also applies to: 68-81
|
|
||
| export interface QueryBoxProps extends InputProps { | ||
|
|
||
| export interface CaseSensitiveToggleProps { |
There was a problem hiding this comment.
not sure why the liner doesn't catch this -
we tend to put all exports towards the end of sources. e.g.,
interface CaseSensitiveToggleProps {...}
...
export {CaseSensitiveToggleProps};
@coderabbitai create an issue to track why linter didn't catch this.
There was a problem hiding this comment.
🧩 Analysis chain
@junhaoliao I'll create an issue to track this linter configuration issue.
🏁 Script executed:
#!/bin/bash
# Create a GitHub issue to track why the linter didn't catch the export placement violation
gh issue create \
--title "Linter not catching export placement style violations" \
--body "## Issue Description
The linter is not catching violations of the coding style where exports should be placed at the end of source files rather than inline with declarations.
## Expected Behavior
Exports should be grouped at the end of files using the pattern:
\`\`\`typescript
interface SomeInterface {...}
// ... other code ...
export {SomeInterface};
\`\`\`
## Actual Behavior
The linter allows inline exports like:
\`\`\`typescript
export interface SomeInterface {...}
\`\`\`
## Example
Found in PR #949, file \`components/log-viewer-webui/client/src/components/QueryBox/index.tsx\` where \`export interface CaseSensitiveToggleProps\` appears at the top of the file instead of being grouped with other exports at the end.
## Backlinks
- PR: https://github.com/y-scope/clp/pull/949
- Comment: https://github.com/y-scope/clp/pull/949#discussion_r2116610583
## Action Required
Review and update linter configuration to enforce export placement at the end of files." \
--assignee junhaoliao
Length of output: 1112
Perfect! I've created issue #952 to track this linter configuration problem: #952
The issue documents the specific case where export interface CaseSensitiveToggleProps should have been caught by the linter according to your coding standards, which prefer exports grouped at the end of files rather than inline declarations. This will help investigate and fix the linter configuration to enforce this style rule going forward.
🧬 Code Graph Analysis Results
Possibly relevant snippets from components/log-viewer-webui/client/src/components/QueryBox/index.tsx (lines 1-74)
import {
Button,
Input,
InputProps,
Progress,
theme,
Tooltip,
Typography,
} from "antd";
import {Nullable} from "src/typings/common";
import styles from "./index.module.css";
export interface CaseSensitiveToggleProps {
isCaseSensitive: boolean;
onCaseSensitiveChange: (newValue: boolean) => void;
}
/**
* A toggle button component that switches between case-sensitive and case-insensitive modes.
*
* This component displays a button labeled "Aa". When clicked, it toggles the `isCaseSensitive`
* state and invokes the `onCaseSensitiveChange` callback with the new value.
*
* @param props
* @param props.isCaseSensitive
* @param props.onCaseSensitiveChange
* @return
*/
const CaseSensitiveToggle = ({
isCaseSensitive,
onCaseSensitiveChange,
}: CaseSensitiveToggleProps) => {
return (
<Tooltip title={"Match case"}>
<Button
color={"default"}
icon={<Typography.Text disabled={!isCaseSensitive}>Aa</Typography.Text>}
variant={isCaseSensitive ?
"filled" :
"text"}
onClick={() => {
onCaseSensitiveChange(!isCaseSensitive);
}}/>
</Tooltip>
);
};
export interface QueryBoxProps extends InputProps, CaseSensitiveToggleProps {
/**
* The progress of the progress bar from `0` to `100`. Hides the bar if `null`.
*/
progress: Nullable<number>;
}
/**
* Renders an Input with a progress bar.
*
* @param props
* @param props.progress
* @param props.inputProps
* @param props.onCaseSensitiveChange
* @param props.isCaseSensitive
* @return
*/
const QueryBox = ({
progress,
isCaseSensitive,
onCaseSensitiveChange,
...inputProps
}: QueryBoxProps) => {
const {token} = theme.useToken();
return (
<div className={styles["queryBox"]}>
<Input
{...inputProps}
suffix={<CaseSensitiveToggle
isCaseSensitive={isCaseSensitive}
onCaseSensitiveChange={onCaseSensitiveChange}/>}/>
<div
className={styles["progressBarMask"]}
style={{borderRadius: token.borderRadiusLG}}
>
{null !== progress && (
<Progress
className={styles["progressBar"] || ""}
percent={progress}
showInfo={false}
size={"small"}
status={"active"}
strokeLinecap={"butt"}/>
)}
</div>
</div>
);
};
export default QueryBox;Possibly relevant snippet from components/webui/imports/ui/SearchView/SearchStatus.jsx (line 36)
const [progress, setProgress] = useState(0);This snippet shows a React state hook for managing a progress value, which may relate to the progress prop used in QueryBoxProps in the main file.
✏️ Learnings added
Learnt from: junhaoliao
PR: y-scope/clp#949
File: components/log-viewer-webui/client/src/components/QueryBox/index.tsx:15-15
Timestamp: 2025-05-30T20:43:38.291Z
Learning: In TypeScript/JavaScript files, exports should be placed at the end of the source file rather than inline with declarations. Prefer pattern like `interface SomeInterface {...}` followed by `export {SomeInterface};` at the end rather than `export interface SomeInterface {...}` at the declaration site.
Learnt from: junhaoliao
PR: y-scope/clp#949
File: components/log-viewer-webui/client/src/components/QueryBox/index.tsx:15-15
Timestamp: 2025-05-30T20:43:38.291Z
Learning: In TypeScript/JavaScript files, exports should be placed at the end of the source file rather than inline with declarations. Prefer pattern like `interface SomeInterface {...}` followed by `export {SomeInterface};` at the end rather than `export interface SomeInterface {...}` at the declaration site.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
junhaoliao
left a comment
There was a problem hiding this comment.
for the title, how about
feat(new-webui): Add a case sensitivity toggle to QueryBox.
Description
Add a case sensitivity toggle to QueryBox.
Checklist
breaking change.
Validation performed
The ui looks good.
Summary by CodeRabbit
New Features
Enhancements