Rename modal.vue to deprecated_modal.vue

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

@@ -4,7 +4,7 @@
 import $ from 'jquery';
 import { s__ } from '~/locale';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
@@ -15,7 +15,7 @@ import groupsComponent from './groups.vue';
 export default {
   components: {
     loadingIcon,
-    modal,
+    DeprecatedModal,
     groupsComponent,
   },
   props: {
@@ -52,8 +52,9 @@ export default {
     },
   },
   created() {
-    this.searchEmptyMessage = this.hideProjects ?
-      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
+    this.searchEmptyMessage = this.hideProjects
+      ? COMMON_STR.GROUP_SEARCH_EMPTY
+      : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
 
     eventHub.$on('fetchPage', this.fetchPage);
     eventHub.$on('toggleChildren', this.toggleChildren);
@@ -72,22 +73,30 @@ export default {
     eventHub.$off('updateGroups', this.updateGroups);
   },
   methods: {
-    fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
-      return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
-                .then((res) => {
-                  if (updatePagination) {
-                    this.updatePagination(res.headers);
-                  }
+    fetchGroups({
+      parentId,
+      page,
+      filterGroupsBy,
+      sortBy,
+      archived,
+      updatePagination,
+    }) {
+      return this.service
+        .getGroups(parentId, page, filterGroupsBy, sortBy, archived)
+        .then(res => {
+          if (updatePagination) {
+            this.updatePagination(res.headers);
+          }
 
-                  return res;
-                })
-                .then(res => res.json())
-                .catch(() => {
-                  this.isLoading = false;
-                  $.scrollTo(0);
+          return res;
+        })
+        .then(res => res.json())
+        .catch(() => {
+          this.isLoading = false;
+          $.scrollTo(0);
 
-                  Flash(COMMON_STR.FAILURE);
-                });
+          Flash(COMMON_STR.FAILURE);
+        });
     },
     fetchAllGroups() {
       const page = getParameterByName('page') || null;
@@ -103,7 +112,7 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
@@ -118,14 +127,18 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         $.scrollTo(0);
 
         const currentPath = mergeUrlParams({ page }, window.location.href);
-        window.history.replaceState({
-          page: currentPath,
-        }, document.title, currentPath);
+        window.history.replaceState(
+          {
+            page: currentPath,
+          },
+          document.title,
+          currentPath,
+        );
 
         this.updateGroups(res);
       });
@@ -138,11 +151,13 @@ export default {
           // eslint-disable-next-line promise/catch-or-return
           this.fetchGroups({
             parentId: parentGroup.id,
-          }).then((res) => {
-            this.store.setGroupChildren(parentGroup, res);
-          }).catch(() => {
-            parentGroup.isChildrenLoading = false;
-          });
+          })
+            .then(res => {
+              this.store.setGroupChildren(parentGroup, res);
+            })
+            .catch(() => {
+              parentGroup.isChildrenLoading = false;
+            });
         } else {
           parentGroup.isOpen = true;
         }
