2022-03-07 21:18:32 +00:00
|
|
|
<script>
|
2022-05-17 15:09:01 +00:00
|
|
|
import {
|
|
|
|
GlAlert,
|
|
|
|
GlButton,
|
|
|
|
GlIcon,
|
|
|
|
GlLoadingIcon,
|
|
|
|
GlModal,
|
|
|
|
GlModalDirective,
|
|
|
|
GlPagination,
|
|
|
|
GlSprintf,
|
|
|
|
GlTable,
|
|
|
|
GlTooltipDirective,
|
|
|
|
} from '@gitlab/ui';
|
|
|
|
import * as Sentry from '@sentry/browser';
|
2022-03-07 21:18:32 +00:00
|
|
|
import Api, { DEFAULT_PER_PAGE } from '~/api';
|
2022-05-17 15:09:01 +00:00
|
|
|
import httpStatusCodes from '~/lib/utils/http_status';
|
|
|
|
import { __, s__, sprintf } from '~/locale';
|
2022-06-27 21:08:29 +00:00
|
|
|
import Tracking from '~/tracking';
|
2022-03-07 21:18:32 +00:00
|
|
|
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2022-05-17 15:09:01 +00:00
|
|
|
GlAlert,
|
|
|
|
GlButton,
|
|
|
|
GlIcon,
|
2022-03-07 21:18:32 +00:00
|
|
|
GlLoadingIcon,
|
2022-05-17 15:09:01 +00:00
|
|
|
GlModal,
|
2022-03-07 21:18:32 +00:00
|
|
|
GlPagination,
|
2022-05-17 15:09:01 +00:00
|
|
|
GlSprintf,
|
2022-03-07 21:18:32 +00:00
|
|
|
GlTable,
|
|
|
|
TimeagoTooltip,
|
|
|
|
},
|
2022-05-17 15:09:01 +00:00
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
|
|
|
GlModal: GlModalDirective,
|
|
|
|
},
|
2022-06-27 21:08:29 +00:00
|
|
|
mixins: [Tracking.mixin()],
|
2022-05-17 15:09:01 +00:00
|
|
|
inject: ['projectId', 'admin', 'fileSizeLimit'],
|
2022-03-07 21:18:32 +00:00
|
|
|
DEFAULT_PER_PAGE,
|
|
|
|
i18n: {
|
2022-05-17 15:09:01 +00:00
|
|
|
deleteLabel: __('Delete File'),
|
|
|
|
uploadLabel: __('Upload File'),
|
|
|
|
uploadingLabel: __('Uploading...'),
|
2022-07-08 18:10:05 +00:00
|
|
|
noFilesMessage: __('There are no secure files yet.'),
|
2022-03-07 21:18:32 +00:00
|
|
|
pagination: {
|
|
|
|
next: __('Next'),
|
|
|
|
prev: __('Prev'),
|
|
|
|
},
|
2022-05-17 15:09:01 +00:00
|
|
|
uploadErrorMessages: {
|
|
|
|
duplicate: __('A file with this name already exists.'),
|
|
|
|
tooLarge: __('File too large. Secure Files must be less than %{limit} MB.'),
|
|
|
|
},
|
|
|
|
deleteModalTitle: s__('SecureFiles|Delete %{name}?'),
|
|
|
|
deleteModalMessage: s__(
|
|
|
|
'SecureFiles|Secure File %{name} will be permanently deleted. Are you sure?',
|
|
|
|
),
|
|
|
|
deleteModalButton: s__('SecureFiles|Delete secure file'),
|
2022-03-07 21:18:32 +00:00
|
|
|
},
|
2022-05-17 15:09:01 +00:00
|
|
|
deleteModalId: 'deleteModalId',
|
2022-03-07 21:18:32 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
page: 1,
|
|
|
|
totalItems: 0,
|
|
|
|
loading: false,
|
2022-05-17 15:09:01 +00:00
|
|
|
uploading: false,
|
|
|
|
error: false,
|
|
|
|
errorMessage: null,
|
2022-03-07 21:18:32 +00:00
|
|
|
projectSecureFiles: [],
|
2022-05-17 15:09:01 +00:00
|
|
|
deleteModalFileId: null,
|
|
|
|
deleteModalFileName: null,
|
2022-03-07 21:18:32 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
fields: [
|
|
|
|
{
|
|
|
|
key: 'name',
|
2022-07-08 18:10:05 +00:00
|
|
|
label: __('File name'),
|
2022-05-17 15:09:01 +00:00
|
|
|
tdClass: 'gl-vertical-align-middle!',
|
2022-03-07 21:18:32 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'created_at',
|
2022-07-08 18:10:05 +00:00
|
|
|
label: __('Uploaded date'),
|
2022-05-17 15:09:01 +00:00
|
|
|
tdClass: 'gl-vertical-align-middle!',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'actions',
|
|
|
|
label: '',
|
|
|
|
tdClass: 'gl-text-right gl-vertical-align-middle!',
|
2022-03-07 21:18:32 +00:00
|
|
|
},
|
|
|
|
],
|
|
|
|
computed: {
|
|
|
|
fields() {
|
|
|
|
return this.$options.fields;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
page(newPage) {
|
|
|
|
this.getProjectSecureFiles(newPage);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.getProjectSecureFiles();
|
|
|
|
},
|
|
|
|
methods: {
|
2022-05-17 15:09:01 +00:00
|
|
|
async deleteSecureFile(secureFileId) {
|
|
|
|
this.loading = true;
|
|
|
|
this.error = false;
|
|
|
|
try {
|
|
|
|
await Api.deleteProjectSecureFile(this.projectId, secureFileId);
|
|
|
|
this.getProjectSecureFiles();
|
2022-06-27 21:08:29 +00:00
|
|
|
|
|
|
|
this.track('delete_secure_file');
|
2022-05-17 15:09:01 +00:00
|
|
|
} catch (error) {
|
|
|
|
Sentry.captureException(error);
|
|
|
|
this.error = true;
|
|
|
|
this.errorMessage = error;
|
|
|
|
}
|
|
|
|
},
|
2022-03-07 21:18:32 +00:00
|
|
|
async getProjectSecureFiles(page) {
|
|
|
|
this.loading = true;
|
|
|
|
const response = await Api.projectSecureFiles(this.projectId, { page });
|
|
|
|
|
|
|
|
this.totalItems = parseInt(response.headers?.['x-total'], 10) || 0;
|
|
|
|
|
|
|
|
this.projectSecureFiles = response.data;
|
|
|
|
|
|
|
|
this.loading = false;
|
2022-05-17 15:09:01 +00:00
|
|
|
this.uploading = false;
|
2022-06-27 21:08:29 +00:00
|
|
|
this.track('render_secure_files_list');
|
2022-05-17 15:09:01 +00:00
|
|
|
},
|
|
|
|
async uploadSecureFile() {
|
|
|
|
this.error = null;
|
|
|
|
this.uploading = true;
|
|
|
|
const [file] = this.$refs.fileUpload.files;
|
|
|
|
try {
|
|
|
|
await Api.uploadProjectSecureFile(this.projectId, this.uploadFormData(file));
|
|
|
|
this.getProjectSecureFiles();
|
2022-06-27 21:08:29 +00:00
|
|
|
this.track('upload_secure_file');
|
2022-05-17 15:09:01 +00:00
|
|
|
} catch (error) {
|
|
|
|
this.error = true;
|
|
|
|
this.errorMessage = this.formattedErrorMessage(error);
|
|
|
|
this.uploading = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
formattedErrorMessage(error) {
|
|
|
|
let message = '';
|
|
|
|
if (error?.response?.data?.message?.name) {
|
|
|
|
message = this.$options.i18n.uploadErrorMessages.duplicate;
|
|
|
|
} else if (error.response.status === httpStatusCodes.PAYLOAD_TOO_LARGE) {
|
|
|
|
message = sprintf(this.$options.i18n.uploadErrorMessages.tooLarge, {
|
|
|
|
limit: this.fileSizeLimit,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
Sentry.captureException(error);
|
|
|
|
message = error;
|
|
|
|
}
|
|
|
|
return message;
|
|
|
|
},
|
2022-07-08 18:10:05 +00:00
|
|
|
loadFileSelector() {
|
2022-05-17 15:09:01 +00:00
|
|
|
this.$refs.fileUpload.click();
|
|
|
|
},
|
|
|
|
setDeleteModalData(secureFile) {
|
|
|
|
this.deleteModalFileId = secureFile.id;
|
|
|
|
this.deleteModalFileName = secureFile.name;
|
|
|
|
},
|
|
|
|
uploadFormData(file) {
|
|
|
|
const formData = new FormData();
|
|
|
|
formData.append('name', file.name);
|
|
|
|
formData.append('file', file);
|
|
|
|
|
|
|
|
return formData;
|
2022-03-07 21:18:32 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div>
|
2022-07-08 18:10:05 +00:00
|
|
|
<div class="ci-secure-files-table">
|
|
|
|
<gl-alert v-if="error" variant="danger" class="gl-mt-6" @dismiss="error = null">
|
|
|
|
{{ errorMessage }}
|
|
|
|
</gl-alert>
|
|
|
|
|
|
|
|
<gl-table
|
|
|
|
:busy="loading"
|
|
|
|
:fields="fields"
|
|
|
|
:items="projectSecureFiles"
|
|
|
|
tbody-tr-class="js-ci-secure-files-row"
|
|
|
|
data-qa-selector="ci_secure_files_table_content"
|
|
|
|
sort-by="key"
|
|
|
|
sort-direction="asc"
|
|
|
|
stacked="lg"
|
|
|
|
table-class="text-secondary"
|
|
|
|
show-empty
|
|
|
|
sort-icon-left
|
|
|
|
no-sort-reset
|
|
|
|
:empty-text="$options.i18n.noFilesMessage"
|
|
|
|
>
|
|
|
|
<template #table-busy>
|
|
|
|
<gl-loading-icon size="lg" class="gl-my-5" />
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #cell(name)="{ item }">
|
|
|
|
{{ item.name }}
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #cell(created_at)="{ item }">
|
|
|
|
<timeago-tooltip :time="item.created_at" />
|
|
|
|
</template>
|
2022-05-17 15:09:01 +00:00
|
|
|
|
2022-07-08 18:10:05 +00:00
|
|
|
<template #cell(actions)="{ item }">
|
|
|
|
<gl-button
|
|
|
|
v-if="admin"
|
|
|
|
v-gl-modal="$options.deleteModalId"
|
|
|
|
v-gl-tooltip.hover.top="$options.i18n.deleteLabel"
|
|
|
|
category="secondary"
|
|
|
|
variant="danger"
|
|
|
|
icon="remove"
|
|
|
|
:aria-label="$options.i18n.deleteLabel"
|
|
|
|
data-testid="delete-button"
|
|
|
|
@click="setDeleteModalData(item)"
|
2022-05-17 15:09:01 +00:00
|
|
|
/>
|
2022-07-08 18:10:05 +00:00
|
|
|
</template>
|
|
|
|
</gl-table>
|
2022-05-17 15:09:01 +00:00
|
|
|
</div>
|
2022-03-07 21:18:32 +00:00
|
|
|
|
2022-07-08 18:10:05 +00:00
|
|
|
<div class="gl-display-flex gl-mt-5">
|
|
|
|
<gl-button v-if="admin" variant="confirm" @click="loadFileSelector">
|
|
|
|
<span v-if="uploading">
|
|
|
|
<gl-loading-icon class="gl-my-5" inline />
|
|
|
|
{{ $options.i18n.uploadingLabel }}
|
2022-05-17 15:09:01 +00:00
|
|
|
</span>
|
2022-07-08 18:10:05 +00:00
|
|
|
<span v-else>
|
|
|
|
<gl-icon name="upload" class="gl-mr-2" /> {{ $options.i18n.uploadLabel }}
|
|
|
|
</span>
|
|
|
|
</gl-button>
|
|
|
|
<input
|
|
|
|
id="file-upload"
|
|
|
|
ref="fileUpload"
|
|
|
|
type="file"
|
|
|
|
class="hidden"
|
|
|
|
data-qa-selector="file_upload_field"
|
|
|
|
@change="uploadSecureFile"
|
|
|
|
/>
|
2022-05-17 15:09:01 +00:00
|
|
|
</div>
|
2022-03-07 21:18:32 +00:00
|
|
|
|
|
|
|
<gl-pagination
|
|
|
|
v-if="!loading"
|
|
|
|
v-model="page"
|
|
|
|
:per-page="$options.DEFAULT_PER_PAGE"
|
|
|
|
:total-items="totalItems"
|
|
|
|
:next-text="$options.i18n.pagination.next"
|
|
|
|
:prev-text="$options.i18n.pagination.prev"
|
|
|
|
align="center"
|
|
|
|
/>
|
2022-05-17 15:09:01 +00:00
|
|
|
|
|
|
|
<gl-modal
|
|
|
|
:ref="$options.deleteModalId"
|
|
|
|
:modal-id="$options.deleteModalId"
|
|
|
|
title-tag="h4"
|
|
|
|
category="primary"
|
|
|
|
:ok-title="$options.i18n.deleteModalButton"
|
|
|
|
ok-variant="danger"
|
|
|
|
@ok="deleteSecureFile(deleteModalFileId)"
|
|
|
|
>
|
|
|
|
<template #modal-title>
|
|
|
|
<gl-sprintf :message="$options.i18n.deleteModalTitle">
|
|
|
|
<template #name>{{ deleteModalFileName }}</template>
|
|
|
|
</gl-sprintf>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<gl-sprintf :message="$options.i18n.deleteModalMessage">
|
|
|
|
<template #name>{{ deleteModalFileName }}</template>
|
|
|
|
</gl-sprintf>
|
|
|
|
</gl-modal>
|
2022-03-07 21:18:32 +00:00
|
|
|
</div>
|
|
|
|
</template>
|