WIP: Check in current progress, with notes on next steps.dm-blob-viewer-json

5 files changed, 40 insertions, 29 deletions

diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 54bf3a568fe..a162aaceb82 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -36,8 +36,6 @@ export default {
       this.toggleDialogOpen(false);
       this.dialog.status = status;
     },
-
-    toggleBlobView: Store.toggleBlobView,
   },
 };
 </script>
@@ -59,12 +57,14 @@ export default {
         <repo-preview
           class="blob-viewer-container"
           v-if="currentBlobView === 'repo-preview'"
-          :active-blob-viewers='activeFile'
           :active-blob-content='activeBlobContent'
+          :active-blob-viewers='activeBlobViewers'
+          :active-blob-viewer-type='activeBlobViewerType'
         />
 
         <repo-file-buttons
-          :active-blob-viewers='activeFile'
+          :active-blob-viewers='activeBlobViewers'
+          :active-blob-viewer-type='activeBlobViewerType'
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue
index 09fd3592b6e..ce6c677ecc6 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue
@@ -2,20 +2,17 @@
 import Store from '../stores/repo_store';
 import Helper from '../helpers/repo_helper';
 import RepoMixin from '../mixins/repo_mixin';
+import BlobViewerMixin from '../mixins/blob_viewer_mixin';
 
-const RepoFileButtons = {
+export default {
   data: () => Store,
   props: {
     activeBlobViewers: { type: Object, required: false },
+    selectedBlobViewerType: { type: String, required: false },
   },
-  mixins: [RepoMixin],
+  mixins: [RepoMixin, BlobViewerMixin],
 
   computed: {
-    viewerIsSimple() {},
-    viewerIsRich() {}
-    canDisplayRichViewer() {
-      // duplicate
-    }
     rawDownloadButtonLabel() {
       return this.binary ? 'Download' : 'Raw';
     },
@@ -37,8 +34,6 @@ const RepoFileButtons = {
     rawPreviewToggle: Store.toggleRawPreview,
   },
 };
-
-export default RepoFileButtons;
 </script>
 
 <template>
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 39a05fb42a1..0a376aad173 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -1,6 +1,7 @@
 <script>
 import Store from '../stores/repo_store';
 import Helper from '../helpers/repo_helper';
+import BlobViewerMixin from '../mixins/blob_viewer_mixin';
 
 export default {
   data: {
@@ -11,23 +12,8 @@ export default {
     activeBlobViewers: { type: Object, required: true },
     activeBlobContent: { type: String, required: false },
   },
+  mixins: [BlobViewerMixin],
   computed: {
-    richViewerDetails() {
-      return this.activeBlobViewers.rich_viewer;
-    },
-    simpleViewerDetails() {
-      return this.activeBlobViewers.simple_viewer;
-    },
-    canDisplayRichViewer() {
-      // may need to be moved into higher level because it determine whether switcher should be shown
-      return this.richViewerDetails !== null && this.simpleViewerDetails.name === 'text';
-    },
-    shouldDisplayRichViewer() {
-      if (this.canDisplayRichViewer &&
-    },
-    currentBlobViewer() {
-      return this.shouldDisplayRichViewer ? this.richViewerDetails : this.simpleViewerDetails;
-    },
     largeFileIsCollapsed() {
       return this.currentBlobViewer.render_error === 'collapsed';
     },
diff --git a/app/assets/javascripts/repo/mixins/blob_viewer_mixin.js b/app/assets/javascripts/repo/mixins/blob_viewer_mixin.js
new file mode 100644
index 00000000000..679497d1c65
--- /dev/null
+++ b/app/assets/javascripts/repo/mixins/blob_viewer_mixin.js
@@ -0,0 +1,27 @@
+// expects precense of activeBlobViewers and selectedBlobViewerType
+export default {
+  computed: {
+    richViewerDetails() {
+      return this.activeBlobViewers.rich_viewer;
+    },
+    simpleViewerDetails() {
+      return this.activeBlobViewers.simple_viewer;
+    },
+    canDisplayRichViewer() {
+      return this.richViewerDetails !== null && this.simpleViewerDetails.name === 'text';
+    },
+    currentBlobViewer() {
+      return this.selectedBlobViewerType === 'simple' ? this.simpleViewerDetails : this.richViewerDetails;
+    },
+    currentBlobViewerType() {
+      return this.currentBlobViewer.type;
+    },
+    viewerIsRich() {
+      return this.currentBlobViewerType === 'rich';
+    },
+    viewerIsSimple() {
+      return this.currentBlobViewerType === 'simple';
+    },
+  },
+};
+
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 1c0df528aea..2c35524d5a4 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -17,6 +17,9 @@ const RepoStore = {
   projectUrl: '',
   blobRaw: '',
   currentBlobView: 'repo-preview',
+  activeBlobContent: '',
+  activeBlobViewers: null,
+  activeBlobViewerType: '',
   openedFiles: [],
   submitCommitsLoading: false,
   dialog: {