diff --git a/kafka-ui-react-app/package.json b/kafka-ui-react-app/package.json index 9b8c455948..9b3e523f6c 100644 --- a/kafka-ui-react-app/package.json +++ b/kafka-ui-react-app/package.json @@ -12,6 +12,7 @@ "@hookform/resolvers": "^2.7.1", "@reduxjs/toolkit": "^1.8.3", "@rooks/use-outside-click-ref": "^4.10.1", + "@tanstack/react-query": "^4.0.5", "@testing-library/react": "^13.2.0", "@types/testing-library__jest-dom": "^5.14.5", "@types/yup": "^0.29.13", @@ -35,7 +36,6 @@ "react-hook-form": "7.6.9", "react-is": "^18.2.0", "react-multi-select-component": "^4.0.6", - "react-query": "^3.39.1", "react-redux": "^8.0.2", "react-router-dom": "^6.3.0", "redux": "^4.2.0", @@ -106,7 +106,6 @@ "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.5.0", - "fetch-mock-jest": "^1.5.1", "husky": "^8.0.1", "jest-environment-jsdom": "^28.1.1", "jest-sonar-reporter": "^2.0.0", diff --git a/kafka-ui-react-app/pnpm-lock.yaml b/kafka-ui-react-app/pnpm-lock.yaml index dd0fc376ea..d2128a2b5b 100644 --- a/kafka-ui-react-app/pnpm-lock.yaml +++ b/kafka-ui-react-app/pnpm-lock.yaml @@ -14,6 +14,7 @@ specifiers: '@openapitools/openapi-generator-cli': ^2.5.1 '@reduxjs/toolkit': ^1.8.3 '@rooks/use-outside-click-ref': ^4.10.1 + '@tanstack/react-query': ^4.0.5 '@testing-library/dom': ^8.11.1 '@testing-library/jest-dom': ^5.16.4 '@testing-library/react': ^13.2.0 @@ -53,7 +54,6 @@ specifiers: eslint-plugin-react: ^7.30.1 eslint-plugin-react-hooks: ^4.5.0 fetch-mock: ^9.11.0 - fetch-mock-jest: ^1.5.1 husky: ^8.0.1 jest: ^28.1.1 jest-environment-jsdom: ^28.1.1 @@ -72,7 +72,6 @@ specifiers: react-hook-form: 7.6.9 react-is: ^18.2.0 react-multi-select-component: ^4.0.6 - react-query: ^3.39.1 react-redux: ^8.0.2 react-router-dom: ^6.3.0 redux: ^4.2.0 @@ -98,6 +97,7 @@ dependencies: '@hookform/resolvers': 2.8.9_react-hook-form@7.6.9 '@reduxjs/toolkit': 1.8.3_ctm756ikdwcjcvyfxxwskzbr6q '@rooks/use-outside-click-ref': 4.11.2_react@18.1.0 + '@tanstack/react-query': 4.0.5_ef5jwxihqo6n7gxfmzogljlgcm '@testing-library/react': 13.2.0_ef5jwxihqo6n7gxfmzogljlgcm '@types/testing-library__jest-dom': 5.14.5 '@types/yup': 0.29.13 @@ -121,7 +121,6 @@ dependencies: react-hook-form: 7.6.9_react@18.1.0 react-is: 18.2.0 react-multi-select-component: 4.0.6_react@18.1.0 - react-query: 3.39.1_ef5jwxihqo6n7gxfmzogljlgcm react-redux: 8.0.2_nfqigfgwurfoimtkde74cji6ga react-router-dom: 6.3.0_ef5jwxihqo6n7gxfmzogljlgcm redux: 4.2.0 @@ -167,7 +166,6 @@ devDependencies: eslint-plugin-prettier: 4.0.0_q7a4ir2sdihdzpzdlnbgmzjlpq eslint-plugin-react: 7.30.1_eslint@8.16.0 eslint-plugin-react-hooks: 4.5.0_eslint@8.16.0 - fetch-mock-jest: 1.5.1 husky: 8.0.1 jest-environment-jsdom: 28.1.1 jest-sonar-reporter: 2.0.0 @@ -2377,6 +2375,29 @@ packages: dependencies: '@sinonjs/commons': 1.8.3 + /@tanstack/query-core/4.0.5: + resolution: {integrity: sha512-QOJ2gLbwlf8p0487pMey6vv8EF5X2ib1zINayaD7mb9/LibUtXmZ12uJgTqcnjgNY/4tWZn5qJnEk2ePG5AVGA==} + dev: false + + /@tanstack/react-query/4.0.5_ef5jwxihqo6n7gxfmzogljlgcm: + resolution: {integrity: sha512-tIggVlhoFevVpY/LkZroPmrERFHN8tw4aZLtgwSArzHmMJ03WQcaNvbbHy6GERidXtaMdUz+IeQryrE7cO7WPQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + dependencies: + '@tanstack/query-core': 4.0.5 + '@types/use-sync-external-store': 0.0.3 + react: 18.1.0 + react-dom: 18.1.0_react@18.1.0 + use-sync-external-store: 1.2.0_react@18.1.0 + dev: false + /@testing-library/dom/8.13.0: resolution: {integrity: sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==} engines: {node: '>=12'} @@ -3287,11 +3308,6 @@ packages: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: true - /big-integer/1.6.51: - resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==} - engines: {node: '>=0.6'} - dev: false - /binary-extensions/2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} @@ -3317,19 +3333,6 @@ packages: dependencies: fill-range: 7.0.1 - /broadcast-channel/3.7.0: - resolution: {integrity: sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==} - dependencies: - '@babel/runtime': 7.17.9 - detect-node: 2.1.0 - js-sha3: 0.8.0 - microseconds: 0.2.0 - nano-time: 1.0.0 - oblivious-set: 1.0.0 - rimraf: 3.0.2 - unload: 2.2.0 - dev: false - /browser-process-hrtime/1.0.0: resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==} dev: true @@ -3629,6 +3632,7 @@ packages: resolution: {integrity: sha512-3s+ed8er9ahK+zJpp9ZtuVcDoFzHNiZsPbNAAE4KXgrRHbjSqqNN6xGSXq6bq7TZIbKj4NLrLb6bJ5i+vSVjHA==} deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. requiresBuild: true + dev: false /cosmiconfig/7.0.1: resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==} @@ -3807,10 +3811,6 @@ packages: resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==} engines: {node: '>=8'} - /detect-node/2.1.0: - resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==} - dev: false - /diff-match-patch/1.0.5: resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==} dev: false @@ -4706,20 +4706,6 @@ packages: dependencies: bser: 2.1.1 - /fetch-mock-jest/1.5.1: - resolution: {integrity: sha512-+utwzP8C+Pax1GSka3nFXILWMY3Er2L+s090FOgqVNrNCPp0fDqgXnAHAJf12PLHi0z4PhcTaZNTz8e7K3fjqQ==} - engines: {node: '>=8.0.0'} - peerDependencies: - node-fetch: '*' - peerDependenciesMeta: - node-fetch: - optional: true - dependencies: - fetch-mock: 9.11.0 - transitivePeerDependencies: - - supports-color - dev: true - /fetch-mock/9.11.0: resolution: {integrity: sha512-PG1XUv+x7iag5p/iNHD4/jdpxL9FtVSqRMUQhPab4hVDt80T1MH5ehzVrL2IdXO9Q2iBggArFvPqjUbHFuI58Q==} engines: {node: '>=4.0.0'} @@ -4741,6 +4727,7 @@ packages: whatwg-url: 6.5.0 transitivePeerDependencies: - supports-color + dev: false /figures/3.2.0: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} @@ -4906,6 +4893,7 @@ packages: /glob-to-regexp/0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} + dev: false /glob/7.1.6: resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==} @@ -5279,6 +5267,7 @@ packages: /is-subset/0.1.1: resolution: {integrity: sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==} + dev: false /is-symbol/1.0.4: resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==} @@ -5787,10 +5776,6 @@ packages: - supports-color - ts-node - /js-sha3/0.8.0: - resolution: {integrity: sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==} - dev: false - /js-tokens/4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -6036,6 +6021,7 @@ packages: /lodash.isequal/4.5.0: resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} + dev: false /lodash.memoize/4.1.2: resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==} @@ -6047,6 +6033,7 @@ packages: /lodash.sortby/4.7.0: resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==} + dev: false /lodash/4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} @@ -6106,13 +6093,6 @@ packages: dependencies: tmpl: 1.0.5 - /match-sorter/6.3.1: - resolution: {integrity: sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==} - dependencies: - '@babel/runtime': 7.17.9 - remove-accents: 0.4.2 - dev: false - /merge-stream/2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} @@ -6128,10 +6108,6 @@ packages: braces: 3.0.2 picomatch: 2.3.1 - /microseconds/0.2.0: - resolution: {integrity: sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==} - dev: false - /mime-db/1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} @@ -6187,12 +6163,6 @@ packages: resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==} dev: true - /nano-time/1.0.0: - resolution: {integrity: sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==} - dependencies: - big-integer: 1.6.51 - dev: false - /nanoclone/0.2.1: resolution: {integrity: sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==} dev: false @@ -6307,10 +6277,6 @@ packages: es-abstract: 1.20.0 dev: true - /oblivious-set/1.0.0: - resolution: {integrity: sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==} - dev: false - /once/1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: @@ -6486,6 +6452,7 @@ packages: /path-to-regexp/2.4.0: resolution: {integrity: sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==} + dev: false /path-to-regexp/3.2.0: resolution: {integrity: sha512-jczvQbCUS7XmS7o+y1aEO9OBVFeZBQ1MDSEqmO7xSoPgOPoowY/SxLpZ6Vh97/8qHZOteiCKb7gkG9gA2ZUxJA==} @@ -6608,6 +6575,7 @@ packages: resolution: {integrity: sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==} engines: {node: '>=0.4.x'} deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. + dev: false /queue-microtask/1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} @@ -6702,25 +6670,6 @@ packages: react-fast-compare: 3.2.0 warning: 4.0.3 - /react-query/3.39.1_ef5jwxihqo6n7gxfmzogljlgcm: - resolution: {integrity: sha512-qYKT1bavdDiQZbngWZyPotlBVzcBjDYEJg5RQLBa++5Ix5jjfbEYJmHSZRZD+USVHUSvl/ey9Hu+QfF1QAK80A==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: '*' - react-native: '*' - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true - dependencies: - '@babel/runtime': 7.17.9 - broadcast-channel: 3.7.0 - match-sorter: 6.3.1 - react: 18.1.0 - react-dom: 18.1.0_react@18.1.0 - dev: false - /react-redux/8.0.2_nfqigfgwurfoimtkde74cji6ga: resolution: {integrity: sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==} peerDependencies: @@ -6895,10 +6844,6 @@ packages: jsesc: 0.5.0 dev: true - /remove-accents/0.4.2: - resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==} - dev: false - /require-directory/2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -7423,6 +7368,7 @@ packages: resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==} dependencies: punycode: 2.1.1 + dev: false /tr46/3.0.0: resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==} @@ -7643,13 +7589,6 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unload/2.2.0: - resolution: {integrity: sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==} - dependencies: - '@babel/runtime': 7.17.9 - detect-node: 2.1.0 - dev: false - /uri-js/4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: @@ -7773,6 +7712,7 @@ packages: /webidl-conversions/4.0.2: resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==} + dev: false /webidl-conversions/7.0.0: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} @@ -7824,6 +7764,7 @@ packages: lodash.sortby: 4.7.0 tr46: 1.0.1 webidl-conversions: 4.0.2 + dev: false /which-boxed-primitive/1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx index 8fd2d3fe0c..0d23fc70b3 100644 --- a/kafka-ui-react-app/src/components/App.tsx +++ b/kafka-ui-react-app/src/components/App.tsx @@ -10,7 +10,7 @@ import Version from 'components/Version/Version'; import Alerts from 'components/Alerts/Alerts'; import { ThemeProvider } from 'styled-components'; import theme from 'theme/theme'; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import * as S from './App.styled'; import Logo from './common/Logo/Logo'; diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/BrokerLogdir.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/BrokerLogdir.tsx index 9bd00458c1..37e1bce49d 100644 --- a/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/BrokerLogdir.tsx +++ b/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/BrokerLogdir.tsx @@ -16,7 +16,6 @@ interface BrokerLogdirState { const BrokerLogdir: React.FC = () => { const { clusterName, brokerId } = useAppParams(); - const { data: logDirs } = useBrokerLogDirs(clusterName, Number(brokerId)); const preparedRows = translateLogdirs(logDirs); diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx index ad4fbec25c..47209c66ba 100644 --- a/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx +++ b/kafka-ui-react-app/src/components/Brokers/Broker/BrokerLogdir/__test__/BrokerLogdir.spec.tsx @@ -1,67 +1,44 @@ import React from 'react'; import { render, WithRoute } from 'lib/testHelpers'; -import { screen, waitFor } from '@testing-library/dom'; +import { screen } from '@testing-library/dom'; import { clusterBrokerPath } from 'lib/paths'; -import fetchMock from 'fetch-mock'; import { act } from '@testing-library/react'; -import Broker from 'components/Brokers/Broker/Broker'; -import { - clusterStatsPayload, - brokerLogDirsPayload, - brokersPayload, -} from 'components/Brokers/__test__/fixtures'; +import { brokerLogDirsPayload } from 'lib/fixtures/brokers'; +import { useBrokerLogDirs } from 'lib/hooks/api/brokers'; +import { BrokerLogdirs } from 'generated-sources'; +import BrokerLogdir from 'components/Brokers/Broker/BrokerLogdir/BrokerLogdir'; + +jest.mock('lib/hooks/api/brokers', () => ({ + useBrokerLogDirs: jest.fn(), +})); const clusterName = 'local'; const brokerId = 1; -const fetchStatsUrl = `/api/clusters/${clusterName}/stats`; -const fetchBrokersUrl = `/api/clusters/${clusterName}/brokers`; -const fetchLogDirsUrl = `/api/clusters/${clusterName}/brokers/logdirs`; describe('BrokerLogdir Component', () => { - afterEach(() => { - fetchMock.reset(); - }); - - const renderComponent = async () => { - const fetchStatsMock = fetchMock.get(fetchStatsUrl, clusterStatsPayload); - const fetchBrokersMock = fetchMock.get(fetchBrokersUrl, brokersPayload); + const renderComponent = async (payload: BrokerLogdirs[] = []) => { + (useBrokerLogDirs as jest.Mock).mockImplementation(() => ({ + data: payload, + })); await act(() => { render( - + , { initialEntries: [clusterBrokerPath(clusterName, brokerId)], } ); }); - await waitFor(() => expect(fetchStatsMock.called()).toBeTruthy()); - expect(fetchBrokersMock.called()).toBeTruthy(); }; it('shows warning when server returns empty logDirs response', async () => { - const fetchLogDirsMock = fetchMock.getOnce(fetchLogDirsUrl, [], { - query: { broker: brokerId }, - }); await renderComponent(); - await waitFor(() => expect(fetchLogDirsMock.called()).toBeTruthy()); expect(screen.getByText('Log dir data not available')).toBeInTheDocument(); }); it('shows broker', async () => { - const fetchLogDirsMock = fetchMock.getOnce( - fetchLogDirsUrl, - brokerLogDirsPayload, - { - query: { broker: brokerId }, - } - ); - - await renderComponent(); - await waitFor(() => expect(fetchLogDirsMock.called()).toBeTruthy()); - const topicCount = screen.getByText(3); - const partitionsCount = screen.getByText(4); - expect(topicCount).toBeInTheDocument(); - expect(partitionsCount).toBeInTheDocument(); + await renderComponent(brokerLogDirsPayload); + expect(screen.getByText('/opt/kafka/data-0/logs')).toBeInTheDocument(); }); }); diff --git a/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx b/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx index 0af9d1df4f..9723149828 100644 --- a/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx +++ b/kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx @@ -7,12 +7,10 @@ import { getNonExactPath, } from 'lib/paths'; import Broker from 'components/Brokers/Broker/Broker'; -import { - clusterStatsPayload, - brokersPayload, -} from 'components/Brokers/__test__/fixtures'; import { useBrokers } from 'lib/hooks/api/brokers'; import { useClusterStats } from 'lib/hooks/api/clusters'; +import { brokersPayload } from 'lib/fixtures/brokers'; +import { clusterStatsPayload } from 'lib/fixtures/clusters'; const clusterName = 'local'; const brokerId = 1; diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx index f67dfd9174..550e8824d2 100644 --- a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx +++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx @@ -2,16 +2,13 @@ import React from 'react'; import { render, WithRoute } from 'lib/testHelpers'; import { screen, waitFor } from '@testing-library/dom'; import { clusterBrokersPath } from 'lib/paths'; -import fetchMock from 'fetch-mock'; import { act } from '@testing-library/react'; import BrokersList from 'components/Brokers/BrokersList/BrokersList'; -import { - brokersPayload, - clusterStatsPayload, -} from 'components/Brokers/__test__/fixtures'; import userEvent from '@testing-library/user-event'; import { useBrokers } from 'lib/hooks/api/brokers'; import { useClusterStats } from 'lib/hooks/api/clusters'; +import { brokersPayload } from 'lib/fixtures/brokers'; +import { clusterStatsPayload } from 'lib/fixtures/clusters'; const mockedUsedNavigate = jest.fn(); @@ -28,8 +25,6 @@ jest.mock('lib/hooks/api/clusters', () => ({ })); describe('BrokersList Component', () => { - afterEach(() => fetchMock.reset()); - const clusterName = 'local'; const testInSyncReplicasCount = 798; diff --git a/kafka-ui-react-app/src/components/Brokers/utils/__test__/translateLogdirs.spec.tsx b/kafka-ui-react-app/src/components/Brokers/utils/__test__/translateLogdirs.spec.tsx index e41717fe9d..85fe55eb24 100644 --- a/kafka-ui-react-app/src/components/Brokers/utils/__test__/translateLogdirs.spec.tsx +++ b/kafka-ui-react-app/src/components/Brokers/utils/__test__/translateLogdirs.spec.tsx @@ -2,7 +2,7 @@ import { translateLogdir, translateLogdirs, } from 'components/Brokers/utils/translateLogdirs'; -import { brokerLogDirsPayload } from 'components/Brokers/__test__/fixtures'; +import { brokerLogDirsPayload } from 'lib/fixtures/brokers'; import { defaultTransformedBrokerLogDirsPayload, diff --git a/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx b/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx index f41d75840d..b718db8b29 100644 --- a/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx +++ b/kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Cluster, ClusterFeaturesEnum } from 'generated-sources'; import ClusterComponent from 'components/Cluster/Cluster'; -import { screen, waitFor } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { render, WithRoute } from 'lib/testHelpers'; import { clusterBrokersPath, @@ -14,9 +14,8 @@ import { clusterTopicsPath, } from 'lib/paths'; import { act } from 'react-dom/test-utils'; -import fetchMock from 'fetch-mock'; - -import { onlineClusterPayload } from './fixtures'; +import { useClusters } from 'lib/hooks/api/clusters'; +import { onlineClusterPayload } from 'lib/fixtures/clusters'; const CLusterCompText = { Topics: 'Topics', @@ -46,11 +45,15 @@ jest.mock('components/KsqlDb/KsqlDb', () => () => (
{CLusterCompText.KsqlDb}
)); -describe('Cluster', () => { - afterEach(() => fetchMock.restore()); +jest.mock('lib/hooks/api/clusters', () => ({ + useClusters: jest.fn(), +})); +describe('Cluster', () => { const renderComponent = async (pathname: string, payload: Cluster[] = []) => { - const mock = fetchMock.get('/api/clusters', payload); + (useClusters as jest.Mock).mockImplementation(() => ({ + data: payload, + })); await act(() => { render( @@ -59,7 +62,6 @@ describe('Cluster', () => { { initialEntries: [pathname] } ); }); - return waitFor(() => expect(mock.called()).toBeTruthy()); }; it('renders Brokers', async () => { diff --git a/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx b/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx index 64cef62a37..3d0c788a90 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import { useIsMutating } from 'react-query'; +import { useIsMutating } from '@tanstack/react-query'; import { ConnectorState, ConnectorAction } from 'generated-sources'; import useAppParams from 'lib/hooks/useAppParams'; import useModal from 'lib/hooks/useModal'; diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx b/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx index b9d697b883..a76b8092f2 100644 --- a/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx @@ -7,7 +7,6 @@ import ClusterContext, { import List from 'components/Connect/List/List'; import { screen } from '@testing-library/react'; import { render, WithRoute } from 'lib/testHelpers'; -import fetchMock from 'fetch-mock'; import { clusterConnectorsPath } from 'lib/paths'; import { useConnectors } from 'lib/hooks/api/kafkaConnect'; @@ -23,8 +22,6 @@ jest.mock('lib/hooks/api/kafkaConnect', () => ({ const clusterName = 'local'; describe('Connectors List', () => { - afterEach(() => fetchMock.restore()); - const renderComponent = (contextValue: ContextProps = initialValue) => render( diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/ListPage.spec.tsx b/kafka-ui-react-app/src/components/Connect/List/__tests__/ListPage.spec.tsx index e41e3fd418..18166c4c9e 100644 --- a/kafka-ui-react-app/src/components/Connect/List/__tests__/ListPage.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/List/__tests__/ListPage.spec.tsx @@ -7,7 +7,6 @@ import ClusterContext, { import ListPage from 'components/Connect/List/ListPage'; import { screen, within } from '@testing-library/react'; import { render, WithRoute } from 'lib/testHelpers'; -import fetchMock from 'fetch-mock'; import { clusterConnectorsPath } from 'lib/paths'; import { useConnectors } from 'lib/hooks/api/kafkaConnect'; @@ -22,8 +21,6 @@ jest.mock('lib/hooks/api/kafkaConnect', () => ({ const clusterName = 'local'; describe('Connectors List Page', () => { - afterEach(() => fetchMock.restore()); - beforeEach(() => { (useConnectors as jest.Mock).mockImplementation(() => ({ isLoading: false, diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx index 9c199ecbc7..c5fa81342c 100644 --- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx +++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx @@ -1,21 +1,24 @@ import React from 'react'; -import { act, screen, waitFor } from '@testing-library/react'; +import { act, screen } from '@testing-library/react'; import ClustersWidget from 'components/Dashboard/ClustersWidget/ClustersWidget'; import userEvent from '@testing-library/user-event'; import { render } from 'lib/testHelpers'; -import fetchMock from 'fetch-mock'; -import { clustersPayload } from 'components/Cluster/__tests__/fixtures'; +import { useClusters } from 'lib/hooks/api/clusters'; +import { clustersPayload } from 'lib/fixtures/clusters'; + +jest.mock('lib/hooks/api/clusters', () => ({ + useClusters: jest.fn(), +})); describe('ClustersWidget', () => { - afterEach(() => fetchMock.restore()); - beforeEach(async () => { - const mock = fetchMock.get('/api/clusters', clustersPayload); - + (useClusters as jest.Mock).mockImplementation(() => ({ + data: clustersPayload, + isSuccess: true, + })); await act(() => { render(); }); - await waitFor(() => expect(mock.called()).toBeTruthy()); }); it('renders clusterWidget list', () => { diff --git a/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx b/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx index 0dbd0bf265..11d273c6ec 100644 --- a/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx +++ b/kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx @@ -5,7 +5,7 @@ import ClusterMenu from 'components/Nav/ClusterMenu'; import userEvent from '@testing-library/user-event'; import { clusterConnectorsPath } from 'lib/paths'; import { render } from 'lib/testHelpers'; -import { onlineClusterPayload } from 'components/Cluster/__tests__/fixtures'; +import { onlineClusterPayload } from 'lib/fixtures/clusters'; describe('ClusterMenu', () => { const setupComponent = (cluster: Cluster, singleMode?: boolean) => ( diff --git a/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx b/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx index 299463af5f..023fdfdba7 100644 --- a/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx +++ b/kafka-ui-react-app/src/components/Nav/__tests__/Nav.spec.tsx @@ -1,24 +1,28 @@ import React from 'react'; import Nav from 'components/Nav/Nav'; -import { screen, waitFor } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { render } from 'lib/testHelpers'; +import { act } from 'react-dom/test-utils'; +import { Cluster } from 'generated-sources'; +import { useClusters } from 'lib/hooks/api/clusters'; import { offlineClusterPayload, onlineClusterPayload, -} from 'components/Cluster/__tests__/fixtures'; -import fetchMock from 'fetch-mock'; -import { act } from 'react-dom/test-utils'; -import { Cluster } from 'generated-sources'; +} from 'lib/fixtures/clusters'; + +jest.mock('lib/hooks/api/clusters', () => ({ + useClusters: jest.fn(), +})); describe('Nav', () => { - afterEach(() => fetchMock.restore()); - const renderComponent = async (payload: Cluster[] = []) => { - const mock = fetchMock.get('/api/clusters', payload); + (useClusters as jest.Mock).mockImplementation(() => ({ + data: payload, + isSuccess: true, + })); await act(() => { render(