diff --git a/frontend/.env.example b/frontend/.env.example index edea8e2b9f..f2ac80d1a1 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -34,9 +34,9 @@ FRONTEND_OIDC_LOGIN_BUTTON_PROVIDER= # Sentry FRONTEND_SENTRY_DSN= -FRONTEND_MONITORFISH_VERSION= +FRONTEND_MONITORFISH_VERSION=v0.0.0 FRONTEND_SENTRY_TRACING_ORIGINS= -FRONTEND_SENTRY_ENV= +FRONTEND_SENTRY_ENV=development ################################################################################ # UseMatomo diff --git a/frontend/.env.local.defaults b/frontend/.env.local.defaults index 1487d01d2e..3f5bb4e2be 100644 --- a/frontend/.env.local.defaults +++ b/frontend/.env.local.defaults @@ -34,9 +34,9 @@ FRONTEND_OIDC_LOGIN_BUTTON_PROVIDER=proconnect # Sentry FRONTEND_SENTRY_DSN= -FRONTEND_MONITORFISH_VERSION= +FRONTEND_MONITORFISH_VERSION=v0.0.0 FRONTEND_SENTRY_TRACING_ORIGINS= -FRONTEND_SENTRY_ENV= +FRONTEND_SENTRY_ENV=development ################################################################################ # UseMatomo diff --git a/frontend/index.html b/frontend/index.html index a8503171a2..009d3583f3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,11 +2,19 @@ - + MonitorFish + diff --git a/frontend/public/faviconBW.ico b/frontend/public/faviconBW.ico new file mode 100644 index 0000000000..00c090bcef Binary files /dev/null and b/frontend/public/faviconBW.ico differ diff --git a/frontend/src/components/EnvironmentBox.tsx b/frontend/src/components/EnvironmentBox.tsx new file mode 100644 index 0000000000..4f9c9e6314 --- /dev/null +++ b/frontend/src/components/EnvironmentBox.tsx @@ -0,0 +1,40 @@ +import { THEME } from '@mtes-mct/monitor-ui' +import { getEnvironmentData } from '@utils/getEnvironmentData' +import styled from 'styled-components' + +export function EnvironmentBox() { + const { environmentMessage, isEnvironmentBoxVisible, version } = getEnvironmentData() + + if (!isEnvironmentBoxVisible) { + return null + } + + return ( + + {environmentMessage} + version {version} + + ) +} + +const Wrapper = styled.div` + background-color: ${p => p.theme.color.goldenPoppy}; + color: ${p => p.theme.color.charcoal}; + display: flex; + font-size: 12px; + font-weight: 500; + justify-content: space-between; + padding-left: 4px; + padding-right: 8px; + position: absolute; + top: 0px; + width: 99%; + z-index: 10000; +` + +export function getEnvironmentBorderStyle(isEnvironmentBoxVisible: boolean) { + return ` + border: ${isEnvironmentBoxVisible ? '4px' : '0'} solid ${THEME.color.goldenPoppy}; + border-top: ${isEnvironmentBoxVisible ? '6px' : '0'} solid ${THEME.color.goldenPoppy}; + ` +} diff --git a/frontend/src/features/MainWindow/index.tsx b/frontend/src/features/MainWindow/index.tsx index f9e4a43fbb..1bca25330d 100644 --- a/frontend/src/features/MainWindow/index.tsx +++ b/frontend/src/features/MainWindow/index.tsx @@ -1,3 +1,4 @@ +import { EnvironmentBox, getEnvironmentBorderStyle } from '@components/EnvironmentBox' import { BannerStack } from '@features/MainWindow/components/BannerStack' import { MainMap } from '@features/Map/components/MainMap' import { IUUReportingMapForm } from '@features/Reporting/components/IUUReportingMapForm' @@ -5,6 +6,7 @@ import { SideWindowStatus } from '@features/SideWindow/constants' import { VesselFiltersHeadband } from '@features/Vessel/components/VesselFiltersHeadband' import { VesselGroupMainWindowEdition } from '@features/VesselGroup/components/VesselGroupMainWindowEdition' import { trackEvent } from '@hooks/useTracking' +import { getEnvironmentData } from '@utils/getEnvironmentData' import { useCallback, useEffect } from 'react' import { useBeforeUnload } from 'react-router-dom' import styled from 'styled-components' @@ -21,6 +23,8 @@ import { MapButtons } from '../Map/components/MapButtons' import { SideWindowLauncher } from '../SideWindow/SideWindowLauncher' import { VesselLoader } from '../Vessel/components/VesselLoader' +const { isEnvironmentBoxVisible } = getEnvironmentData() + export function MainWindow() { const isControlUnitDialogDisplayed = useMainAppSelector( state => state.displayedComponent.isControlUnitDialogDisplayed @@ -59,8 +63,10 @@ export function MainWindow() { - + + + @@ -83,9 +89,12 @@ export function MainWindow() { ) } -const Wrapper = styled.div` +const Wrapper = styled.div<{ + $isEnvironmentBoxVisible: boolean +}>` + ${p => getEnvironmentBorderStyle(p.$isEnvironmentBoxVisible)} font-size: 13px; overflow: hidden; - width: 100vw; - height: 100vh; + width: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 8px)' : '100%')}; + height: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 10px)' : '100%')}; ` diff --git a/frontend/src/features/Map/components/BaseMap.tsx b/frontend/src/features/Map/components/BaseMap.tsx index 9a26574e4f..6cb10fd9bb 100644 --- a/frontend/src/features/Map/components/BaseMap.tsx +++ b/frontend/src/features/Map/components/BaseMap.tsx @@ -107,12 +107,12 @@ export function BaseMap({ const MapWrapper = styled.div` display: flex; - flex: 1; + height: 100%; ` const MapContainer = styled.div` background-color: #d4dadc; - height: 100vh; + height: 100%; width: 100%; overflow-y: hidden; overflow-x: hidden; diff --git a/frontend/src/features/Regulation/components/RegulationForm/index.tsx b/frontend/src/features/Regulation/components/RegulationForm/index.tsx index 6fc906bcf3..3f44a8c72a 100644 --- a/frontend/src/features/Regulation/components/RegulationForm/index.tsx +++ b/frontend/src/features/Regulation/components/RegulationForm/index.tsx @@ -36,11 +36,11 @@ import { useCallback, useEffect, useMemo, useState } from 'react' import { useNavigate } from 'react-router-dom' import styled from 'styled-components' +import { RegulationTags } from './identification/RegulationTags' import { Footer, FooterButton, OtherRemark, Section, Title } from '../../../commonStyles/Backoffice.style' import { CancelButton, ValidateButton } from '../../../commonStyles/Buttons.style' import ChevronIconSVG from '../../../icons/Chevron_simple_gris.svg?react' import { STATUS } from '../RegulationTables/constants' -import { RegulationTags } from './identification/RegulationTags' import type { BackofficeAppPromiseThunk } from '@store' import type { Polygon } from 'geojson' @@ -354,7 +354,7 @@ const CreateRegulationWrapper = styled.div` flex-direction: column; padding: 11px 27px 11px 27px; background-color: ${p => p.theme.color.white}; - height: 100vh; + height: 100%; ` const LinkSpan = styled.span` diff --git a/frontend/src/features/Regulation/components/RegulationTables/index.tsx b/frontend/src/features/Regulation/components/RegulationTables/index.tsx index 0ba793b684..4d5b0807c9 100644 --- a/frontend/src/features/Regulation/components/RegulationTables/index.tsx +++ b/frontend/src/features/Regulation/components/RegulationTables/index.tsx @@ -220,14 +220,14 @@ const BackofficeContainer = styled.div` position: relative; background-color: ${p => p.theme.color.white}; width: 100%; - height: 100vh; + height: 100%; ` const RegulatoryZonePanel = styled.div` display: flex; flex: 1; flex-direction: column; - max-height: 100vh; + max-height: 100%; max-width: 50%; background-color: ${p => p.theme.color.white}; ` diff --git a/frontend/src/features/SideWindow/index.tsx b/frontend/src/features/SideWindow/index.tsx index 01570a5a6a..0469299363 100644 --- a/frontend/src/features/SideWindow/index.tsx +++ b/frontend/src/features/SideWindow/index.tsx @@ -1,3 +1,4 @@ +import { EnvironmentBox, getEnvironmentBorderStyle } from '@components/EnvironmentBox' import { FrontendErrorBoundary } from '@components/FrontendErrorBoundary' import { getOperationalAlerts } from '@features/Alert/useCases/getOperationalAlerts' import { getSilencedAlerts } from '@features/Alert/useCases/getSilencedAlerts' @@ -12,6 +13,7 @@ import { VesselListAndGroups } from '@features/Vessel/components/VesselListAndGr import { setVessels } from '@features/Vessel/slice' import { vesselApi } from '@features/Vessel/vesselApi' import { NewWindowContext, type NewWindowContextValue, THEME } from '@mtes-mct/monitor-ui' +import { getEnvironmentData } from '@utils/getEnvironmentData' import { type CSSProperties, Fragment, @@ -44,9 +46,12 @@ import { PriorNotificationList } from '../PriorNotification/components/PriorNoti import type { MainAppAsyncThunk } from '@store' +const { isEnvironmentBoxVisible } = getEnvironmentData() + export type SideWindowProps = HTMLAttributes & { isFromURL: boolean } + export function SideWindow({ isFromURL }: SideWindowProps) { const dispatch = useMainAppDispatch() const isSuperUser = useIsSuperUser() @@ -144,11 +149,11 @@ export function SideWindow({ isFromURL }: SideWindowProps) { return ( - + {!isFirstRender && ( - + @@ -256,10 +261,12 @@ const GlobalStyle = createGlobalStyle<{ ` // All containers within this SideWindow root wrapper should now only use flexboxes -const Wrapper = styled.div` +const Wrapper = styled.div<{ $isEnvironmentBoxVisible: boolean }>` + ${p => getEnvironmentBorderStyle(p.$isEnvironmentBoxVisible)} background: ${p => p.theme.color.white}; display: flex; - height: 100%; + height: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 10px)' : '100%')}; + width: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 8px)' : '100%')}; min-height: 0; min-width: 0; diff --git a/frontend/src/features/VesselGroup/slice.ts b/frontend/src/features/VesselGroup/slice.ts index cbcef81860..b69c4c5c14 100644 --- a/frontend/src/features/VesselGroup/slice.ts +++ b/frontend/src/features/VesselGroup/slice.ts @@ -71,9 +71,11 @@ export const vesselGroupActions = vesselGroupSlice.actions export const vesselGroupReducer = vesselGroupSlice.reducer +const selectAllVesselGroupsQuery = vesselGroupApi.endpoints.getAllVesselGroups.select() + export const selectVesselGroupsIdsFiltered = createSelector( [ - (state: MainRootState) => vesselGroupApi.endpoints.getAllVesselGroups.select()(state), + (state: MainRootState) => selectAllVesselGroupsQuery(state), (state: MainRootState) => state.vesselGroup.filteredGroupType, (state: MainRootState) => state.vesselGroup.filteredSharing, (state: MainRootState) => state.vesselGroup.vesselGroupsIdsPinned diff --git a/frontend/src/pages/BackofficePage.tsx b/frontend/src/pages/BackofficePage.tsx index 92890b46d5..3b2a438b72 100644 --- a/frontend/src/pages/BackofficePage.tsx +++ b/frontend/src/pages/BackofficePage.tsx @@ -1,6 +1,8 @@ import { BackofficeMode } from '@api/BackofficeMode' +import { EnvironmentBox, getEnvironmentBorderStyle } from '@components/EnvironmentBox' import { BackOfficeMenu } from '@features/BackOffice/components/BackofficeMenu' import { BannerStack } from '@features/MainWindow/components/BannerStack' +import { getEnvironmentData } from '@utils/getEnvironmentData' import countries from 'i18n-iso-countries' import COUNTRIES_FR from 'i18n-iso-countries/langs/fr.json' import { Provider } from 'react-redux' @@ -12,6 +14,8 @@ import { backofficeStore, backofficeStorePersistor } from '../store' countries.registerLocale(COUNTRIES_FR) +const { isEnvironmentBoxVisible } = getEnvironmentData() + export function BackofficePage() { return ( @@ -19,7 +23,8 @@ export function BackofficePage() { - + + @@ -30,7 +35,11 @@ export function BackofficePage() { ) } -const Wrapper = styled.div` +const Wrapper = styled.div<{ + $isEnvironmentBoxVisible: boolean +}>` + ${p => getEnvironmentBorderStyle(p.$isEnvironmentBoxVisible)} display: flex; - height: 100%; + height: ${p => (p.$isEnvironmentBoxVisible ? 'calc(100% - 10px)' : '100%')}; + position: relative; ` diff --git a/frontend/src/ui/shared/.keep b/frontend/src/ui/shared/.keep deleted file mode 100644 index 8b13789179..0000000000 --- a/frontend/src/ui/shared/.keep +++ /dev/null @@ -1 +0,0 @@ - diff --git a/frontend/src/utils/getEnvironmentData.ts b/frontend/src/utils/getEnvironmentData.ts new file mode 100644 index 0000000000..817acc0c59 --- /dev/null +++ b/frontend/src/utils/getEnvironmentData.ts @@ -0,0 +1,11 @@ +const environment = import.meta.env.FRONTEND_SENTRY_ENV +const version = import.meta.env.FRONTEND_MONITORFISH_VERSION +const environmentMessage = "ENVIRONNEMENT D'INTEGRATION" +const isEnvironmentBoxVisible = environment === 'integration' +export function getEnvironmentData() { + return { + environmentMessage, + isEnvironmentBoxVisible, + version + } +}