diff options
Diffstat (limited to 'app/assets/javascripts/blob')
-rw-r--r-- | app/assets/javascripts/blob/balsamiq_viewer.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/blob/components/blob_content.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/blob/components/blob_edit_content.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/blob/components/blob_header_filepath.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/blob/csv/csv_viewer.vue | 55 | ||||
-rw-r--r-- | app/assets/javascripts/blob/csv/index.js | 17 | ||||
-rw-r--r-- | app/assets/javascripts/blob/csv_viewer.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/blob/file_template_mediator.js | 11 | ||||
-rw-r--r-- | app/assets/javascripts/blob/openapi/index.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/blob/utils.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/blob/viewer/index.js | 40 |
11 files changed, 132 insertions, 22 deletions
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js index c9152db509a..af8e8a4cd3d 100644 --- a/app/assets/javascripts/blob/balsamiq_viewer.js +++ b/app/assets/javascripts/blob/balsamiq_viewer.js @@ -1,9 +1,11 @@ +import createFlash from '~/flash'; import { __ } from '~/locale'; -import { deprecatedCreateFlash as Flash } from '../flash'; import BalsamiqViewer from './balsamiq/balsamiq_viewer'; function onError() { - const flash = new Flash(__('Balsamiq file could not be loaded.')); + const flash = createFlash({ + message: __('Balsamiq file could not be loaded.'), + }); return flash; } diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue index 60729c11002..1a74675100b 100644 --- a/app/assets/javascripts/blob/components/blob_content.vue +++ b/app/assets/javascripts/blob/components/blob_content.vue @@ -27,6 +27,11 @@ export default { default: false, required: false, }, + richViewer: { + type: String, + default: '', + required: false, + }, loading: { type: Boolean, default: true, @@ -71,6 +76,7 @@ export default { v-else ref="contentViewer" :content="content" + :rich-viewer="richViewer" :is-raw-content="isRawContent" :file-name="blob.name" :type="activeViewer.fileType" diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue index 73ccc3289b9..0e670bbd80a 100644 --- a/app/assets/javascripts/blob/components/blob_edit_content.vue +++ b/app/assets/javascripts/blob/components/blob_edit_content.vue @@ -1,6 +1,6 @@ <script> import { debounce } from 'lodash'; -import { initEditorLite } from '~/blob/utils'; +import { initSourceEditor } from '~/blob/utils'; import { SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance/constants'; import eventHub from './eventhub'; @@ -36,7 +36,7 @@ export default { }, }, mounted() { - this.editor = initEditorLite({ + this.editor = initSourceEditor({ el: this.$refs.editor, blobPath: this.fileName, blobContent: this.value, diff --git a/app/assets/javascripts/blob/components/blob_header_filepath.vue b/app/assets/javascripts/blob/components/blob_header_filepath.vue index 99fe3938046..cb441a7e491 100644 --- a/app/assets/javascripts/blob/components/blob_header_filepath.vue +++ b/app/assets/javascripts/blob/components/blob_header_filepath.vue @@ -29,7 +29,7 @@ export default { <slot name="filepath-prepend"></slot> <template v-if="blob.path"> - <file-icon :file-name="blob.path" :size="18" aria-hidden="true" css-classes="mr-2" /> + <file-icon :file-name="blob.path" :size="16" aria-hidden="true" css-classes="mr-2" /> <strong class="file-title-name mr-1 js-blob-header-filepath" data-qa-selector="file_title_content" diff --git a/app/assets/javascripts/blob/csv/csv_viewer.vue b/app/assets/javascripts/blob/csv/csv_viewer.vue new file mode 100644 index 00000000000..050f2785d9a --- /dev/null +++ b/app/assets/javascripts/blob/csv/csv_viewer.vue @@ -0,0 +1,55 @@ +<script> +import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui'; +import Papa from 'papaparse'; + +export default { + components: { + GlTable, + GlAlert, + GlLoadingIcon, + }, + props: { + csv: { + type: String, + required: true, + }, + }, + data() { + return { + items: [], + errorMessage: null, + loading: true, + }; + }, + mounted() { + const parsed = Papa.parse(this.csv, { skipEmptyLines: true }); + this.items = parsed.data; + + if (parsed.errors.length) { + this.errorMessage = parsed.errors.map((e) => e.message).join('. '); + } + + this.loading = false; + }, +}; +</script> + +<template> + <div class="container-fluid md gl-mt-3 gl-mb-3"> + <div v-if="loading" class="gl-text-center loading"> + <gl-loading-icon class="gl-mt-5" size="lg" /> + </div> + <div v-else> + <gl-alert v-if="errorMessage" variant="danger" :dismissible="false"> + {{ errorMessage }} + </gl-alert> + <gl-table + :empty-text="__('No CSV data to display.')" + :items="items" + :fields="$options.fields" + show-empty + thead-class="gl-display-none" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/blob/csv/index.js b/app/assets/javascripts/blob/csv/index.js new file mode 100644 index 00000000000..4cf6c169c68 --- /dev/null +++ b/app/assets/javascripts/blob/csv/index.js @@ -0,0 +1,17 @@ +import Vue from 'vue'; +import CsvViewer from './csv_viewer.vue'; + +export default () => { + const el = document.getElementById('js-csv-viewer'); + + return new Vue({ + el, + render(createElement) { + return createElement(CsvViewer, { + props: { + csv: el.dataset.data, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/blob/csv_viewer.js b/app/assets/javascripts/blob/csv_viewer.js new file mode 100644 index 00000000000..64d3ba0b390 --- /dev/null +++ b/app/assets/javascripts/blob/csv_viewer.js @@ -0,0 +1,3 @@ +import renderCSV from './csv'; + +export default renderCSV; diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js index 59ab84bf208..136457c115d 100644 --- a/app/assets/javascripts/blob/file_template_mediator.js +++ b/app/assets/javascripts/blob/file_template_mediator.js @@ -2,11 +2,10 @@ import $ from 'jquery'; import Api from '~/api'; import initPopover from '~/blob/suggest_gitlab_ci_yml'; +import createFlash from '~/flash'; import { __ } from '~/locale'; import toast from '~/vue_shared/plugins/global_toast'; -import { deprecatedCreateFlash as Flash } from '../flash'; - import BlobCiYamlSelector from './template_selectors/ci_yaml_selector'; import DockerfileSelector from './template_selectors/dockerfile_selector'; import GitignoreSelector from './template_selectors/gitignore_selector'; @@ -146,7 +145,7 @@ export default class FileTemplateMediator { text: __('Undo'), onClick: (e, toastObj) => { self.restoreFromCache(); - toastObj.goAway(0); + toastObj.hide(); }, }, }); @@ -155,7 +154,11 @@ export default class FileTemplateMediator { initPopover(suggestCommitChanges); } }) - .catch((err) => new Flash(`An error occurred while fetching the template: ${err}`)); + .catch((err) => + createFlash({ + message: __(`An error occurred while fetching the template: ${err}`), + }), + ); } displayMatchedTemplateSelector() { diff --git a/app/assets/javascripts/blob/openapi/index.js b/app/assets/javascripts/blob/openapi/index.js index e6dc463f764..cb251274b18 100644 --- a/app/assets/javascripts/blob/openapi/index.js +++ b/app/assets/javascripts/blob/openapi/index.js @@ -1,5 +1,5 @@ import { SwaggerUIBundle } from 'swagger-ui-dist'; -import { deprecatedCreateFlash as flash } from '~/flash'; +import createFlash from '~/flash'; import { __ } from '~/locale'; export default () => { @@ -13,7 +13,9 @@ export default () => { }); }) .catch((error) => { - flash(__('Something went wrong while initializing the OpenAPI viewer')); + createFlash({ + message: __('Something went wrong while initializing the OpenAPI viewer'), + }); throw error; }); }; diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js index 8043c0bbc07..bbc061dd36e 100644 --- a/app/assets/javascripts/blob/utils.js +++ b/app/assets/javascripts/blob/utils.js @@ -1,6 +1,6 @@ -import Editor from '~/editor/editor_lite'; +import Editor from '~/editor/source_editor'; -export function initEditorLite({ el, ...args }) { +export function initSourceEditor({ el, ...args }) { const editor = new Editor({ scrollbar: { alwaysConsumeMouseWheel: false, diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 22c6b31143f..4d133659daa 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -1,14 +1,16 @@ import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; +import createFlash from '~/flash'; import { __ } from '~/locale'; import { REPO_BLOB_LOAD_VIEWER_START, REPO_BLOB_LOAD_VIEWER_FINISH, REPO_BLOB_LOAD_VIEWER, + REPO_BLOB_SWITCH_TO_VIEWER_START, + REPO_BLOB_SWITCH_VIEWER, } from '~/performance/constants'; import { performanceMarkAndMeasure } from '~/performance/utils'; import { fixTitle } from '~/tooltips'; -import { deprecatedCreateFlash as Flash } from '../../flash'; import axios from '../../lib/utils/axios_utils'; import { handleLocationHash } from '../../lib/utils/common_utils'; import eventHub from '../../notes/event_hub'; @@ -21,6 +23,8 @@ const loadRichBlobViewer = (type) => { return import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer'); case 'openapi': return import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer'); + case 'csv': + return import(/* webpackChunkName: 'csv_viewer' */ '../csv_viewer'); case 'pdf': return import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer'); case 'sketch': @@ -38,13 +42,18 @@ export const handleBlobRichViewer = (viewer, type) => { loadRichBlobViewer(type) .then((module) => module?.default(viewer)) .catch((error) => { - Flash(__('Error loading file viewer.')); + createFlash({ + message: __('Error loading file viewer.'), + }); throw error; }); }; export default class BlobViewer { constructor() { + performanceMarkAndMeasure({ + mark: REPO_BLOB_LOAD_VIEWER_START, + }); const viewer = document.querySelector('.blob-viewer[data-type="rich"]'); const type = viewer?.dataset?.richType; BlobViewer.initAuxiliaryViewer(); @@ -137,7 +146,7 @@ export default class BlobViewer { switchToViewer(name) { performanceMarkAndMeasure({ - mark: REPO_BLOB_LOAD_VIEWER_START, + mark: REPO_BLOB_SWITCH_TO_VIEWER_START, }); const newViewer = this.$fileHolder[0].querySelector(`.blob-viewer[data-type='${name}']`); if (this.activeViewer === newViewer) return; @@ -167,11 +176,15 @@ export default class BlobViewer { BlobViewer.loadViewer(newViewer) .then((viewer) => { $(viewer).renderGFM(); + window.requestIdleCallback(() => { + this.$fileHolder.trigger('highlight:line'); + handleLocationHash(); - this.$fileHolder.trigger('highlight:line'); - handleLocationHash(); + viewer.setAttribute('data-loaded', 'true'); + this.toggleCopyButtonState(); + eventHub.$emit('showBlobInteractionZones', viewer.dataset.path); + }); - this.toggleCopyButtonState(); performanceMarkAndMeasure({ mark: REPO_BLOB_LOAD_VIEWER_FINISH, measures: [ @@ -179,10 +192,18 @@ export default class BlobViewer { name: REPO_BLOB_LOAD_VIEWER, start: REPO_BLOB_LOAD_VIEWER_START, }, + { + name: REPO_BLOB_SWITCH_VIEWER, + start: REPO_BLOB_SWITCH_TO_VIEWER_START, + }, ], }); }) - .catch(() => new Flash(__('Error loading viewer'))); + .catch(() => + createFlash({ + message: __('Error loading viewer'), + }), + ); } static loadViewer(viewerParam) { @@ -197,9 +218,10 @@ export default class BlobViewer { return axios.get(url).then(({ data }) => { viewer.innerHTML = data.html; - viewer.setAttribute('data-loaded', 'true'); - eventHub.$emit('showBlobInteractionZones', viewer.dataset.path); + window.requestIdleCallback(() => { + viewer.removeAttribute('data-loading'); + }); return viewer; }); |