feat(reports): improve reportview and allow removing content + resolve report automatically

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

js/src/components/Comment/EventComment.vue

@@ -4,7 +4,7 @@
     :class="{
       reply: comment.inReplyToComment,
       'bg-mbz-purple-50 dark:bg-mbz-purple-500': comment.isAnnouncement,
-      'bg-mbz-bluegreen-50 dark:bg-mbz-bluegreen-600': commentSelected,
+      '!bg-mbz-bluegreen-50 dark:!bg-mbz-bluegreen-600': commentSelected,
       'shadow-none': !rootComment,
     }"
   >
@@ -62,6 +62,7 @@
             class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
             v-if="
               currentActor?.id &&
+              !readOnly &&
               event.options.commentModeration !== CommentModeration.CLOSED &&
               !comment.deletedAt
             "
@@ -70,7 +71,7 @@
             <Reply />
             <span>{{ t("Reply") }}</span>
           </button>
-          <o-dropdown aria-role="list">
+          <o-dropdown aria-role="list" v-show="!readOnly">
             <template #trigger>
               <button
                 class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
@@ -221,7 +222,7 @@ import {
   ref,
   nextTick,
 } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import Delete from "vue-material-design-icons/Delete.vue";
@@ -235,6 +236,9 @@ import ReportModal from "@/components/Report/ReportModal.vue";
 import { useCreateReport } from "@/composition/apollo/report";
 import { Snackbar } from "@/plugins/snackbar";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
+import RouteName from "@/router/name";
+
+const router = useRouter();
 
 const Editor = defineAsyncComponent(
   () => import("@/components/TextEditor.vue")
@@ -246,10 +250,13 @@ const props = withDefaults(
     event: IEvent;
     currentActor: IPerson;
     rootComment?: boolean;
+    readOnly: boolean;
   }>(),
-  { rootComment: true }
+  { rootComment: true, readOnly: false }
 );
 
