diff --git a/Src/WitsmlExplorer.Frontend/__testUtils__/testUtils.tsx b/Src/WitsmlExplorer.Frontend/__testUtils__/testUtils.tsx index ff92c2d6b..30a28d71e 100644 --- a/Src/WitsmlExplorer.Frontend/__testUtils__/testUtils.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/Alerts.tsx b/Src/WitsmlExplorer.Frontend/components/Alerts.tsx index db76fb240..22a1d8713 100644 --- a/Src/WitsmlExplorer.Frontend/components/Alerts.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx index 65dc44b52..c33927393 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx index 4da13c55d..552494ca4 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx index 6689adc94..ba53cdd39 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx +++ b/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, setIndex: Dispatch>, setIsValid: Dispatch> ) => { @@ -164,7 +165,7 @@ const EditSelectedLogCurveInfo = ( variant={isValidStart ? undefined : "error"} type={isTimeLog ? "datetime-local" : ""} step="1" - onChange={(e: any) => { + onChange={(e: ChangeEvent) => { 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) => { onTextFieldChange(e, setSelectedEndIndex, setIsValidEnd); }} /> diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnDef.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnDef.tsx index 237e772b2..7622b4411 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnDef.tsx +++ b/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 }>( diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx index 67d63fd1e..129cf70d6 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnOptionsMenu.tsx +++ b/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(); const [draggedOverId, setDraggedOverId] = useState(); @@ -54,7 +55,7 @@ export const ColumnOptionsMenu = (props: { const [, saveOrderToStorage] = useLocalStorageState( viewId + STORAGE_CONTENTTABLE_ORDER_KEY ); - const isCompactMode = useTheme().props.MuiCheckbox?.size === "small"; + const isCompactMode = theme === UserTheme.Compact; const drop = (e: React.DragEvent) => { e.preventDefault(); diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ContentTable.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ContentTable.tsx index 44c2979d4..fa8f498cc 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/ContentTable.tsx +++ b/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(null); const [rowSelection, setRowSelection] = useState( @@ -94,7 +95,7 @@ export const ContentTable = React.memo( initializeColumnVisibility(viewId) ); const [columnSizing, setColumnSizing] = useState({}); - 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(() => [], []); diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/contentTableStyles.ts b/Src/WitsmlExplorer.Frontend/components/ContentViews/table/contentTableStyles.ts index 6a0ee5c87..92f03b7da 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/table/contentTableStyles.ts +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/BatchModifyMenuItem.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/BatchModifyMenuItem.tsx index 0e7b59b54..657b1c998 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/BatchModifyMenuItem.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/BhaRunContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/BhaRunContextMenu.tsx index 8de656d1f..6099d5bc1 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/BhaRunContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenu.tsx index 445027c26..7124fb666 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenu.tsx +++ b/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}; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/CopyComponentsToServer.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/CopyComponentsToServer.tsx index 0487fe4c0..103c7349b 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/CopyComponentsToServer.tsx +++ b/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, { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidContextMenu.tsx index c0aa29bc3..182f22cb9 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidsReportContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidsReportContextMenu.tsx index c6c2300d6..ebd702edf 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidsReportContextMenu.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/FormationMarkerContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/FormationMarkerContextMenu.tsx index bd5b11b9e..19bfe5e76 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/FormationMarkerContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/GeologyIntervalContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/GeologyIntervalContextMenu.tsx index b7348d6f2..94e34034d 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/GeologyIntervalContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/JobInfoContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/JobInfoContextMenu.tsx index 4640ff356..3fb60bc3c 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/JobInfoContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurveInfoContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurveInfoContextMenu.tsx index 86846d060..117ce4e50 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurveInfoContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurvePriorityContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurvePriorityContextMenu.tsx index 7b57d9bc8..1973e3d71 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurvePriorityContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogObjectContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogObjectContextMenu.tsx index ea1659530..79260d35f 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogObjectContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogsContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogsContextMenu.tsx index 3fcc89988..a2181b41f 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/LogsContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/MessageObjectContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/MessageObjectContextMenu.tsx index 1e98bbfbf..ca7e625ad 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/MessageObjectContextMenu.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/MnemonicsContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/MnemonicsContextMenu.tsx index 51ff58423..85b584bbc 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/MnemonicsContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/MudLogContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/MudLogContextMenu.tsx index 67c4c8c8b..4ec80376b 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/MudLogContextMenu.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/NestedMenuItem.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/NestedMenuItem.tsx index 4747f30cb..f4314f24e 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/NestedMenuItem.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectMenuItems.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectMenuItems.tsx index 0ac1b4ecb..a71719875 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectMenuItems.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectsSidebarContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectsSidebarContextMenu.tsx index c25595154..4b4bf65e9 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectsSidebarContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/OptionsContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/OptionsContextMenu.tsx index 105e91f1c..b327cb43e 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/OptionsContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/RigContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/RigContextMenu.tsx index 37db225c1..c39f0f433 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/RigContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/RigsContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/RigsContextMenu.tsx index dc912b632..23d78a1ae 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/RigsContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/RiskContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/RiskContextMenu.tsx index be28a39b3..77abce94a 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/RiskContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoriesContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoriesContextMenu.tsx index d8b44c432..f1e961aec 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoriesContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryContextMenu.tsx index 95668501d..733840fee 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryContextMenu.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryStationContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryStationContextMenu.tsx index 01cc8e8d5..c083da3b2 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TrajectoryStationContextMenu.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularComponentContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularComponentContextMenu.tsx index 735da636e..ce59d48d1 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularComponentContextMenu.tsx +++ b/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"; diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularContextMenu.tsx index cc957ef18..6a7846a70 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularContextMenu.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularsContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularsContextMenu.tsx index ffa7fbef3..f0d9b291c 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularsContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometryContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometryContextMenu.tsx index e36f9ee8f..e394dbfd2 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometryContextMenu.tsx +++ b/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 { diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometrySectionContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometrySectionContextMenu.tsx index 3c127eb20..0a57ca179 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WbGeometrySectionContextMenu.tsx +++ b/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, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellContextMenu.tsx index add57a073..20c42cd59 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellContextMenu.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellContextMenu.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 { StoreFunction, diff --git a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellboreContextMenu.tsx b/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellboreContextMenu.tsx index 995baf8ba..2df2497b7 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellboreContextMenu.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContextMenus/WellboreContextMenu.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 { ObjectTypeToTemplateObject, diff --git a/Src/WitsmlExplorer.Frontend/components/DateFormatter.ts b/Src/WitsmlExplorer.Frontend/components/DateFormatter.ts index fd119d410..5d62bb045 100644 --- a/Src/WitsmlExplorer.Frontend/components/DateFormatter.ts +++ b/Src/WitsmlExplorer.Frontend/components/DateFormatter.ts @@ -1,5 +1,5 @@ -import { format, formatInTimeZone, toDate } from "date-fns-tz"; import { DateTimeFormat, TimeZone } from "contexts/operationStateReducer"; +import { format, formatInTimeZone, toDate } from "date-fns-tz"; //https://date-fns.org/v2.29.3/docs/format const naturalDateTimeFormat = "dd.MM.yyyy HH:mm:ss.SSS"; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/BatchModifyPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/BatchModifyPropertiesModal.tsx index 882b87b9d..b93d69c9d 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/BatchModifyPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/BatchModifyPropertiesModal.tsx @@ -1,5 +1,5 @@ import { Autocomplete, TextField } from "@equinor/eds-core-react"; -import { ReactElement, useContext, useState } from "react"; +import { ChangeEvent, ReactElement, useContext, useState } from "react"; import styled from "styled-components"; import OperationContext from "../../contexts/operationContext"; import OperationType from "../../contexts/operationType"; @@ -101,7 +101,7 @@ export const BatchModifyPropertiesModal = ( ? "error" : undefined } - onChange={(e: any) => + onChange={(e: ChangeEvent) => onChangeProperty(property.property, e.target.value) } /> diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/BhaRunPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/BhaRunPropertiesModal.tsx index 3d817c305..841f29998 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/BhaRunPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/BhaRunPropertiesModal.tsx @@ -1,5 +1,4 @@ -import { Autocomplete } from "@equinor/eds-core-react"; -import { InputAdornment, TextField } from "@material-ui/core"; +import { Autocomplete, TextField } from "@equinor/eds-core-react"; import formatDateString from "components/DateFormatter"; import { DateTimeField } from "components/Modals/DateTimeField"; import ModalDialog from "components/Modals/ModalDialog"; @@ -13,7 +12,7 @@ import OperationType from "contexts/operationType"; import BhaRun from "models/bhaRun"; import { itemStateTypes } from "models/itemStateTypes"; import { ObjectType } from "models/objectType"; -import React, { useContext, useEffect, useState } from "react"; +import React, { ChangeEvent, useContext, useEffect, useState } from "react"; import JobService, { JobType } from "services/jobService"; const typesOfBhaStatus = ["final", "progress", "plan", "unknown"]; @@ -94,6 +93,8 @@ const BhaRunPropertiesModal = ( dispatchOperation({ type: OperationType.HideModal }); }; + const validBhaRunName = validText(editableBhaRun?.name, 1, 64); + return ( <> {editableBhaRun && ( @@ -108,28 +109,24 @@ const BhaRunPropertiesModal = ( id="wellUid" label="well uid" defaultValue={editableBhaRun.wellUid} - fullWidth /> + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, name: e.target.value }) } /> @@ -161,9 +155,12 @@ const BhaRunPropertiesModal = ( label={"tubular"} required value={editableBhaRun.tubular?.value ?? ""} - error={editableBhaRun.tubular?.value?.length === 0} - fullWidth - onChange={(e) => + variant={ + editableBhaRun.tubular?.value?.length === 0 + ? "error" + : undefined + } + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, tubular: { @@ -178,9 +175,12 @@ const BhaRunPropertiesModal = ( label={"tubularUidRef"} required value={editableBhaRun.tubular?.uidRef ?? ""} - error={editableBhaRun.tubular?.uidRef?.length === 0} - fullWidth - onChange={(e) => + variant={ + editableBhaRun.tubular?.uidRef?.length === 0 + ? "error" + : undefined + } + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, tubular: { @@ -236,19 +236,12 @@ const BhaRunPropertiesModal = ( id={"planDogleg"} label={"planDogleg"} type="number" - fullWidth - InputProps={{ - startAdornment: ( - - {editableBhaRun.planDogleg - ? editableBhaRun.planDogleg.uom - : ""} - - ) - }} + unit={ + editableBhaRun.planDogleg ? editableBhaRun.planDogleg.uom : "" + } disabled={!editableBhaRun.planDogleg} value={editableBhaRun.planDogleg?.value} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, planDogleg: { @@ -264,19 +257,12 @@ const BhaRunPropertiesModal = ( id={"actDogleg"} label={"actDogleg"} type="number" - fullWidth - InputProps={{ - startAdornment: ( - - {editableBhaRun.actDogleg - ? editableBhaRun.actDogleg.uom - : ""} - - ) - }} + unit={ + editableBhaRun.actDogleg ? editableBhaRun.actDogleg.uom : "" + } disabled={!editableBhaRun.actDogleg} value={editableBhaRun.actDogleg?.value} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, actDogleg: { @@ -292,19 +278,14 @@ const BhaRunPropertiesModal = ( id={"actDoglegMx"} label={"actDoglegMx"} type="number" - fullWidth - InputProps={{ - startAdornment: ( - - {editableBhaRun.actDoglegMx - ? editableBhaRun.actDoglegMx.uom - : ""} - - ) - }} + unit={ + editableBhaRun.actDoglegMx + ? editableBhaRun.actDoglegMx.uom + : "" + } disabled={!editableBhaRun.actDoglegMx} value={editableBhaRun.actDoglegMx?.value} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, actDoglegMx: { @@ -332,8 +313,7 @@ const BhaRunPropertiesModal = ( id={"numBitRun"} label={"numBitRun"} value={editableBhaRun.numBitRun ?? ""} - fullWidth - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, numBitRun: e.target.value @@ -345,8 +325,7 @@ const BhaRunPropertiesModal = ( type="number" label={"numStringRun"} value={editableBhaRun.numStringRun ?? ""} - fullWidth - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, numStringRun: e.target.value @@ -357,8 +336,7 @@ const BhaRunPropertiesModal = ( id={"reasonTrip"} label={"reasonTrip"} value={editableBhaRun.reasonTrip ?? ""} - fullWidth - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, reasonTrip: e.target.value @@ -369,8 +347,7 @@ const BhaRunPropertiesModal = ( id={"objectiveBha"} label={"objectiveBha"} value={editableBhaRun.objectiveBha ?? ""} - fullWidth - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableBhaRun({ ...editableBhaRun, objectiveBha: e.target.value @@ -397,21 +374,18 @@ const BhaRunPropertiesModal = ( id="dateTimeCreation" label="created" defaultValue={editableBhaRun.commonData.dTimCreation} - fullWidth /> { + onChange={(e: ChangeEvent) => { const commonData = { ...editableBhaRun.commonData, sourceName: e.target.value @@ -423,8 +397,7 @@ const BhaRunPropertiesModal = ( id="serviceCategory" label="serviceCategory" value={editableBhaRun.commonData.serviceCategory ?? ""} - fullWidth - onChange={(e) => { + onChange={(e: ChangeEvent) => { const commonData = { ...editableBhaRun.commonData, serviceCategory: e.target.value @@ -436,8 +409,7 @@ const BhaRunPropertiesModal = ( id="comments" label="comments" value={editableBhaRun.commonData.comments ?? ""} - fullWidth - onChange={(e) => { + onChange={(e: ChangeEvent) => { const commonData = { ...editableBhaRun.commonData, comments: e.target.value @@ -449,8 +421,7 @@ const BhaRunPropertiesModal = ( id="defaultDatum" label="defaultDatum" value={editableBhaRun.commonData.defaultDatum ?? ""} - fullWidth - onChange={(e) => { + onChange={(e: ChangeEvent) => { const commonData = { ...editableBhaRun.commonData, defaultDatum: e.target.value @@ -461,7 +432,7 @@ const BhaRunPropertiesModal = ( } confirmDisabled={ - !validText(editableBhaRun.name) || + !validBhaRunName || !dTimStopValid || !dTimStartValid || !dTimStartDrillingValid || diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/DeleteEmptyMnemonicsModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/DeleteEmptyMnemonicsModal.tsx index 9b5de9912..39c7935ea 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/DeleteEmptyMnemonicsModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/DeleteEmptyMnemonicsModal.tsx @@ -1,5 +1,4 @@ -import { Icon, Tooltip } from "@equinor/eds-core-react"; -import { TextField } from "@material-ui/core"; +import { Icon, TextField, Tooltip } from "@equinor/eds-core-react"; import { DateTimeField } from "components/Modals/DateTimeField"; import ModalDialog from "components/Modals/ModalDialog"; import { ReportModal } from "components/Modals/ReportModal"; @@ -11,7 +10,7 @@ import LogObject from "models/logObject"; import { toObjectReference } from "models/objectOnWellbore"; import Well from "models/well"; import Wellbore from "models/wellbore"; -import { useContext, useState } from "react"; +import { ChangeEvent, useContext, useState } from "react"; import JobService, { JobType } from "services/jobService"; import styled from "styled-components"; @@ -88,11 +87,13 @@ const DeleteEmptyMnemonicsModal = ( timeZone={timeZone} /> setNullDepthValue(+e.target.value)} + onChange={(e: ChangeEvent) => + setNullDepthValue(+e.target.value) + } /> + onChange={(e: ChangeEvent) => setEditable({ ...editable, name: e.target.value }) } /> @@ -258,7 +264,7 @@ const FormationMarkerPropertiesModal = ( ? `description must be 1-${MaxLength.Comment} characters` : "" } - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditable({ ...editable, description: undefinedOnUnchagedEmptyString( @@ -303,7 +309,7 @@ const StratigraphicField = ( unit={originalStruct?.kind} helperText={invalid[property] ? `${property} cannot be empty` : ""} variant={invalid[property] ? "error" : undefined} - onChange={(e: any) => { + onChange={(e: ChangeEvent) => { setResult({ ...editable, [property]: { @@ -336,7 +342,7 @@ const MeasureField = (props: MeasureFieldProps): React.ReactElement => { unit={originalMeasure?.uom} helperText={invalid[property] ? `${property} cannot be empty` : ""} variant={invalid[property] ? "error" : undefined} - onChange={(e: any) => { + onChange={(e: ChangeEvent) => { setResult({ ...editable, [property]: { diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx index 2c00267b3..5d7027e2b 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/GeologyIntervalPropertiesModal.tsx @@ -1,5 +1,5 @@ import { Autocomplete, TextField } from "@equinor/eds-core-react"; -import { Typography } from "@material-ui/core"; +import { Typography } from "@mui/material"; import ModalDialog from "components/Modals/ModalDialog"; import { invalidMeasureInput, @@ -19,6 +19,7 @@ import MeasureWithDatum from "models/measureWithDatum"; import MudLog from "models/mudLog"; import { toObjectReference } from "models/objectOnWellbore"; import React, { + ChangeEvent, Dispatch, SetStateAction, useContext, @@ -213,7 +214,7 @@ const GeologyIntervalPropertiesModal = ( ? `description must be 1-${MaxLength.Comment} characters` : "" } - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditable({ ...editable, description: undefinedOnUnchagedEmptyString( @@ -308,7 +309,7 @@ const GeologyIntervalPropertiesModal = ( defaultValue={geologyInterval?.dxcAv} helperText={invalid.dxcAv ? `dxcAv cannot be empty` : ""} variant={invalid.dxcAv ? "error" : undefined} - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditable({ ...editable, dxcAv: parseFloat(e.target.value) @@ -345,7 +346,7 @@ const GeologyIntervalPropertiesModal = ( ? `codeLith must be 1-${MaxLength.Str16} characters` : "" } - onChange={(e: any) => + onChange={(e: ChangeEvent) => setLithology(e.target.value, "codeLith", lithology.uid) } /> @@ -366,7 +367,7 @@ const GeologyIntervalPropertiesModal = ( ? "error" : undefined } - onChange={(e: any) => + onChange={(e: ChangeEvent) => setLithology( parseFloat(e.target.value), "lithPc", @@ -414,7 +415,7 @@ const MeasureField = (props: MeasureFieldProps): React.ReactElement => { unit={originalMeasure?.uom} helperText={invalid[property] ? `${property} cannot be empty` : ""} variant={invalid[property] ? "error" : undefined} - onChange={(e: any) => { + onChange={(e: ChangeEvent) => { setResult({ ...editable, [property]: { diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/JobInfoPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/JobInfoPropertiesModal.tsx index bf90708d5..f4206aee6 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/JobInfoPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/JobInfoPropertiesModal.tsx @@ -1,4 +1,4 @@ -import { TextField } from "@material-ui/core"; +import { TextField } from "@equinor/eds-core-react"; import ModalDialog from "components/Modals/ModalDialog"; import JobStatus from "models/jobStatus"; import JobInfo from "models/jobs/jobInfo"; @@ -20,97 +20,86 @@ const JobInfoPropertiesModal = ( content={ <> {jobInfo.status == JobStatus.Failed && ( )} } diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoBatchUpdateModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoBatchUpdateModal.tsx index f81da6422..de8df2dfc 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoBatchUpdateModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoBatchUpdateModal.tsx @@ -1,21 +1,21 @@ -import { Grid } from "@material-ui/core"; -import React, { useContext, useState } from "react"; +import { Autocomplete, TextField } from "@equinor/eds-core-react"; +import { Grid } from "@mui/material"; +import React, { ChangeEvent, useContext, useState } from "react"; import styled from "styled-components"; +import OperationContext from "../../contexts/operationContext"; +import OperationType from "../../contexts/operationType"; +import BatchModifyLogCurveInfoJob from "../../models/jobs/batchModifyLogCurveInfoJob"; import LogCurveInfo, { EmptyLogCurveInfo } from "../../models/logCurveInfo"; import LogObject from "../../models/logObject"; +import { logTraceState } from "../../models/logTraceState"; +import Measure from "../../models/measure"; import { toObjectReference } from "../../models/objectOnWellbore"; +import { unitType } from "../../models/unitType"; import JobService, { JobType } from "../../services/jobService"; -import ModalDialog from "./ModalDialog"; import { LogCurveInfoRow } from "../ContentViews/LogCurveInfoListView"; -import { Autocomplete, TextField } from "@equinor/eds-core-react"; -import { logTraceState } from "../../models/logTraceState"; -import { unitType } from "../../models/unitType"; +import ModalDialog from "./ModalDialog"; import { validText } from "./ModalParts"; -import Measure from "../../models/measure"; -import BatchModifyLogCurveInfoJob from "../../models/jobs/batchModifyLogCurveInfoJob"; -import OperationType from "../../contexts/operationType"; import { ReportModal } from "./ReportModal"; -import OperationContext from "../../contexts/operationContext"; export interface LogCurveInfoBatchUpdateModalProps { logCurveInfoRows: LogCurveInfoRow[]; @@ -108,7 +108,7 @@ const LogCurveInfoBatchUpdateModal = ( label={"SensorOffset value"} type="number" value={editableLogCurveInfo.sensorOffset?.value} - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditableLogCurveInfo({ ...editableLogCurveInfo, sensorOffset: { @@ -147,7 +147,7 @@ const LogCurveInfoBatchUpdateModal = ( label={"NullValue"} type="number" value={editableLogCurveInfo.nullValue} - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditableLogCurveInfo({ ...editableLogCurveInfo, nullValue: e.target.value diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoPropertiesModal.tsx index 4a03af0b9..b5cbe975e 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/LogCurveInfoPropertiesModal.tsx @@ -1,12 +1,14 @@ -import { TextField, Typography } from "@material-ui/core"; +import { TextField } from "@equinor/eds-core-react"; +import { Typography } from "@mui/material"; import ModalDialog from "components/Modals/ModalDialog"; +import { validText } from "components/Modals/ModalParts"; import { HideModalAction } from "contexts/operationStateReducer"; import OperationType from "contexts/operationType"; import ModifyLogCurveInfoJob from "models/jobs/modifyLogCurveInfoJob"; import LogCurveInfo from "models/logCurveInfo"; import LogObject from "models/logObject"; import { toObjectReference } from "models/objectOnWellbore"; -import React, { useEffect, useState } from "react"; +import React, { ChangeEvent, useEffect, useState } from "react"; import JobService, { JobType } from "services/jobService"; import { Layout } from "../StyledComponents/Layout"; @@ -40,6 +42,9 @@ const LogCurveInfoPropertiesModal = ( setEditableLogCurveInfo(logCurveInfo); }, [logCurveInfo]); + const validMnemonic = validText(editableLogCurveInfo?.mnemonic, 1, 64); + const validUnit = validText(editableLogCurveInfo?.unit, 1, 64); + return ( <> {editableLogCurveInfo && ( @@ -52,22 +57,19 @@ const LogCurveInfoPropertiesModal = ( id="uid" label="uid" defaultValue={editableLogCurveInfo.uid} - fullWidth /> + onChange={(e: ChangeEvent) => setEditableLogCurveInfo({ ...editableLogCurveInfo, mnemonic: e.target.value @@ -78,18 +80,13 @@ const LogCurveInfoPropertiesModal = ( id="unit" label="unit" defaultValue={editableLogCurveInfo.unit} - error={ - editableLogCurveInfo.unit == null || - editableLogCurveInfo.unit.length === 0 - } + variant={validUnit ? undefined : "error"} helperText={ - editableLogCurveInfo.unit == null || - editableLogCurveInfo.unit.length === 0 + !validUnit ? "A unit cannot be empty. Size must be 1 to 64 characters." : "" } - inputProps={{ minLength: 1, maxLength: 64 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableLogCurveInfo({ ...editableLogCurveInfo, unit: e.target.value @@ -100,7 +97,7 @@ const LogCurveInfoPropertiesModal = ( id="curveDescription" label="curveDescription" defaultValue={editableLogCurveInfo.curveDescription} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableLogCurveInfo({ ...editableLogCurveInfo, curveDescription: e.target.value @@ -112,14 +109,12 @@ const LogCurveInfoPropertiesModal = ( id="typeLogData" label="typeLogData" defaultValue={editableLogCurveInfo.typeLogData} - fullWidth /> {logCurveInfo?.axisDefinitions?.map((axisDefinition) => { return ( @@ -129,21 +124,18 @@ const LogCurveInfoPropertiesModal = ( + onChange={(e: ChangeEvent) => setEditableLogObject({ ...editableLogObject, uid: e.target.value @@ -154,7 +154,7 @@ const LogPropertiesModal = ( variant={ editableLogObject.name.length === 0 ? "error" : undefined } - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditableLogObject({ ...editableLogObject, name: e.target.value @@ -181,7 +181,7 @@ const LogPropertiesModal = ( } variant={validServiceCompany() ? undefined : "error"} defaultValue={editableLogObject.serviceCompany} - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditableLogObject({ ...editableLogObject, serviceCompany: @@ -195,7 +195,7 @@ const LogPropertiesModal = ( helperText={validRunNumber() ? "" : getRunNumberHelperText()} variant={validRunNumber() ? undefined : "error"} defaultValue={editableLogObject.runNumber} - onChange={(e: any) => + onChange={(e: ChangeEvent) => setEditableLogObject({ ...editableLogObject, runNumber: e.target.value === "" ? null : e.target.value diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/MessagePropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/MessagePropertiesModal.tsx index 138f47b8a..c1043068b 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/MessagePropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/MessagePropertiesModal.tsx @@ -1,4 +1,4 @@ -import { TextField } from "@material-ui/core"; +import { TextField } from "@equinor/eds-core-react"; import formatDateString from "components/DateFormatter"; import ModalDialog from "components/Modals/ModalDialog"; import { PropertiesModalMode, validText } from "components/Modals/ModalParts"; @@ -7,7 +7,7 @@ import { HideModalAction } from "contexts/operationStateReducer"; import OperationType from "contexts/operationType"; import MessageObject from "models/messageObject"; import { ObjectType } from "models/objectType"; -import React, { useContext, useEffect, useState } from "react"; +import React, { ChangeEvent, useContext, useEffect, useState } from "react"; import JobService, { JobType } from "services/jobService"; export interface MessagePropertiesModalProps { @@ -58,6 +58,13 @@ const MessagePropertiesModal = ( dispatchOperation({ type: OperationType.HideModal }); }; + const validName = validText(editableMessageObject?.name, 1, 64); + const validMessageText = validText( + editableMessageObject?.messageText, + 1, + 4000 + ); + return ( <> {editableMessageObject && ( @@ -74,36 +81,29 @@ const MessagePropertiesModal = ( id="dateTimeCreation" label="created" defaultValue={editableMessageObject.commonData.dTimCreation} - fullWidth /> + onChange={(e: ChangeEvent) => setEditableMessageObject({ ...editableMessageObject, name: e.target.value @@ -114,17 +114,15 @@ const MessagePropertiesModal = ( id="messageText" label="messageText" value={editableMessageObject.messageText} - fullWidth multiline required - error={!validText(editableMessageObject.messageText)} + variant={validMessageText ? undefined : "error"} helperText={ - editableMessageObject.messageText.length === 0 + !validMessageText ? "The message text must be 1-4000 characters" : "" } - inputProps={{ minLength: 1, maxLength: 4000 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableMessageObject({ ...editableMessageObject, messageText: e.target.value @@ -136,35 +134,28 @@ const MessagePropertiesModal = ( id="wellUid" label="well uid" defaultValue={editableMessageObject.wellUid} - fullWidth /> } - confirmDisabled={ - !validText(editableMessageObject.messageText) || - !validText(editableMessageObject.name) - } + confirmDisabled={!validName || !validMessageText} onSubmit={() => onSubmit(editableMessageObject)} isLoading={isLoading} /> diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx index ce5692af8..4d8e232fc 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx @@ -4,7 +4,7 @@ import { Icon, Typography } from "@equinor/eds-core-react"; -import { CloudUpload } from "@material-ui/icons"; +import { CloudUpload } from "@mui/icons-material"; import { StyledAccordionHeader } from "components/Modals/LogComparisonModal"; import { objectToProperties, @@ -317,10 +317,10 @@ const MissingDataAgentModal = ( paddingLeft: "0.5rem" }} > - - - diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/ModalParts.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/ModalParts.tsx index 602845fa0..36cc3693e 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/ModalParts.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/ModalParts.tsx @@ -22,10 +22,10 @@ export const validTimeZone = (timeZone: string): boolean => { return timeZoneValidator.test(timeZone); }; -export const validPhoneNumber = (telnum: string): boolean => { +const validNumber = (num: string): boolean => { let result = true; - if (telnum) { - const arr: Array = telnum.split(""); + if (num) { + const arr: Array = num.split(""); arr.forEach((e) => { if (isNaN(parseInt(e)) && e != " " && e != "-" && e != "+") { result = false; @@ -34,3 +34,11 @@ export const validPhoneNumber = (telnum: string): boolean => { } return result; }; + +export const validPhoneNumber = (telnum: string): boolean => { + return validNumber(telnum) && validText(telnum, 8, 16); +}; + +export const validFaxNumber = (faxnum: string): boolean => { + return validNumber(faxnum) && validText(faxnum, 0, 16); +}; diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/MudLogPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/MudLogPropertiesModal.tsx index dc4370ffa..f20c3df50 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/MudLogPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/MudLogPropertiesModal.tsx @@ -12,7 +12,7 @@ import MaxLength from "models/maxLength"; import MudLog from "models/mudLog"; import ObjectOnWellbore, { toObjectReference } from "models/objectOnWellbore"; import { ObjectType } from "models/objectType"; -import React, { useContext, useEffect, useState } from "react"; +import React, { ChangeEvent, useContext, useEffect, useState } from "react"; import JobService, { JobType } from "services/jobService"; import { Layout } from "../StyledComponents/Layout"; @@ -216,7 +216,7 @@ const EditableTextField = ( helperText={ invalid ? `${property} must be 1-${maxLength} characters` : "" } - onChange={(e: any) => + onChange={(e: ChangeEvent) => setter({ ...editableObject, [property]: undefinedOnUnchagedEmptyString( diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx index 5649e9403..214d4d54c 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx @@ -155,7 +155,9 @@ const ObjectPickerModal = ({ ? `Well UID must be 1-${MaxLength.Uid} characters` : "" } - onChange={(e: any) => setWellUid(e.target.value)} + onChange={(e: ChangeEvent) => + setWellUid(e.target.value) + } style={{ paddingBottom: invalidUid(wellUid) ? 0 : "24px" }} @@ -170,7 +172,9 @@ const ObjectPickerModal = ({ ? `Wellbore UID must be 1-${MaxLength.Uid} characters` : "" } - onChange={(e: any) => setWellboreUid(e.target.value)} + onChange={(e: ChangeEvent) => + setWellboreUid(e.target.value) + } style={{ paddingBottom: invalidUid(wellboreUid) ? 0 : "24px" }} @@ -185,7 +189,9 @@ const ObjectPickerModal = ({ ? `Object UID must be 1-${MaxLength.Uid} characters` : "" } - onChange={(e: any) => setObjectUid(e.target.value)} + onChange={(e: ChangeEvent) => + setObjectUid(e.target.value) + } style={{ paddingBottom: invalidUid(objectUid) ? 0 : "24px" }} diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/RigPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/RigPropertiesModal.tsx index a60b19e67..8a9cebce0 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/RigPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/RigPropertiesModal.tsx @@ -1,9 +1,9 @@ -import { Autocomplete } from "@equinor/eds-core-react"; -import { TextField } from "@material-ui/core"; +import { Autocomplete, TextField } from "@equinor/eds-core-react"; import { DateTimeField } from "components/Modals/DateTimeField"; import ModalDialog from "components/Modals/ModalDialog"; import { PropertiesModalMode, + validFaxNumber, validPhoneNumber, validText } from "components/Modals/ModalParts"; @@ -14,7 +14,7 @@ import { itemStateTypes } from "models/itemStateTypes"; import { ObjectType } from "models/objectType"; import Rig from "models/rig"; import { rigType } from "models/rigType"; -import React, { useContext, useState } from "react"; +import React, { ChangeEvent, useContext, useState } from "react"; import JobService, { JobType } from "services/jobService"; export interface RigPropertiesModalProps { @@ -55,10 +55,24 @@ const RigPropertiesModal = ( }; const yearEntServiceValid = - (rig.yearEntService == null && - (editableRig?.yearEntService == null || - editableRig?.yearEntService.length == 0)) || + (!rig.yearEntService && !editableRig?.yearEntService) || editableRig?.yearEntService?.length == 4; + const validTelNumber = + (!rig.telNumber && !editableRig?.telNumber) || + validPhoneNumber(editableRig.telNumber); + const faxNumberValid = + (!rig.faxNumber && !editableRig?.faxNumber) || + validFaxNumber(editableRig.faxNumber); + const validEmailAddress = + (!rig.emailAddress && !editableRig?.emailAddress) || + validText(editableRig.emailAddress, 1, 128); + const validNameContact = + (!rig.nameContact && !editableRig?.nameContact) || + validText(editableRig?.nameContact, 1, 64); + + const validRigUid = validText(editableRig?.uid, 1, 64); + const validRigName = validText(editableRig?.name, 1, 64); + return ( <> {editableRig && ( @@ -74,15 +88,11 @@ const RigPropertiesModal = ( label="rig uid" required value={editableRig.uid} - fullWidth - error={!validText(editableRig.uid)} + variant={validRigUid ? undefined : "error"} helperText={ - editableRig.uid.length === 0 - ? "A rig uid must be 1-64 characters" - : "" + !validRigUid ? "A rig uid must be 1-64 characters" : "" } - inputProps={{ minLength: 1, maxLength: 64 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, uid: e.target.value }) } /> @@ -91,43 +101,35 @@ const RigPropertiesModal = ( id="wellUid" label="well uid" defaultValue={editableRig.wellUid} - fullWidth /> + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, name: e.target.value }) } /> @@ -165,15 +167,13 @@ const RigPropertiesModal = ( value={ editableRig.yearEntService ? editableRig.yearEntService : "" } - error={editMode && !yearEntServiceValid} + variant={!yearEntServiceValid ? "error" : undefined} helperText={ - editMode && !yearEntServiceValid + !yearEntServiceValid ? "The rig yearEntService must be a 4 digit integer number" : "" } - fullWidth - inputProps={{ minLength: 4, maxLength: 4 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, yearEntService: e.target.value @@ -184,21 +184,13 @@ const RigPropertiesModal = ( id={"telNumber"} label={"telNumber"} value={editableRig.telNumber ? editableRig.telNumber : ""} - error={ - editMode && - (!validPhoneNumber(editableRig.telNumber) || - editableRig.telNumber?.length < 8) - } + variant={!validTelNumber ? "error" : undefined} helperText={ - editMode && - (!validPhoneNumber(editableRig.telNumber) || - editableRig.telNumber?.length < 8 + !validTelNumber ? "telNumber must be an integer of min 8 characters, however whitespace, dash and plus is accepted" - : "") + : "" } - fullWidth - inputProps={{ minLength: 8, maxLength: 16 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, telNumber: e.target.value }) } /> @@ -206,15 +198,13 @@ const RigPropertiesModal = ( id={"faxNumber"} label={"faxNumber"} value={editableRig.faxNumber ? editableRig.faxNumber : ""} - error={editMode && !validPhoneNumber(editableRig.faxNumber)} + variant={!faxNumberValid ? "error" : undefined} helperText={ - editMode && !validPhoneNumber(editableRig.faxNumber) + !faxNumberValid ? "faxNumber must be an integer, however whitespace, dash and plus is accepted" : "" } - fullWidth - inputProps={{ minLength: 0, maxLength: 16 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, faxNumber: e.target.value }) } /> @@ -222,15 +212,13 @@ const RigPropertiesModal = ( id={"emailAddress"} label={"emailAddress"} value={editableRig.emailAddress ? editableRig.emailAddress : ""} - error={editMode && editableRig.emailAddress?.length === 0} + variant={!validEmailAddress ? "error" : undefined} helperText={ - editMode && editableRig.emailAddress?.length === 0 + !validEmailAddress ? "The emailAddress must be at least 1 character long" : "" } - fullWidth - inputProps={{ minLength: 0, maxLength: 128 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, emailAddress: e.target.value @@ -241,15 +229,13 @@ const RigPropertiesModal = ( id={"nameContact"} label={"nameContact"} value={editableRig.nameContact ? editableRig.nameContact : ""} - error={editMode && editableRig.nameContact?.length === 0} + variant={!validNameContact ? "error" : undefined} helperText={ - editMode && editableRig.nameContact?.length === 0 + !validNameContact ? "The nameContact must be at least 1 character long" : "" } - fullWidth - inputProps={{ minLength: 0, maxLength: 128 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, nameContact: e.target.value @@ -260,14 +246,13 @@ const RigPropertiesModal = ( id={"ratingDrillDepth"} label={"ratingDrillDepth"} type="number" - fullWidth value={ editableRig.ratingDrillDepth ? editableRig.ratingDrillDepth.value : "" } disabled={!editableRig.ratingDrillDepth} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, ratingDrillDepth: { @@ -283,14 +268,13 @@ const RigPropertiesModal = ( id={"ratingWaterDepth"} label={"ratingWaterDepth"} type="number" - fullWidth value={ editableRig.ratingWaterDepth ? editableRig.ratingWaterDepth.value : "" } disabled={!editableRig.ratingWaterDepth} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRig({ ...editableRig, ratingWaterDepth: { @@ -306,9 +290,8 @@ const RigPropertiesModal = ( id={"airGap"} label={"airGap"} type="number" - fullWidth value={editableRig.airGap ? editableRig.airGap.value : ""} - onChange={(e) => { + onChange={(e: ChangeEvent) => { const uom = editableRig.airGap !== null ? editableRig.airGap.uom : "m"; setEditableRig({ @@ -325,9 +308,8 @@ const RigPropertiesModal = ( { + onChange={(e: ChangeEvent) => { setEditableRig({ ...editableRig, owner: e.target.value @@ -337,9 +319,8 @@ const RigPropertiesModal = ( { + onChange={(e: ChangeEvent) => { setEditableRig({ ...editableRig, manufacturer: e.target.value @@ -349,9 +330,8 @@ const RigPropertiesModal = ( { + onChange={(e: ChangeEvent) => { setEditableRig({ ...editableRig, classRig: e.target.value @@ -361,9 +341,8 @@ const RigPropertiesModal = ( { + onChange={(e: ChangeEvent) => { setEditableRig({ ...editableRig, approvals: e.target.value @@ -373,9 +352,8 @@ const RigPropertiesModal = ( { + onChange={(e: ChangeEvent) => { setEditableRig({ ...editableRig, registration: e.target.value @@ -402,7 +380,10 @@ const RigPropertiesModal = ( } confirmDisabled={ - !validText(editableRig.name) || !dTimStartOpValid || !dTimEndOpValid + !validRigUid || + !validRigName || + !dTimStartOpValid || + !dTimEndOpValid } onSubmit={() => onSubmit(editableRig)} isLoading={isLoading} diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/RiskPropertiesModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/RiskPropertiesModal.tsx index 3d255184c..86b38975f 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/RiskPropertiesModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/RiskPropertiesModal.tsx @@ -1,5 +1,4 @@ -import { Autocomplete } from "@equinor/eds-core-react"; -import { InputAdornment, TextField } from "@material-ui/core"; +import { Autocomplete, TextField } from "@equinor/eds-core-react"; import formatDateString from "components/DateFormatter"; import { DateTimeField } from "components/Modals/DateTimeField"; import ModalDialog from "components/Modals/ModalDialog"; @@ -14,7 +13,7 @@ import { riskCategory } from "models/riskCategory"; import RiskObject from "models/riskObject"; import { riskSubCategory } from "models/riskSubCategory"; import { riskType } from "models/riskType"; -import React, { useContext, useEffect, useState } from "react"; +import React, { ChangeEvent, useContext, useEffect, useState } from "react"; import JobService, { JobType } from "services/jobService"; export interface RiskPropertiesModalProps { @@ -73,6 +72,9 @@ const RiskPropertiesModal = ( dispatchOperation({ type: OperationType.HideModal }); }; + const validRiskName = validText(editableRiskObject?.name, 1, 64); + const validRiskDetails = validText(editableRiskObject?.details, 1, 256); + return ( <> {editableRiskObject && ( @@ -89,42 +91,36 @@ const RiskPropertiesModal = ( id="wellUid" label="well uid" defaultValue={editableRiskObject.wellUid} - fullWidth /> + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, name: e.target.value @@ -199,9 +190,17 @@ const RiskPropertiesModal = ( ? editableRiskObject.extendCategory : "" } - fullWidth - inputProps={{ minLength: 1 }} - onChange={(e) => + variant={ + editableRiskObject.extendCategory?.length === 0 + ? "error" + : undefined + } + helperText={ + editableRiskObject.extendCategory?.length === 0 + ? "The risk extendCategory must be at least 1 character" + : "" + } + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, extendCategory: e.target.value @@ -253,19 +252,14 @@ const RiskPropertiesModal = ( id={"mdBitStart"} label={"mdBitStart"} type="number" - fullWidth - InputProps={{ - startAdornment: ( - - {editableRiskObject.mdBitStart - ? editableRiskObject.mdBitStart.uom - : ""} - - ) - }} + unit={ + editableRiskObject.mdBitStart + ? editableRiskObject.mdBitStart.uom + : "" + } disabled={!editableRiskObject.mdBitStart} value={editableRiskObject.mdBitStart?.value} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, mdBitStart: { @@ -281,19 +275,14 @@ const RiskPropertiesModal = ( id={"mdBitEnd"} label={"mdBitEnd"} type="number" - fullWidth - InputProps={{ - startAdornment: ( - - {editableRiskObject.mdBitEnd - ? editableRiskObject.mdBitEnd.uom - : ""} - - ) - }} + unit={ + editableRiskObject.mdBitEnd + ? editableRiskObject.mdBitEnd.uom + : "" + } disabled={!editableRiskObject.mdBitEnd} value={editableRiskObject.mdBitEnd?.value} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, mdBitEnd: { @@ -313,15 +302,17 @@ const RiskPropertiesModal = ( ? editableRiskObject.severityLevel : "" } - error={editableRiskObject.severityLevel?.length === 0} + variant={ + editableRiskObject.severityLevel?.length === 0 + ? "error" + : undefined + } helperText={ editableRiskObject.severityLevel?.length === 0 ? "The risk severityLevel must be at least 1 character" : "" } - fullWidth - inputProps={{ minLength: 1 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, severityLevel: e.target.value @@ -336,15 +327,17 @@ const RiskPropertiesModal = ( ? editableRiskObject.probabilityLevel : "" } - error={editableRiskObject.probabilityLevel?.length === 0} + variant={ + editableRiskObject.probabilityLevel?.length === 0 + ? "error" + : undefined + } helperText={ editableRiskObject.probabilityLevel?.length === 0 ? "The risk probabilityLevel must be at least 1 character" : "" } - fullWidth - inputProps={{ minLength: 1 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, probabilityLevel: e.target.value @@ -358,15 +351,15 @@ const RiskPropertiesModal = ( value={ editableRiskObject.summary ? editableRiskObject.summary : "" } - error={editableRiskObject.summary?.length === 0} + variant={ + editableRiskObject.summary?.length === 0 ? "error" : undefined + } helperText={ editableRiskObject.summary?.length === 0 ? "The risk summary must be at least 1 character" : "" } - fullWidth - inputProps={{ minLength: 1 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, summary: e.target.value @@ -379,16 +372,14 @@ const RiskPropertiesModal = ( value={ editableRiskObject.details ? editableRiskObject.details : "" } - error={editableRiskObject.details?.length === 0} + variant={validRiskDetails ? undefined : "error"} multiline helperText={ - editableRiskObject.details?.length === 0 + !validRiskDetails ? "The risk details must be between 1 and 256 characters" : "" } - fullWidth - inputProps={{ minLength: 1, maxLength: 256 }} - onChange={(e) => + onChange={(e: ChangeEvent) => setEditableRiskObject({ ...editableRiskObject, details: e.target.value @@ -403,8 +394,7 @@ const RiskPropertiesModal = ( ? editableRiskObject.commonData.sourceName : "" } - fullWidth - onChange={(e) => { + onChange={(e: ChangeEvent) => { const commonData = { ...editableRiskObject.commonData, sourceName: e.target.value @@ -431,11 +421,7 @@ const RiskPropertiesModal = ( /> } - confirmDisabled={ - !validText(editableRiskObject.name) || - !dTimStartValid || - !dTimEndValid - } + confirmDisabled={!validRiskName || !dTimStartValid || !dTimEndValid} onSubmit={() => onSubmit(editableRiskObject)} isLoading={isLoading} /> diff --git a/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx b/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx index 9d562187f..6a44d665f 100644 --- a/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx +++ b/Src/WitsmlExplorer.Frontend/components/Modals/ServerModal.tsx @@ -1,5 +1,4 @@ import { Icon, Label, TextField, Tooltip } from "@equinor/eds-core-react"; -import { CSSProperties } from "@material-ui/core/styles/withStyles"; import { QueryClient, useQueryClient } from "@tanstack/react-query"; import ModalDialog, { ControlButtonPosition, @@ -20,6 +19,7 @@ import { refreshServersQuery } from "hooks/query/queryRefreshHelpers"; import { Server } from "models/server"; import { msalEnabled } from "msal/MsalAuthProvider"; import React, { + CSSProperties, ChangeEvent, Dispatch, SetStateAction, @@ -184,7 +184,7 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => { + onChange={(e: ChangeEvent) => setServer({ ...server, description: e.target.value }) } disabled={props.editDisabled} @@ -195,7 +195,7 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => { + onChange={(e: ChangeEvent) => setServer({ ...server, roles: e.target.value @@ -207,7 +207,7 @@ const ServerModal = (props: ServerModalProps): React.ReactElement => { />