Upgraded to react@18.2.0 and @mui/base@5.0.0-beta.13 (#285)

equinor · Aug 31, 2023 · ed55962 · ed55962
1 parent eab5f82
commit ed55962
Show file tree

Hide file tree

Showing 7 changed files with 2,221 additions and 2,204 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,13 +20,13 @@
         "@mui/base": "^5.0.0-beta.3",
         "@tanstack/react-query": "^4.24.10",
         "@tanstack/react-query-devtools": "^4.24.12",
-        "@webviz/subsurface-viewer": "^0.0.2-alpha.7",
+        "@webviz/subsurface-viewer": "^0.0.2-alpha.9",
         "animate.css": "^4.1.1",
         "axios": "^1.3.0",
         "culori": "^3.2.0",
         "lodash": "^4.17.21",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-plotly.js": "^2.6.0",
         "uniqolor": "^1.1.0",
         "uuid": "^9.0.0",
@@ -40,8 +40,8 @@
         "@types/jest": "^29.4.0",
         "@types/lodash": "^4.14.191",
         "@types/node": "^18.11.18",
-        "@types/react": "^18.0.26",
-        "@types/react-dom": "^18.0.9",
+        "@types/react": "^18.2.21",
+        "@types/react-dom": "^18.2.7",
         "@types/react-plotly.js": "^2.6.0",
         "@types/uuid": "^9.0.0",
         "@typescript-eslint/eslint-plugin": "^5.59.6",

diff --git a/frontend/src/framework/internal/components/LoginButton/loginButton.tsx b/frontend/src/framework/internal/components/LoginButton/loginButton.tsx
@@ -2,11 +2,12 @@ import React from "react";
 
 import { AuthState, useAuthProvider } from "@framework/internal/providers/AuthProvider";
 import { ArrowLeftOnRectangleIcon, ArrowRightOnRectangleIcon, UserIcon } from "@heroicons/react/20/solid";
-import { Button } from "@lib/components/Button";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Menu } from "@lib/components/Menu";
 import { MenuItem } from "@lib/components/MenuItem";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { getTextWidth } from "@lib/utils/textSize";
