diff --git a/src/components/FileEditor/FileEditor.react.js b/src/components/FileEditor/FileEditor.react.js
index 71c0af55fb..8e28441712 100644
--- a/src/components/FileEditor/FileEditor.react.js
+++ b/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}
>
-
+
{file ? 'Replace file' : 'Upload file'}
diff --git a/src/dashboard/Data/Browser/EditRowDialog.react.js b/src/dashboard/Data/Browser/EditRowDialog.react.js
index a275591ed4..3b4758fe74 100644
--- a/src/dashboard/Data/Browser/EditRowDialog.react.js
+++ b/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 && (
+ this.handleChange(undefined, name)} />
+ )}
{this.state.showFileEditor === name && (
({
+ __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(
+ {}}
+ />
+ );
+ 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);
+ });
+});