fix: Add delete control for file fields in the edit dialog (#1832)

src/components/FileEditor/FileEditor.react.js

@@ -20,9 +20,7 @@ export default class FileEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
-    this.removeFile = this.removeFile.bind(this);
     this.inputRef = React.createRef();
-    this.fileInputRef = React.createRef();
   }
 
   componentDidMount() {
@@ -62,11 +60,6 @@ export default class FileEditor extends React.Component {
     });
   }
 
-  removeFile() {
-    this.fileInputRef.current.value = '';
-    this.props.onCommit(undefined);
-  }
-
   async handleChange(e) {
     const file = e.target.files[0];
     if (file) {
@@ -84,12 +77,7 @@ export default class FileEditor extends React.Component {
         className={styles.editor}
       >
         <a className={styles.upload}>
-          <input
-            ref={this.fileInputRef}
-            id="fileInput"
-            type="file"
-            onChange={this.handleChange.bind(this)}
-          />
+          <input id="fileInput" type="file" onChange={this.handleChange.bind(this)} />
           <span>{file ? 'Replace file' : 'Upload file'}</span>
         </a>
       </div>

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

@@ -354,6 +354,9 @@ export default class EditRowDialog extends React.Component {
                   value={file ? 'Change file' : 'Select file'}
                   onClick={() => this.openFileEditor(name)}
                 />
+                {file && (
+                  <Pill value="Delete file" onClick={() => this.handleChange(undefined, name)} />
+                )}
                 {this.state.showFileEditor === name && (
                   <FileEditor
                     value={file}

src/lib/tests/EditRowDialog.test.js

@@ -0,0 +1,76 @@
+/**
+ * @jest-environment jsdom
+ */
+/*
+ * 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('../../dashboard/Data/Browser/EditRowDialog.react');
+jest.mock('../../dashboard/Data/Browser/ObjectPickerDialog.react', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+const EditRowDialog = require('../../dashboard/Data/Browser/EditRowDialog.react').default;
+
+function findElements(node, predicate, found = []) {
+  if (Array.isArray(node)) {
+    node.forEach(child => findElements(child, predicate, found));
+    return found;
+  }
+  if (!node || typeof node !== 'object' || !node.props) {
+    return found;
+  }
+  if (predicate(node)) {
+    found.push(node);
+  }
+  Object.keys(node.props).forEach(key => {
+    findElements(node.props[key], predicate, found);
+  });
+  return found;
+}
+
+function render(selectedObject, updateRow = () => {}) {
+  const renderer = new ShallowRenderer();
+  renderer.render(
+    <EditRowDialog
+      className="TestClass"
+      columns={[{ name: 'photo', type: 'File' }]}
+      schema={{}}
+      useMasterKey={false}
+      selectedObject={selectedObject}
+      updateRow={updateRow}
+      onClose={() => {}}
+    />
+  );
+  return renderer.getRenderOutput();
+}
+
+const fileStub = () => ({ url: () => undefined, name: () => 'photo.png' });
+
+describe('EditRowDialog File field delete control (issue #1832)', () => {
+  it('renders a "Delete file" control when a file is present', () => {
+    const output = render({ row: 0, id: 'abc', photo: fileStub() });
+    const pills = findElements(output, n => n.props.value === 'Delete file');
+    expect(pills.length).toBe(1);
+  });
+
+  it('unsets the file via updateRow when the delete control is clicked', () => {
+    const updateRow = jest.fn();
+    const output = render({ row: 0, id: 'abc', photo: fileStub() }, updateRow);
+    const pill = findElements(output, n => n.props.value === 'Delete file')[0];
+    pill.props.onClick();
+    expect(updateRow).toHaveBeenCalledWith(0, 'photo', undefined);
+  });
+
+  it('does not render a "Delete file" control when there is no file', () => {
+    const output = render({ row: 0, id: 'abc' });
+    const pills = findElements(output, n => n.props.value === 'Delete file');
+    expect(pills.length).toBe(0);
+  });
+});