Upgrade dependancies (#2290)

* Bump vite

* bump eslint-import-resolver-typescript

* Cleanup

* Bump datepicker

kafka-ui-react-app/jest.config.ts

@@ -31,4 +31,5 @@ export default {
     'jest-watch-typeahead/testname',
   ],
   resetMocks: true,
+  reporters: ['default', 'github-actions'],
 } as Config.InitialOptions;

kafka-ui-react-app/package.json

@@ -15,7 +15,7 @@
     "@testing-library/react": "^13.2.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/yup": "^0.29.13",
-    "@vitejs/plugin-react": "^1.3.2",
+    "@vitejs/plugin-react": "^2.0.0",
     "ace-builds": "^1.4.12",
     "ajv": "^8.6.3",
     "babel-jest": "^28.1.1",
@@ -24,14 +24,14 @@
     "dayjs": "^1.11.2",
     "fetch-mock": "^9.11.0",
     "jest": "^28.1.1",
-    "jest-watch-typeahead": "^1.1.0",
+    "jest-watch-typeahead": "^2.0.0",
     "json-schema-faker": "^0.5.0-rcv.39",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.1",
-    "pretty-ms": "^7.0.1",
+    "pretty-ms": "7.0.1",
     "react": "^18.1.0",
-    "react-ace": "^9.4.3",
-    "react-datepicker": "^4.2.0",
+    "react-ace": "^10.1.0",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^18.1.0",
     "react-hook-form": "7.6.9",
     "react-is": "^18.2.0",
@@ -44,7 +44,7 @@
     "sass": "^1.52.3",
     "styled-components": "^5.3.1",
     "use-debounce": "^8.0.1",
-    "vite": "^2.9.11",
+    "vite": "^3.0.2",
     "vite-tsconfig-paths": "^3.5.0",
     "whatwg-fetch": "^3.6.2",
     "yup": "^0.32.9"
@@ -52,7 +52,7 @@
   "lint-staged": {
     "*.{ts,tsx}": [
       "eslint --fix",
-      "pnpm test -- --bail --findRelatedTests --watchAll=false"
+      "pnpm test -- --bail --findRelatedTests --watchAll=false --passWithNoTests"
     ]
   },
   "scripts": {
@@ -87,7 +87,7 @@
     "@types/lodash": "^4.14.172",
     "@types/node": "^16.4.13",
     "@types/react": "^18.0.9",
-    "@types/react-datepicker": "^4.1.4",
+    "@types/react-datepicker": "^4.4.2",
     "@types/react-dom": "^18.0.3",
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.3.3",
@@ -102,7 +102,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-node": "^0.3.6",
-    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-import-resolver-typescript": "^3.2.7",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-jsx-a11y": "^6.5.1",

kafka-ui-react-app/src/components/Brokers/Broker/Broker.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
@@ -15,6 +15,7 @@ import { NavLink, Route, Routes } from 'react-router-dom';
 import BrokerLogdir from 'components/Brokers/Broker/BrokerLogdir/BrokerLogdir';
 import BrokerMetrics from 'components/Brokers/Broker/BrokerMetrics/BrokerMetrics';
 import Navbar from 'components/common/Navigation/Navbar.styled';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 
 export interface BrokerLogdirState {
   name: string;
@@ -67,6 +68,7 @@ const Broker: React.FC = () => {
         </NavLink>
       </Navbar>
 
+      <Suspense fallback={<PageLoader />}>
         <Routes>
           <Route index element={<BrokerLogdir />} />
           <Route
@@ -74,6 +76,7 @@ const Broker: React.FC = () => {
             element={<BrokerMetrics />}
           />
         </Routes>
+      </Suspense>
     </>
   );
 };

kafka-ui-react-app/src/components/common/EditorViewer/EditorViewer.tsx

@@ -4,7 +4,7 @@ import { SchemaType } from 'generated-sources';
 
 import * as S from './EditorViewer.styled';
 
-export interface FullMessageProps {
+export interface EditorViewerProps {
   data: string;
   schemaType?: string;
   maxLines?: number;
@@ -16,7 +16,7 @@ const getSchemaValue = (data: string, schemaType?: string) => {
   }
   return data;
 };
-const EditorViewer: React.FC<FullMessageProps> = ({
+const EditorViewer: React.FC<EditorViewerProps> = ({
   data,
   schemaType,
   maxLines,

kafka-ui-react-app/src/components/common/EditorViewer/__test__/EditorViewer.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import EditorViewer, {
-  FullMessageProps,
+  EditorViewerProps,
 } from 'components/common/EditorViewer/EditorViewer';
 import { render } from 'lib/testHelpers';
 import { screen } from '@testing-library/react';
@@ -10,7 +10,7 @@ const maxLines = 28;
 const schemaType = 'JSON';
 
 describe('EditorViewer component', () => {
-  const setupComponent = (props: FullMessageProps) =>
+  const setupComponent = (props: EditorViewerProps) =>
     render(<EditorViewer {...props} />);
 
   it('renders JSONTree', () => {

kafka-ui-react-app/src/components/common/Navigation/Navbar.styled.ts

@@ -5,12 +5,14 @@ const Navbar = styled.nav`
   border-bottom: 1px ${({ theme }) => theme.primaryTab.borderColor.nav} solid;
   & a {
     height: 40px;
-    width: 96px;
+    min-width: 96px;
+    padding: 0 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: 500;
     font-size: 14px;
+    white-space: nowrap;
     color: ${(props) => props.theme.primaryTab.color.normal};
     border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.normal}
       solid;

kafka-ui-react-app/src/lib/hooks/api/brokers.ts

@@ -17,8 +17,7 @@ export function useBrokerMetrics(clusterName: ClusterName, brokerId: number) {
       api.getBrokersMetrics({
         clusterName,
         id: brokerId,
-      }),
-    { refetchInterval: 5000 }
+      })
   );
 }
 
@@ -29,7 +28,6 @@ export function useBrokerLogDirs(clusterName: ClusterName, brokerId: number) {
       api.getAllBrokersLogdirs({
         clusterName,
         broker: [brokerId],
-      }),
-    { refetchInterval: 5000 }
+      })
   );
 }

kafka-ui-react-app/vite.config.ts

@@ -7,6 +7,9 @@ export default defineConfig(({ mode }) => {
 
   const defaultConfig: UserConfigExport = {
     plugins: [react(), tsconfigPaths()],
+    server: {
+      port: 3000,
+    },
     build: {
       outDir: 'build',
       rollupOptions: {
@@ -38,6 +41,7 @@ export default defineConfig(({ mode }) => {
     return {
       ...defaultConfig,
       server: {
+        ...defaultConfig.server,
         open: true,
         proxy: {
           '/api': {