Improve Web IDE commit form

Closes #47307

app/assets/javascripts/ide/components/commit_sidebar/form.vue

@@ -24,7 +24,7 @@ export default {
     ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
     ...mapGetters(['hasChanges']),
-    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
+    ...mapGetters('commit', ['discardDraftButtonDisabled']),
     overviewText() {
       return sprintf(
         __(
@@ -36,6 +36,9 @@ export default {
         },
       );
     },
+    commitButtonText() {
+      return this.stagedFiles.length ? __('Commit') : __('Stage & Commit');
+    },
   },
   watch: {
     currentActivityView() {
@@ -142,8 +145,7 @@ export default {
           <actions />
           <loading-button
             :loading="submitCommitLoading"
-            :disabled="commitButtonDisabled"
-            :label="__('Commit')"
+            :label="commitButtonText"
             container-class="btn btn-success btn-sm float-left"
             @click="commitChanges"
           />

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -28,7 +28,7 @@ export default {
     ]),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
     ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges', 'activeFile']),
-    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
+    ...mapGetters('commit', ['discardDraftButtonDisabled']),
     showStageUnstageArea() {
       return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
     },

app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -109,11 +109,14 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
     state,
     rootState,
   });
+  const stageFilesPromise = rootState.stagedFiles.length
+    ? Promise.resolve()
+    : dispatch('stageAllChanges', null, { root: true });
 
   commit(types.UPDATE_LOADING, true);
 
-  return service
-    .commit(rootState.currentProjectId, payload)
+  return stageFilesPromise
+    .then(() => service.commit(rootState.currentProjectId, payload))
     .then(({ data }) => {
       commit(types.UPDATE_LOADING, false);
 

app/assets/javascripts/ide/stores/modules/commit/getters.js

@@ -5,9 +5,6 @@ const BRANCH_SUFFIX_COUNT = 5;
 export const discardDraftButtonDisabled = state =>
   state.commitMessage === '' || state.submitCommitLoading;
 
-export const commitButtonDisabled = (state, getters, rootState) =>
-  getters.discardDraftButtonDisabled || !rootState.stagedFiles.length;
-
 export const newBranchName = (state, _, rootState) =>
   `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(
     -BRANCH_SUFFIX_COUNT,

spec/javascripts/ide/stores/modules/commit/getters_spec.js

@@ -29,46 +29,6 @@ describe('IDE commit module getters', () => {
     });
   });
 
-  describe('commitButtonDisabled', () => {
-    const localGetters = {
-      discardDraftButtonDisabled: false,
-    };
-    const rootState = {
-      stagedFiles: ['a'],
-    };
-
-    it('returns false when discardDraftButtonDisabled is false & stagedFiles is not empty', () => {
-      expect(
-        getters.commitButtonDisabled(state, localGetters, rootState),
-      ).toBeFalsy();
-    });
-
-    it('returns true when discardDraftButtonDisabled is false & stagedFiles is empty', () => {
-      rootState.stagedFiles.length = 0;
-
-      expect(
-        getters.commitButtonDisabled(state, localGetters, rootState),
-      ).toBeTruthy();
-    });
-
-    it('returns true when discardDraftButtonDisabled is true', () => {
-      localGetters.discardDraftButtonDisabled = true;
-
-      expect(
-        getters.commitButtonDisabled(state, localGetters, rootState),
-      ).toBeTruthy();
-    });
-
-    it('returns true when discardDraftButtonDisabled is false & changedFiles is not empty', () => {
-      localGetters.discardDraftButtonDisabled = false;
-      rootState.stagedFiles.length = 0;
-
-      expect(
-        getters.commitButtonDisabled(state, localGetters, rootState),
-      ).toBeTruthy();
-    });
-  });
-
   describe('newBranchName', () => {
     it('includes username, currentBranchId, patch & random number', () => {
       gon.current_username = 'username';
@@ -108,9 +68,7 @@ describe('IDE commit module getters', () => {
         });
 
         it('uses newBranchName when not empty', () => {
-          expect(getters.branchName(state, localGetters, rootState)).toBe(
-            'state-newBranchName',
-          );
+          expect(getters.branchName(state, localGetters, rootState)).toBe('state-newBranchName');
         });
 
         it('uses getters newBranchName when state newBranchName is empty', () => {
@@ -118,9 +76,7 @@ describe('IDE commit module getters', () => {
             newBranchName: '',
           });
 
-          expect(getters.branchName(state, localGetters, rootState)).toBe(
-            'newBranchName',
-          );
+          expect(getters.branchName(state, localGetters, rootState)).toBe('newBranchName');
         });
       });
     });