Fix: Warning in console when creating a new test (#728)

Farfetch · Sep 13, 2023 · 1bfe436 · 1bfe436
1 parent ce51395
commit 1bfe436
Show file tree

Hide file tree

Showing 13 changed files with 1,796 additions and 1,535 deletions.
diff --git a/web/frontend/package.json b/web/frontend/package.json
@@ -5,10 +5,11 @@
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons": "^4.6.2",
+    "@ant-design/pro-layout": "^7.16.11",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
-    "antd": "^4.19.5",
+    "antd": "^5.8.6",
     "axios": "^0.27.2",
     "axios-mock-adapter": "^1.21.2",
     "chart.js": "^3.7.1",
@@ -25,9 +26,9 @@
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
     "qs": "^6.11.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-chartjs-2": "^3.0.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.10",
     "react-resizable": "^3.0.5",
     "react-router-dom": "6.4.2"

diff --git a/web/frontend/src/components/Header/Profile/Profile.js b/web/frontend/src/components/Header/Profile/Profile.js
@@ -3,7 +3,7 @@ import {
   LogoutOutlined,
   UserOutlined
 } from "@ant-design/icons";
-import { Dropdown, Menu, Select, Space } from "antd";
+import { Dropdown, Select, Space } from "antd";
 import { useContext } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
@@ -35,26 +35,31 @@ const Profile = () => {
     setCurrentWorkspace(workspace);
   };
 
-  const menu = (
-    <Menu>
-      <Menu.Item key="me" disabled>
-        {user.email}
-      </Menu.Item>
-      {user.role === userRoleModel.ADMIN ? (
-        <>
-          <Menu.Item key="workspaces" icon={<AppstoreOutlined />}>
-            <Link to={workspacesUrl}>Workspaces</Link>
-          </Menu.Item>
-          <Menu.Item key="users" icon={<UserOutlined />}>
-            <Link to={usersUrl}>Users</Link>
-          </Menu.Item>
-        </>
-      ) : null}
-      <Menu.Item key="logout" icon={<LogoutOutlined />}>
-        <a href={logoutUrl}>Logout</a>
-      </Menu.Item>
-    </Menu>
-  );
+  const items = [
+    {
+      key: "me",
+      label: user.email,
+      disabled: true
+    },
+    {
+      key: "workspaces",
+      label: <Link to={workspacesUrl}>Workspaces</Link>,
+      icon: <AppstoreOutlined />,
+      disabled: user.role !== userRoleModel.ADMIN
+    },
+    {
+      key: "users",
+      label: <Link to={usersUrl}>Users</Link>,
+      icon: <UserOutlined />,
+      disabled: user.role !== userRoleModel.ADMIN
+    },
+    {
+      key: "logout",
+      label: <a href={logoutUrl}>Logout</a>,
+      icon: <LogoutOutlined />,
+      danger: true
+    }
+  ];
 
   return (
     <Space align="center">
@@ -70,7 +75,7 @@ const Profile = () => {
         ))}
       </Select>
       <Dropdown
-        overlay={menu}
+        menu={{ items }}
         placement="bottomRight"
         arrow={{ pointAtCenter: true }}
       >

diff --git a/web/frontend/src/components/Run/ErrorStatus/RunErrorStatus.js b/web/frontend/src/components/Run/ErrorStatus/RunErrorStatus.js
@@ -1,5 +1,6 @@
 import { CloseCircleOutlined } from "@ant-design/icons";
-import { Button, PageHeader, Result, Space, Typography } from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
+import { Button, Result, Space, Typography } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 

diff --git a/web/frontend/src/components/Run/PendingStatus/RunPendingStatus.js b/web/frontend/src/components/Run/PendingStatus/RunPendingStatus.js
@@ -1,4 +1,5 @@
-import { Button, Col, PageHeader, Popconfirm, Row, Steps } from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
+import { Button, Col, Popconfirm, Row, Steps } from "antd";
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 

diff --git a/web/frontend/src/components/Run/RunningStatus/MoreButtonsMenu/MoreButtonsMenu.js b/web/frontend/src/components/Run/RunningStatus/MoreButtonsMenu/MoreButtonsMenu.js
@@ -1,25 +1,26 @@
 import { MoreOutlined } from "@ant-design/icons";
