feat(moderation): hide exchanges by default

numerique-gouv · Oct 1, 2024 · 8338070 · 8338070
1 parent 797f070
commit 8338070
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 38 deletions.
diff --git a/packages/~/app/core/src/schema/index.ts b/packages/~/app/core/src/schema/index.ts
@@ -33,3 +33,9 @@ export const Search_Schema = z.object({
   q: z.string().default(""),
 });
 export type Search = z.infer<typeof Search_Schema>;
+//
+
+export const DescribedBy_Schema = z.object({
+  describedby: z.string(),
+});
+export type DescribedBy = z.infer<typeof DescribedBy_Schema>;
diff --git a/packages/~/app/urls/src/pattern.d.ts b/packages/~/app/urls/src/pattern.d.ts
@@ -399,6 +399,9 @@ declare const app: import("hono/hono-base").HonoBase<
           } & {
             id: string;
           };
+          query: {
+            describedby: string | string[];
+          };
         };
         output: {};
         outputFormat: string;

diff --git a/packages/~/moderations/api/src/:id/Members_Of_Organization_Table.tsx b/packages/~/moderations/api/src/:id/Members_Of_Organization_Table.tsx
@@ -11,9 +11,10 @@ import { usePageRequestContext } from "./context";
 
 //
 
+const $describedby = hyper_ref();
+const $page_ref = hyper_ref();
+
 export async function Members_Of_Organization_Table() {
-  const $describedby = hyper_ref();
-  const $page_ref = hyper_ref();
   const {
     var: { moderation, query_organization_members_count },
   } = usePageRequestContext();

diff --git a/packages/~/moderations/api/src/:id/Moderation_Exchanges.tsx b/packages/~/moderations/api/src/:id/Moderation_Exchanges.tsx
@@ -1,41 +1,52 @@
 //
 
+import { hyper_ref } from "@~/app.core/html";
 import { hx_trigger_from_body } from "@~/app.core/htmx";
 import { Loader } from "@~/app.ui/loader/Loader";
-import { urls } from "@~/app.urls";
+import { hx_urls } from "@~/app.urls";
 import { MODERATION_EVENTS } from "@~/moderations.lib/event";
 import { usePageRequestContext } from "./context";
 
 //
 
-export function Moderation_Exchanges() {
+export async function Moderation_Exchanges() {
+  const $describedby = hyper_ref();
   const {
     var: { moderation },
   } = usePageRequestContext();
 
+  const hx_query_moderation_emails = await hx_urls.moderations[
+    ":id"
+  ].email.$get({
+    param: { id: moderation.id.toString() },
+    query: { describedby: $describedby },
+  });
+
   return (
     <section>
-      <h2>Échanges entre {moderation.user.given_name} et nous : </h2>
+      <details>
+        <summary>
+          <h2 class="inline-block" id={$describedby}>
+            📥️ Échanges entre {moderation.user.given_name} et nous :{" "}
+          </h2>
+        </summary>
 
-      <div
-        hx-get={
-          urls.moderations[":id"].email.$url({
-            param: { id: moderation.id.toString() },
-          }).pathname
-        }
-        hx-trigger={[
-          "load",
-          hx_trigger_from_body([
-            MODERATION_EVENTS.Enum.MODERATION_EMAIL_UPDATED,
-          ]),
-        ].join(", ")}
-      >
-        <div class="my-24 flex flex-col items-center justify-center">
-          Chargement des échanges avec {moderation.user.given_name}
-          <br />
-          <Loader />
+        <div
+          {...hx_query_moderation_emails}
+          hx-trigger={[
+            "load",
+            hx_trigger_from_body([
+              MODERATION_EVENTS.Enum.MODERATION_EMAIL_UPDATED,
+            ]),
+          ].join(", ")}
+        >
+          <div class="my-24 flex flex-col items-center justify-center">
+            Chargement des échanges avec {moderation.user.given_name}
+            <br />
+            <Loader />
+          </div>
         </div>
-      </div>
+      </details>
     </section>
   );
 }
diff --git a/packages/~/moderations/api/src/:id/email/index.e2e.test.ts b/packages/~/moderations/api/src/:id/email/index.e2e.test.ts
@@ -38,7 +38,7 @@ test("GET /moderations/:id/email", async () => {
     .onError((error) => {
       throw error;
     })
-    .request(`/${moderation_id}/email`);
+    .request(`/${moderation_id}/email?describedby=🐘`);
 
   if (response.status >= 400) throw await response.text();
 

diff --git a/packages/~/moderations/api/src/:id/email/index.tsx b/packages/~/moderations/api/src/:id/email/index.tsx
@@ -1,7 +1,7 @@
 //
 
 import { zValidator } from "@hono/zod-validator";
-import { Entity_Schema } from "@~/app.core/schema";
+import { DescribedBy_Schema, Entity_Schema } from "@~/app.core/schema";
 import { get_crisp_mail, is_crisp_ticket } from "@~/crisp.lib";
 import { set_crisp_config } from "@~/crisp.middleware";
 import { get_zammad_mail } from "@~/zammad.lib/get_zammad_mail";
@@ -18,6 +18,7 @@ export default new Hono<ContextType>().get(
   "/",
   jsxRenderer(),
   zValidator("param", Entity_Schema),
+  zValidator("query", DescribedBy_Schema),
   set_crisp_config(),
   function set_constants({ set }, next) {
     set("MAX_ARTICLE_COUNT", 3);

diff --git a/packages/~/moderations/api/src/:id/email/page/Crisp.tsx b/packages/~/moderations/api/src/:id/email/page/Crisp.tsx
@@ -10,8 +10,11 @@ import { usePageRequestContext } from "./context";
 //
 
 export default async function Crisp() {
+  const { req } = usePageRequestContext();
+  const { describedby } = req.valid("query");
+
   return (
-    <section>
+    <section aria-describedby={describedby}>
       <Header />
       <List />
     </section>

diff --git a/packages/~/moderations/api/src/:id/email/page/FindCorrespondingEmail.tsx b/packages/~/moderations/api/src/:id/email/page/FindCorrespondingEmail.tsx
@@ -6,16 +6,21 @@ import { usePageRequestContext } from "./context";
 
 export function FindCorrespondingEmail() {
   const {
+    req,
     var: {
       config: { CRISP_WEBSITE_ID },
       moderation: {
         user: { email },
       },
     },
   } = usePageRequestContext();
+  const { describedby } = req.valid("query");
 
   return (
-    <div class="m-auto my-12 flex justify-around">
+    <div
+      aria-describedby={describedby}
+      class="m-auto my-12 flex justify-around"
+    >
       <a
         href={`https://support.etalab.gouv.fr/#search/${email}`}
         rel="noopener noreferrer"

diff --git a/packages/~/moderations/api/src/:id/email/page/Zammad.tsx b/packages/~/moderations/api/src/:id/email/page/Zammad.tsx
@@ -9,8 +9,11 @@ import { Message } from "./Message";
 //
 
 export default async function Zammad() {
+  const { req } = usePageRequestContext();
+  const { describedby } = req.valid("query");
+
   return (
-    <section>
+    <section aria-describedby={describedby}>
       <Header />
       <List />
     </section>

diff --git a/packages/~/moderations/api/src/:id/email/page/context.ts b/packages/~/moderations/api/src/:id/email/page/context.ts
@@ -1,15 +1,16 @@
 //
 
 import { NotFoundError } from "@~/app.core/error";
+import { DescribedBy_Schema, Entity_Schema } from "@~/app.core/schema";
 import type { App_Context } from "@~/app.middleware/context";
-import { urls } from "@~/app.urls";
 import type { get_crisp_mail_dto } from "@~/crisp.lib";
 import type { Crisp_Context } from "@~/crisp.middleware";
 import { schema, type MonComptePro_PgDatabase } from "@~/moncomptepro.database";
 import { type get_zammad_mail_dto } from "@~/zammad.lib/get_zammad_mail";
 import { eq } from "drizzle-orm";
-import type { Env, InferRequestType } from "hono";
+import { type Env } from "hono";
 import { useRequestContext } from "hono/jsx-renderer";
+import type { z } from "zod";
 
 //
 
@@ -41,9 +42,11 @@ export type ContextType = App_Context & Crisp_Context & ContextVariablesType;
 
 //
 
-const $get = typeof urls.moderations[":id"].email.$get;
 type PageInputType = {
-  out: InferRequestType<typeof $get>;
+  out: {
+    param: z.input<typeof Entity_Schema>;
+    query: z.input<typeof DescribedBy_Schema>;
+  };
 };
 
 export const usePageRequestContext = useRequestContext<

diff --git a/packages/~/organizations/api/src/:id/domains/index.tsx b/packages/~/organizations/api/src/:id/domains/index.tsx
@@ -2,7 +2,11 @@
 
 import { zValidator } from "@hono/zod-validator";
 import type { Htmx_Header } from "@~/app.core/htmx";
-import { Entity_Schema, Id_Schema } from "@~/app.core/schema";
+import {
+  DescribedBy_Schema,
+  Entity_Schema,
+  Id_Schema,
+} from "@~/app.core/schema";
 import { EmailDomain_Type_Schema } from "@~/moncomptepro.lib/email_domain";
 import { ORGANISATION_EVENTS } from "@~/organizations.lib/event";
 import { add_authorized_domain } from "@~/organizations.repository/add_authorized_domain";
@@ -17,7 +21,6 @@ import { Table } from "./Table";
 //
 
 const DomainParams_Schema = z.object({ domain_id: Id_Schema });
-const Query_Schema = z.object({ describedby: z.string() });
 
 //
 
@@ -26,7 +29,7 @@ export default new Hono<ContextType>()
     "/",
     jsxRenderer(),
     zValidator("param", Entity_Schema),
-    zValidator("query", Query_Schema),
+    zValidator("query", DescribedBy_Schema),
     async function set_domains({ req, set, var: { moncomptepro_pg } }, next) {
       const { id: organization_id } = req.valid("param");
       const domains = await get_orginization_domains(

diff --git a/packages/~/organizations/api/src/:id/members/index.tsx b/packages/~/organizations/api/src/:id/members/index.tsx
@@ -1,7 +1,11 @@
 //
 
 import { zValidator } from "@hono/zod-validator";
-import { Entity_Schema, Pagination_Schema } from "@~/app.core/schema";
+import {
+  DescribedBy_Schema,
+  Entity_Schema,
+  Pagination_Schema,
+} from "@~/app.core/schema";
 import { get_users_by_organization_id } from "@~/users.repository/get_users_by_organization_id";
 import { Hono } from "hono";
 import { jsxRenderer } from "hono/jsx-renderer";
@@ -24,8 +28,7 @@ export default new Hono<ContextType>()
     zValidator("param", Entity_Schema),
     zValidator(
       "query",
-      Pagination_Schema.extend({
-        describedby: z.string(),
+      Pagination_Schema.merge(DescribedBy_Schema).extend({
         page_ref: z.string(),
       }),
     ),