From b6770b3d9af23376f182a96da78cf8c405120d22 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 3 Aug 2017 16:59:38 +0100
Subject: [PATCH] [ci skip] WIP dynamically switch between preview and
 repo-editor, disable edit button and editor for binary files

---
 app/assets/javascripts/repo/components/repo.vue | 17 +++++++++++++++--
 .../repo/components/repo_edit_button.vue        |  5 +++--
 .../javascripts/repo/components/repo_editor.vue | 12 +++++-------
 .../javascripts/repo/helpers/repo_helper.js     |  1 +
 .../javascripts/repo/stores/repo_store.js       |  6 ++++++
 app/assets/stylesheets/pages/repo.scss          |  4 ++++
 app/views/shared/repo/_editable_mode.html.haml  |  2 +-
 7 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 81cdf06b3ab..a09999e247a 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -7,6 +7,7 @@ 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 RepoHelper from '../helpers/repo_helper';
 import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
 
 export default {
@@ -20,6 +21,16 @@ export default {
     'repo-editor': MonacoLoaderHelper.repoEditorLoader,
     'repo-commit-section': RepoCommitSection,
     'popup-dialog': PopupDialog,
+    preview: { // POC
+      data: () => Store,
+      template: '<div v-html="activeFile.html"></div>',
+    },
+  },
+
+  mounted() {
+    RepoHelper.getContent().then(() => {
+
+    }).catch(RepoHelper.loadingError);
   },
 
   methods: {
@@ -31,6 +42,8 @@ export default {
       this.dialog.open = false;
       this.dialog.status = status;
     },
+
+    toggleBlobView: Store.toggleBlobView,
   },
 };
 </script>
@@ -40,8 +53,8 @@ export default {
   <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
     <repo-tabs/>
     <repo-file-buttons/>
-    <repo-editor/>
-    <repo-binary-viewer/>
+    <component :is="currentBlobView"></component>
+    <!-- <repo-binary-viewer/> soon™ -->
   </div>
   <repo-commit-section/>
   <popup-dialog
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index 1e70f911a84..2616ef6c7e8 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -21,14 +21,15 @@ export default {
         return;
       }
       this.editMode = !this.editMode;
+      Store.toggleBlobView();
     },
   },
 }
 </script>
 
 <template>
-<a href="#" @click.prevent="editClicked" v-cloak v-if="isCommitable">
+<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable" :disabled="binary">
   <i :class="buttonIcon"></i>
   <span>{{buttonLabel}}</span>
-</a>
+</button>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 97b6172353e..b006a9bc1f6 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -17,14 +17,12 @@ const RepoEditor = {
 
     this.addMonacoEvents();
 
-    Helper.getContent().then(() => {
-      const languages = this.monaco.languages.getLanguages();
-      const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
-      this.showHide();
-      const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
+    const languages = this.monaco.languages.getLanguages();
+    const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
+    this.showHide();
+    const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
 
-      this.monacoInstance.setModel(newModel);
-    }).catch(Helper.loadingError);
+    this.monacoInstance.setModel(newModel);
   },
 
   methods: {
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index e2680417104..af64718be5b 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -166,6 +166,7 @@ const RepoHelper = {
           const rawUrl = RepoHelper.getRawURLFromBlobURL(file.url || Service.url);
           RepoHelper.setBinaryDataAsBase64(rawUrl, data);
           data.binary = true;
+          Store.currentBlobView = 'preview';
         } else {
           Service.getRaw(data.raw_path)
           .then(response => {
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index dbb2f719d32..fbed36a0a3d 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -20,6 +20,7 @@ const RepoStore = {
   submodules: [],
   blobRaw: '',
   blobRendered: '',
+  currentBlobView: 'preview',
   openedFiles: [],
   tabSize: 100,
   defaultTabSize: 100,
@@ -211,6 +212,11 @@ const RepoStore = {
     currentFile.newContent = contents;
   },
 
+  toggleBlobView() {
+    console.log('toggleBlobView');
+    RepoStore.currentBlobView = RepoStore.currentBlobView === 'preview' ? 'repo-editor' : 'preview';
+  },
+
   // getters
 
   isActiveFile(file) {
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 8eaf710e346..24413e82ffc 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -38,6 +38,10 @@
   @include truncate(250px);
 }
 
+#editable-mode {
+  display: inline-block;
+}
+
 .tree-content-holder {
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
diff --git a/app/views/shared/repo/_editable_mode.html.haml b/app/views/shared/repo/_editable_mode.html.haml
index 2946afa1b0d..a265352cd81 100644
--- a/app/views/shared/repo/_editable_mode.html.haml
+++ b/app/views/shared/repo/_editable_mode.html.haml
@@ -1,2 +1,2 @@
-%a.btn.btn-default#editable-mode
+#editable-mode
   %repo-edit-button