Merge branch 'master' into map-performance

.eslintrc

@@ -91,7 +91,7 @@
             "property": "propTypes"
           },
           {
-            "property": "defaultProps"
+            "property": "components"
           },
           {
             "property": "current"

.github/workflows/build_website.yml

@@ -61,6 +61,11 @@ jobs:
         working-directory: packages/website
         run: yarn build
 
+      - name: Create 200.html for surge deployment
+        if: steps.build_website.outcome == 'success' && github.event.pull_request.number != null
+        working-directory: packages/website/build
+        run: cp index.html 200.html
+
       - name: Deploy pull request on surge
         if: steps.build_website.outcome == 'success' && github.event.pull_request.number != null
         uses: dswistowski/surge-sh-action@v1

package.json

@@ -20,9 +20,6 @@
     "test:watch": "lerna run test:watch --parallel",
     "publish:release": "lerna publish --force-publish=* --no-push --no-git-tag-version"
   },
-  "resolutions": {
-    "@types/react": "^16.9.0"
-  },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.59.7",

packages/api/package.json

@@ -104,7 +104,7 @@
     "rxjs": "^7",
     "sharp": "^0.32.6",
     "ts-exif-parser": "^0.2.1",
-    "typeorm": "^0.3.18",
+    "typeorm": "^0.3.19",
     "typeorm-naming-strategies": "^1.1.0"
   },
   "devDependencies": {

packages/api/src/sites/sites.service.ts

@@ -188,6 +188,7 @@ export class SitesService {
       .leftJoinAndSelect('site.region', 'region')
       .leftJoinAndSelect('site.sketchFab', 'sketchFab')
       .leftJoinAndSelect('site.admins', 'admins')
+      .leftJoinAndSelect('site.reefCheckSite', 'reefCheckSite')
       .andWhere('display = true')
       .getMany();
 

packages/api/src/time-series/time-series.spec.ts

@@ -43,6 +43,8 @@ export const timeSeriesTests = () => {
   ];
 
   beforeAll(async () => {
+    // Define missing global function in test environment
+    global.structuredClone = (val) => JSON.parse(JSON.stringify(val));
     app = await testService.getApp();
     dataSource = await testService.getDataSource();
   });

packages/api/test/jest.json

@@ -29,6 +29,8 @@
   "globalSetup": "./test/global-setup.js",
   "moduleNameMapper": {
     "^csv-stringify/sync":
-      "<rootDir>/../../node_modules/csv-stringify/dist/cjs/sync.cjs"
+      "<rootDir>/../../node_modules/csv-stringify/dist/cjs/sync.cjs",
+      "^typeorm$": "<rootDir>/../../node_modules/typeorm",
+      "^uuid$": "uuid"
   }
 }

packages/website/package.json

@@ -16,16 +16,16 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.0.1",
-    "@date-io/date-fns": "^1.3.13",
-    "@material-ui/core": "^4.9.5",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material-ui/pickers": "^3.3.11",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "6.3.0",
+    "@mui/lab": "^6.0.0-beta.21",
+    "@mui/material": "6.3.0",
+    "@mui/styles": "6.3.0",
+    "@mui/system": "6.3.0",
+    "@mui/x-date-pickers": "^7.23.6",
     "@reduxjs/toolkit": "^1.3",
     "@sketchfab/viewer-api": "^1.12.0",
-    "@testing-library/dom": "^7.8.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/user-event": "^7.1.2",
     "@types/leaflet.locatecontrol": "^0.74.4",
     "axios": "^1.7.8",
     "axios-cache-interceptor": "^1.6.0",
@@ -37,7 +37,6 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
     "firebase": "^10.11.0",
     "firebase-tools": "^13.28.0",
@@ -48,22 +47,23 @@
     "lodash": "^4.17.15",
     "luxon": "^3.3.0",
     "mutationobserver-shim": "^0.3.7",
-    "notistack": "^1.0.10",
-    "react": "^16.13.1",
+    "notistack": "2.0.8",
+    "react": "18.3.1",
     "react-chartjs-2": "^5.0.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "18.3.1",
     "react-dropzone": "^11.0.3",
     "react-ga4": "^2.1.0",
     "react-hook-form": "^7.41.5",
     "react-jwt": "^1.1.8",
     "react-leaflet": "^2.7.0",
     "react-leaflet-markercluster": "^2.0.0",
-    "react-material-ui-carousel": "^1.8.2",
+    "react-material-ui-carousel": "3.4.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^6.0.0",
-    "react-slick": "^0.27.10",
+    "react-router-hash-link": "^2.4.3",
+    "react-slick": "^0.30.3",
     "react-swipeable-bottom-sheet": "^1.1.2",
-    "react-swipeable-views": "^0.13.9",
+    "react-swipeable-views": "^0.14.0",
     "redux": "^4.0.5",
     "redux-mock-store": "^1.5.4",
     "slick-carousel": "^1.8.1",
@@ -77,7 +77,8 @@
       "axios": "axios/dist/node/axios.cjs",
       "^csv-stringify/browser/esm/sync": "<rootDir>/../../node_modules/csv-stringify/dist/cjs/sync.cjs"
     },
