Merge branch 'ide-commit-form-improvements' into 'master'

Improve Web IDE commit form

Closes #47307

See merge request gitlab-org/gitlab-ce!19883

7 files changed, 154 insertions, 52 deletions

diff --git a/spec/javascripts/ide/components/commit_sidebar/form_spec.js b/spec/javascripts/ide/components/commit_sidebar/form_spec.js
index 8b47a365582..b7a7afe4db4 100644
--- a/spec/javascripts/ide/components/commit_sidebar/form_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/form_spec.js
@@ -16,6 +16,7 @@ describe('IDE commit form', () => {
 
     store.state.changedFiles.push('test');
     store.state.currentProjectId = 'abcproject';
+    store.state.currentBranchId = 'master';
     Vue.set(store.state.projects, 'abcproject', { ...projectData });
 
     vm = createComponentWithStore(Component, store).$mount();
@@ -146,4 +147,16 @@ describe('IDE commit form', () => {
       });
     });
   });
+
+  describe('commitButtonText', () => {
+    it('returns commit text when staged files exist', () => {
+      vm.$store.state.stagedFiles.push('testing');
+
+      expect(vm.commitButtonText).toBe('Commit');
+    });
+
+    it('returns stage & commit text when staged files do not exist', () => {
+      expect(vm.commitButtonText).toBe('Stage & Commit');
+    });
+  });
 });
diff --git a/spec/javascripts/ide/components/commit_sidebar/message_field_spec.js b/spec/javascripts/ide/components/commit_sidebar/message_field_spec.js
index d62d58101d6..942cc19f46d 100644
--- a/spec/javascripts/ide/components/commit_sidebar/message_field_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/message_field_spec.js
@@ -13,6 +13,7 @@ describe('IDE commit message field', () => {
       Component,
       {
         text: '',
+        placeholder: 'testing',
       },
       '#app',
     );
diff --git a/spec/javascripts/ide/components/commit_sidebar/radio_group_spec.js b/spec/javascripts/ide/components/commit_sidebar/radio_group_spec.js
index 21bfe4be52f..ffc2a4c9ddb 100644
--- a/spec/javascripts/ide/components/commit_sidebar/radio_group_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/radio_group_spec.js
@@ -114,4 +114,19 @@ describe('IDE commit sidebar radio group', () => {
       });
     });
   });
+
+  describe('tooltipTitle', () => {
+    it('returns title when disabled', () => {
+      vm.title = 'test title';
+      vm.disabled = true;
+
+      expect(vm.tooltipTitle).toBe('test title');
+    });
+
+    it('returns blank when not disabled', () => {
+      vm.title = 'test title';
+
+      expect(vm.tooltipTitle).not.toBe('test title');
+    });
+  });
 });
diff --git a/spec/javascripts/ide/mock_data.js b/spec/javascripts/ide/mock_data.js
index dd87a43f370..80bf664d491 100644
--- a/spec/javascripts/ide/mock_data.js
+++ b/spec/javascripts/ide/mock_data.js
@@ -8,6 +8,7 @@ export const projectData = {
   branches: {
     master: {
       treeId: 'abcproject/master',
+      can_push: true,
     },
   },
   mergeRequests: {},
diff --git a/spec/javascripts/ide/stores/getters_spec.js b/spec/javascripts/ide/stores/getters_spec.js
index 4833ba3edfd..70883e16b0d 100644
--- a/spec/javascripts/ide/stores/getters_spec.js
+++ b/spec/javascripts/ide/stores/getters_spec.js
@@ -147,12 +147,11 @@ describe('IDE store getters', () => {
       const commitTitle = 'Example commit title';
       const localGetters = {
         currentProject: {
-          branches: {
-            'example-branch': {
-              commit: {
-                title: commitTitle,
-              },
-            },
+          name: 'test-project',
+        },
+        currentBranch: {
+          commit: {
+            title: commitTitle,
           },
         },
       };
@@ -161,4 +160,23 @@ describe('IDE store getters', () => {
       expect(getters.lastCommit(localState, localGetters).title).toBe(commitTitle);
     });
   });
+
+  describe('currentBranch', () => {
+    it('returns current projects branch', () => {
+      const localGetters = {
+        currentProject: {
+          branches: {
+            master: {
+              name: 'master',
+            },
+          },
+        },
+      };
+      localState.currentBranchId = 'master';
+
+      expect(getters.currentBranch(localState, localGetters)).toEqual({
+        name: 'master',
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/modules/commit/getters_spec.js b/spec/javascripts/ide/stores/modules/commit/getters_spec.js
index 55580f046ad..44c941d6dbb 100644
--- a/spec/javascripts/ide/stores/modules/commit/getters_spec.js
+++ b/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,11 +76,53 @@ describe('IDE commit module getters', () => {
             newBranchName: '',
           });
 
-          expect(getters.branchName(state, localGetters, rootState)).toBe(
-            'newBranchName',
-          );
+          expect(getters.branchName(state, localGetters, rootState)).toBe('newBranchName');
         });
       });
     });
   });
