Remove view_model adapters and make main components including convert...

Remove view_model adapters and make main components including convert repo_edit_button to vue template

app/assets/javascripts/repo/view_models/repo_view_model.js → app/assets/javascripts/repo/components/repo.vue

-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';
+<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';
-import Translate from '../../vue_shared/translate';
 
-Vue.use(Translate);
-
-const Repo = {
-  el: undefined,
+export default {
   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,
@@ -57,14 +33,25 @@ const Repo = {
     },
   },
 };
+</script>
 
-function initRepoViewModel(el) {
-  Repo.el = el;
-
-  return new Vue(Repo);
-}
-
-export {
-  Repo as default,
-  initRepoViewModel,
-};
+<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>

app/assets/javascripts/repo/view_models/repo_edit_button_view_model.js → app/assets/javascripts/repo/components/repo_edit_button.vue

-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>

app/assets/javascripts/repo/index.js

 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;

app/views/shared/repo/_editable_mode.html.haml

-%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

app/views/shared/repo/_repo.html.haml

 #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