[Mission] fix buttons and message of update date in footer

MTES-MCT · Feb 23, 2024 · 0f8aa16 · 0f8aa16
1 parent 2b30577
commit 0f8aa16
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 84 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "6.0.1",
-    "@mtes-mct/monitor-ui": "11.8.0",
+    "@mtes-mct/monitor-ui": "11.9.1",
     "@reduxjs/toolkit": "1.9.6",
     "@sentry/browser": "7.55.2",
     "@sentry/react": "7.52.1",

diff --git a/frontend/src/features/Mission/components/MissionForm/Loader.tsx b/frontend/src/features/Mission/components/MissionForm/Loader.tsx
@@ -9,7 +9,7 @@ import { useCallback } from 'react'
 import styled from 'styled-components'
 import { LoadingSpinnerWall } from 'ui/LoadingSpinnerWall'
 
-import { BackToListIcon, Body, CloseButton, Footer, Header, HeaderTitle, Wrapper } from '.'
+import { BackToListIcon, Body, Footer, Header, HeaderTitle, Wrapper } from '.'
 import { AutoSaveTag } from './shared/AutoSaveTag'
 
 export function Loader() {
@@ -61,9 +61,9 @@ export function Loader() {
         </div>
         <div>
           <AutoSaveTag />
-          <CloseButton accent={Accent.PRIMARY} disabled onClick={goToMissionList}>
+          <Button accent={Accent.PRIMARY} disabled onClick={goToMissionList}>
             Fermer
-          </CloseButton>
+          </Button>
         </div>
       </Footer>
     </Wrapper>

diff --git a/frontend/src/features/Mission/components/MissionForm/index.tsx b/frontend/src/features/Mission/components/MissionForm/index.tsx
@@ -8,7 +8,15 @@ import { openSideWindowPath } from '@features/SideWindow/useCases/openSideWindow
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import { FrontendError } from '@libs/FrontendError'
-import { Accent, Button, customDayjs, Icon, logSoftError, NotificationEvent } from '@mtes-mct/monitor-ui'
+import {
+  Accent,
+  Button,
+  customDayjs,
+  humanizePastDate,
+  Icon,
+  logSoftError,
+  NotificationEvent
+} from '@mtes-mct/monitor-ui'
 import { assertNotNullish } from '@utils/assertNotNullish'
 import { Mission } from 'domain/entities/mission/types'
 import { getMissionStatus } from 'domain/entities/mission/utils'
@@ -17,7 +25,6 @@ import { isEqual } from 'lodash'
 import { omit } from 'lodash/fp'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
-import * as timeago from 'timeago.js'
 import { FrontendErrorBoundary } from 'ui/FrontendErrorBoundary'
 import { NoRsuiteOverrideWrapper } from 'ui/NoRsuiteOverrideWrapper'
 import { useDebouncedCallback } from 'use-debounce'
@@ -122,6 +129,11 @@ export function MissionForm() {
 
   const isMissionFormValid = areMissionFormsValuesValid(mainFormValues, actionsFormValues)
 
+  const formattedUpdateDate = useMemo(
+    () => mainFormValues.updatedAtUtc && humanizePastDate(mainFormValues.updatedAtUtc),
+    [mainFormValues.updatedAtUtc]
+  )
+
   const updateReduxSliceDraft = useDebouncedCallback(() => {
     dispatch(
       missionFormActions.setDraft({
@@ -603,55 +615,37 @@ export function MissionForm() {
           </FrontendErrorBoundary>
         </Body>
         <Footer>
-          <div>
-            {!!missionIdFromPath && (
-              <Button
-                accent={Accent.SECONDARY}
-                disabled={isSaving || mainFormValues.missionSource !== Mission.MissionSource.MONITORFISH}
-                Icon={Icon.Delete}
-                onClick={toggleDeletionConfirmationDialog}
-              >
-                Supprimer la mission
-              </Button>
+          {!!missionIdFromPath && (
+            <DeleteButton
+              accent={Accent.SECONDARY}
+              disabled={isSaving || mainFormValues.missionSource !== Mission.MissionSource.MONITORFISH}
+              Icon={Icon.Delete}
+              onClick={toggleDeletionConfirmationDialog}
+            >
+              Supprimer la mission
+            </DeleteButton>
+          )}
+
+          <Separator />
+
+          <MissionInfos>
+            {mainFormValues.createdAtUtc && mainFormValues.missionSource && (
+              <>
+                Mission créée par le {Mission.MissionSourceLabel[mainFormValues.missionSource]} le{' '}
+                {customDayjs(mainFormValues.createdAtUtc).utc().format('DD/MM/YYYY à HH[h]mm')}.{' '}
+              </>
             )}
-          </div>
-          <div>
-            <MissionInfos>
-              {mainFormValues.createdAtUtc && mainFormValues.missionSource && (
-                <>
-                  Mission créée par le {Mission.MissionSourceLabel[mainFormValues.missionSource]} le{' '}
-                  {customDayjs(mainFormValues.createdAtUtc).utc().format('DD/MM/YYYY à HH:mm')}.{' '}
-                </>
-              )}
-              {!mainFormValues.createdAtUtc && <>Mission non enregistrée. </>}
-              {mainFormValues.updatedAtUtc && (
-                <>Dernière modification enregistrée {timeago.format(mainFormValues.updatedAtUtc, 'fr')}.</>
-              )}
-            </MissionInfos>
-            <AutoSaveTag isAutoSaveEnabled={isAutoSaveEnabled} />
-            {!isAutoSaveEnabled && (
-              <Button
-                accent={Accent.PRIMARY}
-                disabled={isSaving || !isMissionFormValid}
-                Icon={Icon.Save}
-                onClick={async () => {
-                  await createOrUpdate({
-                    actionsFormValues,
-                    mainFormValues
-                  })
+            {!mainFormValues.createdAtUtc && <>Mission non enregistrée. </>}
+            {mainFormValues.updatedAtUtc && <>Dernière modification enregistrée {formattedUpdateDate}.</>}
+          </MissionInfos>
 
-                  goToMissionList()
-                }}
-              >
-                Enregistrer
-              </Button>
-            )}
+          <RightButtonsContainer>
+            <AutoSaveTag isAutoSaveEnabled={isAutoSaveEnabled} />
             {!mainFormValues.isClosed && (
               <Button
                 accent={Accent.SECONDARY}
                 data-cy="close-mission"
                 disabled={isSaving || !isMissionFormValid}
-                Icon={Icon.Confirm}
                 onClick={close}
               >
                 Clôturer
@@ -666,17 +660,34 @@ export function MissionForm() {
                 onClick={reopen}
                 type="button"
               >
-                Ré-ouvrir la mission
+                Rouvrir la mission
               </Button>
             )}
-            <CloseButton
-              accent={isAutoSaveEnabled ? Accent.PRIMARY : Accent.TERTIARY}
+            <Button
+              accent={isAutoSaveEnabled ? Accent.PRIMARY : Accent.SECONDARY}
               disabled={isSaving}
               onClick={goToMissionList}
             >
               Fermer
-            </CloseButton>
-          </div>
+            </Button>
+
+            {!isAutoSaveEnabled && (
+              <Button
+                accent={Accent.PRIMARY}
+                disabled={isSaving || !isMissionFormValid}
+                onClick={async () => {
+                  await createOrUpdate({
+                    actionsFormValues,
+                    mainFormValues
+                  })
+
+                  goToMissionList()
+                }}
+              >
+                Enregistrer
+              </Button>
+            )}
+          </RightButtonsContainer>
         </Footer>
       </Wrapper>
 
@@ -693,11 +704,6 @@ export function MissionForm() {
   )
 }
 
-const MissionInfos = styled.div`
-  font-style: italic;
-  color: ${p => p.theme.color.slateGray};
-`
-
 export const BackToListIcon = styled(Icon.Chevron)`
   margin-right: 12px;
   transform: rotate(90deg);
@@ -746,30 +752,29 @@ export const Body = styled.div`
 `
 
 export const Footer = styled.div`
-  background-color: ${p => p.theme.color.white};
-  border-top: solid 2px ${p => p.theme.color.gainsboro};
+  align-items: center;
+  border-top: 1px solid ${p => p.theme.color.lightGray};
   display: flex;
-  flex-grow: 1;
+  gap: 16px;
   justify-content: space-between;
-  max-height: 62px;
-  min-height: 62px;
-
-  > div {
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-    padding: 0 24px;
-
-    :last-child {
-      justify-content: flex-end;
-
-      > button {
-        margin-left: 16px;
-      }
+  padding: 16px;
+`
+const DeleteButton = styled(Button)`
+  :not([disabled]) {
+    svg {
+      color: ${p => p.theme.color.maximumRed};
     }
   }
 `
 
-export const CloseButton = styled(Button)`
-  height: 34px;
+const Separator = styled.div``
+
+const MissionInfos = styled.div`
+  font-style: italic;
+  color: ${p => p.theme.color.slateGray};
+`
+
+const RightButtonsContainer = styled.div`
+  display: flex;
+  gap: 16px;
 `
diff --git a/frontend/src/features/Mission/components/MissionForm/shared/AutoSaveTag.tsx b/frontend/src/features/Mission/components/MissionForm/shared/AutoSaveTag.tsx
@@ -16,8 +16,7 @@ export function AutoSaveTag({ isAutoSaveEnabled = false }: AutoSaveTagProps) {
 }
 
 const Wrapper = styled(Tag)`
-  margin-left: 24px;
+  margin: auto 0px auto 24px;
   vertical-align: middle;
-  align-self: unset;
   font-weight: 500;
 `