Disable the PA commit button when there are no changes

Before we allowed a user to commits with an empty diff.
Now if the user has not changed anything, they cannot
commit their file.

Changelog: changed

app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue

@@ -31,6 +31,14 @@ export default {
       required: false,
       default: '',
     },
+    hasUnsavedChanges: {
+      type: Boolean,
+      required: true,
+    },
+    isNewCiConfigFile: {
+      type: Boolean,
+      required: true,
+    },
     isSaving: {
       type: Boolean,
       required: false,
@@ -50,11 +58,14 @@ export default {
     };
   },
   computed: {
+    isCommitFormFilledOut() {
+      return this.message && this.targetBranch;
+    },
     isCurrentBranchTarget() {
       return this.targetBranch === this.currentBranch;
     },
-    submitDisabled() {
-      return !(this.message && this.targetBranch);
+    isSubmitDisabled() {
+      return !this.isCommitFormFilledOut || (!this.hasUnsavedChanges && !this.isNewCiConfigFile);
     },
   },
   watch: {
@@ -143,7 +154,7 @@ export default {
           category="primary"
           variant="confirm"
           data-qa-selector="commit_changes_button"
-          :disabled="submitDisabled"
+          :disabled="isSubmitDisabled"
           :loading="isSaving"
         >
           {{ $options.i18n.commitChanges }}

app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue

@@ -37,6 +37,10 @@ export default {
       required: false,
       default: '',
     },
+    hasUnsavedChanges: {
+      type: Boolean,
+      required: true,
+    },
     isNewCiConfigFile: {
       type: Boolean,
       required: false,
@@ -151,6 +155,8 @@ export default {
   <commit-form
     :current-branch="currentBranch"
     :default-message="defaultCommitMessage"
+    :has-unsaved-changes="hasUnsavedChanges"
+    :is-new-ci-config-file="isNewCiConfigFile"
     :is-saving="isSaving"
     :scroll-to-commit-form="scrollToCommitForm"
     v-on="$listeners"

app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue

@@ -131,6 +131,7 @@ export default {
       :ref="$options.commitSectionRef"
       :ci-file-content="ciFileContent"
       :commit-sha="commitSha"
+      :has-unsaved-changes="hasUnsavedChanges"
       :is-new-ci-config-file="isNewCiConfigFile"
       :scroll-to-commit-form="scrollToCommitForm"
       @scrolled-to-commit-form="setScrollToCommitForm(false)"

spec/features/projects/ci/editor_spec.rb

@@ -55,6 +55,10 @@ RSpec.describe 'Pipeline Editor', :js do
     it 'displays new branch as selected after commiting on a new branch' do
       find('#target-branch-field').set('new_branch', clear: :backspace)
 
+      page.within('#source-editor-') do
+        find('textarea').send_keys '123'
+      end
+
       click_button 'Commit changes'
 
       page.within('[data-testid="branch-selector"]') do

spec/frontend/pipeline_editor/components/commit/commit_form_spec.js

@@ -17,6 +17,8 @@ describe('Pipeline Editor | Commit Form', () => {
       propsData: {
         defaultMessage: mockCommitMessage,
         currentBranch: mockDefaultBranch,
+        hasUnsavedChanges: true,
+        isNewCiConfigFile: false,
         ...props,
       },
 
@@ -82,6 +84,27 @@ describe('Pipeline Editor | Commit Form', () => {
     });
   });
 
+  describe('submit button', () => {
+    it.each`
+      hasUnsavedChanges | isNewCiConfigFile | isDisabled | btnState
+      ${false}          | ${false}          | ${true}    | ${'disabled'}
+      ${true}           | ${false}          | ${false}   | ${'enabled'}
+      ${true}           | ${true}           | ${false}   | ${'enabled'}
+      ${false}          | ${true}           | ${false}   | ${'enabled'}
+    `(
+      'is $btnState when hasUnsavedChanges:$hasUnsavedChanges and isNewCiConfigfile:$isNewCiConfigFile',
+      ({ hasUnsavedChanges, isNewCiConfigFile, isDisabled }) => {
+        createComponent({ props: { hasUnsavedChanges, isNewCiConfigFile } });
+
+        if (isDisabled) {
+          expect(findSubmitBtn().attributes('disabled')).toBe('true');
+        } else {
+          expect(findSubmitBtn().attributes('disabled')).toBeUndefined();
+        }
+      },
+    );
+  });
+
   describe('when user inputs values', () => {
     const anotherMessage = 'Another commit message';
     const anotherBranch = 'my-branch';

spec/frontend/pipeline_editor/components/commit/commit_section_spec.js

@@ -51,6 +51,7 @@ describe('Pipeline Editor | Commit section', () => {
   const defaultProps = {
     ciFileContent: mockCiYml,
     commitSha: mockCommitSha,
+    hasUnsavedChanges: true,
     isNewCiConfigFile: false,
   };