Revert "feat: add dashboard and briefing button on map"

This reverts commit cf4bf9c.
MTES-MCT · Sep 18, 2024 · d9973ec · d9973ec
1 parent e8cccef
commit d9973ec
Show file tree

Hide file tree

Showing 25 changed files with 542 additions and 545 deletions.
diff --git a/.env.dev.defaults b/.env.dev.defaults
@@ -96,7 +96,6 @@ FRONTEND_MISSION_FORM_AUTO_UPDATE=true
 FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true
 FRONTEND_REPORTING_FORM_AUTO_SAVE_ENABLED=true
 FRONTEND_REPORTING_FORM_AUTO_UPDATE=true
-FRONTEND_DASHBOARD_ENABLED=true
 
 ################################################################################
 # Version

diff --git a/.env.infra.example b/.env.infra.example
@@ -95,7 +95,6 @@ FRONTEND_MISSION_FORM_AUTO_UPDATE=
 FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=
 FRONTEND_REPORTING_FORM_AUTO_SAVE_ENABLED=
 FRONTEND_REPORTING_FORM_AUTO_UPDATE=
-FRONTEND_DASHBOARD_ENABLED=
 
 ################################################################################
 # Version

diff --git a/.env.test.defaults b/.env.test.defaults
@@ -89,7 +89,6 @@ FRONTEND_MISSION_FORM_AUTO_UPDATE=true
 FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true
 FRONTEND_REPORTING_FORM_AUTO_SAVE_ENABLED=true
 FRONTEND_REPORTING_FORM_AUTO_UPDATE=true
-FRONTEND_DASHBOARD_ENABLED=true
 
 ################################################################################
 # Version

diff --git a/frontend/.env.frontend.example b/frontend/.env.frontend.example
@@ -35,7 +35,6 @@ FRONTEND_MISSION_FORM_AUTO_UPDATE=
 FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=
 FRONTEND_REPORTING_FORM_AUTO_SAVE_ENABLED=
 FRONTEND_REPORTING_FORM_AUTO_UPDATE=
-FRONTEND_DASHBOARD_ENABLED=
 
 ################################################################################
 # Version

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -25,14 +25,14 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "22.1.0",
+    "@mtes-mct/monitor-ui": "21.2.0",
     "@reduxjs/toolkit": "2.0.0",
     "@rsuite/responsive-nav": "5.0.2",
     "@sentry/browser": "7.73.0",
     "@sentry/react": "7.73.0",
     "@sentry/tracing": "7.114.0",
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-table": "8.20.5",
+    "@tanstack/react-table": "8.20.1",
     "@tanstack/react-virtual": "beta",
     "classnames": "2.5.1",
     "dayjs": "1.11.12",

diff --git a/frontend/src/components/style.ts b/frontend/src/components/style.ts
@@ -1,4 +1,3 @@
-import { Button, MapMenuDialog } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 export const Italic = styled.div`
@@ -8,22 +7,3 @@ export const Italic = styled.div`
 export const Bold = styled.span`
   font-weight: 700;
 `
