Jempi base keycloak login UI updates

JeMPI_Apps/JeMPI_UI/jest.config.js

@@ -0,0 +1,22 @@
+const { pathsToModuleNameMapper } = require('ts-jest')
+const { compilerOptions } = require('./tsconfig')
+
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    coveragePathIgnorePatterns: [
+      "/tests/",
+      "/node_modules/",
+      "tsconfig.json",
+    ],
+    collectCoverageFrom: [
+      "**/src/**"
+    ],
+    transform: {
+      '^.+\\.(ts|tsx)?$': ['ts-jest', { isolatedModules:true }]
+    },
+    modulePaths: [compilerOptions.baseUrl],
+    moduleNameMapper: { ...pathsToModuleNameMapper(compilerOptions.paths),
+        ".+\\.(css|styl|less|sass|scss|ttf|woff|woff2)$": "identity-obj-proxy"
+    },
+  };

JeMPI_Apps/JeMPI_UI/package.json

@@ -11,25 +11,24 @@
     "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
     "lint:fix": "eslint ./src/ --ext ts,js,tsx,jsx --fix",
     "format": "prettier 'src/**/*.{js,jsx,ts,tsx,json,css}' --write",
-    "type-check": "tsc"
+    "type-check": "tsc",
+    "mock:startJeMPIAPIServer": "npx ts-node  --compilerOptions '{\"module\":\"commonjs\"}' ./tests/test.utils/mocks/enviroments/MockJeMPI_API/MockJeMPI_API.ts",
+    "mock:startKeycloakServer": "npx ts-node  --compilerOptions '{\"module\":\"commonjs\"}' ./tests/test.utils/mocks/enviroments/MockKeyCloak/MockKeyCloak.ts",
+    "mock:enviroments": "(start npm run mock:startKeycloakServer && start npm run mock:startJeMPIAPIServer -- 3000) || (npm run mock:startKeycloakServer & npm run mock:startJeMPIAPIServer -- 3000)"
   },
   "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.2.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.13.4",
     "@mui/x-data-grid": "^6.6.0",
     "@mui/x-date-pickers": "^6.6.0",
-    "@tanstack/react-query": "^4.16.1",
     "@tanstack/react-query-devtools": "^4.16.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@tanstack/react-query": "^4.16.1",
     "axios": "^1.1.3",
     "axios-mock-adapter": "^1.21.2",
     "cross-env": "^7.0.3",
@@ -46,17 +45,29 @@
     "web-vitals": "^2.1.0"
   },
   "devDependencies": {
+    "@types/dockerode": "^3.3.20",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
+    "dockerode": "^4.0.0",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^13.1.1",
-    "prettier": "^2.8.4"
+    "prettier": "^2.8.4",
+    "process": "^0.11.10",
+    "ts-jest": "^29.1.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

JeMPI_Apps/JeMPI_UI/src/App.tsx

@@ -7,6 +7,8 @@ import baseRouter from 'router/BaseRouter'
 import { RouterProvider } from 'react-router-dom'
 import { ConfigProvider } from 'hooks/useConfig'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { AuthProvider } from 'hooks/useAuth'
+import { SnackbarProvider } from 'notistack'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,12 +20,16 @@ const App = () => {
   return (
     <ThemeProvider theme={baseTheme}>
       <CssBaseline />
-      <QueryClientProvider client={queryClient}>
-        <ConfigProvider>
-          <RouterProvider router={baseRouter} />
-          <ReactQueryDevtools initialIsOpen={false} />
-        </ConfigProvider>
-      </QueryClientProvider>
+      <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'top' }}>
+        <QueryClientProvider client={queryClient}>
+          <ConfigProvider>
+            <AuthProvider>
+                <RouterProvider router={baseRouter} />
+            </AuthProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+          </ConfigProvider>
+        </QueryClientProvider>
+      </SnackbarProvider>
     </ThemeProvider>
   )
 }

JeMPI_Apps/JeMPI_UI/src/components/common/LoadingSpinner.tsx

@@ -1,10 +1,11 @@
 import { Backdrop, CircularProgress } from '@mui/material'
 
-const LoadingSpinner = () => {
+const LoadingSpinner = ({ id }: {id?:string}) => {
   return (
     <Backdrop
       sx={{ color: '#fff', zIndex: theme => theme.zIndex.drawer + 1 }}
       open={true}
+      id={id || 'loading-spinner'}
     >
       <CircularProgress color="inherit" />
     </Backdrop>

JeMPI_Apps/JeMPI_UI/src/components/shell/NavigationMenu.tsx

@@ -4,10 +4,12 @@ import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import * as React from 'react'
 import { useAuth } from '../../hooks/useAuth'
+import { useNavigate } from 'react-router-dom'
 import { useConfig } from 'hooks/useConfig'
 
 const NavigationMenu: React.FC = () => {
-  const { user, logout } = useAuth()
+  const { currentUser, logout } = useAuth()
+  const navigate = useNavigate()
   const { config } = useConfig()
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
@@ -20,10 +22,10 @@ const NavigationMenu: React.FC = () => {
   }
   const handleLogout = () => {
     close()
-    logout()
+    logout(navigate)
   }
 
-  if (!user) {
+  if (!currentUser) {
     return null
   }
 
@@ -51,10 +53,10 @@ const NavigationMenu: React.FC = () => {
         <MenuItem>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
             <Typography fontWeight={400} fontSize={'16px'}>
-              {`${user?.givenName} ${user?.familyName}`}
+              {`${currentUser?.givenName} ${currentUser?.familyName}`}
             </Typography>
             <Typography fontWeight={400} fontSize={'14px'}>
-              {user?.email}
+              {currentUser?.email}
             </Typography>
           </Box>
         </MenuItem>

JeMPI_Apps/JeMPI_UI/src/components/shell/Root.tsx

@@ -2,20 +2,17 @@ import React from 'react'
 import Shell from './Shell'
 import ErrorBoundary from 'components/error/ErrorBoundary'
 import { AppConfigProvider } from 'hooks/useAppConfig'
-import { AuthProvider } from 'hooks/useAuth'
-import { SnackbarProvider } from 'notistack'
+import { AuthChecker } from 'hooks/useAuth'
 
 const Root = () => {
   return (
-    <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'top' }}>
-      <AuthProvider>
-        <ErrorBoundary>
-          <AppConfigProvider>
-            <Shell />
-          </AppConfigProvider>
-        </ErrorBoundary>
-      </AuthProvider>
-    </SnackbarProvider>
+    <AuthChecker>
+      <ErrorBoundary>
+        <AppConfigProvider>
+          <Shell />
+        </AppConfigProvider>
+      </ErrorBoundary>
+    </AuthChecker>
   )
 }
 

JeMPI_Apps/JeMPI_UI/src/components/user/Login.tsx

@@ -1,12 +1,11 @@
 import { Person } from '@mui/icons-material'
 import { Box, Button, Card, Container, Typography } from '@mui/material'
-import { useAuth } from '../../hooks/useAuth'
+import { AuthChecker,  useAuth } from '../../hooks/useAuth'
 import logo from './JeMPI.png'
 
-const Login = () => {
+const LoginPage = () => {
   const { signInWithKeyCloak } = useAuth()
 
-  // const location = useLocation()
   return (
     <Container
       maxWidth={false}
@@ -94,4 +93,12 @@ const Login = () => {
   )
 }
 
+const Login = () => {
+  return (
+    <AuthChecker>
+      <LoginPage></LoginPage>
+    </AuthChecker>
+  )
+}
+
 export default Login