Adding secure files JS api spec

app/assets/javascripts/api.js

@@ -959,9 +959,9 @@ const Api = {
   },
 
   // TODO: replace this when GraphQL support has been added https://gitlab.com/gitlab-org/gitlab/-/issues/352184
-  projectSecureFiles(projectId, options = {}){
+  projectSecureFiles(projectId, options = {}) {
     const url = Api.buildUrl(this.secureFilesPath).replace(':project_id', projectId);
-    
+
     return axios.get(url, { params: { per_page: DEFAULT_PER_PAGE, ...options } });
   },
 

app/assets/javascripts/ci_secure_files/components/secure_files_list.vue

@@ -2,7 +2,7 @@
 import { GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
 import Api, { DEFAULT_PER_PAGE } from '~/api';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { s__, __ } from '~/locale';
+import { __ } from '~/locale';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
@@ -29,7 +29,7 @@ export default {
       loading: false,
       projectSecureFiles: [],
     };
-  }, 
+  },
   fields: [
     {
       key: 'name',
@@ -41,7 +41,7 @@ export default {
     },
     {
       key: 'created_at',
-      label: __('Created'),
+      label: __('Uploaded'),
     },
   ],
   computed: {
@@ -53,33 +53,37 @@ export default {
     page(newPage) {
       this.getProjectSecureFiles(newPage);
     },
-  },    
+  },
   created() {
     this.getProjectSecureFiles();
   },
   methods: {
-    async getProjectSecureFiles(page){
+    async getProjectSecureFiles(page) {
       this.loading = true;
-      const response = await Api.projectSecureFiles(this.projectId, {page: page})
+      const response = await Api.projectSecureFiles(this.projectId, { page });
 
       this.totalItems = parseInt(response.headers?.['x-total'], 10) || 0;
 
-      this.projectSecureFiles = response.data
+      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">Secure Files</h1>
+    <h1 data-testid="title" class="gl-font-size-h1 gl-mt-3 gl-mb-0">{{ __('Secure Files') }}</h1>
 
     <p>
       <span data-testid="info-message" class="gl-mr-2">
-        Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates. <gl-link :href="$options.docsLink" target="_blank">More information</gl-link>
+        {{
+          __(
+            'Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates.',
+          )
+        }}
+        <gl-link :href="$options.docsLink" target="_blank">{{ __('More information') }}</gl-link>
       </span>
     </p>
 
@@ -102,17 +106,16 @@ export default {
       </template>
 
       <template #cell(name)="{ item }">
-        {{item.name}}
+        {{ item.name }}
       </template>
 
       <template #cell(permissions)="{ item }">
-        {{item.permissions}}
+        {{ item.permissions }}
       </template>
 
       <template #cell(created_at)="{ item }">
         <timeago-tooltip :time="item.created_at" />
       </template>
-
     </gl-table>
     <gl-pagination
       v-if="!loading"

app/assets/javascripts/ci_secure_files/index.js

 import Vue from 'vue';
 import SecureFilesList from './components/secure_files_list.vue';
 
-export const initCiSecureFiles = ( selector = '#js-ci-secure-files') => {
+export const initCiSecureFiles = (selector = '#js-ci-secure-files') => {
   const containerEl = document.querySelector(selector);
   const { projectId } = containerEl.dataset;
 
   return new Vue({
     el: containerEl,
     provide: {
-      projectId
+      projectId,
     },
     render(createElement) {
       return createElement(SecureFilesList);

locale/gitlab.pot

@@ -32380,6 +32380,9 @@ msgstr ""
 msgid "Secret token"
 msgstr ""
 
+msgid "Secure Files"
+msgstr ""
+
 msgid "Secure token that identifies an external storage request."
 msgstr ""
 
@@ -39493,6 +39496,9 @@ msgstr ""
 msgid "UploadLink|click to upload"
 msgstr ""
 
+msgid "Uploaded"
+msgstr ""
+
 msgid "Uploading changes to terminal"
 msgstr ""
 
@@ -39787,6 +39793,9 @@ msgstr ""
 msgid "Use GitLab Runner in AWS"
 msgstr ""
 
+msgid "Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates."
+msgstr ""
+
 msgid "Use a one-time password authenticator on your mobile device or computer to enable two-factor authentication (2FA)."
 msgstr ""
 

spec/frontend/api_spec.js

@@ -1619,6 +1619,28 @@ describe('Api', () => {
     });
   });
 
+  describe('projectSecureFiles', () => {
+    it('fetches secure files for a project', async () => {
+      const projectId = 1;
+      const secureFiles = [
+        {
+          id: projectId,
+          title: 'File Name',
+          permissions: 'read_only',
+          checksum: '12345',
+          checksum_algorithm: 'sha256',
+          created_at: '2022-02-21T15:27:18',
+        },
+      ];
+
+      const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${projectId}/secure_files`;
+      mock.onGet(expectedUrl).reply(httpStatus.OK, secureFiles);
+      const { data } = await Api.projectSecureFiles(projectId, {});
+
+      expect(data).toEqual(secureFiles);
+    });
+  });
+
   describe('Feature Flag User List', () => {
     let expectedUrl;
     let projectId;