list corpus allowed metadata on the corpus properties page

vue/Corpus/AllowedMetaData/List.vue

+<template>
+  <div>
+    <h2 class="title is-4">Allowed MetaData</h2>
+    <table class="table is-fullwidth is-hoverable is-narrow">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th class="is-narrow">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <MetaData
+          v-for="metaData in corpusAllowedMetadata[corpusId]"
+          :key="metaData.name"
+          :metadata="metaData"
+          :corpus-id="corpusId"
+        />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import { errorParser } from '~/js/helpers'
+import MetaData from './Row'
+
+export default {
+  components: {
+    MetaData
+  },
+  props: {
+    corpusId: {
+      type: String,
+      required: true
+    }
+  },
+  data: () => ({
+    loading: false
+  }),
+  computed: {
+    ...mapState('corpora', ['corpusAllowedMetadata'])
+  },
+  methods: {
+    ...mapActions('corpora', ['listAllowedMetadata']),
+    async listMetaData () {
+      if (this.corpusAllowedMetadata[this.corpusId]) return
+      this.loading = true
+      try {
+        await this.listAllowedMetadata({ corpusId: this.corpusId })
+      } catch (err) {
+        this.notify({ type: 'error', text: `An error occurred listing metadata: ${errorParser(err)}` })
+      } finally {
+        this.loading = false
+      }
+    }
+  },
+  watch: {
+    corpusId: {
+      handler: 'listMetaData',
+      immediate: true
+    }
+  }
+}
+</script>

vue/Corpus/AllowedMetaData/Row.vue

+<template>
+  <tr v-if="metadata">
+    <td>{{ metadata.name }}</td>
+    <td>{{ metadata.type }}</td>
+    <td></td>
+  </tr>
+</template>
+
+<script>
+
+export default {
+  props: {
+    metadata: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

vue/Corpus/AllowedMetaData/index.js

+export { default } from './List'

vue/Corpus/Edit.vue

@@ -168,6 +168,8 @@
     <template v-if="corpusId && !field_errors.all">
       <ElementType :corpus-id="corpusId" />
       <hr />
+      <AllowedMetaData :corpus-id="corpusId" />
+      <hr />
       <ListMembers content-type="corpus" :content-id="corpusId" :page-number.sync="membersPageNumber" />
     </template>
   </main>
@@ -180,6 +182,7 @@ import { errorParser } from '~/js/helpers'
 import { UUID } from '~/js/config'
 import ElementType from '~/vue/Corpus/ElementType'
 import ListMembers from '~/vue/Memberships/ListMembers'
+import AllowedMetaData from '~/vue/Corpus/AllowedMetaData'
 
 export default {
   mixins: [
@@ -187,6 +190,7 @@ export default {
   ],
   components: {
     ElementType,
+    AllowedMetaData,
     ListMembers
   },
   props: {