Fix Zero Filters not loading URL Parameters (#27342)

* use null coalescing operator to allow numeric zero values

* add tests

* update storybook types

frontend/src/metabase/components/TextWidget/TextWidget.stories.tsx

@@ -11,7 +11,7 @@ export default {
 const Template: ComponentStory<typeof TextWidget> = args => {
   const [{ value }, updateArgs] = useArgs();
 
-  const setValue = (value: string | null) => {
+  const setValue = (value: string | number | null) => {
     updateArgs({ value });
   };
 

frontend/src/metabase/components/TextWidget/TextWidget.tsx

@@ -5,8 +5,8 @@ import { forceRedraw } from "metabase/lib/dom";
 import { KEYCODE_ENTER, KEYCODE_ESCAPE } from "metabase/lib/keyboard";
 
 type Props = {
-  value: string;
-  setValue: (v: string | null) => void;
+  value: string | number;
+  setValue: (v: string | number | null) => void;
   className?: string;
   isEditing: boolean;
   commitImmediately?: boolean;
@@ -16,7 +16,7 @@ type Props = {
 };
 
 type State = {
-  value: string | null;
+  value: string | number | null;
   isFocused: boolean;
 };
 
@@ -73,11 +73,11 @@ class TextWidget extends React.Component<Props, State> {
       <input
         className={className}
         type="text"
-        value={value || ""}
+        value={value ?? ""}
         onChange={e => {
           this.setState({ value: e.target.value });
           if (this.props.commitImmediately) {
-            this.props.setValue(e.target.value || null);
+            this.props.setValue(e.target.value ?? null);
           }
         }}
         onKeyUp={e => {
@@ -85,7 +85,7 @@ class TextWidget extends React.Component<Props, State> {
           if (e.keyCode === KEYCODE_ESCAPE) {
             target.blur();
           } else if (e.keyCode === KEYCODE_ENTER) {
-            setValue(this.state.value || null);
+            setValue(this.state.value ?? null);
             target.blur();
           }
         }}

frontend/src/metabase/components/TextWidget/TextWidget.unit.spec.tsx

-import React from "react";
+import React, { useState } from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 import TextWidget from "./TextWidget";
 
+const TextInputWithStateWrapper = ({ value }: { value?: number | string }) => {
+  const [val, setVal] = useState<number | string | null>(value ?? "");
+  return (
+    <TextWidget value={val ?? ""} setValue={setVal} focusChanged={jest.fn()} />
+  );
+};
+
 describe("TextWidget", () => {
   it("should render correctly", () => {
     render(
@@ -28,4 +37,30 @@ describe("TextWidget", () => {
     });
     expect(screen.getByRole("textbox")).toHaveValue("Toucan McBird");
   });
+
+  it("should render a zero as an initial value", () => {
+    render(
+      <TextWidget value={0} setValue={jest.fn()} focusChanged={jest.fn()} />,
+    );
+
+    expect(screen.getByRole("textbox")).toHaveValue("0");
+  });
+
+  it("should accept zero as an input value", async () => {
+    render(<TextInputWithStateWrapper />);
+
+    const textbox = screen.getByRole("textbox");
+
+    await userEvent.type(textbox, "0");
+    expect(textbox).toHaveValue("0");
+  });
+
+  it("should keep zero value when pressing enter", async () => {
+    render(<TextInputWithStateWrapper />);
+
+    const textbox = screen.getByRole("textbox");
+
+    await userEvent.type(textbox, "0{enter}");
+    expect(textbox).toHaveValue("0");
+  });
 });

frontend/test/metabase/scenarios/native-filters/reproductions/27257.cy.spec.js

@@ -7,7 +7,7 @@ import {
 
 import * as SQLFilter from "../helpers/e2e-sql-filter-helpers";
 
-describe.skip("issue 27257", () => {
+describe("issue 27257", () => {
   beforeEach(() => {
     cy.intercept("POST", "/api/dataset").as("dataset");