Remove legacy side window base/container refs

MTES-MCT · Sep 18, 2024 · 52a872a · 52a872a
1 parent c5a1625
commit 52a872a
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 92 deletions.
diff --git a/frontend/src/features/ActivityReport/components/ExportActivityReportsDialog/index.tsx b/frontend/src/features/ActivityReport/components/ExportActivityReportsDialog/index.tsx
@@ -1,14 +1,5 @@
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
-import {
-  Accent,
-  Button,
-  DatePicker,
-  Dialog,
-  FieldError,
-  getUtcizedDayjs,
-  Select,
-  useNewWindow
-} from '@mtes-mct/monitor-ui'
+import { Accent, Button, DatePicker, Dialog, FieldError, getUtcizedDayjs, Select } from '@mtes-mct/monitor-ui'
 import { useState } from 'react'
 import styled from 'styled-components'
 
@@ -21,7 +12,6 @@ type ExportActivityReportsDialogProps = {
   onExit: () => Promisable<void>
 }
 export function ExportActivityReportsDialog({ onExit }: ExportActivityReportsDialogProps) {
-  const { newWindowContainerRef } = useNewWindow()
   const dispatch = useMainAppDispatch()
 
   const [afterDateTimeUtc, setAfterDateTimeUtc] = useState<Date | undefined>()
@@ -66,7 +56,6 @@ export function ExportActivityReportsDialog({ onExit }: ExportActivityReportsDia
         <div>
           Du
           <DatePicker
-            baseContainer={newWindowContainerRef.current}
             isCompact
             isErrorMessageHidden
             isHistorical
@@ -77,7 +66,6 @@ export function ExportActivityReportsDialog({ onExit }: ExportActivityReportsDia
           />
           au
           <DatePicker
-            baseContainer={newWindowContainerRef.current}
             isCompact
             isErrorMessageHidden
             isHistorical

diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/DatePickerField.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/DatePickerField.tsx
@@ -1,12 +1,11 @@
 import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants'
 import { useGetMissionActionFormikUsecases } from '@features/Mission/components/MissionForm/hooks/useGetMissionActionFormikUsecases'
-import { DatePicker, useNewWindow } from '@mtes-mct/monitor-ui'
+import { DatePicker } from '@mtes-mct/monitor-ui'
 import { useFormikContext } from 'formik'
 
 import type { MissionActionFormValues } from '../../types'
 
 export function DatePickerField() {
-  const { newWindowContainerRef } = useNewWindow()
   const { updateMissionLocation } = useGetMissionActionFormikUsecases()
   const { errors, setFieldValue, values } = useFormikContext<MissionActionFormValues>()
 
@@ -20,7 +19,6 @@ export function DatePickerField() {
 
   return (
     <DatePicker
-      baseContainer={newWindowContainerRef.current}
       defaultValue={values.actionDatetimeUtc}
       error={error}
       isErrorMessageHidden={error === HIDDEN_ERROR}

diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselField.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselField.tsx
@@ -1,7 +1,7 @@
 import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants'
 import { useGetVesselQuery } from '@features/Vessel/apis'
 import { VesselSearch } from '@features/VesselSearch'
-import { Checkbox, useNewWindow } from '@mtes-mct/monitor-ui'
+import { Checkbox } from '@mtes-mct/monitor-ui'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { UNKNOWN_VESSEL } from 'domain/entities/vessel/vessel'
 import { useFormikContext } from 'formik'
@@ -17,8 +17,6 @@ export function VesselField() {
   const { errors, setValues, values } = useFormikContext<MissionActionFormValues>()
   const { updateFieldsControlledByVessel } = useGetMissionActionFormikUsecases()
 
-  const { newWindowContainerRef } = useNewWindow()
-
   const { data: vessel, isFetching } = useGetVesselQuery(values.vesselId ?? skipToken)
 
   const defaultValue = useMemo(() => {
@@ -100,7 +98,6 @@ export function VesselField() {
       <Wrapper>
         <Field>
           <StyledVesselSearch
-            baseRef={newWindowContainerRef}
             defaultValue={defaultValue}
             disabled={values.vesselId === UNKNOWN_VESSEL.vesselId}
             extendedWidth={400}

diff --git a/frontend/src/features/Mission/components/MissionForm/MainForm/FormikDoubleDatePicker.tsx b/frontend/src/features/Mission/components/MissionForm/MainForm/FormikDoubleDatePicker.tsx
@@ -1,12 +1,11 @@
 import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants'
-import { FieldError, FormikDatePicker, useNewWindow } from '@mtes-mct/monitor-ui'
+import { FieldError, FormikDatePicker } from '@mtes-mct/monitor-ui'
 import { useFormikContext } from 'formik'
 import styled from 'styled-components'
 
 import type { MissionMainFormValues } from '../types'
 
 export function FormikDoubleDatePicker() {
-  const { newWindowContainerRef } = useNewWindow()
   const { errors } = useFormikContext<MissionMainFormValues>()
 
   const error = errors.endDateTimeUtc ?? errors.startDateTimeUtc
@@ -15,7 +14,6 @@ export function FormikDoubleDatePicker() {
     <Wrapper>
       <div>
         <FormikDatePicker
-          baseContainer={newWindowContainerRef.current}
           isCompact
           isErrorMessageHidden
           isRequired
@@ -25,7 +23,6 @@ export function FormikDoubleDatePicker() {
           withTime
         />
         <FormikDatePicker
-          baseContainer={newWindowContainerRef.current}
           isCompact
           isEndDate
           isErrorMessageHidden

diff --git a/frontend/src/features/Mission/components/MissionList/FilterBar.tsx b/frontend/src/features/Mission/components/MissionList/FilterBar.tsx
@@ -11,7 +11,6 @@ import {
   Size,
   TextInput,
   useKey,
-  useNewWindow,
   usePrevious
 } from '@mtes-mct/monitor-ui'
 import { Formik } from 'formik'
@@ -35,8 +34,6 @@ export type FilterBarProps = Readonly<{
   searchQuery: string | undefined
 }>
 export function FilterBar({ onQueryChange, searchQuery }: FilterBarProps) {
-  const { newWindowContainerRef } = useNewWindow()
-
   const listFilterValues = useMainAppSelector(store => store.missionList.listFilterValues)
 
   const [isCustomDateRangeOpen, setIsCustomDateRangeOpen] = useState(false)
@@ -198,11 +195,7 @@ export function FilterBar({ onQueryChange, searchQuery }: FilterBarProps) {
           ]}
         >
           {isCustomDateRangeOpen && (
-            <FormikDateRangePicker
-              baseContainer={newWindowContainerRef.current}
-              label="Période spécifique"
-              name={MissionFilterType.CUSTOM_DATE_RANGE}
-            />
+            <FormikDateRangePicker label="Période spécifique" name={MissionFilterType.CUSTOM_DATE_RANGE} />
           )}
         </FormikFilterTagBar>
       </Wrapper>

diff --git a/...es/PriorNotification/components/ManualPriorNotificationForm/fields/FormikVesselSelect.tsx b/...es/PriorNotification/components/ManualPriorNotificationForm/fields/FormikVesselSelect.tsx
@@ -1,7 +1,7 @@
 import { vesselApi } from '@features/Vessel/vesselApi'
 import { VesselSearch } from '@features/VesselSearch'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
-import { Field, FieldError, logSoftError, useKey, useNewWindow } from '@mtes-mct/monitor-ui'
+import { Field, FieldError, logSoftError, useKey } from '@mtes-mct/monitor-ui'
 import { useField } from 'formik'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -17,7 +17,6 @@ export function FormikVesselSelect({ onChange, readOnly }: FormikVesselSelectPro
 
   const dispatch = useMainAppDispatch()
   const [input, meta, helper] = useField<number | undefined>('vesselId')
-  const { newWindowContainerRef } = useNewWindow()
 
   const [isLoading, setIsLoading] = useState(true)
 
@@ -92,7 +91,6 @@ export function FormikVesselSelect({ onChange, readOnly }: FormikVesselSelectPro
     <Field>
       <StyledVesselSearch
         key={key}
-        baseRef={newWindowContainerRef}
         defaultValue={defaultValueRef.current}
         disabled={isLoading || readOnly}
         hasError={!!meta.error}

diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationList/FilterBar.tsx
@@ -17,8 +17,7 @@ import {
   Size,
   TextInput,
   type DateAsStringRange,
-  CheckPicker,
-  useNewWindow
+  CheckPicker
 } from '@mtes-mct/monitor-ui'
 import { assertNotNullish } from '@utils/assertNotNullish'
 import { uniq } from 'lodash'
@@ -42,7 +41,6 @@ export type FilterBarProps = {
   searchQuery: string | undefined
 }
 export function FilterBar() {
-  const { newWindowContainerRef } = useNewWindow()
   const listFilterValues = useMainAppSelector(store => store.priorNotification.listFilterValues)
   const dispatch = useMainAppDispatch()
 
@@ -303,7 +301,6 @@ export function FilterBar() {
       {listFilterValues.expectedArrivalPeriod === ExpectedArrivalPeriod.CUSTOM && (
         <Row>
           <DateRangePicker
-            baseContainer={newWindowContainerRef.current}
             defaultValue={listFilterValues.expectedArrivalCustomPeriod}
             isStringDate
             isTransparent

diff --git a/frontend/src/features/SideWindow/Alert/SilencedAlerts/AddSilencedAlertDialog.tsx b/frontend/src/features/SideWindow/Alert/SilencedAlerts/AddSilencedAlertDialog.tsx
@@ -1,4 +1,4 @@
-import { Accent, Button, Dialog, FormikDatePicker, Icon, useNewWindow } from '@mtes-mct/monitor-ui'
+import { Accent, Button, Dialog, FormikDatePicker, Icon } from '@mtes-mct/monitor-ui'
 import { Formik } from 'formik'
 import { useState } from 'react'
 import styled from 'styled-components'
@@ -17,7 +17,6 @@ type DeletionConfirmationDialogProps = {
   onConfirm: (nextSilencedAlert: SilencedAlertData) => Promisable<void>
 }
 export function AddSilencedAlertDialog({ onCancel, onConfirm }: DeletionConfirmationDialogProps) {
-  const { newWindowContainerRef } = useNewWindow()
   const [isValidatingOnChange, setIsValidatingOnChange] = useState(false)
 
   return (
@@ -37,12 +36,7 @@ export function AddSilencedAlertDialog({ onCancel, onConfirm }: DeletionConfirma
             <>
               <VesselField />
               <AlertTypeField />
-              <StyledFormikDatePicker
-                baseContainer={newWindowContainerRef.current}
-                isStringDate
-                label="Date de reprise"
-                name="silencedBeforeDate"
-              />
+              <StyledFormikDatePicker isStringDate label="Date de reprise" name="silencedBeforeDate" />
             </>
           </StyledBody>
 

diff --git a/frontend/src/features/SideWindow/Alert/SilencedAlerts/fields/VesselField.tsx b/frontend/src/features/SideWindow/Alert/SilencedAlerts/fields/VesselField.tsx
@@ -1,4 +1,4 @@
-import { Legend, useNewWindow } from '@mtes-mct/monitor-ui'
+import { Legend } from '@mtes-mct/monitor-ui'
 import { useFormikContext } from 'formik'
 import { useMemo } from 'react'
 import styled from 'styled-components'
@@ -12,7 +12,6 @@ import type { SilencedAlertFormValues } from '../types'
 
 export function VesselField() {
   const { errors, setValues, values } = useFormikContext<SilencedAlertFormValues>()
-  const { newWindowContainerRef } = useNewWindow()
 
   const defaultValue: VesselIdentity = useMemo(
     () => ({
@@ -74,7 +73,6 @@ export function VesselField() {
         <StyledLegend>Navire</StyledLegend>
         <Field>
           <StyledVesselSearch
-            baseRef={newWindowContainerRef}
             defaultValue={defaultValue}
             disabled={values.vesselId === UNKNOWN_VESSEL.vesselId}
             extendedWidth={400}

diff --git a/frontend/src/features/VesselSearch/index.tsx b/frontend/src/features/VesselSearch/index.tsx
@@ -1,4 +1,4 @@
-import { useClickOutsideWhenOpenedWithinRef } from '@hooks/useClickOutsideWhenOpenedWithinRef'
+import { useClickOutsideWhenOpened } from '@hooks/useClickOutsideWhenOpened'
 import { useEscapeFromKeyboard } from '@hooks/useEscapeFromKeyboard'
 import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
@@ -16,11 +16,10 @@ import { searchVessels as searchVesselsAction } from '../../domain/use_cases/ves
 import { showVessel } from '../../domain/use_cases/vessel/showVessel'
 
 import type { VesselIdentity } from '../../domain/entities/vessel/types'
-import type { ChangeEvent, InputHTMLAttributes, MutableRefObject } from 'react'
+import type { ChangeEvent, InputHTMLAttributes } from 'react'
 import type { Promisable } from 'type-fest'
 
 type VesselSearchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange'> & {
-  baseRef?: MutableRefObject<HTMLDivElement | undefined> | undefined
   defaultValue?: VesselIdentity | undefined
   extendedWidth?: number | undefined
   hasError?: boolean | undefined
@@ -33,7 +32,6 @@ type VesselSearchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultVal
   onInputClick?: () => Promisable<void>
 }
 export function VesselSearch({
-  baseRef,
   className,
   defaultValue,
   extendedWidth,
@@ -60,7 +58,7 @@ export function VesselSearch({
   const [showLastSearchedVessels, setShowLastSearchedVessels] = useState(false)
 
   const escapeFromKeyboard = useEscapeFromKeyboard()
-  const clickedOutsideComponent = useClickOutsideWhenOpenedWithinRef(wrapperRef, isExtended, baseRef)
+  const clickedOutsideComponent = useClickOutsideWhenOpened(wrapperRef, isExtended)
 
   useEffect(() => {
     setSelectedVessel(defaultValue)
@@ -181,12 +179,10 @@ export function VesselSearch({
       <InputWrapper>
         <Input
           key={controlledKey}
-          // Disable this behavior when VesselSearch is used within side window
-          // (`baseRef` prop is only provided in side window case)
           $baseUrl={baseUrl}
           $flagState={flagState}
           $hasError={hasError}
-          autoFocus={!baseRef && !!selectedVesselIdentity}
+          autoFocus={!!selectedVesselIdentity}
           data-cy="vessel-search-input"
           defaultValue={vesselName}
           onChange={handleChange}

diff --git a/frontend/src/hooks/useClickOutsideWhenOpenedWithinRef.jsx b/frontend/src/hooks/useClickOutsideWhenOpenedWithinRef.jsx