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,27 +47,36 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="file-content code js-syntax-highlight"
-    data-qa-selector="file_content"
-    :class="$options.userColorScheme"
-  >
-    <div class="line-numbers">
-      <a
-        v-for="line in lineNumbers"
-        :id="`L${line}`"
-        :key="line"
-        class="diff-line-num js-line-number"
-        :href="`#LC${line}`"
-        :data-line-number="line"
-        @click="scrollToLine(`#LC${line}`)"
-      >
-        <gl-icon :size="12" name="link" />
-        {{ line }}
-      </a>
-    </div>
-    <div class="blob-content">
-      <pre class="code highlight"><code :data-blob-hash="blobHash" v-html="content"></code></pre>
+  <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"
+    >
+      <div class="line-numbers">
+        <a
+          v-for="line in lineNumbers"
+          :id="`L${line}`"
+          :key="line"
+          class="diff-line-num js-line-number"
+          :href="`#LC${line}`"
+          :data-line-number="line"
+          @click="scrollToLine(`#LC${line}`)"
+        >
+          <gl-icon :size="12" name="link" />
+          {{ line }}
+        </a>
+      </div>
+      <div class="blob-content">
+        <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
-  class="file-content code js-syntax-highlight"
-  data-qa-selector="file_content"
->
+<div>
   <div
-    class="line-numbers"
+    class="file-content code js-syntax-highlight"
+    data-qa-selector="file_content"
   >
-    <a
-      class="diff-line-num js-line-number"
-      data-line-number="1"
-      href="#LC1"
-      id="L1"
+    <div
+      class="line-numbers"
     >
-      <gl-icon-stub
-        name="link"
-        size="12"
-      />
+      <a
+        class="diff-line-num js-line-number"
+        data-line-number="1"
+        href="#LC1"
+        id="L1"
+      >
+        <gl-icon-stub
+          name="link"
+          size="12"
+        />
+        
+        1
       
-      1
-    
-    </a>
-    <a
-      class="diff-line-num js-line-number"
-      data-line-number="2"
-      href="#LC2"
-      id="L2"
-    >
-      <gl-icon-stub
-        name="link"
-        size="12"
-      />
+      </a>
+      <a
+        class="diff-line-num js-line-number"
+        data-line-number="2"
+        href="#LC2"
+        id="L2"
+      >
+        <gl-icon-stub
+          name="link"
+          size="12"
+        />
+        
+        2
       
-      2
-    
-    </a>
-    <a
-      class="diff-line-num js-line-number"
-      data-line-number="3"
-      href="#LC3"
-      id="L3"
-    >
-      <gl-icon-stub
-        name="link"
-        size="12"
-      />
+      </a>
+      <a
+        class="diff-line-num js-line-number"
+        data-line-number="3"
+        href="#LC3"
+        id="L3"
+      >
+        <gl-icon-stub
+          name="link"
+          size="12"
+        />
+        
+        3
       
-      3
-    
-    </a>
-  </div>
-   
-  <div
-    class="blob-content"
-  >
-    <pre
-      class="code highlight"
+      </a>
+    </div>
+     
+    <div
+      class="blob-content"
     >
-      <code
-        data-blob-hash="foo-bar"
+      <pre
+        class="code highlight"
       >
-        <span
-          id="LC1"
+        <code
+          data-blob-hash="foo-bar"
         >
-          First
-        </span>
-        
+          <span
+            id="LC1"
+          >
+            First
+          </span>
+          
 
-        <span
-          id="LC2"
-        >
-          Second
-        </span>
-        
+          <span
+            id="LC2"
+          >
+            Second
+          </span>
+          
 
-        <span
-          id="LC3"
-        >
-          Third
-        </span>
-      </code>
-    </pre>
+          <span
+            id="LC3"
+          >
+            Third
+          </span>
+        </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 });
+    });
+  });
 });