Upgrade RQ to v4 (#2300)

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",

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==}

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';

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<ClusterBrokerParam>();
-
   const { data: logDirs } = useBrokerLogDirs(clusterName, Number(brokerId));
 
   const preparedRows = translateLogdirs(logDirs);

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(
         <WithRoute path={clusterBrokerPath()}>
-          <Broker />
+          <BrokerLogdir />
         </WithRoute>,
         {
           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();
   });
 });

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;

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;

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,

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', () => () => (
   <div>{CLusterCompText.KsqlDb}</div>
 ));
 
-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(
         <WithRoute path={`${clusterPath()}/*`}>
@@ -59,7 +62,6 @@ describe('Cluster', () => {
         { initialEntries: [pathname] }
       );
     });
-    return waitFor(() => expect(mock.called()).toBeTruthy());
   };
 
   it('renders Brokers', async () => {

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';

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(
       <ClusterContext.Provider value={contextValue}>

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,

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';
 
-describe('ClustersWidget', () => {
-  afterEach(() => fetchMock.restore());
+jest.mock('lib/hooks/api/clusters', () => ({
+  useClusters: jest.fn(),
+}));
 
+describe('ClustersWidget', () => {
   beforeEach(async () => {
-    const mock = fetchMock.get('/api/clusters', clustersPayload);
-
+    (useClusters as jest.Mock).mockImplementation(() => ({
+      data: clustersPayload,
+      isSuccess: true,
+    }));
     await act(() => {
       render(<ClustersWidget />);
     });
-    await waitFor(() => expect(mock.called()).toBeTruthy());
   });
 
   it('renders clusterWidget list', () => {

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) => (

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';
 
-describe('Nav', () => {
-  afterEach(() => fetchMock.restore());
+jest.mock('lib/hooks/api/clusters', () => ({
+  useClusters: jest.fn(),
+}));
 
+describe('Nav', () => {
   const renderComponent = async (payload: Cluster[] = []) => {
-    const mock = fetchMock.get('/api/clusters', payload);
+    (useClusters as jest.Mock).mockImplementation(() => ({
+      data: payload,
+      isSuccess: true,
+    }));
     await act(() => {
       render(<Nav />);
     });
-    return waitFor(() => expect(mock.called()).toBeTruthy());
   };
 
   const getDashboard = () => screen.getByText('Dashboard');

kafka-ui-react-app/src/components/Brokers/__test__/fixtures.ts → kafka-ui-react-app/src/lib/fixtures/brokers.ts

@@ -5,21 +5,6 @@ export const brokersPayload = [
   { id: 2, host: 'b-2.test.kafka.amazonaws.com', port: 9092 },
 ];
 
-export const clusterStatsPayload = {
-  brokerCount: 2,
-  activeControllers: 1,
-  onlinePartitionCount: 138,
-  offlinePartitionCount: 0,
-  inSyncReplicasCount: 239,
-  outOfSyncReplicasCount: 0,
-  underReplicatedPartitionCount: 0,
-  diskUsage: [
-    { brokerId: 0, segmentSize: 334567, segmentCount: 245 },
-    { brokerId: 1, segmentSize: 12345678, segmentCount: 121 },
-  ],
-  version: '2.2.1',
-};
-
 const partition = {
   broker: 2,
   offsetLag: 0,

kafka-ui-react-app/src/components/Cluster/__tests__/fixtures.ts → kafka-ui-react-app/src/lib/fixtures/clusters.ts

@@ -29,3 +29,18 @@ export const clustersPayload: Cluster[] = [
   onlineClusterPayload,
   offlineClusterPayload,
 ];
+
+export const clusterStatsPayload = {
+  brokerCount: 2,
+  activeControllers: 1,
+  onlinePartitionCount: 138,
+  offlinePartitionCount: 0,
+  inSyncReplicasCount: 239,
+  outOfSyncReplicasCount: 0,
+  underReplicatedPartitionCount: 0,
+  diskUsage: [
+    { brokerId: 0, segmentSize: 334567, segmentCount: 245 },
+    { brokerId: 1, segmentSize: 12345678, segmentCount: 121 },
+  ],
+  version: '2.2.1',
+};

kafka-ui-react-app/src/lib/hooks/api/__tests__/kafkaConnect.spec.ts

@@ -3,7 +3,7 @@ import { renderQueryHook, TestQueryClientProvider } from 'lib/testHelpers';
 import * as hooks from 'lib/hooks/api/kafkaConnect';
 import fetchMock from 'fetch-mock';
 import { connectors, connects, tasks } from 'lib/fixtures/kafkaConnect';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 import { ConnectorAction } from 'generated-sources';
 
 const clusterName = 'test-cluster';

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

@@ -1,5 +1,5 @@
 import { brokersApiClient as api } from 'lib/api';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ClusterName } from 'redux/interfaces';
 
 export function useBrokers(clusterName: ClusterName) {

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

@@ -1,5 +1,5 @@
 import { clustersApiClient as api } from 'lib/api';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ClusterName } from 'redux/interfaces';
 
 export function useClusters() {

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

@@ -6,7 +6,7 @@ import {
 } from 'generated-sources';
 import { kafkaConnectApiClient as api } from 'lib/api';
 import sortBy from 'lodash/sortBy';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ClusterName } from 'redux/interfaces';
 
 interface UseConnectorProps {

kafka-ui-react-app/src/lib/testHelpers.tsx

@@ -13,7 +13,11 @@ import { AnyAction, Store } from 'redux';
 import { RootState } from 'redux/interfaces';
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from 'redux/reducers';
-import { QueryClient, QueryClientProvider, UseQueryResult } from 'react-query';
+import {
+  QueryClient,
+  QueryClientProvider,
+  UseQueryResult,
+} from '@tanstack/react-query';
 
 interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
   preloadedState?: Partial<RootState>;