From 8bab40e45c873ea1cb9dcdd4e9104dda398018b5 Mon Sep 17 00:00:00 2001
From: Shreya Vithala <v01@pfw.edu>
Date: Sat, 16 Nov 2024 18:44:32 -0600
Subject: [PATCH 1/3] modified the css file to make sure to the logo & message
 is always visible

---
 src/components/Header/Header.css | 107 +++++++++++++++----------------
 src/components/Header/Header.jsx |  16 ++++-
 2 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index b421d4d2a1..45e69f9837 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -1,8 +1,9 @@
+/* General Styling */
 .header-wrapper {
   height: fit-content;
-  width: clamp(100vw, 0.1rem + 1vw, 100%);
+  width: 100%;
+  padding: 0 1rem;
 }
-
 .close-button {
   position: absolute;
   top: 0;
@@ -10,95 +11,89 @@
   padding: 12px; 
 }
 
-.card-content {
-  padding: 5px; 
-  padding-left: 40px;
-  padding-right: 40px;
-  white-space: pre-line;
-  color: white;
-  font-size: medium;
-}
-
-.navbar {
-  z-index: 100;
-  white-space: nowrap;
-  margin-bottom: 20px;
-}
-
+/* Timer Message Section */
 .timer-message-section {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   width: 100%;
   gap: 1rem;
+  
 }
 
