Update all possible dependencies without breaking our builds

package.json

@@ -8,15 +8,15 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@rjsf/bootstrap-4": "^5.23.1",
-    "@rjsf/core": "^5.23.1",
-    "@rjsf/utils": "^5.23.1",
-    "@rjsf/validator-ajv6": "^5.23.1",
+    "@rjsf/bootstrap-4": "^5.24.8",
+    "@rjsf/core": "^5.24.8",
+    "@rjsf/utils": "^5.24.8",
+    "@rjsf/validator-ajv6": "^5.24.8",
     "@turf/turf": "^7.1.0",
     "ajv": "^8.17.1",
     "ajv-draft-04": "^1.0.0",
     "ajv-formats": "^3.0.1",
-    "axios": "1.7.8",
+    "axios": "1.8.4",
     "axios-progress-bar": "^1.2.0",
     "bootstrap": "5.3.3",
     "buffer": "^6.0.3",
@@ -35,9 +35,8 @@
     "pluralize": "^8.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-bootstrap": "2.10.6",
+    "react-bootstrap": "2.10.9",
     "react-collapsible": "^2.10.0",
-    "react-css-loaders": "^0.0.5",
     "react-datepicker": "^7.5.0",
     "react-debounce-render": "^8.0.2",
     "react-dom": "^18.3.1",
@@ -53,6 +52,7 @@
     "react-router-dom": "^7.0.1",
     "react-scripts": "5.0.1",
     "react-select": "^5.8.3",
+    "react-spinners": "^0.15.0",
     "react-to-print": "^3.0.2",
     "react-toastify": "^10.0.6",
     "react-window": "^1.8.10",
@@ -63,7 +63,7 @@
     "reselect": "^5.1.1",
     "socket.io-client": "^4.8.1",
     "suncalc": "^1.9.0",
