diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 09:08:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 09:08:42 +0000 |
commit | b76ae638462ab0f673e5915986070518dd3f9ad3 (patch) | |
tree | bdab0533383b52873be0ec0eb4d3c66598ff8b91 /app/assets/javascripts/blob | |
parent | 434373eabe7b4be9593d18a585fb763f1e5f1a6f (diff) | |
download | gitlab-ce-b76ae638462ab0f673e5915986070518dd3f9ad3.tar.gz |
Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42
Diffstat (limited to 'app/assets/javascripts/blob')
4 files changed, 53 insertions, 39 deletions
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue index 9c023235428..4742b4ae4b4 100644 --- a/app/assets/javascripts/blob/components/blob_header.vue +++ b/app/assets/javascripts/blob/components/blob_header.vue @@ -25,6 +25,11 @@ export default { required: false, default: false, }, + isBinary: { + type: Boolean, + required: false, + default: false, + }, activeViewerType: { type: String, required: false, @@ -81,6 +86,7 @@ export default { :raw-path="blob.rawPath" :active-viewer="viewer" :has-render-error="hasRenderError" + :is-binary="isBinary" @copy="proxyCopyRequest" /> </div> diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue index b9f2c5b42e4..2798a918b15 100644 --- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue +++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue @@ -32,6 +32,11 @@ export default { required: false, default: false, }, + isBinary: { + type: Boolean, + required: false, + default: false, + }, }, computed: { downloadUrl() { @@ -43,6 +48,9 @@ export default { getBlobHashTarget() { return `[data-blob-hash="${this.blobHash}"]`; }, + showCopyButton() { + return !this.hasRenderError && !this.isBinary; + }, }, BTN_COPY_CONTENTS_TITLE, BTN_DOWNLOAD_TITLE, @@ -52,7 +60,7 @@ export default { <template> <gl-button-group data-qa-selector="default_actions_container"> <gl-button - v-if="!hasRenderError" + v-if="showCopyButton" v-gl-tooltip.hover :aria-label="$options.BTN_COPY_CONTENTS_TITLE" :title="$options.BTN_COPY_CONTENTS_TITLE" @@ -65,6 +73,7 @@ export default { variant="default" /> <gl-button + v-if="!isBinary" v-gl-tooltip.hover :aria-label="$options.BTN_RAW_TITLE" :title="$options.BTN_RAW_TITLE" diff --git a/app/assets/javascripts/blob/csv/csv_viewer.vue b/app/assets/javascripts/blob/csv/csv_viewer.vue index 050f2785d9a..1f9d20a487f 100644 --- a/app/assets/javascripts/blob/csv/csv_viewer.vue +++ b/app/assets/javascripts/blob/csv/csv_viewer.vue @@ -1,11 +1,12 @@ <script> -import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui'; +import { GlLoadingIcon, GlTable } from '@gitlab/ui'; import Papa from 'papaparse'; +import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue'; export default { components: { + PapaParseAlert, GlTable, - GlAlert, GlLoadingIcon, }, props: { @@ -17,7 +18,7 @@ export default { data() { return { items: [], - errorMessage: null, + papaParseErrors: [], loading: true, }; }, @@ -26,7 +27,7 @@ export default { this.items = parsed.data; if (parsed.errors.length) { - this.errorMessage = parsed.errors.map((e) => e.message).join('. '); + this.papaParseErrors = parsed.errors; } this.loading = false; @@ -40,9 +41,7 @@ export default { <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> + <papa-parse-alert v-if="papaParseErrors.length" :papa-parse-errors="papaParseErrors" /> <gl-table :empty-text="__('No CSV data to display.')" :items="items" diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 4d133659daa..1bda7d4e3f0 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -36,6 +36,34 @@ const loadRichBlobViewer = (type) => { } }; +const loadViewer = (viewerParam) => { + const viewer = viewerParam; + const url = viewer.getAttribute('data-url'); + + if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) { + return Promise.resolve(viewer); + } + + viewer.setAttribute('data-loading', 'true'); + + return axios.get(url).then(({ data }) => { + viewer.innerHTML = data.html; + + window.requestIdleCallback(() => { + viewer.removeAttribute('data-loading'); + }); + + return viewer; + }); +}; + +export const initAuxiliaryViewer = () => { + const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]'); + if (!auxiliaryViewer) return; + + loadViewer(auxiliaryViewer); +}; + export const handleBlobRichViewer = (viewer, type) => { if (!viewer || !type) return; @@ -49,27 +77,20 @@ export const handleBlobRichViewer = (viewer, type) => { }); }; -export default class BlobViewer { +export 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(); + initAuxiliaryViewer(); handleBlobRichViewer(viewer, type); this.initMainViewers(); } - static initAuxiliaryViewer() { - const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]'); - if (!auxiliaryViewer) return; - - BlobViewer.loadViewer(auxiliaryViewer); - } - initMainViewers() { this.$fileHolder = $('.file-holder'); if (!this.$fileHolder.length) return; @@ -173,7 +194,7 @@ export default class BlobViewer { this.activeViewer = newViewer; this.toggleCopyButtonState(); - BlobViewer.loadViewer(newViewer) + loadViewer(newViewer) .then((viewer) => { $(viewer).renderGFM(); window.requestIdleCallback(() => { @@ -205,25 +226,4 @@ export default class BlobViewer { }), ); } - - static loadViewer(viewerParam) { - const viewer = viewerParam; - const url = viewer.getAttribute('data-url'); - - if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) { - return Promise.resolve(viewer); - } - - viewer.setAttribute('data-loading', 'true'); - - return axios.get(url).then(({ data }) => { - viewer.innerHTML = data.html; - - window.requestIdleCallback(() => { - viewer.removeAttribute('data-loading'); - }); - - return viewer; - }); - } } |