Add backwards compat as poc for quarantined instances

src/components/mrf_transparency_panel/mrf_transparency_panel.js

@@ -1,12 +1,26 @@
 import { mapState } from 'vuex'
 import { get } from 'lodash'
 
+/**
+ * This function is for backwards compatibility
+ * We used to get a list of strings for instances that
+ * are rejected/quarantined/etc. Now we get an object
+ * `{ "instance": instance, "reason": reason }`
+ */
+function to_instance_reason_object(e) {
+  if (typeof e === 'object' && e !== null)
+    return e
+  else
+    return {"instance": e, "reason": ""}
+  return e
+}
+
 const MRFTransparencyPanel = {
   computed: {
     ...mapState({
       federationPolicy: state => get(state, 'instance.federationPolicy'),
       mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
-      quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []),
+      quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []).map(to_instance_reason_object),
       acceptInstances: state => get(state, 'instance.federationPolicy.mrf_simple.accept', []),
       rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
       ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

@@ -64,15 +64,10 @@
                 <th>Instance</th>
                 <th>Reason</th>
               </tr>
-              <tr>
-                <td v-for="instance in quarantineInstances"
-                :key="instance"
-                v-text="instance[0]"
-                />
-                <td v-for="instance in quarantineInstances"
-                :key="instance"
-                v-text="instance[1]"
-                />
+              <tr v-for="entry in quarantineInstances"
+                :key="entry">
+                <td>{{ entry.instance }}</td>
+                <td>{{ entry.reason }}</td>
               </tr>
             </table>
           </div>