diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
commit | 3cccd102ba543e02725d247893729e5c73b38295 (patch) | |
tree | f36a04ec38517f5deaaacb5acc7d949688d1e187 /app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue | |
parent | 205943281328046ef7b4528031b90fbda70c75ac (diff) |
Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue b/app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue new file mode 100644 index 00000000000..3e796a73f72 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue @@ -0,0 +1,119 @@ +<script> +import { GlFormGroup, GlFormInput, GlLoadingIcon, GlModal, GlTab } from '@gitlab/ui'; +import { mapState, mapActions } from 'vuex'; +import { __, s__ } from '~/locale'; +import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; +import MetricImagesTable from '~/vue_shared/components/metric_images/metric_images_table.vue'; + +export default { + components: { + GlFormGroup, + GlFormInput, + GlLoadingIcon, + GlModal, + GlTab, + MetricImagesTable, + UploadDropzone, + }, + inject: ['canUpdate', 'projectId', 'iid'], + data() { + return { + currentFiles: [], + modalVisible: false, + modalUrl: '', + modalUrlText: '', + }; + }, + computed: { + ...mapState(['metricImages', 'isLoadingMetricImages', 'isUploadingImage']), + actionPrimaryProps() { + return { + text: this.$options.i18n.modalUpload, + attributes: { + loading: this.isUploadingImage, + disabled: this.isUploadingImage, + category: 'primary', + variant: 'confirm', + }, + }; + }, + }, + mounted() { + this.setInitialData({ modelIid: this.iid, projectId: this.projectId }); + this.fetchImages(); + }, + methods: { + ...mapActions(['fetchImages', 'uploadImage', 'setInitialData']), + clearInputs() { + this.modalVisible = false; + this.modalUrl = ''; + this.modalUrlText = ''; + this.currentFile = false; + }, + openMetricDialog(files) { + this.modalVisible = true; + this.currentFiles = files; + }, + async onUpload() { + try { + await this.uploadImage({ + files: this.currentFiles, + url: this.modalUrl, + urlText: this.modalUrlText, + }); + // Error case handled within action + } finally { + this.clearInputs(); + } + }, + }, + i18n: { + modalUpload: __('Upload'), + modalCancel: __('Cancel'), + modalTitle: s__('Incidents|Add image details'), + modalDescription: s__( + "Incidents|Add text or a link to display with your image. If you don't add either, the file name displays instead.", + ), + dropDescription: s__( + 'Incidents|Drop or %{linkStart}upload%{linkEnd} a metric screenshot to attach it to the incident', + ), + }, +}; +</script> + +<template> + <gl-tab :title="s__('Incident|Metrics')" data-testid="metrics-tab"> + <div v-if="isLoadingMetricImages"> + <gl-loading-icon class="gl-p-5" size="sm" /> + </div> + <gl-modal + modal-id="upload-metric-modal" + size="sm" + :action-primary="actionPrimaryProps" + :action-cancel="{ text: $options.i18n.modalCancel }" + :title="$options.i18n.modalTitle" + :visible="modalVisible" + @hidden="clearInputs" + @primary.prevent="onUpload" + > + <p>{{ $options.i18n.modalDescription }}</p> + <gl-form-group :label="__('Text (optional)')" label-for="upload-text-input"> + <gl-form-input id="upload-text-input" v-model="modalUrlText" /> + </gl-form-group> + + <gl-form-group + :label="__('Link (optional)')" + label-for="upload-url-input" + :description="s__('Incidents|Must start with http or https')" + > + <gl-form-input id="upload-url-input" v-model="modalUrl" /> + </gl-form-group> + </gl-modal> + <metric-images-table v-for="metric in metricImages" :key="metric.id" v-bind="metric" /> + <upload-dropzone + v-if="canUpdate" + :drop-description-message="$options.i18n.dropDescription" + @change="openMetricDialog" + /> + </gl-tab> +</template> |