[Tech] add NavBar Props

MTES-MCT · Sep 19, 2024 · eb7d429 · eb7d429
1 parent 0297de2
commit eb7d429
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -3,14 +3,20 @@ import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import ResponsiveNav from '@rsuite/responsive-nav'
 import styled from 'styled-components'
 
-export function NavBar({ children, onClose, onSelect }) {
+type NavBarProps = {
+  children: React.ReactNode[]
+  name: string
+  onClose: (eventKey: string | number | undefined) => void
+  onSelect: (eventKey: string | number | undefined) => void
+}
+export function NavBar({ children, name, onClose, onSelect }: NavBarProps) {
   const currentPath = useAppSelector(state => state.sideWindow.currentPath)
 
   return (
     <StyledResponsiveNav
       activeKey={currentPath}
       appearance="tabs"
-      data-cy="dashboards-nav"
+      data-cy={`${name}-nav`}
       moreProps={{ placement: 'bottomEnd' }}
       moreText={<IconButton accent={Accent.TERTIARY} Icon={Icon.More} />}
       onItemRemove={onClose}

diff --git a/frontend/src/features/Dashboard/components/DashboardsNavBar.tsx b/frontend/src/features/Dashboard/components/DashboardsNavBar.tsx
@@ -28,7 +28,7 @@ export function DashboardsNavBar() {
   const closeDashboard = () => {}
 
   return (
-    <NavBar onClose={closeDashboard} onSelect={selectDashboard}>
+    <NavBar name="dashboards" onClose={closeDashboard} onSelect={selectDashboard}>
       {tabs.map((item, index) => (
         <ResponsiveNav.Item
           key={item.nextPath}

diff --git a/frontend/src/features/missions/MissionsNavBar.tsx b/frontend/src/features/missions/MissionsNavBar.tsx
@@ -65,7 +65,7 @@ export function MissionsNavBar() {
   }
 
   return (
-    <NavBar onClose={removeTab} onSelect={selectTab}>
+    <NavBar name="missions" onClose={removeTab} onSelect={selectTab}>
       {tabs.map((item, index) => (
         <ResponsiveNav.Item key={item.nextPath} data-cy={`mission-${index}`} eventKey={item.nextPath} icon={item.icon}>
           {item.label}