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|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
+    },
+  };

JeMPI_Apps/JeMPI_UI/package.json

@@ -11,31 +11,19 @@
     "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": {
-    "@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",
     "axios": "^1.1.3",
     "axios-mock-adapter": "^1.21.2",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.8",
     "formik": "^2.2.9",
     "keycloak-js": "^20.0.2",
+    "lodash": "^4.17.21",
     "notistack": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -46,17 +34,43 @@
     "web-vitals": "^2.1.0"
   },
   "devDependencies": {
+    "@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/dockerode": "^3.3.20",
+    "@types/jest": "^29.5.5",
+    "@types/lodash": "^4.14.199",
+    "@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",
+    "ts-node": "^10.9.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

JeMPI_Apps/JeMPI_UI/src/App.tsx

@@ -6,6 +6,8 @@ import baseTheme from './themes/baseTheme'
 import baseRouter from 'router/BaseRouter'
 import { ReactQueryDevtools } from 'DevTools'
 import { RouterProvider } from 'react-router-dom'
+import { AuthProvider } from 'hooks/useAuth'
+import { SnackbarProvider } from 'notistack'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -17,10 +19,14 @@ const App = () => {
   return (
     <ThemeProvider theme={baseTheme}>
       <CssBaseline />
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={baseRouter} />
-        <ReactQueryDevtools />
-      </QueryClientProvider>
+      <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'top' }}>
+        <QueryClientProvider client={queryClient}>
+          <AuthProvider>
+            <RouterProvider router={baseRouter} />
+          </AuthProvider>
+          <ReactQueryDevtools />
+        </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 = (props: any) => {
   return (
     <Backdrop
       sx={{ color: '#fff', zIndex: theme => theme.zIndex.drawer + 1 }}
       open={true}
+      id={props.id || 'loading-spinner'}
     >
       <CircularProgress color="inherit" />
     </Backdrop>

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

@@ -5,9 +5,11 @@ import MenuItem from '@mui/material/MenuItem'
 import { config } from 'config'
 import * as React from 'react'
 import { useAuth } from '../../hooks/useAuth'
+import { useNavigate } from 'react-router-dom'
 
 const NavigationMenu: React.FC = () => {
   const { user, logout } = useAuth()
+  const navigate = useNavigate()
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
   const isOpen = Boolean(anchorEl)
@@ -19,7 +21,7 @@ const NavigationMenu: React.FC = () => {
   }
   const handleLogout = () => {
     close()
-    logout()
+    logout(navigate)
   }
 
   if (!user) {

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, AuthProvider, 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 = () => {
   )
 }
 
-export default Login
+const login = () => {
+  return (
+    <AuthChecker>
+      <LoginPage></LoginPage>
+    </AuthChecker>
+  )
+}
+
+export default login