Merge branch 'feat/US827-custom-alert' into 'dev'

Feat/us827 custom alert

See merge request web-et-numerique/llle_project/backoffice-client!64

template.env → .env.template

@@ -2,8 +2,9 @@ NODE_TLS_REJECT_UNAUTHORIZED = '0'
 HTTPS=true
 SSL_CRT_FILE=cert.pem
 SSL_KEY_FILE=key.pem
-# Common 
-HOSTNAME=
+
+# Common settings
+HOSTNAME=localhost
 ADMIN_ROLE=
 DEBUG_MODE=
 MOCK_OAUTH2=
@@ -22,4 +23,7 @@ LOGOUT_URL=
 # Access to the database
 DATABASE_USER=
 DATABASE_PASSWORD=
-DATABASE_NAME=
+DATABASE_NAME=
\ No newline at end of file
+
+SGE_API_TOKEN=
+MEILI_MASTER_KEY=
\ No newline at end of file

.gitlab-ci.yml

-image: docker:git
-
-services:
-  - docker:dind
+default:
+  image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/node:14.19.3-alpine
+  services:
+    - name: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:20.10.9-dind
+      alias: docker
 
 variables:
-  DOCKER_DRIVER: overlay2
-  DOCKER_TLS_CERTDIR: ''
+  DEPENDENCY_PROXY: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/
 
 stages:
-  - build
   - quality
+  - build
 
 build-test:
   stage: build
@@ -40,13 +40,15 @@ build:
 sonarqube:
   stage: quality
   only:
-    - dev
     - merge_requests
-  when: manual
-  image: registry.forge.grandlyon.com/apoyen2/sonnar-scanner-gl:master
-  before_script:
-    - export NODE_PATH=$NODE_PATH:`npm root -g`
-    - npm install -g typescript
+  image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/sonarsource/sonar-scanner-cli:4
+  variables:
+    SONAR_USER_HOME: '${CI_PROJECT_DIR}/.sonar' # Defines the location of the analysis task cache
+    GIT_DEPTH: '0' # T
+  cache:
+    key: '${CI_JOB_NAME}'
+    paths:
+      - .sonar/cache
   script:
     - >
       sonar-scanner

.vscode/settings.json

@@ -24,5 +24,9 @@
     "source.fixAll.eslint": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "peacock.color": "#2aa63d"
+  "peacock.color": "#2aa63d",
+  "sonarlint.connectedMode.project": {
+    "connectionId": "sonarqube-forge-grandlyon",
+    "projectKey": "web-et-numerique-llle-project-backoffice-client"
+  }
 }

README.md

@@ -16,11 +16,12 @@ You can then clone the app repository and install dependencies:
 ```sh
 $ git clone https://forge.grandlyon.com/web-et-numerique/llle_project/backoffice-client.git
 $ cd backoffice-client
+yarn
 ```
 
 ## Local usage
 
-Before launching the application, ensure you've properly filled the .env file according to the template. If needed please refer to a team member.
+Before launching the application, ensure you've properly filled the **.env** file according to the .env.template. If needed please refer to a team member.
 
 In order to launch the projet in local with the backend working launch the following command
 

docker-compose.local.yml

@@ -52,7 +52,8 @@ services:
       PMA_HOST: database-agent
 
   backend:
-    image: registry.forge.grandlyon.com/web-et-numerique/llle_project/backoffice-server:test-US821
+    # --When using yarn local-up build backoffice service image with: docker build . -t backoffice-server
+    image: backoffice-server
     depends_on:
       database-agent:
         condition: service_healthy

src/axios.config.ts

+import { AxiosRequestConfig } from 'axios'
+
+export const getAxiosXSRFHeader = (token: string): AxiosRequestConfig => ({
+  headers: {
+    'XSRF-TOKEN': token,
+  },
+})

src/components/Consents/Consents.tsx

@@ -25,6 +25,7 @@ import DowloadModal from './DowloadModal'
 import { ConsentService } from '../../services/consent.service'
 import { UserContextProps, UserContext } from '../../hooks/userContext'
 import { IConsent } from '../../models/consent.model'
+import { getAxiosXSRFHeader } from '../../axios.config'
 
 const Consents: React.FC = () => {
   const [gridApi, setGridApi] = useState<GridApi | null>(null)
@@ -87,12 +88,14 @@ const Consents: React.FC = () => {
       headerName: 'Nom',
       initialWidth: 200,
       filter: true,
+      cellStyle: { 'text-transform': 'uppercase' },
     },
     {
       field: 'firstname',
       headerName: 'Prénom',
       initialWidth: 200,
       filter: true,
+      cellStyle: { 'text-transform': 'capitalize' },
     },
   ])
   const handleChangePage = useCallback(
@@ -131,13 +134,13 @@ const Consents: React.FC = () => {
         if (newSearch) {
           consentsData = await consentService.searchConsent(
             newSearch,
-            user.xsrftoken
+            getAxiosXSRFHeader(user.xsrftoken)
           )
         } else {
           const consentPagination = await consentService.getConsents(
             rowsPerPage,
             page,
-            user.xsrftoken
+            getAxiosXSRFHeader(user.xsrftoken)
           )
           consentsData = consentPagination && consentPagination.rows
         }
@@ -235,7 +238,7 @@ const Consents: React.FC = () => {
         const consentsPaginationData = await consentService.getConsents(
           rowsPerPage,
           page,
-          user.xsrftoken
+          getAxiosXSRFHeader(user.xsrftoken)
         )
         if (consentsPaginationData) {
           setConsents(consentsPaginationData.rows)
@@ -257,12 +260,12 @@ const Consents: React.FC = () => {
       <div className={styles.content + ' content'}>
         <div className={styles.searchField}>
           <div className={styles.inputGroup}>
-            <label htmlFor="search">N° PDL / Nom: </label>
+            <label htmlFor="search">Recherche</label>
             <input
               value={search}
               name="search"
               type="text"
-              placeholder="N° PDL / Nom"
+              placeholder="N°PDL, Nom, Prénom..."
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 handleSearchChange(e.target.value)
               }

src/components/Consents/consents.module.scss

@@ -7,12 +7,7 @@
   height: $small-nav-height !important;
 }
 .content {
-  padding-top: $small-nav-height !important;
-  margin-top: 1rem !important;
-  background: #121212;
-  min-height: 100vh;
   background: $dark-bg;
-  min-height: 100vh;
 }
 .searchField {
   max-width: 750px;

src/components/DateSelector/dateSelector.scss

@@ -8,7 +8,7 @@
   height: 3rem;
   margin: auto;
   max-width: 250px;
-  @media screen and(min-width: $width-desktop) {
+  @media screen and (min-width: $width-desktop) {
     position: relative;
     left: -2rem;
   }
@@ -16,10 +16,8 @@
     @include text-large();
     color: white;
     font-weight: 600;
-    margin: 0 0.4rem;
     min-width: 150px;
     text-align: center;
-    margin: auto;
   }
   .arrow {
     cursor: pointer;

src/components/Editing/CustomEditor.tsx

-import React from 'react'
 import { stateToHTML } from 'draft-js-export-html'
-import { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Editor, EditorState } from 'react-draft-wysiwyg'
-import CustomLink from './CustomLink'
 import './customEditor.scss'
+import CustomLink from './CustomLink'
 
 interface CustomEditorProps {
   baseState: EditorState

src/components/Editing/CustomLink.tsx

-import React from 'react'
-import { EditorState, Modifier, ContentState } from 'draft-js'
+import { ContentState, EditorState, Modifier } from 'draft-js'
 import htmlToDraft from 'html-to-draftjs'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
 interface EcolyoLinkProps {
   onChange?: (editorState: EditorState) => void

src/components/Editing/Editing.tsx

@@ -19,6 +19,7 @@ import MonthlyNews from '../MonthlyNews/MonthlyNews'
 import Loader from '../Loader/Loader'
 import Modal from '../Modal/Modal'
 import './editing.scss'
+import { getAxiosXSRFHeader } from '../../axios.config'
 
 export type ContentItems =
   | 'monthlyInfo'
@@ -58,7 +59,11 @@ const Editing: React.FC = () => {
 
   const handleSaveSubject = async (): Promise<void> => {
     if (user) {
-      await newsletterService.saveMailSubject(date, subject, user.xsrftoken)
+      await newsletterService.saveMailSubject(
+        date,
+        subject,
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
       setIsTouched(false)
     }
   }
@@ -69,7 +74,7 @@ const Editing: React.FC = () => {
         date,
         info,
         imageURL,
-        user.xsrftoken
+        getAxiosXSRFHeader(user.xsrftoken)
       )
       setIsTouched(false)
     }
@@ -81,14 +86,19 @@ const Editing: React.FC = () => {
         date,
         title,
         content,
-        user.xsrftoken
+        getAxiosXSRFHeader(user.xsrftoken)
       )
       setIsTouched(false)
     }
   }
   const handleSavePoll = async (): Promise<void> => {
     if (user) {
-      await newsletterService.savePoll(date, question, link, user.xsrftoken)
+      await newsletterService.savePoll(
+        date,
+        question,
+        link,
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
       setIsTouched(false)
     }
   }
@@ -98,25 +108,37 @@ const Editing: React.FC = () => {
 
   const handleDeleteMailSubject = async (): Promise<void> => {
     if (user) {
-      await newsletterService.deleteMailSubject(date, user.xsrftoken)
+      await newsletterService.deleteMailSubject(
+        date,
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
       setRefreshData(true)
     }
   }
   const handleDeleteMonthlyInfo = async (): Promise<void> => {
     if (user) {
-      await newsletterService.deleteMonthlyInfo(date, user.xsrftoken)
+      await newsletterService.deleteMonthlyInfo(
+        date,
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
       setRefreshData(true)
     }
   }
   const handleDeleteMonthlyNews = async (): Promise<void> => {
     if (user) {
-      await newsletterService.deleteMonthlyNews(date, user.xsrftoken)
+      await newsletterService.deleteMonthlyNews(
+        date,
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
       setRefreshData(true)
     }
   }
   const handleDeletePoll = async (): Promise<void> => {
     if (user) {
-      await newsletterService.deletePoll(date, user.xsrftoken)
+      await newsletterService.deletePoll(
+        date,
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
       setRefreshData(true)
     }
   }
@@ -213,14 +235,23 @@ const Editing: React.FC = () => {
     async function getCurrentMonthlyNews() {
       if (user) {
         const mailSubject: IMailSubject | null =
-          await newsletterService.getSingleMailSubject(date, user.xsrftoken)
+          await newsletterService.getSingleMailSubject(
+            date,
+            getAxiosXSRFHeader(user.xsrftoken)
+          )
         const montlhyInfo: IMonthlyInfo | null =
-          await newsletterService.getSingleMonthlyInfo(date, user.xsrftoken)
+          await newsletterService.getSingleMonthlyInfo(
+            date,
+            getAxiosXSRFHeader(user.xsrftoken)
+          )
         const montlhyNews: IMonthlyNews | null =
-          await newsletterService.getSingleMonthlyNews(date, user.xsrftoken)
+          await newsletterService.getSingleMonthlyNews(
+            date,
+            getAxiosXSRFHeader(user.xsrftoken)
+          )
         const poll: IPoll | null = await newsletterService.getSinglePoll(
           date,
-          user.xsrftoken
+          getAxiosXSRFHeader(user.xsrftoken)
         )
         if (mailSubject) {
           setSubject(mailSubject.subject)

src/components/Editing/editing.scss

@@ -3,22 +3,18 @@
 @import '../../styles/config/breakpoints';
 
 .header {
-  position: fixed;
-  z-index: 1500;
+  padding: 1.5rem;
   width: inherit;
   background: radial-gradient(
     74.83% 76.97% at 50% 13.64%,
     #343641 0%,
     #1b1c22 100%
   );
-  height: $navigator-height;
   box-shadow: 0px 5px 5px rgb(0 0 0 / 0%), 0px 3px 14px rgb(0 0 0 / 0%),
     0px 8px 10px rgb(0 0 0 / 15%);
-  padding: 1.7rem;
 }
 .content {
   padding: 1rem;
-  margin-top: $navigator-height;
 }
 .subtitle {
   margin: 1rem 0;
@@ -28,7 +24,7 @@ hr {
 }
 .buttons {
   display: flex;
-  @media screen and(max-width: $width-tablet) {
+  @media screen and (max-width: $width-tablet) {
     flex-direction: column;
     button {
       width: 100%;

src/components/ImagePicker/ImagePicker.tsx

@@ -4,6 +4,7 @@ import Modal from '../Modal/Modal'
 import Pagination from '@material-ui/lab/Pagination'
 import SingleImage from './SingleImage'
 import { UserContext, UserContextProps } from '../../hooks/userContext'
+import { getAxiosXSRFHeader } from '../../axios.config'
 
 interface ImagePickerProps {
   imageURL: string
@@ -53,7 +54,7 @@ const ImagePicker: React.FC<ImagePickerProps> = ({
       if (user) {
         const newsletterService = new NewsletterService()
         const images = await newsletterService.getEcogestureImages(
-          user.xsrftoken
+          getAxiosXSRFHeader(user.xsrftoken)
         )
         //Split array depending on page numbers
         setpageCount(Math.ceil(images.length / imagePerPage))

src/components/ImagePicker/SingleImage.tsx

@@ -11,8 +11,8 @@ const SingleImage: React.FC<SingleImageProps> = ({
   selectedImage,
   setSelectedImageURL,
 }: SingleImageProps) => {
-  const selectImage = (imageURL: string) => {
-    setSelectedImageURL(imageURL)
+  const selectImage = (targetImage: string) => {
+    setSelectedImageURL(targetImage)
   }
   return (
     <img

src/components/ImagePicker/imagePicker.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  @media screen and(max-width: $width-tablet) {
+  @media screen and (max-width: $width-tablet) {
     .ecogesture-image {
       max-width: 80px;
       max-height: 80px;

src/components/Layout/Layout.tsx

@@ -14,9 +14,7 @@ const Layout: React.FC<LayoutProps> = ({ children }: LayoutProps) => {
       const test: boolean =
         /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
           navigator.userAgent
-        )
-          ? true
-          : window.innerWidth < 768
+        ) || window.innerWidth < 768
           ? true
           : false
       setisMobile(test)

src/components/Layout/layout.module.scss

@@ -14,7 +14,7 @@
   height: 100vh;
   z-index: 1501;
 
-  @media screen and(max-width: $width-tablet) {
+  @media screen and (max-width: $width-tablet) {
     width: 0;
     display: none;
   }
@@ -35,7 +35,7 @@
   box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
     0px 8px 10px rgb(0 0 0 / 14%);
   background: $dark-bg;
-  @media screen and(max-width: $width-tablet) {
+  @media screen and (max-width: $width-tablet) {
     margin-left: 0;
     padding-bottom: $navbar-height;
   }

src/components/MailSuject/mailSubject.scss

 .mailSubject {
-  margin: 2rem 0;
   .title {
     margin: 1rem 0;
   }

src/components/Menu/Menu.tsx

@@ -5,6 +5,7 @@ import './menu.scss'
 import { NavLink } from 'react-router-dom'
 import { UserContext } from '../../hooks/userContext'
 import { useAuth } from '../../hooks/useAuth'
+import { Route } from '../../models/route.model'
 
 const Menu: React.FC = () => {
   const { user } = useContext(UserContext)
@@ -15,7 +16,7 @@ const Menu: React.FC = () => {
         <img src={logo} alt="Ecolyo logo" className="logo" />
       </div>
       <div className="menu-list">
-        {routes.map((route: any, index: number) => {
+        {routes.map((route: Route, index: number) => {
           return (
             <NavLink key={index} to={route.path} activeClassName="active">
               {route.label}