Commit 7663814f authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'dmishunov-rich-viewers' into 'master'

Updated richViewer for blobs

See merge request gitlab-org/gitlab!26260
parents 1de170d4 9024ab47
...@@ -45,7 +45,13 @@ export default { ...@@ -45,7 +45,13 @@ export default {
<template v-else> <template v-else>
<blob-content-error v-if="viewerError" :viewer-error="viewerError" /> <blob-content-error v-if="viewerError" :viewer-error="viewerError" />
<component :is="viewer" v-else ref="contentViewer" :content="content" /> <component
:is="viewer"
v-else
ref="contentViewer"
:content="content"
:type="activeViewer.fileType"
/>
</template> </template>
</div> </div>
</template> </template>
...@@ -5,10 +5,43 @@ import { handleLocationHash } from '../../lib/utils/common_utils'; ...@@ -5,10 +5,43 @@ import { handleLocationHash } from '../../lib/utils/common_utils';
import axios from '../../lib/utils/axios_utils'; import axios from '../../lib/utils/axios_utils';
import { __ } from '~/locale'; import { __ } from '~/locale';
const loadRichBlobViewer = type => {
switch (type) {
case 'balsamiq':
return import(/* webpackChunkName: 'balsamiq_viewer' */ '../balsamiq_viewer');
case 'notebook':
return import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer');
case 'openapi':
return import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer');
case 'pdf':
return import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer');
case 'sketch':
return import(/* webpackChunkName: 'sketch_viewer' */ '../sketch_viewer');
case 'stl':
return import(/* webpackChunkName: 'stl_viewer' */ '../stl_viewer');
default:
return Promise.resolve();
}
};
export const handleBlobRichViewer = (viewer, type) => {
if (!viewer || !type) return;
loadRichBlobViewer(type)
.then(module => module?.default(viewer))
.catch(error => {
Flash(__('Error loading file viewer.'));
throw error;
});
};
export default class BlobViewer { export default class BlobViewer {
constructor() { constructor() {
const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
const type = viewer?.dataset?.richType;
BlobViewer.initAuxiliaryViewer(); BlobViewer.initAuxiliaryViewer();
BlobViewer.initRichViewer();
handleBlobRichViewer(viewer, type);
this.initMainViewers(); this.initMainViewers();
} }
...@@ -20,42 +53,6 @@ export default class BlobViewer { ...@@ -20,42 +53,6 @@ export default class BlobViewer {
BlobViewer.loadViewer(auxiliaryViewer); BlobViewer.loadViewer(auxiliaryViewer);
} }
static initRichViewer() {
const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
if (!viewer || !viewer.dataset.richType) return;
const initViewer = promise =>
promise
.then(module => module.default(viewer))
.catch(error => {
Flash(__('Error loading file viewer.'));
throw error;
});
switch (viewer.dataset.richType) {
case 'balsamiq':
initViewer(import(/* webpackChunkName: 'balsamiq_viewer' */ '../balsamiq_viewer'));
break;
case 'notebook':
initViewer(import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer'));
break;
case 'openapi':
initViewer(import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer'));
break;
case 'pdf':
initViewer(import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer'));
break;
case 'sketch':
initViewer(import(/* webpackChunkName: 'sketch_viewer' */ '../sketch_viewer'));
break;
case 'stl':
initViewer(import(/* webpackChunkName: 'stl_viewer' */ '../stl_viewer'));
break;
default:
break;
}
}
initMainViewers() { initMainViewers() {
this.$fileHolder = $('.file-holder'); this.$fileHolder = $('.file-holder');
if (!this.$fileHolder.length) return; if (!this.$fileHolder.length) return;
......
...@@ -4,5 +4,9 @@ export default { ...@@ -4,5 +4,9 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
type: {
type: String,
required: true,
},
}, },
}; };
<script> <script>
import ViewerMixin from './mixins'; import ViewerMixin from './mixins';
import { handleBlobRichViewer } from '~/blob/viewer';
export default { export default {
mixins: [ViewerMixin], mixins: [ViewerMixin],
mounted() {
handleBlobRichViewer(this.$refs.content, this.type);
},
}; };
</script> </script>
<template> <template>
<div v-html="content"></div> <div ref="content" v-html="content"></div>
</template> </template>
---
title: Special handling for the rich viewer on specific file types
merge_request: 26260
author:
type: changed
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue'; import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue';
import { handleBlobRichViewer } from '~/blob/viewer';
jest.mock('~/blob/viewer');
describe('Blob Rich Viewer component', () => { describe('Blob Rich Viewer component', () => {
let wrapper; let wrapper;
const content = '<h1 id="markdown">Foo Bar</h1>'; const content = '<h1 id="markdown">Foo Bar</h1>';
const defaultType = 'markdown';
function createComponent() { function createComponent(type = defaultType) {
wrapper = shallowMount(RichViewer, { wrapper = shallowMount(RichViewer, {
propsData: { propsData: {
content, content,
type,
}, },
}); });
} }
...@@ -24,4 +29,8 @@ describe('Blob Rich Viewer component', () => { ...@@ -24,4 +29,8 @@ describe('Blob Rich Viewer component', () => {
it('renders the passed content without transformations', () => { it('renders the passed content without transformations', () => {
expect(wrapper.html()).toContain(content); expect(wrapper.html()).toContain(content);
}); });
it('queries for advanced viewer', () => {
expect(handleBlobRichViewer).toHaveBeenCalledWith(expect.anything(), defaultType);
});
}); });
...@@ -10,6 +10,7 @@ describe('Blob Simple Viewer component', () => { ...@@ -10,6 +10,7 @@ describe('Blob Simple Viewer component', () => {
wrapper = shallowMount(SimpleViewer, { wrapper = shallowMount(SimpleViewer, {
propsData: { propsData: {
content, content,
type: 'text',
}, },
}); });
} }
......
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