feat: disable 'Save' button when there are no changes (#5595)

decaporg · Aug 3, 2021 · 4b566a7 · 4b566a7
1 parent 9f22bcd
commit 4b566a7
Show file tree

Hide file tree

Showing 5 changed files with 641 additions and 14 deletions.
diff --git a/...tlify-cms-backend-git-gateway/src/__tests__/__snapshots__/AuthenticationPage.spec.js.snap b/...tlify-cms-backend-git-gateway/src/__tests__/__snapshots__/AuthenticationPage.spec.js.snap
@@ -164,6 +164,7 @@ exports[`GitGatewayAuthenticationPage should render with no identity error 1`] =
 .emotion-2[disabled] {
   background-color: #eff0f4;
   color: #798291;
+  cursor: default;
 }
 
 .emotion-5 {
@@ -255,6 +256,7 @@ exports[`GitGatewayAuthenticationPage should render with no identity error 1`] =
 .emotion-2[disabled] {
   background-color: #eff0f4;
   color: #798291;
+  cursor: default;
 }
 
 .emotion-5 {

diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
@@ -194,6 +194,9 @@ const DeleteButton = styled(ToolbarButton)`
 
 const SaveButton = styled(ToolbarButton)`
   ${buttons.lightBlue};
+  &[disabled] {
+    ${buttons.disabled};
+  }
 `;
 
 const PublishedToolbarButton = styled(DropdownButton)`
@@ -583,7 +586,11 @@ export class EditorToolbar extends React.Component {
       (!hasUnpublishedChanges && !isModification && t('editor.editorToolbar.deletePublishedEntry'));
 
     return [
-      <SaveButton key="save-button" onClick={() => hasChanged && onPersist()}>
+      <SaveButton
+        disabled={!hasChanged}
+        key="save-button"
+        onClick={() => hasChanged && onPersist()}
+      >
         {isPersisting ? t('editor.editorToolbar.saving') : t('editor.editorToolbar.save')}
       </SaveButton>,
       (!showDelete || useOpenAuthoring) && !hasUnpublishedChanges && !isModification ? null : (

diff --git a/packages/netlify-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js b/packages/netlify-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js
@@ -111,5 +111,10 @@ describe('EditorToolbar', () => {
         expect(asFragment()).toMatchSnapshot();
       });
     });
+
+    it(`should render normal save button`, () => {
+      const { asFragment } = render(<EditorToolbar {...props} hasChanged={true} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
 });