Use Source Editor to view blobs

Use Source editor (editor lite) to view blobs

app/assets/javascripts/blob/components/blob_content.vue

@@ -21,6 +21,11 @@ export default {
       default: '',
       required: false,
     },
+    isRawContent: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
     loading: {
       type: Boolean,
       default: true,
@@ -65,6 +70,8 @@ export default {
         v-else
         ref="contentViewer"
         :content="content"
+        :is-raw-content="isRawContent"
+        :file-name="blob.name"
         :type="activeViewer.fileType"
         data-qa-selector="file_content"
       />

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -36,6 +36,12 @@ export default {
       blobHash: uniqueId(),
     };
   },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       projectPath: '',
@@ -85,6 +91,7 @@ export default {
       <blob-content
         :blob="blobInfo"
         :content="blobInfo.rawBlob"
+        :is-raw-content="true"
         :active-viewer="viewer"
         :loading="false"
       />

app/assets/javascripts/repository/pages/blob.vue

@@ -2,16 +2,21 @@
 // This file is in progress and behind a feature flag, please see the following issue for more:
 // https://gitlab.com/gitlab-org/gitlab/-/issues/323200
 
-// TODO (follow-up MR): import BlobContentViewer from '../components/blob_content_viewer.vue';
+import BlobContentViewer from '../components/blob_content_viewer.vue';
 
 export default {
   components: {
-    // TODO (follow-up MR): BlobContentViewer,
+    BlobContentViewer,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 
 <template>
-  <div></div>
-  <!-- TODO (follow-up MR): <blob-content-viewer/>  -->
+  <blob-content-viewer :path="path" />
 </template>

app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js

@@ -11,6 +11,16 @@ export default {
       type: String,
       required: true,
     },
+    isRawContent: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    fileName: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   mounted() {
     eventHub.$emit(SNIPPET_MEASURE_BLOBS_CONTENT);

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

 <script>
 /* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
 import { HIGHLIGHT_CLASS_NAME } from './constants';
 import ViewerMixin from './mixins';
 
 export default {
   components: {
     GlIcon,
+    EditorLite,
   },
   mixins: [ViewerMixin],
   inject: ['blobHash'],
@@ -45,7 +47,15 @@ export default {
 };
 </script>
 <template>
+  <div>
+    <editor-lite
+      v-if="isRawContent"
+      :value="content"
+      :file-name="fileName"
+      :editor-options="{ readOnly: true }"
+    />
     <div
+      v-else
       class="file-content code js-syntax-highlight"
       data-qa-selector="file_content"
       :class="$options.userColorScheme"
@@ -68,4 +78,5 @@ export default {
         <pre class="code highlight"><code :data-blob-hash="blobHash" v-html="content"></code></pre>
       </div>
     </div>
+  </div>
 </template>

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -76,6 +76,7 @@ describe('Blob content viewer component', () => {
 
     expect(findBlobContent().props('loading')).toEqual(false);
     expect(findBlobContent().props('content')).toEqual('raw content');
+    expect(findBlobContent().props('isRawContent')).toBe(true);
     expect(findBlobContent().props('activeViewer')).toEqual({
       fileType: 'text',
       tooLarge: false,

spec/frontend/repository/pages/blob_spec.js

+import { shallowMount } from '@vue/test-utils';
+import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
+import BlobPage from '~/repository/pages/blob.vue';
+
+jest.mock('~/repository/utils/dom');
+
+describe('Repository blob page component', () => {
+  let wrapper;
+
+  const findBlobContentViewer = () => wrapper.find(BlobContentViewer);
+  const path = 'file.js';
+
+  beforeEach(() => {
+    wrapper = shallowMount(BlobPage, { propsData: { path } });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has a Blob Content Viewer component', () => {
+    expect(findBlobContentViewer().exists()).toBe(true);
+    expect(findBlobContentViewer().props('path')).toBe(path);
+  });
+});

spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
-<div
+<div>
+  <div
     class="file-content code js-syntax-highlight"
     data-qa-selector="file_content"
->
+  >
     <div
       class="line-numbers"
     >
@@ -83,5 +84,6 @@ exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
         </code>
       </pre>
     </div>
+  </div>
 </div>
 `;

spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
 import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
 
 describe('Blob Simple Viewer component', () => {
   let wrapper;
   const contentMock = `<span id="LC1">First</span>\n<span id="LC2">Second</span>\n<span id="LC3">Third</span>`;
   const blobHash = 'foo-bar';
 
-  function createComponent(content = contentMock) {
+  function createComponent(content = contentMock, isRawContent = false) {
     wrapper = shallowMount(SimpleViewer, {
       provide: {
         blobHash,
@@ -15,6 +16,8 @@ describe('Blob Simple Viewer component', () => {
       propsData: {
         content,
         type: 'text',
+        fileName: 'test.js',
+        isRawContent,
       },
     });
   }
@@ -83,4 +86,18 @@ describe('Blob Simple Viewer component', () => {
       });
     });
   });
+
+  describe('raw content', () => {
+    const findEditorLite = () => wrapper.find(EditorLite);
+    const isRawContent = true;
+
+    it('uses the Editor Lite component in readonly mode when viewing raw content', () => {
+      createComponent('raw content', isRawContent);
+
+      expect(findEditorLite().exists()).toBe(true);
+      expect(findEditorLite().props('value')).toBe('raw content');
+      expect(findEditorLite().props('fileName')).toBe('test.js');
+      expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true });
+    });
+  });
 });