summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/blob/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/blob/components')
-rw-r--r--app/assets/javascripts/blob/components/blob_content_error.vue2
-rw-r--r--app/assets/javascripts/blob/components/blob_edit_content.vue37
-rw-r--r--app/assets/javascripts/blob/components/blob_edit_header.vue47
-rw-r--r--app/assets/javascripts/blob/components/blob_header.vue2
-rw-r--r--app/assets/javascripts/blob/components/blob_header_default_actions.vue32
-rw-r--r--app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue17
6 files changed, 95 insertions, 42 deletions
diff --git a/app/assets/javascripts/blob/components/blob_content_error.vue b/app/assets/javascripts/blob/components/blob_content_error.vue
index 44dc4a6c727..7344b9cdff5 100644
--- a/app/assets/javascripts/blob/components/blob_content_error.vue
+++ b/app/assets/javascripts/blob/components/blob_content_error.vue
@@ -1,6 +1,6 @@
<script>
-import { __ } from '~/locale';
import { GlSprintf, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
import { BLOB_RENDER_ERRORS } from './constants';
export default {
diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue
index 056b4ea4aa8..26ba7b98a39 100644
--- a/app/assets/javascripts/blob/components/blob_edit_content.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_content.vue
@@ -1,6 +1,12 @@
<script>
-import { initEditorLite } from '~/blob/utils';
import { debounce } from 'lodash';
+import { initEditorLite } from '~/blob/utils';
+import {
+ SNIPPET_MARK_BLOBS_CONTENT,
+ SNIPPET_MARK_EDIT_APP_START,
+ SNIPPET_MEASURE_BLOBS_CONTENT,
+ SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP,
+} from '~/performance_constants';
export default {
props: {
@@ -14,6 +20,13 @@ export default {
required: false,
default: '',
},
+ // This is used to help uniquely create a monaco model
+ // even if two blob's share a file path.
+ fileGlobalId: {
+ type: String,
+ required: false,
+ default: '',
+ },
},
data() {
return {
@@ -30,17 +43,33 @@ export default {
el: this.$refs.editor,
blobPath: this.fileName,
blobContent: this.value,
+ blobGlobalId: this.fileGlobalId,
+ });
+
+ this.editor.onChangeContent(debounce(this.onFileChange.bind(this), 250));
+
+ window.requestAnimationFrame(() => {
+ if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {
+ performance.mark(SNIPPET_MARK_BLOBS_CONTENT);
+ performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT);
+ performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP, SNIPPET_MARK_EDIT_APP_START);
+ }
});
},
+ beforeDestroy() {
+ this.editor.dispose();
+ },
methods: {
- triggerFileChange: debounce(function debouncedFileChange() {
+ onFileChange() {
this.$emit('input', this.editor.getValue());
- }, 250),
+ },
},
};
</script>
<template>
<div class="file-content code">
- <pre id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">{{ value }}</pre>
+ <div id="editor" ref="editor" data-editor-loading>
+ <pre class="editor-loading-content">{{ value }}</pre>
+ </div>
</div>
</template>
diff --git a/app/assets/javascripts/blob/components/blob_edit_header.vue b/app/assets/javascripts/blob/components/blob_edit_header.vue
index e1e1d76f721..2cbbbddceeb 100644
--- a/app/assets/javascripts/blob/components/blob_edit_header.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_header.vue
@@ -1,9 +1,10 @@
<script>
-import { GlFormInput } from '@gitlab/ui';
+import { GlFormInput, GlButton } from '@gitlab/ui';
export default {
components: {
GlFormInput,
+ GlButton,
},
inheritAttrs: false,
props: {
@@ -11,6 +12,16 @@ export default {
type: String,
required: true,
},
+ canDelete: {
+ type: Boolean,
+ required: false,
+ default: true,
+ },
+ showDelete: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
data() {
return {
@@ -21,17 +32,27 @@ export default {
</script>
<template>
<div class="js-file-title file-title-flex-parent">
- <gl-form-input
- id="snippet_file_name"
- v-model="name"
- :placeholder="
- s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
- "
- name="snippet_file_name"
- class="form-control js-snippet-file-name"
- type="text"
- v-bind="$attrs"
- @change="$emit('input', name)"
- />
+ <div class="gl-display-flex gl-align-items-center gl-w-full">
+ <gl-form-input
+ v-model="name"
+ :placeholder="
+ s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
+ "
+ name="snippet_file_name"
+ class="form-control js-snippet-file-name"
+ type="text"
+ v-bind="$attrs"
+ @change="$emit('input', name)"
+ />
+ <gl-button
+ v-if="showDelete"
+ class="gl-ml-4"
+ variant="danger"
+ category="secondary"
+ :disabled="!canDelete"
+ @click="$emit('delete')"
+ >{{ s__('Snippets|Delete file') }}</gl-button
+ >
+ </div>
</div>
</template>
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index 76c5779f3ae..fd40c51fec1 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -71,7 +71,7 @@ export default {
</template>
</blob-filepath>
- <div class="file-actions d-none d-sm-flex">
+ <div class="gl-display-none gl-display-sm-flex">
<viewer-switcher v-if="showViewerSwitcher" v-model="viewer" />
<slot name="actions"></slot>
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 62fef108b47..daade611651 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -1,5 +1,5 @@
<script>
-import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
import {
BTN_COPY_CONTENTS_TITLE,
BTN_DOWNLOAD_TITLE,
@@ -10,9 +10,8 @@ import {
export default {
components: {
- GlIcon,
GlButtonGroup,
- GlDeprecatedButton,
+ GlButton,
},
directives: {
GlTooltip: GlTooltipDirective,
@@ -48,7 +47,7 @@ export default {
</script>
<template>
<gl-button-group>
- <gl-deprecated-button
+ <gl-button
v-if="!hasRenderError"
v-gl-tooltip.hover
:aria-label="$options.BTN_COPY_CONTENTS_TITLE"
@@ -56,26 +55,29 @@ export default {
:disabled="copyDisabled"
data-clipboard-target="#blob-code-content"
data-testid="copyContentsButton"
- >
- <gl-icon name="copy-to-clipboard" :size="14" />
- </gl-deprecated-button>
- <gl-deprecated-button
+ icon="copy-to-clipboard"
+ category="primary"
+ variant="default"
+ />
+ <gl-button
v-gl-tooltip.hover
:aria-label="$options.BTN_RAW_TITLE"
:title="$options.BTN_RAW_TITLE"
:href="rawPath"
target="_blank"
- >
- <gl-icon name="doc-code" :size="14" />
- </gl-deprecated-button>
- <gl-deprecated-button
+ icon="doc-code"
+ category="primary"
+ variant="default"
+ />
+ <gl-button
v-gl-tooltip.hover
:aria-label="$options.BTN_DOWNLOAD_TITLE"
:title="$options.BTN_DOWNLOAD_TITLE"
:href="downloadUrl"
target="_blank"
- >
- <gl-icon name="download" :size="14" />
- </gl-deprecated-button>
+ icon="download"
+ category="primary"
+ variant="default"
+ />
</gl-button-group>
</template>
diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
index 5b15fe2d7cc..902dd0b8eec 100644
--- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
+++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
@@ -1,5 +1,5 @@
<script>
-import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
import {
RICH_BLOB_VIEWER,
RICH_BLOB_VIEWER_TITLE,
@@ -9,7 +9,6 @@ import {
export default {
components: {
- GlIcon,
GlButtonGroup,
GlButton,
},
@@ -52,19 +51,21 @@ export default {
:title="$options.SIMPLE_BLOB_VIEWER_TITLE"
:selected="isSimpleViewer"
:class="{ active: isSimpleViewer }"
+ icon="code"
+ category="primary"
+ variant="default"
@click="switchToViewer($options.SIMPLE_BLOB_VIEWER)"
- >
- <gl-icon name="code" :size="14" />
- </gl-button>
+ />
<gl-button
v-gl-tooltip.hover
:aria-label="$options.RICH_BLOB_VIEWER_TITLE"
:title="$options.RICH_BLOB_VIEWER_TITLE"
:selected="isRichViewer"
:class="{ active: isRichViewer }"
+ icon="document"
+ category="primary"
+ variant="default"
@click="switchToViewer($options.RICH_BLOB_VIEWER)"
- >
- <gl-icon name="document" :size="14" />
- </gl-button>
+ />
</gl-button-group>
</template>