Merged in feature/IO-2877-Package-Updates-Alert-Update (pull request #1597)

- Remove Joyride and its cause - Package updates (front + back)
2024-08-14 15:56:43 +00:00
parent 97282740f5 b1cda41f56
commit 84ad10fa9c
13 changed files with 958 additions and 1143 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -8,22 +8,22 @@
  "private": true,
  "proxy": "http://localhost:4000",
  "dependencies": {
-    "@ant-design/pro-layout": "^7.19.11",
-    "@apollo/client": "^3.10.8",
+    "@ant-design/pro-layout": "^7.19.12",
+    "@apollo/client": "^3.11.4",
    "@emotion/is-prop-valid": "^1.3.0",
    "@fingerprintjs/fingerprintjs": "^4.4.3",
    "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.6",
-    "@sentry/cli": "^2.32.2",
+    "@reduxjs/toolkit": "^2.2.7",
+    "@sentry/cli": "^2.33.1",
    "@sentry/react": "^7.114.0",
-    "@splitsoftware/splitio-react": "^1.12.0",
+    "@splitsoftware/splitio-react": "^1.12.1",
    "@tanem/react-nprogress": "^5.0.51",
    "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.19.3",
+    "antd": "^5.20.1",
    "apollo-link-logger": "^2.0.1",
    "apollo-link-sentry": "^3.3.0",
    "autosize": "^6.0.1",
-    "axios": "^1.6.8",
+    "axios": "^1.7.4",
    "classnames": "^2.5.1",
    "css-box-model": "^1.2.1",
    "dayjs": "^1.11.12",
@@ -32,45 +32,44 @@
    "dotenv": "^16.4.5",
    "env-cmd": "^10.1.0",
    "exifr": "^7.1.3",
-    "firebase": "^10.12.4",
+    "firebase": "^10.12.5",
    "graphql": "^16.9.0",
-    "i18next": "^23.12.2",
+    "i18next": "^23.12.3",
    "i18next-browser-languagedetector": "^8.0.0",
    "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.4",
-    "logrocket": "^8.1.1",
+    "libphonenumber-js": "^1.11.5",
+    "logrocket": "^8.1.2",
    "markerjs2": "^2.32.1",
    "memoize-one": "^6.0.0",
    "normalize-url": "^8.0.1",
    "object-hash": "^3.0.0",
    "prop-types": "^15.8.1",
-    "query-string": "^9.0.0",
+    "query-string": "^9.1.0",
    "raf-schd": "^4.0.3",
    "react": "^18.3.1",
-    "react-big-calendar": "^1.13.1",
+    "react-big-calendar": "^1.13.2",
    "react-color": "^2.19.3",
-    "react-cookie": "^7.1.4",
+    "react-cookie": "^7.2.0",
    "react-dom": "^18.3.1",
    "react-drag-listview": "^2.0.0",
    "react-grid-gallery": "^1.0.1",
    "react-grid-layout": "1.3.4",
    "react-i18next": "^14.1.3",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
    "react-image-lightbox": "^5.1.4",
-    "react-joyride": "^2.8.2",
    "react-markdown": "^9.0.1",
    "react-number-format": "^5.4.0",
    "react-popopo": "^2.1.9",
    "react-product-fruits": "^2.2.6",
    "react-redux": "^9.1.2",
    "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.25.1",
+    "react-router-dom": "^6.26.0",
    "react-sticky": "^6.0.3",
    "react-virtualized": "^9.22.5",
-    "react-virtuoso": "^4.7.12",
+    "react-virtuoso": "^4.10.1",
    "recharts": "^2.12.7",
    "redux": "^5.0.1",
-    "redux-actions": "^3.0.0",
+    "redux-actions": "^3.0.3",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.3.0",
    "redux-state-sync": "^3.1.4",
@@ -80,7 +79,7 @@
    "styled-components": "^6.1.12",
    "subscriptions-transport-ws": "^0.11.0",
    "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.2",
+    "userpilot": "^1.3.5",
    "vite-plugin-ejs": "^1.7.0",
    "web-vitals": "^3.5.2"
  },
@@ -131,29 +130,29 @@
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-react": "^7.24.7",
-    "@dotenvx/dotenvx": "^1.6.4",
+    "@dotenvx/dotenvx": "^1.7.0",
    "@emotion/babel-plugin": "^11.12.0",
-    "@emotion/react": "^11.12.0",
-    "@sentry/webpack-plugin": "^2.21.1",
+    "@emotion/react": "^11.13.0",
+    "@sentry/webpack-plugin": "^2.22.2",
    "@testing-library/cypress": "^10.0.2",
-    "browserslist": "^4.23.2",
+    "browserslist": "^4.23.3",
    "browserslist-to-esbuild": "^2.1.1",
    "cross-env": "^7.0.3",
-    "cypress": "^13.13.1",
+    "cypress": "^13.13.3",
    "eslint": "^8.57.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-cypress": "^2.15.1",
-    "memfs": "^4.9.3",
+    "memfs": "^4.11.1",
    "os-browserify": "^0.3.0",
    "react-error-overlay": "6.0.11",
    "redux-logger": "^3.0.6",
    "source-map-explorer": "^2.5.3",
-    "vite": "^5.3.4",
+    "vite": "^5.4.0",
    "vite-plugin-babel": "^1.2.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-legacy": "^2.1.0",
    "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-pwa": "^0.20.0",
+    "vite-plugin-pwa": "^0.20.1",
    "vite-plugin-style-import": "^2.0.0"
  }
 }
