Add title to NumberInputWidget (#23418)

* Add title to NumberInputWidget

* make it a label

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

@@ -4,7 +4,10 @@ import { t } from "ttag";
 import cx from "classnames";
 import _ from "underscore";
 
-import { getParameterIconName } from "metabase/parameters/utils/ui";
+import {
+  getParameterIconName,
+  getParameterWidgetTitle,
+} from "metabase/parameters/utils/ui";
 import { isDashboardParameterWithoutMapping } from "metabase/parameters/utils/dashboards";
 import {
   isDateParameter,
@@ -270,6 +273,7 @@ function Widget({
         infixText={typeof arity === "number" && arity > 1 ? t`and` : undefined}
         autoFocus
         placeholder={isEditing ? t`Enter a default value…` : undefined}
+        label={getParameterWidgetTitle(parameter)}
       />
     );
   } else if (!_.isEmpty(parameter.fields)) {

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

@@ -6,8 +6,10 @@ import TokenField, { parseNumberValue } from "metabase/components/TokenField";
 import NumericInput from "metabase/core/components/NumericInput";
 import {
   WidgetRoot,
+  WidgetLabel,
   Footer,
   UpdateButton,
+  TokenFieldWrapper,
 } from "metabase/parameters/components/widgets/Widget.styled";
 
 export type NumberInputWidgetProps = {
@@ -18,6 +20,7 @@ export type NumberInputWidgetProps = {
   infixText?: string;
   autoFocus?: boolean;
   placeholder?: string;
+  label?: string;
 };
 
 const OPTIONS: any[] = [];
@@ -30,6 +33,7 @@ function NumberInputWidget({
   infixText,
   autoFocus,
   placeholder = t`Enter a number`,
+  label,
 }: NumberInputWidgetProps) {
   const arrayValue = normalize(value);
   const [unsavedArrayValue, setUnsavedArrayValue] = useState<
@@ -54,19 +58,22 @@ function NumberInputWidget({
 
   return (
     <WidgetRoot className={className}>
+      {label && <WidgetLabel>{label}</WidgetLabel>}
       {arity === "n" ? (
-        <TokenField
-          multi
-          updateOnInputChange
-          autoFocus={autoFocus}
-          value={unsavedArrayValue}
-          parseFreeformValue={parseNumberValue}
-          onChange={newValue => {
-            setUnsavedArrayValue(newValue);
-          }}
-          options={OPTIONS}
-          placeholder={placeholder}
-        />
+        <TokenFieldWrapper>
+          <TokenField
+            multi
+            updateOnInputChange
+            autoFocus={autoFocus}
+            value={unsavedArrayValue}
+            parseFreeformValue={parseNumberValue}
+            onChange={newValue => {
+              setUnsavedArrayValue(newValue);
+            }}
+            options={OPTIONS}
+            placeholder={placeholder}
+          />
+        </TokenFieldWrapper>
       ) : (
         times(arity, i => (
           <div className="inline-block" key={i}>

frontend/src/metabase/parameters/components/widgets/Widget.styled.tsx

@@ -8,6 +8,13 @@ export const WidgetRoot = styled.div`
   min-width: 300px;
 `;
 
+export const WidgetLabel = styled.label`
+  display: block;
+  font-weight: bold;
+  margin: ${space(1)};
+  margin-bottom: 0;
+`;
+
 export const Footer = styled.div`
   border-top: 1px solid ${color("border")};
   padding: ${space(1)};
@@ -24,3 +31,8 @@ export const UpdateButton = styled(Button)`
 UpdateButton.defaultProps = {
   purple: true,
 };
+
+export const TokenFieldWrapper = styled.div`
+  margin: ${space(1)};
+  border: 1px solid ${color("border")};
+`;

frontend/src/metabase/parameters/utils/ui.js

 import _ from "underscore";
+import { isEqualsOperator } from "metabase/lib/schema_metadata";
+
 import { getParameterType } from "./parameter-type";
+import { deriveFieldOperatorFromParameter } from "./operators";
 
 export function getParameterIconName(parameter) {
   const type = getParameterType(parameter);
@@ -31,3 +34,12 @@ export function getVisibleParameters(parameters, hiddenParameterSlugs) {
 
   return parameters.filter(p => !hiddenParametersSlugSet.has(p.slug));
 }
+
+export function getParameterWidgetTitle(parameter) {
+  const operator = deriveFieldOperatorFromParameter(parameter);
+  const { verboseName } = operator || {};
+
+  if (verboseName && !isEqualsOperator(operator)) {
+    return `${verboseName}…`;
+  }
+}

frontend/src/metabase/parameters/utils/ui.unit.spec.js

@@ -2,6 +2,7 @@ import {
   getParameterIconName,
   buildHiddenParametersSlugSet,
   getVisibleParameters,
+  getParameterWidgetTitle,
 } from "./ui";
 
 describe("parameters/utils/ui", () => {
@@ -64,4 +65,25 @@ describe("parameters/utils/ui", () => {
       ]);
     });
   });
+
+  describe("getParameterWidgetTitle", () => {
+    it("should return a title for the given parameter", () => {
+      expect(getParameterWidgetTitle({ type: "string/starts-with" })).toEqual(
+        "Starts with…",
+      );
+
+      expect(getParameterWidgetTitle({ type: "number/between" })).toEqual(
+        "Between…",
+      );
+    });
+
+    it("should not return a title for equal operator parameters", () => {
+      expect(getParameterWidgetTitle({ type: "string/=" })).toBeUndefined();
+      expect(getParameterWidgetTitle({ type: "number/=" })).toBeUndefined();
+    });
+
+    it("should default to undefined for parameters without operators", () => {
+      expect(getParameterWidgetTitle({ type: "category" })).toBeUndefined();
+    });
+  });
 });