Disable Commit button if no changes have been made in the single file editor
Summary
When opening a text file using the single file editor (clicking the Edit button in the repository view), the Commit Changes button is enabled even though no changes were made. Additionally, no diff preview is available and thus one cannot check if changes have indeed been made if they happen to come across an editor tab that has been long open and it is not clear if the tab is safe to close without saving. This leads to precautionary saving which produces empty changesets.
Steps to reproduce
- Create a new MarkDown (for example) file in your repo.
- Open the file, make no changes, click Commit Changes.
- Observe a new commit in the Commits tab of your repo with empty contents
Expected behavior
The button should be disabled when no changes have been made, this includes disabling it again when changes have been made, but reverted.
Actual behavior
The button is enabled no matter what.
Details
We want to ensure that the Commit button is only active if there have been changes to the file that need to be saved. This visual indicator is helpful to the user to indicate the state of the file and it maintains a consistent experience with the Web IDE.
Implementation Guide
The button resides in app/views/projects/_commit_button.html.haml. It may need migrating some of HAML code to Vue.js. Alternatively we could also do it in plain JavaScript but that solution wouldn't be very scalable.