Commit a30a5eb6 authored by Denys Mishunov's avatar Denys Mishunov

Removed blob fetching from blob view

Blob will be fetched together with the snippet on the higher
level and should be part of the passed `snippet` prop
parent d1ee7679
......@@ -6,7 +6,6 @@ import BlobContent from '~/blob/components/blob_content.vue';
import { GlLoadingIcon } from '@gitlab/ui';
import CloneDropdownButton from '~/vue_shared/components/clone_dropdown.vue';
import GetSnippetBlobQuery from '../queries/snippet.blob.query.graphql';
import GetBlobContent from '../queries/snippet.blob.content.query.graphql';
import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
......@@ -20,21 +19,6 @@ export default {
CloneDropdownButton,
},
apollo: {
blob: {
query: GetSnippetBlobQuery,
variables() {
return {
ids: this.snippet.id,
};
},
update: data => data.snippets.edges[0].node.blob,
result(res) {
const viewer = res.data.snippets.edges[0].node.blob.richViewer
? RICH_BLOB_VIEWER
: SIMPLE_BLOB_VIEWER;
this.switchViewer(viewer, true);
},
},
blobContent: {
query: GetBlobContent,
variables() {
......@@ -55,18 +39,18 @@ export default {
},
data() {
return {
blob: {},
blob: this.snippet.blob,
blobContent: '',
activeViewerType: window.location.hash ? SIMPLE_BLOB_VIEWER : '',
activeViewerType:
this.snippet.blob?.richViewer && !window.location.hash
? RICH_BLOB_VIEWER
: SIMPLE_BLOB_VIEWER,
};
},
computed: {
embeddable() {
return this.snippet.visibilityLevel === SNIPPET_VISIBILITY_PUBLIC;
},
isBlobLoading() {
return this.$apollo.queries.blob.loading;
},
isContentLoading() {
return this.$apollo.queries.blobContent.loading;
},
......@@ -79,8 +63,8 @@ export default {
},
},
methods: {
switchViewer(newViewer, respectHash = false) {
this.activeViewerType = respectHash && window.location.hash ? SIMPLE_BLOB_VIEWER : newViewer;
switchViewer(newViewer) {
this.activeViewerType = newViewer;
},
},
};
......@@ -88,13 +72,7 @@ export default {
<template>
<div>
<blob-embeddable v-if="embeddable" class="mb-3" :url="snippet.webUrl" />
<gl-loading-icon
v-if="isBlobLoading"
:label="__('Loading blob')"
size="lg"
class="prepend-top-20 append-bottom-20"
/>
<article v-else class="file-holder snippet-file-content">
<article class="file-holder snippet-file-content">
<blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer">
<template #actions>
<clone-dropdown-button
......@@ -104,7 +82,18 @@ export default {
/>
</template>
</blob-header>
<blob-content :loading="isContentLoading" :content="blobContent" :active-viewer="viewer" />
<gl-loading-icon
v-if="isContentLoading"
:label="__('Loading blob')"
size="lg"
class="prepend-top-20 append-bottom-20"
/>
<blob-content
v-else
:loading="isContentLoading"
:content="blobContent"
:active-viewer="viewer"
/>
</article>
</div>
</template>
......@@ -19,23 +19,15 @@ describe('Blob Embeddable', () => {
id: 'gid://foo.bar/snippet',
webUrl: 'https://foo.bar',
visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
blob: BlobMock,
};
const dataMock = {
blob: BlobMock,
activeViewerType: SimpleViewerMock.type,
};
function createComponent(
props = {},
data = dataMock,
blobLoading = false,
contentLoading = false,
) {
function createComponent(props = {}, data = dataMock, contentLoading = false) {
const $apollo = {
queries: {
blob: {
loading: blobLoading,
},
blobContent: {
loading: contentLoading,
},
......@@ -87,10 +79,10 @@ describe('Blob Embeddable', () => {
expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
});
it('shows loading icon while blob data is in flight', () => {
it('shows loading icon while blob content data is in flight', () => {
createComponent({}, dataMock, true);
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
expect(wrapper.find('.snippet-file-content').exists()).toBe(false);
expect(wrapper.find(BlobContent).exists()).toBe(false);
});
it('sets simple viewer correctly', () => {
......@@ -133,14 +125,14 @@ describe('Blob Embeddable', () => {
});
it('renders simple viewer by default if URL contains hash', () => {
createComponent();
createComponent({}, {});
expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
expect(wrapper.find(SimpleViewer).exists()).toBe(true);
});
describe('switchViewer()', () => {
it('by default switches to the passed viewer', () => {
it('switches to the passed viewer', () => {
createComponent();
wrapper.vm.switchViewer(RichViewerMock.type);
......@@ -157,22 +149,6 @@ describe('Blob Embeddable', () => {
expect(wrapper.find(SimpleViewer).exists()).toBe(true);
});
});
it('respects hash over richViewer in the blob when corresponding parameter is passed', () => {
createComponent(
{},
{
blob: BlobMock,
},
);
expect(wrapper.vm.blob.richViewer).toEqual(expect.any(Object));
wrapper.vm.switchViewer(RichViewerMock.type, true);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
expect(wrapper.find(SimpleViewer).exists()).toBe(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