--- a/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
+++ b/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
@@ -36,9 +36,6 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
    };
  });

-  console.log("Scheduled Out Today");
-  console.dir(scheduledOutToday);
-
  const tvFontSize = 18;
  const tvFontWeight = "bold";

--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -16,18 +16,15 @@ import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import { setJoyRideSteps } from "../../redux/application/application.actions";
 import { OwnerNameDisplayFunction } from "./../owner-name-display/owner-name-display.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });

-const mapDispatchToProps = (dispatch) => ({
-  setJoyRideSteps: (steps) => dispatch(setJoyRideSteps(steps))
-});
+const mapDispatchToProps = (dispatch) => ({});

-export function JobsList({ bodyshop, setJoyRideSteps }) {
+export function JobsList({ bodyshop }) {
  const searchParams = queryString.parse(useLocation().search);
  const { selected } = searchParams;
  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
--- a/client/src/components/update-alert/update-alert.component.jsx
+++ b/client/src/components/update-alert/update-alert.component.jsx
@@ -1,7 +1,7 @@
 import { AlertOutlined } from "@ant-design/icons";
 import { Alert, Button, Col, Row, Space } from "antd";
 import i18n from "i18next";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,39 +12,42 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 const mapStateToProps = createStructuredSelector({
  updateAvailable: selectUpdateAvailable
 });
+
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  // setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-export default connect(mapStateToProps, mapDispatchToProps)(UpdateAlert);
-const intervalMS = 10 * 60 * 1000;
+
 export function UpdateAlert({ updateAvailable }) {
  const { t } = useTranslation();
-
  const {
-    offlineReady: [
-      offlineReady //setOfflineReady
-    ],
-    needRefresh: [
-      needRefresh //setNeedRefresh
-    ],
+    offlineReady: [offlineReady],
+    needRefresh: [needRefresh],
    updateServiceWorker
  } = useRegisterSW({
    onRegistered(r) {
-      // eslint-disable-next-line prefer-template
-      console.log("SW Registered: " + r);
-      r &&
-        setInterval(() => {
-          r.update();
-        }, intervalMS);
+      console.log("SW Registered:", r);
+      if (r) {
+        setInterval(
+          () => {
+            r.update();
+          },
+          10 * 60 * 1000
+        );
+      }
    },
    onRegisterError(error) {
-      console.log("SW registration error", error);
+      console.error("SW registration error", error);
    }
  });

-  if (import.meta.env.DEV) console.log(`SW Status => Refresh? ${needRefresh} - offlineReady? ${offlineReady}`);
+  useEffect(() => {
+    if (import.meta.env.DEV) {
+      console.log(`SW Status => Refresh? ${needRefresh} - offlineReady? ${offlineReady}`);
+    }
+  }, [needRefresh, offlineReady]);

  if (!needRefresh) return null;
+
  return (
    <Alert
      message={t("general.messages.newversiontitle", {
@@ -69,19 +72,10 @@ export function UpdateAlert({ updateAvailable }) {
          </Col>
          <Col sm={24} md={8} lg={6}>
            <Space wrap>
-              <Button
-                onClick={async () => {
-                  window.open("https://imex-online.noticeable.news/", "_blank");
-                }}
-              >
+              <Button onClick={() => window.open("https://imex-online.noticeable.news/", "_blank")}>
                {i18n.t("general.actions.viewreleasenotes")}
              </Button>
-              <Button
-                type="primary"
-                onClick={async () => {
-                  updateServiceWorker(true);
-                }}
-              >
+              <Button type="primary" onClick={() => updateServiceWorker(true)}>
                {i18n.t("general.actions.refresh")}
              </Button>
            </Space>
@@ -93,3 +87,5 @@ export function UpdateAlert({ updateAvailable }) {
    />
  );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(UpdateAlert);
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -12,7 +12,6 @@ import ErrorBoundary from "../../components/error-boundary/error-boundary.compon
 //import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
 import * as Sentry from "@sentry/react";
-import Joyride from "react-joyride";
 import TestComponent from "../../components/_test/test.page";
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
@@ -23,8 +22,6 @@ import { requestForToken } from "../../firebase/firebase.utils";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";

 import UpdateAlert from "../../components/update-alert/update-alert.component";
-import { setJoyRideFinished } from "../../redux/application/application.actions.js";
-import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";

@@ -105,16 +102,12 @@ const { Content, Footer } = Layout;

 const mapStateToProps = createStructuredSelector({
  conflict: selectInstanceConflict,
-  bodyshop: selectBodyshop,
-  enableJoyRide: selectEnableJoyRide,
-  joyRideSteps: selectJoyRideSteps
+  bodyshop: selectBodyshop
 });

-const mapDispatchToProps = (dispatch) => ({
-  setJoyRideFinished: (steps) => dispatch(setJoyRideFinished(steps))
-});
+const mapDispatchToProps = (dispatch) => ({});

-export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoyRideFinished }) {
+export function Manage({ conflict, bodyshop }) {
  const { t } = useTranslation();
  const [chatVisible] = useState(false);

@@ -583,21 +576,6 @@ export function Manage({ conflict, bodyshop, enableJoyRide, joyRideSteps, setJoy
        <UpdateAlert />
        <HeaderContainer />
        <Content className="content-container">
-          <Joyride
-            debug
-            run={enableJoyRide}
-            steps={joyRideSteps}
-            continuous
-            hideCloseButton
-            scrollToFirstStep
-            showProgress
-            showSkipButton
-            callback={(props) => {
-              if (props.action === "reset") {
-                setJoyRideFinished();
-              }
-            }}
-          />
          <PartnerPingComponent />
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            {PageContent}
--- a/client/src/redux/application/application.actions.js
+++ b/client/src/redux/application/application.actions.js
@@ -67,11 +67,3 @@ export const setUpdateAvailable = (isUpdateAvailable) => ({
  type: ApplicationActionTypes.SET_UPDATE_AVAILABLE,
  payload: isUpdateAvailable
 });
-export const setJoyRideSteps = (steps) => ({
-  type: ApplicationActionTypes.SET_JOYRIDE_STEPS,
-  payload: steps
-});
-export const setJoyRideFinished = () => ({
-  type: ApplicationActionTypes.SET_JOYRIDE_FINISHED
-  //payload: isUpdateAvailable,
-});
--- a/client/src/redux/application/application.reducer.js
+++ b/client/src/redux/application/application.reducer.js
@@ -14,9 +14,7 @@ const INITIAL_STATE = {
    error: null
  },
  jobReadOnly: false,
-  partnerVersion: null,
-  enableJoyRide: false,
-  joyRideSteps: []
+  partnerVersion: null
 };

 const applicationReducer = (state = INITIAL_STATE, action) => {
@@ -89,12 +87,6 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
    case ApplicationActionTypes.SET_PROBLEM_JOBS: {
      return { ...state, problemJobs: action.payload };
    }
-    case ApplicationActionTypes.SET_JOYRIDE_STEPS: {
-      return { ...state, enableJoyRide: true, joyRideSteps: action.payload };
-    }
-    case ApplicationActionTypes.SET_JOYRIDE_FINISHED: {
-      return { ...state, enableJoyRide: false, joyRideSteps: [] };
-    }
    default:
      return state;
  }
--- a/client/src/redux/application/application.selectors.js
+++ b/client/src/redux/application/application.selectors.js
@@ -22,5 +22,3 @@ export const selectJobReadOnly = createSelector([selectApplication], (applicatio
 export const selectOnline = createSelector([selectApplication], (application) => application.online);
 export const selectProblemJobs = createSelector([selectApplication], (application) => application.problemJobs);
 export const selectUpdateAvailable = createSelector([selectApplication], (application) => application.updateAvailable);
-export const selectEnableJoyRide = createSelector([selectApplication], (application) => application.enableJoyRide);
-export const selectJoyRideSteps = createSelector([selectApplication], (application) => application.joyRideSteps);
--- a/client/src/redux/application/application.types.js
+++ b/client/src/redux/application/application.types.js
@@ -12,8 +12,6 @@ const ApplicationActionTypes = {
  SET_ONLINE_STATUS: "SET_ONLINE_STATUS",
  INSERT_AUDIT_TRAIL: "INSERT_AUDIT_TRAIL",
  SET_PROBLEM_JOBS: "SET_PROBLEM_JOBS",
-  SET_UPDATE_AVAILABLE: "SET_UPDATE_AVAILABLE",
-  SET_JOYRIDE_STEPS: "SET_JOYRIDE_STEPS",
-  SET_JOYRIDE_FINISHED: "SET_JOYRIDE_FINISHED"
+  SET_UPDATE_AVAILABLE: "SET_UPDATE_AVAILABLE"
 };
 export default ApplicationActionTypes;
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -6,8 +6,6 @@ import * as url from "url";
 import { defineConfig } from "vite";
 import { ViteEjsPlugin } from "vite-plugin-ejs";
 import eslint from "vite-plugin-eslint";
-
-//import CompressionPlugin from 'vite-plugin-compression';
 import { VitePWA } from "vite-plugin-pwa";
 import InstanceRenderManager from "./src/utils/instanceRenderMgr";

@@ -16,7 +14,8 @@ process.env.VITE_APP_GIT_SHA_DATE = new Date().toLocaleString("en-US", {
 });

 const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
-function reactVirtualized() {
+
+function reactVirtualizedFix() {
  return {
    name: "flat:react-virtualized",
    configResolved: async () => {
@@ -37,10 +36,7 @@ function reactVirtualized() {
 export default defineConfig({
  base: "/",
  plugins: [
-    ViteEjsPlugin((viteConfig) => {
-      // viteConfig is the current Vite resolved config
-      return { env: viteConfig.env };
-    }),
+    ViteEjsPlugin((viteConfig) => ({ env: viteConfig.env })),
    VitePWA({
      injectRegister: "auto",
      registerType: "prompt",
@@ -60,7 +56,6 @@ export default defineConfig({
        description: "The ultimate bodyshop management system.",
        icons: [
          {
-            //TODO:AIO Ensure that these are correct for Rome and IO.
            src: InstanceRenderManager({
              instance: process.env.VITE_APP_INSTANCE,
              imex: "favicon.png",
@@ -101,7 +96,7 @@ export default defineConfig({
        gcm_sender_id: "103953800507"
      }
    }),
-    reactVirtualized(),
+    reactVirtualizedFix(),
    react(),
    eslint()
    // CompressionPlugin(), //Cloudfront already compresses assets, so not needed.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,18 +19,18 @@
    "makeitpretty": "prettier --write \"**/*.{css,js,json,jsx,scss}\""
  },
  "dependencies": {
-    "@aws-sdk/client-secrets-manager": "^3.616.0",
-    "@aws-sdk/client-ses": "^3.616.0",
-    "@aws-sdk/credential-provider-node": "^3.616.0",
-    "@opensearch-project/opensearch": "^2.10.0",
-    "aws4": "^1.13.0",
-    "axios": "^1.7.2",
+    "@aws-sdk/client-secrets-manager": "^3.629.0",
+    "@aws-sdk/client-ses": "^3.629.0",
+    "@aws-sdk/credential-provider-node": "^3.629.0",
+    "@opensearch-project/opensearch": "^2.11.0",
+    "aws4": "^1.13.1",
+    "axios": "^1.7.4",
    "better-queue": "^3.8.12",
    "bluebird": "^3.7.2",
    "body-parser": "^1.20.2",
    "canvas": "^2.11.2",
    "chart.js": "^4.4.3",
-    "cloudinary": "^2.3.0",
+    "cloudinary": "^2.4.0",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.6",
    "cors": "2.8.5",
@@ -38,24 +38,24 @@
    "dinero.js": "^1.9.1",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
-    "firebase-admin": "^12.2.0",
+    "firebase-admin": "^12.3.1",
    "graphql": "^16.9.0",
    "graphql-request": "^6.1.0",
    "graylog2": "^0.2.1",
    "inline-css": "^4.0.2",
    "intuit-oauth": "^4.1.2",
-    "json-2-csv": "^5.5.4",
+    "json-2-csv": "^5.5.5",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "moment-timezone": "^0.5.45",
    "multer": "^1.4.5-lts.1",
    "node-mailjet": "^6.0.5",
-    "node-persist": "^4.0.2",
+    "node-persist": "^4.0.3",
    "nodemailer": "^6.9.14",
    "phone": "^3.1.49",
    "recursive-diff": "^1.0.9",
    "rimraf": "^6.0.1",
-    "soap": "^1.1.0",
+    "soap": "^1.1.1",
    "socket.io": "^4.7.5",
    "ssh2-sftp-client": "^10.0.3",
    "twilio": "^4.23.0",