From 03716dd38ccfd1399af25580329e8da887fdf5cc Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 3 Aug 2017 16:20:23 +0100
Subject: [PATCH] Remove view_model adapters and make main components including
 convert repo_edit_button to vue template

---
 .../javascripts/repo/components/repo.vue      | 57 +++++++++++++++
 .../repo_edit_button.vue}                     | 30 +++-----
 app/assets/javascripts/repo/index.js          | 36 ++++++++--
 .../repo/view_models/repo_view_model.js       | 70 -------------------
 .../shared/repo/_editable_mode.html.haml      |  5 +-
 app/views/shared/repo/_repo.html.haml         |  1 +
 6 files changed, 100 insertions(+), 99 deletions(-)
 create mode 100644 app/assets/javascripts/repo/components/repo.vue
 rename app/assets/javascripts/repo/{view_models/repo_edit_button_view_model.js => components/repo_edit_button.vue} (51%)
 delete mode 100644 app/assets/javascripts/repo/view_models/repo_view_model.js

diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
new file mode 100644
index 00000000000..81cdf06b3ab
--- /dev/null
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -0,0 +1,57 @@
+<script>
+import RepoSidebar from './repo_sidebar.vue';
+import RepoCommitSection from './repo_commit_section.vue';
+import RepoTabs from './repo_tabs.vue';
+import RepoFileButtons from './repo_file_buttons.vue';
+import RepoBinaryViewer from './repo_binary_viewer.vue';
+import RepoMixin from '../mixins/repo_mixin';
+import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
+import Store from '../stores/repo_store';
+import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
+
+export default {
+  data: () => Store,
+  mixins: [RepoMixin],
+  components: {
+    'repo-sidebar': RepoSidebar,
+    'repo-tabs': RepoTabs,
+    'repo-file-buttons': RepoFileButtons,
+    'repo-binary-viewer': RepoBinaryViewer,
+    'repo-editor': MonacoLoaderHelper.repoEditorLoader,
+    'repo-commit-section': RepoCommitSection,
+    'popup-dialog': PopupDialog,
+  },
+
+  methods: {
+    dialogToggled(toggle) {
+      this.dialog.open = toggle;
+    },
+
+    dialogSubmitted(status) {
+      this.dialog.open = false;
+      this.dialog.status = status;
+    },
+  },
+};
+</script>
+
+<template>
+<div class="tree-content-holder">
+  <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
+    <repo-tabs/>
+    <repo-file-buttons/>
+    <repo-editor/>
+    <repo-binary-viewer/>
+  </div>
+  <repo-commit-section/>
+  <popup-dialog
+    :primary-button-label="__('Discard changes')"
+    :open="dialog.open"
+    kind="warning"
+    :title="__('Are you sure?')"
+    :body="__('Are you sure you want to discard your changes?')"
+    @toggle="dialogToggled"
+    @submit="dialogSubmitted"
+  />
+</div>
+</template>
diff --git a/app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js b/app/assets/javascripts/repo/components/repo_edit_button.vue
similarity index 51%
rename from app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js
rename to app/assets/javascripts/repo/components/repo_edit_button.vue
index 2eecfaaac56..1e70f911a84 100644
--- a/app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -1,18 +1,13 @@
-import Vue from 'vue';
+<script>
 import Store from '../stores/repo_store';
 import RepoMixin from '../mixins/repo_mixin';
-import Translate from '../../vue_shared/translate';
-import { __ } from '../../locale';
 
