fix: cannot save nullish values for required fields (#2003)

Author: RaschidJFR

src/components/BrowserCell/BrowserCell.react.js

@@ -168,7 +168,7 @@ export default class BrowserCell extends Component {
     }
     this.onContextMenu = this.onContextMenu.bind(this);
 
-    if (this.props.markRequiredField && this.props.isRequired && !this.props.value) {
+    if (this.props.markRequiredField && this.props.isRequired && this.props.value == null) {
       classes.push(styles.required);
     }
 
@@ -396,7 +396,7 @@ export default class BrowserCell extends Component {
     if ( current ) {
       classes.push(styles.current);
     }
-    if (markRequiredFieldRow === row && isRequired && !value) {
+    if (markRequiredFieldRow === row && isRequired && value == null) {
       classes.push(styles.required);
     }
 

src/dashboard/Data/Browser/Browser.react.js

@@ -417,7 +417,7 @@ class Browser extends DashboardView {
     if (requiredCols.length) {
       for (let idx = 0; idx < requiredCols.length; idx++) {
         const name = requiredCols[idx];
-        if (!obj.get(name)) {
+        if (obj.get(name) == null) {
           this.showNote("Please enter all required fields", true);
           this.setState({
             markRequiredFieldRow: -1
@@ -521,7 +521,7 @@ class Browser extends DashboardView {
     if (requiredCols.length) {
       for (let idx = 0; idx < requiredCols.length; idx++) {
         const name = requiredCols[idx];
-        if (!obj.get(name)) {
+        if (obj.get(name) == null) {
           this.showNote("Please enter all required fields", true);
           this.setState({
             markRequiredFieldRow: rowIndex

src/lib/tests/BrowserCell.test.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+jest.dontMock('../../components/BrowserCell/BrowserCell.react');
+
+import React     from 'react';
+import renderer from 'react-test-renderer';
+const BrowserCell = require('../../components/BrowserCell/BrowserCell.react').default;
+
+describe('BrowserCell', () => {
+
+  describe('Required fields', () => {
+
+    it('should not highlight 0 value', () => {
+      const component = renderer.create(
+        <BrowserCell value={0} markRequiredField={true} isRequired={true}/>
+      ).toJSON();
+      expect(component.props.className).not.toContain('required');
+    });
+
+    it('should not highlight false value', () => {
+      const component = renderer.create(
+        <BrowserCell value={false} markRequiredField={true} isRequired={true}/>
+      ).toJSON();
+      expect(component.props.className).not.toContain('required');
+    });
+
+    it('should not highlight empty string value', () => {
+      const component = renderer.create(
+        <BrowserCell value="" markRequiredField={true} isRequired={true}/>
+      ).toJSON();
+      expect(component.props.className).not.toContain('required');
+    });
+
+    it('should highlight null value', () => {
+      const component = renderer.create(
+        <BrowserCell value={null} markRequiredField={true} isRequired={true}/>
+      ).toJSON();
+      expect(component.props.className).toContain('required');
+    });
+
+    it('should highlight undefined value', () => {
+      const component = renderer.create(
+        <BrowserCell markRequiredField={true} isRequired={true}/>
+      ).toJSON();
+      expect(component.props.className).toContain('required');
+    });
+  });
+});