fix(SILVA-546): fixing amplify authentication

.github/workflows/analysis.yml

@@ -55,6 +55,11 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - uses: bcgov-nr/[email protected]
+        env:
+          VITE_ZONE: test
+          VITE_USER_POOLS_ID: ca-central-1_abc123
+          VITE_USER_POOLS_WEB_CLIENT_ID: abc123
+          VITE_BACKEND_URL: http://localhost:8080
         with:
           commands: |
             npm ci

frontend/package.json

@@ -13,9 +13,8 @@
     "@tanstack/react-query": "^5.50.1",
     "@types/node": "^22.0.0",
     "@vitejs/plugin-react": "^4.0.4",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "amazon-cognito-identity-js": "^6.3.13",
-    "aws-amplify": "^6.5.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",    
+    "aws-amplify": "^6.7.0",
     "axios": "^1.6.8",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.3",

frontend/src/App.tsx

@@ -1,52 +1,59 @@
-import {
-  BrowserRouter, Routes, Route
-} from 'react-router-dom';
-import { Amplify } from 'aws-amplify';
-import amplifyconfig from './amplifyconfiguration';
-
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import './custom.scss';
-
 import Landing from "./screens/Landing";
 import Help from "./screens/Help";
 import Reports from './screens/Reports';
 import SideLayout from './layouts/SideLayout';
-import PostLoginRoute from './routes/PostLoginRoute';
 import ProtectedRoute from './routes/ProtectedRoute';
 import Opening from './screens/Opening';
 import DashboardRedirect from './screens/DashboardRedirect';
 import SilvicultureSearch from './screens/SilvicultureSearch';
+import ErrorHandling from './screens/ErrorHandling';
+
 
-Amplify.configure(amplifyconfig);
+// Create the router instance
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Landing />,
+    errorElement: <ErrorHandling /> // Handle errors for the Landing page route
+  },
+  {
+    path: "/dashboard",
+    element: <DashboardRedirect />,
+    errorElement: <ErrorHandling /> // Handle errors for the dashboard route
+  },
+  {
+    element: <ProtectedRoute requireAuth />,
+    errorElement: <ErrorHandling />, // Global error element for protected routes
+    children: [
+      {
+        path: "/opening",
+        element: <SideLayout pageContent={<Opening />} />
+      },
+      {
+        path: "/silviculture-search",
+        element: <SideLayout pageContent={<SilvicultureSearch />} />
+      },
+      {
+        path: "/opening/reports",
+        element: <SideLayout pageContent={<Reports />} />
+      },
+      {
+        path: "/help",
+        element: <SideLayout pageContent={<Help />} />
+      }
+    ]
+  },
+  // Catch-all route for unmatched paths
+  {
+    path: "*",
+    element: <ErrorHandling />
+  }
+]);
 
 const App: React.FC = () => {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Landing/>} />
-        <Route path="/dashboard" element={
-          <PostLoginRoute>
-            <DashboardRedirect />
-          </PostLoginRoute>
-        } />
-        <Route path="/opening" element={
-          <ProtectedRoute>
-            <SideLayout pageContent={<Opening/>} />
-          </ProtectedRoute>
-        } />
-        <Route path="/silviculture-search" element={
-          <ProtectedRoute>
-            <SideLayout pageContent={<SilvicultureSearch/>} />
-          </ProtectedRoute>
-        } />
-        <Route path="/opening/reports" element={
-          <ProtectedRoute>
-            <SideLayout pageContent={<Reports/>} />
-          </ProtectedRoute>
-        } />
-        <Route path="/help" element={<SideLayout pageContent={<Help/>} />} />
-      </Routes>
-    </BrowserRouter>
-  );
+  return <RouterProvider router={router} />;
 };
 
 export default App;

frontend/src/__test__/actions/userAction.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest';
+import { getUserDetails, setClientRoles } from '../../actions/userAction';
+import {
+  USER_DETAILS_REQUEST,
+USER_DETAILS_SUCCESS,
+USER_DETAILS_FAIL,
+SET_CLIENT_ROLES
+} from '../../constants/userConstants';
+import { useGetAuth } from '../../contexts/AuthProvider';
+import { AppDispatch } from '../../store';
+import { UserClientRolesType } from '../../types/UserRoleType';
+
+
+
+vi.mock('../../contexts/AuthProvider', () => ({
+useGetAuth: vi.fn(),
+}));
+
+describe('userAction', () => {
+describe('getUserDetails', () => {
+  it('should dispatch USER_DETAILS_REQUEST and USER_DETAILS_SUCCESS with user data when successful', async () => {
+    const mockDispatch = vi.fn();
+    const mockIsLoggedIn = true;
+    const mockUser = { firstName: 'John', lastName: 'Doe' };
+    const mockUserJSON = JSON.stringify(mockUser);
+
+    (useGetAuth as vi.Mock).mockReturnValue({ isLoggedIn: mockIsLoggedIn });
+    localStorage.setItem('famLoginUser', mockUserJSON);
+
+    await getUserDetails()(mockDispatch as unknown as AppDispatch);
+
+    expect(mockDispatch).toHaveBeenCalledWith({ type: USER_DETAILS_REQUEST });
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: USER_DETAILS_SUCCESS,
+      payload: { ...mockUser, isLoggedIn: mockIsLoggedIn },
+    });
+  });
+
+  it('should dispatch USER_DETAILS_FAIL with error when an error occurs', async () => {
+    const mockDispatch = vi.fn();
+    const mockError = new Error('Test error');
+
+    (useGetAuth as vi.Mock).mockImplementation(() => {
+      throw mockError;
+    });
+
+    await getUserDetails()(mockDispatch as unknown as AppDispatch);
+
+    expect(mockDispatch).toHaveBeenCalledWith({ type: USER_DETAILS_REQUEST });
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: USER_DETAILS_FAIL,
+      payload: { error: mockError },
+    });
+  });
+
+  it('should handle missing user data in localStorage', async () => {
+    const mockDispatch = vi.fn();
+    const mockIsLoggedIn = true;
+
+    (useGetAuth as vi.Mock).mockReturnValue({ isLoggedIn: mockIsLoggedIn });
+    localStorage.removeItem('famLoginUser');
+
+    await getUserDetails()(mockDispatch as unknown as AppDispatch);
+
+    expect(mockDispatch).toHaveBeenCalledWith({ type: USER_DETAILS_REQUEST });
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: USER_DETAILS_SUCCESS,
+      payload: { isLoggedIn: mockIsLoggedIn },
+    });
+  });
+});
+
+describe('setClientRoles', () => {
+  it('should dispatch SET_CLIENT_ROLES with client roles', () => {
+    const mockDispatch = vi.fn();
+    const mockClientRoles: UserClientRolesType[] = [{ clientId: '123', roles: ['admin'] }];
+
+    setClientRoles(mockClientRoles)(mockDispatch as unknown as AppDispatch);
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: SET_CLIENT_ROLES,
+      payload: mockClientRoles,
+    });
+  });
+});
+});

