fix(new-webui): Disable case sensitivity toggle while querying. (#988)

Author: davemarco

components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/CaseSenstiveToggle.tsx

@@ -0,0 +1,61 @@
+import {useCallback} from "react";
+
+import {
+    Button,
+    Tooltip,
+    Typography,
+} from "antd";
+
+
+interface CaseSensitiveToggleProps {
+    disabled: boolean;
+    isCaseSensitive: boolean;
+    onCaseSensitiveChange: (newValue: boolean) => void;
+}
+
+/**
+ * A toggle button component that switches between case-sensitive and case-insensitive
+ * modes when clicked.
+ *
+ * @param props
+ * @param props.disabled
+ * @param props.isCaseSensitive
+ * @param props.onCaseSensitiveChange
+ * @return
+ */
+const CaseSensitiveToggle = ({
+    disabled,
+    isCaseSensitive,
+    onCaseSensitiveChange,
+}: CaseSensitiveToggleProps) => {
+    const handleButtonClick = useCallback(() => {
+        onCaseSensitiveChange(!isCaseSensitive);
+    }, [
+        isCaseSensitive,
+        onCaseSensitiveChange,
+    ]);
+
+    return (
+        <Tooltip
+            title={"Match case"}
+        >
+            <Button
+                color={"default"}
+                disabled={disabled}
+                size={"small"}
+                icon={
+                    <Typography.Text disabled={disabled}>
+                        Aa
+                    </Typography.Text>
+                }
+                variant={isCaseSensitive ?
+                    "outlined" :
+                    "text"}
+                onClick={handleButtonClick}/>
+        </Tooltip>
+    );
+};
+
+
+export type {CaseSensitiveToggleProps};
+export default CaseSensitiveToggle;

components/log-viewer-webui/client/src/components/QueryBox/InputWithCaseSensitive/index.tsx

@@ -0,0 +1,41 @@
+import {
+    Input,
+    InputProps,
+} from "antd";
+
+import CaseSensitiveToggle, {CaseSensitiveToggleProps} from "./CaseSenstiveToggle";
+
+
+/**
+ * Antd Input props and case sensitive toggle props with suffix omitted since set by component.
+ */
+type InputWithCaseSensitiveProps = Omit<InputProps, "suffix"> & CaseSensitiveToggleProps;
+
+/**
+ * Antd Input with a built-in case sensitivity toggle.
+ *
+ * @param props
+ * @param props.isCaseSensitive
+ * @param props.onCaseSensitiveChange
+ * @param props.inputProps
+ * @return
+ */
+const InputWithCaseSensitive = ({
+    isCaseSensitive,
+    onCaseSensitiveChange,
+    ...inputProps
+}: InputWithCaseSensitiveProps) => {
+    return (
+        <Input
+            {...inputProps}
+            suffix={
+                <CaseSensitiveToggle
+                    disabled={inputProps.disabled}
+                    isCaseSensitive={isCaseSensitive}
+                    onCaseSensitiveChange={onCaseSensitiveChange}/>
+            }/>
+    );
+};
+
+export type {InputWithCaseSensitiveProps};
+export default InputWithCaseSensitive;

components/log-viewer-webui/client/src/components/QueryBox/index.tsx

@@ -1,92 +1,36 @@
-import {useCallback} from "react";
-
 import {
-    Button,
-    Input,
-    InputProps,
     Progress,
     theme,
-    Tooltip,
-    Typography,
 } from "antd";
 import {Nullable} from "src/typings/common";
 
 import styles from "./index.module.css";
+import InputWithCaseSensitive, {InputWithCaseSensitiveProps} from "./InputWithCaseSensitive";
 
 
-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) => {
-    const handleButtonClick = useCallback(() => {
-        onCaseSensitiveChange(!isCaseSensitive);
-    }, [
-        isCaseSensitive,
-        onCaseSensitiveChange,
-    ]);
-
-    return (
-        <Tooltip title={"Match case"}>
-            <Button
-                color={"default"}
-                icon={<Typography.Text disabled={!isCaseSensitive}>Aa</Typography.Text>}
-                size={"small"}
-                variant={isCaseSensitive ?
-                    "filled" :
-                    "text"}
-                onClick={handleButtonClick}/>
-        </Tooltip>
-    );
-};
-
-
-interface QueryBoxProps extends InputProps, CaseSensitiveToggleProps {
+interface QueryBoxProps extends InputWithCaseSensitiveProps {
     /**
      * 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.
+ * 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
  */
 const QueryBox = ({
     progress,
-    isCaseSensitive,
-    onCaseSensitiveChange,
     ...inputProps
 }: QueryBoxProps) => {
     const {token} = theme.useToken();
     return (
         <div className={styles["queryBox"]}>
-            <Input
-                {...inputProps}
-                suffix={<CaseSensitiveToggle
-                    isCaseSensitive={isCaseSensitive}
-                    onCaseSensitiveChange={onCaseSensitiveChange}/>}/>
+            <InputWithCaseSensitive {...inputProps}/>
             <div
                 className={styles["progressBarMask"]}
                 style={{borderRadius: token.borderRadiusLG}}