feat(#291): add popover helper in tracker form

src/components/Popover/Popover.tsx

@@ -0,0 +1,16 @@
+import { Popover as MuiPopover, PopoverProps, Typography } from '@mui/material';
+import { FC } from 'react';
+
+interface Props extends PopoverProps {
+  text: string;
+}
+
+const Popover: FC<Props> = ({ text, ...popoverProps }) => {
+  return (
+    <MuiPopover {...popoverProps}>
+      <Typography sx={{ p: 2 }}>{text}</Typography>
+    </MuiPopover>
+  );
+};
+
+export default Popover;

src/components/forms/DefaultCompletionsForm/DefaultCompletionsForm.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteIcon from '@mui/icons-material/Delete';
+import HelpIcon from '@mui/icons-material/Help';
 import {
   Box,
   Button,
@@ -15,7 +16,7 @@ import {
   Typography,
   useTheme
 } from '@mui/material';
-import { FC, useRef } from 'react';
+import { FC, useRef, useState } from 'react';
 import {
   Control,
   Controller,
@@ -30,6 +31,7 @@ import { useAutoAnimate } from '../../../hooks/useAutoAnimate';
 import Completion from '../../../models/Completion';
 import ThemeMode from '../../../models/ThemeMode';
 import { selectThemeMode } from '../../../store/theme/theme.selectors';
+import Popover from '../../Popover/Popover';
 import { FormValues } from '../TrackerForm/types';
 import CompletionQuantityTextField from '../completions/CompletionQuantityTextField';
 import CompletionUnitSelect from '../completions/CompletionUnitSelect';
@@ -72,6 +74,17 @@ const DefaultCompletionsForm: FC<Props> = ({
     mb: 1
   };
 
+  // Popover management
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? 'popover-' + name : undefined;
+
   return (
     <Box ref={animateRef}>
       {fields.map((field, index) => (
@@ -171,23 +184,36 @@ const DefaultCompletionsForm: FC<Props> = ({
         </FieldsetGrid>
       ))}
 
-      <Tooltip
-        title={
-          requiredCompletions.length === defaultCompletions.length
-            ? 'Tous les objectifs ont déjà une réalisation par défaut.'
-            : ''
-        }>
-        <span>
-          <Button
-            disabled={requiredCompletions.length === defaultCompletions.length}
-            onClick={() => append({})}
-            startIcon={<AddCircleOutlineIcon />}
-            sx={{ mb: 2 }}
-            variant="contained">
-            Réalisation par défaut
-          </Button>
-        </span>
-      </Tooltip>
+      <Box mb={2} display="flex" justifyContent="center" alignItems="center">
+        <Tooltip
+          title={
+            requiredCompletions.length === defaultCompletions.length
+              ? 'Tous les objectifs ont déjà une réalisation par défaut.'
+              : ''
+          }>
+          <span>
+            <Button
+              disabled={requiredCompletions.length === defaultCompletions.length}
+              onClick={() => append({})}
+              startIcon={<AddCircleOutlineIcon />}
+              variant="contained">
+              Réalisation par défaut
+            </Button>
+          </span>
+        </Tooltip>
+        <IconButton color="primary" onClick={handleClick}>
+          <HelpIcon />
+        </IconButton>
+        <Popover
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          text={
+            "Les réalisations par défaut définissent, lors de la validation du tracker, quelle portion de l'objectif vous réalisez. Si vous n'en spécifiez aucune, celles-ci seront égales aux objectifs."
+          }
+        />
+      </Box>
     </Box>
   );
 };

src/components/forms/HelperAdornment/HelperAdornment.tsx

@@ -0,0 +1,47 @@
+import HelpIcon from '@mui/icons-material/Help';
+import { IconButton, InputAdornment, InputAdornmentProps } from '@mui/material';
+import { FC, useState } from 'react';
+
+import Popover from '../../Popover/Popover';
+
+interface Props extends InputAdornmentProps {
+  name: string;
+  text: string;
+}
+
+const HelperAdornment: FC<Props> = ({ name, text, ...inputAdormnentProps }) => {
+  // Popover management
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? 'popover-' + name : undefined;
+
+  return (
+    <>
+      <InputAdornment {...inputAdormnentProps}>
+        <IconButton edge="end" onClick={handleClick} color="primary">
+          <HelpIcon />
+        </IconButton>
+      </InputAdornment>
+      <Popover
+        sx={{ whiteSpace: 'pre-line' }}
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        text={text}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: inputAdormnentProps.position === 'end' ? 'left' : 'right'
+        }}
+      />
+    </>
+  );
+};
+
+export default HelperAdornment;

src/components/forms/RequiredCompletionsForm/RequiredCompletionsForm.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Button, Grid, GridProps, IconButton, Typography, useTheme } from '@mui/material';
-import { FC, useRef } from 'react';
+import HelpIcon from '@mui/icons-material/Help';
+import { Box, Button, Grid, GridProps, IconButton, Typography, useTheme } from '@mui/material';
+import { FC, useRef, useState } from 'react';
 import {
   Control,
   Controller,
@@ -17,6 +18,7 @@ import { useAutoAnimate } from '../../../hooks/useAutoAnimate';
 import Completion from '../../../models/Completion';
 import ThemeMode from '../../../models/ThemeMode';
 import { selectThemeMode } from '../../../store/theme/theme.selectors';
+import Popover from '../../Popover/Popover';
 import { FormValues } from '../TrackerForm/types';
 import CompletionQuantityTextField from '../completions/CompletionQuantityTextField';
 import CompletionUnitTextField from '../completions/CompletionUnitTextField';
@@ -68,6 +70,17 @@ const RequiredCompletionsForm: FC<Props> = ({
     return nbCompletions.length < 2;
   };
 
+  // Popover management
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? 'popover-' + name : undefined;
+
   return (
     <div ref={animateRef}>
       {fields.map((field, index) => (
@@ -162,13 +175,23 @@ const RequiredCompletionsForm: FC<Props> = ({
           </Grid>
         </FieldsetGrid>
       ))}
-      <Button
-        onClick={() => append({})}
-        startIcon={<AddCircleOutlineIcon />}
-        sx={{ mb: 2 }}
-        variant="contained">
-        Objectif
-      </Button>
+      <Box mb={2} display="flex" justifyContent="center" alignItems="center">
+        <Button onClick={() => append({})} startIcon={<AddCircleOutlineIcon />} variant="contained">
+          Objectif
+        </Button>
+        <IconButton color="primary" onClick={handleClick}>
+          <HelpIcon />
+        </IconButton>
+        <Popover
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          text={
+            "Les objectifs définissent ce que vous devez accomplir pour valider le tracker. Ils se component d'une quantité et d'une unité."
+          }
+        />
+      </Box>
     </div>
   );
 };

src/components/forms/TrackerForm/TrackerForm.tsx

@@ -19,6 +19,7 @@ import Completion from '../../../models/Completion';
 import Tracker from '../../../models/Tracker';
 import TrackerStatus from '../../../models/TrackerStatus';
 import DefaultCompletionsForm from '../DefaultCompletionsForm/DefaultCompletionsForm';
+import HelperAdornment from '../HelperAdornment/HelperAdornment';
 import NumberTextField from '../NumberTextField/NumberTextField';
 import RequiredCompletionsForm from '../RequiredCompletionsForm/RequiredCompletionsForm';
 import { FormValues } from './types';
@@ -181,6 +182,17 @@ const TrackerForm: FC<Props> = ({ initialValues, onSubmit }) => {
               onChange={onChange}
               sx={{ mb: 2 }}
               value={value}
+              InputProps={{
+                endAdornment: (
+                  <HelperAdornment
+                    name={'duration'}
+                    text={
+                      "Une fois la durée écoulée, le tracker sera automatiquement archivé, sans vous que vous n'ayez à le faire manuellement."
+                    }
+                    position={'end'}
+                  />
+                )
+              }}
             />
           );
         }}
@@ -211,6 +223,18 @@ const TrackerForm: FC<Props> = ({ initialValues, onSubmit }) => {
             <FormControl fullWidth sx={{ mb: 2 }}>
               <InputLabel id="frequency">Fréquence de répétition (en jours)</InputLabel>
               <Select
+                IconComponent={() => null}
+                endAdornment={
+                  <HelperAdornment
+                    name={'frequency'}
+                    text={
+                      'La fréquence définit la durée avant laquelle un tracker validé est de nouveau marqué comme "à faire". ' +
+                      '\n\nAttention : choisir la fréquence "7 (Hebdomadaire)" et valider le tracker le vendredi 1er juin par exemple ' +
+                      'fera que le tracker sera de nouveau à faire seulement à partir du vendredi 8 juin.'
+                    }
+                    position={'end'}
+                  />
+                }
                 onChange={onChange}
                 value={value}
                 label={'Fréquence de répétition (en jours)'}>