1 files changed, 22 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
index 661389f4059..dd80698ec1a 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
@@ -17,6 +17,8 @@ import { HTTP_STATUS_PAYLOAD_TOO_LARGE } from '~/lib/utils/http_status';
 import { __, s__, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import MetadataButton from './metadata/button.vue';
+import MetadataModal from './metadata/modal.vue';
 
 export default {
   components: {
@@ -29,6 +31,8 @@ export default {
     GlSprintf,
     GlTable,
     TimeagoTooltip,
+    MetadataButton,
+    MetadataModal,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -57,6 +61,7 @@ export default {
     deleteModalButton: s__('SecureFiles|Delete secure file'),
   },
   deleteModalId: 'deleteModalId',
+  metadataModalId: 'metadataModalId',
   data() {
     return {
       page: 1,
@@ -68,6 +73,7 @@ export default {
       projectSecureFiles: [],
       deleteModalFileId: null,
       deleteModalFileName: null,
+      metadataSecureFile: {},
     };
   },
   fields: [
@@ -162,6 +168,9 @@ export default {
       this.deleteModalFileId = secureFile.id;
       this.deleteModalFileName = secureFile.name;
     },
+    updateMetadataSecureFile(secureFile) {
+      this.metadataSecureFile = secureFile;
+    },
     uploadFormData(file) {
       const formData = new FormData();
       formData.append('name', file.name);
@@ -208,6 +217,12 @@ export default {
         </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"
@@ -272,5 +287,12 @@ export default {
         <template #name>{{ deleteModalFileName }}</template>
       </gl-sprintf>
     </gl-modal>
+
+    <metadata-modal
+      :name="metadataSecureFile.name"
+      :file-extension="metadataSecureFile.file_extension"
+      :metadata="metadataSecureFile.metadata"
+      modal-id="$options.metadataModalId"
+    />
   </div>
 </template>