fix(comments ui): meilleur affiche des commentaires & changement de s…

…tatuts dans les contribs (#1070)
SocialGouv · Oct 12, 2023 · 59e35bb · 59e35bb
1 parent 46e64a8
commit 59e35bb
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 47 deletions.
diff --git a/targets/frontend/src/components/contributions/answers/Answer.tsx b/targets/frontend/src/components/contributions/answers/Answer.tsx
@@ -2,11 +2,11 @@ import {
   AlertColor,
   Box,
   Stack,
+  styled,
   Tooltip,
+  tooltipClasses,
   TooltipProps,
   Typography,
-  styled,
-  tooltipClasses,
 } from "@mui/material";
 import React, { useState } from "react";
 import { useUser } from "src/hooks/useUser";
@@ -89,15 +89,9 @@ export const ContributionsAnswer = ({
           </BreadcrumbLink>
           <BreadcrumbLink>
             <HtmlTooltip
-              title={
-                <>
-                  <Typography color="inherit">
-                    {answer?.agreement?.name}
-                  </Typography>
-                </>
-              }
+              title={<Typography>{answer?.agreement?.name}</Typography>}
             >
-              <Typography>{answer?.agreement?.id}</Typography>
+              <span>{answer?.agreement?.id}</span>
             </HtmlTooltip>
           </BreadcrumbLink>
         </Breadcrumb>

diff --git a/targets/frontend/src/components/contributions/answers/Comment.tsx b/targets/frontend/src/components/contributions/answers/Comment.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, Typography, Stack, Tooltip } from "@mui/material";
 import * as React from "react";
 
 import {
@@ -14,44 +14,67 @@ const isAnswerComments = (
 ): comment is AnswerComments =>
   (comment as AnswerComments).content !== undefined;
 
-const getText = (comment: AnswerComments | AnswerStatus) =>
-  isAnswerComments(comment)
-    ? comment.content
-    : `Statut: ${statusesMapping[comment.status].text}`;
-
 type Props = {
   comment: CommentsAndStatuses;
 };
 
 export const Comment = ({ comment }: Props) => {
-  const date = comment.createdAtDate.toLocaleString("fr-FR");
+  const date = comment.createdAtDate.toLocaleString("fr-FR", {
+    month: "short",
+    day: "numeric",
+  });
+
+  const dateFull = comment.createdAtDate.toLocaleString("fr-FR");
 
-  return (
+  return isAnswerComments(comment) ? (
     <Box
       sx={{
         border: "1px solid",
         borderColor: "grey.300",
-        borderRadius: "4px",
-        display: "flex",
-        flexDirection: "column",
-        marginBottom: 2,
-        padding: 2,
       }}
+      mt={1}
+      mb={1}
+      p={1}
     >
       <Box sx={{ display: "flex", justifyContent: "space-between" }}>
-        <Box sx={{ fontWeight: "bold" }}>{comment?.user?.name}</Box>
-        <Box
+        <Tooltip title={dateFull}>
+          <Typography
+            sx={{
+              color: fr.colors.decisions.text.mention.grey.default,
+              fontSize: "small",
+            }}
+          >
+            {date}
+          </Typography>
+        </Tooltip>
+
+        <Box sx={{ fontSize: "small", fontWeight: "bold" }}>
+          {comment?.user?.name}
+        </Box>
+      </Box>
+      <Box sx={{ marginTop: 1, whiteSpace: "pre-line" }}>{comment.content}</Box>
+    </Box>
+  ) : (
+    <Stack direction="row" justifyContent="space-between">
+      <Tooltip title={dateFull}>
+        <Typography
           sx={{
             color: fr.colors.decisions.text.mention.grey.default,
             fontSize: "small",
           }}
         >
-          {date}
-        </Box>
-      </Box>
-      <Box sx={{ marginTop: 1, whiteSpace: "pre-line" }}>
-        {getText(comment)}
-      </Box>
-    </Box>
+          {date} <strong>{comment.user?.name}</strong>
+        </Typography>
+      </Tooltip>
+      <Typography
+        sx={{
+          color: statusesMapping[comment.status].color,
+          fontSize: "small",
+        }}
+      >
+        {" "}
+        {statusesMapping[comment.status].text}
+      </Typography>
+    </Stack>
   );
 };
diff --git a/targets/frontend/src/components/contributions/answers/Comments.tsx b/targets/frontend/src/components/contributions/answers/Comments.tsx
@@ -101,6 +101,7 @@ export const Comments = ({ answerId, comments, statuses }: Props) => {
           }}
         >
           <Box
+            mb={4}
             ref={listRef}
             sx={{
               display: "flex",

diff --git a/targets/frontend/src/components/contributions/questions/EditQuestion.tsx b/targets/frontend/src/components/contributions/questions/EditQuestion.tsx
@@ -106,11 +106,7 @@ export const EditQuestion = ({
         aria-labelledby={`simple-tab-${index}`}
         {...other}
       >
-        {value === index && (
-          <Box sx={{ p: 3 }}>
-            <Typography>{children}</Typography>
-          </Box>
-        )}
+        {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
       </div>
     );
   }

diff --git a/targets/frontend/src/components/contributions/status/data.tsx b/targets/frontend/src/components/contributions/status/data.tsx
@@ -29,7 +29,7 @@ export const statusesMapping: StatusesMapping = {
   REDACTED: {
     color: fr.colors.decisions.text.default.info.default,
     icon: <DescriptionIcon titleAccess="Rédigé" fontSize="small" />,
-    text: "À validé",
+    text: "À valider",
   },
   VALIDATING: {
     color: fr.colors.decisions.text.default.warning.default,

diff --git a/targets/frontend/src/components/contributions/type.ts b/targets/frontend/src/components/contributions/type.ts
@@ -50,8 +50,8 @@ export const kaliArticleSchema = z.object({
   id: z.string(),
   path: z.string(),
   label: z
-    .string({ required_error: "Un libellé doit être renseigner" })
-    .min(1, "un label doit être renseigner"),
+    .string({ required_error: "Un libellé doit être renseigné" })
+    .min(1, "un label doit être renseigné"),
   agreementId: z.string(),
   createdAt: z.string(),
 });
@@ -79,7 +79,7 @@ export type LegiReference = z.infer<typeof legiReferenceSchema>;
 
 export const otherReferenceSchema = z.object({
   label: z
-    .string({ required_error: "un libellé doit être renseigner" })
+    .string({ required_error: "un libellé doit être renseigné" })
     .min(1, "un nom doit être renseigné"),
   url: z
     .string({ required_error: "Une url doit être renseigné" })
@@ -109,8 +109,8 @@ const answerBaseSchema = z.object({
   contentType: z.enum(
     ["ANSWER", "NOTHING", "CDT", "UNFAVOURABLE", "UNKNOWN", "SP"],
     {
-      required_error: "Un type de réponse doit être sélectionner",
-      invalid_type_error: " type de réponse doit être sélectionner",
+      required_error: "Un type de réponse doit être sélectionné",
+      invalid_type_error: " type de réponse doit être sélectionné",
     }
   ),
   contentServicePublicCdtnId: z.string().nullable().optional(),
@@ -122,9 +122,9 @@ export const questionBaseSchema = z.object({
   id: z.string().uuid(),
   content: z
     .string({
-      required_error: "une question doit être renseigner",
+      required_error: "une question doit être renseigné",
     })
-    .min(1, "une question doit être renseigner"),
+    .min(1, "une question doit être renseigné"),
   order: z.number(),
   message_id: z
     .string({

diff --git a/targets/frontend/src/components/forms/EditionField/Editor.tsx b/targets/frontend/src/components/forms/EditionField/Editor.tsx
@@ -5,7 +5,6 @@ import TableHeader from "@tiptap/extension-table-header";
 import TableRow from "@tiptap/extension-table-row";
 import StarterKit from "@tiptap/starter-kit";
 import React, { useEffect, useState } from "react";
-import { FieldErrors } from "react-hook-form";
 import { styled } from "@mui/system";
 import { fr } from "@codegouvfr/react-dsfr";
 
@@ -132,7 +131,7 @@ const StyledEditorContent = styled(EditorContent)(() => {
         border: "0",
         padding: "1rem 0",
         borderTop: `1px solid ${fr.colors.decisions.text.default.grey.default}`,
-        ":first-child": {
+        ":first-of-type": {
           border: "none",
         },
         "> button": {