Merge pull request #576 from netlify/entry-disable-save

Disable "Save" button when entry has not been changed.
This commit is contained in:
Shawn Erquhart 2017-09-15 16:12:34 -04:00 committed by GitHub
commit 63b874e295
5 changed files with 24 additions and 3 deletions

View File

@ -47,6 +47,7 @@ class EntryEditor extends Component {
fieldsErrors,
getAsset,
onChange,
enableSave,
showDelete,
onDelete,
onValidate,
@ -131,6 +132,7 @@ class EntryEditor extends Component {
onCancelEdit={onCancelEdit}
onDelete={onDelete}
showDelete={showDelete}
enableSave={enableSave}
/>
</div>
</div>
@ -149,6 +151,7 @@ EntryEditor.propTypes = {
onChange: PropTypes.func.isRequired,
onValidate: PropTypes.func.isRequired,
onPersist: PropTypes.func.isRequired,
enableSave: PropTypes.bool.isRequired,
showDelete: PropTypes.bool.isRequired,
onDelete: PropTypes.func.isRequired,
onRemoveAsset: PropTypes.func.isRequired,

View File

@ -5,11 +5,12 @@ const EntryEditorToolbar = (
{
isPersisting,
onPersist,
enableSave,
showDelete,
onDelete,
onCancelEdit,
}) => {
const disabled = isPersisting;
const disabled = !enableSave || isPersisting;
return (
<div>
<Button
@ -37,6 +38,7 @@ const EntryEditorToolbar = (
EntryEditorToolbar.propTypes = {
isPersisting: PropTypes.bool,
onPersist: PropTypes.func.isRequired,
enableSave: PropTypes.bool.isRequired,
showDelete: PropTypes.bool.isRequired,
onDelete: PropTypes.func.isRequired,
onCancelEdit: PropTypes.func.isRequired,

View File

@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import EntryEditorToolbar from '../EntryEditorToolbar';
describe('EntryEditorToolbar', () => {
it('should have both buttons enabled initially', () => {
it('should have the Save button disabled initally, and the Cancel button enabled', () => {
const component = shallow(
<EntryEditorToolbar
onPersist={() => {}}
@ -15,6 +15,19 @@ describe('EntryEditorToolbar', () => {
expect(tree).toMatchSnapshot();
});
it('should enable the Save button', () => {
const component = shallow(
<EntryEditorToolbar
enableSave
onPersist={() => {}}
onCancelEdit={() => {}}
onDelete={() => {}}
/>
);
const tree = component.html();
expect(tree).toMatchSnapshot();
});
it('should disable and update label of Save button when persisting', () => {
const component = shallow(
<EntryEditorToolbar

View File

@ -2,4 +2,6 @@
exports[`EntryEditorToolbar should disable and update label of Save button when persisting 1`] = `"<div><button disabled=\\"\\" class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Saving...</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`;
exports[`EntryEditorToolbar should have both buttons enabled initially 1`] = `"<div><button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Save</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`;
exports[`EntryEditorToolbar should enable the Save button 1`] = `"<div><button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Save</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`;
exports[`EntryEditorToolbar should have the Save button disabled initally, and the Cancel button enabled 1`] = `"<div><button disabled=\\"\\" class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Save</button> <button class=\\"\\" type=\\"button\\" data-react-toolbox=\\"button\\">Cancel</button></div>"`;

View File

@ -151,6 +151,7 @@ class EntryPage extends React.Component {
onPersist={this.handlePersistEntry}
onDelete={this.handleDeleteEntry}
showDelete={this.props.showDelete}
enableSave={entryDraft.get('hasChanged')}
onCancelEdit={this.handleCloseEntry}
/>
);