Feature/upgrade mui v9

.browserslistrc

@@ -1,2 +1,4 @@
-> 0.25%
-not dead
+Chrome >= 117
+Edge >= 121
+Firefox >= 121
+Safari >= 17

package.json

@@ -36,25 +36,33 @@
     "@codemirror/lang-html": "^6.4.5",
     "@codemirror/lang-json": "^6.0.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.1.1",
-    "@mui/icons-material": "^6.4.3",
-    "@mui/material": "^6.4.3",
-    "@mui/x-data-grid": "^7.29.13",
-    "@mui/x-date-pickers": "^7.26.0",
-    "@mui/x-tree-view": "^7.26.0",
+    "@googlemaps/markerclusterer": "^2.6.2",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/x-data-grid": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.0",
+    "@mui/x-tree-view": "^9.0.0",
     "@react-pdf/renderer": "^4.4.1",
     "@sentry/react": "^8.32.0",
     "@sentry/webpack-plugin": "^2.22.4",
     "@stripe/react-stripe-js": "^5.4.1",
     "@stripe/stripe-js": "^8.5.3",
     "@types/googlemaps": "^3.39.3",
     "@types/markerclustererplus": "^2.1.29",
-    "@types/react": "^16.9.32",
+    "@types/react": "^18.0.0",
     "@uiw/codemirror-theme-sublime": "^4.21.23",
     "@uiw/react-codemirror": "^4.21.7",
     "@uiw/react-color-sketch": "^2.1.0",
+    "@uppy/aws-s3": "^5.1.0",
+    "@uppy/core": "^5.2.0",
+    "@vis.gl/react-google-maps": "^1.10.2",
     "ably": "^2.30.0",
     "address-rfc2822": "^2.2.2",
     "awesome-bootstrap-checkbox": "^1.0.1",
@@ -72,7 +80,7 @@
     "extend": "^3.0.2",
     "file-loader": "^6.2.0",
     "file-saver": "^2.0.2",
-    "final-form": "^4.20.7",
+    "final-form": "^5.0.1",
     "font-awesome": "^4.7.0",
     "formik": "^2.4.6",
     "graphql-query-builder": "^1.0.7",
@@ -95,33 +103,33 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.73-beta.1",
+    "openstack-uicore-foundation": "6.0.0",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
+    "pdfmake": "^0.3.11",
     "postcss-loader": "^6.2.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "qr-scanner": "^1.4.2",
-    "react": "^16.13.1",
-    "react-beautiful-dnd": "^13.1.1",
+    "react": "^18.0.0",
     "react-bootstrap": "^0.31.5",
     "react-breadcrumbs": "^2.1.6",
     "react-chartjs-2": "^5.2.0",
     "react-data-export": "^0.5.0",
-    "react-datetime": "^2.15.0",
+    "react-datetime": "^3.3.1",
     "react-device-detect": "^2.2.2",
     "react-dnd": "^16.0.0",
     "react-dnd-html5-backend": "^16.0.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^18.0.0",
     "react-dropzone": "^4.2.13",
-    "react-final-form": "^6.5.9",
+    "react-final-form": "^7.0.1",
     "react-google-maps": "^9.4.5",
     "react-redux": "^7.1.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-rte": "^0.16.3",
     "react-scroll": "^1.7.10",
-    "react-select": "^2.1.2",
+    "react-select": "^5.10.2",
     "react-star-ratings": "^2.3.0",
     "react-switch": "^6.0.0",
     "react-tooltip": "^5.28.0",
@@ -150,9 +158,9 @@
     "@babel/eslint-parser": "^7.24.7",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react-dom": "16.9.24",
+    "@types/react-dom": "^18.0.0",
     "babel-jest": "^30.3.0",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "eslint": "8.2.0",
@@ -213,6 +221,7 @@
       "console": {}
     },
     "maxWorkers": 4,
