Add latest changes from gitlab-org/gitlab@master

4 files changed, 241 insertions, 0 deletions

diff --git a/app/assets/javascripts/ci_secure_files/components/metadata/button.vue b/app/assets/javascripts/ci_secure_files/components/metadata/button.vue
new file mode 100644
index 00000000000..799c6ec79d4
--- /dev/null
+++ b/app/assets/javascripts/ci_secure_files/components/metadata/button.vue
@@ -0,0 +1,54 @@
+<script>
+import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlModal: GlModalDirective,
+  },
+  props: {
+    secureFile: {
+      type: Object,
+      required: true,
+    },
+    admin: {
+      type: Boolean,
+      required: true,
+    },
+    modalId: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    metadataLabel: __('View File Metadata'),
+  },
+  metadataModalId: 'metadataModalId',
+  methods: {
+    selectSecureFile() {
+      this.$emit('selectSecureFile', this.secureFile);
+    },
+    hasMetadata() {
+      return this.secureFile.metadata !== null;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    v-if="admin && hasMetadata()"
+    v-gl-modal="modalId"
+    v-gl-tooltip.hover.top="$options.i18n.metadataLabel"
+    category="secondary"
+    variant="info"
+    icon="doc-text"
+    :aria-label="$options.i18n.metadataLabel"
+    data-testid="metadata-button"
+    @click="selectSecureFile()"
+  />
+</template>
diff --git a/app/assets/javascripts/ci_secure_files/components/metadata/modal.vue b/app/assets/javascripts/ci_secure_files/components/metadata/modal.vue
new file mode 100644
index 00000000000..a459b721394
--- /dev/null
+++ b/app/assets/javascripts/ci_secure_files/components/metadata/modal.vue
@@ -0,0 +1,129 @@
+<script>
+import { GlModal, GlSprintf, GlModalDirective } from '@gitlab/ui';
+import { __, s__, createDateTimeFormat } from '~/locale';
+import Tracking from '~/tracking';
+import MetadataTable from './table.vue';
+
+const dateFormat = createDateTimeFormat({
+  dateStyle: 'long',
+  timeStyle: 'long',
+});
+
+export default {
+  components: {
+    GlModal,
+    GlSprintf,
+    MetadataTable,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    fileExtension: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    metadata: {
+      type: Object,
+      required: false,
+      default: Object.new,
+    },
+    modalId: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    metadataLabel: __('View File Metadata'),
+    metadataModalTitle: s__('SecureFiles|%{name} Metadata'),
+  },
+  metadataModalId: 'metadataModalId',
+  methods: {
+    teamName() {
+      return `${this.metadata.subject.O} (${this.metadata.subject.OU})`;
+    },
+    issuerName() {
+      return [this.metadata.issuer.CN, '-', this.metadata.issuer.OU].join(' ');
+    },
+    expiresAt() {
+      return dateFormat.format(new Date(this.metadata.expires_at));
+    },
+    mobileprovisionTeamName() {
+      return `${this.metadata.team_name} (${this.metadata.team_id.join(', ')})`;
+    },
+    platformNames() {
+      return this.metadata.platforms.join(', ');
+    },
+    appName() {
+      return [this.metadata.app_name, '-', this.metadata.app_id].join(' ');
+    },
+    certificates() {
+      return this.metadata.certificate_ids.join(', ');
+    },
+    cerItems() {
+      return [
+        { name: s__('SecureFiles|Name'), data: this.metadata.subject.CN },
+        { name: s__('SecureFiles|Serial'), data: this.metadata.id },
+        { name: s__('SecureFiles|Team'), data: this.teamName() },
+        { name: s__('SecureFiles|Issuer'), data: this.issuerName() },
+        { name: s__('SecureFiles|Expires at'), data: this.expiresAt() },
+      ];
+    },
+    p12Items() {
+      return [
+        { name: s__('SecureFiles|Name'), data: this.metadata.subject.CN },
+        { name: s__('SecureFiles|Serial'), data: this.metadata.id },
+        { name: s__('SecureFiles|Team'), data: this.teamName() },
+        { name: s__('SecureFiles|Issuer'), data: this.issuerName() },
+        { name: s__('SecureFiles|Expires at'), data: this.expiresAt() },
+      ];
+    },
+    mobileprovisionItems() {
+      return [
+        { name: s__('SecureFiles|UUID'), data: this.metadata.id },
+        { name: s__('SecureFiles|Platforms'), data: this.platformNames() },
+        { name: s__('SecureFiles|Team'), data: this.mobileprovisionTeamName() },
+        { name: s__('SecureFiles|App'), data: this.appName() },
+        { name: s__('SecureFiles|Certificates'), data: this.certificates() },
+        { name: s__('SecureFiles|Expires at'), data: this.expiresAt() },
+      ];
+    },
+    items() {
+      if (this.metadata) {
+        if (this.fileExtension === 'cer') {
+          this.track('load_secure_file_metadata_cer');
+          return this.cerItems();
+        } else if (this.fileExtension === 'p12') {
+          this.track('load_secure_file_metadata_p12');
+          return this.p12Items();
+        } else if (this.fileExtension === 'mobileprovision') {
+          this.track('load_secure_file_metadata_mobileprovision');
+          return this.mobileprovisionItems(this.metadata);
+        }
+      }
+
+      return [];
+    },
+  },
+};
+</script>
+``
+
+<template>
+  <gl-modal :ref="modalId" :modal-id="modalId" title-tag="h4" category="primary" hide-footer>
+    <template #modal-title>
+      <gl-sprintf :message="$options.i18n.metadataModalTitle">
+        <template #name>{{ name }}</template>
+      </gl-sprintf>
+    </template>
+
+    <metadata-table :items="items()" />
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/ci_secure_files/components/metadata/table.vue b/app/assets/javascripts/ci_secure_files/components/metadata/table.vue
new file mode 100644
index 00000000000..92043ff0a31
--- /dev/null
+++ b/app/assets/javascripts/ci_secure_files/components/metadata/table.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlTableLite } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlTableLite,
+  },
+  props: {
+    items: {
+      required: true,
+      type: Array,
+    },
+  },
+  fields: [
+    {
+      key: 'item_name',
+      thClass: 'hidden',
+    },
+    {
+      key: 'item_data',
+      thClass: 'hidden',
+    },
+  ],
+};
+</script>
+
+<template>
+  <gl-table-lite :items="items" :fields="$options.fields">
+    <template #cell(item_name)="{ item }">
+      <strong>{{ item.name }}</strong>
+    </template>
+    <template #cell(item_data)="{ item }">
+      {{ item.data }}
+    </template>
+  </gl-table-lite>
+</template>
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>