Signalements - Retouches UI (#3591)

## Linked issues

- Resolve #3183

----

- [ ] Tests E2E (Cypress)

frontend/cypress/e2e/vessel_sidebar/reporting.spec.ts

@@ -121,6 +121,29 @@ context('Vessel sidebar reporting tab', () => {
     cy.get('*[data-cy^="vessel-search-selected-vessel-close-title"]', { timeout: 10000 }).click()
   })
 
+  it('Reporting Should be showed for more years', () => {
+    // Given
+    cy.get('*[data-cy="vessel-search-input"]', { timeout: 10000 }).type('FRAIS avis')
+    cy.get('*[data-cy="vessel-search-item"]', { timeout: 10000 }).eq(0).click()
+    cy.wait(50)
+    cy.get('*[data-cy="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
+    cy.intercept('GET', '/bff/v1/vessels/reporting*').as('reporting')
+    cy.get('*[data-cy="vessel-menu-reporting"]').click({ timeout: 10000 })
+    cy.get('*[data-cy="vessel-reporting"]', { timeout: 10000 }).should('be.visible')
+    cy.wait('@reporting')
+    cy.wait(100)
+
+    // When
+    cy.get('*[data-cy="vessel-sidebar-reporting-tab-history-button"]').click()
+    cy.get('*[data-cy="vessel-sidebar-reporting-tab-history"]').should('exist')
+    cy.get('*[data-cy="vessel-sidebar-reporting-tab-archive-year"]').should('have.length', 6)
+    cy.clickButton('Afficher plus de signalements')
+
+    // Then
+    cy.wait('@reporting')
+    cy.get('*[data-cy="vessel-sidebar-reporting-tab-archive-year"]').should('have.length', 7)
+  })
+
   it('Reporting Should be deleted', () => {
     cy.intercept(
       'GET',

frontend/src/features/Reporting/components/ReportingList/index.tsx

@@ -1,8 +1,13 @@
 import { ErrorWall } from '@components/ErrorWall'
 import { SeafrontGroup } from '@constants/seafront'
 import { ReportingType } from '@features/Reporting/types'
+import { useForceUpdate } from '@hooks/useForceUpdate'
+import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
+import { useMainAppSelector } from '@hooks/useMainAppSelector'
+import { useTable } from '@hooks/useTable'
 import { DisplayedErrorKey } from '@libs/DisplayedError/constants'
 import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui'
+import { downloadAsCsv } from '@utils/downloadAsCsv'
 import dayjs from 'dayjs'
 import countries from 'i18n-iso-countries'
 import { useCallback, useMemo, useRef } from 'react'
@@ -14,17 +19,12 @@ import { REPORTING_LIST_TABLE_OPTIONS } from './constants'
 import { getReportingOrigin, getReportingTitle } from './utils'
 import { ALERTS_MENU_SEAFRONT_TO_SEAFRONTS } from '../../../../domain/entities/alerts/constants'
 import { showVessel } from '../../../../domain/use_cases/vessel/showVessel'
-import { useForceUpdate } from '../../../../hooks/useForceUpdate'
-import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
-import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
-import { useTable } from '../../../../hooks/useTable'
 import { CardTable } from '../../../../ui/card-table/CardTable'
 import { CardTableBody } from '../../../../ui/card-table/CardTableBody'
 import { CardTableFilters } from '../../../../ui/card-table/CardTableFilters'
 import { CardTableRow } from '../../../../ui/card-table/CardTableRow'
 import { EmptyCardTable } from '../../../../ui/card-table/EmptyCardTable'
 import { FilterTableInput } from '../../../../ui/card-table/FilterTableInput'
-import { downloadAsCsv } from '../../../../utils/downloadAsCsv'
 import { EditReporting } from '../../../SideWindow/Alert/AlertListAndReportingList/EditReporting'
 import { Flag } from '../../../VesselList/tableCells'
 import { setEditedReportingInSideWindow } from '../../slice'

frontend/src/features/Reporting/components/VesselReportings/Archived/index.tsx

@@ -1,7 +1,8 @@
+import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings'
 import { Header, Zone } from '@features/VesselSidebar/common_styles/common.style'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
-import { THEME } from '@mtes-mct/monitor-ui'
+import { Accent, THEME, Button } from '@mtes-mct/monitor-ui'
 import dayjs from 'dayjs'
 import styled from 'styled-components'
 
@@ -19,10 +20,11 @@ export function Archived() {
 
   const yearsToReportings = currentAndArchivedReportingsOfSelectedVessel?.archived
 
-  function seeMore() {
+  const seeMore = () => {
     const nextDate = dayjs(archivedReportingsFromDate).subtract(1, 'year').toDate()
 
     dispatch(setArchivedReportingsFromDate(nextDate))
+    dispatch(getVesselReportings(false))
   }
 
   return (
@@ -50,12 +52,9 @@ export function Archived() {
         </NoReporting>
       )}
       <SeeMoreBackground>
-        <SeeMore
-          /* eslint-disable-next-line react/jsx-no-bind */
-          onClick={seeMore}
-        >
+        <Button accent={Accent.SECONDARY} onClick={seeMore}>
           Afficher plus de signalements
-        </SeeMore>
+        </Button>
       </SeeMoreBackground>
     </Zone>
   )
@@ -82,16 +81,3 @@ const SeeMoreBackground = styled.div`
   text-align: center;
   width: 100%;
 `
-
-const SeeMore = styled.div`
-  border: 1px solid ${THEME.color.charcoal};
-  color: ${THEME.color.gunMetal};
-  padding: 5px 10px 5px 10px;
-  width: max-content;
-  font-size: 13px;
-  cursor: pointer;
-  margin-left: auto;
-  margin-right: auto;
-  user-select: none;
-  background: ${THEME.color.white};
-`

frontend/src/features/Reporting/components/VesselReportings/ReportingCard.tsx

@@ -85,15 +85,17 @@ export function ReportingCard({
       ) : (
         <Actions hasOccurrences={numberOfOccurrences > 1}>
           {numberOfOccurrences > 1 && <NumberOfAlerts>{numberOfOccurrences}</NumberOfAlerts>}
-          <IconButton
-            accent={Accent.TERTIARY}
-            color={THEME.color.charcoal}
-            data-cy={`edit-reporting-card-${reporting.id}`}
-            Icon={Icon.EditUnbordered}
-            iconSize={20}
-            onClick={() => dispatch(setEditedReporting(reporting))}
-            title="Editer"
-          />
+          {reporting.type !== ReportingType.ALERT && (
+            <IconButton
+              accent={Accent.TERTIARY}
+              color={THEME.color.charcoal}
+              data-cy={`edit-reporting-card-${reporting.id}`}
+              Icon={Icon.EditUnbordered}
+              iconSize={20}
+              onClick={() => dispatch(setEditedReporting(reporting))}
+              title="Editer"
+            />
+          )}
           <IconButton
             accent={Accent.TERTIARY}
             color={THEME.color.charcoal}

frontend/src/features/Reporting/useCases/addReporting.ts

@@ -25,7 +25,7 @@ export const addReporting =
           vesselFeatureId: Vessel.getVesselFeatureId(selectedVesselIdentity)
         })
       )
-      await dispatch(getVesselReportings(false))
+      await dispatch(getVesselReportings(true))
     } catch (error) {
       dispatch(
         displayOrLogError(

frontend/src/features/Reporting/useCases/archiveReporting.ts

@@ -26,7 +26,7 @@ export const archiveReporting =
         })
       )
 
-      await dispatch(getVesselReportings(false))
+      await dispatch(getVesselReportings(true))
     } catch (error) {
       dispatch(
         displayOrLogError(

frontend/src/features/Reporting/useCases/deleteReporting.ts

@@ -26,7 +26,7 @@ export const deleteReporting =
         })
       )
 
-      await dispatch(getVesselReportings(false))
+      await dispatch(getVesselReportings(true))
     } catch (error) {
       dispatch(
         displayOrLogError(

frontend/src/features/Reporting/useCases/getVesselReportings.ts

@@ -10,15 +10,14 @@ import {
   setCurrentAndArchivedReportingsOfSelectedVessel
 } from '../slice'
 
-export const getVesselReportings = (isFromUserAction: boolean) => async (dispatch, getState) => {
+export const getVesselReportings = (isLoaderShowed: boolean) => async (dispatch, getState) => {
   const { selectedVesselIdentity } = getState().vessel
   const { archivedReportingsFromDate, isLoadingReporting } = getState().reporting
-
   if (!selectedVesselIdentity || !archivedReportingsFromDate || isLoadingReporting) {
     return
   }
 
-  if (isFromUserAction) {
+  if (isLoaderShowed) {
     dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR))
     dispatch(loadReporting())
   }
@@ -40,8 +39,8 @@ export const getVesselReportings = (isFromUserAction: boolean) => async (dispatc
     dispatch(
       displayOrLogError(
         error as Error,
-        () => getVesselReportings(isFromUserAction),
-        isFromUserAction,
+        () => getVesselReportings(isLoaderShowed),
+        isLoaderShowed,
         DisplayedErrorKey.VESSEL_SIDEBAR_ERROR
       )
     )

frontend/src/features/Reporting/useCases/updateReporting.ts

@@ -57,7 +57,7 @@ export const updateReporting =
 
       // If the update is done from the Reporting tab of the vessel sidebar
       if (vesselIdentity) {
-        await dispatch(getVesselReportings(false))
+        await dispatch(getVesselReportings(true))
       }
     } catch (error) {
       dispatch(

frontend/src/features/commonStyles/Buttons.style.jsx

@@ -32,12 +32,6 @@ const Button = styled.button`
   height: 30px;
 `
 
-const BackofficeButton = styled.button`
-  font-size: 13px;
-  padding: 6px 12px;
-  margin: 15px ${props => props.isLast ? '20px' : '0'} 15px 10px;
-`
-
 export const PrimaryButton = styled(Button)`
   ${basePrimaryButton}
 `