diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue | 54 |
1 files changed, 32 insertions, 22 deletions
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue index 5bb31f55e6c..f477610ff1d 100644 --- a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue @@ -1,14 +1,17 @@ <script> /* eslint-disable vue/no-v-html */ import { GlIcon } from '@gitlab/ui'; +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: () => + import(/* webpackChunkName: 'EditorLite' */ '~/vue_shared/components/editor_lite.vue'), }, - mixins: [ViewerMixin], + mixins: [ViewerMixin, glFeatureFlagsMixin()], inject: ['blobHash'], data() { return { @@ -19,6 +22,9 @@ export default { lineNumbers() { return this.content.split('\n').length; }, + refactorBlobViewerEnabled() { + return this.glFeatures.refactorBlobViewer; + }, }, mounted() { const { hash } = window.location; @@ -45,27 +51,31 @@ export default { }; </script> <template> - <div - class="file-content code js-syntax-highlight" - data-qa-selector="file_content" - :class="$options.userColorScheme" - > - <div class="line-numbers"> - <a - v-for="line in lineNumbers" - :id="`L${line}`" - :key="line" - class="diff-line-num js-line-number" - :href="`#LC${line}`" - :data-line-number="line" - @click="scrollToLine(`#LC${line}`)" - > - <gl-icon :size="12" name="link" /> - {{ line }} - </a> - </div> - <div class="blob-content"> - <pre class="code highlight"><code :data-blob-hash="blobHash" v-html="content"></code></pre> + <div> + <editor-lite + v-if="isRawContent && refactorBlobViewerEnabled" + :value="content" + :file-name="fileName" + :editor-options="{ readOnly: true }" + /> + <div v-else class="file-content code js-syntax-highlight" :class="$options.userColorScheme"> + <div class="line-numbers"> + <a + v-for="line in lineNumbers" + :id="`L${line}`" + :key="line" + class="diff-line-num js-line-number" + :href="`#LC${line}`" + :data-line-number="line" + @click="scrollToLine(`#LC${line}`)" + > + <gl-icon :size="12" name="link" /> + {{ line }} + </a> + </div> + <div class="blob-content"> + <pre class="code highlight"><code :data-blob-hash="blobHash" v-html="content"></code></pre> + </div> </div> </div> </template> |