Merge branch 'view-blobs-accross-branches' into 'master'

Add ability to view blobs accross branches

See merge request gitlab-org/gitlab!66156

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

@@ -8,6 +8,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
+import getRefMixin from '../mixins/get_ref';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
 import BlobButtonGroup from './blob_button_group.vue';
 import BlobEdit from './blob_edit.vue';
@@ -21,6 +22,12 @@ export default {
     BlobContent,
     GlLoadingIcon,
   },
+  mixins: [getRefMixin],
+  inject: {
+    originalBranch: {
+      default: '',
+    },
+  },
   apollo: {
     project: {
       query: blobInfoQuery,
@@ -28,6 +35,7 @@ export default {
         return {
           projectPath: this.projectPath,
           filePath: this.path,
+          ref: this.originalBranch || this.ref,
         };
       },
       result() {

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

-query getBlobInfo($projectPath: ID!, $filePath: String!) {
+query getBlobInfo($projectPath: ID!, $filePath: String!, $ref: String!) {
   project(fullPath: $projectPath) {
     userPermissions {
       pushCode
     }
     repository {
       empty
-      blobs(paths: [$filePath]) {
+      blobs(paths: [$filePath], ref: $ref) {
         nodes {
           webPath
           name

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -20,6 +20,8 @@ import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 jest.mock('~/repository/components/blob_viewers');
 
 let wrapper;
+let mockResolver;
+
 const simpleMockData = {
   name: 'some_file.js',
   size: 123,
@@ -71,14 +73,14 @@ const projectMockData = {
 const localVue = createLocalVue();
 const mockAxios = new MockAdapter(axios);
 
-const createComponentWithApollo = (mockData = {}) => {
+const createComponentWithApollo = (mockData = {}, inject = {}) => {
   localVue.use(VueApollo);
 
   const defaultPushCode = projectMockData.userPermissions.pushCode;
   const defaultEmptyRepo = projectMockData.repository.empty;
   const { blobs, emptyRepo = defaultEmptyRepo, canPushCode = defaultPushCode } = mockData;
 
-  const mockResolver = jest.fn().mockResolvedValue({
+  mockResolver = jest.fn().mockResolvedValue({
     data: {
       project: {
         userPermissions: { pushCode: canPushCode },
@@ -101,6 +103,14 @@ const createComponentWithApollo = (mockData = {}) => {
       path: 'some_file.js',
       projectPath: 'some/path',
     },
+    mixins: [
+      {
+        data: () => ({ ref: 'default-ref' }),
+      },
+    ],
+    provide: {
+      ...inject,
+    },
   });
 };
 
@@ -119,6 +129,7 @@ const createFactory = (mountFn) => (
         queries: {
           project: {
             loading,
+            refetch: jest.fn(),
           },
         },
       },
@@ -382,4 +393,32 @@ describe('Blob content viewer component', () => {
       });
     });
   });
+
+  describe('blob info query', () => {
+    it('is called with originalBranch value if the prop has a value', async () => {
+      const inject = { originalBranch: 'some-branch' };
+      createComponentWithApollo({ blobs: simpleMockData }, inject);
+
+      await waitForPromises();
+
+      expect(mockResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ref: 'some-branch',
+        }),
+      );
+    });
+
+    it('is called with ref value if the originalBranch prop has no value', async () => {
+      const inject = { originalBranch: null };
+      createComponentWithApollo({ blobs: simpleMockData }, inject);
+
+      await waitForPromises();
+
+      expect(mockResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ref: 'default-ref',
+        }),
+      );
+    });
+  });
 });