Extract component from ParameterFieldWidget (#17091)

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

@@ -14,7 +14,7 @@ import DateMonthYearWidget from "./widgets/DateMonthYearWidget";
 import DateQuarterYearWidget from "./widgets/DateQuarterYearWidget";
 import DateAllOptionsWidget from "./widgets/DateAllOptionsWidget";
 import TextWidget from "./widgets/TextWidget";
-import ParameterFieldWidget from "./widgets/ParameterFieldWidget";
+import ParameterFieldWidget from "./widgets/ParameterFieldWidget/ParameterFieldWidget";
 
 import { fetchField, fetchFieldValues } from "metabase/redux/metadata";
 import {

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget.jsx → frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidget.jsx

@@ -2,13 +2,15 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
-import { t, ngettext, msgid } from "ttag";
+import { t } from "ttag";
 import _ from "underscore";
 
 import FieldValuesWidget from "metabase/components/FieldValuesWidget";
+import ParameterFieldWidgetValue from "./ParameterFieldWidgetValue/ParameterFieldWidgetValue";
 import Popover from "metabase/components/Popover";
 import Button from "metabase/components/Button";
-import Value from "metabase/components/Value";
+
+import { normalizeValue } from "./normalizeValue";
 
 import cx from "classnames";
 import {
@@ -32,9 +34,6 @@ const propTypes = {
 
 const BORDER_WIDTH = 1;
 
-const normalizeValue = value =>
-  Array.isArray(value) ? value : value != null ? [value] : [];
-
 export default class ParameterFieldWidget extends Component {
   constructor(props) {
     super(props);
@@ -47,24 +46,6 @@ export default class ParameterFieldWidget extends Component {
 
   static noPopover = true;
 
-  static format(value, fields) {
-    value = normalizeValue(value);
-    if (value.length > 1) {
-      const n = value.length;
-      return ngettext(msgid`${n} selection`, `${n} selections`, n);
-    } else {
-      return (
-        <Value
-          // If there are multiple fields, turn off remapping since they might
-          // be remapped to different fields.
-          remap={fields.length === 1}
-          value={value[0]}
-          column={fields[0]}
-        />
-      );
-    }
-  }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.value !== nextProps.value) {
       this.setState({ value: nextProps.value });
@@ -126,7 +107,10 @@ export default class ParameterFieldWidget extends Component {
           onClick={() => focusChanged(true)}
         >
           {savedValue.length > 0 ? (
-            ParameterFieldWidget.format(savedValue, fields)
+            <ParameterFieldWidgetValue
+              savedValue={savedValue}
+              fields={fields}
+            />
           ) : (
             <span>{placeholder}</span>
           )}

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidgetValue/ParameterFieldWidgetValue.jsx

+import React from "react";
+import PropTypes from "prop-types";
+import { ngettext, msgid } from "ttag";
+
+import Value from "metabase/components/Value";
+import { normalizeValue } from "../normalizeValue";
+
+function renderNumberOfSelections(numberOfSelections) {
+  return ngettext(
+    msgid`${numberOfSelections} selection`,
+    `${numberOfSelections} selections`,
+    numberOfSelections,
+  );
+}
+
+export default function ParameterFieldWidgetValue({ savedValue, fields }) {
+  const values = normalizeValue(savedValue);
+
+  const numberOfValues = values.length;
+
+  // If there are multiple fields, turn off remapping since they might
+  // be remapped to different fields.
+  const shouldRemap = fields.length === 1;
+
+  return numberOfValues > 1 ? (
+    renderNumberOfSelections(numberOfValues)
+  ) : (
+    <Value remap={shouldRemap} value={savedValue[0]} column={fields[0]} />
+  );
+}
+
+ParameterFieldWidgetValue.propTypes = {
+  savedValue: PropTypes.array,
+  fields: PropTypes.array,
+};

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidgetValue/ParameterFieldWidgetValue.unit.spec.js

+import React from "react";
+
+import ParameterFieldWidgetValue from "./ParameterFieldWidgetValue";
+import { render, screen } from "@testing-library/react";
+
+const value = "A value";
+
+describe("when fields is empty array", () => {
+  it("renders savedValue if it is a single item", () => {
+    render(<ParameterFieldWidgetValue savedValue={[value]} fields={[]} />);
+    screen.getByText(value);
+  });
+
+  it("renders number of selections if multiple items", () => {
+    render(
+      <ParameterFieldWidgetValue savedValue={[value, value]} fields={[]} />,
+    );
+    screen.getByText("2 selections");
+  });
+});

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/normalizeValue.js

+export function normalizeValue(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return value ? [value] : [];
+}

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/normalizeValue.unit.spec.js

+import { normalizeValue } from "./normalizeValue";
+
+it("returns empty array if value is null", () => {
+  const value = null;
+  const expected = [];
+
+  const normalized = normalizeValue(value);
+
+  expect(normalized).toEqual(expected);
+});
+
+it("returns value if value is an array", () => {
+  const value = [1];
+
+  const normalized = normalizeValue(value);
+
+  expect(normalized).toBe(value);
+});
+
+it("returns value as item of array if passed value is not an array", () => {
+  const value = 1;
+
+  const normalized = normalizeValue(value);
+
+  expect(normalized).toEqual([value]);
+});