From 84e45ee5475baa340e27c6b37b88c07a2dd0ee12 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 3 Aug 2023 12:50:23 +0200
Subject: [PATCH] CI/CD Secure Files settings: Use GlCard

Changelog: changed
---
 .../components/secure_files_list.vue          | 148 ++++++++++--------
 app/assets/stylesheets/pages/settings.scss    |   3 +-
 .../projects/settings/ci_cd/show.html.haml    |   2 +-
 .../projects/settings/secure_files_spec.rb    |   2 +-
 4 files changed, 88 insertions(+), 67 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 dd80698ec1a409..509bdabdd9e426 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
@@ -2,6 +2,7 @@
 import {
   GlAlert,
   GlButton,
+  GlCard,
   GlIcon,
   GlLoadingIcon,
   GlModal,
@@ -24,6 +25,7 @@ export default {
   components: {
     GlAlert,
     GlButton,
+    GlCard,
     GlIcon,
     GlLoadingIcon,
     GlModal,
@@ -42,6 +44,7 @@ export default {
   inject: ['projectId', 'admin', 'fileSizeLimit'],
   DEFAULT_PER_PAGE,
   i18n: {
+    title: __('Files'),
     deleteLabel: __('Delete File'),
     uploadLabel: __('Upload File'),
     uploadingLabel: __('Uploading...'),
@@ -89,7 +92,8 @@ export default {
     },
     {
       key: 'actions',
-      label: '',
+      label: __('Actions'),
+      thClass: 'gl-text-right',
       tdClass: 'gl-text-right gl-vertical-align-middle!',
     },
   ],
@@ -184,78 +188,95 @@ export default {
 
 <template>
   <div>
-    <div class="ci-secure-files-table">
+    <div>
       <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"
+      <gl-card
+        class="gl-new-card"
+        header-class="gl-new-card-header"
+        body-class="gl-new-card-body gl-px-0"
       >
-        <template #table-busy>
-          <gl-loading-icon size="lg" class="gl-my-5" />
+        <template #header>
+          <div class="gl-new-card-title-wrapper">
+            <h5 class="gl-new-card-title gl-my-0">
+              {{ $options.i18n.title }}
+              <span class="gl-new-card-count">
+                <gl-icon name="document" class="gl-mr-2" />
+                {{ projectSecureFiles.length }}
+              </span>
+            </h5>
+          </div>
+          <div class="gl-new-card-actions">
+            <gl-button v-if="admin" size="small" @click="loadFileSelector">
+              <span v-if="uploading">
+                <gl-loading-icon 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"
+            />
+          </div>
         </template>
 
-        <template #cell(name)="{ item }">
-          {{ item.name }}
-        </template>
+        <gl-table
+          :busy="loading"
+          :fields="fields"
+          :items="projectSecureFiles"
+          tbody-tr-class="js-ci-secure-files-row"
+          sort-by="key"
+          sort-direction="asc"
+          stacked="md"
+          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(created_at)="{ item }">
-          <timeago-tooltip :time="item.created_at" />
-        </template>
+          <template #cell(name)="{ item }">
+            {{ item.name }}
+          </template>
 
-        <template #cell(actions)="{ item }">
-          <metadata-button
-            :secure-file="item"
-            :admin="admin"
-            modal-id="$options.metadataModalId"
-            @selectSecureFile="updateMetadataSecureFile"
-          />
-          <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)"
-          />
-        </template>
-      </gl-table>
-    </div>
+          <template #cell(created_at)="{ item }">
+            <timeago-tooltip :time="item.created_at" />
+          </template>
 
-    <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>
-        <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 }">
+            <metadata-button
+              :secure-file="item"
+              :admin="admin"
+              modal-id="$options.metadataModalId"
+              @selectSecureFile="updateMetadataSecureFile"
+            />
+            <gl-button
+              v-if="admin"
+              v-gl-modal="$options.deleteModalId"
+              v-gl-tooltip.hover.top="$options.i18n.deleteLabel"
+              size="small"
+              category="tertiary"
+              variant="default"
+              icon="remove"
+              :aria-label="$options.i18n.deleteLabel"
+              data-testid="delete-button"
+              @click="setDeleteModalData(item)"
+            />
+          </template>
+        </gl-table>
+      </gl-card>
     </div>
 
     <gl-pagination
@@ -266,6 +287,7 @@ export default {
       :next-text="$options.i18n.pagination.next"
       :prev-text="$options.i18n.pagination.prev"
       align="center"
+      class="gl-mt-5"
     />
 
     <gl-modal
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index c6f2b730d9bf34..673a62ba9f722c 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -50,8 +50,7 @@
   }
 }
 
-.deploy-freeze-table,
-.ci-secure-files-table {
+.deploy-freeze-table {
   table {
     tr {
       td,
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 007169809c9a51..2ef9cbb89cbaaa 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -118,7 +118,7 @@
         = _("Secure Files")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary.gl-mb-0
         = _("Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates.")
         = link_to _('Learn more'), help_page_path('ci/secure_files/index'), target: '_blank', rel: 'noopener noreferrer'
     .settings-content
diff --git a/spec/features/projects/settings/secure_files_spec.rb b/spec/features/projects/settings/secure_files_spec.rb
index 7ff1a5f356875d..5f94e215a5f775 100644
--- a/spec/features/projects/settings/secure_files_spec.rb
+++ b/spec/features/projects/settings/secure_files_spec.rb
@@ -46,7 +46,7 @@
     within '#js-secure-files' do
       expect(page).to have_content(file.name)
 
-      find('button.btn-danger-secondary').click
+      find('[data-testid="delete-button"]').click
     end
 
     expect(page).to have_content("Delete #{file.name}?")
-- 
GitLab