Merge branch '217729-create-branch-modal' into 'master'

WebIDE: Migrate create branch modal to use GlModal

Closes #217729

See merge request gitlab-org/gitlab!32087

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

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { n__, __ } from '~/locale';
+import { GlModal } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CommitMessageField from './message_field.vue';
 import Actions from './actions.vue';
 import SuccessMessage from './success_message.vue';
 import { leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
+import consts from '../../stores/modules/commit/constants';
 
 export default {
   components: {
@@ -13,6 +15,7 @@ export default {
     LoadingButton,
     CommitMessageField,
     SuccessMessage,
+    GlModal,
   },
   data() {
     return {
@@ -54,7 +57,20 @@ export default {
   },
   methods: {
     ...mapActions(['updateActivityBarView']),
-    ...mapActions('commit', ['updateCommitMessage', 'discardDraft', 'commitChanges']),
+    ...mapActions('commit', [
+      'updateCommitMessage',
+      'discardDraft',
+      'commitChanges',
+      'updateCommitAction',
+    ]),
+    commit() {
+      return this.commitChanges().catch(() => {
+        this.$refs.createBranchModal.show();
+      });
+    },
+    forceCreateNewBranch() {
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commit());
+    },
     toggleIsCompact() {
       if (this.currentViewIsCommitView) {
         this.isCompact = !this.isCompact;
@@ -119,13 +135,13 @@ export default {
         </button>
         <p class="text-center bold">{{ overviewText }}</p>
       </div>
-      <form v-if="!isCompact" ref="formEl" @submit.prevent.stop="commitChanges">
+      <form v-if="!isCompact" ref="formEl" @submit.prevent.stop="commit">
         <transition name="fade"> <success-message v-show="lastCommitMsg" /> </transition>
         <commit-message-field
           :text="commitMessage"
           :placeholder="preBuiltCommitMessage"
           @input="updateCommitMessage"
-          @submit="commitChanges"
+          @submit="commit"
         />
         <div class="clearfix prepend-top-15">
           <actions />
@@ -133,7 +149,7 @@ export default {
             :loading="submitCommitLoading"
             :label="commitButtonText"
             container-class="btn btn-success btn-sm float-left qa-commit-button"
-            @click="commitChanges"
+            @click="commit"
           />
           <button
             v-if="!discardDraftButtonDisabled"
@@ -152,6 +168,19 @@ export default {
             {{ __('Collapse') }}
           </button>
         </div>
+        <gl-modal
+          ref="createBranchModal"
+          modal-id="ide-create-branch-modal"
+          :ok-title="__('Create new branch')"
+          :title="__('Branch has changed')"
+          ok-variant="success"
+          @ok="forceCreateNewBranch"
+        >
+          {{
+            __(`This branch has changed since you started editing.
+                Would you like to create a new branch?`)
+          }}
+        </gl-modal>
       </form>
     </transition>
   </div>

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

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
-import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
-import consts from '../stores/modules/commit/constants';
 import { leftSidebarViews, stageKeys } from '../constants';
 
 export default {
   components: {
-    DeprecatedModal,
     CommitFilesList,
     EmptyState,
   },
@@ -53,10 +50,6 @@ export default {
   },
   methods: {
     ...mapActions(['openPendingTab', 'updateViewer', 'updateActivityBarView']),
-    ...mapActions('commit', ['commitChanges', 'updateCommitAction']),
-    forceCreateNewBranch() {
-      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
-    },
   },
   stageKeys,
 };
@@ -64,20 +57,6 @@ export default {
 
 <template>
   <div class="multi-file-commit-panel-section">
-    <deprecated-modal
-      id="ide-create-branch-modal"
-      :primary-button-label="__('Create new branch')"
-      :title="__('Branch has changed')"
-      kind="success"
-      @submit="forceCreateNewBranch"
-    >
-      <template slot="body">
-        {{
-          __(`This branch has changed since you started editing.
-          Would you like to create a new branch?`)
-        }}
-      </template>
-    </deprecated-modal>
     <template v-if="showStageUnstageArea">
       <commit-files-list
         :key-prefix="$options.stageKeys.staged"

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

-import $ from 'jquery';
 import { sprintf, __ } from '~/locale';
 import flash from '~/flash';
+import httpStatusCodes from '~/lib/utils/http_status';
 import * as rootTypes from '../../mutation_types';
 import { createCommitPayload, createNewMergeRequestUrl } from '../../utils';
 import router from '../../../ide_router';
@@ -215,25 +215,23 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
         );
     })
     .catch(err => {
-      if (err.response.status === 400) {
-        $('#ide-create-branch-modal').modal('show');
-      } else {
-        dispatch(
-          'setErrorMessage',
-          {
-            text: __('An error occurred while committing your changes.'),
-            action: () =>
-              dispatch('commitChanges').then(() =>
-                dispatch('setErrorMessage', null, { root: true }),
-              ),
-            actionText: __('Please try again'),
-          },
-          { root: true },
-        );
-        window.dispatchEvent(new Event('resize'));
-      }
-
       commit(types.UPDATE_LOADING, false);
+
+      // don't catch bad request errors, let the view handle them
+      if (err.response.status === httpStatusCodes.BAD_REQUEST) throw err;
+
+      dispatch(
+        'setErrorMessage',
+        {
+          text: __('An error occurred while committing your changes.'),
+          action: () =>
+            dispatch('commitChanges').then(() => dispatch('setErrorMessage', null, { root: true })),
+          actionText: __('Please try again'),
+        },
+        { root: true },
+      );
+
+      window.dispatchEvent(new Event('resize'));
     });
 };
 

spec/frontend/ide/components/commit_sidebar/form_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import waitForPromises from 'helpers/wait_for_promises';
 import { projectData } from 'jest/ide/mock_data';
 import store from '~/ide/stores';
 import CommitForm from '~/ide/components/commit_sidebar/form.vue';
@@ -31,10 +30,10 @@ describe('IDE commit form', () => {
   });
 
   describe('compact', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       vm.isCompact = true;
 
-      vm.$nextTick(done);
+      return vm.$nextTick();
     });
 
     it('renders commit button in compact mode', () => {
@@ -46,95 +45,84 @@ describe('IDE commit form', () => {
       expect(vm.$el.querySelector('form')).toBeNull();
     });
 
-    it('renders overview text', done => {
+    it('renders overview text', () => {
       vm.$store.state.stagedFiles.push('test');
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('p').textContent).toContain('1 changed file');
-        done();
       });
     });
 
-    it('shows form when clicking commit button', done => {
+    it('shows form when clicking commit button', () => {
       vm.$el.querySelector('.btn-primary').click();
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('form')).not.toBeNull();
-
-        done();
       });
     });
 
-    it('toggles activity bar view when clicking commit button', done => {
+    it('toggles activity bar view when clicking commit button', () => {
       vm.$el.querySelector('.btn-primary').click();
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
-
-        done();
       });
     });
 
-    it('collapses if lastCommitMsg is set to empty and current view is not commit view', done => {
+    it('collapses if lastCommitMsg is set to empty and current view is not commit view', () => {
       store.state.lastCommitMsg = 'abc';
       store.state.currentActivityView = leftSidebarViews.edit.name;
 
-      vm.$nextTick(() => {
-        // if commit message is set, form is uncollapsed
-        expect(vm.isCompact).toBe(false);
+      return vm
+        .$nextTick()
+        .then(() => {
+          // if commit message is set, form is uncollapsed
+          expect(vm.isCompact).toBe(false);
 
-        store.state.lastCommitMsg = '';
+          store.state.lastCommitMsg = '';
 
-        vm.$nextTick(() => {
+          return vm.$nextTick();
+        })
+        .then(() => {
           // collapsed when set to empty
           expect(vm.isCompact).toBe(true);
-
-          done();
         });
-      });
     });
   });
 
   describe('full', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       vm.isCompact = false;
 
-      vm.$nextTick(done);
+      return vm.$nextTick();
     });
 
-    it('updates commitMessage in store on input', done => {
+    it('updates commitMessage in store on input', () => {
       const textarea = vm.$el.querySelector('textarea');
 
       textarea.value = 'testing commit message';
 
       textarea.dispatchEvent(new Event('input'));
 
-      waitForPromises()
-        .then(() => {
-          expect(vm.$store.state.commit.commitMessage).toBe('testing commit message');
-        })
-        .then(done)
-        .catch(done.fail);
+      return vm.$nextTick().then(() => {
+        expect(vm.$store.state.commit.commitMessage).toBe('testing commit message');
+      });
     });
 
-    it('updating currentActivityView not to commit view sets compact mode', done => {
+    it('updating currentActivityView not to commit view sets compact mode', () => {
       store.state.currentActivityView = 'a';
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(vm.isCompact).toBe(true);
-
-        done();
       });
     });
 
-    it('always opens itself in full view current activity view is not commit view when clicking commit button', done => {
+    it('always opens itself in full view current activity view is not commit view when clicking commit button', () => {
       vm.$el.querySelector('.btn-primary').click();
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
         expect(vm.isCompact).toBe(false);
-
-        done();
       });
     });
 
@@ -143,41 +131,54 @@ describe('IDE commit form', () => {
         expect(vm.$el.querySelector('.btn-default').textContent).toContain('Collapse');
       });
 
-      it('resets commitMessage when clicking discard button', done => {
+      it('resets commitMessage when clicking discard button', () => {
         vm.$store.state.commit.commitMessage = 'testing commit message';
 
-        waitForPromises()
+        return vm
+          .$nextTick()
           .then(() => {
             vm.$el.querySelector('.btn-default').click();
           })
-          .then(Vue.nextTick)
+          .then(() => vm.$nextTick())
           .then(() => {
             expect(vm.$store.state.commit.commitMessage).not.toBe('testing commit message');
-          })
-          .then(done)
-          .catch(done.fail);
+          });
       });
     });
 
     describe('when submitting', () => {
       beforeEach(() => {
-        jest.spyOn(vm, 'commitChanges').mockImplementation(() => {});
+        jest.spyOn(vm, 'commitChanges');
+
         vm.$store.state.stagedFiles.push('test');
+        vm.$store.state.commit.commitMessage = 'testing commit message';
       });
 
-      it('calls commitChanges', done => {
-        vm.$store.state.commit.commitMessage = 'testing commit message';
+      it('calls commitChanges', () => {
+        vm.commitChanges.mockResolvedValue({ success: true });
+
+        return vm.$nextTick().then(() => {
+          vm.$el.querySelector('.btn-success').click();
+
+          expect(vm.commitChanges).toHaveBeenCalled();
+        });
+      });
+
+      it('opens new branch modal if commitChanges throws an error', () => {
+        vm.commitChanges.mockRejectedValue({ success: false });
 
-        waitForPromises()
+        jest.spyOn(vm.$refs.createBranchModal, 'show').mockImplementation();
+
+        return vm
+          .$nextTick()
           .then(() => {
             vm.$el.querySelector('.btn-success').click();
+
+            return vm.$nextTick();
           })
-          .then(Vue.nextTick)
           .then(() => {
-            expect(vm.commitChanges).toHaveBeenCalled();
-          })
-          .then(done)
-          .catch(done.fail);
+            expect(vm.$refs.createBranchModal.show).toHaveBeenCalled();
+          });
       });
     });
   });