-    "use-sound": "^4.0.3",
+    "use-sound": "^5.0.0",
     "uuid": "^11.0.3"
   },
   "scripts": {
@@ -81,28 +81,28 @@
     "postinstall": "sh setUpLocalGitConfig.sh"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/runtime": "^7.7.4",
+    "@babel/eslint-parser": "^7.27.0",
+    "@babel/runtime": "^7.27.0",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.0.16",
     "eslint": "^8.10.0",
-    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "jest-coverage-thresholds-bumper": "^1.0.1",
     "jest-webgl-canvas-mock": "^0.2.3",
-    "madge": "^5.0.1",
-    "msw": "^2.6.6",
+    "madge": "^8.0.0",
+    "msw": "^2.7.3",
     "redux-mock-store": "^1.5.3",
-    "sass": "^1.81.0",
+    "sass": "^1.86.0",
     "socket.io-mock": "^1.3.2",
-    "stylelint": "^13.13.1",
-    "stylelint-config-css-modules": "^2.2.0",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-scss": "^3.21.0",
+    "stylelint": "^16.17.0",
+    "stylelint-config-css-modules": "^4.4.0",
+    "stylelint-config-standard": "^37.0.0",
+    "stylelint-scss": "^6.11.1",
     "undici": "5.0.0"
   },
   "jest": {

src/AddToIncidentModal/index.js

@@ -1,6 +1,5 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import Button from 'react-bootstrap/Button';
-import { findDOMNode } from 'react-dom';
 import InfiniteScroll from 'react-infinite-scroller';
 import Modal from 'react-bootstrap/Modal';
 import PropTypes from 'prop-types';
@@ -78,7 +77,7 @@ const AddToIncidentModal = ({ id, onAddToExistingIncident, onAddToNewIncident })
       <div ref={scrollRef} className={styles.incidentScrollList}>
         <InfiniteScroll
           element="ul"
-          getScrollParent={() => findDOMNode(scrollRef.current)} // eslint-disable-line react/no-find-dom-node
+          getScrollParent={() => scrollRef.current}
           hasMore={hasMore}
           loadMore={onScroll}
           useWindow={false}

src/AddToPatrolModal/index.js

@@ -2,7 +2,6 @@ import React, { memo, useRef, useEffect, useState, useReducer, useMemo, useCallb
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { findDOMNode } from 'react-dom';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import InfiniteScroll from 'react-infinite-scroller';
@@ -179,7 +178,7 @@ const AddToPatrolModal = (props) => {
             hasMore={hasMore}
             loadMore={onScroll}
             useWindow={false}
-            getScrollParent={() => findDOMNode(scrollRef.current)}> {/* eslint-disable-line react/no-find-dom-node */}
+            getScrollParent={() => scrollRef.current}>
 
             {listPatrols.map((patrol, index) => {
 

src/DetailViewComponents/ActivitySection/ContainedReportListItem/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useMemo } from 'react';
 import Collapse from 'react-bootstrap/Collapse';
-import { ResizeSpinLoader } from 'react-css-loaders';
+import MoonLoader from 'react-spinners/MoonLoader';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
@@ -23,7 +23,7 @@ import activitySectionStyles from '../styles.module.scss';
 import styles from './styles.module.scss';
 
 const LOADER_COLOR = '#006cd9'; // Bright blue
-const LOADER_SIZE = 4;
+const LOADER_SIZE = 30;
 
 const ContainedReportListItem = ({ cardsExpanded, onCollapse, onExpand, report }) => {
   const dispatch = useDispatch();
@@ -96,7 +96,9 @@ const ContainedReportListItem = ({ cardsExpanded, onCollapse, onExpand, report }
             schema={reportSchemas.schema}
             uiSchema={reportSchemas.uiSchema}
           />
-          : <ResizeSpinLoader color={LOADER_COLOR} size={LOADER_SIZE} />}
+          : <div className={styles.loaderWrapper}>
+            <MoonLoader color={LOADER_COLOR} size={LOADER_SIZE} />
+          </div>}
       </div>
     </Collapse>
   </li>;

src/DetailViewComponents/ActivitySection/ContainedReportListItem/styles.module.scss

@@ -47,3 +47,9 @@
     flex: 11;
   }
 }
+
+.loaderWrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}

src/EventFeed/index.js

@@ -1,21 +1,19 @@
 import React, { memo, useContext, useMemo } from 'react';
-import { findDOMNode } from 'react-dom';
 import { Flipped, Flipper } from 'react-flip-toolkit';
 import InfiniteScroll from 'react-infinite-scroller';
-import PropTypes from 'prop-types';
+import MoonLoader from 'react-spinners/MoonLoader';
 import { useTranslation } from 'react-i18next';
 
 import { calcTimePropForSortConfig, sortEventsBySortConfig } from '../utils/event-filter';
 import { TAB_KEYS } from '../constants';
 
 import EventItemContextMenu from '../EventItemContextMenu';
-import LoadingOverlay from '../LoadingOverlay';
 import ReportListItem from '../ReportListItem';
 import { ScrollRestoration, SidebarScrollContext } from '../SidebarScrollContext';
 
 import styles from './styles.module.scss';
 
-const EventFeed = ({ className, events, hasMore, loading, onScroll, onTitleClick, sortConfig }) => {
+const EventFeed = ({ className = '', events = [], hasMore, loading, onScroll, onTitleClick, sortConfig }) => {
   const { t } = useTranslation('reports', { keyPrefix: 'eventFeed' });
 
   const { scrollRef } = useContext(SidebarScrollContext);
@@ -25,13 +23,15 @@ const EventFeed = ({ className, events, hasMore, loading, onScroll, onTitleClick
   const feedEvents = useMemo(() => sortEventsBySortConfig(events, sortConfig), [events, sortConfig]);
 
   if (loading) {
-    return <LoadingOverlay className={styles.loadingOverlay} />;
+    return <div className={styles.loaderWrapper}>
+      <MoonLoader />
+    </div>;
   }
 
   return <ScrollRestoration className={`${className} ${styles.scrollContainer}`} namespace={TAB_KEYS.EVENTS}>
     <InfiniteScroll
       element="ul"
-      getScrollParent={() => findDOMNode(scrollRef.current)} // eslint-disable-line react/no-find-dom-node
+      getScrollParent={() => scrollRef.current}
       hasMore={hasMore}
       loadMore={onScroll}
       useWindow={false}
@@ -66,19 +66,4 @@ const EventFeed = ({ className, events, hasMore, loading, onScroll, onTitleClick
   </ScrollRestoration>;
 };
 
-EventFeed.defaultProps = {
-  className: '',
-  events: [],
-};
-
-EventFeed.propTypes = {
-  className: PropTypes.string,
-  events: PropTypes.array,
-  hasMore: PropTypes.bool.isRequired,
-  loading: PropTypes.bool.isRequired,
-  onScroll: PropTypes.func.isRequired,
-  onTitleClick: PropTypes.func.isRequired,
-  sortConfig: PropTypes.array.isRequired,
-};
-
 export default memo(EventFeed);

src/EventFeed/styles.module.scss

@@ -17,8 +17,12 @@ div.scrollContainer {
   position: relative;
 }
 
-.loadingOverlay {
-  background: none;
+.loaderWrapper {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-top: 7rem;
+  width: 100%;
 }
 
 .contextMenu {

src/EventItemContextMenu/index.js

@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useState } from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
-import PropTypes from 'prop-types';
-import { SpinLoader } from 'react-css-loaders';
+import MoonLoader from 'react-spinners/MoonLoader';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
@@ -16,6 +15,8 @@ import TextCopyBtn from '../TextCopyBtn';
 
 import styles from './styles.module.scss';
 
+const LOADER_SIZE = 30;
+
 const NotificationDetails = ({ failedReports, isActive, processedReports }) => {
   const { t } = useTranslation('reports', { keyPrefix: 'eventItemContextMenu' });
 
@@ -42,7 +43,7 @@ const NotificationDetails = ({ failedReports, isActive, processedReports }) => {
   return processedReportsElements;
 };
 
-const EventItemContextMenu = ({ children, className, report }) => {
+const EventItemContextMenu = ({ children, className = '', report }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation('reports', { keyPrefix: 'eventItemContextMenu' });
 
@@ -136,21 +137,11 @@ const EventItemContextMenu = ({ children, className, report }) => {
     </>
   }>
     {isLoading && <div className={styles.loading}>
-      <SpinLoader />
+      <MoonLoader size={LOADER_SIZE} />
     </div>}
 
     {children}
   </ContextMenu>;
 };
 
-EventItemContextMenu.defaultProps = {
-  className: ''
-};
-
-EventItemContextMenu.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  report: PropTypes.object.isRequired,
-};
-
 export default memo(EventItemContextMenu);

src/EventItemContextMenu/styles.module.scss

@@ -1,6 +1,9 @@
 @import '../common/styles/vars/colors';
 
 .loading {
+  align-items: center;
+  display: flex;
+  justify-content: center;
   width: 100%;
   height: 3.85rem;
   position: absolute;

src/LoadingOverlay/index.js

@@ -1,20 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { SpinLoader } from 'react-css-loaders';
+import MoonLoader from 'react-spinners/MoonLoader';
 
 import styles from './styles.module.scss';
 
-const LoadingOverlay = props => {
-  const { style = {}, className = '', message = '', ...rest } = props;
+const LOADER_SIZE = 50;
 
-  return <div style={style} className={`${styles.background} ${className}`} {...rest}>
-    <SpinLoader className={styles.spinner} />
-    {message && <span>{message}</span>}
-  </div>;
-};
+const LoadingOverlay = ({ className = '', message = '', style = {}, ...otherProps }) => <div
+    className={`${styles.overlay} ${className}`}
+    style={style}
+    {...otherProps}
+  >
+  <MoonLoader color="white" size={LOADER_SIZE} />
 
-export default LoadingOverlay;
+  {message && <span className={styles.message}>{message}</span>}
+</div>;
 
-LoadingOverlay.propTypes = {
-  message: PropTypes.string,
-};
+export default LoadingOverlay;

src/LoadingOverlay/styles.module.scss

@@ -1,23 +1,17 @@
-.background {
+.overlay {
   align-items: center;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   display: flex;
   flex-flow: column;
-  font-style: italic;
   height: 100%;
   justify-content: center;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
-}
 
-.spinner {
-  background: rgba(0, 0, 0, 0.5);
-  height: 100%;
-  margin: 0;
-  max-height: 4rem;
-  max-width: 4rem;
-  width: 100%;
-}
+  .message {
+    margin-top: 0.5rem;
+  }
+}

src/MapMarkerDropper/index.js

@@ -111,7 +111,6 @@ const MapMarkerDropper = ({ map, onMarkerDropped, showMarkerPopup = true, ...res
       onClick={startMovingReportMarker}
       onPick={onLocationSelect}
       showInstructionsPopup={false}
-      wrapperClassName={styles.buttons}
     />
 
     {shouldShowMarkerLayer && <>