+import { Dropdown, MenuButton } from "@mui/base";
 
 export type LoginButtonProps = {
     className?: string;
@@ -15,8 +16,6 @@ export type LoginButtonProps = {
 };
 
 export const LoginButton: React.FC<LoginButtonProps> = (props) => {
-    const [menuOpen, setMenuOpen] = React.useState<boolean>(false);
-    const [menuAnchor, setMenuAnchor] = React.useState<HTMLElement | null>(null);
     const textRef = React.useRef<HTMLSpanElement>(null);
 
     const { authState, userInfo } = useAuthProvider();
@@ -28,26 +27,6 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
         */
     }
 
-    function handleMenuOpen(e: React.MouseEvent<HTMLElement>) {
-        setMenuAnchor(e.currentTarget);
-        setMenuOpen(true);
-    }
-
-    function handleButtonClick(e: React.MouseEvent<HTMLElement>) {
-        if (authState === "LoggedIn") {
-            handleMenuOpen(e);
-        } else {
-            window.location.href = `/api/login?redirect_url_after_login=${btoa("/")}`;
-        }
-    }
-
-    function handleMenuClose(open: boolean) {
-        if (!open) {
-            setMenuOpen(false);
-            setMenuAnchor(null);
-        }
-    }
-
     function makeIcon() {
         if (authState === AuthState.LoggedIn) {
             return <UserIcon className="w-5 h-5 mr-1" />;
@@ -83,25 +62,29 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
     }
 
     return (
-        <>
-            <Button
-                onClick={handleButtonClick}
-                className={props.className}
-                title={authState === AuthState.LoggedIn ? `Signed in as ${userInfo?.username}` : "Sign in"}
+        <Dropdown>
+            <MenuButton
+                className={resolveClassNames(
+                    props.className ?? "",
+                    "w-full inline-flex items-center min-w-0 px-4 py-2 font-medium rounded-md hover:bg-indigo-100"
+                )}
             >
-                <span className="flex items-center gap-2 min-w-0">
+                <span
+                    className="flex items-center gap-2"
+                    title={authState === AuthState.LoggedIn ? `Signed in as ${userInfo?.username}` : "Sign in"}
+                >
                     {makeIcon()}
                     <span className="overflow-hidden text-ellipsis min-w-0 whitespace-nowrap" ref={textRef}>
                         {props.showText && text}
                     </span>
                 </span>
-            </Button>
-            <Menu open={menuOpen} onOpenChange={handleMenuClose} anchorEl={menuAnchor} anchorOrigin="bottom-start">
+            </MenuButton>
+            <Menu anchorOrigin="bottom-start">
                 <MenuItem onClick={handleLogout}>
                     <ArrowRightOnRectangleIcon className="w-4 h-4 mr-2" />
                     Sign out
                 </MenuItem>
             </Menu>
-        </>
+        </Dropdown>
     );
 };
diff --git a/frontend/src/lib/components/Input/input.tsx b/frontend/src/lib/components/Input/input.tsx
@@ -24,10 +24,10 @@ export const Input = React.forwardRef((props: InputProps, ref: React.ForwardedRe
 
     const internalRef = React.useRef<HTMLInputElement>(null);
 
-    React.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-        props.inputRef,
-        () => internalRef.current
-    );
+    React.useImperativeHandle<
+        HTMLInputElement | HTMLTextAreaElement | null,
+        HTMLInputElement | HTMLTextAreaElement | null
+    >(props.inputRef, () => internalRef.current);
 
     const handleAdornmentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         if (internalRef.current) {

diff --git a/frontend/src/lib/components/SmartNodeSelector/private-components/suggestions.tsx b/frontend/src/lib/components/SmartNodeSelector/private-components/suggestions.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { Root, createRoot } from "react-dom/client";
 
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
@@ -37,6 +37,7 @@ export class Suggestions extends React.Component<SuggestionsProps> {
     private _lastNodeSelection?: TreeNodeSelection;
     private _positionRef: React.RefObject<HTMLDivElement>;
     private _popup: HTMLDivElement | null;
+    private _popupRoot: Root | null;
     private _showingAllSuggestions: boolean;
 
     constructor(props: SuggestionsProps) {
@@ -53,6 +54,7 @@ export class Suggestions extends React.Component<SuggestionsProps> {
         this._allOptions = [];
         this._positionRef = React.createRef();
         this._popup = null;
+        this._popupRoot = null;
         this._showingAllSuggestions = false;
 
         this.state = {
@@ -80,6 +82,7 @@ export class Suggestions extends React.Component<SuggestionsProps> {
 
         this._popup = document.createElement("div");
         document.body.appendChild(this._popup);
+        this._popupRoot = createRoot(this._popup);
     }
 
     componentWillUnmount(): void {
@@ -370,7 +373,9 @@ export class Suggestions extends React.Component<SuggestionsProps> {
                   height: 0,
               };
 
-        ReactDOM.render(
+        if (!this._popupRoot) return;
+
+        this._popupRoot.render(
             <div
                 ref={suggestionsRef}
                 className="box-border absolute top-full left-0 w-full border bg-white rounded-b shadow z-50 overflow-y-auto"
@@ -394,8 +399,7 @@ export class Suggestions extends React.Component<SuggestionsProps> {
                         height: lowerSpacerHeight + "px",
                     }}
                 ></div>
-            </div>,
-            this._popup
+            </div>
         );
     }
 

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,11 +1,18 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import App from "./App";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+
+if (!container) {
+    throw new Error("Could not find root container");
+}
+
+const root = createRoot(container);
+
+root.render(
     <React.StrictMode>
         <App />
-    </React.StrictMode>,
-    document.getElementById("root")
+    </React.StrictMode>
 );
diff --git a/frontend/src/modules/MyModule/settings.tsx b/frontend/src/modules/MyModule/settings.tsx
@@ -83,17 +83,17 @@ export const settings = (props: ModuleFCProps<State>) => {
                 />
             </Label>
             <Label text="Min">
-                <Input type="number" value={min} onChange={(e) => setMin(e.target.valueAsNumber)} />
+                <Input type="number" value={min} onChange={(e) => setMin(parseFloat(e.target.value))} />
             </Label>
             <Label text="Max">
-                <Input type="number" value={max} onChange={(e) => setMax(e.target.valueAsNumber)} />
+                <Input type="number" value={max} onChange={(e) => setMax(parseFloat(e.target.value))} />
             </Label>
             {gradientType === ColorScaleGradientType.Diverging && (
                 <Label text="Midpoint">
                     <Input
                         type="number"
                         value={divMidPoint}
-                        onChange={(e) => setDivMidPoint(e.target.valueAsNumber)}
+                        onChange={(e) => setDivMidPoint(parseFloat(e.target.value))}
                         min={0}
                         max={max}
                     />