-
-export const StyledMapMenuDialogContainer = styled(MapMenuDialog.Container)`
-  position: absolute;
-  transform: translateX(-100%);
-  margin-left: -6px;
-  display: block;
-`
-
-// TODO delete when Monitor-ui component have good padding
-export const DialogButton = styled(Button)`
-  padding: 4px 12px;
-`
-
-export const DialogSeparator = styled.div`
-  height: 1px;
-  border-top: 1px solid ${p => p.theme.color.gainsboro};
-  margin-left: -12px;
-  margin-right: -12px;
-`
diff --git a/frontend/src/domain/entities/map/constants.ts b/frontend/src/domain/entities/map/constants.ts
@@ -45,7 +45,6 @@ export enum DistanceUnit {
 }
 
 export enum MapToolType {
-  DASHBOARD = 'DASHBOARD',
   FILTERS = 'FILTERS',
   INTEREST_POINT = 'INTEREST_POINT',
   MEASUREMENT = 'MEASUREMENT',

diff --git a/frontend/src/domain/shared_slices/Global.ts b/frontend/src/domain/shared_slices/Global.ts
@@ -42,7 +42,6 @@ type GlobalStateType = {
   displayLocateOnMap: boolean
   displayMeasurement: boolean
   displayInterestPoint: boolean
-  displayDashboard: boolean
   displaySearchSemaphoreButton: boolean
   displayReportingsButton: boolean
   displayRightMenuControlUnitListButton: boolean
@@ -77,8 +76,6 @@ type GlobalStateType = {
 
   displayStationLayer: boolean
 
-  isDashboardDialogVisible: boolean
-
   isLayersSidebarVisible: boolean
 
   isMapToolVisible?: MapToolType
@@ -100,7 +97,6 @@ const initialState: GlobalStateType = {
   displayLocateOnMap: true,
   displayMeasurement: true,
   displayInterestPoint: true,
-  displayDashboard: true,
   displaySearchSemaphoreButton: true,
   displayReportingsButton: true,
   displayRightMenuControlUnitListButton: true,
@@ -139,8 +135,6 @@ const initialState: GlobalStateType = {
 
   displayStationLayer: false,
 
-  isDashboardDialogVisible: false,
-
   isMapToolVisible: undefined,
 
   healthcheckTextWarning: undefined,
@@ -170,7 +164,6 @@ const globalSlice = createSlice({
       state.isSearchSemaphoreVisible = false
       state.isSearchMissionsVisible = false
       state.isMapToolVisible = undefined
-      state.isDashboardDialogVisible = false
     },
 
     removeOverlayStroke(state) {

diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts
@@ -2,7 +2,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly FRONTEND_DASHBOARD_ENABLED: string
   readonly FRONTEND_GEOSERVER_NAMESPACE: string
   readonly FRONTEND_GEOSERVER_REMOTE_URL: string
   readonly FRONTEND_GOOGLEMAPS_API_KEY: string

diff --git a/frontend/src/features/Account/components/Account.tsx b/frontend/src/features/Account/components/Account.tsx
@@ -1,4 +1,5 @@
 import { MenuWithCloseButton } from '@features/commonStyles/map/MenuWithCloseButton'
+import { ButtonWrapper } from '@features/MainWindow/components/RightMenu/ButtonWrapper'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Button, Icon, MapMenuDialog, Size } from '@mtes-mct/monitor-ui'
@@ -7,6 +8,8 @@ import { globalActions } from 'domain/shared_slices/Global'
 import { useAuth } from 'react-oidc-context'
 import styled from 'styled-components'
 
+const MARGIN_TOP = 388
+
 export function Account() {
   const dispatch = useAppDispatch()
   const isAccountVisible = useAppSelector(state => state.global.isAccountDialogVisible)
@@ -27,7 +30,7 @@ export function Account() {
   }
 
   return (
-    <>
+    <ButtonWrapper topPosition={MARGIN_TOP}>
       {isAccountVisible && (
         <StyledContainer>
           <MapMenuDialog.Header>
@@ -54,7 +57,7 @@ export function Account() {
         size={Size.LARGE}
         title="Mon compte"
       />
-    </>
+    </ButtonWrapper>
   )
 }
 

diff --git a/frontend/src/features/ControlUnit/components/ControlUnitListDialog/index.tsx b/frontend/src/features/ControlUnit/components/ControlUnitListDialog/index.tsx
@@ -1,4 +1,3 @@
-import { StyledMapMenuDialogContainer } from '@components/style'
 import { Accent, Icon, MapMenuDialog } from '@mtes-mct/monitor-ui'
 import { useCallback, useMemo } from 'react'
 
@@ -47,7 +46,7 @@ export function ControlUnitListDialog({ onClose }: ControlUnitListDialogProps) {
   }, [dispatch, displayBaseLayer])
 
   return (
-    <StyledMapMenuDialogContainer style={{ height: 480 }}>
+    <MapMenuDialog.Container style={{ height: 480 }}>
       <MapMenuDialog.Header>
         <MapMenuDialog.CloseButton Icon={Icon.Close} onClick={onClose} />
         <MapMenuDialog.Title>Unités de contrôle</MapMenuDialog.Title>
@@ -64,6 +63,11 @@ export function ControlUnitListDialog({ onClose }: ControlUnitListDialogProps) {
         {filteredControlUnits &&
           filteredControlUnits.map(controlUnit => <Item key={controlUnit.id} controlUnit={controlUnit} />)}
       </MapMenuDialog.Body>
-    </StyledMapMenuDialogContainer>
+      {/* <MapMenuDialog.Footer>
+        <Button accent={Accent.SECONDARY} Icon={Icon.Expand} isFullWidth onClick={noop}>
+          Voir la vue détaillée des unités
+        </Button>
+      </MapMenuDialog.Footer> */}
+    </MapMenuDialog.Container>
   )
 }
diff --git a/frontend/src/features/Dashboard/components/DashboardMapButton.tsx b/frontend/src/features/Dashboard/components/DashboardMapButton.tsx
diff --git a/frontend/src/features/InterestPoint/components/EditInterestPoint.tsx b/frontend/src/features/InterestPoint/components/EditInterestPoint.tsx
@@ -1,4 +1,3 @@
-import { StyledMapMenuDialogContainer } from '@components/style'
 import { SetCoordinates } from '@features/coordinates/SetCoordinates'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
@@ -118,7 +117,7 @@ export function EditInterestPoint({ cancel, close }: EditInterestPointProps) {
   }
 
   return (
-    <StyledMapMenuDialogContainer data-cy="save-interest-point">
+    <MapMenuDialog.Container data-cy="save-interest-point">
       <MapMenuDialog.Header>
         <MapMenuDialog.CloseButton data-cy="interest-point-close" Icon={Icon.Close} onClick={cancel} />
         <MapMenuDialog.Title data-cy="interest-point-title">
@@ -166,7 +165,7 @@ export function EditInterestPoint({ cancel, close }: EditInterestPointProps) {
           Annuler
         </Button>
       </MapMenuDialog.Footer>
-    </StyledMapMenuDialogContainer>
+    </MapMenuDialog.Container>
   )
 }
 

diff --git a/frontend/src/features/InterestPoint/components/InterestPointMapButton.tsx b/frontend/src/features/InterestPoint/components/InterestPointMapButton.tsx
@@ -9,20 +9,23 @@ import {
 import { Icon, Size } from '@mtes-mct/monitor-ui'
 import { closeAllOverlays } from 'domain/use_cases/map/closeAllOverlays'
 import { reduceReportingFormOnMap } from 'domain/use_cases/reporting/reduceReportingFormOnMap'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { MapToolType } from '../../../domain/entities/map/constants'
 import { globalActions, setDisplayedItems } from '../../../domain/shared_slices/Global'
 import { useAppDispatch } from '../../../hooks/useAppDispatch'
 import { useAppSelector } from '../../../hooks/useAppSelector'
 import { useEscapeKey } from '../../../hooks/useEscapeKey'
+import { ButtonWrapper } from '../../MainWindow/components/RightMenu/ButtonWrapper'
 
 export function InterestPointMapButton() {
   const dispatch = useAppDispatch()
   const isMapToolVisible = useAppSelector(state => state.global.isMapToolVisible)
 
   const isOpen = useMemo(() => isMapToolVisible === MapToolType.INTEREST_POINT, [isMapToolVisible])
 
+  const wrapperRef = useRef(null)
+
   useEffect(() => {
     if (isOpen) {
       dispatch(startDrawingInterestPoint())
@@ -63,7 +66,7 @@ export function InterestPointMapButton() {
   }, [close, dispatch, isOpen])
 
   return (
-    <>
+    <ButtonWrapper ref={wrapperRef} topPosition={346}>
       {isOpen && <EditInterestPoint cancel={cancel} close={close} />}
 
       <MenuWithCloseButton.ButtonOnMap
@@ -74,6 +77,6 @@ export function InterestPointMapButton() {
         size={Size.LARGE}
         title="Créer un point d'intérêt"
       />
-    </>
+    </ButtonWrapper>
   )
 }
diff --git a/frontend/src/features/MainWindow/components/RightMenu/ButtonWrapper.tsx b/frontend/src/features/MainWindow/components/RightMenu/ButtonWrapper.tsx
@@ -0,0 +1,39 @@
+import { forwardRef } from 'react'
+import styled from 'styled-components'
+
+import { useAppSelector } from '../../../../hooks/useAppSelector'
+
+type ButtonWrapperProps = {
+  children: React.ReactNode
+  topPosition: number
+}
+export function ButtonWrapperWithRef({ children, topPosition }: ButtonWrapperProps, ref: React.Ref<HTMLDivElement>) {
+  const hasFullHeightRightDialogOpen = useAppSelector(state => state.mainWindow.hasFullHeightRightDialogOpen)
+  const isRightMenuOpened = useAppSelector(state => state.mainWindow.isRightMenuOpened)
+
+  return (
+    <Wrapper
+      ref={ref}
+      $hasFullHeightRightDialogOpen={hasFullHeightRightDialogOpen}
+      $isRightMenuOpened={isRightMenuOpened}
+      $topPosition={topPosition}
+    >
+      {children}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div<{
+  $hasFullHeightRightDialogOpen: boolean
+  $isRightMenuOpened: boolean
+  $topPosition: number
+}>`
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: ${p => (!p.$hasFullHeightRightDialogOpen || p.$isRightMenuOpened ? 10 : 0)}px;
+  top: ${p => p.$topPosition}px;
+  transition: right 0.3s ease-out;
+`
+
+export const ButtonWrapper = forwardRef(ButtonWrapperWithRef)
diff --git a/...Unit/components/ControlUnitListButton.tsx → ...nents/RightMenu/ControlUnitListButton.tsx b/...Unit/components/ControlUnitListButton.tsx → ...nents/RightMenu/ControlUnitListButton.tsx
@@ -1,12 +1,13 @@
 import { Icon, Size } from '@mtes-mct/monitor-ui'
 import { useCallback } from 'react'
 
-import { ControlUnitListDialog } from './ControlUnitListDialog'
-import { globalActions } from '../../../domain/shared_slices/Global'
-import { reduceReportingFormOnMap } from '../../../domain/use_cases/reporting/reduceReportingFormOnMap'
-import { useAppDispatch } from '../../../hooks/useAppDispatch'
-import { useAppSelector } from '../../../hooks/useAppSelector'
-import { MenuWithCloseButton } from '../../commonStyles/map/MenuWithCloseButton'
+import { ButtonWrapper } from './ButtonWrapper'
+import { globalActions } from '../../../../domain/shared_slices/Global'
+import { reduceReportingFormOnMap } from '../../../../domain/use_cases/reporting/reduceReportingFormOnMap'
+import { useAppDispatch } from '../../../../hooks/useAppDispatch'
+import { useAppSelector } from '../../../../hooks/useAppSelector'
+import { MenuWithCloseButton } from '../../../commonStyles/map/MenuWithCloseButton'
+import { ControlUnitListDialog } from '../../../ControlUnit/components/ControlUnitListDialog'
 
 export function ControlUnitListButton() {
   const dispatch = useAppDispatch()
@@ -19,7 +20,7 @@ export function ControlUnitListButton() {
   }, [dispatch, isControlUnitListDialogVisible])
 
   return (
-    <>
+    <ButtonWrapper topPosition={226}>
       {/* TODO The right menu should be a full `MainWindow` feature component by itself. */}
       {/* We should positition related dialogs independantly, not include them here. */}
       {isControlUnitListDialogVisible && <ControlUnitListDialog onClose={toggleDialog} />}
@@ -31,6 +32,6 @@ export function ControlUnitListButton() {
         size={Size.LARGE}
         title="Liste des unités de contrôle"
       />
-    </>
+    </ButtonWrapper>
   )
 }