fix(alert): handle splitted contribution (#276) (#280)

SocialGouv · Jan 22, 2021 · 339fcfd · 339fcfd
1 parent 35512bb
commit 339fcfd
Show file tree

Hide file tree

Showing 49 changed files with 300 additions and 254 deletions.
diff --git a/.env b/.env
@@ -32,3 +32,5 @@ HASURA_GRAPHQL_UNAUTHORIZED_ROLE=public
 # webhook
 ACCOUNT_EMAIL_SECRET=a random string that will be verify when calling the webhook
 PUBLICATION_SECRET=a random string that will be verify when calling the webhook
+
+NEXT_PUBLIC_CONTAINER_NAME=cdtn-dev
diff --git a/targets/frontend/package.json b/targets/frontend/package.json
@@ -64,7 +64,7 @@
     "strip-markdown": "^4.0.0",
     "styled-components": "^5.2.1",
     "swr": "^0.3.11",
-    "theme-ui": "0.6.0-alpha.3",
+    "theme-ui": "0.6.0-alpha.4",
     "unified": "^9.2.0",
     "unist-util-parents": "^1.0.3",
     "unist-util-select": "^3.0.4",

diff --git a/targets/frontend/src/components/alerts/AlertTitle.js b/targets/frontend/src/components/alerts/AlertTitle.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { IoIosLink, IoMdChatbubbles } from "react-icons/io";
@@ -28,7 +30,7 @@ export function AlertTitle({ alertId, info, ...props }) {
           </IconButton>
         </a>
       )}
-      <div sx={{ flex: "1 1 0" }} />
+      <Box sx={{ flex: "1 1 0" }} />
       <IconButton
         sx={{ justifyItems: "flex-end" }}
         variant="secondary"

diff --git a/targets/frontend/src/components/alerts/Status.js b/targets/frontend/src/components/alerts/Status.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { IoIosCheckmark, IoIosClose } from "react-icons/io";
 import { useMutation } from "urql";

diff --git a/targets/frontend/src/components/button/CopyButton.js b/targets/frontend/src/components/button/CopyButton.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import { IoMdCheckmark, IoMdClipboard } from "react-icons/io";

