Fixed commit logic to pick a branch

- fixed getter spec with correct getter name

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

@@ -38,8 +38,8 @@ export default {
     },
   },
   computed: {
-    ...mapState('commit', ['commitAction']),
-    ...mapGetters('commit', ['newBranchName']),
+    ...mapState('commit', ['commitAction', 'newBranchName']),
+    ...mapGetters('commit', ['placeholderBranchName']),
     tooltipTitle() {
       return this.disabled ? this.title : '';
     },
@@ -73,7 +73,8 @@ export default {
     </label>
     <div v-if="commitAction === value && showInput" class="ide-commit-new-branch">
       <input
-        :placeholder="newBranchName"
+        :placeholder="placeholderBranchName"
+        :value="newBranchName"
         type="text"
         class="form-control monospace"
         @input="updateBranchName($event.target.value)"

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

@@ -14,7 +14,7 @@ const createTranslatedTextForFiles = (files, text) => {
 export const discardDraftButtonDisabled = state =>
   state.commitMessage === '' || state.submitCommitLoading;
 
-export const newBranchName = (state, _, rootState) =>
+export const placeholderBranchName = (state, _, rootState) =>
   `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(
     -BRANCH_SUFFIX_COUNT,
   )}`;
@@ -25,7 +25,7 @@ export const branchName = (state, getters, rootState) => {
     state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR
   ) {
     if (state.newBranchName === '') {
-      return getters.newBranchName;
+      return getters.placeholderBranchName;
     }
 
     return state.newBranchName;

changelogs/unreleased/57984-store-branch-name.yml

@@ -0,0 +1,5 @@
+---
+title: Resolves Branch name is lost if I change commit mode in Web IDE
+merge_request: 26180
+author:
+type: fixed

spec/javascripts/ide/components/commit_sidebar/radio_group_spec.js

@@ -76,6 +76,7 @@ describe('IDE commit sidebar radio group', () => {
       const Component = Vue.extend(radioGroup);
 
       store.state.commit.commitAction = '1';
+      store.state.commit.newBranchName = 'test-123';
 
       vm = createComponentWithStore(Component, store, {
         value: '1',
@@ -113,6 +114,12 @@ describe('IDE commit sidebar radio group', () => {
         done();
       });
     });
+
+    it('renders newBranchName if present', () => {
+      const input = vm.$el.querySelector('.form-control');
+
+      expect(input.value).toBe('test-123');
+    });
   });
 
   describe('tooltipTitle', () => {

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

@@ -396,7 +396,7 @@ describe('IDE commit module actions', () => {
             .then(() => {
               expect(visitUrl).toHaveBeenCalledWith(
                 `webUrl/merge_requests/new?merge_request[source_branch]=${
-                  store.getters['commit/newBranchName']
+                  store.getters['commit/placeholderBranchName']
                 }&merge_request[target_branch]=master`,
               );
 

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

@@ -29,11 +29,11 @@ describe('IDE commit module getters', () => {
     });
   });
 
-  describe('newBranchName', () => {
+  describe('placeholderBranchName', () => {
     it('includes username, currentBranchId, patch & random number', () => {
       gon.current_username = 'username';
 
-      const branch = getters.newBranchName(state, null, {
+      const branch = getters.placeholderBranchName(state, null, {
         currentBranchId: 'testing',
       });
 
@@ -46,7 +46,7 @@ describe('IDE commit module getters', () => {
       currentBranchId: 'master',
     };
     const localGetters = {
-      newBranchName: 'newBranchName',
+      placeholderBranchName: 'newBranchName',
     };
 
     beforeEach(() => {
@@ -71,7 +71,7 @@ describe('IDE commit module getters', () => {
           expect(getters.branchName(state, localGetters, rootState)).toBe('state-newBranchName');
         });
 
-        it('uses getters newBranchName when state newBranchName is empty', () => {
+        it('uses placeholderBranchName when state newBranchName is empty', () => {
           Object.assign(state, {
             newBranchName: '',
           });