From a110d778d40be02411e6349eb136b0456163b36e Mon Sep 17 00:00:00 2001
From: Jackson Hyde <jacksonjhyde@gmail.com>
Date: Fri, 23 Aug 2024 10:10:08 +0100
Subject: [PATCH] Minor style fixes (#32)

* Minor style fixes
* Header prop refactor

---------

Co-authored-by: jackson <Jackson Hyde>
---
 src/components/Header/Header.stories.tsx      |  6 +--
 src/components/Header/Header.tsx              | 54 ++++++++++---------
 .../Header/__tests__/Header.test.tsx          | 22 +++-----
 3 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
index 9b11bbc..97c5972 100644
--- a/src/components/Header/Header.stories.tsx
+++ b/src/components/Header/Header.stories.tsx
@@ -12,13 +12,11 @@ type Story = StoryObj<typeof HeaderComponent>;
 
 export const Header: Story = {
   args: {
-    user: {
-      roles: [
+    userRoles: [
         'manage-users',
         'download-manager',
         'health-checks:edit',
-      ]
-    },
+    ],
     portMenuItems: [
       { label: 'National Dashboard', link: '/regional-dashboard' },
       { label: 'CWL (Cardiff)', link: '/cwi' }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 24bed64..20b7c55 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -15,9 +15,7 @@ export type MenuItem = {
 }
 
 export interface IHeader {
-  user: {
-    roles: string[]
-  },
+  userRoles: string[],
   adminMenuItems: MenuItem[],
   leftMenuItems?: MenuItem[],
   rightMenuItems?: MenuItem[],
@@ -31,7 +29,7 @@ const linkStyles = {
   color: '#000',
 }
 
-const Header = ({user, adminMenuItems, rightMenuItems, leftMenuItems, portMenuItems, routingFunction, logoutLink}: IHeader) => {
+const Header = ({userRoles, adminMenuItems, rightMenuItems, leftMenuItems, portMenuItems, routingFunction, logoutLink}: IHeader) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -42,7 +40,9 @@ const Header = ({user, adminMenuItems, rightMenuItems, leftMenuItems, portMenuIt
   };
 
   const adminMenuRoles = adminMenuItems.map(menuItem => menuItem.roles).flat(1);
-  const hasAdminMenuRoles = user.roles.filter(role => adminMenuRoles.includes(role)).length > 0;
+  const hasAdminMenuRoles = userRoles.filter(role => adminMenuRoles.includes(role)).length > 0;
+
+  console.log(userRoles, hasAdminMenuRoles);
 
   return (
     <AppBar sx={{backgroundColor: '#fff'}} elevation={0} position={"sticky"}>
@@ -93,7 +93,7 @@ const Header = ({user, adminMenuItems, rightMenuItems, leftMenuItems, portMenuIt
                 }}
               >
                 { adminMenuItems.map((item) => {
-                  const hasRole = item.roles && (item.roles.filter(role => user.roles.includes(role)).length > 0);
+                  const hasRole = item.roles && (item.roles.filter(role => userRoles.includes(role)).length > 0);
                   return hasRole && <MenuItem 
                     data-testid={`menu-${item.link}`} 
                     key={item.link} 
@@ -143,25 +143,29 @@ const Header = ({user, adminMenuItems, rightMenuItems, leftMenuItems, portMenuIt
                   Admin
                 </Button>
               </Grid> }
-              {
-                rightMenuItems && rightMenuItems.map((menuItem) => {
-  
-                  return (
-                    <Grid key={menuItem.link} item flexGrow={0} display={{xs: 'none', md: 'block'}}>
-                      <Button 
-                        onClick={() => routingFunction(menuItem.link)}
-                        data-testid={`right-menu-${menuItem.link}`} 
-                        variant="text" 
-                        startIcon={<DynamicIcon iconName={menuItem.icon as IconNames} />} 
-                        sx={linkStyles}>
-                          {menuItem.label}
-                        </Button>
-                    </Grid>
-                  )
-                })
-              }
-              <Grid item flexGrow={0} display={{xs: 'none', md: 'block'}}>
-                <Button data-testid="logout" onClick={() => logoutLink()} variant="text" startIcon={<LogoutIcon />} sx={linkStyles}>Logout</Button>
+              <Grid item>
+                <Grid container>
+                  {
+                    rightMenuItems && rightMenuItems.map((menuItem) => {
+      
+                      return (
+                        <Grid key={menuItem.link} item flexGrow={1} display={{xs: 'none', md: 'block'}}>
+                          <Button 
+                            onClick={() => routingFunction(menuItem.link)}
+                            data-testid={`right-menu-${menuItem.link}`} 
+                            variant="text" 
+                            startIcon={<DynamicIcon iconName={menuItem.icon as IconNames} />} 
+                            sx={linkStyles}>
+                              {menuItem.label}
+                            </Button>
+                        </Grid>
+                      )
+                    })
+                  }
+                  <Grid item flexGrow={1} display={{xs: 'none', md: 'block'}} sx={{textAlign: 'right'}}>
+                    <Button data-testid="logout" onClick={() => logoutLink()} variant="text" startIcon={<LogoutIcon />} sx={linkStyles}>Logout</Button>
+                  </Grid>
+                </Grid>
               </Grid>
             </Grid>
           </Grid>
diff --git a/src/components/Header/__tests__/Header.test.tsx b/src/components/Header/__tests__/Header.test.tsx
index 47c5d34..eebaf3c 100644
--- a/src/components/Header/__tests__/Header.test.tsx
+++ b/src/components/Header/__tests__/Header.test.tsx
@@ -3,14 +3,11 @@ import { render } from "../../TestProviderRenderer";
 import { screen } from "@testing-library/dom";
 import { fireEvent } from "@testing-library/react";
 import Header from "../Header";
-import { within } from "@testing-library/react";
 import '@testing-library/jest-dom';
 
 
 const headerProps = {
-  user: {
-    roles: [] as string[]
-  },
+  userRoles: [] as string[],
   portMenuItems: [
     { label: 'National Dashboard', link: '/regional-dashboard' },
     { label: 'CWL (Cardiff)', link: '/cwi' }
@@ -59,12 +56,10 @@ let testHeaderProps = {...headerProps}
 
 describe("When the user has admin roles", () => {
 
-  beforeEach(() => {
-    headerProps.user.roles = ['health-checks:edit'];
-  });
-
   test("it renders the admin menu options if the role is available", async () => {
 
+    testHeaderProps.userRoles=['health-checks:edit']
+
     render(<Header {...testHeaderProps} />);
     await fireEvent.click(screen.getByTestId('desktop-admin-menu-trigger'));
     
@@ -73,15 +68,14 @@ describe("When the user has admin roles", () => {
     expect(await screen.getByTestId('menu-/health-check-pauses')).toBeTruthy();
   })
 
-  test("it does not render admin menu options if the role is missing", async () => {
+  test("it does not render admin menu if the role is missing", async () => {
+
+    testHeaderProps.userRoles=['random-permission']
 
     render(<Header {...testHeaderProps} />);
-    await fireEvent.click(screen.getByTestId('desktop-admin-menu-trigger'));
   
-    const feedbackOption = await screen.queryByTestId('menu-/user-feedback')
-    const accessRequestsOption = await screen.queryByTestId('menu-/access-requests')
-    expect(feedbackOption).toBeNull();
-    expect(accessRequestsOption).toBeNull();
+    const menuTrigger = screen.queryByTestId('desktop-admin-menu-trigger')
+    expect(menuTrigger).toBeNull();
   })
 })