diff --git a/targets/frontend/src/components/button/GitlabButton.js b/targets/frontend/src/components/button/GitlabButton.js
@@ -20,12 +20,7 @@ function fetchPipelines(url) {
 export function GitlabButton({ env, children }) {
   const [status, setStatus] = useState("disabled");
   const token = getToken();
-  const { error, data, isValidating, mutate } = useSWR(
-    `/api/pipelines`,
-    fetchPipelines
-  );
-
-  console.log("swr", { data, error, isValidating });
+  const { error, data, mutate } = useSWR(`/api/pipelines`, fetchPipelines);
 
   async function clickHandler() {
     if (isDisabled) {

diff --git a/targets/frontend/src/components/button/index.js b/targets/frontend/src/components/button/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import {
   AccordionButton as ReachAccordionButton,
   useAccordionItemContext,
@@ -124,7 +126,7 @@ const OutlineButton = React.forwardRef(function _OutlineButton(
 OutlineButton.propTypes = buttonPropTypes;
 
 export const IconButton = React.forwardRef(function _IconButton(
-  { variant = "primary", size = "large", ...props },
+  { variant = "primary", size = "large", sx, ...props },
   ref
 ) {
   return (
@@ -147,6 +149,7 @@ export const IconButton = React.forwardRef(function _IconButton(
         fontSize: size,
         lineHeight: 1,
         overflow: "hidden",
+        ...sx,
       }}
     />
   );

diff --git a/targets/frontend/src/components/changes/ChangeGroup.js b/targets/frontend/src/components/changes/ChangeGroup.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { AccordionItem, AccordionPanel } from "@reach/accordion";
 import PropTypes from "prop-types";
 import { AccordionButton } from "src/components/button";

diff --git a/targets/frontend/src/components/changes/ViewDiff.js b/targets/frontend/src/components/changes/ViewDiff.js
@@ -1,10 +1,12 @@
-// adapted from https://github.com/davidmason/react-stylable-diff/blob/master/lib/react-diff.js
+/** @jsxImportSource theme-ui */
 
 import PropTypes from "prop-types";
 import { useState } from "react";
 
 var jsdiff = require("diff");
 
+// adapted from https://github.com/davidmason/react-stylable-diff/blob/master/lib/react-diff.js
+
 const fnMap = {
   chars: jsdiff.diffChars,
   json: jsdiff.diffJson,

diff --git a/targets/frontend/src/components/comments/Comment.js b/targets/frontend/src/components/comments/Comment.js
@@ -1,16 +1,20 @@
 import PropTypes from "prop-types";
-import { Box } from "theme-ui";
+import { Box, Text } from "theme-ui";
 
 export function Comment({ comment }) {
   return (
     <Box sx={{ alignItems: "center" }}>
       <Box>
-        <b sx={{ color: "secondary" }}>{comment.user.name}</b>{" "}
-        <span sx={{ color: "muted" }}>
+        <Text sx={{ color: "secondary", fontWeight: "600" }}>
+          {comment.user.name}
+        </Text>{" "}
+        <Text sx={{ color: "muted" }}>
           {new Date(comment.createdAt).toLocaleDateString()}
-        </span>
+        </Text>
       </Box>
-      <p sx={{ margin: 0, padding: 0 }}>{comment.text}</p>
+      <Text as="p" m="0" p="0">
+        {comment.text}
+      </Text>
     </Box>
   );
 }

diff --git a/targets/frontend/src/components/comments/CommentForm.js b/targets/frontend/src/components/comments/CommentForm.js
@@ -1,6 +1,7 @@
 import VisuallyHidden from "@reach/visually-hidden";
 import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
+import { Input, Label } from "theme-ui";
 
 import { Button } from "../button";
 
@@ -18,8 +19,8 @@ export function CommentForm({ onSubmit }) {
 
   return (
     <form onSubmit={handleSubmit(submitHandler)}>
-      <label sx={{ alignItems: "center", display: "flex" }}>
-        <input
+      <Label sx={{ alignItems: "center", display: "flex" }}>
+        <Input
           sx={{
             border: "1px solid",
             borderColor: "neutral",
@@ -37,7 +38,7 @@ export function CommentForm({ onSubmit }) {
         <VisuallyHidden>
           <Button type="submit">Envoyer le commentaire</Button>
         </VisuallyHidden>
-      </label>
+      </Label>
     </form>
   );
 }

diff --git a/targets/frontend/src/components/comments/CommentList.js b/targets/frontend/src/components/comments/CommentList.js
@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useLayoutEffect, useRef } from "react";
-import { Text } from "theme-ui";
+import { Box, Text } from "theme-ui";
 
 import { Stack } from "../layout/Stack";
 import { Comment, commentPropTypes } from "./Comment";
@@ -13,7 +13,7 @@ export function CommentList({ comments }) {
     }
   });
   return (
-    <div
+    <Box
       ref={scrollContainer}
       sx={{ maxHeight: "200px", overflow: "hidden", overflowY: "auto" }}
     >
@@ -28,7 +28,7 @@ export function CommentList({ comments }) {
           </Text>
         )}
       </Stack>
-    </div>
+    </Box>
   );
 }
 

diff --git a/targets/frontend/src/components/comments/index.js b/targets/frontend/src/components/comments/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useMemo } from "react";
 import { useUser } from "src/hooks/useUser";

diff --git a/targets/frontend/src/components/editorialContent/ContentSections/MarkdownPreviewModal.js b/targets/frontend/src/components/editorialContent/ContentSections/MarkdownPreviewModal.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import micromark from "micromark";
 import PropTypes from "prop-types";
 import { useState } from "react";
@@ -33,6 +35,7 @@ export const MarkdownPreviewModal = ({ markdown }) => {
           maxHeight: "90vh",
           maxWidth: "50rem",
           overflow: "auto",
+          position: "absolute",
           top: "50%",
           transform: "translate(-50%, -50%)",
           width: "90vw",

diff --git a/targets/frontend/src/components/editorialContent/ContentSections/Section.js b/targets/frontend/src/components/editorialContent/ContentSections/Section.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 import { useWatch } from "react-hook-form";
@@ -12,8 +14,9 @@ import { Button, IconButton } from "src/components/button";
 import { ReferenceBlocks } from "src/components/editorialContent/ReferenceBlocks";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { Stack } from "src/components/layout/Stack";
+import { Li } from "src/components/list";
 import { MarkdownLink } from "src/components/MarkdownLink";
-import { Container, Field, Flex, Label, Radio, Textarea } from "theme-ui";
+import { Box, Container, Field, Flex, Label, Radio, Textarea } from "theme-ui";
 
 import { MarkdownPreviewModal } from "./MarkdownPreviewModal";
 
@@ -64,7 +67,7 @@ const RootSection = ({
   }, [errors, setOpen]);
 
   return (
-    <li sx={{ listStyleType: "none" }}>
+    <Li>
       <Container
         key={block.key}
         bg="highlight"
@@ -78,7 +81,7 @@ const RootSection = ({
             }}
           >
             {numberOfBlocks > 1 && <DragHandle />}
-            <div sx={{ flex: "1 0 auto", mx: "small", my: "0" }}>
+            <Box mx="small" my="0" sx={{ flex: "1 0 auto" }}>
               <Field
                 name={`${name}.title`}
                 label="Titre de la section"
@@ -91,8 +94,8 @@ const RootSection = ({
                 })}
               />
               <FormErrorMessage errors={errors} fieldName="title" />
-            </div>
-            <div sx={{ mt: "medium" }}>
+            </Box>
+            <Box mt="medium">
               <Button
                 type="button"
                 variant="secondary"
@@ -109,9 +112,9 @@ const RootSection = ({
                   />
                 )}
               </Button>
-            </div>
+            </Box>
           </Flex>
-          <div sx={{ display: isOpen ? "block" : "none" }}>
+          <Box sx={{ display: isOpen ? "block" : "none" }}>
             <Stack>
               <div>
                 <Flex sx={{ justifyContent: "flex-start" }}>
@@ -150,7 +153,7 @@ const RootSection = ({
                   >
                     Graphique{" "}
                     <Radio
-                      sx={{ ml: "xxsmall" }}
+                      ml="xxsmall"
                       name={`${name}.type`}
                       value={TYPES.GRAPHIC}
                       defaultChecked={block.type === TYPES.GRAPHIC}
@@ -273,10 +276,10 @@ const RootSection = ({
                 />
               </div>
             </Stack>
-          </div>
+          </Box>
         </Stack>
       </Container>
-    </li>
+    </Li>
   );
 };
 

diff --git a/targets/frontend/src/components/editorialContent/ContentSections/index.js b/targets/frontend/src/components/editorialContent/ContentSections/index.js
@@ -4,12 +4,13 @@ import { useFieldArray } from "react-hook-form";
 import { IoMdAdd } from "react-icons/io";
 import { SortableContainer } from "react-sortable-hoc";
 import { Button } from "src/components/button";
+import { List } from "src/components/list";
 
 import { SortableSection, TYPES } from "./Section";
 
 const SortableSectionList = SortableContainer(
   ({ blocks, errors, name, ...props }) => (
-    <ul sx={{ listStyleType: "none", m: 0, p: 0 }}>
+    <List>
       {blocks.map((block, index) => (
         <SortableSection
           {...props}
@@ -23,7 +24,7 @@ const SortableSectionList = SortableContainer(
           blockIndex={index}
         />
       ))}
-    </ul>
+    </List>
   )
 );
 
@@ -35,7 +36,7 @@ export function ContentSections({ control, name, register, errors }) {
   });
 
   return (
-    <>
+    <div>
       <SortableSectionList
         blocks={blocks}
         control={control}
@@ -53,12 +54,13 @@ export function ContentSections({ control, name, register, errors }) {
         }}
       />
       <Button
-        sx={{ mb: "medium" }}
+        mb="medium"
         type="button"
         size="small"
         variant="secondary"
         onClick={() => append({ type: TYPES.MARKDOWN })}
       >
+        {/* todo refactor to a ButtonWithicon since sx props not working */}
         <IoMdAdd
           sx={{
             height: "iconSmall",
@@ -68,7 +70,7 @@ export function ContentSections({ control, name, register, errors }) {
         />
         Ajouter une section supplémentaire
       </Button>
-    </>
+    </div>
   );
 }