Frontend Release to Main [4.74]

.github/workflows/deploy.yml

@@ -62,4 +62,4 @@ jobs:
           domain: ${{ vars.SURGE_DOMAIN }}
           project: './build'
           login: ${{ secrets.SURGE_LOGIN }}
-          token: ${{ secrets.SURGE_TOKEN }}
+          token: ${{ secrets.SURGE_TOKEN }}

.github/workflows/pull_request_test.yml

@@ -55,4 +55,4 @@ jobs:
     - name: Run Unit Tests for Changed Files Only
       run: yarn run test:changed
     - name: Run Lint
-      run: yarn run lint
+      run: yarn run lint

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+package-lock.json
 # testing
 /coverage
 *.code-snippets

Dockerfile

@@ -1,5 +1,5 @@
 # Define a imagem base
-FROM node:14-alpine
+FROM node:20-alpine
 # Set the working directory to /app
 WORKDIR /app
 # Copy the package.json and yarn.lock files to the container

package.json

@@ -173,6 +173,7 @@
     "@vitejs/plugin-react": "^4.5.0",
     "@vitest/ui": "3.2.2",
     "babel-jest": "^29.7.0",
+    "baseline-browser-mapping": "^2.9.17",
     "cross-env": "^5.2.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^5.1.0",
@@ -189,6 +190,7 @@
     "joi-browser": "^13.4.0",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.1.5",
+    "mdn-data": "^2.26.0",
     "msw": "^2.10.4",
     "prettier": "^1.19.1",
     "redux-mock-store": "^1.5.4",

public/index.css

@@ -1,3 +1,5 @@
+/* public/index.css */
+
 #root {
   background-color: #ffffff;
 }
@@ -179,3 +181,95 @@ body:not(.dark-mode) textarea {
   transform: translateY(-4px);
   opacity: 0.9;
 }
+
+  /* Allow the page content to scroll horizontally */
+  .container-fluid {
+    overflow-x: auto;
+  }
+
+  /* Hide the horizontal scrollbar */
+  .container-fluid::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Explicit targeting for all input types and selects */
+  body.dark-mode .form-control,
+  body.bm-dashboard-dark .form-control,
+  body.dark-mode select,
+  body.bm-dashboard-dark select,
+  body.dark-mode input[type="text"] {
+    background-color: #1e293b !important;
+    color: #ffffff !important;
+    border: 1px solid #334155 !important;
+  }
+
+  /* Fix for the Project and Tool dropdown arrows and internal padding */
+  body.dark-mode select.form-control,
+  body.bm-dashboard-dark select.form-control {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+    background-repeat: no-repeat !important;
+    background-position: right 0.75rem center !important;
+    background-size: 16px 12px !important;
+  }
+
+  body.dark-mode .form-control::placeholder {
+    color: #94a3b8 !important;
+  }
+
+  body.dark-mode option,
+  body.bm-dashboard-dark option {
+    background-color: #1e293b !important;
+    color: #ffffff !important;
+  }
+
+  body.dark-mode .modal-content,
+  body.bm-dashboard-dark .modal-content {
+    background-color: #1b2a41 !important;
+    border: 1px solid #2e3d55 !important;
+    color: #ffffff !important;
+  }
+
+  body.dark-mode .modal-header,
+  body.dark-mode .modal-body,
+  body.dark-mode .modal-footer,
+  body.bm-dashboard-dark .modal-header,
+  body.bm-dashboard-dark .modal-body,
+  body.bm-dashboard-dark .modal-footer {
+    background-color: #1b2a41 !important;
+    color: #ffffff !important;
+    border-color: #2e3d55 !important;
+  }
+
+  body.dark-mode .form-control,
+  body.dark-mode select,
+  body.dark-mode input {
+    background-color: #1e293b !important;
+    color: #ffffff !important;
+    border: 1px solid #334155 !important;
+  }
+
+  body.dark-mode select.form-control {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+  }
+
+  body.dark-mode .modal-header,
+  body.bm-dashboard-dark .modal-header {
+    background-color: #24344d !important;
+    border-bottom: 1px solid #334155 !important;
+    color: #ffffff !important;
+    padding: 1rem 1.5rem;
+  }
+
+  body.dark-mode .modal-title,
+  body.bm-dashboard-dark .modal-title {
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
+
+  body.dark-mode .modal-content .table thead th {
+    background-color: #2d3d5a !important;
+    color: #ffffff !important;
+    border-bottom: 2px solid #334155 !important;
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+  }

src/actions/allTeamsAction.js

@@ -251,7 +251,11 @@ export const updateTeamMemeberVisibility = (teamId, userId, visibility) => {
       .catch(error => {
         if (error.response) {
           // The request was made and the server responded with a status code
-          toast.error('Error updating visibility:', error.response.data);
+          const msg =
+            error.response?.data?.message ||
+            error.response?.data?.error ||
+            (typeof error.response?.data === 'string' ? error.response.data : 'Unknown error');
+          toast.error(`Error updating visibility: ${msg}`);
         } else if (error.request) {
           // The request was made but no response was received
           toast.error('Error updating visibility: No response received');

src/actions/blueSquareEmailBCCAction.js

@@ -61,7 +61,11 @@ export const deleteBlueSquareEmailAssignement = id => {
     try {
       const response = await axios.delete(url);
       if (response.status === 200) {
-        toast.info(response.data);
+        const msg =
+          typeof response.data === 'string'
+            ? response.data
+            : response.data?.message || JSON.stringify(response.data);
+        toast.info(msg);
         dispatch(deleteBlueSquareEmailBcc(response.data.id));
       } else {
         dispatch(blueSquareEmailBccError(response.data));

src/actions/rolePermissionPresets.js

@@ -46,7 +46,7 @@ export const createNewPreset = newPreset => {
       }
       return 0;
     } catch (error) {
-      toast.error(error);
+      toast.error(error?.message || String(error));
       return 1;
     }
   };
@@ -60,7 +60,7 @@ export const updatePresetById = updatedPreset => {
         dispatch(updatePreset(updatedPreset));
       }
     } catch (err) {
-      toast.info(err);
+      toast.info(err?.message || String(err));
     }
   };
 };
@@ -75,7 +75,7 @@ export const deletePresetById = presetId => {
       }
       return 1;
     } catch (error) {
-      toast.info(error);
+      toast.info(error?.message || String(error));
       return 1;
     }
   };

src/actions/task.js

@@ -190,7 +190,7 @@ export const deleteChildrenTasks = taskId => {
     try {
       await axios.post(ENDPOINTS.DELETE_CHILDREN(taskId));
     } catch (error) {
-      toast.info(error);
+      toast.info(error?.message || String(error));
     }
   };
 };
