From 0f8aa1669f5f31343566d85de94d8a664352d405 Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Fri, 23 Feb 2024 15:18:17 +0100 Subject: [PATCH] [Mission] fix buttons and message of update date in footer --- frontend/package-lock.json | 8 +- frontend/package.json | 2 +- .../Mission/components/MissionForm/Loader.tsx | 6 +- .../Mission/components/MissionForm/index.tsx | 153 +++++++++--------- .../MissionForm/shared/AutoSaveTag.tsx | 3 +- 5 files changed, 88 insertions(+), 84 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index de91b2af56..e73216f39d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,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", @@ -2866,9 +2866,9 @@ "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" }, "node_modules/@mtes-mct/monitor-ui": { - "version": "11.8.0", - "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-11.8.0.tgz", - "integrity": "sha512-/btcPIy58H1xwLTPvlzFwmnWxG0UlfvHVAsZMD6SsvGRwK3CHdvrEkHfXLD/JF4bifyD4qP0O4Fk25FmRDF6DQ==", + "version": "11.9.1", + "resolved": "https://registry.npmjs.org/@mtes-mct/monitor-ui/-/monitor-ui-11.9.1.tgz", + "integrity": "sha512-vo/cqxIPwlkToud4wwKKScw7heQb75Jpwh4ee4/QkDl0pX2dvEMA3p0ChCu2FMO9TJUOeEne7l0v28SOjinV7A==", "dependencies": { "@babel/runtime": "7.22.15", "@tanstack/react-table": "8.9.7", diff --git a/frontend/package.json b/frontend/package.json index da7436c9fe..d7c2a8d8b9 100644 --- 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 index 1b2c5ee40f..e50dbaf9e8 100644 --- 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() {
- +
diff --git a/frontend/src/features/Mission/components/MissionForm/index.tsx b/frontend/src/features/Mission/components/MissionForm/index.tsx index 1142152e4e..203c2632c9 100644 --- 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() { @@ -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 index 25686a9c15..e298240630 100644 --- 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; `