-    "globalSetup": "./src/global-setup.js"
+    "globalSetup": "./src/global-setup.js",
+    "resetMocks": false
   },
   "browserslist": {
     "production": [
@@ -95,26 +96,31 @@
     "node": "18.x"
   },
   "devDependencies": {
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/chart.js": "^2.9.27",
     "@types/classnames": "^2.2.10",
     "@types/immutable": "^3.8.7",
     "@types/jest": "^24.0.0",
     "@types/lodash": "^4.14.149",
     "@types/luxon": "^3.3.1",
     "@types/node": "^18.16.16",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.1",
     "@types/react-leaflet": "^2.5.1",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
+    "@types/react-router-hash-link": "^2.4.9",
     "@types/react-slick": "^0.23.4",
     "@types/react-swipeable-views": "^0.13.0",
     "@types/redux-mock-store": "^1.0.2",
     "@types/validator": "^13.1.0",
     "canvas": "^2.11.2",
     "cross-env": "^7.0.2",
     "dotenv-cli": "^4.0.0",
+    "jest": "^29.7.0",
     "jest-date-mock": "^1.0.8",
     "react-scripts": "5.0.1",
     "surge": "^0.23.1"

packages/website/src/common/Banner/index.tsx

@@ -1,10 +1,7 @@
-import {
-  createStyles,
-  Theme,
-  Typography,
-  withStyles,
-  WithStyles,
-} from '@material-ui/core';
+import { Theme, Typography } from '@mui/material';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 import React from 'react';
 
 function Banner({ message, classes }: BannerProps) {

packages/website/src/common/Chart/CombinedCharts.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Box, createStyles, makeStyles, Typography } from '@material-ui/core';
+import { Box, Typography } from '@mui/material';
+
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { Site } from 'store/Sites/types';
 import { SurveyListItem } from 'store/Survey/types';
@@ -38,7 +41,7 @@ const CombinedCharts = ({
       </LoadingSkeleton>
       <LoadingSkeleton
         loading={isLoading}
-        variant="rect"
+        variant="rectangular"
         height={256}
         width="100%"
         image={chartSkeletonImage}

packages/website/src/common/Chart/MultipleSensorsCharts/AnalysisCard.tsx

@@ -2,15 +2,15 @@ import React, { FC } from 'react';
 import {
   Box,
   Card,
-  createStyles,
   Grid,
   GridProps,
   Theme,
   Tooltip,
   Typography,
-  withStyles,
-  WithStyles,
-} from '@material-ui/core';
+} from '@mui/material';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 
@@ -205,7 +205,8 @@ interface AnalysisCardIncomingProps {
   pickerEndDate: string;
   chartStartDate: string;
   chartEndDate: string;
-  columnJustification?: GridProps['justify'];
+  columnJustification?: GridProps['justifyContent'];
+  children?: React.ReactNode;
 }
 
 export default withStyles(styles)(AnalysisCard);

packages/website/src/common/Chart/MultipleSensorsCharts/Chart.tsx

@@ -3,14 +3,14 @@ import {
   Box,
   Typography,
   Grid,
-  withStyles,
-  WithStyles,
-  createStyles,
   CircularProgress,
   useTheme,
   Theme,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+  Alert,
+} from '@mui/material';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 import { useSelector } from 'react-redux';
 
 import { Site, Sources } from 'store/Sites/types';
@@ -38,7 +38,7 @@ const Chart = ({
   endDate,
   surveysFiltered,
   pickerErrored,
-  showDatePickers,
+  showDatePickers = true,
   source,
   onStartDateChange,
   onEndDateChange,
@@ -174,7 +174,6 @@ const Chart = ({
                 value={pickerStartDate}
                 dateName="START DATE"
                 dateNameTextVariant="subtitle1"
-                pickerSize="small"
                 autoOk={false}
                 onChange={onStartDateChange}
                 timeZone={site.timezone}
@@ -185,7 +184,6 @@ const Chart = ({
                 value={pickerEndDate}
                 dateName="END DATE"
                 dateNameTextVariant="subtitle1"
-                pickerSize="small"
                 autoOk={false}
                 onChange={onEndDateChange}
                 timeZone={site.timezone}
@@ -202,7 +200,7 @@ const styles = (theme: Theme) =>
   createStyles({
     chart: {
       height: 279,
-      margin: `${theme.spacing(1)}px 0`,
+      margin: `${theme.spacing(1)} 0`,
     },
 
     datePickersWrapper: {
@@ -227,13 +225,6 @@ interface ChartIncomingProps {
   onEndDateChange: (date: Date | null) => void;
 }
 
-Chart.defaultProps = {
-  pointId: undefined,
-  hideYAxisUnits: false,
-  surveysFiltered: undefined,
-  showDatePickers: true,
-};
-
 type ChartProps = ChartIncomingProps & WithStyles<typeof styles>;
 
 export default withStyles(styles)(Chart);

packages/website/src/common/Chart/MultipleSensorsCharts/ChartWithCard.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
-import { Grid, GridProps, makeStyles, Theme } from '@material-ui/core';
+import { Grid, GridProps, Theme } from '@mui/material';
+
+import makeStyles from '@mui/styles/makeStyles';
 
 import { Site, Sources, TimeSeriesSurveyPoint } from 'store/Sites/types';
 import AnalysisCard from './AnalysisCard';
@@ -11,8 +13,8 @@ import type { Dataset } from '../index';
 
 const ChartWithCard = ({
   areSurveysFiltered,
-  availableRanges,
-  cardColumnJustification,
+  availableRanges = [],
+  cardColumnJustification = 'space-between',
   chartEndDate,
   chartStartDate,
   chartTitle,
@@ -26,8 +28,8 @@ const ChartWithCard = ({
   pickerStartDate,
   pointId,
   range,
-  showDatePickers,
-  showRangeButtons,
+  showDatePickers = true,
+  showRangeButtons = true,
   site,
   surveyPoint,
   timeZone,
@@ -106,12 +108,12 @@ const ChartWithCard = ({
 const useStyles = makeStyles((theme: Theme) => ({
   chartWrapper: {
     marginBottom: 20,
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       marginBottom: 10,
     },
   },
   chart: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: '100%',
     },
   },
@@ -133,7 +135,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   card: {
     width: 'fit-content',
     minWidth: 219,
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: 'inherit',
       maxWidth: 'fit-content',
       margin: '0 auto',
@@ -144,7 +146,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 interface ChartWithCardProps {
   areSurveysFiltered?: boolean;
   availableRanges?: AvailableRange[];
-  cardColumnJustification?: GridProps['justify'];
+  cardColumnJustification?: GridProps['justifyContent'];
   chartEndDate: string;
   chartStartDate: string;
   chartTitle: string;
@@ -169,16 +171,4 @@ interface ChartWithCardProps {
   onRangeChange: (value: RangeValue) => void;
 }
 
-ChartWithCard.defaultProps = {
-  areSurveysFiltered: undefined,
-  cardColumnJustification: 'space-between',
-  hideYAxisUnits: false,
-  pointId: undefined,
-  showDatePickers: true,
-  showRangeButtons: true,
-  surveyPoint: undefined,
-  availableRanges: [],
-  timeZone: undefined,
-};
-
 export default ChartWithCard;