Rename popup-dialog to modal

app/assets/javascripts/groups/components/item_actions.vue

 <script>
 import { s__ } from '../../locale';
 import tooltip from '../../vue_shared/directives/tooltip';
-import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
+import modal from '../../vue_shared/components/modal.vue';
 import eventHub from '../event_hub';
 import { COMMON_STR } from '../constants';
 import Icon from '../../vue_shared/components/icon.vue';
@@ -9,7 +9,7 @@ import Icon from '../../vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
-    PopupDialog,
+    modal,
   },
   directives: {
     tooltip,
@@ -27,7 +27,7 @@ export default {
   },
   data() {
     return {
-      dialogStatus: false,
+      modalStatus: false,
     };
   },
   computed: {
@@ -43,10 +43,10 @@ export default {
   },
   methods: {
     onLeaveGroup() {
-      this.dialogStatus = true;
+      this.modalStatus = true;
     },
     leaveGroup(leaveConfirmed) {
-      this.dialogStatus = false;
+      this.modalStatus = false;
       if (leaveConfirmed) {
         eventHub.$emit('leaveGroup', this.group, this.parentGroup);
       }
@@ -82,8 +82,8 @@ export default {
         class="fa fa-sign-out"
         aria-hidden="true"/>
     </a>
-    <popup-dialog
-      v-show="dialogStatus"
+    <modal
+      v-show="modalStatus"
       :primary-button-label="__('Leave')"
       kind="warning"
       :title="__('Are you sure?')"

app/assets/javascripts/profile/account/components/delete_account_modal.vue

 <script>
-  import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
+  import modal from '../../../vue_shared/components/modal.vue';
   import { __, s__, sprintf } from '../../../locale';
   import csrf from '../../../lib/utils/csrf';
 
@@ -26,7 +26,7 @@
       };
     },
     components: {
-      popupDialog,
+      modal,
     },
     computed: {
       csrfToken() {
@@ -89,7 +89,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 
 <template>
   <div>
-    <popup-dialog
+    <modal
       v-if="isOpen"
       :title="s__('Profiles|Delete your account?')"
       :text="text"
@@ -134,7 +134,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
         </form>
       </template>
 
-    </popup-dialog>
+    </modal>
 
     <button
       type="button"

app/assets/javascripts/repo/components/new_dropdown/modal.vue

 <script>
   import { mapActions } from 'vuex';
   import { __ } from '../../../locale';
-  import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
+  import modal from '../../../vue_shared/components/modal.vue';
 
   export default {
     props: {
@@ -20,7 +20,7 @@
       };
     },
     components: {
-      popupDialog,
+      modal,
     },
     methods: {
       ...mapActions([
@@ -68,7 +68,7 @@
 </script>
 
 <template>
-  <popup-dialog
+  <modal
     :title="modalTitle"
     :primary-button-label="buttonLabel"
     kind="success"
@@ -94,5 +94,5 @@
         </div>
       </fieldset>
     </form>
-  </popup-dialog>
+  </modal>
 </template>

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

@@ -2,12 +2,12 @@
 import { mapGetters, mapState, mapActions } from 'vuex';
 import tooltip from '../../vue_shared/directives/tooltip';
 import icon from '../../vue_shared/components/icon.vue';
-import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
+import modal from '../../vue_shared/components/modal.vue';
 import commitFilesList from './commit_sidebar/list.vue';
 
 export default {
   components: {
-    PopupDialog,
+    modal,
     icon,
     commitFilesList,
   },
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      showNewBranchDialog: false,
+      showNewBranchModal: false,
       submitCommitsLoading: false,
       startNewMR: false,
       commitMessage: '',
@@ -58,7 +58,7 @@ export default {
         start_branch: createNewBranch ? this.currentBranch : undefined,
       };
 
-      this.showNewBranchDialog = false;
+      this.showNewBranchModal = false;
       this.submitCommitsLoading = true;
 
       this.commitChanges({ payload, newMr: this.startNewMR })
@@ -76,7 +76,7 @@ export default {
       this.checkCommitStatus()
         .then((branchChanged) => {
           if (branchChanged) {
-            this.showNewBranchDialog = true;
+            this.showNewBranchModal = true;
           } else {
             this.makeCommit();
           }
@@ -99,13 +99,13 @@ export default {
     'is-collapsed': collapsed,
   }"
 >
-  <popup-dialog
-    v-if="showNewBranchDialog"
+  <modal
+    v-if="showNewBranchModal"
     :primary-button-label="__('Create new branch')"
     kind="primary"
     :title="__('Branch has changed')"
     :text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
-    @toggle="showNewBranchDialog = false"
+    @toggle="showNewBranchModal = false"
     @submit="makeCommit(true)"
   />
   <button

app/assets/javascripts/repo/components/repo_edit_button.vue

 <script>
 import { mapGetters, mapActions, mapState } from 'vuex';
-import popupDialog from '../../vue_shared/components/popup_dialog.vue';
+import modal from '../../vue_shared/components/modal.vue';
 
 export default {
   components: {
-    popupDialog,
+    modal,
   },
   computed: {
     ...mapState([
@@ -43,7 +43,7 @@ export default {
         {{buttonLabel}}
       </span>
     </button>
-    <popup-dialog
+    <modal
       v-if="discardPopupOpen"
       class="text-left"
       :primary-button-label="__('Discard changes')"

app/assets/javascripts/vue_shared/components/popup_dialog.vue → app/assets/javascripts/vue_shared/components/modal.vue

 <script>
 export default {
-  name: 'popup-dialog',
+  name: 'modal',
 
   props: {
     title: {
@@ -75,7 +75,7 @@ export default {
 <template>
 <div class="modal-open">
   <div
-    class="modal popup-dialog"
+    class="modal show"
     role="dialog"
     tabindex="-1"
   >

app/assets/javascripts/vue_shared/components/recaptcha_dialog.vue

 <script>
-import PopupDialog from './popup_dialog.vue';
+import modal from './modal.vue';
 
 export default {
   name: 'recaptcha-dialog',
@@ -20,7 +20,7 @@ export default {
   },
 
   components: {
-    PopupDialog,
+    modal,
   },
 
   methods: {
@@ -65,7 +65,7 @@ export default {
 </script>
 
 <template>
-<popup-dialog
+<modal
   kind="warning"
   class="recaptcha-dialog js-recaptcha-dialog"
   :hide-footer="true"
@@ -81,5 +81,5 @@ export default {
       v-html="html"
     ></div>
   </div>
-</popup-dialog>
+</modal>
 </template>

app/assets/stylesheets/framework/modal.scss

@@ -44,8 +44,15 @@ body.modal-open {
   }
 }
 
-.modal.popup-dialog {
-  display: block;
+.modal {
+  background-color: $black-transparent;
+  z-index: 2100;
+
+  @media (min-width: $screen-md-min) {
+    .modal-dialog {
+      margin: 30px auto;
+    }
+  }
 }
 
 .recaptcha-dialog .recaptcha-form {

app/assets/stylesheets/pages/repo.scss

-.modal.popup-dialog {
-  display: block;
-  background-color: $black-transparent;
-  z-index: 2100;
-
-  @media (min-width: $screen-md-min) {
-    .modal-dialog {
-      width: 600px;
-      margin: 30px auto;
-    }
-  }
-}
-
 .project-refs-form,
 .project-refs-target-form {
   display: inline-block;

spec/features/profile_spec.rb

@@ -25,7 +25,7 @@ describe 'Profile account page', :js do
 
       fill_in 'password', with: '12345678'
 
-      page.within '.popup-dialog' do
+      page.within '.modal' do
         click_button 'Delete account'
       end
 
@@ -38,7 +38,7 @@ describe 'Profile account page', :js do
 
       fill_in 'password', with: 'testing123'
 
-      page.within '.popup-dialog' do
+      page.within '.modal' do
         click_button 'Delete account'
       end
 

spec/features/projects/tree/create_directory_spec.rb

@@ -20,7 +20,7 @@ feature 'Multi-file editor new directory', :js do
 
     click_link('New directory')
 
-    page.within('.popup-dialog') do
+    page.within('.modal') do
       find('.form-control').set('foldername')
 
       click_button('Create directory')

spec/features/projects/tree/create_file_spec.rb

@@ -20,7 +20,7 @@ feature 'Multi-file editor new file', :js do
 
     click_link('New file')
 
-    page.within('.popup-dialog') do
+    page.within('.modal') do
       find('.form-control').set('filename')
 
       click_button('Create file')

spec/javascripts/groups/components/item_actions_spec.js

@@ -36,27 +36,27 @@ describe('ItemActionsComponent', () => {
 
   describe('methods', () => {
     describe('onLeaveGroup', () => {
-      it('should change `dialogStatus` prop to `true` which shows confirmation dialog', () => {
-        expect(vm.dialogStatus).toBeFalsy();
+      it('should change `modalStatus` prop to `true` which shows confirmation dialog', () => {
+        expect(vm.modalStatus).toBeFalsy();
         vm.onLeaveGroup();
-        expect(vm.dialogStatus).toBeTruthy();
+        expect(vm.modalStatus).toBeTruthy();
       });
     });
 
     describe('leaveGroup', () => {
-      it('should change `dialogStatus` prop to `false` and emit `leaveGroup` event with required params when called with `leaveConfirmed` as `true`', () => {
+      it('should change `modalStatus` prop to `false` and emit `leaveGroup` event with required params when called with `leaveConfirmed` as `true`', () => {
         spyOn(eventHub, '$emit');
-        vm.dialogStatus = true;
+        vm.modalStatus = true;
         vm.leaveGroup(true);
-        expect(vm.dialogStatus).toBeFalsy();
+        expect(vm.modalStatus).toBeFalsy();
         expect(eventHub.$emit).toHaveBeenCalledWith('leaveGroup', vm.group, vm.parentGroup);
       });
 
-      it('should change `dialogStatus` prop to `false` and should NOT emit `leaveGroup` event when called with `leaveConfirmed` as `false`', () => {
+      it('should change `modalStatus` prop to `false` and should NOT emit `leaveGroup` event when called with `leaveConfirmed` as `false`', () => {
         spyOn(eventHub, '$emit');
-        vm.dialogStatus = true;
+        vm.modalStatus = true;
         vm.leaveGroup(false);
-        expect(vm.dialogStatus).toBeFalsy();
+        expect(vm.modalStatus).toBeFalsy();
         expect(eventHub.$emit).not.toHaveBeenCalled();
       });
     });
@@ -99,9 +99,9 @@ describe('ItemActionsComponent', () => {
       newVm.$destroy();
     });
 
-    it('should show modal dialog when `dialogStatus` is set to `true`', () => {
-      vm.dialogStatus = true;
-      const modalDialogEl = vm.$el.querySelector('.modal.popup-dialog');
+    it('should show modal dialog when `modalStatus` is set to `true`', () => {
+      vm.modalStatus = true;
+      const modalDialogEl = vm.$el.querySelector('.modal');
       expect(modalDialogEl).toBeDefined();
       expect(modalDialogEl.querySelector('.modal-title').innerText.trim()).toBe('Are you sure?');
       expect(modalDialogEl.querySelector('.btn.btn-warning').innerText.trim()).toBe('Leave');

spec/javascripts/vue_shared/components/popup_dialog_spec.js → spec/javascripts/vue_shared/components/modal_spec.js

 import Vue from 'vue';
-import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
+import modal from '~/vue_shared/components/modal.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
-describe('PopupDialog', () => {
+describe('Modal', () => {
   it('does not render a primary button if no primaryButtonLabel', () => {
-    const popupDialog = Vue.extend(PopupDialog);
-    const vm = mountComponent(popupDialog);
+    const modalComponent = Vue.extend(modal);
+    const vm = mountComponent(modalComponent);
 
     expect(vm.$el.querySelector('.js-primary-button')).toBeNull();
   });