Unary number parameter (#43921)

* Allow picking arity of number parameters

* Limit to input to have arity 1 when multi is false

* Use MultiAutocomplete in NumberInputWidget when arity is 1

* Add test cases for single value numbers

* Only change arity when it is n

* Fix unit tests for NumberInputWidget

* Move arity check for numbers to getNumberParameterArity

e2e/test/scenarios/dashboard-filters/dashboard-filters-number.cy.spec.js

@@ -38,9 +38,15 @@ describe("scenarios > dashboard > filters > number", () => {
   });
 
   it("should work when set through the filter widget", () => {
-    Object.entries(DASHBOARD_NUMBER_FILTERS).forEach(([filter]) => {
-      cy.log(`Make sure we can connect ${filter} filter`);
-      setFilter("Number", filter);
+    DASHBOARD_NUMBER_FILTERS.forEach(({ operator, single }) => {
+      cy.log(`Make sure we can connect ${operator} filter`);
+      setFilter("Number", operator);
+
+      if (single) {
+        cy.findAllByRole("radio", { name: "A single value" })
+          .click()
+          .should("be.checked");
+      }
 
       cy.findByText("Select…").click();
       popover().contains("Tax").click();
@@ -48,12 +54,12 @@ describe("scenarios > dashboard > filters > number", () => {
 
     saveDashboard();
 
-    Object.entries(DASHBOARD_NUMBER_FILTERS).forEach(
-      ([filter, { value, representativeResult }], index) => {
+    DASHBOARD_NUMBER_FILTERS.forEach(
+      ({ operator, value, representativeResult }, index) => {
         filterWidget().eq(index).click();
         addWidgetNumberFilter(value);
 
-        cy.log(`Make sure ${filter} filter returns correct result`);
+        cy.log(`Make sure ${operator} filter returns correct result`);
         cy.findByTestId("dashcard").within(() => {
           cy.findByText(representativeResult);
         });

e2e/test/scenarios/dashboard-filters/shared/dashboard-filters-number.js

-export const DASHBOARD_NUMBER_FILTERS = {
-  "Equal to": {
+export const DASHBOARD_NUMBER_FILTERS = [
+  {
+    operator: "Equal to",
     value: "2.07",
     representativeResult: "37.65",
   },
-  "Not equal to": {
+  {
+    operator: "Equal to",
+    value: "2.07",
+    representativeResult: "37.65",
+    single: true,
+  },
+  {
+    operator: "Not equal to",
+    value: "2.07",
+    representativeResult: "110.93",
+  },
+  {
+    operator: "Not equal to",
     value: "2.07",
     representativeResult: "110.93",
+    single: true,
   },
-  Between: {
+  {
+    operator: "Between",
     value: ["3", "5"],
     representativeResult: "68.23",
   },
-  "Greater than or equal to": {
+  {
+    operator: "Greater than or equal to",
     value: "6.01",
     representativeResult: "110.93",
   },
-  "Less than or equal to": {
+  {
+    operator: "Less than or equal to",
     value: "2",
     representativeResult: "29.8",
   },
-};
+];

frontend/src/metabase-lib/v1/parameters/constants.ts

@@ -149,6 +149,7 @@ export const SINGLE_OR_MULTI_SELECTABLE_TYPES: Record<
   category: "any",
   id: "any",
   location: ["=", "!="],
+  number: ["=", "!="],
 };
 
 export const FIELD_FILTER_PARAMETER_TYPES = [

frontend/src/metabase-lib/v1/parameters/utils/operators.ts

@@ -100,6 +100,10 @@ export function getNumberParameterArity(parameter: Parameter) {
   switch (parameter.type) {
     case "number/=":
     case "number/!=":
+      if (!getIsMultiSelect(parameter)) {
+        return 1;
+      }
+
       return "n";
     case "number/between":
       return 2;

frontend/src/metabase/parameters/components/ParameterValueWidget.jsx

@@ -342,6 +342,7 @@ function Widget({
 
   if (isNumberParameter(parameter)) {
     const arity = getNumberParameterArity(parameter);
+
     return (
       <NumberInputWidget
         value={normalizedValue}

frontend/src/metabase/parameters/components/widgets/NumberInputWidget/NumberInputWidget.tsx

@@ -45,7 +45,7 @@ export function NumberInputWidget({
   const allValuesUnset = unsavedArrayValue.every(_.isUndefined);
   const allValuesSet = unsavedArrayValue.every(_.isNumber);
   const isValid =
-    (arity === "n" || unsavedArrayValue.length === arity) &&
+    (arity === "n" || unsavedArrayValue.length <= arity) &&
     (allValuesUnset || allValuesSet);
 
   const onClick = () => {
@@ -61,10 +61,10 @@ export function NumberInputWidget({
   return (
     <WidgetRoot className={className}>
       {label && <WidgetLabel>{label}</WidgetLabel>}
-      {arity === "n" ? (
+      {arity === "n" || arity === 1 ? (
         <TokenFieldWrapper>
           <TokenField
-            multi
+            multi={arity === "n"}
             updateOnInputChange
             autoFocus={autoFocus}
             value={unsavedArrayValue}

frontend/src/metabase/parameters/components/widgets/NumberInputWidget/NumberInputWidget.unit.spec.tsx

@@ -69,7 +69,7 @@ describe("NumberInputWidget", () => {
       );
 
       const textbox = screen.getByRole("textbox");
-      await userEvent.clear(textbox);
+      await userEvent.type(textbox, "{backspace}{backspace}{backspace}");
       await userEvent.type(textbox, "456");
       const button = screen.getByRole("button", { name: "Update filter" });
       await userEvent.click(button);

frontend/src/metabase/parameters/utils/parameter-type.unit.spec.ts

@@ -8,7 +8,7 @@ describe("isSingleOrMultiSelectable", () => {
     const parameter = createMockParameter({
       sectionId: "number",
     });
-    expect(isSingleOrMultiSelectable(parameter)).toBe(false);
+    expect(isSingleOrMultiSelectable(parameter)).toBe(true);
   });
 
   it("is false for parameters with acceptable types and rejected subTypes", () => {