diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-08 00:18:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-08 00:18:32 +0300 |
commit | 0f6fb8a8c9ccad0d0f4b8c5e2f72aa50d35a0d0d (patch) | |
tree | f6f7b86a0d17096a1a27740d5c2fedbd5a3b6815 /app/assets/javascripts/ci_secure_files | |
parent | 7fcb54624b31ff4b118d64ca4df36cba6d26c3eb (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/ci_secure_files')
-rw-r--r-- | app/assets/javascripts/ci_secure_files/components/secure_files_list.vue | 133 | ||||
-rw-r--r-- | app/assets/javascripts/ci_secure_files/index.js | 17 |
2 files changed, 150 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue b/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue new file mode 100644 index 00000000000..d70ade36fe9 --- /dev/null +++ b/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue @@ -0,0 +1,133 @@ +<script> +import { GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui'; +import Api, { DEFAULT_PER_PAGE } from '~/api'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { __ } from '~/locale'; +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; + +export default { + components: { + GlLink, + GlLoadingIcon, + GlPagination, + GlTable, + TimeagoTooltip, + }, + inject: ['projectId'], + docsLink: helpPagePath('ci/secure_files/index'), + DEFAULT_PER_PAGE, + i18n: { + pagination: { + next: __('Next'), + prev: __('Prev'), + }, + title: __('Secure Files'), + overviewMessage: __( + 'Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates.', + ), + moreInformation: __('More information'), + }, + data() { + return { + page: 1, + totalItems: 0, + loading: false, + projectSecureFiles: [], + }; + }, + fields: [ + { + key: 'name', + label: __('Filename'), + }, + { + key: 'permissions', + label: __('Permissions'), + }, + { + key: 'created_at', + label: __('Uploaded'), + }, + ], + computed: { + fields() { + return this.$options.fields; + }, + }, + watch: { + page(newPage) { + this.getProjectSecureFiles(newPage); + }, + }, + created() { + this.getProjectSecureFiles(); + }, + methods: { + 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; + }, + }, +}; +</script> + +<template> + <div> + <h1 data-testid="title" class="gl-font-size-h1 gl-mt-3 gl-mb-0">{{ $options.i18n.title }}</h1> + + <p> + <span data-testid="info-message" class="gl-mr-2"> + {{ $options.i18n.overviewMessage }} + <gl-link :href="$options.docsLink" target="_blank">{{ + $options.i18n.moreInformation + }}</gl-link> + </span> + </p> + + <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 + > + <template #table-busy> + <gl-loading-icon size="lg" class="gl-my-5" /> + </template> + + <template #cell(name)="{ item }"> + {{ item.name }} + </template> + + <template #cell(permissions)="{ item }"> + {{ item.permissions }} + </template> + + <template #cell(created_at)="{ item }"> + <timeago-tooltip :time="item.created_at" /> + </template> + </gl-table> + <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" + /> + </div> +</template> diff --git a/app/assets/javascripts/ci_secure_files/index.js b/app/assets/javascripts/ci_secure_files/index.js new file mode 100644 index 00000000000..18b4ac6866e --- /dev/null +++ b/app/assets/javascripts/ci_secure_files/index.js @@ -0,0 +1,17 @@ +import Vue from 'vue'; +import SecureFilesList from './components/secure_files_list.vue'; + +export const initCiSecureFiles = (selector = '#js-ci-secure-files') => { + const containerEl = document.querySelector(selector); + const { projectId } = containerEl.dataset; + + return new Vue({ + el: containerEl, + provide: { + projectId, + }, + render(createElement) { + return createElement(SecureFilesList); + }, + }); +}; |