Upgrade deps (#2206)

* hook

* Upgrade Jest to v28

* Upgrade Typescript

kafka-ui-react-app/.husky/.gitignore

@@ -1 +0,0 @@
-_

kafka-ui-react-app/.husky/pre-commit

@@ -1,11 +1,10 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-
 if git diff --cached --name-only | grep --quiet "kafka-ui-react-app"
 then
   cd kafka-ui-react-app && npm run pre-commit
-else 
+else
   echo "Skipping frontend tests"
   exit 0
 fi

kafka-ui-react-app/config/jest/cssTransform.js → kafka-ui-react-app/.jest/cssTransform.js

@@ -5,7 +5,9 @@
 
 module.exports = {
   process() {
-    return 'module.exports = {};';
+    return {
+      code: 'module.exports = {};',
+    };
   },
   getCacheKey() {
     // The output is always the same.

kafka-ui-react-app/.jest/resolver.js

@@ -0,0 +1,22 @@
+module.exports = (path, options) => {
+  // Call the defaultResolver, so we leverage its cache, error handling, etc.
+  return options.defaultResolver(path, {
+    ...options,
+    // Use packageFilter to process parsed `package.json` before
+    // the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+    packageFilter: (pkg) => {
+      // jest-environment-jsdom 28+ tries to use browser exports instead of default exports,
+      // but @hookform/resolvers only offers an ESM browser export and not a CommonJS one. Jest does not yet
+      // support ESM modules natively, so this causes a Jest error related to trying to parse
+      // "export" syntax.
+      //
+      // This workaround prevents Jest from considering @hookform/resolvers module-based exports at all;
+      // it falls back to CommonJS+node "main" property.
+      if (pkg.name === '@hookform/resolvers') {
+        delete pkg['exports'];
+        delete pkg['module'];
+      }
+      return pkg;
+    },
+  });
+};

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

@@ -10,6 +10,7 @@ export default {
     '<rootDir>/src/index.tsx',
     '<rootDir>/src/serviceWorker.ts',
   ],
+  resolver: '<rootDir>/.jest/resolver.js',
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testMatch: [
     '<rootDir>/src/**/__{test,tests}__/**/*.{spec,test}.{js,jsx,ts,tsx}',
@@ -17,7 +18,7 @@ export default {
   testEnvironment: 'jsdom',
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
-    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+    '^.+\\.css$': '<rootDir>/.jest/cssTransform.js',
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',

kafka-ui-react-app/package.json

@@ -8,20 +8,20 @@
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.7.1",
-    "@reduxjs/toolkit": "^1.8.1",
+    "@reduxjs/toolkit": "^1.8.2",
     "@rooks/use-outside-click-ref": "^4.10.1",
     "@testing-library/react": "^13.2.0",
     "@types/yup": "^0.29.13",
     "@vitejs/plugin-react": "^1.3.2",
     "ace-builds": "^1.4.12",
     "ajv": "^8.6.3",
-    "babel-jest": "^27.4.2",
+    "babel-jest": "^28.1.1",
     "bulma": "^0.9.3",
     "classnames": "^2.2.6",
     "dayjs": "^1.11.2",
     "fetch-mock": "^9.11.0",
-    "jest": "^27.4.3",
-    "jest-watch-typeahead": "^1.0.0",
+    "jest": "^28.1.1",
+    "jest-watch-typeahead": "^1.1.0",
     "json-schema-faker": "^0.5.0-rcv.39",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.1",
@@ -40,14 +40,13 @@
     "sass": "^1.52.3",
     "styled-components": "^5.3.1",
     "use-debounce": "^8.0.1",
-    "uuid": "^8.3.1",
     "vite": "^2.9.11",
     "vite-tsconfig-paths": "^3.5.0",
     "whatwg-fetch": "^3.6.2",
     "yup": "^0.32.9"
   },
   "lint-staged": {
-    "*.{js,ts,jsx,tsx}": [
+    "*.{ts,tsx}": [
       "eslint --fix",
       "npm test -- --bail --findRelatedTests --watchAll=false"
     ]
@@ -62,9 +61,9 @@
     "test": "jest --watch",
     "test:coverage": "jest --watchAll --coverage",
     "test:CI": "CI=true npm run test:coverage -- --ci --testResultsProcessor=\"jest-sonar-reporter\" --watchAll=false",
-    "tsc": "tsc",
+    "tsc": "tsc --pretty --noEmit",
     "prepare": "cd .. && husky install kafka-ui-react-app/.husky",
-    "pre-commit": "npm run tsc --noEmit && lint-staged"
+    "pre-commit": "npm run tsc && lint-staged"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -73,13 +72,13 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
-    "@jest/types": "^28.1.0",
+    "@jest/types": "^28.1.1",
     "@openapitools/openapi-generator-cli": "^2.5.1",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/user-event": "^13.5.0",
     "@types/eventsource": "^1.1.8",
-    "@types/jest": "^27.5.1",
+    "@types/jest": "^28.1.3",
     "@types/lodash": "^4.14.172",
     "@types/node": "^16.4.13",
     "@types/react": "^18.0.9",
@@ -89,9 +88,8 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-mock-store": "^1.0.3",
     "@types/styled-components": "^5.1.13",
-    "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "dotenv": "^16.0.1",
     "eslint": "^8.3.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -107,16 +105,17 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "fetch-mock-jest": "^1.5.1",
-    "husky": "^7.0.1",
+    "husky": "^8.0.1",
+    "jest-environment-jsdom": "^28.1.1",
     "jest-sonar-reporter": "^2.0.0",
     "jest-styled-components": "^7.0.8",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^13.0.2",
     "prettier": "^2.3.1",
     "redux-mock-store": "^1.5.4",
     "rimraf": "^3.0.2",
-    "ts-jest": "^28.0.3",
-    "ts-node": "^10.8.0",
-    "typescript": "^4.3.5"
+    "ts-jest": "^28.0.5",
+    "ts-node": "^10.8.1",
+    "typescript": "^4.7.4"
   },
   "engines": {
     "node": "v16.15.0",

kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx

@@ -24,11 +24,11 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 
 export interface Props {
   consumerGroups: ConsumerGroupDetails[];
-  orderBy: ConsumerGroupOrdering | null;
+  orderBy: string | null;
   sortOrder: SortOrder;
   totalPages: number;
   isFetched: boolean;
-  setConsumerGroupsSortOrderBy(orderBy: ConsumerGroupOrdering | null): void;
+  setConsumerGroupsSortOrderBy(orderBy: string | null): void;
 }
 
 const List: React.FC<Props> = ({
@@ -48,7 +48,7 @@ const List: React.FC<Props> = ({
     dispatch(
       fetchConsumerGroupsPaged({
         clusterName,
-        orderBy: orderBy || undefined,
+        orderBy: (orderBy as ConsumerGroupOrdering) || undefined,
         sortOrder,
         page,
         perPage,
@@ -57,11 +57,7 @@ const List: React.FC<Props> = ({
     );
   }, [clusterName, orderBy, searchText, sortOrder, page, perPage, dispatch]);
 
-  const tableState = useTableState<
-    ConsumerGroupDetails,
-    string,
-    ConsumerGroupOrdering
-  >(
+  const tableState = useTableState<ConsumerGroupDetails, string>(
     consumerGroups,
     {
       totalPages,

kafka-ui-react-app/src/components/ConsumerGroups/List/__test__/ConsumerGroupsTableCells.spec.tsx

@@ -19,7 +19,7 @@ describe('Consumer Groups Table Cells', () => {
       id: 6598,
     },
   };
-  const mockTableState: TableState<ConsumerGroup, string, never> = {
+  const mockTableState: TableState<ConsumerGroup, string> = {
     data: [consumerGroup],
     selectedIds: new Set([]),
     idSelector: jest.fn(),

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -69,10 +69,10 @@ export interface TopicsListProps {
     partitions?: number[];
   }): void;
   search: string;
-  orderBy: TopicColumnsToSort | null;
+  orderBy: string | null;
   sortOrder: SortOrder;
   setTopicsSearch(search: string): void;
-  setTopicsOrderBy(orderBy: TopicColumnsToSort | null): void;
+  setTopicsOrderBy(orderBy: string | null): void;
 }
 
 const List: React.FC<TopicsListProps> = ({
@@ -108,7 +108,7 @@ const List: React.FC<TopicsListProps> = ({
       clusterName,
       page,
       perPage,
-      orderBy: orderBy || undefined,
+      orderBy: (orderBy as TopicColumnsToSort) || undefined,
       sortOrder,
       search,
       showInternal,
@@ -120,11 +120,7 @@ const List: React.FC<TopicsListProps> = ({
     fetchTopicsList(topicsListParams);
   }, [fetchTopicsList, topicsListParams]);
 
-  const tableState = useTableState<
-    TopicWithDetailedInfo,
-    string,
-    TopicColumnsToSort
-  >(
+  const tableState = useTableState<TopicWithDetailedInfo, string>(
     topics,
     {
       idSelector: (topic) => topic.name,

kafka-ui-react-app/src/components/Topics/List/__tests__/TopicsTableCells.spec.tsx

@@ -11,7 +11,7 @@ import { Topic } from 'generated-sources';
 import { topicsPayload } from 'redux/reducers/topics/__test__/fixtures';
 
 describe('TopicsTableCells Components', () => {
-  const mockTableState: TableState<Topic, string, never> = {
+  const mockTableState: TableState<Topic, string> = {
     data: topicsPayload,
     selectedIds: new Set([]),
     idSelector: jest.fn(),

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx

@@ -25,6 +25,7 @@ import Select, { SelectOption } from 'components/common/Select/Select';
 import useAppParams from 'lib/hooks/useAppParams';
 import Heading from 'components/common/heading/Heading.styled';
 import { messagesApiClient } from 'lib/api';
+import { getResponse } from 'lib/errorHandling';
 
 import validateMessage from './validateMessage';
 import * as S from './SendMessage.styled';
@@ -147,12 +148,13 @@ const SendMessage: React.FC = () => {
         });
         dispatch(fetchTopicDetails({ clusterName, topicName }));
       } catch (e) {
+        const err = await getResponse(e as Response);
         dispatch(
           alertAdded({
             id: `${clusterName}-${topicName}-sendTopicMessagesError`,
             type: 'error',
             title: `Error in sending a message to ${topicName}`,
-            message: e?.message,
+            message: err?.message || '',
             createdAt: now(),
           })
         );

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/validateMessage.ts

@@ -1,5 +1,5 @@
 import { TopicMessageSchema } from 'generated-sources';
-import Ajv from 'ajv/dist/2020';
+import Ajv, { DefinedError } from 'ajv/dist/2020';
 import { upperFirst } from 'lodash';
 
 const validateBySchema = (
@@ -39,7 +39,8 @@ const validateBySchema = (
       );
     }
   } catch (e) {
-    return [`${upperFirst(type)} ${e.message}`];
+    const err = e as DefinedError;
+    return [`${upperFirst(type)} ${err.message}`];
   }
 
   return errors;

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

@@ -12,8 +12,8 @@ import {
 } from './TableColumn';
 import { TableRow } from './TableRow';
 
-interface SmartTableProps<T, TId extends IdType, OT = never> {
-  tableState: TableState<T, TId, OT>;
+interface SmartTableProps<T, TId extends IdType> {
+  tableState: TableState<T, TId>;
   allSelectable?: boolean;
   selectable?: boolean;
   className?: string;
@@ -23,7 +23,7 @@ interface SmartTableProps<T, TId extends IdType, OT = never> {
   hoverable?: boolean;
 }
 
-export const SmartTable = <T, TId extends IdType, OT = never>({
+export const SmartTable = <T, TId extends IdType>({
   children,
   tableState,
   selectable = false,
@@ -32,22 +32,20 @@ export const SmartTable = <T, TId extends IdType, OT = never>({
   isFullwidth = false,
   paginated = false,
   hoverable = false,
-}: React.PropsWithChildren<SmartTableProps<T, TId, OT>>) => {
+}: React.PropsWithChildren<SmartTableProps<T, TId>>) => {
   const handleRowSelection = (row: T, checked: boolean) => {
     tableState.setRowsSelection([row], checked);
   };
 
   const headerRow = React.useMemo(() => {
     const headerCells = React.Children.map(children, (child) => {
-      if (!isColumnElement<T, TId, OT>(child)) {
+      if (!isColumnElement<T, TId>(child)) {
         return child;
       }
 
       const { headerCell, title, orderValue } = child.props;
 
-      const HeaderCell = headerCell as React.FC<
-        TableHeaderCellProps<T, TId, OT>
-      >;
+      const HeaderCell = headerCell as React.FC<TableHeaderCellProps<T, TId>>;
       return HeaderCell ? (
         <S.TableHeaderCell>
           <HeaderCell
@@ -59,8 +57,8 @@ export const SmartTable = <T, TId extends IdType, OT = never>({
       ) : (
         // TODO types will be changed after fixing TableHeaderCell
         <TableHeaderCell
-          {...(tableState.orderable as never)}
-          orderValue={orderValue as never}
+          {...tableState.orderable}
+          orderValue={orderValue}
           title={title}
         />
       );

kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx

@@ -4,51 +4,51 @@ import { SortOrder } from 'generated-sources';
 import * as S from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
 import { DefaultTheme, StyledComponent } from 'styled-components';
 
-export interface OrderableProps<OT> {
-  orderBy: OT | null;
+export interface OrderableProps {
+  orderBy: string | null;
   sortOrder: SortOrder;
-  handleOrderBy: (orderBy: OT | null) => void;
+  handleOrderBy: (orderBy: string | null) => void;
 }
 
-interface TableCellPropsBase<T, TId extends IdType, OT = never> {
-  tableState: TableState<T, TId, OT>;
+interface TableCellPropsBase<T, TId extends IdType> {
+  tableState: TableState<T, TId>;
 }
 
-export interface TableHeaderCellProps<T, TId extends IdType, OT = never>
-  extends TableCellPropsBase<T, TId, OT> {
-  orderable?: OrderableProps<OT>;
-  orderValue?: OT;
+export interface TableHeaderCellProps<T, TId extends IdType>
+  extends TableCellPropsBase<T, TId> {
+  orderable?: OrderableProps;
+  orderValue?: string;
 }
 
-export interface TableCellProps<T, TId extends IdType, OT = never>
-  extends TableCellPropsBase<T, TId, OT> {
+export interface TableCellProps<T, TId extends IdType>
+  extends TableCellPropsBase<T, TId> {
   rowIndex: number;
   dataItem: T;
   hovered?: boolean;
 }
 
-interface TableColumnProps<T, TId extends IdType, OT = never> {
+interface TableColumnProps<T, TId extends IdType> {
   cell?: React.FC<TableCellProps<T, TId>>;
   children?: React.ReactElement;
-  headerCell?: React.FC<TableHeaderCellProps<T, TId, OT>>;
+  headerCell?: React.FC<TableHeaderCellProps<T, TId>>;
   field?: string;
   title?: string;
   maxWidth?: string;
   className?: string;
-  orderValue?: OT;
+  orderValue?: string;
   customTd?: typeof S.Td;
 }
 
-export const TableColumn = <T, TId extends IdType, OT = never>(
+export const TableColumn = <T, TId extends IdType>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _props: React.PropsWithChildren<TableColumnProps<T, TId, OT>>
+  _props: React.PropsWithChildren<TableColumnProps<T, TId>>
 ): React.ReactElement => {
   return <td />;
 };
 
-export function isColumnElement<T, TId extends IdType, OT = never>(
+export function isColumnElement<T, TId extends IdType>(
   element: React.ReactNode
-): element is React.ReactElement<TableColumnProps<T, TId, OT>> {
+): element is React.ReactElement<TableColumnProps<T, TId>> {
   if (!React.isValidElement(element)) {
     return false;
   }

kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx

@@ -5,17 +5,17 @@ import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styl
 
 import { isColumnElement, SelectCell, TableCellProps } from './TableColumn';
 
-interface TableRowProps<T, TId extends IdType = never, OT = never> {
+interface TableRowProps<T, TId extends IdType = never> {
   index: number;
   id?: TId;
   hoverable?: boolean;
-  tableState: TableState<T, TId, OT>;
+  tableState: TableState<T, TId>;
   dataItem: T;
   selectable: boolean;
   onSelectChange?: (row: T, checked: boolean) => void;
 }
 
-export const TableRow = <T, TId extends IdType, OT = never>({
+export const TableRow = <T, TId extends IdType>({
   children,
   hoverable = false,
   id,
@@ -24,7 +24,7 @@ export const TableRow = <T, TId extends IdType, OT = never>({
   selectable,
   tableState,
   onSelectChange,
-}: React.PropsWithChildren<TableRowProps<T, TId, OT>>): React.ReactElement => {
+}: React.PropsWithChildren<TableRowProps<T, TId>>): React.ReactElement => {
   const [hovered, setHovered] = React.useState(false);
 
   const handleMouseEnter = () => {
@@ -61,7 +61,7 @@ export const TableRow = <T, TId extends IdType, OT = never>({
         }
         const { cell, field, maxWidth, customTd } = child.props;
 
-        const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined;
+        const Cell = cell as React.FC<TableCellProps<T, TId>> | undefined;
         const TdComponent = customTd || Td;
 
         const content = Cell ? (

kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx

@@ -1,15 +1,15 @@
 import React, { PropsWithChildren } from 'react';
-import { SortOrder, TopicColumnsToSort } from 'generated-sources';
+import { SortOrder } from 'generated-sources';
 import * as S from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
 
 export interface TableHeaderCellProps {
   title?: string;
   previewText?: string;
   onPreview?: () => void;
-  orderBy?: TopicColumnsToSort | null;
+  orderBy?: string | null;
   sortOrder?: SortOrder;
-  orderValue?: TopicColumnsToSort | null;
-  handleOrderBy?: (orderBy: TopicColumnsToSort | null) => void;
+  orderValue?: string;
+  handleOrderBy?: (orderBy: string | null) => void;
 }
 
 const TableHeaderCell: React.FC<PropsWithChildren<TableHeaderCellProps>> = (

kafka-ui-react-app/src/lib/hooks/__tests__/useDataSaver.spec.tsx

@@ -9,7 +9,7 @@ describe('useDataSaver hook', () => {
 
   describe('Save as file', () => {
     beforeAll(() => {
-      jest.useFakeTimers('modern');
+      jest.useFakeTimers();
       jest.setSystemTime(new Date('Wed Mar 24 2021 03:19:56 GMT-0700'));
     });
 

kafka-ui-react-app/src/lib/hooks/useTableState.ts

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { OrderableProps } from 'components/common/SmartTable/TableColumn';
 
-export interface TableState<T, TId extends IdType, OT = never> {
+export interface TableState<T, TId extends IdType> {
   data: T[];
   selectedIds: Set<TId>;
   totalPages?: number;
@@ -10,18 +10,18 @@ export interface TableState<T, TId extends IdType, OT = never> {
   selectedCount: number;
   setRowsSelection: (rows: T[], selected: boolean) => void;
   toggleSelection: (selected: boolean) => void;
-  orderable?: OrderableProps<OT>;
+  orderable?: OrderableProps;
 }
 
-export const useTableState = <T, TId extends IdType, OT = never>(
+export const useTableState = <T, TId extends IdType>(
   data: T[],
   options: {
     totalPages: number;
     isRowSelectable?: (row: T) => boolean;
     idSelector: (row: T) => TId;
   },
-  orderable?: OrderableProps<OT>
-): TableState<T, TId, OT> => {
+  orderable?: OrderableProps
+): TableState<T, TId> => {
   const [selectedIds, setSelectedIds] = React.useState(new Set<TId>());
 
   const { idSelector, totalPages, isRowSelectable = () => true } = options;
@@ -52,7 +52,7 @@ export const useTableState = <T, TId extends IdType, OT = never>(
     [data, idSelector]
   );
 
-  return React.useMemo<TableState<T, TId, OT>>(() => {
+  return React.useMemo<TableState<T, TId>>(() => {
     return {
       data,
       totalPages,

kafka-ui-react-app/src/redux/interfaces/topic.ts

@@ -43,7 +43,6 @@ export interface TopicFormCustomParams {
 }
 
 export interface TopicWithDetailedInfo extends Topic, TopicDetails {
-  id?: string;
   config?: TopicConfig[];
   consumerGroups?: ConsumerGroup[];
   messageSchema?: TopicMessageSchema;

kafka-ui-react-app/src/redux/reducers/consumerGroups/consumerGroupsSlice.ts

@@ -40,7 +40,7 @@ export const fetchConsumerGroupsPaged = createAsyncThunk<
     { rejectWithValue }
   ) => {
     try {
-      const response = await consumerGroupsApiClient.getConsumerGroupsPageRaw({
+      return await consumerGroupsApiClient.getConsumerGroupsPage({
         clusterName,
         orderBy,
         sortOrder,
@@ -48,7 +48,6 @@ export const fetchConsumerGroupsPaged = createAsyncThunk<
         perPage,
         search,
       });
-      return await response.value();
     } catch (error) {
       return rejectWithValue(await getResponse(error as Response));
     }

kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts

@@ -36,7 +36,6 @@ import {
 
 const topic = {
   name: 'topic',
-  id: 'id',
 };
 
 const messageSchema = {
@@ -213,7 +212,6 @@ describe('topics Slice', () => {
       it('updateTopic/fulfilled', () => {
         const updatedTopic = {
           name: 'topic',
-          id: 'id',
           partitions: 1,
         };
         expect(

kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts

@@ -1,4 +1,3 @@
-import { v4 } from 'uuid';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import {
   TopicsResponse,
@@ -381,7 +380,6 @@ const topicsSlice = createSlice({
           state.byName[topic.name] = {
             ...state.byName[topic.name],
             ...topic,
-            id: v4(),
           };
         });
       }