-Vue.use(Translate);
-
-const RepoEditButton = {
-  el: undefined,
-  mixins: [RepoMixin],
+export default {
   data: () => Store,
+  mixins: [RepoMixin],
   computed: {
     buttonLabel() {
-      return this.editMode ? __('Cancel edit') : __('Edit');
+      return this.editMode ? this.__('Cancel edit') : this.__('Edit');
     },
 
     buttonIcon() {
@@ -28,15 +23,12 @@ const RepoEditButton = {
       this.editMode = !this.editMode;
     },
   },
-};
-
-function initRepoEditButtonViewModel(el) {
-  RepoEditButton.el = el;
-
-  return new Vue(RepoEditButton);
 }
+</script>
 
-export {
-  RepoEditButton as default,
-  initRepoEditButtonViewModel,
-};
+<template>
+<a href="#" @click.prevent="editClicked" v-cloak v-if="isCommitable">
+  <i :class="buttonIcon"></i>
+  <span>{{buttonLabel}}</span>
+</a>
+</template>
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 4a1108cca5c..feba755af2d 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -1,8 +1,10 @@
 import $ from 'jquery';
+import Vue from 'vue';
 import Service from './services/repo_service';
 import Store from './stores/repo_store';
-import { initRepoViewModel } from './view_models/repo_view_model';
-import { initRepoEditButtonViewModel } from './view_models/repo_edit_button_view_model';
+import Repo from './components/repo.vue';
+import RepoEditButton from './components/repo_edit_button.vue';
+import Translate from '../vue_shared/translate';
 
 function initDropdowns() {
   $('.project-refs-target-form').hide();
@@ -36,7 +38,25 @@ function setInitialStore(data) {
   Store.checkIsCommitable();
 }
 
-function initRepo() {
+function initRepo(el) {
+  return new Vue({
+    el,
+    components: {
+      repo: Repo,
+    },
+  });
+}
+
+function initRepoEditButton(el) {
+  return new Vue({
+    el,
+    components: {
+      repoEditButton: RepoEditButton,
+    },
+  });
+}
+
+function initRepoBundle() {
   const repo = document.getElementById('repo');
   const editButton = document.getElementById('editable-mode');
 
@@ -44,10 +64,12 @@ function initRepo() {
   addEventsForNonVueEls();
   initDropdowns();
 
-  initRepoViewModel(repo);
-  initRepoEditButtonViewModel(editButton);
+  Vue.use(Translate);
+
+  initRepo(repo);
+  initRepoEditButton(editButton);
 }
 
-$(initRepo);
+$(initRepoBundle);
 
-export default initRepo;
+export default initRepoBundle;
diff --git a/app/assets/javascripts/repo/view_models/repo_view_model.js b/app/assets/javascripts/repo/view_models/repo_view_model.js
deleted file mode 100644
index 134140b30a7..00000000000
--- a/app/assets/javascripts/repo/view_models/repo_view_model.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import Vue from 'vue';
-import RepoSidebar from '../components/repo_sidebar.vue';
-import RepoCommitSection from '../components/repo_commit_section.vue';
-import RepoTabs from '../components/repo_tabs.vue';
-import RepoFileButtons from '../components/repo_file_buttons.vue';
-import RepoBinaryViewer from '../components/repo_binary_viewer.vue';
-import RepoMixin from '../mixins/repo_mixin';
-import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
-import Store from '../stores/repo_store';
-import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
-import Translate from '../../vue_shared/translate';
-
-Vue.use(Translate);
-
-const Repo = {
-  el: undefined,
-  data: () => Store,
-  template: `
-    <div class="tree-content-holder">
-      <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
-        <repo-tabs/>
-        <repo-file-buttons/>
-        <repo-editor/>
-        <repo-binary-viewer/>
-      </div>
-      <repo-commit-section/>
-      <popup-dialog
-        :primary-button-label="__('Discard changes')"
-        :open="dialog.open"
-        kind="warning"
-        :title="__('Are you sure?')"
-        :body="__('Are you sure you want to discard your changes?')"
-        @toggle="dialogToggled"
-        @submit="dialogSubmitted"
-      />
-    </div>
-  `,
-  mixins: [RepoMixin],
-  components: {
-    'repo-sidebar': RepoSidebar,
-    'repo-tabs': RepoTabs,
-    'repo-file-buttons': RepoFileButtons,
-    'repo-binary-viewer': RepoBinaryViewer,
-    'repo-editor': MonacoLoaderHelper.repoEditorLoader,
-    'repo-commit-section': RepoCommitSection,
-    'popup-dialog': PopupDialog,
-  },
-
-  methods: {
-    dialogToggled(toggle) {
-      this.dialog.open = toggle;
-    },
-
-    dialogSubmitted(status) {
-      this.dialog.open = false;
-      this.dialog.status = status;
-    },
-  },
-};
-
-function initRepoViewModel(el) {
-  Repo.el = el;
-
-  return new Vue(Repo);
-}
-
-export {
-  Repo as default,
-  initRepoViewModel,
-};
diff --git a/app/views/shared/repo/_editable_mode.html.haml b/app/views/shared/repo/_editable_mode.html.haml
index 7db6431e1de..2946afa1b0d 100644
--- a/app/views/shared/repo/_editable_mode.html.haml
+++ b/app/views/shared/repo/_editable_mode.html.haml
@@ -1,3 +1,2 @@
-%a.btn.btn-default#editable-mode{ "href"=>"#", "@click.prevent" => "editClicked", "v-cloak" => 1, "v-if" => "isCommitable" }
-  %i{ ":class" => "buttonIcon" }
-  %span {{buttonLabel}}
+%a.btn.btn-default#editable-mode
+  %repo-edit-button
diff --git a/app/views/shared/repo/_repo.html.haml b/app/views/shared/repo/_repo.html.haml
index 051a5783516..0fc40cf0801 100644
--- a/app/views/shared/repo/_repo.html.haml
+++ b/app/views/shared/repo/_repo.html.haml
@@ -1 +1,2 @@
 #repo{ data: { url: content_url, project_name: project.name, refs_url: refs_project_path(project, format: :json), project_url: project_path(project), project_id: project.id, can_commit: (!!can_push_branch?(project, @ref)).to_s } }
+  %repo