Fix configuration settings to allow a zero value. (PP-1353) (#114)

* Fix report modal style. * Allow zero as a configuration value. * Fix a few issues flagged by eslint.
ThePalaceProject · Jun 11, 2024 · 5fe560a · 5fe560a
1 parent 542a0b9
commit 5fe560a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/src/components/EditableInput.tsx b/src/components/EditableInput.tsx
@@ -1,5 +1,8 @@
 import * as React from "react";
 import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+import { defaultValueIfMissing } from "./ProtocolFormField";
+
+const DEFAULT_VALUE = "";
 
 let descriptonIdCounter = 0;
 
@@ -45,7 +48,7 @@ export default class EditableInput extends React.Component<
   constructor(props) {
     super(props);
     this.state = {
-      value: props.value || "",
+      value: defaultValueIfMissing(props?.value, DEFAULT_VALUE),
       checked: props.checked || false,
     };
     this.handleChange = this.handleChange.bind(this);
@@ -168,7 +171,7 @@ export default class EditableInput extends React.Component<
     let checked = this.state.checked;
     let changed = false;
     if (nextProps.value !== this.props.value) {
-      value = nextProps.value || "";
+      value = defaultValueIfMissing(nextProps.value, DEFAULT_VALUE);
       changed = true;
     }
     if (nextProps.checked !== this.props.checked) {

diff --git a/src/components/InventoryReportRequestModal.tsx b/src/components/InventoryReportRequestModal.tsx
@@ -195,9 +195,7 @@ const renderModal = ({
         </Modal.Header>
       )}
       {!!content && (
-        <Modal.Body styles={{ overflow: "wrap", color: "red" }}>
-          {content}
-        </Modal.Body>
+        <Modal.Body style={{ overflow: "wrap" }}>{content}</Modal.Body>
       )}
       {!!footer && <Modal.Footer>{footer}</Modal.Footer>}
     </Modal>

diff --git a/src/components/ProtocolFormField.tsx b/src/components/ProtocolFormField.tsx
@@ -12,8 +12,8 @@ export interface ProtocolFormFieldProps {
   value?:
     | string
     | string[]
-    | {}[]
-    | Array<string | {} | JSX.Element>
+    | object[]
+    | Array<string | object | JSX.Element>
     | JSX.Element;
   altValue?: string;
   default?: any;
@@ -27,11 +27,17 @@ export interface ProtocolFormFieldProps {
   disableButton?: boolean;
 }
 
+const valueIsMissing = (value: any): boolean =>
+  value === undefined || value === null;
+
+export const defaultValueIfMissing = (value: any, defaultValue: any) =>
+  valueIsMissing(value) ? defaultValue : value;
+
 /** Shows a form field for editing a single setting, based on setting information
     from the server. */
 export default class ProtocolFormField extends React.Component<
   ProtocolFormFieldProps,
-  {}
+  object
 > {
   private inputListRef = React.createRef<InputList>();
   private colorPickerRef = React.createRef<ColorPicker>();
@@ -59,10 +65,10 @@ export default class ProtocolFormField extends React.Component<
     }
   }
 
-  renderSetting(setting: SettingData, customProps = null): JSX.Element {
+  renderSetting(setting: SettingData): JSX.Element {
     return (
       <div className={setting.randomizable ? "randomizable" : ""}>
-        {this.props.value && setting.type === "image" && (
+        {!valueIsMissing(this.props?.value) && setting.type === "image" && (
           <img src={String(this.props.value)} alt="" role="presentation" />
         )}
         {this.createEditableInput(setting)}
@@ -111,7 +117,7 @@ export default class ProtocolFormField extends React.Component<
       label: setting.label,
       required: setting.required,
       description: setting.description,
-      value: (this.props && this.props.value) || setting.default,
+      value: defaultValueIfMissing(this.props.value, setting.default),
       error: this.props && this.props.error,
       ref: this.elementRef,
       onChange: this.props.onChange,

diff --git a/src/components/__tests__/EditableInput-test.tsx b/src/components/__tests__/EditableInput-test.tsx
@@ -50,11 +50,16 @@ describe("EditableInput", () => {
     expect(description.html()).to.contain("<p>description</p>");
   });
 
-  it("shows initial value from props", () => {
+  it("shows initial value from props, even if zero", () => {
     expect(wrapper.state().value).to.equal("initial value");
-    const input = wrapper.find("input");
+    let input = wrapper.find("input");
     expect(input.prop("value")).to.equal("initial value");
     expect(input.prop("checked")).to.equal(true);
+
+    wrapper.setProps({ value: 0});
+    expect(wrapper.state().value).to.equal(0);
+    input = wrapper.find("input");
+    expect(input.prop("value")).to.equal(0);
   });
 
   it("shows initial checked from props", () => {