Commit 6eac70da authored by Jacques Erasmus's avatar Jacques Erasmus

Merge branch '327782-do-not-load-source-editor-by-default' into 'master'

Do not render Source Editor by default for the repository files

See merge request gitlab-org/gitlab!59430
parents 69d3c36c 6b002e6e
<script>
/* eslint-disable vue/no-v-html */
import { GlIcon } from '@gitlab/ui';
import EditorLite from '~/vue_shared/components/editor_lite.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { HIGHLIGHT_CLASS_NAME } from './constants';
import ViewerMixin from './mixins';
export default {
components: {
GlIcon,
EditorLite,
EditorLite: () =>
import(/* webpackChunkName: 'EditorLite' */ '~/vue_shared/components/editor_lite.vue'),
},
mixins: [ViewerMixin],
mixins: [ViewerMixin, glFeatureFlagsMixin()],
inject: ['blobHash'],
data() {
return {
......@@ -21,6 +22,9 @@ export default {
lineNumbers() {
return this.content.split('\n').length;
},
refactorBlobViewerEnabled() {
return this.glFeatures.refactorBlobViewer;
},
},
mounted() {
const { hash } = window.location;
......@@ -49,7 +53,7 @@ export default {
<template>
<div>
<editor-lite
v-if="isRawContent"
v-if="isRawContent && refactorBlobViewerEnabled"
:value="content"
:file-name="fileName"
:editor-options="{ readOnly: true }"
......
import { shallowMount } from '@vue/test-utils';
import waitForPromises from 'helpers/wait_for_promises';
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';
......@@ -8,10 +9,17 @@ describe('Blob Simple Viewer component', () => {
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, isRawContent = false) {
function createComponent(
content = contentMock,
isRawContent = false,
isRefactorFlagEnabled = false,
) {
wrapper = shallowMount(SimpleViewer, {
provide: {
blobHash,
glFeatures: {
refactorBlobViewer: isRefactorFlagEnabled,
},
},
propsData: {
content,
......@@ -87,17 +95,31 @@ describe('Blob Simple Viewer component', () => {
});
});
describe('raw content', () => {
describe('Vue refactoring to use Source Editor', () => {
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 });
});
it.each`
doesRender | condition | isRawContent | isRefactorFlagEnabled
${'Does not'} | ${'rawContent is not specified'} | ${false} | ${true}
${'Does not'} | ${'feature flag is disabled is not specified'} | ${true} | ${false}
${'Does not'} | ${'both, the FF and rawContent are not specified'} | ${false} | ${false}
${'Does'} | ${'both, the FF and rawContent are specified'} | ${true} | ${true}
`(
'$doesRender render Editor Lite component in readonly mode when $condition',
async ({ isRawContent, isRefactorFlagEnabled } = {}) => {
createComponent('raw content', isRawContent, isRefactorFlagEnabled);
await waitForPromises();
if (isRawContent && isRefactorFlagEnabled) {
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 });
} else {
expect(findEditorLite().exists()).toBe(false);
}
},
);
});
});
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