Refactor TableFilter component and related files

frontend/taipy-gui/src/components/Taipy/TableFilter.spec.tsx

@@ -48,7 +48,8 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
     delete window.matchMedia;
 });
 
@@ -115,7 +116,7 @@ describe("Table Filter Component", () => {
         expect(validate).not.toBeDisabled();
     });
     it("behaves on boolean column", async () => {
-        const { getByTestId, getAllByTestId, findByRole, getByText, getAllByText } = render(
+        const { getByTestId, getAllByTestId, findByRole, getByText } = render(
             <TableFilter columns={tableColumns} colsOrder={colsOrder} onValidate={jest.fn()} filteredCount={0} />
         );
         const elt = getByTestId("FilterListIcon");
@@ -267,7 +268,7 @@ describe("Table Filter Component - Case Insensitive Test", () => {
         await userEvent.click(getByText("contains"));
 
         // Check for the case-sensitive toggle and interact with it
-        const caseSensitiveToggle = await screen.findByTestId("CaseSensitiveToggle");
+        const caseSensitiveToggle = screen.getByRole("checkbox", { name: /case sensitive toggle/i });
         expect(caseSensitiveToggle).toBeInTheDocument(); // Ensure the toggle is rendered
         await userEvent.click(caseSensitiveToggle); // Toggle case sensitivity off
 

frontend/taipy-gui/src/components/Taipy/TableFilter.tsx

@@ -27,14 +27,13 @@ import Popover, { PopoverOrigin } from "@mui/material/Popover";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
+import Switch from "@mui/material/Switch";
 import { DateField, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 
 import { ColumnDesc, defaultDateFormat, getSortByIndex, iconInRowSx, FilterDesc } from "./tableUtils";
 import { getDateTime, getTypeFromDf } from "../../utils";
 import { getSuffixedClassNames } from "./utils";
-import SvgIcon from "@mui/icons-material/Check";
-import { FormControlLabel, Switch } from "@mui/material";
 import { MatchCase } from "../icons/MatchCase";
 
 interface TableFilterProps {
@@ -100,6 +99,7 @@ const getFilterDesc = (
     colId?: string,
     act?: string,
     val?: string,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     matchCase?: boolean
 ) => {
     if (colId && act && val !== undefined) {
@@ -311,7 +311,7 @@ const FilterRow = (props: FilterRowProps) => {
                                         size="small"
                                         checkedIcon={<MatchCase />}
                                         icon={<MatchCase color="disabled" />}
-                                        data-testid="CaseSensitiveToggle"
+                                        inputProps={{ "aria-label": "Case Sensitive Toggle" }}
                                     />
                                 ),
                             },

frontend/taipy-gui/src/components/icons/MatchCase.tsx

@@ -1,4 +1,18 @@
-import { SvgIcon, SvgIconProps } from "@mui/material";
+/*
+ * Copyright 2021-2024 Avaiga Private Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import React from "react";
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
 
 export const MatchCase = (props: SvgIconProps) => (
     <SvgIcon {...props} viewBox="0 0 16 16">