build: Update UI dependencies and fix arising issues

ballista/scheduler/ui/package.json

@@ -3,29 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/icons": "^1.0.5",
-    "@chakra-ui/react": "^1.3.3",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "framer-motion": "^3.7.0",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@testing-library/jest-dom": "^6.2.1",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "framer-motion": "^11.0.2",
     "js-file-download": "^0.4.12",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-icons": "^4.2.0",
-    "react-inlinesvg": "^3.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "react-table": "^7.6.3",
-    "react-timeago": "^5.2.0",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-inlinesvg": "^4.1.1",
+    "react-router-dom": "^6.21.3",
+    "react-scripts": "5.0.1",
+    "react-table": "^7.8.0",
+    "react-timeago": "^7.2.0",
+    "typescript": "^5.3.3",
+    "web-vitals": "^3.5.1"
   },
   "scripts": {
     "start": "react-scripts --openssl-legacy-provider start",
@@ -52,9 +52,9 @@
     ]
   },
   "devDependencies": {
-    "@types/react-table": "^7.0.28",
-    "@types/react-timeago": "^4.1.2",
-    "prettier": "^2.3.0"
-  },
-  "proxy": "http://localhost:50050"
+    "@types/react-table": "^7.7.19",
+    "@types/react-timeago": "^4.1.7",
+    "prettier": "^3.2.4",
+    "http-proxy-middleware": "^2.0.6"
+  }
 }

ballista/scheduler/ui/src/components/DataTable.tsx

@@ -36,7 +36,7 @@ import {
   usePagination,
   Column as RTColumn,
 } from "react-table";
-import { HiChevronLeft, HiChevronRight } from "react-icons/all";
+import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
 import TimeAgo from "react-timeago";
 
 type RenderFn = (props: any) => React.ReactNode;

ballista/scheduler/ui/src/components/Header.tsx

@@ -18,7 +18,8 @@
 import React from "react";
 import { Box, Flex, Button } from "@chakra-ui/react";
 import Logo from "./logo.svg";
-import { AiFillGithub, HiDocumentText } from "react-icons/all";
+import { HiDocumentText } from "react-icons/hi";
+import { AiFillGithub } from "react-icons/ai";
 import { SchedulerState } from "./Summary";
 
 export const NavBarContainer: React.FunctionComponent<

ballista/scheduler/ui/src/components/QueriesList.tsx

@@ -168,7 +168,7 @@ export const JobLinkCell: (props: any) => React.ReactNode = (props: any) => {
 
   return (
     <Flex>
-      <Link onClick={onOpen} icon>
+      <Link onClick={onOpen}>
         {props.value} <ExternalLinkIcon mx="2px" />
       </Link>
       <Modal isOpen={isOpen} size="small" onClose={onClose}>

ballista/scheduler/ui/src/index.tsx

@@ -16,20 +16,21 @@
 // under the License.
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { ChakraProvider } from "@chakra-ui/react";
 
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root")!);
+
+root.render(
   <React.StrictMode>
     <ChakraProvider>
       <App />
     </ChakraProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

ballista/scheduler/ui/src/setupProxy.js

@@ -0,0 +1,32 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+
+// Proxy configuration for the development server.
+// Previously, this was configured by adding a "proxy" field to package.json, but that stopped working.
+// For additional details see https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+module.exports = function (app) {
+  app.use(
+    "/api", // the API endpoint
+    createProxyMiddleware({
+      target: "http://localhost:50050", // the local development backend server
+      changeOrigin: true,
+    })
+  );
+};