Merge branch 'master' into feature/sm/3691-expose-per-project-pipeline-idfeature/sm/3691-expose-per-project-pipeline-id

1 files changed, 75 insertions, 47 deletions

diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 6c1d468e937..b6801af7fcb 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -1,50 +1,50 @@
-import $ from 'jquery';
 import Vue from 'vue';
-import Service from './services/repo_service';
-import Store from './stores/repo_store';
+import { mapActions } from 'vuex';
+import { convertPermissionToBoolean } from '../lib/utils/common_utils';
 import Repo from './components/repo.vue';
 import RepoEditButton from './components/repo_edit_button.vue';
+import newBranchForm from './components/new_branch_form.vue';
+import newDropdown from './components/new_dropdown/index.vue';
+import store from './stores';
 import Translate from '../vue_shared/translate';
 
-function initDropdowns() {
-  $('.js-tree-ref-target-holder').hide();
-}
-
-function addEventsForNonVueEls() {
-  $(document).on('change', '.dropdown', () => {
-    Store.targetBranch = $('.project-refs-target-form input[name="ref"]').val();
-  });
-
-  window.onbeforeunload = function confirmUnload(e) {
-    const hasChanged = Store.openedFiles
-      .some(file => file.changed);
-    if (!hasChanged) return undefined;
-    const event = e || window.event;
-    if (event) event.returnValue = 'Are you sure you want to lose unsaved changes?';
-    // For Safari
-    return 'Are you sure you want to lose unsaved changes?';
-  };
-}
-
-function setInitialStore(data) {
-  Store.service = Service;
-  Store.service.url = data.url;
-  Store.service.refsUrl = data.refsUrl;
-  Store.projectId = data.projectId;
-  Store.projectName = data.projectName;
-  Store.projectUrl = data.projectUrl;
-  Store.canCommit = data.canCommit;
-  Store.onTopOfBranch = data.onTopOfBranch;
-  Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
-  Store.checkIsCommitable();
-}
-
 function initRepo(el) {
+  if (!el) return null;
+
   return new Vue({
     el,
+    store,
     components: {
       repo: Repo,
     },
+    methods: {
+      ...mapActions([
+        'setInitialData',
+      ]),
+    },
+    created() {
+      const data = el.dataset;
+
+      this.setInitialData({
+        project: {
+          id: data.projectId,
+          name: data.projectName,
+          url: data.projectUrl,
+        },
+        endpoints: {
+          rootEndpoint: data.url,
+          newMergeRequestUrl: data.newMergeRequestUrl,
+          rootUrl: data.rootUrl,
+        },
+        canCommit: convertPermissionToBoolean(data.canCommit),
+        onTopOfBranch: convertPermissionToBoolean(data.onTopOfBranch),
+        currentRef: data.ref,
+        path: data.currentPath,
+        currentBranch: data.currentBranch,
+        isRoot: convertPermissionToBoolean(data.root),
+        isInitialRoot: convertPermissionToBoolean(data.root),
+      });
+    },
     render(createElement) {
       return createElement('repo');
     },
@@ -54,25 +54,53 @@ function initRepo(el) {
 function initRepoEditButton(el) {
   return new Vue({
     el,
+    store,
     components: {
       repoEditButton: RepoEditButton,
     },
+    render(createElement) {
+      return createElement('repo-edit-button');
+    },
   });
 }
 
-function initRepoBundle() {
-  const repo = document.getElementById('repo');
-  const editButton = document.querySelector('.editable-mode');
-  setInitialStore(repo.dataset);
-  addEventsForNonVueEls();
-  initDropdowns();
+function initNewDropdown(el) {
+  return new Vue({
+    el,
+    store,
+    components: {
+      newDropdown,
+    },
+    render(createElement) {
+      return createElement('new-dropdown');
+    },
+  });
+}
 
-  Vue.use(Translate);
+function initNewBranchForm() {
+  const el = document.querySelector('.js-new-branch-dropdown');
 
-  initRepo(repo);
-  initRepoEditButton(editButton);
+  if (!el) return null;
+
+  return new Vue({
+    el,
+    components: {
+      newBranchForm,
+    },
+    store,
+    render(createElement) {
+      return createElement('new-branch-form');
+    },
+  });
 }
 
-$(initRepoBundle);
+const repo = document.getElementById('repo');
+const editButton = document.querySelector('.editable-mode');
+const newDropdownHolder = document.querySelector('.js-new-dropdown');
+
+Vue.use(Translate);
 
-export default initRepoBundle;
+initRepo(repo);
+initRepoEditButton(editButton);
+initNewBranchForm();
+initNewDropdown(newDropdownHolder);