feat(ui): use mui components and upgrade to v5

Related to #000

What does this MR do and why?

"Material UI v4 doesn't receive active development since September 2021." Replace Mui to v5

Use components for all pages

Screenshots or screen recordings

These are strongly recommended to assist reviewers and reduce the time to merge your change.

How to set up and validate locally (or on alpha)

List all steps to set up and validate the changes on local environment.

MR acceptance checklist

To be completed by the chosen reviewer.

Quality -

• For the code that this change impacts, I believe that the automated tests validate functionality that is highly important to users. If the existing automated tests do not cover this functionality, I have added the necessary additional tests or I have added an issue to describe the automation testing gap and linked it to this MR.
• I have made sure that the sonar quality coverage is up to standards.
• I have considered the impact of this change on the front-end, back-end, and database portions of the system where appropriate and applied.
• I have tested this MR in all supported browsers or determined that this testing is not needed.
• I have confirmed that this change is backwards compatible across updates (migrate up needs a migrate down), or I have decided that this does not apply.

Performance, reliability and availability

• I am confident that this MR does not harm performance, or I have asked a reviewer to help assess the performance impact.
• I have considered the scalability risk based on future predicted growth.

Documentation

• The MR is named after the desired squash commit to feed the changelog linked to the current milestone.
• I have added/updated documentation (also updated if the changes feature a deprecation) or I have decided that documentation changes are not needed for this MR.

Security

• I have confirmed that if this MR does not contains any sensitive informations hidden in the changes.

Deployment

• When featured on a self-data project release, I have made sure my app version in the manifest and package.json is incremented and any relative changes to the permissions are clearly written and transmitted to Cozy.

src/components/Popups/Popups.tsx

+import {
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  NativeSelect,
+  Switch,
+} from '@mui/material'
 import { DateTime } from 'luxon'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
@@ -238,82 +246,83 @@ const Popups: React.FC = () => {
               <h2 className="title">Affichage des pop-up de panne</h2>
               <div className={customPopup.popupEnabled ? 'disabled' : ''}>
                 <p>Services concernés</p>
-                <div className="switch_div">
-                  <span>Panne Enedis</span>
-                  <input
-                    type="checkbox"
-                    id="switch_enedis"
-                    disabled={customPopup.popupEnabled}
-                    checked={partnersInfo.enedis_failure}
-                    onChange={event => {
-                      handleCheckboxChange(
-                        event.currentTarget.checked,
-                        CheckboxType.ENEDIS
-                      )
-                    }}
+                <FormGroup style={{ flexDirection: 'row' }}>
+                  <FormControlLabel
+                    label="Panne Enedis"
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={customPopup.popupEnabled}
+                        checked={partnersInfo.enedis_failure}
+                        onChange={event => {
+                          handleCheckboxChange(
+                            event.target.checked,
+                            CheckboxType.ENEDIS
+                          )
+                        }}
+                      />
+                    }
                   />
-                  <label htmlFor="switch_enedis" />
-                </div>
-                <div className="switch_div">
-                  <span>Panne EGL</span>
-                  <input
-                    type="checkbox"
-                    id="switch_egl"
-                    disabled={customPopup.popupEnabled}
-                    checked={partnersInfo.egl_failure}
-                    onChange={event => {
-                      handleCheckboxChange(
-                        event.currentTarget.checked,
-                        CheckboxType.EGL
-                      )
-                    }}
+                  <FormControlLabel
+                    label="Panne EGL"
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={customPopup.popupEnabled}
+                        checked={partnersInfo.egl_failure}
+                        onChange={event => {
+                          handleCheckboxChange(
+                            event.target.checked,
+                            CheckboxType.EGL
+                          )
+                        }}
+                      />
+                    }
                   />
-                  <label htmlFor="switch_egl" />
-                </div>
-                <div className="switch_div">
-                  <span>Panne GRDF</span>
-                  <input
-                    type="checkbox"
-                    id="switch_grdf"
-                    disabled={customPopup.popupEnabled}
-                    checked={partnersInfo.grdf_failure}
-                    onChange={event => {
-                      handleCheckboxChange(
-                        event.currentTarget.checked,
-                        CheckboxType.GRDF
-                      )
-                    }}
+                  <FormControlLabel
+                    label="Panne GRDF"
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={customPopup.popupEnabled}
+                        checked={partnersInfo.grdf_failure}
+                        onChange={event => {
+                          handleCheckboxChange(
+                            event.target.checked,
+                            CheckboxType.GRDF
+                          )
+                        }}
+                      />
+                    }
                   />
-                  <label htmlFor="switch_grdf" />
-                </div>
+                </FormGroup>
               </div>
             </div>
 
             <div className="customPopup">
               <h2 className="title">Affichage de pop-up personnalisée</h2>
               <div className={isPartnerNotificationOn() ? 'disabled' : ''}>
-                <div className="currentPopup">
-                  <div className="switch_div">
-                    <span>Pop-up active</span>
-                    <input
-                      type="checkbox"
-                      id="switch_popup"
-                      disabled={isPartnerNotificationOn()}
-                      checked={customPopup.popupEnabled}
-                      onChange={event => {
-                        handleCheckboxChange(
-                          event.currentTarget.checked,
-                          CheckboxType.CUSTOM
-                        )
-                      }}
-                    />
-                    <label htmlFor="switch_popup" />
-                  </div>
-
+                <FormGroup style={{ flexDirection: 'row' }}>
+                  <FormControlLabel
+                    label="Pop-up active"
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={isPartnerNotificationOn()}
+                        checked={customPopup.popupEnabled}
+                        onChange={event => {
+                          handleCheckboxChange(
+                            event.target.checked,
+                            CheckboxType.CUSTOM
+                          )
+                        }}
+                      />
+                    }
+                  />
                   {customPopup.popupEnabled &&
                     previousEndDate &&
                     getRemainingDuration(previousEndDate)}
-                </div>
+                </FormGroup>
 
                 <div className="popupTitle">
                   <label htmlFor="title">Titre</label>
@@ -345,7 +354,26 @@ const Popups: React.FC = () => {
                 <div className="popupEndDate">
                   <label htmlFor="title">Nouvelle Durée</label>
                   <div className="durationInput">
-                    <select
+                    <FormControl>
+                      <NativeSelect
+                        defaultValue={30}
+                        inputProps={{
+                          name: 'age',
+                          id: 'uncontrolled-native',
+                        }}
+                      >
+                        {OPTIONS.map(option => (
+                          <option
+                            key={option.value}
+                            value={option.value}
+                            selected={popupDuration.type === option.value}
+                          >
+                            {option.label}
+                          </option>
+                        ))}
+                      </NativeSelect>
+                    </FormControl>
+                    {/* <select
                       value={popupDuration.type}
                       onChange={event => handleSelectChange(event)}
                     >
@@ -358,7 +386,7 @@ const Popups: React.FC = () => {
                           {option.label}
                         </option>
                       ))}
-                    </select>
+                    </select> */}
                     {popupDuration.type !== 'infinite' && (
                       <input
                         type="number"
@@ -378,17 +406,16 @@ const Popups: React.FC = () => {
             </div>
 
             <div className="buttons">
-              <button className="btnCancel" onClick={handleCancel}>
+              <Button variant="outlined" onClick={handleCancel}>
                 Annuler
-              </button>
-              <button
-                className="btnValid"
-                onClick={handleSave}
+              </Button>
+              <Button
+                variant="contained"
                 disabled={!isPageValid()}
-                title="Un seul type de popup peut être activé"
+                onClick={handleSave}
               >
                 Sauvegarder
-              </button>
+              </Button>
             </div>
           </>
         )}