+
+  describe('preBuiltCommitMessage', () => {
+    let rootState = {};
+
+    beforeEach(() => {
+      rootState.changedFiles = [];
+      rootState.stagedFiles = [];
+    });
+
+    afterEach(() => {
+      rootState = {};
+    });
+
+    it('returns commitMessage when set', () => {
+      state.commitMessage = 'test commit message';
+
+      expect(getters.preBuiltCommitMessage(state, null, rootState)).toBe('test commit message');
+    });
+
+    ['changedFiles', 'stagedFiles'].forEach(key => {
+      it('returns commitMessage with updated file', () => {
+        rootState[key].push({
+          path: 'test-file',
+        });
+
+        expect(getters.preBuiltCommitMessage(state, null, rootState)).toBe('Update test-file');
+      });
+
+      it('returns commitMessage with updated files', () => {
+        rootState[key].push(
+          {
+            path: 'test-file',
+          },
+          {
+            path: 'index.js',
+          },
+        );
+
+        expect(getters.preBuiltCommitMessage(state, null, rootState)).toBe(
+          'Update test-file, index.js files',
+        );
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/utils_spec.js b/spec/javascripts/ide/stores/utils_spec.js
index a7bd443af51..6c5980cfae4 100644
--- a/spec/javascripts/ide/stores/utils_spec.js
+++ b/spec/javascripts/ide/stores/utils_spec.js
@@ -94,6 +94,7 @@ describe('Multi-file store utils', () => {
         newBranch: false,
         state,
         rootState,
+        getters: {},
       });
 
       expect(payload).toEqual({
@@ -118,5 +119,58 @@ describe('Multi-file store utils', () => {
         start_branch: undefined,
       });
     });
+
+    it('uses prebuilt commit message when commit message is empty', () => {
+      const rootState = {
+        stagedFiles: [
+          {
+            ...file('staged'),
+            path: 'staged',
+            content: 'updated file content',
+            lastCommitSha: '123456789',
+          },
+          {
+            ...file('newFile'),
+            path: 'added',
+            tempFile: true,
+            content: 'new file content',
+            base64: true,
+            lastCommitSha: '123456789',
+          },
+        ],
+        currentBranchId: 'master',
+      };
+      const payload = utils.createCommitPayload({
+        branch: 'master',
+        newBranch: false,
+        state: {},
+        rootState,
+        getters: {
+          preBuiltCommitMessage: 'prebuilt test commit message',
+        },
+      });
+
+      expect(payload).toEqual({
+        branch: 'master',
+        commit_message: 'prebuilt test commit message',
+        actions: [
+          {
+            action: 'update',
+            file_path: 'staged',
+            content: 'updated file content',
+            encoding: 'text',
+            last_commit_id: '123456789',
+          },
+          {
+            action: 'create',
+            file_path: 'added',
+            content: 'new file content',
+            encoding: 'base64',
+            last_commit_id: '123456789',
+          },
+        ],
+        start_branch: undefined,
+      });
+    });
   });
 });