-.redBackGroupHeader {
-  z-index: 10;
-  bottom: 0;
-  right: 0;
-  position: relative;
-  height: 30px;
-  text-align: center;
-  vertical-align: middle;
-  background: #ff4d4f;
-  border-radius: 40px;
-  color: #fff;
-  padding: 3px 6px;
-  max-width: 39px;
-  font-size: 1rem;
-  min-width: 29px;
+.owner-message {
+  margin-right: 1rem;
+  white-space: nowrap; /* Prevent text from wrapping */
+  flex-shrink: 0; /* Prevent shrinking */
+  
 }
 
-.owner-message {
-  margin-right: 3rem;
+.navbar {
+  z-index: 100;
+  flex-wrap: wrap;
+  overflow: visible;
 }
 
 .nav-links {
   display: flex;
   align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap; /* Allow wrapping of nav items */
+  overflow: visible;
 }
 
-.dropdown-item-hover:hover{
-  background-color: #2f4157 !important;
+.dashboard-text-link {
+  font-size: 16px;
 }
 
-@media (max-width: 1400px) {
-  .nav-links{
-    flex-direction: column !important;
-  }
+.dropdown-item-hover:hover {
+  background-color: #2f4157 !important;
 }
 
-@media (max-width: 1500px) {
-  .dashboard-text-link {
-    font-size: 14px;
-  }
-
-  .owner-message {
-    margin-right: 0;
+/* Media Queries for Responsiveness */
+@media (max-width: 1400px) {
+  .nav-links {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    width: 100%;
+    overflow: visible;
+    flex-wrap: wrap;
   }
 }
 
 @media (max-width: 1050px) {
   .timer-message-section {
-    display: flex;
-    width: 0;
+    width: 100%;
     margin-right: 0;
   }
 
   .owner-message {
-    display: none;
+    display: block;
+    margin-right: 0;
+    text-align: center;
+    width: 100%;
   }
-}
 
-@media screen and (min-width: 1400px) and (max-width: 1700px) {
-  .owner-message {
-    display: none;
+  .nav-links {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    overflow: visible;
+    flex-wrap: wrap;
   }
 }
 
-@media screen and (max-width: 769px) {
-  .responsive-spacing{
+@media screen and (max-width: 768px) {
+  .responsive-spacing {
     margin-right: 5px;
   }
+
+  .nav-links {
+    flex-direction: column;
+    width: 100%;
+    overflow: visible;
+    flex-wrap: wrap;
+  }
 }
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index b1c834089a..c0b035ade9 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -179,6 +179,20 @@ export function Header(props) {
     };
   }, [user.userid, props.auth.firstName]);
 
+  // useEffect(() => {
+  //   const handleResize = () => {
+  //     console.log('Window size: ', window.innerWidth);
+  //   };
+  
+  //   // Add event listener
+  //   window.addEventListener('resize', handleResize);
+  //   handleResize();
+  
+  //   return () => {
+  //     window.removeEventListener('resize', handleResize);
+  //   };
+  // }, []); // Empty dependency array means this effect will only run once, similar to componentDidMount
+  
   useEffect(() => {
     if (props.auth.isAuthenticated) {
       props.getHeaderData(props.auth.user.userid);
@@ -319,7 +333,7 @@ export function Header(props) {
         <NavbarToggler onClick={toggle} />
         {isAuthenticated && (
           <Collapse isOpen={isOpen} navbar>
-            <Nav className="ml-auto nav-links" navbar>
+            <Nav className="ml-auto nav-links d-flex" navbar>
               <div
                 className="d-flex justify-content-center align-items-center"
                 style={{ width: '100%' }}

From f0f30e8131446a60114cc25936bc5050f899a222 Mon Sep 17 00:00:00 2001
From: Shreya Vithala <v01@pfw.edu>
Date: Fri, 17 Jan 2025 17:44:49 -0600
Subject: [PATCH 2/3] Revert "modified the css file to make sure to the logo &
 message is always visible"

This reverts commit 8bab40e45c873ea1cb9dcdd4e9104dda398018b5.
---
 .../__tests__/PermissionsManagement.test.js   | 262 ++++++++++++++++++
 1 file changed, 262 insertions(+)
 create mode 100644 src/components/PermissionsManagement/__tests__/PermissionsManagement.test.js

diff --git a/src/components/PermissionsManagement/__tests__/PermissionsManagement.test.js b/src/components/PermissionsManagement/__tests__/PermissionsManagement.test.js
new file mode 100644
index 0000000000..d4f2361eb8
--- /dev/null
+++ b/src/components/PermissionsManagement/__tests__/PermissionsManagement.test.js
@@ -0,0 +1,262 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import axios from 'axios';
+import PermissionChangeLogTable from '../PermissionChangeLogTable';
+import PermissionsManagement from '../PermissionsManagement';
+
+// Mock all required actions
+jest.mock('../../../actions/role', () => ({
+  getAllRoles: () => ({ type: 'GET_ALL_ROLES' }),
+  addNewRole: role => ({ type: 'ADD_NEW_ROLE', payload: role }),
+  fetchAllRoles: data => ({ type: 'FETCH_ALL_ROLES', payload: data }),
+}));
+
+jest.mock('../../../actions/userProfile', () => ({
+  getUserProfile: id => ({ type: 'GET_USER_PROFILE', payload: id }),
+  updateUserProfile: data => ({ type: 'UPDATE_USER_PROFILE', payload: data }),
+}));
+
+jest.mock('../../../actions/information', () => ({
+  getInfoCollections: () => ({ type: 'GET_INFO_COLLECTIONS' }),
+}));
+
+// Mock axios
+jest.mock('axios');
+
+// Mock react-router-dom
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+// Mock permissions utility
+jest.mock('../../../utils/permissions', () => ({
+  __esModule: true,
+  default: permission => {
+    if (permission === 'postRole') return true;
+    if (permission === 'putRole') return true;
+    if (permission === 'putUserProfilePermissions') return true;
+    return false;
+  },
+}));
+
+const mockStore = configureMockStore([thunk]);
+
+describe('PermissionsManagement Component', () => {
+  let store;
+
+  const initialState = {
+    role: {
+      roles: [{ roleName: 'Admin' }, { roleName: 'User' }],
+    },
+    auth: {
+      user: {
+        userid: '123',
+      },
+      permissions: ['postRole', 'putRole', 'putUserProfilePermissions'],
+    },
+    userProfile: {
+      role: 'Admin',
+    },
+    theme: {
+      darkMode: false,
+    },
+    allUserProfiles: {
+      userProfiles: [],
+    },
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+
+    // Setup axios mock responses
+    axios.get.mockImplementation(url => {
+      if (url.includes('permission-change-logs')) {
+        return Promise.resolve({ data: [] });
+      }
+      return Promise.resolve({ data: { success: true, data: {} } });
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  axios.get.mockResolvedValue({
+    data: [{ id: 1, description: 'Permission changed', timestamp: '2024-01-17' }],
+  });
+
+  // Test 1: Basic Rendering
+  test('renders component with correct title', async () => {
+    render(
+      <Provider store={store}>
+        <PermissionsManagement />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('User Roles')).toBeInTheDocument();
+    });
+  });
+
+  // Test 2: Role Buttons
+  test('renders role buttons for each role', async () => {
+    render(
+      <Provider store={store}>
+        <PermissionsManagement />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Admin')).toBeInTheDocument();
+      expect(screen.getByText('User')).toBeInTheDocument();
+    });
+  });
+
+  // Test 3: Permission Buttons
+  test('shows permission management buttons when user has permissions', async () => {
+    render(
+      <Provider store={store}>
+        <PermissionsManagement />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Add New Role')).toBeInTheDocument();
+      expect(screen.getByText('Manage User Permissions')).toBeInTheDocument();
+    });
+  });
+
+  // Test 4: Dark Mode
+  test('applies dark mode styles when darkMode is true', async () => {
+    const darkModeStore = mockStore({
+      ...initialState,
+      theme: { darkMode: true },
+    });
+
+    render(
+      <Provider store={darkModeStore}>
+        <PermissionsManagement />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      const topLevelDiv = screen.getByText('User Roles').closest('div.permissions-management')
+        .parentNode;
+      const permissionsManagementDiv = screen
+        .getByText('User Roles')
+        .closest('div.permissions-management');
+      expect(topLevelDiv).toHaveClass('bg-oxford-blue text-light');
+      expect(permissionsManagementDiv).toHaveClass('bg-yinmn-blue dark-box-shadow');
+    });
+  });
+
+  // Test 5: Modal Functionality
+  test('toggles New Role modal', async () => {
+    render(
+      <Provider store={store}>
+        <PermissionsManagement />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('Add New Role'));
+    });
+
+    expect(screen.getByText('Create New Role')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /close/i }));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Create New Role')).not.toBeInTheDocument();
+    });
+  });
+
+  // Test 6: Error Handling
+  test('handles API errors gracefully', async () => {
+    axios.get.mockRejectedValueOnce(new Error('API Error'));
+
+    render(
+      <Provider store={store}>
+        <PermissionsManagement />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(axios.get).toHaveBeenCalled();
+    });
+  });
+
+  // Test 7: Redux Actions
+  test('dispatches initial actions', async () => {
+    render(
+      <Provider store={store}>
+        <PermissionsManagement />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      const actions = store.getActions();
+      expect(actions).toContainEqual({ type: 'GET_INFO_COLLECTIONS' });
+      expect(actions).toContainEqual({
+        type: 'GET_USER_PROFILE',
+        payload: '123',
+      });
+    });
+  });
+
+  // Test 8: Pagination
+  test('displays pagination and initial logs correctly', async () => {
+    const mockLogs = Array.from({ length: 45 }, (v, k) => ({
+      _id: k + 1,
+      logDateTime: new Date().toISOString(),
+      roleName: 'User',
+      permissions: ['Read', 'Write'],
+      permissionsAdded: ['Read'],
+      permissionsRemoved: ['Write'],
+      requestorRole: 'Admin',
+      requestorEmail: 'admin@example.com',
+    }));
+
+    render(<PermissionChangeLogTable changeLogs={mockLogs} darkMode={false} />);
+
+    // Initial render should show first 20 items
+    expect(screen.getAllByText(/User/).length).toBe(20);
+
+    // Expect pagination controls to be present
+    const firstPageButton = screen.getByText('1');
+    const lastPageButton = screen.getByText('3'); // Total 45 logs, 20 per page, so 3 pages
+    expect(firstPageButton).toBeInTheDocument();
+    expect(lastPageButton).toBeInTheDocument();
+  });
+
+  // test 9: Navigates to the next Page
+  test('navigates to the next page correctly', async () => {
+    const mockLogs = Array.from({ length: 45 }, (v, k) => ({
+      _id: k + 1,
+      logDateTime: new Date().toISOString(),
+      roleName: `User ${k + 1}`,
+      permissions: ['Read', 'Write'],
+      permissionsAdded: ['Read'],
+      permissionsRemoved: ['Write'],
+      requestorRole: 'Admin',
+      requestorEmail: 'admin@example.com',
+    }));
+
+    render(<PermissionChangeLogTable changeLogs={mockLogs} darkMode={false} />);
+
+    // Click to second page
+    const nextPageButton = screen.getByText('2');
+    fireEvent.click(nextPageButton);
+
+    // Check for content that should be visible on the second page
+    // Change detection from specific text to more general check if elements are rendered
+    await waitFor(() => {
+      const visibleLogs = screen.getAllByText(/User /);
+      expect(visibleLogs.length).toBeGreaterThanOrEqual(1); // Ensure at least one log is displayed
+      expect(visibleLogs.some(node => node.textContent.includes('User 21'))).toBe(true);
+    });
+  });
+});

From 3a9b18a3416d2d9422411a26fd1bec0121661537 Mon Sep 17 00:00:00 2001
From: Shreya Vithala <v01@pfw.edu>
Date: Fri, 17 Jan 2025 17:49:19 -0600
Subject: [PATCH 3/3] deleted the duplicate file

---
 .../PermissionsManagement.test.js             | 74 -------------------
 1 file changed, 74 deletions(-)
 delete mode 100644 src/components/PermissionsManagement/PermissionsManagement.test.js

diff --git a/src/components/PermissionsManagement/PermissionsManagement.test.js b/src/components/PermissionsManagement/PermissionsManagement.test.js
deleted file mode 100644
index 85fb8beca7..0000000000
--- a/src/components/PermissionsManagement/PermissionsManagement.test.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { rolesMock, themeMock } from '../../__tests__/mockStates';
-import PermissionsManagement from './PermissionsManagement';
-import thunk from 'redux-thunk';
-import { Route } from 'react-router-dom';
-import { screen } from '@testing-library/react';
-import { renderWithRouterMatch } from '../../__tests__/utils';
-import configureMockStore from 'redux-mock-store';
-import userEvent from '@testing-library/user-event';
-import { ModalProvider } from 'context/ModalContext';
-
-jest.mock('actions/role.js');
-
-const mockStore = configureMockStore([thunk]);
-
-const mockInfoCollections = [
-  // Your mock data
-  {infoName: 'testInfo',
-  infoContent: 'a'},
-  {infoName: 'testInfo2',
-  infoContent: ''},
-];
-
-
-describe('permissions management page structure', () => {
-  let store;
-  beforeEach(() => {
-    store = mockStore({
-      role: rolesMock.role,
-      roleInfo: { roleInfo: {} },
-      theme: themeMock,
-    });
-    store.dispatch = jest.fn();
-
-    renderWithRouterMatch(
-      <ModalProvider>
-      <Route path="/permissionsmanagement">{props => <PermissionsManagement {...props} infoCollections={mockInfoCollections} areaName={'testInfo'} role={'Owner'} fontSiz={24} />}</Route>
-      </ModalProvider>,
-      {
-        route: `/permissionsmanagement`,
-        store,
-      },
-    );
-  });
-
-  it('should be rendered with one h1 User Roles', () => {
-    expect(screen.getByText(/User Roles/i)).toBeInTheDocument();
-  });
-
-  describe('Add New Role button', () => {
-    test('add new role button should be present', () => {
-      if (screen.queryByRole('Button')) {
-        expect(screen.queryByRole('Button', { name: /add new role/i })).toBeInTheDocument();
-      } else {
-        expect(screen.queryByRole('Button', { name: /add new role/i })).not.toBeInTheDocument();
-      }
-    });
-  });
-
-  describe('permissions management behavior', () => {
-    it('should fire newRole modal with a form to create a new Role', () => {
-      if (screen.queryByRole('Button')) {
-        userEvent.click(screen.getByText(/add new role/i));
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        expect(screen.getByRole('Button', { name: 'Close' })).toBeInTheDocument();
-        expect(screen.getByRole('textbox')).toBeInTheDocument();
-      } else {
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        expect(screen.queryByRole('Button', { name: 'Close' })).not.toBeInTheDocument();
-        expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
-      }
-    });
-  });
-});