FIX-2335 Upgrade Material UI (#2354)

Co-authored-by: Elias Bruvik <[email protected]>

Src/WitsmlExplorer.Frontend/__testUtils__/testUtils.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@material-ui/core";
+import { ThemeProvider } from "@mui/material";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render } from "@testing-library/react";
 import { ConnectedServerProvider } from "contexts/connectedServerContext";

Src/WitsmlExplorer.Frontend/components/Alerts.tsx

@@ -1,6 +1,5 @@
-import { Collapse, IconButton } from "@material-ui/core";
-import { Close } from "@material-ui/icons";
-import { Alert, AlertTitle } from "@material-ui/lab";
+import { Close } from "@mui/icons-material";
+import { Alert, AlertTitle, Collapse, IconButton } from "@mui/material";
 import { useConnectedServer } from "contexts/connectedServerContext";
 import OperationContext from "contexts/operationContext";
 import { capitalize } from "lodash";

Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx

@@ -4,7 +4,6 @@ import {
   Switch,
   Typography
 } from "@equinor/eds-core-react";
-import { CSSProperties } from "@material-ui/core/styles/withStyles";
 import {
   MILLIS_IN_SECOND,
   SECONDS_IN_MINUTE,
@@ -51,6 +50,7 @@ import LogObject, { indexToNumber } from "models/logObject";
 import { toObjectReference } from "models/objectOnWellbore";
 import { ObjectType } from "models/objectType";
 import React, {
+  CSSProperties,
   useCallback,
   useContext,
   useEffect,

Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx

@@ -1,5 +1,5 @@
 import { Icon, Label, TextField } from "@equinor/eds-core-react";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 import { Button } from "components/StyledComponents/Button";
 import OperationContext from "contexts/operationContext";
 import { ChangeEvent, ReactElement, useContext, useState } from "react";

Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx

@@ -15,6 +15,7 @@ import { useGetMnemonics } from "hooks/useGetMnemonics";
 import { ComponentType } from "models/componentType";
 import {
   CSSProperties,
+  ChangeEvent,
   Dispatch,
   SetStateAction,
   useContext,
@@ -124,7 +125,7 @@ const EditSelectedLogCurveInfo = (
   };
 
   const onTextFieldChange = (
-    e: any,
+    e: ChangeEvent<HTMLInputElement>,
     setIndex: Dispatch<SetStateAction<string>>,
     setIsValid: Dispatch<SetStateAction<boolean>>
   ) => {
@@ -164,7 +165,7 @@ const EditSelectedLogCurveInfo = (
               variant={isValidStart ? undefined : "error"}
               type={isTimeLog ? "datetime-local" : ""}
               step="1"
-              onChange={(e: any) => {
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 onTextFieldChange(e, setSelectedStartIndex, setIsValidStart);
               }}
             />
@@ -178,7 +179,7 @@ const EditSelectedLogCurveInfo = (
               type={isTimeLog ? "datetime-local" : ""}
               variant={isValidEnd ? undefined : "error"}
               step="1"
-              onChange={(e: any) => {
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 onTextFieldChange(e, setSelectedEndIndex, setIsValidEnd);
               }}
             />

Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnDef.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, IconButton, useTheme } from "@material-ui/core";
+import { Checkbox, IconButton } from "@mui/material";
 import { ColumnDef, Row, SortingFn, Table } from "@tanstack/react-table";
 import {
   activeId,
@@ -14,7 +14,7 @@ import {
   ContentType
 } from "components/ContentViews/table/tableParts";
 import OperationContext from "contexts/operationContext";
-import { DecimalPreference } from "contexts/operationStateReducer";
+import { DecimalPreference, UserTheme } from "contexts/operationStateReducer";
 import { useContext, useMemo } from "react";
 import Icon from "styles/Icons";
 import {
@@ -37,11 +37,10 @@ export const useColumnDef = (
   checkableRows: boolean,
   stickyLeftColumns: number
 ) => {
-  const isCompactMode = useTheme().props.MuiCheckbox?.size === "small";
-
   const {
-    operationState: { decimals }
+    operationState: { decimals, theme }
   } = useContext(OperationContext);
+  const isCompactMode = theme === UserTheme.Compact;
 
   return useMemo(() => {
     const savedWidths = getLocalStorageItem<{ [label: string]: number }>(

Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx

@@ -1,5 +1,5 @@
 import { Icon, Menu, Typography } from "@equinor/eds-core-react";
-import { Checkbox, useTheme } from "@material-ui/core";
+import { Checkbox } from "@mui/material";
 import { Table } from "@tanstack/react-table";
 import {
   calculateColumnWidth,
@@ -12,6 +12,7 @@ import {
 } from "components/ContentViews/table/tableParts";
 import { Button } from "components/StyledComponents/Button";
 import OperationContext from "contexts/operationContext";
+import { UserTheme } from "contexts/operationStateReducer";
 import { useLocalStorageState } from "hooks/useLocalStorageState";
 import { useContext, useState } from "react";
 import styled from "styled-components";
@@ -45,7 +46,7 @@ export const ColumnOptionsMenu = (props: {
     firstToggleableIndex
   } = props;
   const {
-    operationState: { colors }
+    operationState: { colors, theme }
   } = useContext(OperationContext);
   const [draggedId, setDraggedId] = useState<string | null>();
   const [draggedOverId, setDraggedOverId] = useState<string | null>();
@@ -54,7 +55,7 @@ export const ColumnOptionsMenu = (props: {
   const [, saveOrderToStorage] = useLocalStorageState<string[]>(
     viewId + STORAGE_CONTENTTABLE_ORDER_KEY
   );
-  const isCompactMode = useTheme().props.MuiCheckbox?.size === "small";
+  const isCompactMode = theme === UserTheme.Compact;
 
   const drop = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();

Src/WitsmlExplorer.Frontend/components/ContentViews/table/ContentTable.tsx

@@ -1,4 +1,4 @@
-import { TableBody, TableHead, useTheme } from "@material-ui/core";
+import { TableBody, TableHead } from "@mui/material";
 import {
   ColumnSizingState,
   Header,
@@ -46,6 +46,7 @@ import {
   ContentTableProps
 } from "components/ContentViews/table/tableParts";
 import OperationContext from "contexts/operationContext";
+import { UserTheme } from "contexts/operationStateReducer";
 import { indexToNumber } from "models/logObject";
 import * as React from "react";
 import { Fragment, useContext, useEffect, useMemo, useState } from "react";
@@ -81,7 +82,7 @@ export const ContentTable = React.memo(
       autoRefresh = false
     } = contentTableProps;
     const {
-      operationState: { colors }
+      operationState: { colors, theme }
     } = useContext(OperationContext);
     const [previousIndex, setPreviousIndex] = useState<number>(null);
     const [rowSelection, setRowSelection] = useState<RowSelectionState>(
@@ -94,7 +95,7 @@ export const ContentTable = React.memo(
       initializeColumnVisibility(viewId)
     );
     const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
-    const isCompactMode = useTheme().props.MuiCheckbox?.size === "small";
+    const isCompactMode = theme === UserTheme.Compact;
     const cellHeight = isCompactMode ? 30 : 53;
     const headCellHeight = isCompactMode ? 35 : 55;
     const noData = useMemo(() => [], []);

Src/WitsmlExplorer.Frontend/components/ContentViews/table/contentTableStyles.ts

@@ -1,4 +1,4 @@
-import { TableCell } from "@material-ui/core";
+import { TableCell } from "@mui/material";
 import styled from "styled-components";
 import { Colors, light } from "styles/Colors";
 

Src/WitsmlExplorer.Frontend/components/ContextMenus/BatchModifyMenuItem.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import OperationContext from "contexts/operationContext";
 import { ReactElement, forwardRef, useContext } from "react";
 import OperationType from "../../contexts/operationType";

Src/WitsmlExplorer.Frontend/components/ContextMenus/BhaRunContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import { StyledIcon } from "components/ContextMenus/ContextMenuUtils";

Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import { Menu } from "@material-ui/core";
+import { Menu } from "@mui/material";
 import OperationContext from "contexts/operationContext";
 import { MousePosition } from "contexts/operationStateReducer";
 import OperationType from "contexts/operationType";
@@ -64,7 +64,7 @@ export const StyledMenu = styled(Menu)<{ colors: Colors }>`
     svg {
       fill: ${(props) => props.colors.infographic.primaryMossGreen};
     }
-    .MuiListItem-button:hover {
+    .MuiMenuItem-root:hover {
       text-decoration: none;
       background-color: ${(props) =>
         props.colors.interactive.contextMenuItemHover};

Src/WitsmlExplorer.Frontend/components/ContextMenus/CopyComponentsToServer.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { menuItemText } from "components/ContextMenus/ContextMenuUtils";
 import NestedMenuItem from "components/ContextMenus/NestedMenuItem";
 import CopyRangeModal, {

Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {
   StyledIcon,

Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidsReportContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/FormationMarkerContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Divider, Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import { StyledIcon } from "components/ContextMenus/ContextMenuUtils";

Src/WitsmlExplorer.Frontend/components/ContextMenus/GeologyIntervalContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Divider, Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {
   StyledIcon,

Src/WitsmlExplorer.Frontend/components/ContextMenus/JobInfoContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Divider, Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import { StyledIcon } from "components/ContextMenus/ContextMenuUtils";

Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurveInfoContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Divider, Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { WITSML_INDEX_TYPE_MD } from "components/Constants";
 import { LogCurveInfoRow } from "components/ContentViews/LogCurveInfoListView";
 import ContextMenu from "components/ContextMenus/ContextMenu";

Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurvePriorityContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import React, { useContext } from "react";
 import OperationContext from "../../contexts/operationContext";
 import { MousePosition } from "../../contexts/operationStateReducer";

Src/WitsmlExplorer.Frontend/components/ContextMenus/LogObjectContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import { BatchModifyMenuItem } from "components/ContextMenus/BatchModifyMenuItem";
 import ContextMenu from "components/ContextMenus/ContextMenu";

Src/WitsmlExplorer.Frontend/components/ContextMenus/LogsContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import {
   StoreFunction,

Src/WitsmlExplorer.Frontend/components/ContextMenus/MessageObjectContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/MnemonicsContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import { StyledIcon } from "components/ContextMenus/ContextMenuUtils";
 import ConfirmModal from "components/Modals/ConfirmModal";

Src/WitsmlExplorer.Frontend/components/ContextMenus/MudLogContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Divider, Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/NestedMenuItem.tsx

@@ -1,5 +1,5 @@
 import { Icon, Typography } from "@equinor/eds-core-react";
-import MenuItem, { MenuItemProps } from "@material-ui/core/MenuItem";
+import MenuItem, { MenuItemProps } from "@mui/material/MenuItem";
 import { StyledMenu } from "components/ContextMenus/ContextMenu";
 import { StyledIcon } from "components/ContextMenus/ContextMenuUtils";
 import OperationContext from "contexts/operationContext";

Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectMenuItems.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { QueryClient } from "@tanstack/react-query";
 import { WITSML_INDEX_TYPE_MD } from "components/Constants";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectsSidebarContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import {
   ObjectTypeToTemplateObject,

Src/WitsmlExplorer.Frontend/components/ContextMenus/OptionsContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Icon, Typography } from "@equinor/eds-core-react";
-import { MenuItem, Tooltip } from "@material-ui/core";
+import { MenuItem, Tooltip } from "@mui/material";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import { pluralize } from "components/ContextMenus/ContextMenuUtils";
 import { HideModalAction } from "contexts/operationStateReducer";

Src/WitsmlExplorer.Frontend/components/ContextMenus/RigContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import { BatchModifyMenuItem } from "components/ContextMenus/BatchModifyMenuItem";
 import ContextMenu from "components/ContextMenus/ContextMenu";

Src/WitsmlExplorer.Frontend/components/ContextMenus/RigsContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import {
   StoreFunction,

Src/WitsmlExplorer.Frontend/components/ContextMenus/RiskContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import { StyledIcon } from "components/ContextMenus/ContextMenuUtils";

Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoriesContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import {
   StoreFunction,

Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryStationContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { TrajectoryStationRow } from "components/ContentViews/TrajectoryView";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularComponentContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import { TubularComponentRow } from "components/ContentViews/TubularView";
 import ContextMenu from "components/ContextMenus/ContextMenu";

Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularsContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import {
   StoreFunction,

Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometryContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@equinor/eds-core-react";
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {

Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometrySectionContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Divider, Typography } from "@equinor/eds-core-react";
-import { MenuItem } from "@material-ui/core";
+import { MenuItem } from "@mui/material";
 import ContextMenu from "components/ContextMenus/ContextMenu";
 import {
   StyledIcon,