[MDS-6103] Upgraded build related npm packages + upgraded codebase to…

… support newest sass version (#3278)

* MDS-6103 Fixed scss build warnings. Upgraded build webpack configs

* MDS-6103 Fixed syncfusion imports

* Updated webpack scss config for minespace

* MDS-6103 Fixed minespace web scss upgrade

* MDS-6103 Fixed minespace scss warnings + webpack import warning

* Removed unused packages

* Removed husky warning

* Updated package versions

* Fixed tests after upgrades

* MDS-6103 Reverted permit changes

* Removed unused code

* MDS-6103 Cleanup

* Updated ts-node version

* MDS-6103 Fix cypress video uploading

* MDS-6103 Updated timeAgo func

* Fixed spec

* Updated helper.ts

* Updated helper

* Update

* Fixed cypress tests

* Updated cypress tests

* Updated cypress test

* Click on first doc

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 echo "linting staged files"
 yarn lint-staged

.husky/pre-push

@@ -1,5 +1,4 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 #echo "pre-push lint"
 yarn lint-prepush

docs/feature_flags.md

@@ -28,7 +28,7 @@ Preferred method if using feature flag in a functional React component.
 
 ```typescript
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
-import { Feature } from "@mds/common";
+import { Feature } from "@mds/common/utils/featureFlag";;
 
 const ThisIsAReactComponent = () => {
   const { isFeatureEnabled } = useFeatureFlag();
@@ -45,7 +45,7 @@ Alternative method if using feature flag in a React component and you cannot use
 
 ```typescript
 import withFeatureFlag from "@mds/common/providers/featureFlags/withFeatureFlag";
-import { Feature } from "@mds/common";
+import { Feature } from "@mds/common/utils/featureFlag";;
 
 class ThisIsAReactComponent {
   render() {
@@ -66,7 +66,7 @@ You can use the `FeatureFlagGuard` and pass along the feature you want to check
 If it's not enabled, you get a nice little "you don't have access" notice.
 
 ```typescript
-import { Feature } from "@mds/common";
+import { Feature } from "@mds/common/utils/featureFlag";
 import FeatureFlagGuard from "@/components/common/featureFlag.guard";
 
 const DamsPage: React.FC<DamsPageProps> = (props) => {
@@ -96,7 +96,7 @@ Please use the other methods above as far as you can.
 
 ```typescript
 import { isFeatureEnabled } from @mds/common;
-import { Feature } from "@mds/common";
+import { Feature } from "@mds/common/utils/featureFlag";;
 
 console.log(isFeatureEnabled(Feature.TSF_V2));
 

package.json

@@ -14,26 +14,27 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "eslint": "7.27.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "6.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.10.0",
+    "@typescript-eslint/parser": "^8.10.0",
+    "eslint": "7.32.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "27.1.6",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.18.0",
-    "husky": "8.0.2",
-    "lint-prepush": "2.2.1",
-    "lint-staged": "10.0.0",
-    "prettier": "1.19.1"
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jest": "28.8.3",
+    "eslint-plugin-jsx-a11y": "6.10.1",
+    "eslint-plugin-react": "7.37.1",
+    "husky": "9.1.6",
+    "lint-prepush": "3.0.2",
+    "lint-staged": "15.2.10",
+    "prettier": "3.3.3"
   },
   "resolutions": {
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
-    "@types/react-router-dom": "5.3.3"
+    "@types/react-router-dom": "5.3.3",
+    "cheerio": "1.0.0-rc.3"
   },
   "scripts": {
     "postinstall": "husky install"
@@ -54,7 +55,7 @@
   },
   "dependencies": {
     "dompurify": "^3.1.7",
-    "html-react-parser": "^5.1.17",
+    "html-react-parser": "^5.1.18",
     "react-quill": "^2.0.0"
   }
 }

services/common/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
     "^.+\\.(t|j)sx?$": [
       "ts-jest",
       {
-        tsConfigFile: "./tsconfig.json",
+        tsconfig: "./tsconfig.json",
         isolatedModules: true,
       },
     ],

services/common/package.json

@@ -47,36 +47,35 @@
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.8",
     "clean-webpack-plugin": "4.0.0",
-    "copy-webpack-plugin": "10.1.0",
+    "copy-webpack-plugin": "12.0.2",
     "hard-source-webpack-plugin": "0.13.1",
-    "html-webpack-plugin": "5.5.3",
-    "image-minimizer-webpack-plugin": "3.8.3",
-    "imagemin": "8.0.1",
+    "html-webpack-plugin": "5.6.2",
+    "image-minimizer-webpack-plugin": "4.1.0",
+    "imagemin": "9.0.0",
     "jest": "29.7.0",
-    "jest-dom": "4.0.0",
-    "mini-css-extract-plugin": "2.7.6",
+    "mini-css-extract-plugin": "2.9.1",
     "msw": "2.3.5",
-    "postcss-loader": "7.3.3",
-    "prettier": "1.19.1",
+    "postcss": "8.4.47",
+    "postcss-loader": "8.1.1",
+    "prettier": "3.3.3",
     "react-hot-loader": "4.12.21",
     "sharp": "^0.33.3",
-    "style-loader": "3.3.3",
-    "terser-webpack-plugin": "5.3.9",
-    "ts-jest": "29.1.2",
+    "style-loader": "4.0.0",
+    "ts-jest": "29.2.5",
     "typescript": "4.7.4",
     "undici": "6.19.7",
-    "webpack": "5.88.1",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.1.0",
     "webpack-manifest-plugin": "5.0.0",
-    "webpack-merge": "5.9.0",
+    "webpack-merge": "6.0.1",
     "webpack-node-externals": "3.0.0"
   },
   "optionalDependencies": {
-    "jest-canvas-mock": "2.1.0",
+    "jest-canvas-mock": "2.5.2",
     "jest-environment-jsdom": "29.7.0",
     "jest-environment-jsdom-global": "4.0.0",
-    "jest-junit": "6.4.0",
+    "jest-junit": "16.0.0",
     "jest-sonar-reporter": "2.0.0"
   },
   "jestSonar": {

services/common/src/components/projectSummary/ProjectManagement.spec.tsx

@@ -24,8 +24,8 @@ const initialState = {
     projectSummaryMinistryComments: MOCK.PROJECT_SUMMARY_MINISTRY_COMMENTS.map((comment) => {
       return {
         ...comment,
-        update_timestamp: subDays(new Date(), 10).toISOString(),
-        create_timestamp: subDays(new Date(), 10).toISOString(),
+        update_timestamp: subDays(new Date(), 10).toUTCString(),
+        create_timestamp: subDays(new Date(), 10).toUTCString(),
       };
     }),
   },
@@ -46,7 +46,7 @@ describe("Project Management", () => {
         <FormWrapper
           name={FORM.ADD_EDIT_PROJECT_SUMMARY}
           initialValues={initialState.form[FORM.ADD_EDIT_PROJECT_SUMMARY].values}
-          onSubmit={() => {}}
+          onSubmit={() => { }}
         >
           <ProjectManagement />
         </FormWrapper>

services/common/src/redux/utils/helpers.ts

@@ -109,16 +109,15 @@ export const formatDateTimeUserTz = (dateTime: Date | string): string => {
 
 export const timeAgo = (dateTime, unit = "day") => {
   const startDate = dateTime;
-  const endDate = new Date().toUTCString();
-
+  const endDate = moment();
   if (unit === "day") {
-    return moment(endDate).diff(moment(startDate), "days");
+    return endDate.diff(moment(startDate), "days");
   } else if (unit === "hours") {
-    return moment(endDate).diff(moment(startDate), "hours");
+    return endDate.diff(moment(startDate), "hours");
   } else if (unit === "minutes") {
-    return moment(endDate).diff(moment(startDate), "minutes");
+    return endDate.diff(moment(startDate), "minutes");
   } else {
-    return moment(endDate).diff(moment(startDate), "seconds");
+    return endDate.diff(moment(startDate), "seconds");
   }
 };
 
@@ -653,7 +652,7 @@ export const getHighestConsequence = (tsf) => {
 
   const highestRankedDam = tsf.dams.reduce((prev, current) =>
     CONSEQUENCE_CLASSIFICATION_RANK_HASH[prev.consequence_classification] >
-    CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification]
+      CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification]
       ? prev
       : current
   );
@@ -670,20 +669,17 @@ export const getMineReportStatusDescription = (
   const update_timestamp = latestSubmission?.update_timestamp;
   const updatedDate = moment(update_timestamp).format("YYYY-MM-DD");
   const MINE_REPORT_STATUS_DESCRIPTION_HASH = {
-    [MINE_REPORT_SUBMISSION_CODES.NON]: `The ministry has requested for the report from the proponent through MineSpace. Requested by ${
-      latestSubmission?.update_user
-    } on ${formatDate(updatedDate)}`,
+    [MINE_REPORT_SUBMISSION_CODES.NON]: `The ministry has requested for the report from the proponent through MineSpace. Requested by ${latestSubmission?.update_user
+      } on ${formatDate(updatedDate)}`,
     [MINE_REPORT_SUBMISSION_CODES.ACC]:
       "The Ministry has reviewed the report, no more revision is required",
     [MINE_REPORT_SUBMISSION_CODES.REC]:
       "Ministry has received changes after requesting for more information. The revised information has not been reviewed.",
-    [MINE_REPORT_SUBMISSION_CODES.REQ]: `Requesting more information from the proponent through MineSpace. Requested by ${
-      latestSubmission?.update_user
-    } on ${formatDate(updatedDate)}`,
+    [MINE_REPORT_SUBMISSION_CODES.REQ]: `Requesting more information from the proponent through MineSpace. Requested by ${latestSubmission?.update_user
+      } on ${formatDate(updatedDate)}`,
     [MINE_REPORT_SUBMISSION_CODES.INI]: "The report has been submitted successfully",
-    [MINE_REPORT_SUBMISSION_CODES.WTD]: `The report has been withdrawn. Withdrew by ${
-      latestSubmission?.update_user
-    } on ${formatDate(updatedDate)}`,
+    [MINE_REPORT_SUBMISSION_CODES.WTD]: `The report has been withdrawn. Withdrew by ${latestSubmission?.update_user
+      } on ${formatDate(updatedDate)}`,
     [MINE_REPORT_SUBMISSION_CODES.NRQ]: "This report is not requested",
   };
   return MINE_REPORT_STATUS_DESCRIPTION_HASH[statusCode] || "";

services/core-web/common/utils/helpers.ts

@@ -10,8 +10,9 @@ import moment from "moment-timezone";
 import { reset } from "redux-form";
 import { ItemMap } from "@mds/common";
 
+
 /**
- * Helper function to clear redux form after submission
+ * Helper function to clear redux form after submissions
  *
  * Usage:
  *  export default (reduxForm({
@@ -94,19 +95,20 @@ export const formatDateTimeUserTz = (dateTime: Date | string): string => {
 
 export const timeAgo = (dateTime, unit = "day") => {
   const startDate = dateTime;
-  const endDate = new Date().toUTCString();
-
+  const endDate = moment();
   if (unit === "day") {
-    return moment(endDate).diff(moment(startDate), "days");
+    return endDate.diff(moment(startDate), "days");
   } else if (unit === "hours") {
-    return moment(endDate).diff(moment(startDate), "hours");
+    return endDate.diff(moment(startDate), "hours");
   } else if (unit === "minutes") {
-    return moment(endDate).diff(moment(startDate), "minutes");
+    return endDate.diff(moment(startDate), "minutes");
   } else {
-    return moment(endDate).diff(moment(startDate), "seconds");
+    return endDate.diff(moment(startDate), "seconds");
   }
 };
 
+
+
 export const formatPostalCode = (code) => code && code.replace(/.{3}$/, " $&");
 
 export const formatTitleString = (input) =>
@@ -591,7 +593,7 @@ export const getHighestConsequence = (tsf) => {
 
   const highestRankedDam = tsf.dams.reduce((prev, current) =>
     CONSEQUENCE_CLASSIFICATION_RANK_HASH[prev.consequence_classification] >
-    CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification]
+      CONSEQUENCE_CLASSIFICATION_RANK_HASH[current.consequence_classification]
       ? prev
       : current
   );

services/core-web/cypress.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   chromeWebSecurity: false,
   viewportWidth: 1960,
   viewportHeight: 1080,
-  videoUploadOnPasses: false,
+  video: true,
   supportFolder: "cypress/support",
   defaultCommandTimeout: 15000,
   e2e: {

services/core-web/cypress/e2e/majorprojects.cy.ts

@@ -90,28 +90,37 @@ describe("Major Projects", () => {
       });
     });
 
-    // Intercept the GET request and stub the response
-    cy.intercept("GET", "**/documents**", (req) => {
-      // Set the desired response properties
-      req.reply({
-        statusCode: 301,
-        body: "Mocked response data",
-      });
-    }).as("downloadRequest");
+
     cy.wait(2500);
     cy.get("[data-cy=menu-actions-button]")
-      .last()
+      .first()
       .click({ force: true });
 
+
+    cy.intercept(
+      "GET",
+      /.*download-token\/.*$/,
+      {
+        statusCode: 200,
+        body: {
+          token_guid: "ec851412-9c91-48cd-8917-dd58f0934b16"
+        },
+      }
+    ).as('dlReq');
+
+    cy.window().then((win) => {
+      cy.stub(win, 'open').as('windowOpen');
+    });
+
+
     // Click the Download file button in the dropdown
     cy.contains("button", "Download file", { timeout: 3000 })
       .find("div")
       .click({ force: true });
 
-    // Wait for the network request to complete
-    cy.wait("@downloadRequest").then((interception) => {
-      // Check that the download request was made successfully
-      expect(interception.response.statusCode).to.equal(301);
-    });
+    cy.wait('@dlReq');
+
+    cy.get('@windowOpen').should('have.been.calledWith', `${Cypress.env("CYPRESS_DOC_MAN_URL")}/documents?token=ec851412-9c91-48cd-8917-dd58f0934b16`, '_blank')
+
   });
 });

services/core-web/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
     "^.+\\.(t|j)sx?$": [
       "ts-jest",
       {
-        tsConfigFile: "./tsconfig.json",
+        tsconfig: "./tsconfig.json",
         isolatedModules: true,
       },
     ],