Rename modal.vue to deprecated_modal.vue (EE port)

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

ee/app/assets/javascripts/boards/components/board_form.vue

@@ -3,7 +3,7 @@
 /* global BoardService */
 
 import Flash from '~/flash';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import BoardLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
 import { visitUrl } from '~/lib/utils/url_utility';
 import BoardMilestoneSelect from './milestone_select.vue';
@@ -30,7 +30,7 @@ export default {
     BoardLabelsSelect,
     BoardMilestoneSelect,
     BoardWeightSelect,
-    modal,
+    DeprecatedModal,
   },
   props: {
     canAdminBoard: {
@@ -148,12 +148,14 @@ export default {
       if (label.isAny) {
         this.board.labels = [];
       } else if (!this.board.labels.find(l => l.id === label.id)) {
-        this.board.labels.push(new ListLabel({
-          id: label.id,
-          title: label.title,
-          color: label.color[0],
-          textColor: label.text_color,
-        }));
+        this.board.labels.push(
+          new ListLabel({
+            id: label.id,
+            title: label.title,
+            color: label.color[0],
+            textColor: label.text_color,
+          }),
+        );
       } else {
         let labels = this.board.labels;
         labels = labels.filter(selected => selected.id !== label.id);
@@ -164,7 +166,8 @@ export default {
       if (this.board.name.length === 0) return;
       this.isLoading = true;
       if (this.isDeleteForm) {
-        gl.boardService.deleteBoard(this.currentBoard)
+        gl.boardService
+          .deleteBoard(this.currentBoard)
           .then(() => {
             visitUrl(Store.rootPath);
           })
@@ -173,9 +176,10 @@ export default {
             this.isLoading = false;
           });
       } else {
-        gl.boardService.createBoard(this.board)
+        gl.boardService
+          .createBoard(this.board)
           .then(resp => resp.data)
-          .then((data) => {
+          .then(data => {
             visitUrl(data.board_path);
           })
           .catch(() => {
@@ -200,7 +204,7 @@ export default {
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     v-show="isVisible"
     modal-dialog-class="board-config-modal"
     :hide-footer="readonly"
@@ -300,5 +304,5 @@ export default {
         </div>
       </form>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>

ee/app/assets/javascripts/geo_nodes/components/app.vue

 <script>
-  import { s__ } from '~/locale';
-  import Flash from '~/flash';
-  import statusCodes from '~/lib/utils/http_status';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import modal from '~/vue_shared/components/modal.vue';
-  import SmartInterval from '~/smart_interval';
+import { s__ } from '~/locale';
+import Flash from '~/flash';
+import statusCodes from '~/lib/utils/http_status';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import SmartInterval from '~/smart_interval';
 
-  import eventHub from '../event_hub';
+import eventHub from '../event_hub';
 
-  import { NODE_ACTIONS } from '../constants';
+import { NODE_ACTIONS } from '../constants';
 
-  import geoNodesList from './geo_nodes_list.vue';
+import geoNodesList from './geo_nodes_list.vue';
 
-  export default {
-    components: {
-      loadingIcon,
-      modal,
-      geoNodesList,
+export default {
+  components: {
+    loadingIcon,
+    DeprecatedModal,
+    geoNodesList,
+  },
+  props: {
+    store: {
+      type: Object,
+      required: true,
     },
-    props: {
-      store: {
-        type: Object,
-        required: true,
-      },
-      service: {
-        type: Object,
-        required: true,
-      },
-      nodeActionsAllowed: {
-        type: Boolean,
-        required: true,
-      },
-      nodeEditAllowed: {
-        type: Boolean,
-        required: true,
-      },
+    service: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        isLoading: true,
-        hasError: false,
-        showModal: false,
-        targetNode: null,
-        targetNodeActionType: '',
-        modalKind: 'warning',
-        modalMessage: '',
-        modalActionLabel: '',
-        errorMessage: '',
-      };
+    nodeActionsAllowed: {
+      type: Boolean,
+      required: true,
     },
-    computed: {
-      nodes() {
-        return this.store.getNodes();
-      },
+    nodeEditAllowed: {
+      type: Boolean,
+      required: true,
     },
-    created() {
-      eventHub.$on('pollNodeDetails', this.initNodeDetailsPolling);
-      eventHub.$on('showNodeActionModal', this.showNodeActionModal);
-      eventHub.$on('repairNode', this.repairNode);
+  },
+  data() {
+    return {
+      isLoading: true,
+      hasError: false,
+      showModal: false,
+      targetNode: null,
+      targetNodeActionType: '',
+      modalKind: 'warning',
+      modalMessage: '',
+      modalActionLabel: '',
+      errorMessage: '',
+    };
+  },
+  computed: {
+    nodes() {
+      return this.store.getNodes();
     },
-    mounted() {
-      this.fetchGeoNodes();
+  },
+  created() {
+    eventHub.$on('pollNodeDetails', this.initNodeDetailsPolling);
+    eventHub.$on('showNodeActionModal', this.showNodeActionModal);
+    eventHub.$on('repairNode', this.repairNode);
+  },
+  mounted() {
+    this.fetchGeoNodes();
+  },
+  beforeDestroy() {
+    eventHub.$off('pollNodeDetails', this.initNodeDetailsPolling);
+    eventHub.$off('showNodeActionModal', this.showNodeActionModal);
+    eventHub.$off('repairNode', this.repairNode);
+    if (this.nodePollingInterval) {
+      this.nodePollingInterval.stopTimer();
+    }
+  },
+  methods: {
+    setNodeActionStatus(node, status) {
+      Object.assign(node, { nodeActionActive: status });
     },
-    beforeDestroy() {
-      eventHub.$off('pollNodeDetails', this.initNodeDetailsPolling);
-      eventHub.$off('showNodeActionModal', this.showNodeActionModal);
-      eventHub.$off('repairNode', this.repairNode);
-      if (this.nodePollingInterval) {
-        this.nodePollingInterval.stopTimer();
-      }
+    initNodeDetailsPolling(node) {
+      this.nodePollingInterval = new SmartInterval({
+        callback: this.fetchNodeDetails.bind(this, node),
+        startingInterval: 30000,
+        maxInterval: 120000,
+        hiddenInterval: 240000,
+        incrementByFactorOf: 15000,
+        immediateExecution: true,
+      });
     },
-    methods: {
-      setNodeActionStatus(node, status) {
-        Object.assign(node, { nodeActionActive: status });
-      },
-      initNodeDetailsPolling(node) {
-        this.nodePollingInterval = new SmartInterval({
-          callback: this.fetchNodeDetails.bind(this, node),
-          startingInterval: 30000,
-          maxInterval: 120000,
-          hiddenInterval: 240000,
-          incrementByFactorOf: 15000,
-          immediateExecution: true,
+    fetchGeoNodes() {
+      this.hasError = false;
+      this.service
+        .getGeoNodes()
+        .then(res => res.data)
+        .then(nodes => {
+          this.store.setNodes(nodes);
+          this.isLoading = false;
+        })
+        .catch(err => {
+          this.hasError = true;
+          this.errorMessage = err;
         });
-      },
-      fetchGeoNodes() {
-        this.hasError = false;
-        this.service.getGeoNodes()
-          .then(res => res.data)
-          .then((nodes) => {
-            this.store.setNodes(nodes);
-            this.isLoading = false;
-          })
-          .catch((err) => {
-            this.hasError = true;
-            this.errorMessage = err;
+    },
+    fetchNodeDetails(node) {
+      const nodeId = node.id;
+      return this.service
+        .getGeoNodeDetails(node)
+        .then(res => res.data)
+        .then(nodeDetails => {
+          const primaryNodeVersion = this.store.getPrimaryNodeVersion();
+          const updatedNodeDetails = Object.assign(nodeDetails, {
+            primaryVersion: primaryNodeVersion.version,
+            primaryRevision: primaryNodeVersion.revision,
           });
-      },
-      fetchNodeDetails(node) {
-        const nodeId = node.id;
-        return this.service.getGeoNodeDetails(node)
-          .then(res => res.data)
-          .then((nodeDetails) => {
-            const primaryNodeVersion = this.store.getPrimaryNodeVersion();
-            const updatedNodeDetails = Object.assign(nodeDetails, {
-              primaryVersion: primaryNodeVersion.version,
-              primaryRevision: primaryNodeVersion.revision,
+          this.store.setNodeDetails(nodeId, updatedNodeDetails);
+          eventHub.$emit(
+            'nodeDetailsLoaded',
+            this.store.getNodeDetails(nodeId),
+          );
+        })
+        .catch(err => {
+          if (err.response && err.response.status === statusCodes.NOT_FOUND) {
+            this.store.setNodeDetails(nodeId, {
+              geo_node_id: nodeId,
+              health: err.message,
+              health_status: 'Unknown',
+              missing_oauth_application: false,
+              sync_status_unavailable: true,
+              storage_shards_match: null,
             });
-            this.store.setNodeDetails(nodeId, updatedNodeDetails);
-            eventHub.$emit('nodeDetailsLoaded', this.store.getNodeDetails(nodeId));
-          })
-          .catch((err) => {
-            if (err.response && err.response.status === statusCodes.NOT_FOUND) {
-              this.store.setNodeDetails(nodeId, {
-                geo_node_id: nodeId,
-                health: err.message,
-                health_status: 'Unknown',
-                missing_oauth_application: false,
-                sync_status_unavailable: true,
-                storage_shards_match: null,
-              });
-              eventHub.$emit('nodeDetailsLoaded', this.store.getNodeDetails(nodeId));
-            } else {
-              eventHub.$emit('nodeDetailsLoadFailed', nodeId, err);
-            }
-          });
-      },
-      repairNode(targetNode) {
-        this.setNodeActionStatus(targetNode, true);
-        this.service.repairNode(targetNode)
-          .then(() => {
-            this.setNodeActionStatus(targetNode, false);
-            Flash(s__('GeoNodes|Node Authentication was successfully repaired.'), 'notice');
-          })
-          .catch(() => {
-            this.setNodeActionStatus(targetNode, false);
-            Flash(s__('GeoNodes|Something went wrong while repairing node'));
-          });
-      },
-      toggleNode(targetNode) {
-        this.setNodeActionStatus(targetNode, true);
-        this.service.toggleNode(targetNode)
-          .then(res => res.data)
-          .then((node) => {
-            Object.assign(targetNode, { enabled: node.enabled, nodeActionActive: false });
-          })
-          .catch(() => {
-            this.setNodeActionStatus(targetNode, false);
-            Flash(s__('GeoNodes|Something went wrong while changing node status'));
-          });
-      },
-      removeNode(targetNode) {
-        this.setNodeActionStatus(targetNode, true);
-        this.service.removeNode(targetNode)
-          .then(() => {
-            this.store.removeNode(targetNode);
-            Flash(s__('GeoNodes|Node was successfully removed.'), 'notice');
-          })
-          .catch(() => {
-            this.setNodeActionStatus(targetNode, false);
-            Flash(s__('GeoNodes|Something went wrong while removing node'));
+            eventHub.$emit(
+              'nodeDetailsLoaded',
+              this.store.getNodeDetails(nodeId),
+            );
+          } else {
+            eventHub.$emit('nodeDetailsLoadFailed', nodeId, err);
+          }
+        });
+    },
+    repairNode(targetNode) {
+      this.setNodeActionStatus(targetNode, true);
+      this.service
+        .repairNode(targetNode)
+        .then(() => {
+          this.setNodeActionStatus(targetNode, false);
+          Flash(
+            s__('GeoNodes|Node Authentication was successfully repaired.'),
+            'notice',
+          );
+        })
+        .catch(() => {
+          this.setNodeActionStatus(targetNode, false);
+          Flash(s__('GeoNodes|Something went wrong while repairing node'));
+        });
+    },
+    toggleNode(targetNode) {
+      this.setNodeActionStatus(targetNode, true);
+      this.service
+        .toggleNode(targetNode)
+        .then(res => res.data)
+        .then(node => {
+          Object.assign(targetNode, {
+            enabled: node.enabled,
+            nodeActionActive: false,
           });
-      },
-      handleNodeAction() {
-        this.showModal = false;
+        })
+        .catch(() => {
+          this.setNodeActionStatus(targetNode, false);
+          Flash(
+            s__('GeoNodes|Something went wrong while changing node status'),
+          );
+        });
+    },
+    removeNode(targetNode) {
+      this.setNodeActionStatus(targetNode, true);
+      this.service
+        .removeNode(targetNode)
+        .then(() => {
+          this.store.removeNode(targetNode);
+          Flash(s__('GeoNodes|Node was successfully removed.'), 'notice');
+        })
+        .catch(() => {
+          this.setNodeActionStatus(targetNode, false);
+          Flash(s__('GeoNodes|Something went wrong while removing node'));
+        });
+    },
+    handleNodeAction() {
+      this.showModal = false;
 
-        if (this.targetNodeActionType === NODE_ACTIONS.TOGGLE) {
-          this.toggleNode(this.targetNode);
-        } else if (this.targetNodeActionType === NODE_ACTIONS.REMOVE) {
-          this.removeNode(this.targetNode);
-        }
-      },
-      showNodeActionModal({ actionType, node, modalKind = 'warning', modalMessage, modalActionLabel }) {
-        this.targetNode = node;
-        this.targetNodeActionType = actionType;
-        this.modalKind = modalKind;
-        this.modalMessage = modalMessage;
-        this.modalActionLabel = modalActionLabel;
+      if (this.targetNodeActionType === NODE_ACTIONS.TOGGLE) {
+        this.toggleNode(this.targetNode);
+      } else if (this.targetNodeActionType === NODE_ACTIONS.REMOVE) {
+        this.removeNode(this.targetNode);
+      }
+    },
+    showNodeActionModal({
+      actionType,
+      node,
+      modalKind = 'warning',
+      modalMessage,
+      modalActionLabel,
+    }) {
+      this.targetNode = node;
+      this.targetNodeActionType = actionType;
+      this.modalKind = modalKind;
+      this.modalMessage = modalMessage;
+      this.modalActionLabel = modalActionLabel;
 
-        if (actionType === NODE_ACTIONS.TOGGLE && !node.enabled) {
-          this.toggleNode(this.targetNode);
-        } else {
-          this.showModal = true;
-        }
-      },
-      hideNodeActionModal() {
-        this.showModal = false;
-      },
+      if (actionType === NODE_ACTIONS.TOGGLE && !node.enabled) {
+        this.toggleNode(this.targetNode);
+      } else {
+        this.showModal = true;
+      }
+    },
+    hideNodeActionModal() {
+      this.showModal = false;
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -214,7 +239,7 @@
     >
       {{ errorMessage }}
     </p>
-    <modal
+    <deprecated-modal
       v-show="showModal"
       :title="__('Are you sure?')"
       :kind="modalKind"

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(() => {