Render Metadata tab with data from description API

src/views/settings/components/Gopher.vue

@@ -32,7 +32,7 @@ export default {
       return this.isMobile ? '100px' : '240px'
     },
     loading() {
-      return this.$store.state.settings.loading
+      return this.settings.loading
     }
   },
   methods: {

src/views/settings/components/Metadata.vue

 <template>
   <div v-if="!loading">
-    <el-form ref="metadata" :model="metadata" :label-width="labelWidth">
-      <el-form-item label="Providers">
-        <el-select :value="metadata.providers || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Web.Metadata', 'providers')">
-          <el-option value="Pleroma.Web.Metadata.Providers.OpenGraph"/>
-          <el-option value="Pleroma.Web.Metadata.Providers.TwitterCard"/>
-          <el-option value="Pleroma.Web.Metadata.Providers.RelMe"/>
-        </el-select>
-        <p class="expl">A list of metadata providers to enable.</p>
-      </el-form-item>
-      <el-form-item label="Unfurl NSFW">
-        <el-switch :value="metadata.unfurl_nsfw" @change="updateSetting($event, 'Pleroma.Web.Metadata', 'unfurl_nsfw')"/>
-        <p class="expl">If set to true nsfw attachments will be shown in previews.</p>
-      </el-form-item>
+    <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
+      <setting :setting-group="metadata" :data="metadataData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="richMedia" :model="richMedia" :label-width="labelWidth">
-      <el-form-item label="Rich media:"/>
-      <el-form-item label="Enabled">
-        <el-switch :value="richMedia.enabled" @change="updateSetting($event, 'rich_media', 'enabled')"/>
-        <p class="expl">If enabled the instance will parse metadata from attached links to generate link previews.</p>
-      </el-form-item>
-      <el-form-item label="Ignore hosts">
-        <el-select :value="richMedia.ignore_hosts || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'ignore_hosts')"/>
-        <p class="expl">List of hosts which will be ignored by the metadata parser.</p>
-      </el-form-item>
-      <el-form-item label="Ignore TLD">
-        <el-select :value="richMedia.ignore_tld || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'ignore_tld')"/>
-        <p class="expl">List TLDs (top-level domains) which will ignore for parse metadata.
-        Default is <span class="code">["local", "localdomain", "lan"]</span></p>
-      </el-form-item>
-      <el-form-item label="Parsers">
-        <el-select :value="richMedia.parsers || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'parsers')">
-          <el-option value="Pleroma.Web.RichMedia.Parsers.TwitterCard"/>
-          <el-option value="Pleroma.Web.RichMedia.Parsers.OGP"/>
-          <el-option value="Pleroma.Web.RichMedia.Parsers.OEmbed"/>
-        </el-select>
-        <p class="expl">List of Rich Media parsers</p>
-      </el-form-item>
-      <el-form-item label="TTL Setters">
-        <el-select :value="richMedia.ttl_setters || []" multiple filterable allow-create @change="updateSetting($event, 'rich_media', 'ttl_setters')">
-          <el-option value="Pleroma.Web.RichMedia.Parser.TTL.AwsSignedUrl"/>
-        </el-select>
-      </el-form-item>
+    <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
+      <setting :setting-group="richMedia" :data="richMediaData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
@@ -53,13 +16,14 @@
 <script>
 import { mapGetters } from 'vuex'
 import i18n from '@/lang'
+import Setting from './Setting'
 
 export default {
   name: 'Metadata',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'metadata',
-      'richMedia'
+      'settings'
     ]),
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -68,13 +32,22 @@ export default {
       return this.isMobile ? '100px' : '240px'
     },
     loading() {
-      return this.$store.state.settings.loading
+      return this.settings.loading
+    },
+    metadata() {
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Web.Metadata')
+    },
+    metadataData() {
+      return this.settings.settings['Pleroma.Web.Metadata']
+    },
+    richMedia() {
+      return this.settings.description.find(setting => setting.key === ':rich_media')
+    },
+    richMediaData() {
+      return this.settings.settings[':rich_media']
     }
   },
   methods: {
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')

src/views/settings/components/WebPush.vue

@@ -26,7 +26,7 @@ export default {
       return this.isMobile ? '100px' : '240px'
     },
     loading() {
-      return this.$store.state.settings.loading
+      return this.settings.loading
     },
     vapidDetails() {
       return this.settings.description.find(setting => setting.key === ':vapid_details')