Make reasons show

* If BE nodeinfo sends a mrf_simple_info and/or quarantined_instances_info, we'll try to get the reason for each instance for each policy and show it in the about page

src/components/mrf_transparency_panel/mrf_transparency_panel.js

@@ -2,17 +2,18 @@ import { mapState } from 'vuex'
 import { get } from 'lodash'
 
 /**
- * This function is for backwards compatibility
+ * This is for backwards compatibility. We originally didn't recieve
- * We used to get a list of strings for instances that
+ * extra info like a reason why an instance was rejected/quarantined/etc.
- * are rejected/quarantined/etc. Now we get an object
+ * Because we didn't want to break backwards compatibility it was decided
- * `{ "instance": instance, "reason": reason }`
+ * to add an extra "info" key.
  */
-function toInstanceReasonObject (e) {
+function toInstanceReasonObject (instances, info, key) {
-  if (typeof e === 'object' && e !== null) {
+  return instances.map(instance => {
-    return e
+    if (info[key] && info[key][instance] && info[key][instance]['reason']) {
-  } else {
+      return { 'instance': instance, 'reason': info[key][instance]['reason'] }
-    return { 'instance': e, 'reason': '' }
+    }
-  }
+    return { 'instance': instance, 'reason': '' }
+  })
 }
 
 const MRFTransparencyPanel = {
@@ -20,12 +21,36 @@ const MRFTransparencyPanel = {
     ...mapState({
       federationPolicy: state => get(state, 'instance.federationPolicy'),
       mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
-      quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []).map(toInstanceReasonObject),
+      quarantineInstances: state => toInstanceReasonObject(
-      acceptInstances: state => get(state, 'instance.federationPolicy.mrf_simple.accept', []),
+        get(state, 'instance.federationPolicy.quarantined_instances', []),
-      rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
+        get(state, 'instance.federationPolicy.quarantined_instances_info', []),
-      ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
+        'quarantined_instances'
-      mediaNsfwInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
+      ),
-      mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+      acceptInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.accept', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'accept'
+      ),
+      rejectInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.reject', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'reject'
+      ),
+      ftlRemovalInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'federated_timeline_removal'
+      ),
+      mediaNsfwInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'media_nsfw'
+      ),
+      mediaRemovalInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'media_removal'
+      ),
       keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
       keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
       keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

@@ -31,13 +31,19 @@
 
             <p>{{ $t("about.mrf.simple.accept_desc") }}</p>
 
-            <ul>
+            <table style="width:100%;text-align: left;">
-              <li
+              <tr>
-                v-for="instance in acceptInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in acceptInstances"
+                :key="entry"
+              >
+                <td>{{ entry.instance }}</td>
+                <td>{{ entry.reason }}</td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="rejectInstances.length">
@@ -45,13 +51,19 @@
 
             <p>{{ $t("about.mrf.simple.reject_desc") }}</p>
 
-            <ul>
+            <table style="width:100%;text-align: left;">
-              <li
+              <tr>
-                v-for="instance in rejectInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in rejectInstances"
+                :key="entry"
+              >
+                <td>{{ entry.instance }}</td>
+                <td>{{ entry.reason }}</td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="quarantineInstances.length">
@@ -79,13 +91,19 @@
 
             <p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
 
-            <ul>
+            <table style="width:100%;text-align: left;">
-              <li
+              <tr>
-                v-for="instance in ftlRemovalInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in ftlRemovalInstances"
+                :key="entry"
+              >
+                <td>{{ entry.instance }}</td>
+                <td>{{ entry.reason }}</td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="mediaNsfwInstances.length">
@@ -93,13 +111,19 @@
 
             <p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
 
-            <ul>
+            <table style="width:100%;text-align: left;">
-              <li
+              <tr>
-                v-for="instance in mediaNsfwInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in mediaNsfwInstances"
+                :key="entry"
+              >
+                <td>{{ entry.instance }}</td>
+                <td>{{ entry.reason }}</td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="mediaRemovalInstances.length">
@@ -107,13 +131,19 @@
 
             <p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
 
-            <ul>
+            <table style="width:100%;text-align: left;">
-              <li
+              <tr>
-                v-for="instance in mediaRemovalInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in mediaNsfwInstances"
+                :key="entry"
+              >
+                <td>{{ entry.instance }}</td>
+                <td>{{ entry.reason }}</td>
+              </tr>
+            </table>
           </div>
 
           <h2 v-if="hasKeywordPolicies">