feat: contribution cc hover cc search delete question (#1057)

* feat: contrib answer CC hover + CC search + delete question * fix: permettre accordéon dans accordéon * chore: review * chore: fix test --------- Co-authored-by: Victor Zeinstra <[email protected]>
SocialGouv · Oct 9, 2023 · 10864fa · 10864fa
1 parent a83570a
commit 10864fa
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 16 deletions.
diff --git a/targets/frontend/src/components/contributions/answers/Answer.tsx b/targets/frontend/src/components/contributions/answers/Answer.tsx
@@ -1,4 +1,13 @@
-import { AlertColor, Box, Stack, Typography } from "@mui/material";
+import {
+  AlertColor,
+  Box,
+  Stack,
+  Tooltip,
+  TooltipProps,
+  Typography,
+  styled,
+  tooltipClasses,
+} from "@mui/material";
 import React, { useState } from "react";
 import { useUser } from "src/hooks/useUser";
 
@@ -11,6 +20,7 @@ import { statusesMapping } from "../status/data";
 import { SnackBar } from "../../utils/SnackBar";
 import { Breadcrumb, BreadcrumbLink } from "src/components/utils";
 import { AnswerForm } from "./AnswerForm";
+import { fr } from "@codegouvfr/react-dsfr";
 
 export type ContributionsAnswerProps = {
   id: string;
@@ -77,7 +87,19 @@ export const ContributionsAnswer = ({
               {answer?.question?.content}
             </>
           </BreadcrumbLink>
-          <BreadcrumbLink>{answer?.agreement?.id}</BreadcrumbLink>
+          <BreadcrumbLink>
+            <HtmlTooltip
+              title={
+                <>
+                  <Typography color="inherit">
+                    {answer?.agreement?.name}
+                  </Typography>
+                </>
+              }
+            >
+              <Typography>{answer?.agreement?.id}</Typography>
+            </HtmlTooltip>
+          </BreadcrumbLink>
         </Breadcrumb>
         {answer?.status && (
           <div style={{ color: statusesMapping[answer?.status.status].color }}>
@@ -106,3 +128,15 @@ export const ContributionsAnswer = ({
     </>
   );
 };
+
+const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: fr.colors.decisions.background.default.grey.hover,
+    color: fr.colors.decisions.text.default.grey.default,
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: `1px solid ${fr.colors.decisions.border.default.grey.default}`,
+  },
+}));
diff --git a/targets/frontend/src/components/contributions/answers/AnswerForm.tsx b/targets/frontend/src/components/contributions/answers/AnswerForm.tsx
@@ -164,6 +164,11 @@ export const AnswerForm = ({
             name="cdtnReferences"
             control={control}
             disabled={isNotEditable(answer)}
+            idcc={
+              answer.agreement?.id
+                ? parseInt(answer.agreement?.id).toString()
+                : undefined
+            }
           />
           <Stack direction="row" justifyContent="end" spacing={2} padding={2}>
             <Button

diff --git a/targets/frontend/src/components/contributions/answers/__tests__/AnswerForm.test.tsx b/targets/frontend/src/components/contributions/answers/__tests__/AnswerForm.test.tsx
@@ -31,6 +31,7 @@ const answerBase: AnswerWithStatus = {
   contentFichesSpDocument: null,
   status: {
     status: "TODO",
+    createdAt: new Date().toISOString(),
   },
   updateDate: "29/09/2023",
 };

diff --git a/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx b/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx
@@ -8,12 +8,14 @@ type Props = {
   name: string;
   control: Control<any>;
   disabled?: boolean;
+  idcc?: string;
 };
 
 export const CdtnReferenceInput = ({
   name,
   control,
   disabled = false,
+  idcc,
 }: Props): React.ReactElement => (
   <ReferenceInput<CdtnReference>
     isMultiple={true}
@@ -23,6 +25,7 @@ export const CdtnReferenceInput = ({
     disabled={disabled}
     control={control}
     fetcher={useContributionSearchCdtnReferencesQuery}
+    idcc={idcc}
     isEqual={(option, value) =>
       value.document.cdtnId === option.document.cdtnId
     }

diff --git a/targets/frontend/src/components/contributions/answers/references/ReferenceInput.tsx b/targets/frontend/src/components/contributions/answers/references/ReferenceInput.tsx
@@ -15,7 +15,7 @@ type Props<Type> = {
   label: string;
   name: string;
   control: Control<any>;
-  fetcher: (query: string | undefined) => Result<Type>;
+  fetcher: (query: string | undefined, idcc?: string) => Result<Type>;
   isEqual: (value: Type, option: Type) => boolean;
   getLabel: (option: Type) => string;
   onClick: (value: Type) => void;
@@ -29,6 +29,7 @@ type Props<Type> = {
     | "warning";
   disabled: boolean;
   isMultiple?: true;
+  idcc?: string;
 };
 
 export const ReferenceInput = <Type,>({
@@ -42,9 +43,10 @@ export const ReferenceInput = <Type,>({
   color,
   disabled,
   isMultiple,
+  idcc,
 }: Props<Type>): ReactElement | null => {
   const [query, setQuery] = useState<string | undefined>();
-  const { data, fetching, error } = fetcher(query);
+  const { data, fetching, error } = fetcher(query, idcc);
 
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState<readonly Type[]>([]);

diff --git a/...ts/frontend/src/components/contributions/answers/references/cdtnReferencesSearch.query.ts b/...ts/frontend/src/components/contributions/answers/references/cdtnReferencesSearch.query.ts
@@ -21,13 +21,14 @@ export const getSlugFromUrl = (query: string | undefined): string => {
 };
 
 export const SearchCdtnReferencesQuery = `
-query SearchCdtnReferences($sources: [String!], $slug: String, $title: String) {
+query SearchCdtnReferences($sources: [String!], $slug: String, $title: String, $slugRegex: String) {
   documents(where: {
     _or: [{
       title: {_ilike: $title}
     }, {
       slug: {_eq: $slug}
     }],
+    slug: { _regex: $slugRegex },
     is_available: {_eq: true},
     is_published: {_eq: true},
     source: {_in: $sources}
@@ -46,10 +47,14 @@ query SearchCdtnReferences($sources: [String!], $slug: String, $title: String) {
 `;
 
 export const useContributionSearchCdtnReferencesQuery = (
-  query: string | undefined
+  query: string | undefined,
+  idcc?: string
 ): Result<Pick<CdtnReference, "document">> => {
   const slug = getSlugFromUrl(query);
   const title = getNormalizedTitle(slug);
+  const slugRegex = `^(${idcc ? `${idcc}|` : ""}[^0-9])${
+    idcc ? `{${idcc.length}}` : ""
+  }[\-a-zA-Z0-9_]+$`;
   const [{ data, fetching, error }] = useQuery<SearchCdtnReferencesQueryResult>(
     {
       query: SearchCdtnReferencesQuery,
@@ -66,6 +71,7 @@ export const useContributionSearchCdtnReferencesQuery = (
         ],
         slug,
         title,
+        slugRegex,
       },
     }
   );

diff --git a/targets/frontend/src/components/forms/EditionField/Editor.tsx b/targets/frontend/src/components/forms/EditionField/Editor.tsx
@@ -129,9 +129,12 @@ const StyledEditorContent = styled(EditorContent)(() => {
       },
       ".details": {
         display: "flex",
-        margin: "1rem 0",
         border: "0",
-        padding: "0.5rem",
+        padding: "1rem 0",
+        borderTop: `1px solid ${fr.colors.decisions.text.default.grey.default}`,
+        ":first-child": {
+          border: "none",
+        },
         "> button": {
           display: "flex",
           cursor: "pointer",

diff --git a/targets/frontend/src/components/forms/EditionField/MenuSpecial.tsx b/targets/frontend/src/components/forms/EditionField/MenuSpecial.tsx
@@ -60,11 +60,7 @@ export const MenuSpecial = ({ editor }: { editor: Editor | null }) => {
         <GridOnIcon />
       </button>
       <button
-        onClick={() =>
-          editor.isActive("details")
-            ? editor.chain().focus().unsetDetails().run()
-            : editor.chain().focus().setDetails().run()
-        }
+        onClick={() => editor.chain().focus().setDetails().run()}
         className={editor.isActive("details") ? "is-active" : ""}
         type="button"
         title="Ajouter un accordéon"

diff --git a/targets/frontend/src/components/forms/EditionField/MenuStyle.tsx b/targets/frontend/src/components/forms/EditionField/MenuStyle.tsx
@@ -45,9 +45,7 @@ export const MenuStyle = ({ editor }: { editor: Editor | null }) => {
       </button>
       <button
         onClick={() => {
-          editor.isActive("details")
-            ? editor.chain().focus().unsetDetails().run()
-            : editor.chain().focus().setDetails().run();
+          editor.chain().focus().setDetails().run();
         }}
         className={editor.isActive("details") ? "is-active" : ""}
         type="button"

diff --git a/...s/hasura/migrations/default/1696425195146_delete_obsolete_contribution_questions/down.sql b/...s/hasura/migrations/default/1696425195146_delete_obsolete_contribution_questions/down.sql
diff --git a/...ets/hasura/migrations/default/1696425195146_delete_obsolete_contribution_questions/up.sql b/...ets/hasura/migrations/default/1696425195146_delete_obsolete_contribution_questions/up.sql
@@ -0,0 +1,4 @@
+delete from contribution.questions
+where "order" = any(
+        array [2, 49, 3, 32, 21, 22, 24, 25, 27, 28, 30, 31]
+    );