+    "testTimeout": 15000,
     "testEnvironment": "jsdom",
     "setupFilesAfterEnv": [
       "<rootDir>/testSetupFile.js"

src/components/audit-logs/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import {
@@ -180,12 +180,12 @@ const AuditLogs = ({
 
   return (
     <>
-      <Grid2
+      <Grid
         container
         spacing={2}
         sx={{ justifyContent: "end", alignItems: "center", mb: 2 }}
       >
-        <Grid2
+        <Grid
           container
           size={{ xs: 12, md: 6 }}
           sx={{ flexWrap: "nowrap", alignItems: "center", gap: 1 }}
@@ -196,16 +196,15 @@ const AuditLogs = ({
             onSearch={handleSearch}
           />
           <GridFilter id={gridFilterId} criterias={getCriterias()} />
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
       <CustomAlert
         message={T.translate("audit_log.timezone_info", { tz: userTimeZone })}
       />
 
       {logEntries.length === 0 && (
         <div>{T.translate("audit_log.no_log_entries")}</div>
       )}
-
       {logEntries.length > 0 && (
         <MuiTable
           columns={showColumns}

src/components/filters/media-type-filter/__tests__/media-type-filter.test.js

@@ -84,8 +84,9 @@ describe("MediaTypeFilter", () => {
   test("loads the available media types for the given summit", async () => {
     render(<MediaTypeFilter {...baseProps} />);
 
-    await waitFor(() => expect(getAllMediaUploadTypes).toHaveBeenCalledWith(1));
-    expect(screen.getByText("Video")).toBeInTheDocument();
+    expect(getAllMediaUploadTypes).toHaveBeenCalledWith(1);
+    // options render once the request resolves
+    expect(await screen.findByText("Video")).toBeInTheDocument();
     expect(screen.getByText("Slides")).toBeInTheDocument();
   });
 

src/components/filters/select-filter-criteria/index.js

@@ -15,7 +15,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
 import Swal from "sweetalert2";
-import AsyncSelect from "react-select/lib/Async";
+import AsyncSelect from "react-select/async";
 import { queryFilterCriterias } from "../../../actions/filter-criteria-actions";
 import { HIGH_Z_INDEX } from "../../../utils/constants";
 

src/components/forms/__tests__/badge-settings-form.test.js

@@ -103,7 +103,10 @@ it("should show the success message and re-enable Save when onSubmit resolves",
       })
     )
   );
-  expect(
-    screen.getByRole("button", { name: "general.save" })
-  ).not.toBeDisabled();
+  // isSaving resets in .finally, after the success message
+  await waitFor(() =>
+    expect(
+      screen.getByRole("button", { name: "general.save" })
+    ).not.toBeDisabled()
+  );
 });

src/components/forms/__tests__/company-form.test.js

@@ -49,10 +49,17 @@ jest.mock(
 
 jest.mock(
   "openstack-uicore-foundation/lib/components/mui/formik-inputs/select",
-  () =>
-    function MockSelect({ name, children }) {
-      return <div data-testid={`select-${name}`}>{children}</div>;
-    }
+  () => {
+    // MUI v9 MenuItems throw outside a Menu/MenuList
+    const { MenuList } = jest.requireActual("@mui/material");
+    return function MockSelect({ name, children }) {
+      return (
+        <div data-testid={`select-${name}`}>
+          <MenuList>{children}</MenuList>
+        </div>
+      );
+    };
+  }
 );
 
 jest.mock(

src/components/forms/__tests__/media-upload-form.test.js

@@ -57,10 +57,17 @@ jest.mock(
 
 jest.mock(
   "openstack-uicore-foundation/lib/components/mui/formik-inputs/select",
-  () =>
-    function MockSelect({ name, children }) {
-      return <div data-testid={`select-${name}`}>{children}</div>;
-    }
+  () => {
+    // MUI v9 MenuItems throw outside a Menu/MenuList
+    const { MenuList } = jest.requireActual("@mui/material");
+    return function MockSelect({ name, children }) {
+      return (
+        <div data-testid={`select-${name}`}>
+          <MenuList>{children}</MenuList>
+        </div>
+      );
+    };
+  }
 );
 
 jest.mock(

src/components/forms/admin-access-form.js

@@ -17,7 +17,7 @@ import * as yup from "yup";
 import T from "i18n-react/dist/i18n-react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid2 from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import MemberInput from "openstack-uicore-foundation/lib/components/inputs/member-input";
 import SummitInput from "openstack-uicore-foundation/lib/components/inputs/summit-input";
@@ -72,17 +72,17 @@ const AdminAccessForm = ({
         sx={{ width: "100%" }}
       >
         <input type="hidden" name="id" value={formik.values.id} />
-        <Grid2 container spacing={2}>
-          <Grid2 size={12}>
+        <Grid container spacing={2}>
+          <Grid size={12}>
             <MuiFormikTextField
               name="title"
               label={T.translate("admin_access.title")}
               required
               fullWidth
             />
-          </Grid2>
+          </Grid>
 
-          <Grid2 size={{ xs: 12, md: 6 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Typography component="label" sx={{ display: "block", mb: 0.5 }}>
               {T.translate("admin_access.members")} *
             </Typography>
@@ -110,9 +110,9 @@ const AdminAccessForm = ({
                 {formik.errors.members}
               </Typography>
             )}
-          </Grid2>
+          </Grid>
 
-          <Grid2 size={{ xs: 12, md: 6 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Typography component="label" sx={{ display: "block", mb: 0.5 }}>
               {T.translate("admin_access.summits")} *
             </Typography>
@@ -133,17 +133,17 @@ const AdminAccessForm = ({
                 {formik.errors.summits}
               </Typography>
             )}
-          </Grid2>
+          </Grid>
 
-          <Grid2
+          <Grid
             size={12}
             sx={{ display: "flex", justifyContent: "flex-end", pt: 1 }}
           >
             <Button type="submit" variant="contained" disabled={isSaving}>
               {T.translate("general.save")}
             </Button>
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
       </Box>
     </FormikProvider>
   );

src/components/forms/badge-feature-type-form.js

@@ -15,7 +15,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
 import { useFormikContext } from "formik";
-import { Box, Grid2, InputLabel } from "@mui/material";
+import { Box, Grid, InputLabel } from "@mui/material";
 import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
 import FormikTextEditor from "openstack-uicore-foundation/lib/components/mui/formik-inputs/texteditor";
 import UploadInputV3 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v3";
@@ -60,8 +60,8 @@ const BadgeFeatureTypeForm = ({ entity, onRemoveImage, onUploadingChange }) => {
 
   return (
     <Box>
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={12}>
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid size={12}>
           <InputLabel htmlFor="name">
             {T.translate("edit_badge_feature.name")} *
           </InputLabel>
@@ -71,35 +71,35 @@ const BadgeFeatureTypeForm = ({ entity, onRemoveImage, onUploadingChange }) => {
             fullWidth
             size="small"
           />
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
 
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={12}>
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid size={12}>
           <InputLabel htmlFor="description">
             {T.translate("edit_badge_feature.description")} *
           </InputLabel>
           <FormikTextEditor
             name="description"
             licence={process.env.JODIT_LICENSE_KEY}
           />
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
 
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={12}>
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid size={12}>
           <InputLabel htmlFor="template_content">
             {T.translate("edit_badge_feature.template_content")} *
           </InputLabel>
           <FormikTextEditor
             name="template_content"
             licence={process.env.JODIT_LICENSE_KEY}
           />
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
 
-      <Grid2 container spacing={2} sx={{ mb: 2 }}>
-        <Grid2 size={12}>
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid size={12}>
           <InputLabel>{T.translate("edit_badge_feature.image")}</InputLabel>
           <UploadInputV3
             id="image"
@@ -120,8 +120,8 @@ const BadgeFeatureTypeForm = ({ entity, onRemoveImage, onUploadingChange }) => {
               }
             }}
           />
-        </Grid2>
-      </Grid2>
+        </Grid>
+      </Grid>
     </Box>
   );
 };