Web IDE markdown preview

4 files changed, 136 insertions, 70 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index d22869466c9..1c237c0ec97 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -3,7 +3,6 @@ import { mapState, mapGetters } from 'vuex';
 import ideSidebar from './ide_side_bar.vue';
 import ideContextbar from './ide_context_bar.vue';
 import repoTabs from './repo_tabs.vue';
-import repoFileButtons from './repo_file_buttons.vue';
 import ideStatusBar from './ide_status_bar.vue';
 import repoEditor from './repo_editor.vue';
 
@@ -12,7 +11,6 @@ export default {
     ideSidebar,
     ideContextbar,
     repoTabs,
-    repoFileButtons,
     ideStatusBar,
     repoEditor,
   },
@@ -70,9 +68,6 @@ export default {
           class="multi-file-edit-pane-content"
           :file="activeFile"
         />
-        <repo-file-buttons
-          :file="activeFile"
-        />
         <ide-status-bar
           :file="activeFile"
         />
diff --git a/app/assets/javascripts/ide/components/ide_file_buttons.vue b/app/assets/javascripts/ide/components/ide_file_buttons.vue
new file mode 100644
index 00000000000..6d07329df71
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_file_buttons.vue
@@ -0,0 +1,83 @@
+<script>
+import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    showButtons() {
+      return (
+        this.file.rawPath || this.file.blamePath || this.file.commitsPath || this.file.permalink
+      );
+    },
+    rawDownloadButtonLabel() {
+      return this.file.binary ? __('Download') : __('Raw');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="showButtons"
+    class="pull-right ide-btn-group"
+  >
+    <a
+      v-tooltip
+      :href="file.blamePath"
+      :title="__('Blame')"
+      class="btn btn-xs btn-transparent blame"
+    >
+      <icon
+        name="blame"
+        :size="16"
+      />
+    </a>
+    <a
+      v-tooltip
+      :href="file.commitsPath"
+      :title="__('History')"
+      class="btn btn-xs btn-transparent history"
+    >
+      <icon
+        name="history"
+        :size="16"
+      />
+    </a>
+    <a
+      v-tooltip
+      :href="file.permalink"
+      :title="__('Permalink')"
+      class="btn btn-xs btn-transparent permalink"
+    >
+      <icon
+        name="link"
+        :size="16"
+      />
+    </a>
+    <a
+      v-tooltip
+      :href="file.rawPath"
+      target="_blank"
+      class="btn btn-xs btn-transparent prepend-left-10 raw"
+      rel="noopener noreferrer"
+      :title="rawDownloadButtonLabel">
+      <icon
+        name="download"
+        :size="16"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index b1a16350c19..99423362924 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -2,10 +2,16 @@
 /* global monaco */
 import { mapState, mapGetters, mapActions } from 'vuex';
 import flash from '~/flash';
+import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
+import IdeFileButtons from './ide_file_buttons.vue';
 
 export default {
+  components: {
+    ContentViewer,
+    IdeFileButtons,
+  },
   props: {
     file: {
       type: Object,
@@ -18,6 +24,16 @@ export default {
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.raw;
     },
+    editTabCSS() {
+      return {
+        active: this.file.viewMode === 'edit',
+      };
+    },
+    previewTabCSS() {
+      return {
+        active: this.file.viewMode === 'preview',
+      };
+    },
   },
   watch: {
     file(oldVal, newVal) {
@@ -56,6 +72,7 @@ export default {
       'changeFileContent',
       'setFileLanguage',
       'setEditorPosition',
+      'setFileViewMode',
       'setFileEOL',
       'updateViewer',
       'updateDelayViewerUpdated',
@@ -153,15 +170,47 @@ export default {
     class="blob-viewer-container blob-editor-container"
   >
     <div
-      v-if="shouldHideEditor"
-      v-html="file.html"
-    >
+      class="ide-mode-tabs clearfix"
+      v-if="!shouldHideEditor">
+      <ul class="nav-links pull-left">
+        <li :class="editTabCSS">
+          <a
+            href="javascript:void(0);"
+            role="button"
+            @click.prevent="setFileViewMode({ file, viewMode: 'edit' })">
+            <template v-if="viewer === 'editor'">
+              {{ __('Edit') }}
+            </template>
+            <template v-else>
+              {{ __('Review') }}
+            </template>
+          </a>
+        </li>
+        <li
+          v-if="file.previewMode"
+          :class="previewTabCSS">
+          <a
+            href="javascript:void(0);"
+            role="button"
+            @click.prevent="setFileViewMode({ file, viewMode:'preview' })">
+            {{ file.previewMode.previewTitle }}
+          </a>
+        </li>
+      </ul>
+      <ide-file-buttons
+        :file="file"
+      />
     </div>
     <div
-      v-show="!shouldHideEditor"
+      v-show="!shouldHideEditor && file.viewMode === 'edit'"
       ref="editor"
       class="multi-file-editor-holder"
     >
     </div>
+    <content-viewer
+      v-if="!shouldHideEditor && file.viewMode === 'preview'"
+      :content="file.content || file.raw"
+      :path="file.path"
+      :project-path="file.projectId"/>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_file_buttons.vue b/app/assets/javascripts/ide/components/repo_file_buttons.vue
deleted file mode 100644
index 4ea8cf7504b..00000000000
--- a/app/assets/javascripts/ide/components/repo_file_buttons.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-export default {
-  props: {
-    file: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    showButtons() {
-      return this.file.rawPath ||
-        this.file.blamePath ||
-        this.file.commitsPath ||
-        this.file.permalink;
-    },
-    rawDownloadButtonLabel() {
-      return this.file.binary ? 'Download' : 'Raw';
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    v-if="showButtons"
-    class="multi-file-editor-btn-group"
-  >
-    <a
-      :href="file.rawPath"
-      target="_blank"
-      class="btn btn-default btn-sm raw"
-      rel="noopener noreferrer">
-      {{ rawDownloadButtonLabel }}
-    </a>
-
-    <div
-      class="btn-group"
-      role="group"
-      aria-label="File actions"
-    >
-      <a
-        :href="file.blamePath"
-        class="btn btn-default btn-sm blame"
-      >
-        Blame
-      </a>
-      <a
-        :href="file.commitsPath"
-        class="btn btn-default btn-sm history"
-      >
-        History
-      </a>
-      <a
-        :href="file.permalink"
-        class="btn btn-default btn-sm permalink"
-      >
-        Permalink
-      </a>
-    </div>
-  </div>
-</template>