Integrate blob info query

Integrate blob info query

app/assets/javascripts/pages/projects/blob/show/index.js

 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 import BlobViewer from '~/blob/viewer/index';
 import GpgBadges from '~/gpg_badges';
+import createDefaultClient from '~/lib/graphql';
 import initBlob from '~/pages/projects/init_blob';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 import '~/sourcegraph/load';
 
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
 const viewBlobEl = document.querySelector('#js-view-blob-app');
 
 if (viewBlobEl) {
-  const { blobPath } = viewBlobEl.dataset;
+  const { blobPath, projectPath } = viewBlobEl.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
     el: viewBlobEl,
+    apolloProvider,
     render(createElement) {
       return createElement(BlobContentViewer, {
         props: {
           path: blobPath,
+          projectPath,
         },
       });
     },

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

@@ -6,7 +6,6 @@ import BlobHeader from '~/blob/components/blob_header.vue';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
-import projectPathQuery from '../queries/project_path.query.graphql';
 
 export default {
   components: {
@@ -15,10 +14,7 @@ export default {
     GlLoadingIcon,
   },
   apollo: {
-    projectPath: {
-      query: projectPathQuery,
-    },
-    blobInfo: {
+    project: {
       query: blobInfoQuery,
       variables() {
         return {
@@ -41,41 +37,58 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
-      projectPath: '',
-      blobInfo: {
-        name: '',
-        size: '',
-        rawBlob: '',
-        type: '',
-        fileType: '',
-        tooLarge: false,
-        path: '',
-        editBlobPath: '',
-        ideEditPath: '',
-        storedExternally: false,
-        rawPath: '',
-        externalStorageUrl: '',
-        replacePath: '',
-        deletePath: '',
-        canLock: false,
-        isLocked: false,
-        lockLink: '',
-        canModifyBlob: true,
-        forkPath: '',
-        simpleViewer: '',
-        richViewer: '',
+      project: {
+        repository: {
+          blobs: {
+            nodes: [
+              {
+                name: '',
+                size: '',
+                rawTextBlob: '',
+                type: '',
+                fileType: '',
+                tooLarge: false,
+                path: '',
+                editBlobPath: '',
+                ideEditPath: '',
+                storedExternally: false,
+                rawPath: '',
+                externalStorageUrl: '',
+                replacePath: '',
+                deletePath: '',
+                canLock: false,
+                isLocked: false,
+                lockLink: '',
+                canModifyBlob: true,
+                forkPath: '',
+                simpleViewer: {},
+                richViewer: {},
+              },
+            ],
+          },
+        },
       },
     };
   },
   computed: {
     isLoading() {
-      return this.$apollo.queries.blobInfo.loading;
+      return this.$apollo.queries.project.loading;
+    },
+    blobInfo() {
+      const nodes = this.project?.repository?.blobs?.nodes;
+
+      return nodes[0] || {};
     },
     viewer() {
-      const { fileType, tooLarge, type } = this.blobInfo;
+      const viewer = this.blobInfo.richViewer || this.blobInfo.simpleViewer;
+      const { fileType, tooLarge, type } = viewer;
 
       return { fileType, tooLarge, type };
     },
@@ -90,7 +103,7 @@ export default {
       <blob-header :blob="blobInfo" />
       <blob-content
         :blob="blobInfo"
-        :content="blobInfo.rawBlob"
+        :content="blobInfo.rawTextBlob"
         :is-raw-content="true"
         :active-viewer="viewer"
         :loading="false"

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

@@ -13,10 +13,14 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 
 <template>
-  <blob-content-viewer :path="path" />
+  <blob-content-viewer :path="path" :project-path="projectPath" />
 </template>

app/assets/javascripts/repository/queries/blob_info.query.graphql

@@ -11,15 +11,19 @@ query getBlobInfo($projectPath: ID!, $filePath: String!) {
           fileType
           path
           editBlobPath
-          ideEditPath
           storedExternally
           rawPath
-          externalStorageUrl
           replacePath
-          canModifyBlob
-          forkPath
-          simpleViewer
-          richViewer
+          simpleViewer {
+            fileType
+            tooLarge
+            type
+          }
+          richViewer {
+            fileType
+            tooLarge
+            type
+          }
         }
       }
     }

app/assets/javascripts/repository/router.js

@@ -20,6 +20,7 @@ export default function createRouter(base, baseRef) {
     component: BlobPage,
     props: (route) => ({
       path: route.params.path,
+      projectPath: base,
     }),
   };
 

app/views/projects/blob/_blob.html.haml

@@ -12,7 +12,7 @@
   - if @code_navigation_path
     #js-code-navigation{ data: { code_navigation_path: @code_navigation_path, blob_path: blob.path, definition_path_prefix: project_blob_path(@project, @ref) } }
   - if Feature.enabled?(:refactor_blob_viewer, @project, default_enabled: :yaml)
-    #js-view-blob-app{ data: { blob_path: blob.path } }
+    #js-view-blob-app{ data: { blob_path: blob.path, project_path: @project.full_path } }
       .gl-spinner-container
         = loading_icon(size: 'md')
   - else

config/known_invalid_graphql_queries.yml

@@ -4,5 +4,4 @@ filenames:
   - ee/app/assets/javascripts/security_configuration/api_fuzzing/graphql/api_fuzzing_ci_configuration.query.graphql
   - ee/app/assets/javascripts/security_configuration/api_fuzzing/graphql/create_api_fuzzing_configuration.mutation.graphql
   - ee/app/assets/javascripts/security_configuration/dast_profiles/graphql/dast_failed_site_validations.query.graphql
-  - app/assets/javascripts/repository/queries/blob_info.query.graphql
   - ee/app/assets/javascripts/security_configuration/graphql/configure_dependency_scanning.mutation.graphql

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -8,7 +8,7 @@ let wrapper;
 const mockData = {
   name: 'some_file.js',
   size: 123,
-  rawBlob: 'raw content',
+  rawTextBlob: 'raw content',
   type: 'text',
   fileType: 'text',
   tooLarge: false,
@@ -25,19 +25,24 @@ const mockData = {
   lockLink: 'some_file.js/lock',
   canModifyBlob: true,
   forkPath: 'some_file.js/fork',
-  simpleViewer: {},
-  richViewer: {},
+  simpleViewer: {
+    fileType: 'text',
+    tooLarge: false,
+    type: 'simple',
+  },
+  richViewer: null,
 };
 
 function factory(path, loading = false) {
   wrapper = shallowMount(BlobContentViewer, {
     propsData: {
       path,
+      projectPath: 'some/path',
     },
     mocks: {
       $apollo: {
         queries: {
-          blobInfo: {
+          project: {
             loading,
           },
         },
@@ -80,7 +85,7 @@ describe('Blob content viewer component', () => {
     expect(findBlobContent().props('activeViewer')).toEqual({
       fileType: 'text',
       tooLarge: false,
-      type: 'text',
+      type: 'simple',
     });
   });
 });

spec/frontend/repository/pages/blob_spec.js

@@ -11,7 +11,7 @@ describe('Repository blob page component', () => {
   const path = 'file.js';
 
   beforeEach(() => {
-    wrapper = shallowMount(BlobPage, { propsData: { path } });
+    wrapper = shallowMount(BlobPage, { propsData: { path, projectPath: 'some/path' } });
   });
 
   afterEach(() => {