@@ -257,7 +257,7 @@ export const updateTask = (taskId, updatedTask, hasPermission, prevTask) => asyn
     }
   } catch (error) {
     // dispatch(fetchTeamMembersTaskError());
-    toast.info(error);
+    toast.info(error?.message || String(error));
     status = 400;
   }
   // TODO: DISPATCH TO TASKEDITSUGGESETIONS REDUCER TO UPDATE STATE

src/actions/team.js

@@ -106,7 +106,7 @@ export const fetchAllManagingTeams = (userId, managingTeams) => async dispatch =
     await dispatch(setTeamsStart());
     dispatch(setTeams(allManagingTeams));
   } catch (err) {
-    toast.error(err);
+    toast.error(err?.message || String(err));
     dispatch(setTeamsError(err));
   }
 };

src/actions/timeOffRequestAction.js

@@ -209,7 +209,7 @@ export const addTimeOffRequestThunk = request => async dispatch => {
     const AddedRequest = response.data;
     dispatch(addTimeOffRequest(AddedRequest));
   } catch (error) {
-    toast.info(error);
+    toast.info(error?.message || String(error));
   }
 };
 
@@ -220,7 +220,7 @@ export const updateTimeOffRequestThunk = (id, data) => async dispatch => {
     const updatedRequest = response.data;
     dispatch(updateTimeOffRequest(updatedRequest));
   } catch (error) {
-    toast.info(error);
+    toast.info(error?.message || String(error));
   }
 };
 
@@ -230,6 +230,6 @@ export const deleteTimeOffRequestThunk = id => async dispatch => {
     const deletedRequest = response.data;
     dispatch(deleteTimeOffRequest(deletedRequest));
   } catch (error) {
-    toast.info(error);
+    toast.info(error?.message || String(error));
   }
 };

src/actions/userProfile.js

@@ -77,7 +77,7 @@ export const getUserTasks = userId => {
         toast.info(`Get user task request status is not 200, status message: ${res.statusText}`);
       }
     } catch (error) {
-      toast.error(error);
+      toast.error(error?.message || String(error));
     }
   };
 };