Merge branch 'winh-unify-modals' into 'master'

Unify dialog modal/popup dialog/confirmation dialog/modal to modal

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

12 files changed, 54 insertions, 60 deletions

diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 09cb79c1afd..58ba5aff7cf 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -1,7 +1,7 @@
 <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?')"
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index fd1a50dd533..25ebe5314e0 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -9,7 +9,7 @@ import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
 import editedComponent from './edited.vue';
 import formComponent from './form.vue';
-import RecaptchaDialogImplementor from '../../vue_shared/mixins/recaptcha_dialog_implementor';
+import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
 export default {
   props: {
@@ -152,7 +152,7 @@ export default {
   },
 
   mixins: [
-    RecaptchaDialogImplementor,
+    recaptchaModalImplementor,
   ],
 
   methods: {
@@ -197,7 +197,7 @@ export default {
         });
     },
 
-    closeRecaptchaDialog() {
+    closeRecaptchaModal() {
       this.store.setFormState({
         updateLoading: false,
       });
@@ -273,10 +273,10 @@ export default {
       :enable-autocomplete="enableAutocomplete"
     />
 
-    <recaptcha-dialog
+    <recaptcha-modal
       v-show="showRecaptcha"
       :html="recaptchaHTML"
-      @close="closeRecaptchaDialog"
+      @close="closeRecaptchaModal"
     />
   </div>
   <div v-else>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index feb73481422..c3f2bf130bb 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -1,12 +1,12 @@
 <script>
   import animateMixin from '../mixins/animate';
   import TaskList from '../../task_list';
-  import RecaptchaDialogImplementor from '../../vue_shared/mixins/recaptcha_dialog_implementor';
+  import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
   export default {
     mixins: [
       animateMixin,
-      RecaptchaDialogImplementor,
+      recaptchaModalImplementor,
     ],
 
     props: {
@@ -126,7 +126,7 @@
     >
     </textarea>
 
-    <recaptcha-dialog
+    <recaptcha-modal
       v-show="showRecaptcha"
       :html="recaptchaHTML"
       @close="closeRecaptcha"
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index 6348a2e331d..78be6b6e884 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -1,5 +1,5 @@
 <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"
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
index ac1f613bb71..c191af7dec3 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -1,7 +1,7 @@
 <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>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index d3344d0c8dc..4e0178072cb 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/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
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index 6c1bb4b8566..37bd9003e96 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -1,10 +1,10 @@
 <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')"
diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/modal.vue
index 6d15bbd84ba..55f466b7b41 100644
--- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue
+++ b/app/assets/javascripts/vue_shared/components/modal.vue
@@ -1,6 +1,6 @@
 <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"
   >
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_dialog.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index 3ec50f14eb4..8053c65d498 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_dialog.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -1,8 +1,8 @@
 <script>
-import PopupDialog from './popup_dialog.vue';
+import modal from './modal.vue';
 
 export default {
-  name: 'recaptcha-dialog',
+  name: 'recaptcha-modal',
 
   props: {
     html: {
@@ -20,7 +20,7 @@ export default {
   },
 
   components: {
-    PopupDialog,
+    modal,
   },
 
   methods: {
@@ -65,9 +65,9 @@ export default {
 </script>
 
 <template>
-<popup-dialog
+<modal
   kind="warning"
-  class="recaptcha-dialog js-recaptcha-dialog"
+  class="recaptcha-modal js-recaptcha-modal"
   :hide-footer="true"
   :title="__('Please solve the reCAPTCHA')"
   @toggle="close"
@@ -81,5 +81,5 @@ export default {
       v-html="html"
     ></div>
   </div>
-</popup-dialog>
+</modal>
 </template>
diff --git a/app/assets/javascripts/vue_shared/mixins/recaptcha_dialog_implementor.js b/app/assets/javascripts/vue_shared/mixins/recaptcha_modal_implementor.js
index ef70f9432e3..ff1f565e79a 100644
--- a/app/assets/javascripts/vue_shared/mixins/recaptcha_dialog_implementor.js
+++ b/app/assets/javascripts/vue_shared/mixins/recaptcha_modal_implementor.js
@@ -1,4 +1,4 @@
-import RecaptchaDialog from '../components/recaptcha_dialog.vue';
+import recaptchaModal from '../components/recaptcha_modal.vue';
 
 export default {
   data() {
@@ -9,7 +9,7 @@ export default {
   },
 
   components: {
-    RecaptchaDialog,
+    recaptchaModal,
   },
 
   methods: {
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index ce551e6b7ce..1be66d0ab21 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -44,11 +44,18 @@ 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 {
+.recaptcha-modal .recaptcha-form {
   display: inline-block;
 
   .recaptcha {
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 402412eae71..6eb92c7baee 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1,16 +1,3 @@
-.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;