Commit 630f2e18 authored by Brandon Labuschagne's avatar Brandon Labuschagne

Merge branch '323200-view-blobs-through-view' into 'master'

Use Editor Lite in readonly mode to view blobs

See merge request gitlab-org/gitlab!57705
parents f84fd813 ff6826fc
......@@ -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"
/>
......
......@@ -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"
/>
......
......@@ -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>
......@@ -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);
......
<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>
......@@ -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,
......
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);
});
});
// 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>
`;
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 });
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment