fix: quality gate

src/components/Charts/Bar.tsx

-import React, { useState, useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
 import { ScaleBand, ScaleLinear } from 'd3-scale'
-import { DateTime } from 'luxon'
 import { detect } from 'detect-browser'
-
 import { FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'enum/timeStep.enum'
+import { DateTime } from 'luxon'
 import { Dataload } from 'models'
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import DateChartService from 'services/dateChart.service'
+import { AppStore } from 'store'
 import {
   setCurrentDatachartIndex,
   setSelectedDate,
@@ -192,10 +191,7 @@ const Bar = ({
           />
         </g>
       )}
-      {height > 0 &&
-      dataload.value &&
-      dataload.value >= 0 &&
-      isMultiMissingFluid ? (
+      {height > 0 && dataload.value >= 0 && isMultiMissingFluid ? (
         <g
           transform={`translate(${xScaleValue}, ${yScaleValue})`}
           fill="#00000"
@@ -286,38 +282,35 @@ const Bar = ({
         )
       )}
 
-      {showCompare &&
-        compareDataload &&
-        compareDataload.value &&
-        compareDataload.value >= 0 && (
-          <g transform={`translate(${xScaleValue}, ${yScaleCompareValue})`}>
-            <defs>
-              <linearGradient
-                id="gradient-compare"
-                className={compareBarClass}
-                x1="0"
-                x2="0"
-                y1="0"
-                y2="1"
-              >
-                <stop id="stop-compare-color-1" offset="0%" />
-                <stop id="stop-compare-color-2" offset="100%" />
-              </linearGradient>
-            </defs>
-            <path
-              d={topRoundedRect(
-                0,
-                0,
-                getBandWidth(),
-                height - yScaleCompareValue
-              )}
-              fill="url(#gradient-compare)"
+      {showCompare && compareDataload && compareDataload.value >= 0 && (
+        <g transform={`translate(${xScaleValue}, ${yScaleCompareValue})`}>
+          <defs>
+            <linearGradient
+              id="gradient-compare"
               className={compareBarClass}
-              onClick={handleClick}
-              onAnimationEnd={onCompareAnimationEnd}
-            />
-          </g>
-        )}
+              x1="0"
+              x2="0"
+              y1="0"
+              y2="1"
+            >
+              <stop id="stop-compare-color-1" offset="0%" />
+              <stop id="stop-compare-color-2" offset="100%" />
+            </linearGradient>
+          </defs>
+          <path
+            d={topRoundedRect(
+              0,
+              0,
+              getBandWidth(),
+              height - yScaleCompareValue
+            )}
+            fill="url(#gradient-compare)"
+            className={compareBarClass}
+            onClick={handleClick}
+            onAnimationEnd={onCompareAnimationEnd}
+          />
+        </g>
+      )}
     </g>
   )
 }

src/components/Hooks/userInstanceSettings.tsx → src/components/Hooks/useUserInstanceSettings.tsx

-/* eslint-disable react-hooks/rules-of-hooks */
-// TODO remove the disable and transform it to hooks
 import { useState, useEffect } from 'react'
 import get from 'lodash/get'
 import { useClient } from 'cozy-client'
 import { UserInstanceSettings, UserInstanceSettingsAttributes } from 'models'
 
-const userInstanceSettings = (): UserInstanceSettings => {
+const useUserInstanceSettings = (): UserInstanceSettings => {
   const client = useClient()
   const [settings, setSettings] = useState<UserInstanceSettingsAttributes>({
     public_name: '',
@@ -33,4 +31,4 @@ const userInstanceSettings = (): UserInstanceSettings => {
   }
 }
 
-export default userInstanceSettings
+export default useUserInstanceSettings

src/components/Onboarding/WelcomeModal.spec.tsx

@@ -23,7 +23,7 @@ jest.mock('cozy-client', () => {
     useClient: jest.fn(() => mockClient),
   }
 })
-jest.mock('components/Hooks/userInstanceSettings', () => {
+jest.mock('components/Hooks/useUserInstanceSettings', () => {
   return jest.fn(() => ({
     data: {
       // eslint-disable-next-line camelcase

src/components/Onboarding/WelcomeModal.tsx

+import { Button, Dialog, IconButton } from '@material-ui/core'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import PartnersConsentIcon from 'assets/icons/visu/onboarding/partners_consent.svg'
+import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import React, { useCallback } from 'react'
-import './welcomeModal.scss'
 import { useDispatch } from 'react-redux'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useClient } from 'cozy-client'
-import { Button, Dialog, IconButton } from '@material-ui/core'
-import userInstanceSettings from 'components/Hooks/userInstanceSettings'
 import EnvironmentService from 'services/environment.service'
 import MailService from 'services/mail.service'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import PartnersConsentIcon from 'assets/icons/visu/onboarding/partners_consent.svg'
 import { updateProfile } from 'store/profile/profile.actions'
+import './welcomeModal.scss'
+
 const welcomeTemplate = require('notifications/welcome.hbs')
 const mjml2html = require('mjml-browser')
 
@@ -22,7 +23,7 @@ const WelcomeModal = ({ open }: WelcomeModalProps) => {
   const { t } = useI18n()
   const client = useClient()
   const dispatch = useDispatch()
-  const { data: instanceSettings } = userInstanceSettings()
+  const { data: instanceSettings } = useUserInstanceSettings()
 
   const setWelcomeModalViewed = useCallback(async () => {
     const mailService = new MailService()