@@ -154,7 +169,11 @@ export default {
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
       this.showModal = true;
-      this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`);
+      this.groupLeaveConfirmationMessage = s__(
+        `GroupsTree|Are you sure you want to leave the "${
+          group.fullName
+        }" group?`,
+      );
     },
     hideLeaveGroupModal() {
       this.showModal = false;
@@ -162,14 +181,15 @@ export default {
     leaveGroup() {
       this.showModal = false;
       this.targetGroup.isBeingRemoved = true;
-      this.service.leaveGroup(this.targetGroup.leavePath)
+      this.service
+        .leaveGroup(this.targetGroup.leavePath)
         .then(res => res.json())
-        .then((res) => {
+        .then(res => {
           $.scrollTo(0);
           this.store.removeGroup(this.targetGroup, this.targetParentGroup);
           Flash(res.notice, 'notice');
         })
-        .catch((err) => {
+        .catch(err => {
           let message = COMMON_STR.FAILURE;
           if (err.status === 403) {
             message = COMMON_STR.LEAVE_FORBIDDEN;
@@ -208,8 +228,8 @@ export default {
       :search-empty-message="searchEmptyMessage"
       :page-info="pageInfo"
     />
-    <modal
-      v-if="showModal"
+    <deprecated-modal
+      v-show="showModal"
       kind="warning"
       :primary-button-label="__('Leave')"
       :title="__('Are you sure?')"

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

 <script>
-  import { __ } from '~/locale';
-  import modal from '~/vue_shared/components/modal.vue';
+import { __ } from '~/locale';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 
-  export default {
-    components: {
-      modal,
+export default {
+  components: {
+    DeprecatedModal,
+  },
+  props: {
+    branchId: {
+      type: String,
+      required: true,
     },
-    props: {
-      branchId: {
-        type: String,
-        required: true,
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: true,
-      },
+    type: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        entryName: this.path !== '' ? `${this.path}/` : '',
-      };
+    path: {
+      type: String,
+      required: true,
     },
-    computed: {
-      modalTitle() {
-        if (this.type === 'tree') {
-          return __('Create new directory');
-        }
+  },
+  data() {
+    return {
+      entryName: this.path !== '' ? `${this.path}/` : '',
+    };
+  },
+  computed: {
+    modalTitle() {
+      if (this.type === 'tree') {
+        return __('Create new directory');
+      }
 
-        return __('Create new file');
-      },
-      buttonLabel() {
-        if (this.type === 'tree') {
-          return __('Create directory');
-        }
-
-        return __('Create file');
-      },
-      formLabelName() {
-        if (this.type === 'tree') {
-          return __('Directory name');
-        }
+      return __('Create new file');
+    },
+    buttonLabel() {
+      if (this.type === 'tree') {
+        return __('Create directory');
+      }
 
-        return __('File name');
-      },
+      return __('Create file');
     },
-    mounted() {
-      this.$refs.fieldName.focus();
+    formLabelName() {
+      if (this.type === 'tree') {
+        return __('Directory name');
+      }
+
+      return __('File name');
     },
-    methods: {
-      createEntryInStore() {
-        this.$emit('create', {
-          branchId: this.branchId,
-          name: this.entryName,
-          type: this.type,
-        });
+  },
+  mounted() {
+    this.$refs.fieldName.focus();
+  },
+  methods: {
+    createEntryInStore() {
+      this.$emit('create', {
+        branchId: this.branchId,
+        name: this.entryName,
+        type: this.type,
+      });
 
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit('hide');
-      },
+      this.hideModal();
+    },
+    hideModal() {
+      this.$emit('hide');
     },
-  };
+  },
+};
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     :title="modalTitle"
     :primary-button-label="buttonLabel"
     kind="success"
@@ -95,5 +95,5 @@
         </div>
       </fieldset>
     </form>
-  </modal>
+  </deprecated-modal>
 </template>

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

@@ -2,7 +2,7 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 import icon from '~/vue_shared/components/icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import commitFilesList from './commit_sidebar/list.vue';
 import * as consts from '../stores/modules/commit/constants';
@@ -10,7 +10,7 @@ import Actions from './commit_sidebar/actions.vue';
 
 export default {
   components: {
-    modal,
+    DeprecatedModal,
     icon,
     commitFilesList,
     Actions,
@@ -37,23 +37,20 @@ export default {
       'lastCommitMsg',
       'changedFiles',
     ]),
-    ...mapState('commit', [
-      'commitMessage',
-      'submitCommitLoading',
-    ]),
+    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
     ...mapGetters('commit', [
       'commitButtonDisabled',
       'discardDraftButtonDisabled',
       'branchName',
     ]),
     statusSvg() {
-      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
+      return this.lastCommitMsg
+        ? this.committedStateSvgPath
+        : this.noChangesStateSvgPath;
     },
   },
   methods: {
-    ...mapActions([
-      'setPanelCollapsedStatus',
-    ]),
+    ...mapActions(['setPanelCollapsedStatus']),
     ...mapActions('commit', [
       'updateCommitMessage',
       'discardDraft',
@@ -67,8 +64,9 @@ export default {
       });
     },
     forceCreateNewBranch() {
-      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH)
-        .then(() => this.commitChanges());
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() =>
+        this.commitChanges(),
+      );
     },
   },
 };
@@ -81,7 +79,7 @@ export default {
       'multi-file-commit-empty-state-container': !changedFiles.length
     }"
   >
-    <modal
+    <deprecated-modal
       id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
       kind="success"
@@ -92,7 +90,7 @@ export default {
         {{ __(`This branch has changed since you started editing.
           Would you like to create a new branch?`) }}
       </template>
-    </modal>
+    </deprecated-modal>
     <commit-files-list
       title="Staged"
       :file-list="changedFiles"

app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue

 <script>
   import _ from 'underscore';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       deleteProjectUrl: {
@@ -79,7 +79,7 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-project-modal"
     :title="title"
     :text="text"
@@ -121,5 +121,5 @@
         />
       </form>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>

app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue

 <script>
   import _ from 'underscore';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       deleteUserUrl: {
@@ -113,7 +113,7 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-user-modal"
     :title="title"
     :text="text"
@@ -170,5 +170,5 @@
         {{ secondaryButtonLabel }}
       </button>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>

app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue

@@ -2,14 +2,14 @@
   import axios from '~/lib/utils/axios_utils';
 
   import Flash from '~/flash';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { n__, s__, sprintf } from '~/locale';
   import { redirectTo } from '~/lib/utils/url_utility';
   import eventHub from '../event_hub';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       issueCount: {
@@ -92,7 +92,7 @@ Once deleted, it cannot be undone or recovered.`),
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-milestone-modal"
     :title="title"
     :text="text"
@@ -106,5 +106,5 @@ Once deleted, it cannot be undone or recovered.`),
       <p v-html="props.text"></p>
     </template>
 
-  </modal>
+  </deprecated-modal>
 </template>

app/assets/javascripts/pipelines/components/pipelines_table.vue

 <script>
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
   import pipelinesTableRowComponent from './pipelines_table_row.vue';
   import eventHub from '../event_hub';
@@ -12,7 +12,7 @@
   export default {
     components: {
       pipelinesTableRowComponent,
-      modal,
+      DeprecatedModal,
     },
     props: {
       pipelines: {
@@ -120,7 +120,7 @@
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
     />
-    <modal
+    <deprecated-modal
       id="confirmation-modal"
       :title="modalTitle"
       :text="modalText"
@@ -134,6 +134,6 @@
       >
         <p v-html="props.text"></p>
       </template>
-    </modal>
+    </deprecated-modal>
   </div>
 </template>

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

 <script>
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { __, s__, sprintf } from '~/locale';
   import csrf from '~/lib/utils/csrf';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       actionUrl: {
@@ -76,7 +76,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-account-modal"
     :title="s__('Profiles|Delete your account?')"
     :text="text"
@@ -131,5 +131,5 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
       </form>
     </template>
 
-  </modal>
+  </deprecated-modal>
 </template>

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

 <script>
   /* eslint-disable vue/require-default-prop */
   export default {
-    name: 'Modal',
+    name: 'DeprecatedModal', // use GlModal instead
 
     props: {
       id: {

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

 <script>
-  import modal from './modal.vue';
+  import DeprecatedModal from './deprecated_modal.vue';
 
   export default {
     name: 'RecaptchaModal',
 
     components: {
-      modal,
+      DeprecatedModal,
     },
 
     props: {
@@ -65,7 +65,7 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     kind="warning"
     class="recaptcha-modal js-recaptcha-modal"
     :hide-footer="true"
@@ -82,5 +82,5 @@
       >
       </div>
     </div>
-  </modal>
+  </deprecated-modal>
 </template>

changelogs/unreleased/winh-deprecate-old-modal.yml

+---
+title: Rename modal.vue to deprecated_modal.vue
+merge_request: 17438
+author:
+type: other

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

 import $ from 'jquery';
 import Vue from 'vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
-const modalComponent = Vue.extend(modal);
+const modalComponent = Vue.extend(DeprecatedModal);
 
-describe('Modal', () => {
+describe('DeprecatedModal', () => {
   let vm;
 
   afterEach(() => {