From 451e72375c2ae2e3eb80c3f4084de55bc19476d0 Mon Sep 17 00:00:00 2001
From: Ryan Laurie <30528226+iethree@users.noreply.github.com>
Date: Fri, 27 May 2022 10:42:23 -0600
Subject: [PATCH] move booleanPicker to typescript (#22993)

---
 ...er.styled.jsx => BooleanPicker.styled.tsx} |  2 +-
 .../{BooleanPicker.jsx => BooleanPicker.tsx}  | 33 +++++++++++--------
 ...it.spec.js => BooleanPicker.unit.spec.tsx} |  2 ++
 3 files changed, 22 insertions(+), 15 deletions(-)
 rename frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/{BooleanPicker.styled.jsx => BooleanPicker.styled.tsx} (94%)
 rename frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/{BooleanPicker.jsx => BooleanPicker.tsx} (69%)
 rename frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/{BooleanPicker.unit.spec.js => BooleanPicker.unit.spec.tsx} (97%)

diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.tsx
similarity index 94%
rename from frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx
rename to frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.tsx
index 4d10462a85d..e1c7f99ab3d 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.jsx
+++ b/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>;
 }
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.tsx
similarity index 69%
rename from frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.jsx
rename to frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.tsx
index 0b7593e173e..bda38ef51e5 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.tsx
@@ -1,38 +1,43 @@
-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();
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.js b/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.tsx
similarity index 97%
rename from frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.js
rename to frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.tsx
index d5be9e50f48..c125e09a1f2 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.js
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.unit.spec.tsx
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import React from "react";
 import { render, screen } from "@testing-library/react";
 
-- 
GitLab