From c2353830f0fbe10a84ac632ff486246692876201 Mon Sep 17 00:00:00 2001
From: Ana Garcia <ana@eyeseetea.com>
Date: Thu, 7 Nov 2024 21:47:05 +0100
Subject: [PATCH] Improve UI

---
 src/utils/tests.tsx                           |  9 +++--
 .../im-team-hierarchy/IMTeamHierarchyView.tsx | 10 +++--
 .../layout/side-bar/SideBarContent.tsx        | 40 ++++++++++---------
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/utils/tests.tsx b/src/utils/tests.tsx
index 71720e0..2c175a1 100644
--- a/src/utils/tests.tsx
+++ b/src/utils/tests.tsx
@@ -1,6 +1,7 @@
 import { render, RenderResult } from "@testing-library/react";
 import { SnackbarProvider } from "@eyeseetea/d2-ui-components";
 import { ReactNode } from "react";
+import { MemoryRouter } from "react-router-dom";
 import { AppContext, AppContextState } from "../webapp/contexts/app-context";
 import { getTestCompositionRoot } from "../CompositionRoot";
 import { createAdminUser } from "../domain/entities/__tests__/userFixtures";
@@ -78,9 +79,11 @@ export function getReactComponent(children: ReactNode): RenderResult {
         <MuiThemeProvider theme={muiTheme}>
             <ThemeProvider theme={muiTheme}>
                 <OldMuiThemeProvider muiTheme={muiThemeLegacy}>
-                    <AppContext.Provider value={context}>
-                        <SnackbarProvider>{children}</SnackbarProvider>
-                    </AppContext.Provider>
+                    <MemoryRouter>
+                        <AppContext.Provider value={context}>
+                            <SnackbarProvider>{children}</SnackbarProvider>
+                        </AppContext.Provider>
+                    </MemoryRouter>
                 </OldMuiThemeProvider>
             </ThemeProvider>
         </MuiThemeProvider>
diff --git a/src/webapp/components/im-team-hierarchy/IMTeamHierarchyView.tsx b/src/webapp/components/im-team-hierarchy/IMTeamHierarchyView.tsx
index 3f3b457..26da476 100644
--- a/src/webapp/components/im-team-hierarchy/IMTeamHierarchyView.tsx
+++ b/src/webapp/components/im-team-hierarchy/IMTeamHierarchyView.tsx
@@ -45,7 +45,9 @@ export const IMTeamHierarchyView: React.FC<IMTeamHierarchyViewProps> = React.mem
     return (
         <IMTeamHierarchyViewContainer>
             <ContentWrapper>
-                <SearchInput value={searchTerm} onChange={onSearchChange} />
+                <SearchInputContainer>
+                    <SearchInput value={searchTerm} onChange={onSearchChange} />
+                </SearchInputContainer>
                 {isSelectable && searchTerm && selectedItemIds && selectedItemIds?.length > 0 ? (
                     <CountSelectionText>
                         {i18n.t(
@@ -103,12 +105,14 @@ const StyledIMTeamHierarchyView = styled(TreeViewMUI)`
 const ContentWrapper = styled.div`
     display: flex;
     flex-direction: column;
-    /* gap: 8px; */
 `;
 
 const CountSelectionText = styled.span`
-    margin-block-start: 10px;
     font-weight: 400;
     font-size: 0.875rem;
     color: ${props => props.theme.palette.common.grey900};
 `;
+
+const SearchInputContainer = styled.div`
+    margin-block-end: 10px;
+`;
diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx
index 2bc100e..4d7310d 100644
--- a/src/webapp/components/layout/side-bar/SideBarContent.tsx
+++ b/src/webapp/components/layout/side-bar/SideBarContent.tsx
@@ -1,7 +1,7 @@
 import { List, ListItem, ListItemText } from "@material-ui/core";
 import React, { useCallback } from "react";
 import styled from "styled-components";
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import { AddCircleOutline } from "@material-ui/icons";
 import i18n from "../../../../utils/i18n";
 import { Button } from "../../button/Button";
@@ -46,6 +46,7 @@ export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
     ({ children, hideOptions = false, showCreateEvent = false }) => {
         const { goTo } = useRoutes();
         const { getCurrentEventTracker } = useCurrentEventTracker();
+        const location = useLocation();
 
         const goToCreateEvent = useCallback(() => {
             goTo(RouteName.CREATE_FORM, { formType: "disease-outbreak-event" });
@@ -63,24 +64,25 @@ export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
                     </CreateEventContainer>
                 ) : (
                     <StyledList>
-                        {DEFAULT_SIDEBAR_OPTIONS.map(({ text, value }) => (
-                            <ListItem
-                                button
-                                key={text}
-                                component={NavLink}
-                                to={
-                                    value === RouteName.EVENT_TRACKER ||
-                                    value === RouteName.IM_TEAM_BUILDER
-                                        ? routes[value].replace(
-                                              ":id",
-                                              getCurrentEventTracker()?.id || ""
-                                          )
-                                        : routes[value]
-                                }
-                            >
-                                <StyledText primary={i18n.t(text)} selected={false} />
-                            </ListItem>
-                        ))}
+                        {DEFAULT_SIDEBAR_OPTIONS.map(({ text, value }) => {
+                            const route =
+                                value === RouteName.EVENT_TRACKER ||
+                                value === RouteName.IM_TEAM_BUILDER
+                                    ? routes[value].replace(
+                                          ":id",
+                                          getCurrentEventTracker()?.id || ""
+                                      )
+                                    : routes[value];
+
+                            return (
+                                <ListItem button key={text} component={NavLink} to={route}>
+                                    <StyledText
+                                        primary={i18n.t(text)}
+                                        selected={location?.pathname === route}
+                                    />
+                                </ListItem>
+                            );
+                        })}
                     </StyledList>
                 )}
             </SideBarContainer>