From 6e392cd879edd2796583c7fc646ec1be807864b4 Mon Sep 17 00:00:00 2001
From: Jacques Erasmus <jerasmus@gitlab.com>
Date: Thu, 25 Mar 2021 10:57:48 +0000
Subject: [PATCH 1/2] Add blob content viewer

Added blob content viewer to the app
---
 .../components/blob_content_viewer.vue        | 88 +++++++++++++++++++
 .../queries/blob_info.query.graphql           | 30 +++++++
 config/known_invalid_graphql_queries.yml      |  1 +
 .../components/blob_content_viewer_spec.js    | 85 ++++++++++++++++++
 4 files changed, 204 insertions(+)
 create mode 100644 app/assets/javascripts/repository/components/blob_content_viewer.vue
 create mode 100644 app/assets/javascripts/repository/queries/blob_info.query.graphql
 create mode 100644 spec/frontend/repository/components/blob_content_viewer_spec.js

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
new file mode 100644
index 00000000000000..d68168189f1f50
--- /dev/null
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -0,0 +1,88 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import BlobContent from '~/blob/components/blob_content.vue';
+import BlobHeader from '~/blob/components/blob_header.vue';
+
+import blobInfoQuery from '../queries/blob_info.query.graphql';
+import projectPathQuery from '../queries/project_path.query.graphql';
+
+export default {
+  components: {
+    BlobHeader,
+    BlobContent,
+    GlLoadingIcon,
+  },
+  apollo: {
+    projectPath: {
+      query: projectPathQuery,
+    },
+    blobInfo: {
+      query: blobInfoQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+          filePath: this.path,
+        };
+      },
+    },
+  },
+  provide() {
+    return {
+      blobHash: Math.random().toString().split('.')[1],
+    };
+  },
+  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: '',
+      },
+    };
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.blobInfo.loading;
+    },
+    viewer() {
+      const { fileType, tooLarge, type } = this.blobInfo;
+
+      return { fileType, tooLarge, type };
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" />
+    <div v-if="blobInfo && !isLoading">
+      <blob-header :blob="blobInfo" />
+      <blob-content
+        :blob="blobInfo"
+        :content="blobInfo.rawBlob"
+        :active-viewer="viewer"
+        :loading="false"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/queries/blob_info.query.graphql b/app/assets/javascripts/repository/queries/blob_info.query.graphql
new file mode 100644
index 00000000000000..e0bbf12f3ebc34
--- /dev/null
+++ b/app/assets/javascripts/repository/queries/blob_info.query.graphql
@@ -0,0 +1,30 @@
+query getBlobInfo($projectPath: ID!, $filePath: String!) {
+  project(fullPath: $projectPath) {
+    id
+    repository {
+      blobs(path: $filePath) {
+        name
+        size
+        rawBlob
+        type
+        fileType
+        tooLarge
+        path
+        editBlobPath
+        ideEditPath
+        storedExternally
+        rawPath
+        externalStorageUrl
+        replacePath
+        deletePath
+        canLock
+        isLocked
+        lockLink
+        canModifyBlob
+        forkPath
+        simpleViewer
+        richViewer
+      }
+    }
+  }
+}
diff --git a/config/known_invalid_graphql_queries.yml b/config/known_invalid_graphql_queries.yml
index 2989b3a4262623..26188d6068f019 100644
--- a/config/known_invalid_graphql_queries.yml
+++ b/config/known_invalid_graphql_queries.yml
@@ -4,3 +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
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
new file mode 100644
index 00000000000000..a0d00ff9a7d3a0
--- /dev/null
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -0,0 +1,85 @@
+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import BlobContent from '~/blob/components/blob_content.vue';
+import BlobHeader from '~/blob/components/blob_header.vue';
+import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
+
+let wrapper;
+const mockData = {
+  name: 'some_file.js',
+  size: 123,
+  rawBlob: 'raw content',
+  type: 'text',
+  fileType: 'text',
+  tooLarge: false,
+  path: 'some_file.js',
+  editBlobPath: 'some_file.js/edit',
+  ideEditPath: 'some_file.js/ide/edit',
+  storedExternally: false,
+  rawPath: 'some_file.js',
+  externalStorageUrl: 'some_file.js',
+  replacePath: 'some_file.js/replace',
+  deletePath: 'some_file.js/delete',
+  canLock: true,
+  isLocked: false,
+  lockLink: 'some_file.js/lock',
+  canModifyBlob: true,
+  forkPath: 'some_file.js/fork',
+  simpleViewer: {},
+  richViewer: {},
+};
+
+function factory(path, loading = false) {
+  wrapper = shallowMount(BlobContentViewer, {
+    propsData: {
+      path,
+    },
+    mocks: {
+      $apollo: {
+        queries: {
+          blobInfo: {
+            loading,
+          },
+        },
+      },
+    },
+  });
+
+  wrapper.setData({ blobInfo: mockData });
+}
+
+describe('Blob content viewer component', () => {
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findBlobHeader = () => wrapper.find(BlobHeader);
+  const findBlobContent = () => wrapper.find(BlobContent);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(() => {
+    factory('some_file.js');
+  });
+
+  it('renders a GlLoadingIcon component', () => {
+    factory('some_file.js', true);
+
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
+
+  it('renders a BlobHeader component', () => {
+    expect(findBlobHeader().exists()).toBe(true);
+  });
+
+  it('renders a BlobContent component', () => {
+    expect(findBlobContent().exists()).toBe(true);
+
+    expect(findBlobContent().props('loading')).toEqual(false);
+    expect(findBlobContent().props('content')).toEqual('raw content');
+    expect(findBlobContent().props('activeViewer')).toEqual({
+      fileType: 'text',
+      tooLarge: false,
+      type: 'text',
+    });
+  });
+});
-- 
GitLab


From 2456381ae8e8b876ea0a07cef1b8115a18f4b0dc Mon Sep 17 00:00:00 2001
From: Jacques Erasmus <jerasmus@gitlab.com>
Date: Mon, 29 Mar 2021 08:11:04 +0000
Subject: [PATCH 2/2] Address code review comments

Addressed maintainer review comments
---
 .../repository/components/blob_content_viewer.vue        | 9 +++++++--
 locale/gitlab.pot                                        | 3 +++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index d68168189f1f50..a77c1a41787881 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -1,8 +1,10 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
 import BlobContent from '~/blob/components/blob_content.vue';
 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';
 
@@ -24,11 +26,14 @@ export default {
           filePath: this.path,
         };
       },
+      error() {
+        createFlash({ message: __('An error occurred while loading the file. Please try again.') });
+      },
     },
   },
   provide() {
     return {
-      blobHash: Math.random().toString().split('.')[1],
+      blobHash: uniqueId(),
     };
   },
   data() {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6d474eae891618..4db67aa1dc7f1d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3533,6 +3533,9 @@ msgstr ""
 msgid "An error occurred while loading the file. Please try again later."
 msgstr ""
 
+msgid "An error occurred while loading the file. Please try again."
+msgstr ""
+
 msgid "An error occurred while loading the merge request changes."
 msgstr ""
 
-- 
GitLab