Secure Files UI MVC

app/assets/javascripts/api.js

@@ -92,6 +92,7 @@ const Api = {
   groupNotificationSettingsPath: '/api/:version/groups/:id/notification_settings',
   notificationSettingsPath: '/api/:version/notification_settings',
   deployKeysPath: '/api/:version/deploy_keys',
+  secureFilesPath: '/api/:version/projects/:project_id/secure_files',
 
   group(groupId, callback = () => {}) {
     const url = Api.buildUrl(Api.groupPath).replace(':id', groupId);
@@ -957,6 +958,12 @@ const Api = {
     return axios.get(url, { params: { per_page: DEFAULT_PER_PAGE, ...params } });
   },
 
+  projectSecureFiles(projectId){
+    const url = Api.buildUrl(this.secureFilesPath).replace(':project_id', projectId);
+    
+    return axios.get(url);
+  },
+
   async updateNotificationSettings(projectId, groupId, data = {}) {
     let url = Api.buildUrl(this.notificationSettingsPath);
 

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

+<script>
+import { GlTable, GlButton, GlIcon } from '@gitlab/ui';
+import Api from '~/api';
+import { s__, __ } from '~/locale';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  props: {
+    projectId: {
+      type: String,
+      required: true,
+    },
+  }, 
+  data() {
+    return {
+      projectSecureFiles: [],
+    };
+  }, 
+  fields: [
+    {
+      key: 'name',
+      label: s__('ciSecureFiles|Filename'),
+    },
+    {
+      key: 'permissions',
+      label: s__('ciSecureFiles|Permissions'),
+      tdClass: 'text-plain',
+    },
+    {
+      key: 'created_at',
+      label: s__('ciSecureFiles|Created'),
+    },
+  ],
+  components: {
+    GlTable,
+    GlButton,
+    GlIcon,
+    TimeagoTooltip,
+  },
+  computed: {
+    fields() {
+      return this.$options.fields;
+    },
+  },
+  created() {
+    this.getProjectSecureFiles();
+  },
+  methods: {
+    async getProjectSecureFiles(){
+      const response = await Api.projectSecureFiles(this.projectId)
+      this.projectSecureFiles = response.data
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+
+    <h2 data-testid="title" class="gl-font-size-h1 gl-mt-3 gl-mb-0">Secure Files</h2>
+
+    <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. <a href="" rel="noopener" target="_blank" class="gl-link">More information</a>
+      </span>
+    </p>
+
+    <gl-table
+      :fields="fields"
+      :items="this.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 #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>
+  </div>
+</template>

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') => {
+  const containerEl = document.querySelector(selector);
+  const { projectId } = containerEl.dataset;
+
+  return new Vue({
+    el: containerEl,
+    render(createElement) {
+      return createElement(SecureFilesList, {
+        props: { projectId: projectId },
+      });
+    },
+  });
+};

app/assets/javascripts/pages/projects/ci/secure_files/show/index.js

+import { initCiSecureFiles } from '~/ci_secure_files';
+
+initCiSecureFiles();

app/controllers/projects/ci/secure_files_controller.rb

+# frozen_string_literal: true
+
+class Projects::Ci::SecureFilesController < Projects::ApplicationController
+  before_action :check_can_collaborate!
+
+  feature_category :pipeline_authoring
+
+  urgency :low, [:show]
+
+  def show
+  end
+
+  private
+
+  def check_can_collaborate!
+    render_404 unless can_collaborate_with_project?(@project)
+  end
+end

app/views/projects/ci/secure_files/show.html.haml

+- @content_class = "limit-container-width"
+
+- page_title s_('Pipelines|Secure Files')
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco')
+
+#js-ci-secure-files{ data: { project_id: @project.id } }
\ No newline at end of file

config/routes/project.rb

@@ -96,6 +96,7 @@ constraints(::Constraints::ProjectUrlConstrainer.new) do
         namespace :ci do
           resource :lint, only: [:show, :create]
           resource :pipeline_editor, only: [:show], controller: :pipeline_editor, path: 'editor'
+          resource :secure_files, only: [:show], controller: :secure_files, path: 'secure_files'
           resources :daily_build_group_report_results, only: [:index], constraints: { format: /(csv|json)/ }
           namespace :prometheus_metrics do
             resources :histograms, only: [:create], constraints: { format: 'json' }

lib/api/entities/ci/secure_file.rb

@@ -9,6 +9,7 @@ module API
         expose :permissions
         expose :checksum
         expose :checksum_algorithm
+        expose :created_at
       end
     end
   end

locale/gitlab.pot

@@ -43302,6 +43302,15 @@ msgstr ""
 msgid "ciReport|is loading, errors when loading results"
 msgstr ""
 
+msgid "ciSecureFiles|Filename"
+msgstr ""
+
+msgid "ciSecureFiles|Permissions"
+msgstr ""
+
+msgid "ciSecureFiles|Created"
+msgstr ""
+
 msgid "closed"
 msgstr ""