Closes #64 - Add logout button (#160)

src/components/UI/NavigationBar/MenuList/LogoutButton.test.tsx

@@ -0,0 +1,39 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { NavigationBarContextProvider } from 'components/UI/NavigationBar/NavigationBarContext'
+import { mockAxios } from 'test/axios-mock'
+import { TServerConfig } from 'test/test-values'
+import { LoggedInProviders } from 'test/testMocks'
+
+import { MenuList } from './MenuList'
+
+describe('LogoutButton', () => {
+  test('logs user out when clicked', async () => {
+    mockAxios
+      .onGet('/config')
+      .reply(200, Object.assign({}, TServerConfig, { auth_enabled: true }))
+
+    render(
+      <LoggedInProviders>
+        <NavigationBarContextProvider
+          toggleDrawer={(open: boolean) => () => {
+            // noop
+          }}
+          drawerIsOpen={true}
+        >
+          <MenuList />
+        </NavigationBarContextProvider>
+      </LoggedInProviders>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('Logout')).toBeInTheDocument()
+    })
+
+    const logOutButton = screen.getByText('Logout')
+    fireEvent.click(logOutButton)
+
+    await waitFor(() => {
+      expect(screen.queryByText('Logout')).not.toBeInTheDocument()
+    })
+  })
+})

src/components/UI/NavigationBar/MenuList/LogoutButton.tsx

@@ -0,0 +1,18 @@
+import LogoutIcon from '@mui/icons-material/Logout'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { AuthContainer } from 'containers/AuthContainer'
+
+const LogoutButton = () => {
+    const { logout } = AuthContainer.useContainer()
+
+    return (
+      <ListItemButton onClick={logout} sx={{ pl: 1 }}>
+        <ListItemIcon>
+          <LogoutIcon fontSize="small" />
+        </ListItemIcon>
+        <ListItemText primary={'Logout'} />
+      </ListItemButton>
+    )
+
+}
+export { LogoutButton }

src/components/UI/NavigationBar/MenuList/MenuList.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { NavigationBarContextProvider } from 'components/UI/NavigationBar/NavigationBarContext'
+import { mockAxios } from 'test/axios-mock'
+import { TServerConfig } from 'test/test-values'
+import { AllProviders, LoggedInProviders } from 'test/testMocks'
+
+import { MenuList } from './MenuList'
+
+describe('Menu List', () => {
+  test('should hide Logout button when not logged in', async () => {
+    render(
+      <AllProviders>
+        <NavigationBarContextProvider
+          toggleDrawer={(open: boolean) => () => {
+            // noop
+          }}
+          drawerIsOpen={true}
+        >
+          <MenuList />
+        </NavigationBarContextProvider>
+      </AllProviders>,
+    )
+    await waitFor(() => {
+      expect(screen.queryByText('Logout')).not.toBeInTheDocument()
+    })
+  })
+
+  test('should show logout button when logged in', async () => {
+    mockAxios
+      .onGet('/config')
+      .reply(200, Object.assign({}, TServerConfig, { auth_enabled: true }))
+
+    render(
+      <LoggedInProviders>
+        <NavigationBarContextProvider
+          toggleDrawer={(open: boolean) => () => {
+            // noop
+          }}
+          drawerIsOpen={true}
+        >
+          <MenuList />
+        </NavigationBarContextProvider>
+      </LoggedInProviders>,
+    )
+    await waitFor(() => {
+      expect(screen.getByText('Logout')).toBeInTheDocument()
+    })
+  })
+})

src/components/UI/NavigationBar/MenuList/MenuList.tsx

@@ -4,10 +4,14 @@ import FactoryIcon from '@mui/icons-material/Factory'
 import { Divider, MenuList as MuiMenuList } from '@mui/material'
 import { AdminMenu } from 'components/UI/NavigationBar/MenuList/AdminMenu'
 import { ListItemLink } from 'components/UI/NavigationBar/MenuList/ListItemLink'
+import { LogoutButton } from 'components/UI/NavigationBar/MenuList/LogoutButton'
 import { OptionsMenu } from 'components/UI/NavigationBar/MenuList/OptionsMenu'
+import { AuthContainer } from 'containers/AuthContainer'
 import * as React from 'react'
 
 const MenuList = () => {
+  const { user } = AuthContainer.useContainer()
+
   return (
     <MuiMenuList>
       {mainEntries.map((entry: mainEntriesType) => {
@@ -24,6 +28,7 @@ const MenuList = () => {
       <AdminMenu />
       <Divider />
       <OptionsMenu />
+      {user && <LogoutButton />}
     </MuiMenuList>
   )
 }