fix(new-webui): Disable case sensitivity toggle while querying. #988
Conversation
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant QueryBox
participant InputWithCaseSensitive
participant CaseSensitiveToggle
User->>QueryBox: Interact with QueryBox
QueryBox->>InputWithCaseSensitive: Pass input and case sensitivity props
InputWithCaseSensitive->>CaseSensitiveToggle: Render toggle as suffix
User->>CaseSensitiveToggle: Click toggle
CaseSensitiveToggle->>InputWithCaseSensitive: onCaseSensitiveChange callback
InputWithCaseSensitive->>QueryBox: (if needed) propagate change
Possibly related PRs
Suggested reviewers
📜 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)
✨ 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx(1 hunks)components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx(1 hunks)components/log-viewer-webui/client/src/components/QueryBox/index.tsx(1 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/components/QueryBox/InputWithCaseSensitive/index.tsxcomponents/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsxcomponents/log-viewer-webui/client/src/components/QueryBox/index.tsx
🧬 Code Graph Analysis (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx (1)
CaseSensitiveToggleProps(68-68)
🔇 Additional comments (5)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
23-38: Clean component implementation with proper prop handling.The component correctly combines InputProps with CaseSensitiveToggleProps, omits the suffix prop appropriately, and uses proper prop destructuring and spreading. The integration of the toggle as a suffix is well-designed.
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx (1)
44-65: Well-structured toggle component with appropriate UI patterns.The component correctly implements:
- Conditional tooltip display based on disabled state
- Visual state indication through button variants (outlined vs text)
- Proper event handling with useCallback optimization
- Accessible button with icon and disabled state handling
components/log-viewer-webui/client/src/components/QueryBox/index.tsx (3)
8-8: Good separation of concerns with new component import.The import of
InputWithCaseSensitiveand its props type enables clean delegation of the case sensitivity toggle functionality.
11-11: Clean props interface extension.Extending
InputWithCaseSensitivePropsproperly inherits all the case sensitivity toggle functionality while maintaining the QueryBox-specificprogressprop.
26-33: Simplified component implementation through delegation.The refactored implementation successfully delegates case sensitivity toggle functionality to
InputWithCaseSensitive, reducing complexity and improving maintainability while preserving all existing functionality.
| InputProps, | ||
| } from "antd"; | ||
|
|
||
| import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSenstiveToggle"; |
There was a problem hiding this comment.
Fix the filename typo in the import.
The imported file name contains a typo: "CaseSenstiveToggle" should be "CaseSensitiveToggle".
-import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSenstiveToggle";
+import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSensitiveToggle";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSenstiveToggle"; | |
| import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSensitiveToggle"; |
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx
at line 6, fix the typo in the import statement by changing "CaseSenstiveToggle"
to "CaseSensitiveToggle" so the import matches the correct filename.
| @@ -0,0 +1,68 @@ | |||
| import {useCallback} from "react"; | |||
There was a problem hiding this comment.
Fix the filename typo.
The filename "CaseSenstiveToggle.tsx" contains a typo and should be "CaseSensitiveToggle.tsx" to match the component name and maintain consistency.
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
at line 1, the filename contains a typo "CaseSenstiveToggle.tsx". Rename the
file to "CaseSensitiveToggle.tsx" to match the component name and ensure
consistency across the codebase.
...og-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
Outdated
Show resolved
Hide resolved
...og-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| /** | ||
| * Renders an Input with a progress bar. | ||
| * Renders a Input with a case sensitivity toggle and progress bar. |
There was a problem hiding this comment.
| * Renders a Input with a case sensitivity toggle and progress bar. | |
| * Renders an Input with a case sensitivity toggle and progress bar. |
| export default InputWithCaseSensitive; | ||
| export type {InputWithCaseSensitiveProps}; |
There was a problem hiding this comment.
| export default InputWithCaseSensitive; | |
| export type {InputWithCaseSensitiveProps}; | |
| export type {InputWithCaseSensitiveProps}; | |
| export default InputWithCaseSensitive; |
| title={(isDisabled) ? | ||
| "" : | ||
| "Match case"} |
There was a problem hiding this comment.
i feel that we disable the toggle should not remove the tooltip. would it be better to always show the tooltip so our users know what this toggle is for even during queries?
There was a problem hiding this comment.
Im not sure, i feel like the tooltip implies interactivity, but u cant click it while search
There was a problem hiding this comment.
i believe for better accessibility, it's always better to keep the tooltips mounted
| title={(isDisabled) ? | |
| "" : | |
| "Match case"} | |
| title={"Match case"} |
| title={(isDisabled) ? | ||
| "" : | ||
| "Match case"} |
There was a problem hiding this comment.
i believe for better accessibility, it's always better to keep the tooltips mounted
| title={(isDisabled) ? | |
| "" : | |
| "Match case"} | |
| title={"Match case"} |
|
|
||
|
|
||
| interface CaseSensitiveToggleProps { | ||
| disabled?: boolean | undefined; |
There was a problem hiding this comment.
it should always be defined in our uses, right?
| disabled?: boolean | undefined; | |
| disabled: boolean; |
There was a problem hiding this comment.
I clean up a bit. Anyways not always defined since it it in component folder, and it takes generic input props from antd where it can be undefined
| const handleButtonClick = useCallback(() => { | ||
| if (false === isDisabled) { | ||
| onCaseSensitiveChange(!isCaseSensitive); | ||
| } | ||
| }, [ | ||
| isDisabled, | ||
| isCaseSensitive, | ||
| onCaseSensitiveChange, | ||
| ]); |
There was a problem hiding this comment.
do we strictly need the isDisabled check? i.e., would handleButtonClick ever be fired if the button is disabled?
| const handleButtonClick = useCallback(() => { | |
| if (false === isDisabled) { | |
| onCaseSensitiveChange(!isCaseSensitive); | |
| } | |
| }, [ | |
| isDisabled, | |
| isCaseSensitive, | |
| onCaseSensitiveChange, | |
| ]); | |
| const handleButtonClick = useCallback(() => { | |
| onCaseSensitiveChange(!isCaseSensitive); | |
| }, [ | |
| isCaseSensitive, | |
| onCaseSensitiveChange, | |
| ]); |
| const isDisabled = disabled ?? false; | ||
|
|
There was a problem hiding this comment.
if we may not need to handle the case where disabled is undefined:
| const isDisabled = disabled ?? false; |
| > | ||
| <Button | ||
| color={"default"} | ||
| disabled={isDisabled} |
There was a problem hiding this comment.
if we may not need to handle the case where disabled is undefined:
| disabled={isDisabled} | |
| disabled={disabled} |
| disabled={isDisabled} | ||
| size={"small"} | ||
| icon={ | ||
| <Typography.Text disabled={isDisabled}> |
There was a problem hiding this comment.
if we may not need to handle the case where disabled is undefined:
| <Typography.Text disabled={isDisabled}> | |
| <Typography.Text disabled={disabled}> |
|
|
||
| export default CaseSensitiveToggle; | ||
| export type {CaseSensitiveToggleProps}; |
There was a problem hiding this comment.
| export default CaseSensitiveToggle; | |
| export type {CaseSensitiveToggleProps}; | |
| export type {CaseSensitiveToggleProps}; | |
| export default CaseSensitiveToggle; |
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
6-6: Fix the filename typo in the import path.The imported module path contains a typo: it should reference
./CaseSensitiveToggleto match the component name and filename.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx(1 hunks)components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx(1 hunks)components/log-viewer-webui/client/src/components/QueryBox/index.tsx(1 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/components/QueryBox/InputWithCaseSensitive/index.tsxcomponents/log-viewer-webui/client/src/components/QueryBox/index.tsxcomponents/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
🧬 Code Graph Analysis (2)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx (1)
CaseSensitiveToggleProps(68-68)
components/log-viewer-webui/client/src/components/QueryBox/index.tsx (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
InputWithCaseSensitiveProps(40-40)
🔇 Additional comments (6)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (4)
12-12: Good use ofOmitto exclude thesuffixprop.Composing
InputProps(minussuffix) with the toggle props cleanly avoids prop conflicts.
23-27: Destructure and forward input props clearly.Extracting
isCaseSensitiveandonCaseSensitiveChangeand spreading the rest into theInputmakes the API concise and flexible.
31-35: Inject the toggle as the input suffix.Embedding
CaseSensitiveToggleinsuffixneatly encapsulates the toggle behavior alongside the text input.
40-42: Exports look good.Exporting the props type separately and default-exporting the component aligns with our module conventions.
components/log-viewer-webui/client/src/components/QueryBox/index.tsx (2)
11-16: Extend the toggle props directly inQueryBoxProps.Using
extends InputWithCaseSensitivePropscleanly inherits all input and toggle props, simplifying the component API.
33-33: Clean integration ofInputWithCaseSensitive.Spreading
inputPropsintoInputWithCaseSensitiveensures all relevant props (including case toggle) are passed through neatly.
...og-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
Outdated
Show resolved
Hide resolved
...og-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
Show resolved
Hide resolved
| /** | ||
| * Renders an Input with a progress bar. | ||
| * Renders an Input with a case sensitivity toggle and progress bar. | ||
| * | ||
| * @param props | ||
| * @param props.progress | ||
| * @param props.inputProps | ||
| * @param props.onCaseSensitiveChange | ||
| * @param props.isCaseSensitive | ||
| * @return | ||
| */ |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Update JSDoc to reflect actual props.
The @param props.inputProps tag is misleading—there is no inputProps prop. Rename or remove this line and document isCaseSensitive and onCaseSensitiveChange explicitly, along with progress.
🤖 Prompt for AI Agents
In components/log-viewer-webui/client/src/components/QueryBox/index.tsx around
lines 18 to 25, the JSDoc incorrectly documents a non-existent prop named
inputProps. Remove or rename the @param tag for inputProps and explicitly add
@param tags for the actual props isCaseSensitive and onCaseSensitiveChange,
along with progress, to accurately reflect the component's props.
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (2)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
6-6: Fix the import-path typo.The filename is still spelled “CaseSenstiveToggle”; rename to “CaseSensitiveToggle” to match the component/file name and avoid module-resolution failures.
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx (1)
1-1: Rename the file toCaseSensitiveToggle.tsx.The class/component name and import path expect the correct spelling. Keeping the typo makes cross-file imports fragile.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx(1 hunks)components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx(1 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/components/QueryBox/InputWithCaseSensitive/index.tsxcomponents/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
🧬 Code Graph Analysis (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx (1)
CaseSensitiveToggleProps(67-67)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx
Show resolved
Hide resolved
| const handleButtonClick = useCallback(() => { | ||
| onCaseSensitiveChange(!isCaseSensitive); | ||
| }, [ | ||
| isCaseSensitive, | ||
| onCaseSensitiveChange, | ||
| ]); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Use explicit comparison instead of unary “!” per coding guidelines.
Replace the negation with the preferred style:
- onCaseSensitiveChange(!isCaseSensitive);
+ onCaseSensitiveChange(false == isCaseSensitive);This keeps the behaviour identical while aligning with the project’s boolean-expression rule.
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
around lines 32 to 37, the code uses a unary "!" operator to negate the boolean
isCaseSensitive. To comply with the project's coding guidelines, replace the
negation with an explicit comparison expression that achieves the same boolean
toggle effect without using "!". This will maintain the behavior while adhering
to the boolean-expression rule.
...og-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
Outdated
Show resolved
Hide resolved
| {...(disabled ? | ||
| {disabled: disabled} : | ||
| {})} | ||
| color={"default"} | ||
| size={"small"} | ||
| icon={ | ||
| <Typography.Text | ||
| {...(disabled ? | ||
| {disabled: disabled} : | ||
| {})} | ||
| > | ||
| Aa | ||
| </Typography.Text> | ||
| } | ||
| variant={isCaseSensitive ? | ||
| "outlined" : | ||
| "text"} |
There was a problem hiding this comment.
Invalid Ant Design props (color, variant) will break compilation.
antd’s Button does not accept color or variant; use its type and ghost/danger modifiers instead, e.g.:
- color={"default"}
+ type={"default"}
…
- variant={isCaseSensitive ? "outlined" : "text"}
+ ghost={isCaseSensitive} // outlined-look
+ type={isCaseSensitive ? "default" : "text"}Leaving the current props will cause a TS error (Property 'variant' does not exist …) and runtime warnings.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {...(disabled ? | |
| {disabled: disabled} : | |
| {})} | |
| color={"default"} | |
| size={"small"} | |
| icon={ | |
| <Typography.Text | |
| {...(disabled ? | |
| {disabled: disabled} : | |
| {})} | |
| > | |
| Aa | |
| </Typography.Text> | |
| } | |
| variant={isCaseSensitive ? | |
| "outlined" : | |
| "text"} | |
| {...(disabled ? | |
| {disabled: disabled} : | |
| {})} | |
| type={"default"} | |
| size={"small"} | |
| icon={ | |
| <Typography.Text | |
| {...(disabled ? | |
| {disabled: disabled} : | |
| {})} | |
| > | |
| Aa | |
| </Typography.Text> | |
| } | |
| ghost={isCaseSensitive} // outlined-look | |
| type={isCaseSensitive ? "default" : "text"} |
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
between lines 44 and 60, the Button component incorrectly uses unsupported props
'color' and 'variant' which cause TypeScript errors and runtime warnings. Remove
these props and replace them by using Ant Design's supported 'type' prop and
modifiers like 'ghost' or 'danger' to achieve the desired styling. Adjust the
Button's appearance logic accordingly to use these valid props instead of
'color' and 'variant'.
|
|
||
|
|
||
| interface CaseSensitiveToggleProps { | ||
| disabled?: boolean; |
There was a problem hiding this comment.
sorry i didn't get the previous comment - what's the reason we can't make this prop required?
| disabled?: boolean; | |
| disabled: boolean; |
Merge branch 'rmdis' of https://github.com/davemarco/clp into rmdis
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
6-6:⚠️ Potential issueImport still referencing the miss-spelled file
The import path keeps the original “CaseSenstiveToggle” typo. The companion file has not been renamed yet, so the typo now leaks into every consumer and will survive tree-shaking / barrel exports.
-import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSenstiveToggle"; +import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSensitiveToggle";components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx (3)
1-1:⚠️ Potential issueRename file to match component
The filename “CaseSenstiveToggle.tsx” is miss-spelled; keep the codebase grep-friendly and avoid future import typos by renaming to “CaseSensitiveToggle.tsx”.
32-37: 🧹 Nitpick (assertive)Boolean negation breaks project style guide
Per the repo’s guideline, prefer
false == <expr>over!<expr>.- onCaseSensitiveChange(!isCaseSensitive); + onCaseSensitiveChange(false == isCaseSensitive);
44-55:⚠️ Potential issue
colorandvariantare not valid Ant Design props – build will failAnt Design’s
<Button>supportstype,ghost,danger, etc., but notcolororvariant. Keeping them causes TS errors and runtime warnings.A minimal, compile-safe replacement preserving the “outlined vs text” look:
- <Button - color={"default"} + <Button disabled={disabled} size={"small"} icon={ <Typography.Text disabled={disabled}> Aa </Typography.Text> } - variant={isCaseSensitive ? - "outlined" : - "text"} + ghost={isCaseSensitive} /* outlined */ + type={"default"}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx(1 hunks)components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx(1 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/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsxcomponents/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx
🧬 Code Graph Analysis (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx (1)
CaseSensitiveToggleProps(61-61)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: lint-check (ubuntu-latest)
- GitHub Check: lint-check (macos-latest)
🔇 Additional comments (1)
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx (1)
31-35: Spread already containsdisabled; avoid double-sourceBecause
disabledis part ofinputProps, passing it again risks divergence if callers mutate it prior to reuse.- <CaseSensitiveToggle - disabled={inputProps.disabled} + <CaseSensitiveToggleReact will forward
disabledtogether with the rest ofinputProps.
[ suggest_optional_refactor ]
| type InputWithCaseSensitiveProps = Omit<InputProps, "suffix"> & CaseSensitiveToggleProps; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
disabled becomes mandatory due to type intersection
InputProps declares disabled?: boolean (optional) but CaseSensitiveToggleProps declares disabled: boolean (required).
The intersection forces the final prop to be required, breaking existing call-sites that omit it.
Make disabled optional in CaseSensitiveToggleProps, or remove it so callers rely on InputProps alone.
-interface CaseSensitiveToggleProps {
- disabled: boolean;
+interface CaseSensitiveToggleProps {
+ disabled?: boolean;Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In
components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx
around lines 12 to 13, the intersection of InputProps and
CaseSensitiveToggleProps makes the 'disabled' prop required because
CaseSensitiveToggleProps declares it as mandatory while InputProps has it
optional. To fix this, modify CaseSensitiveToggleProps to make 'disabled'
optional or remove 'disabled' from CaseSensitiveToggleProps entirely so that
callers can rely on the optional 'disabled' from InputProps, preventing breaking
existing call-sites.
...og-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx
Outdated
Show resolved
Hide resolved
…utWithCaseSensitive/CaseSenstiveToggle.tsx Co-authored-by: Junhao Liao <junhao@junhao.ca>
Description
Overall case sensitive toggle looks great, but this PR adds some minor cleanup.
PR disables the button during query like the other buttons. Also, previously it used disabled state to represent one of the case sensitive options, which showed the disabled icon on hover, i thought this was undesirable so i just moved to outline for active like vscode.
I also did some refactoring in process
Checklist
breaking change.
Validation performed
Summary by CodeRabbit
New Features
Refactor