frontend/src/__test__/components/BCHeaderwSide.test.tsx

@@ -10,6 +10,7 @@ import { Provider } from 'react-redux';
 import store from '../../store';
 import { UserClientRolesType } from '../../types/UserRoleType';
 import '@testing-library/jest-dom';
+import { AuthProvider } from '../../contexts/AuthProvider';
 
 vi.mock('../../services/TestService', () => ({
   getForestClientByNumberOrAcronym: vi.fn(() => [
@@ -29,13 +30,15 @@ const renderComponent = () => {
   const qc = new QueryClient();
 
   render(
-    <QueryClientProvider client={qc}>
-      <Provider store={store}>
-        <BrowserRouter>
-          <BCHeaderwSide />
-        </BrowserRouter>
-      </Provider>
-    </QueryClientProvider>
+    <AuthProvider>
+      <QueryClientProvider client={qc}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <BCHeaderwSide />
+          </BrowserRouter>
+        </Provider>
+      </QueryClientProvider>
+    </AuthProvider>
   );
 };
 

frontend/src/__test__/components/MyProfile.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import React from 'react';
+import { render, act, waitFor, fireEvent, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import MyProfile from '../../components/MyProfile';
+import { useThemePreference } from '../../utils/ThemePreference';
+import { useGetAuth } from '../../contexts/AuthProvider';
+
+// Mock dependencies
+vi.mock('../../utils/ThemePreference', () => ({
+  useThemePreference: vi.fn(),
+}));
+
+vi.mock('../../contexts/AuthProvider', () => ({
+  useGetAuth: vi.fn(),
+}));
+
+describe('MyProfile Component', () => {
+  const mockSetTheme = vi.fn();
+  const mockLogout = vi.fn();
+  const mockAuthUser = {
+    firstName: 'John',
+    lastName: 'Doe',
+    userName: 'johndoe',
+    email: '[email protected]',
+  };
+
+  beforeEach(() => {
+    (useThemePreference as vi.Mock).mockReturnValue({
+      theme: 'g10',
+      setTheme: mockSetTheme,
+    });
+    (useGetAuth as vi.Mock).mockReturnValue({
+      logout: mockLogout,
+      user: mockAuthUser,
+    });
+
+    // Mock localStorage
+    vi.spyOn(Storage.prototype, 'setItem');
+  });
+
+  it('should render user information correctly', () => {
+    render(<MyProfile />);
+    expect(screen.getByText('John Doe')).toBeDefined();
+    expect(screen.getByText('IDIR: johndoe')).toBeDefined();
+    expect(screen.getByText('Email:[email protected]')).toBeDefined();
+  });
+
+  it('should change theme when "Change theme" button is clicked', () => {
+    render(<MyProfile />);
+    const changeThemeButton = screen.getByText('Change theme');
+    fireEvent.click(changeThemeButton);
+    expect(mockSetTheme).toHaveBeenCalledWith('g100');
+    expect(localStorage.setItem).toHaveBeenCalledWith('mode', 'dark');
+  });
+
+  it('should call logout function when "Log out" button is clicked', () => {
+    render(<MyProfile />);
+    const logoutButton = screen.getByText('Log out');
+    fireEvent.click(logoutButton);
+    expect(mockLogout).toHaveBeenCalled();
+  });
+
+  it('should render organization selection section', () => {
+    render(<MyProfile />);
+    expect(screen.getByText('Select organization')).toBeDefined();
+  });
+
+  it('should render options section', () => {
+    render(<MyProfile />);
+    expect(screen.getByText('Options')).toBeDefined();
+  });
+
+  it('should toggle theme between light and dark', () => {
+    (useThemePreference as vi.Mock).mockReturnValueOnce({
+      theme: 'g100',
+      setTheme: mockSetTheme,
+    });
+    render(<MyProfile />);
+    const changeThemeButton = screen.getByText('Change theme');
+    fireEvent.click(changeThemeButton);
+    expect(mockSetTheme).toHaveBeenCalledWith('g10');
+    expect(localStorage.setItem).toHaveBeenCalledWith('mode', 'light');
+  });
+});