Allow to filter reports by domain

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

js/src/graphql/report.ts

@@ -2,8 +2,13 @@ import gql from "graphql-tag";
 import { ACTOR_FRAGMENT } from "./actor";
 
 export const REPORTS = gql`
-  query Reports($status: ReportStatus, $page: Int, $limit: Int) {
-    reports(status: $status, page: $page, limit: $limit) {
+  query Reports(
+    $status: ReportStatus
+    $domain: String
+    $page: Int
+    $limit: Int
+  ) {
+    reports(status: $status, domain: $domain, page: $page, limit: $limit) {
       total
       elements {
         id

js/src/router/settings.ts

@@ -20,7 +20,7 @@ export enum SettingsRouteName {
   ADMIN_GROUPS = "ADMIN_GROUPS",
   ADMIN_GROUP_PROFILE = "ADMIN_GROUP_PROFILE",
   MODERATION = "MODERATION",
-  REPORTS = "Reports",
+  REPORTS = "REPORTS",
   REPORT = "Report",
   REPORT_LOGS = "Logs",
   CREATE_IDENTITY = "CreateIdentity",
@@ -234,7 +234,7 @@ export const settingsRoutes: RouteConfig[] = [
         meta: { requiredAuth: true, announcer: { skip: true } },
       },
       {
-        path: "/moderation/reports/:filter?",
+        path: "/moderation/reports",
         name: SettingsRouteName.REPORTS,
         component: (): Promise<ImportedComponent> =>
           import(

js/src/views/Admin/Instance.vue

@@ -70,7 +70,10 @@
         <span class="text-sm block">{{ $t("Followers") }}</span>
       </div>
       <div class="bg-gray-50 rounded-xl p-8 dark:bg-gray-800">
-        <router-link to="/" class="dark:text-white hover:dark:text-slate-300">
+        <router-link
+          :to="{ name: RouteName.REPORTS, query: { domain: instance.domain } }"
+          class="dark:text-white hover:dark:text-slate-300"
+        >
           <span class="mb-4 text-xl font-semibold block">{{
             instance.reportsCount
           }}</span>

js/src/views/Moderation/ReportList.vue

@@ -15,23 +15,37 @@
       </ul>
     </nav>
     <section>
-      <b-field>
-        <b-radio-button
-          v-model="status"
-          :native-value="ReportStatusEnum.OPEN"
-          >{{ $t("Open") }}</b-radio-button
+      <div class="flex flex-wrap gap-2">
+        <b-field :label="$t('Report status')">
+          <b-radio-button
+            v-model="status"
+            :native-value="ReportStatusEnum.OPEN"
+            >{{ $t("Open") }}</b-radio-button
+          >
+          <b-radio-button
+            v-model="status"
+            :native-value="ReportStatusEnum.RESOLVED"
+            >{{ $t("Resolved") }}</b-radio-button
+          >
+          <b-radio-button
+            v-model="status"
+            :native-value="ReportStatusEnum.CLOSED"
+            >{{ $t("Closed") }}</b-radio-button
+          >
+        </b-field>
+        <b-field
+          :label="$t('Domain')"
+          label-for="domain-filter"
+          class="flex-auto"
         >
-        <b-radio-button
-          v-model="status"
-          :native-value="ReportStatusEnum.RESOLVED"
-          >{{ $t("Resolved") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="status"
-          :native-value="ReportStatusEnum.CLOSED"
-          >{{ $t("Closed") }}</b-radio-button
-        >
-      </b-field>
+          <b-input
+            id="domain-filter"
+            :placeholder="$t('mobilizon-instance.tld')"
+            :value="filterDomain"
+            @input="debouncedUpdateDomainFilter"
+          />
+        </b-field>
+      </div>
       <ul v-if="reports.elements.length > 0">
         <li v-for="report in reports.elements" :key="report.id">
           <router-link
@@ -79,7 +93,7 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Ref, Vue } from "vue-property-decorator";
 import { IReport } from "@/types/report.model";
 import { REPORTS } from "@/graphql/report";
 import ReportCard from "@/components/Report/ReportCard.vue";
@@ -88,6 +102,7 @@ import { ReportStatusEnum } from "@/types/enums";
 import RouteName from "../../router/name";
 import VueRouter from "vue-router";
 import { Paginate } from "@/types/paginate";
+import debounce from "lodash/debounce";
 const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
 const REPORT_PAGE_LIMIT = 10;
@@ -106,6 +121,7 @@ const REPORT_PAGE_LIMIT = 10;
           page: this.page,
           status: this.status,
           limit: REPORT_PAGE_LIMIT,
+          domain: this.filterDomain,
         };
       },
       pollInterval: 120000, // 2 minutes
@@ -128,18 +144,28 @@ export default class ReportList extends Vue {
 
   REPORT_PAGE_LIMIT = REPORT_PAGE_LIMIT;
 
+  data(): Record<string, unknown> {
+    return {
+      debouncedUpdateDomainFilter: debounce(this.updateDomainFilter, 500),
+    };
+  }
+
+  async updateDomainFilter(domain: string) {
+    this.filterDomain = domain;
+  }
+
   get page(): number {
     return parseInt((this.$route.query.page as string) || "1", 10);
   }
 
   set page(page: number) {
-    this.pushRouter(RouteName.REPORTS, {
+    this.pushRouter({
       page: page.toString(),
     });
   }
 
   get status(): ReportStatusEnum {
-    const filter = this.$route.params.filter?.toUpperCase();
+    const filter = (this.$route.query.status || "") as string;
     if (filter in ReportStatusEnum) {
       return filter as ReportStatusEnum;
     }
@@ -147,19 +173,21 @@ export default class ReportList extends Vue {
   }
 
   set status(status: ReportStatusEnum) {
-    this.$router.push({
-      name: RouteName.REPORTS,
-      params: { filter: status.toLowerCase() },
-    });
+    this.pushRouter({ status });
   }
 
-  protected async pushRouter(
-    routeName: string,
-    args: Record<string, string>
-  ): Promise<void> {
+  get filterDomain(): string {
+    return (this.$route.query.domain as string) || "";
+  }
+
+  set filterDomain(domain: string) {
+    this.pushRouter({ domain });
+  }
+
+  protected async pushRouter(args: Record<string, string>): Promise<void> {
     try {
       await this.$router.push({
-        name: routeName,
+        name: RouteName.REPORTS,
         params: this.$route.params,
         query: { ...this.$route.query, ...args },
       });

lib/graphql/resolvers/report.ex

@@ -17,11 +17,19 @@ defmodule Mobilizon.GraphQL.Resolvers.Report do
           {:ok, Page.t(Report.t())} | {:error, String.t()}
   def list_reports(
         _parent,
-        %{page: page, limit: limit, status: status},
+        %{page: page, limit: limit} = args,
         %{context: %{current_user: %User{role: role}}}
       )
       when is_moderator(role) do
-    {:ok, Mobilizon.Reports.list_reports(page, limit, :updated_at, :desc, status)}
+    {:ok,
+     Mobilizon.Reports.list_reports(
+       page: page,
+       limit: limit,
+       sort: :updated_at,
+       direction: :desc,
+       status: Map.get(args, :status),
+       domain: Map.get(args, :domain)
+     )}
   end
 
   def list_reports(_parent, _args, _resolution) do

lib/graphql/schema/report.ex

@@ -67,6 +67,7 @@ defmodule Mobilizon.GraphQL.Schema.ReportType do
 
       arg(:limit, :integer, default_value: 10, description: "The limit of reports per page")
       arg(:status, :report_status, default_value: :open, description: "Filter reports by status")
+      arg(:domain, :string, default_value: nil, description: "Filter reports by domain name")
       resolve(&Report.list_reports/3)
     end
 

lib/mobilizon/reports/reports.ex

@@ -8,6 +8,7 @@ defmodule Mobilizon.Reports do
 
   import Mobilizon.Storage.Ecto
 
+  alias Mobilizon.Actors.Actor
   alias Mobilizon.Reports.{Note, Report}
   alias Mobilizon.Storage.{Page, Repo}
 
@@ -49,17 +50,18 @@ defmodule Mobilizon.Reports do
   @doc """
   Returns the list of reports.
   """
-  @spec list_reports(integer | nil, integer | nil, atom, atom, ReportStatus.t()) ::
-          Page.t(Report.t())
-  def list_reports(
-        page \\ nil,
-        limit \\ nil,
-        sort \\ :updated_at,
-        direction \\ :asc,
-        status \\ :open
-      ) do
+  @spec list_reports(Keyword.t()) :: Page.t(Report.t())
+  def list_reports(options) do
+    page = Keyword.get(options, :page)
+    limit = Keyword.get(options, :limit)
+    sort = Keyword.get(options, :sort, :updated_at)
+    direction = Keyword.get(options, :direction, :asc)
+    status = Keyword.get(options, :status, :open)
+    domain = Keyword.get(options, :domain)
+
     status
     |> list_reports_query()
+    |> filter_domain_name(domain)
     |> sort(sort, direction)
     |> Page.build_page(page, limit)
   end
@@ -99,11 +101,19 @@ defmodule Mobilizon.Reports do
 
   @spec list_reports_query(ReportStatus.t()) :: Ecto.Query.t()
   defp list_reports_query(status) do
-    from(
-      r in Report,
-      preload: [:reported, :reporter, :manager, :event, :comments, :notes],
-      where: r.status == ^status
-    )
+    Report
+    |> preload([:reported, :reporter, :manager, :event, :comments, :notes])
+    |> where([r], r.status == ^status)
+  end
+
+  @spec filter_domain_name(Ecto.Queryable.t(), String.t() | nil) :: Ecto.Queryable.t()
+  defp filter_domain_name(query, nil), do: query
+  defp filter_domain_name(query, ""), do: query
+
+  defp filter_domain_name(query, domain) do
+    query
+    |> join(:inner, [r], a in Actor, on: a.id == r.reported_id)
+    |> where([_r, a], like(a.domain, ^"%#{domain}%"))
   end
 
   @spec count_reports_query :: Ecto.Query.t()