-import { Button, Dropdown, Menu } from "antd";
+import { Button, Dropdown } from "antd";
 
 import { runLogDownloadUrl } from "../../../../lib/routes";
 
 const MoreButtonsMenu = ({ runId }) => {
-  const menu = (
-    <Menu>
-      <Menu.Item>
+  const items = [
+    {
+      key: "runId",
+      label: (
         <a
           target="_blank"
           rel="noopener noreferrer"
           href={runLogDownloadUrl(runId)}
         >
           Download logs
         </a>
-      </Menu.Item>
-    </Menu>
-  );
+      )
+    }
+  ];
 
   return (
-    <Dropdown key="more" overlay={menu} placement="bottomRight">
+    <Dropdown key="more" menu={{ items }} placement="bottomRight">
       <Button type="text" icon={<MoreOutlined style={{ fontSize: 20 }} />} />
     </Dropdown>
   );

diff --git a/web/frontend/src/components/Run/RunningStatus/RunRunningStatus.js b/web/frontend/src/components/Run/RunningStatus/RunRunningStatus.js
@@ -1,13 +1,5 @@
-import {
-  Button,
-  Col,
-  PageHeader,
-  Popconfirm,
-  Row,
-  Space,
-  Tabs,
-  Typography
-} from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
+import { Button, Col, Popconfirm, Row, Space, Tabs, Typography } from "antd";
 import { useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
 

diff --git a/web/frontend/src/components/User/CreateUserModal/CreateUserModal.js b/web/frontend/src/components/User/CreateUserModal/CreateUserModal.js
@@ -26,7 +26,7 @@ const CreateUserModal = ({
     <Modal
       title="New User"
       okText="Create"
-      visible={isVisible}
+      open={isVisible}
       onOk={() => form.submit()}
       onCancel={onCancel}
     >

diff --git a/web/frontend/src/components/User/EditUserModal/EditUserModal.js b/web/frontend/src/components/User/EditUserModal/EditUserModal.js
@@ -27,7 +27,7 @@ const EditUserModal = ({
     <Modal
       title="Edit User"
       okText="Save"
-      visible={isVisible}
+      open={isVisible}
       onOk={() => form.submit()}
       onCancel={onCancel}
     >

diff --git a/web/frontend/src/components/Workspace/CreateWorkspaceModal/CreateWorkspaceModal.js b/web/frontend/src/components/Workspace/CreateWorkspaceModal/CreateWorkspaceModal.js
@@ -19,7 +19,7 @@ const CreateWorkspaceModal = ({ isVisible, onSave, onCancel, users }) => {
     <Modal
       title="New Workspace"
       okText="Create"
-      visible={isVisible}
+      open={isVisible}
       onOk={() => form.submit()}
       onCancel={onCancel}
     >

diff --git a/web/frontend/src/components/Workspace/EditWorkspaceModal/EditWorkspaceModal.js b/web/frontend/src/components/Workspace/EditWorkspaceModal/EditWorkspaceModal.js
@@ -25,7 +25,7 @@ const EditWorkspaceModal = ({
     <Modal
       title="Edit Workspace"
       okText="Save"
-      visible={isVisible}
+      open={isVisible}
       onOk={() => form.submit()}
       onCancel={onCancel}
     >

diff --git a/web/frontend/src/index.js b/web/frontend/src/index.js
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { CurrentWorkspaceContextProvider } from "./context/CurrentWorkspace";
@@ -20,7 +20,10 @@ function ErrorFallback({ error }) {
   );
 }
 
-ReactDOM.render(
+const rootElement = document.getElementById("root");
+const root = createRoot(rootElement);
+
+root.render(
   <ErrorBoundary FallbackComponent={ErrorFallback}>
     <UserContextProvider>
       <CurrentWorkspaceContextProvider>
@@ -29,6 +32,5 @@ ReactDOM.render(
         </RunningContextProvider>
       </CurrentWorkspaceContextProvider>
     </UserContextProvider>
-  </ErrorBoundary>,
-  document.getElementById("root")
+  </ErrorBoundary>
 );
diff --git a/web/frontend/src/pages/Layout/layout.css b/web/frontend/src/pages/Layout/layout.css
@@ -1,4 +1,4 @@
-@import "~antd/dist/antd.css";
+@import "~antd/dist/reset.css";
 
 /* https://ant.design/components/layout/ */
 :root {