Bump react app deps (#285)

* Bump deps

* Update actions

.github/workflows/backend.yml

@@ -1,8 +1,8 @@
 name: backend
 on:
-  pull_request:
-    paths-ignore:
-      - 'kafka-ui-react-app/**'
+  push:
+    paths:
+    - '!kafka-ui-react-app/**'
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/frontend.yaml

@@ -1,9 +1,9 @@
 name: frontend
 on:
-  pull_request:
+  push:
     paths:
-      - './kafka-ui-contract/**'
-      - './kafka-ui-react-app/**'
+    - 'kafka-ui-contract/**'
+    - 'kafka-ui-react-app/**'
 jobs:
   npm-test:
     env:

kafka-ui-react-app/.eslintrc.json

@@ -24,12 +24,11 @@
   "extends": [
     "airbnb-typescript",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "prettier/react",
-    "prettier/@typescript-eslint"
+    "plugin:prettier/recommended",
+    "prettier"
   ],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": "warn",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "jsx-a11y/label-has-associated-control": "off",
     "import/prefer-default-export": "off",

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

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

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

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd kafka-ui-react-app && npm run pre-commit

kafka-ui-react-app/package.json

@@ -27,7 +27,7 @@
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "typesafe-actions": "^5.1.0",
-    "use-debounce": "^3.4.3",
+    "use-debounce": "^6.0.0",
     "uuid": "^8.3.1"
   },
   "lint-staged": {
@@ -46,12 +46,9 @@
     "test": "react-scripts test",
     "test:CI": "CI=true npm test --watchAll=false",
     "eject": "react-scripts eject",
-    "tsc": "tsc"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run tsc --noEmit && lint-staged"
-    }
+    "tsc": "tsc",
+    "prepare": "cd .. && husky install kafka-ui-react-app/.husky",
+    "pre-commit": "npm run tsc --noEmit && lint-staged"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -72,7 +69,7 @@
     "@jest/types": "^26.6.2",
     "@openapitools/openapi-generator-cli": "^2.2.2",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^7.1.2",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
@@ -98,7 +95,7 @@
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.1.4",
@@ -106,11 +103,11 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "esprint": "^2.0.0",
     "fetch-mock-jest": "^1.5.1",
-    "husky": "^4.3.0",
+    "husky": "^5.1.3",
     "lint-staged": "^10.5.4",
     "node-sass": "^5.0.0",
     "prettier": "^2.2.1",
-    "react-scripts": "4.0.2",
+    "react-scripts": "4.0.3",
     "redux-mock-store": "^1.5.4",
     "ts-jest": "^26.5.4",
     "ts-node": "^9.1.1",

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

@@ -43,7 +43,6 @@ const Brokers: React.FC<Props> = ({
   return (
     <div className="section">
       <Breadcrumb>Brokers overview</Breadcrumb>
-
       <MetricsWrapper title="Uptime">
         <Indicator label="Total Brokers">{brokerCount}</Indicator>
         <Indicator label="Active Controllers">{activeControllers}</Indicator>
@@ -53,7 +52,6 @@ const Brokers: React.FC<Props> = ({
           </span>
         </Indicator>
       </MetricsWrapper>
-
       <MetricsWrapper title="Partitions">
         <Indicator label="Online">
           <span
@@ -75,7 +73,6 @@ const Brokers: React.FC<Props> = ({
           {outOfSyncReplicasCount}
         </Indicator>
       </MetricsWrapper>
-
       <MetricsWrapper multiline title="Disk Usage">
         {diskUsage?.map((brokerDiskUsage) => (
           <React.Fragment key={brokerDiskUsage.brokerId}>

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

@@ -66,7 +66,7 @@ const Messages: React.FC<Props> = ({
   const [queryParams, setQueryParams] = React.useState<
     Partial<TopicMessageQueryParams>
   >({ limit: 100 });
-  const [debouncedCallback] = useDebouncedCallback(
+  const debouncedCallback = useDebouncedCallback(
     (query: Partial<TopicMessageQueryParams>) =>
       setQueryParams({ ...queryParams, ...query }),
     1000

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { mount, shallow } from 'enzyme';
-import * as useDebounce from 'use-debounce';
 import DatePicker from 'react-datepicker';
 import Messages, {
   Props,
@@ -20,7 +19,6 @@ describe('Messages', () => {
           <MessagesContainer />
         </Provider>
       );
-
       expect(component.exists()).toBeTruthy();
     });
   });
@@ -98,30 +96,24 @@ describe('Messages', () => {
     describe('Offset field', () => {
       describe('Seek Type dependency', () => {
         const wrapper = mount(setupWrapper());
-
         it('renders DatePicker', () => {
           wrapper
             .find('[id="selectSeekType"]')
             .simulate('change', { target: { value: 'TIMESTAMP' } });
-
           expect(
             wrapper.find('[id="selectSeekType"]').first().props().value
           ).toEqual('TIMESTAMP');
-
           expect(wrapper.exists(DatePicker)).toBeTruthy();
         });
       });
 
       describe('With defined offset value', () => {
         const wrapper = shallow(setupWrapper());
-
         it('shows offset value in input', () => {
           const offset = '10';
-
           wrapper
             .find('#searchOffset')
             .simulate('change', { target: { value: offset } });
-
           expect(wrapper.find('#searchOffset').first().props().value).toEqual(
             offset
           );
@@ -129,12 +121,10 @@ describe('Messages', () => {
       });
       describe('With invalid offset value', () => {
         const wrapper = shallow(setupWrapper());
-
         it('shows 0 in input', () => {
           wrapper
             .find('#searchOffset')
             .simulate('change', { target: { value: null } });
-
           expect(wrapper.find('#searchOffset').first().props().value).toBe('0');
         });
       });
@@ -143,25 +133,12 @@ describe('Messages', () => {
     describe('Search field', () => {
       it('renders input correctly', () => {
         const query = 20;
-        const mockedUseDebouncedCallback = jest.fn();
-        jest
-          .spyOn(useDebounce, 'useDebouncedCallback')
-          .mockImplementationOnce(() => [
-            mockedUseDebouncedCallback,
-            jest.fn(),
-            jest.fn(),
-          ]);
-
         const wrapper = shallow(setupWrapper());
-
+        expect(wrapper.exists('#searchText')).toBeTruthy();
         wrapper
           .find('#searchText')
           .simulate('change', { target: { value: query } });
-
-        expect(wrapper.find('#searchText').first().props().value).toEqual(
-          query
-        );
-        expect(mockedUseDebouncedCallback).toHaveBeenCalledWith({ q: query });
+        expect(wrapper.find('#searchText').at(0).props().value).toEqual(query);
       });
     });