+const event = computed(() => props.event);
+
 const emit = defineEmits<{
   (e: "create-comment", comment: IComment): void;
   (e: "delete-comment", comment: IComment): void;
@@ -319,7 +326,12 @@ const commentId = computed((): string => {
 
 const commentURL = computed((): string => {
   if (!props.comment.local && props.comment.url) return props.comment.url;
-  return `#${commentId.value}`;
+  return (
+    router.resolve({
+      name: RouteName.EVENT,
+      params: { uuid: event.value.uuid },
+    }).href + `#${commentId.value}`
+  );
 });
 
 const reportModal = (): void => {
@@ -352,7 +364,6 @@ const reportComment = async (
 ): Promise<void> => {
   if (!props.comment.actor) return;
   createReportMutation({
-    eventsIds: [props.event.id ?? ""],
     reportedId: props.comment.actor?.id ?? "",
     commentsIds: [props.comment.id ?? ""],
     content,

js/src/graphql/report.ts

@@ -69,6 +69,14 @@ const REPORT_FRAGMENT = gql`
       actor {
         ...ActorFragment
       }
+      updatedAt
+      deletedAt
+      uuid
+      event {
+        id
+        uuid
+        title
+      }
     }
     notes {
       id

js/src/i18n/en_US.json

@@ -78,8 +78,6 @@
   "Date parameters": "Date parameters",
   "Date": "Date",
   "Default": "Default",
-  "Delete Comment": "Delete Comment",
-  "Delete Event": "Delete Event",
   "Delete account": "Delete account",
   "Delete event": "Delete event",
   "Delete everything": "Delete everything",
@@ -1582,5 +1580,17 @@
   "This application will be allowed to list your suggested group events": "This application will be allowed to list your suggested group events",
   "{profile} joined the the event {event}.": "{profile} joined the the event {event}.",
   "You joined the event {event}.": "You joined the event {event}.",
-  "An anonymous profile joined the event {event}.": "An anonymous profile joined the event {event}."
+  "An anonymous profile joined the event {event}.": "An anonymous profile joined the event {event}.",
+  "Delete event and resolve report": "Delete event and resolve report",
+  "No content found": "No content found",
+  "Maybe the content was removed by the author or a moderator": "Maybe the content was removed by the author or a moderator",
+  "This will also resolve the report.": "This will also resolve the report.",
+  "Are you sure you want to <b>delete</b> this event? <b>This action cannot be undone</b>. You may want to engage the discussion with the event creator and ask them to edit their event instead.": "Are you sure you want to <b>delete</b> this event? <b>This action cannot be undone</b>. You may want to engage the discussion with the event creator and ask them to edit their event instead.",
+  "Are you sure you want to <b>delete</b> this comment? <b>This action cannot be undone</b>.": "Are you sure you want to <b>delete</b> this comment? <b>This action cannot be undone</b>.",
+  "Delete comment and resolve report": "Delete comment and resolve report",
+  "Delete comment": "Delete comment",
+  "Event deleted and report resolved": "Event deleted and report resolved",
+  "Event deleted": "Event deleted",
+  "Comment deleted and report resolved": "Comment deleted and report resolved",
+  "Comment under event {eventTitle}": "Comment under event {eventTitle}"
 }

js/src/i18n/fr_FR.json

@@ -1578,5 +1578,17 @@
   "This application will be allowed to list your suggested group events": "Cetta application sera autorisée à lister les événements de vos groupes qui vous sont suggérés",
   "{profile} joined the the event {event}.": "{profile} a rejoint l'événement {event}.",
   "You joined the event {event}.": "Vous avez rejoint l'événement {event}.",
-  "An anonymous profile joined the event {event}.": "Un profil anonyme a rejoint l'événement {event}."
+  "An anonymous profile joined the event {event}.": "Un profil anonyme a rejoint l'événement {event}.",
+  "Delete event and resolve report": "Supprimer l'événement et résoudre le signalement",
+  "No content found": "Aucun contenu trouvé",
+  "Maybe the content was removed by the author or a moderator": "Peut-être que le contenu a été supprimé par l'auteur·ice ou un·e modérateur·ice",
+  "This will also resolve the report.": "Cela résoudra également le signalement.",
+  "Are you sure you want to <b>delete</b> this event? <b>This action cannot be undone</b>. You may want to engage the discussion with the event creator and ask them to edit their event instead.": "Êtes-vous certain⋅e de vouloir <b>supprimer</b> cet événement ? Cette action n'est pas réversible. Vous voulez peut-être engager la discussion avec le créateur de l'événement et lui demander de modifier son événement à la place.",
+  "Are you sure you want to <b>delete</b> this comment? <b>This action cannot be undone</b>.": "Êtes-vous certain⋅e de vouloir <b>supprimer</b> ce commentaire ? <b>Cette action ne peut pas être annulée.</b>",
+  "Delete comment and resolve report": "Supprimer le commentaire et résoudre le signalement",
+  "Delete comment": "Supprimer le commentaire",
+  "Event deleted and report resolved": "Événement supprimé et signalement résolu",
+  "Event deleted": "Événement supprimé",
+  "Comment deleted and report resolved": "Commentaire supprimé et signalement résolu",
+  "Comment under event {eventTitle}": "Commentaire sous l'événement {eventTitle}"
 }

js/src/views/Moderation/ReportView.vue

@@ -150,26 +150,6 @@
               <span v-else>{{ t("Unknown") }}</span>
             </td>
           </tr>
-          <!-- <tr v-if="report.events && report.comments.length > 0">
-            <td>{{ t("Events") }}</td>
-            <td class="flex gap-2 items-center">
-              <router-link
-                class="underline"
-                :to="{
-                  name: RouteName.EVENT,
-                  params: { uuid: report.events.uuid },
-                }"
-              >
-                {{ report.event.title }}
-              </router-link>
-              <o-button
-                variant="danger"
-                @click="confirmEventDelete()"
-                icon-left="delete"
-                >{{ t("Delete") }}</o-button
-              >
-            </td>
-          </tr> -->
         </tbody>
       </table>
     </section>
@@ -213,16 +193,20 @@
       "
     >
       <h2 class="mb-1">{{ t("Reported content") }}</h2>
-      <div v-for="event in report.events" :key="event.id">
+      <ul>
-        <EventCard :event="event" mode="row" class="my-2 max-w-4xl" />
+        <li v-for="event in report.events" :key="event.id">
-        <o-button
+          <EventCard :event="event" mode="row" class="my-2 max-w-4xl" />
-          variant="danger"
+          <o-button
-          @click="confirmEventDelete(event)"
+            variant="danger"
-          icon-left="delete"
+            @click="confirmEventDelete(event)"
-          size="small"
+            icon-left="delete"
-          >{{ t("Delete") }}</o-button
+            ><template v-if="isOnlyReportedContent">{{
-        >
+              t("Delete event and resolve report")
-      </div>
+            }}</template
+            ><template v-else>{{ t("Delete event") }}</template></o-button
+          >
+        </li>
+      </ul>
     </section>
 
     <section
@@ -232,41 +216,55 @@
       <h2 class="mb-1">{{ t("Reported content") }}</h2>
       <ul v-for="comment in report.comments" :key="comment.id">
         <li>
-          <div class="" v-if="comment">
+          <i18n-t keypath="Comment under event {eventTitle}" tag="p">
-            <article>
+            <template #eventTitle>
-              <div class="flex gap-1">
+              <router-link
-                <figure class="" v-if="comment.actor?.avatar">
+                :to="{
-                  <img
+                  name: RouteName.EVENT,
-                    alt=""
+                  params: { uuid: comment.event?.uuid },
-                    :src="comment.actor.avatar?.url"
+                }"
-                    class="rounded-full"
-                    width="36"
-                    height="36"
-                  />
-                </figure>
-                <AccountCircle v-else :size="36" />
-                <div>
-                  <div v-if="comment.actor">
-                    <p>{{ comment.actor.name }}</p>
-                    <p>@{{ comment.actor.preferredUsername }}</p>
-                  </div>
-                  <span v-else>{{ t("Unknown actor") }}</span>
-                </div>
-              </div>
-              <div class="prose dark:prose-invert" v-html="comment.text" />
-              <o-button
-                variant="danger"
-                @click="confirmCommentDelete(comment)"
-                icon-left="delete"
-                size="small"
-                >{{ t("Delete") }}</o-button
               >
-            </article>
+                <b>{{ comment.event?.title }}</b>
-          </div>
+              </router-link>
+            </template>
+          </i18n-t>
+          <EventComment
+            :root-comment="true"
+            :comment="comment"
+            :event="comment.event as IEvent"
+            :current-actor="currentActor as IPerson"
+            :readOnly="true"
+          />
+          <o-button
+            v-if="!comment.deletedAt"
+            variant="danger"
+            @click="confirmCommentDelete(comment)"
+            icon-left="delete"
+            ><template v-if="isOnlyReportedContent">{{
+              t("Delete comment and resolve report")
+            }}</template
+            ><template v-else>{{ t("Delete comment") }}</template></o-button
+          >
         </li>
       </ul>
     </section>
 
+    <section
+      class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3"
+      v-if="
+        report.events &&
+        report.events?.length === 0 &&
+        report.comments.length === 0
+      "
+    >
+      <EmptyContent inline center icon="alert-circle">
+        {{ t("No content found") }}
+        <template #desc>
+          {{ t("Maybe the content was removed by the author or a moderator") }}
+        </template>
+      </EmptyContent>
+    </section>
+
     <section class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3">
       <h2 class="mb-1">{{ t("Notes") }}</h2>
       <div
@@ -321,7 +319,11 @@
 <script lang="ts" setup>
 import { CREATE_REPORT_NOTE, REPORT, UPDATE_REPORT } from "@/graphql/report";
 import { IReport, IReportNote } from "@/types/report.model";
-import { displayNameAndUsername, usernameWithDomain } from "@/types/actor";
+import {
+  IPerson,
+  displayNameAndUsername,
+  usernameWithDomain,
+} from "@/types/actor";
 import { DELETE_EVENT } from "@/graphql/event";
 import uniq from "lodash/uniq";
 import { nl2br } from "@/utils/html";
@@ -344,6 +346,8 @@ import { Notifier } from "@/plugins/notifier";
 import EventCard from "@/components/Event/EventCard.vue";
 import { useFeatures } from "@/composition/apollo/config";
 import { IEvent } from "@/types/event.model";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import EventComment from "@/components/Comment/EventComment.vue";
 
 const router = useRouter();
 
@@ -381,6 +385,14 @@ const errors = ref<string[]>([]);
 
 const noteContent = ref("");
 
+const reportedContent = computed(() => {
+  return [...(report.value?.events ?? []), ...(report.value?.comments ?? [])];
+});
+
+const isOnlyReportedContent = computed(
+  () => reportedContent.value.length === 1
+);
+
 const {
   mutate: createReportNoteMutation,
   onDone: createReportNoteMutationDone,
@@ -426,13 +438,23 @@ createReportNoteMutationError((error) => {
 
 const dialog = inject<Dialog>("dialog");
 
+const addResolveReportPart = computed(() => {
+  if (isOnlyReportedContent.value) {
+    return "<p>" + t("This will also resolve the report.") + "</p>";
+  }
+  return "";
+});
+
 const confirmEventDelete = (event: IEvent): void => {
   dialog?.confirm({
     title: t("Deleting event"),
-    message: t(
+    message:
-      "Are you sure you want to <b>delete</b> this event? This action cannot be undone. You may want to engage the discussion with the event creator or edit its event instead."
+      t(
-    ),
+        "Are you sure you want to <b>delete</b> this event? <b>This action cannot be undone</b>. You may want to engage the discussion with the event creator and ask them to edit their event instead."
-    confirmText: t("Delete Event"),
+      ) + addResolveReportPart.value,
+    confirmText: isOnlyReportedContent.value
+      ? t("Delete event and resolve report")
+      : t("Delete event"),
     variant: "danger",
     hasIcon: true,
     onConfirm: () => deleteEvent(event),
@@ -442,10 +464,13 @@ const confirmEventDelete = (event: IEvent): void => {
 const confirmCommentDelete = (comment: IComment): void => {
   dialog?.confirm({
     title: t("Deleting comment"),
-    message: t(
+    message:
-      "Are you sure you want to <b>delete</b> this comment? This action cannot be undone."
+      t(
-    ),
+        "Are you sure you want to <b>delete</b> this comment? <b>This action cannot be undone</b>."
-    confirmText: t("Delete Comment"),
+      ) + addResolveReportPart.value,
+    confirmText: isOnlyReportedContent.value
+      ? t("Delete comment and resolve report")
+      : t("Delete comment"),
     variant: "danger",
     hasIcon: true,
     onConfirm: () => deleteCommentMutation({ commentId: comment.id }),
@@ -456,15 +481,46 @@ const {
   mutate: deleteEventMutation,
   onDone: deleteEventMutationDone,
   onError: deleteEventMutationError,
-} = useMutation<{ deleteEvent: { id: string } }>(DELETE_EVENT);
+} = useMutation<{ deleteEvent: { id: string } }>(DELETE_EVENT, () => ({
+  update: (
+    store: ApolloCache<{ deleteEvent: { id: string } }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+    const reportCachedData = store.readQuery<{ report: IReport }>({
+      query: REPORT,
+      variables: { id: report.value?.id },
+    });
+    if (reportCachedData == null) return;
+    const { report: cachedReport } = reportCachedData;
+    if (cachedReport === null) {
+      console.error(
+        "Cannot update report events cache, because of null value."
+      );
+      return;
+    }
+    const updatedReport = {
+      ...cachedReport,
+      events: cachedReport.events?.filter(
+        (cachedEvent) => cachedEvent.id !== data.deleteEvent.id
+      ),
+    };
 
-deleteEventMutationDone((result) => {
+    store.writeQuery({
-  const eventTitle = result?.context?.eventTitle;
+      query: REPORT,
-  notifier?.success(
+      variables: { id: report.value?.id },
-    t("Event {eventTitle} deleted", {
+      data: { report: updatedReport },
-      eventTitle,
+    });
-    })
+  },
-  );
+}));
+
+deleteEventMutationDone(async () => {
+  if (reportedContent.value.length === 0) {
+    await updateReport(ReportStatusEnum.RESOLVED);
+    notifier?.success(t("Event deleted and report resolved"));
+  } else {
+    notifier?.success(t("Event deleted"));
+  }
 });
 
 deleteEventMutationError((error) => {
@@ -484,10 +540,46 @@ const {
   mutate: deleteCommentMutation,
   onDone: deleteCommentMutationDone,
   onError: deleteCommentMutationError,
-} = useMutation<{ deleteComment: { id: string } }>(DELETE_COMMENT);
+} = useMutation<{ deleteComment: { id: string } }>(DELETE_COMMENT, () => ({
+  update: (
+    store: ApolloCache<{ deleteComment: { id: string } }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+    const reportCachedData = store.readQuery<{ report: IReport }>({
+      query: REPORT,
+      variables: { id: report.value?.id },
+    });
+    if (reportCachedData == null) return;
+    const { report: cachedReport } = reportCachedData;
+    if (cachedReport === null) {
+      console.error(
+        "Cannot update report comments cache, because of null value."
+      );
+      return;
+    }
+    const updatedReport = {
+      ...cachedReport,
+      comments: cachedReport.comments.filter(
+        (cachedComment) => cachedComment.id !== data.deleteComment.id
+      ),
+    };
 
-deleteCommentMutationDone(() => {
+    store.writeQuery({
-  notifier?.success(t("Comment deleted") as string);
+      query: REPORT,
+      variables: { id: report.value?.id },
+      data: { report: updatedReport },
+    });
+  },
+}));
+
+deleteCommentMutationDone(async () => {
+  if (reportedContent.value.length === 0) {
+    await updateReport(ReportStatusEnum.RESOLVED);
+    notifier?.success(t("Comment deleted and report resolved"));
+  } else {
+    notifier?.success(t("Comment deleted"));
+  }
 });
 
 deleteCommentMutationError((error) => {
@@ -534,8 +626,8 @@ const {
   },
 }));
 
-onUpdateReportMutation(() => {
+onUpdateReportMutation(async () => {
-  router.push({ name: RouteName.REPORTS });
+  await router.push({ name: RouteName.REPORTS });
 });
 
 onUpdateReportError((error) => {

lib/federation/activity_pub/types/reports.ex

@@ -34,7 +34,10 @@ defmodule Mobilizon.Federation.ActivityPub.Types.Reports do
           {:error, :event_not_found} -> nil
         end
       end)
-      |> Enum.filter(& &1)
+      |> Enum.filter(fn event ->
+        is_struct(event) and
+          Enum.member?([event.organizer_actor_id, event.attributed_to_id], reported_actor.id)
+      end)
 
     comments =
       Discussions.list_comments_by_actor_and_ids(

lib/graphql/resolvers/report.ex

@@ -67,7 +67,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Report do
       {:ok, _, %Report{} = report} ->
         {:ok, report}
 
-      error ->
+      _error ->
         {:error, dgettext("errors", "Error while saving report")}
     end
   end