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); + }); +});