Add latest changes from gitlab-org/gitlab@master

1 files changed, 65 insertions, 90 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
index 0fb8539a48a..9d8cb40b60a 100644
--- a/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue
+++ b/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue
@@ -3,7 +3,6 @@ import {
   GlAlert,
   GlButton,
   GlIcon,
-  GlLink,
   GlLoadingIcon,
   GlModal,
   GlModalDirective,
@@ -14,7 +13,6 @@ import {
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import Api, { DEFAULT_PER_PAGE } from '~/api';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { __, s__, sprintf } from '~/locale';
 import Tracking from '~/tracking';
@@ -25,7 +23,6 @@ export default {
     GlAlert,
     GlButton,
     GlIcon,
-    GlLink,
     GlLoadingIcon,
     GlModal,
     GlPagination,
@@ -39,21 +36,16 @@ export default {
   },
   mixins: [Tracking.mixin()],
   inject: ['projectId', 'admin', 'fileSizeLimit'],
-  docsLink: helpPagePath('ci/secure_files/index'),
   DEFAULT_PER_PAGE,
   i18n: {
     deleteLabel: __('Delete File'),
     uploadLabel: __('Upload File'),
     uploadingLabel: __('Uploading...'),
+    noFilesMessage: __('There are no secure files yet.'),
     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'),
     uploadErrorMessages: {
       duplicate: __('A file with this name already exists.'),
       tooLarge: __('File too large. Secure Files must be less than %{limit} MB.'),
@@ -81,12 +73,12 @@ export default {
   fields: [
     {
       key: 'name',
-      label: __('Filename'),
+      label: __('File name'),
       tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'created_at',
-      label: __('Uploaded'),
+      label: __('Uploaded date'),
       tdClass: 'gl-vertical-align-middle!',
     },
     {
@@ -163,7 +155,7 @@ export default {
       }
       return message;
     },
-    loadFileSelctor() {
+    loadFileSelector() {
       this.$refs.fileUpload.click();
     },
     setDeleteModalData(secureFile) {
@@ -183,91 +175,74 @@ export default {
 
 <template>
   <div>
-    <gl-alert v-if="error" variant="danger" class="gl-mt-6" @dismiss="error = null">
-      {{ errorMessage }}
-    </gl-alert>
-    <div class="row">
-      <div class="col-md-12 col-lg-6 gl-display-flex">
-        <div class="gl-flex-direction-column gl-flex-wrap">
-          <h1 class="gl-font-size-h1 gl-mt-3 gl-mb-0">
-            {{ $options.i18n.title }}
-          </h1>
-        </div>
-      </div>
+    <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>
 
-      <div class="col-md-12 col-lg-6">
-        <div class="gl-display-flex gl-flex-wrap gl-justify-content-end">
-          <gl-button v-if="admin" class="gl-mt-3" variant="confirm" @click="loadFileSelctor">
-            <span v-if="uploading">
-              <gl-loading-icon size="sm" class="gl-my-5" inline />
-              {{ $options.i18n.uploadingLabel }}
-            </span>
-            <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"
+        <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)"
           />
-        </div>
-      </div>
+        </template>
+      </gl-table>
     </div>
 
-    <div class="row">
-      <div class="col-md-12 col-lg-12 gl-my-4">
-        <span data-testid="info-message">
-          {{ $options.i18n.overviewMessage }}
-          <gl-link :href="$options.docsLink" target="_blank">{{
-            $options.i18n.moreInformation
-          }}</gl-link>
+    <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 }}
         </span>
-      </div>
+        <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"
+      />
     </div>
 
-    <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(created_at)="{ item }">
-        <timeago-tooltip :time="item.created_at" />
-      </template>
-
-      <template #cell(actions)="{ item }">
-        <gl-button
-          v-if="admin"
-          v-gl-modal="$options.deleteModalId"
-          v-gl-tooltip.hover.top="$options.i18n.deleteLabel"
-          variant="danger"
-          icon="remove"
-          :aria-label="$options.i18n.deleteLabel"
-          @click="setDeleteModalData(item)"
-        />
-      </template>
-    </gl-table>
-
     <gl-pagination
       v-if="!loading"
       v-model="page"