fix(reports): make front-end handle nullified reported_id and reported_id

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Report/ReportCard.vue

@@ -5,7 +5,7 @@
   >
     <div class="flex justify-between gap-1 border-b p-2">
       <div class="flex gap-1">
-        <figure class="" v-if="report.reported.avatar">
+        <figure class="" v-if="report.reported?.avatar">
           <img
             alt=""
             :src="report.reported.avatar.url"
@@ -16,14 +16,20 @@
         </figure>
         <AccountCircle v-else :size="24" />
         <div class="">
-          <p class="" v-if="report.reported.name">{{ report.reported.name }}</p>
+          <p class="" v-if="report.reported?.name">
-          <p class="text-zinc-700 dark:text-zinc-100 text-sm">
+            {{ report.reported.name }}
+          </p>
+          <p
+            class="text-zinc-700 dark:text-zinc-100 text-sm"
+            v-else-if="report.reported?.preferredUsername"
+          >
             @{{ usernameWithDomain(report.reported) }}
           </p>
+          <p v-else>{{ t("Unknown actor") }}</p>
         </div>
       </div>
       <div>
-        <p v-if="report.reported.suspended" class="text-red-700 font-bold">
+        <p v-if="report.reported?.suspended" class="text-red-700 font-bold">
           {{ t("Suspended") }}
         </p>
       </div>
@@ -31,7 +37,7 @@
 
     <div class="p-2">
       <div class="">
-        <span v-if="report.reporter.type === ActorType.APPLICATION">
+        <span v-if="report.reporter?.type === ActorType.APPLICATION">
           {{
             t("Reported by someone on {domain}", {
               domain: report.reporter.domain,
@@ -40,19 +46,22 @@
         </span>
         <span
           v-if="
-            report.reporter.preferredUsername === 'anonymous' &&
+            report.reporter?.preferredUsername === 'anonymous' &&
-            !report.reporter.domain
+            !report.reporter?.domain
           "
         >
           {{ t("Reported by someone anonymously") }}
         </span>
-        <span v-else>
+        <span v-else-if="report.reporter?.preferredUsername">
           {{
             t("Reported by {reporter}", {
               reporter: usernameWithDomain(report.reporter),
             })
           }}
         </span>
+        <span v-else>
+          {{ t("Reported by an unknown actor") }}
+        </span>
       </div>
       <div class="" v-if="report.content" v-html="report.content" />
     </div>

js/src/i18n/en_US.json

@@ -1593,7 +1593,6 @@
   "Event deleted": "Event deleted",
   "Comment deleted and report resolved": "Comment deleted and report resolved",
   "Comment under event {eventTitle}": "Comment under event {eventTitle}",
-  "Suspend profile": "Suspend profile",
   "Do you really want to suspend this profile? All of the profiles content will be deleted.": "Do you really want to suspend this profile? All of the profiles content will be deleted.",
   "There will be no way to restore the profile's data!": "There will be no way to restore the profile's data!",
   "Suspend the profile": "Suspend the profile",
@@ -1602,5 +1601,9 @@
   "There will be no way to restore the user's data!": "There will be no way to restore the user's data!",
   "User suspended and report resolved": "User suspended and report resolved",
   "Profile suspended and report resolved": "Profile suspended and report resolved",
-  "{profileName} (suspended)": "{profileName} (suspended)"
+  "{profileName} (suspended)": "{profileName} (suspended)",
+  "Reported by an unknown actor": "Reported by an unknown actor",
+  "Reported at": "Reported at",
+  "Updated at": "Updated at",
+  "Suspend the profile?": "Suspend the profile?"
 }

js/src/i18n/fr_FR.json

@@ -1600,5 +1600,8 @@
   "There will be no way to restore the user's data!": "Il n'y aura aucun moyen de restorer les données de l'utilisateur·ice !",
   "User suspended and report resolved": "Utilisateur suspendu et signalement résolu",
   "Profile suspended and report resolved": "Profil suspendu et signalement résolu",
-  "{profileName} (suspended)": "{profileName} (suspendu·e)"
+  "{profileName} (suspended)": "{profileName} (suspendu·e)",
+  "Reported by an unknown actor": "Signalé par un·e acteur·ice inconnu·e",
+  "Reported at": "Signalé à",
+  "Updated at": "Mis à jour à"
 }

js/src/types/report.model.ts

@@ -14,7 +14,7 @@ export interface IReportNote extends IActionLogObject {
 }
 export interface IReport extends IActionLogObject {
   id: string;
-  reported: IActor;
+  reported: IActor | undefined;
   reporter: IPerson;
   events?: IEvent[];
   comments: IComment[];

js/src/views/Moderation/ReportView.vue

@@ -65,7 +65,7 @@
     <section class="w-full">
       <table class="table w-full">
         <tbody>
-          <tr v-if="report.reported.type === ActorType.GROUP">
+          <tr v-if="report.reported?.type === ActorType.GROUP">
             <td>{{ t("Reported group") }}</td>
             <td>
               <router-link
@@ -84,7 +84,7 @@
               </router-link>
             </td>
           </tr>
-          <tr v-else>
+          <tr v-else-if="report.reported?.type === ActorType.PERSON">
             <td>
               {{ t("Reported identity") }}
             </td>
@@ -134,12 +134,20 @@
               >
             </td>
           </tr>
+          <tr v-else>
+            <td>
+              {{ t("Reported identity") }}
+            </td>
+            <td>
+              {{ t("Unknown actor") }}
+            </td>
+          </tr>
           <tr>
             <td>{{ t("Reported by") }}</td>
-            <td v-if="report.reporter.type === ActorType.APPLICATION">
+            <td v-if="report.reporter?.type === ActorType.APPLICATION">
               {{ report.reporter.domain }}
             </td>
-            <td v-else>
+            <td v-else-if="report.reporter?.type === ActorType.PERSON">
               <router-link
                 :to="{
                   name: RouteName.ADMIN_PROFILE,
@@ -155,13 +163,16 @@
                 {{ displayNameAndUsername(report.reporter) }}
               </router-link>
             </td>
+            <td v-else>
+              {{ t("Unknown actor") }}
+            </td>
           </tr>
           <tr>
-            <td>{{ t("Reported") }}</td>
+            <td>{{ t("Reported at") }}</td>
             <td>{{ formatDateTimeString(report.insertedAt) }}</td>
           </tr>
           <tr v-if="report.updatedAt !== report.insertedAt">
-            <td>{{ t("Updated") }}</td>
+            <td>{{ t("Updated at") }}</td>
             <td>{{ formatDateTimeString(report.updatedAt) }}</td>
           </tr>
           <tr>
@@ -187,7 +198,7 @@
       <h2 class="mb-1">{{ t("Report reason") }}</h2>
       <div class="">
         <div class="flex gap-1">
-          <figure class="" v-if="report.reported.avatar">
+          <figure class="" v-if="report.reported?.avatar">
             <img
               alt=""
               :src="report.reported.avatar.url"
@@ -197,12 +208,13 @@
             />
           </figure>
           <AccountCircle v-else :size="36" />
-          <div class="">
+          <div class="" v-if="report.reported">
-            <p class="" v-if="report.reported.name">
+            <p class="" v-if="report.reported?.name">
               {{ report.reported.name }}
             </p>
             <p class="">@{{ usernameWithDomain(report.reported) }}</p>
           </div>
+          <p v-else>{{ t("Unknown actor") }}</p>
         </div>
         <div
           class="prose dark:prose-invert"