move booleanPicker to typescript (#22993)

frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx → frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.tsx

@@ -44,6 +44,6 @@ Toggle.propTypes = {
   onClick: PropTypes.func.isRequired,
 };
 
-export function Toggle({ onClick }) {
+export function Toggle({ onClick }: { onClick: () => void }) {
   return <ToggleButton onClick={onClick}>{t`More options`}</ToggleButton>;
 }

frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.jsx → frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.tsx

-import React from "react";
-import { PropTypes } from "prop-types";
+import React, { Key } from "react";
 import _ from "underscore";
 import { t } from "ttag";
 
 import { useToggle } from "metabase/hooks/use-toggle";
 import Filter from "metabase-lib/lib/queries/structured/Filter";
+import { RadioOption } from "metabase/core/components/Radio/Radio";
 
 import { Container, Toggle, FilterRadio } from "./BooleanPicker.styled";
 
-BooleanPicker.propTypes = {
-  className: PropTypes.string,
-  filter: PropTypes.instanceOf(Filter),
-  onFilterChange: PropTypes.func.isRequired,
-};
-
-const OPTIONS = [
+const OPTIONS: RadioOption<boolean>[] = [
   { name: t`true`, value: true },
   { name: t`false`, value: false },
 ];
-const EXPANDED_OPTIONS = [
+
+const EXPANDED_OPTIONS: RadioOption<string | boolean | any>[] = [
   { name: t`true`, value: true },
   { name: t`false`, value: false },
   { name: t`empty`, value: "is-null" },
   { name: t`not empty`, value: "not-null" },
 ];
 
-function BooleanPicker({ className, filter, onFilterChange }) {
+interface BooleanPickerProps {
+  className?: string;
+  filter: Filter;
+  onFilterChange: (filter: Filter) => void;
+}
+
+function BooleanPicker({
+  className,
+  filter,
+  onFilterChange,
+}: BooleanPickerProps) {
   const value = getValue(filter);
   const [isExpanded, { toggle }] = useToggle(!_.isBoolean(value));
 
-  const updateFilter = value => {
+  const updateFilter = (value: Key) => {
     if (_.isBoolean(value)) {
       onFilterChange(filter.setOperator("=").setArguments([value]));
-    } else {
+    } else if (typeof value === "string") {
       onFilterChange(filter.setOperator(value));
     }
   };
@@ -51,7 +56,7 @@ function BooleanPicker({ className, filter, onFilterChange }) {
   );
 }
 
-function getValue(filter) {
+function getValue(filter: Filter) {
   const operatorName = filter.operatorName();
   if (operatorName === "=") {
     const [value] = filter.arguments();

frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.js → frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.tsx

+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import React from "react";
 import { render, screen } from "@testing-library/react";