Romove enzyme. Cleanup warnings (#1950)

* remove enzyme from dependencies

* Fix warnings

* cleanup code smels

* Rollback contract change

kafka-ui-react-app/package-lock.json

@@ -4992,15 +4992,6 @@
         "@types/node": "*"
       }
     },
-    "@types/cheerio": {
-      "version": "0.22.29",
-      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.29.tgz",
-      "integrity": "sha512-rNX1PsrDPxiNiyLnRKiW2NXHJFHqx0Fl3J2WsZq0MTBspa/FgwlqhXJE2crIcc+/2IglLHtSWw7g053oUR8fOg==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
     "@types/classnames": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
@@ -5029,16 +5020,6 @@
         "@types/node": "*"
       }
     },
-    "@types/enzyme": {
-      "version": "3.10.11",
-      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.11.tgz",
-      "integrity": "sha512-LEtC7zXsQlbGXWGcnnmOI7rTyP+i1QzQv4Va91RKXDEukLDaNyxu0rXlfMiGEhJwfgTPCTb0R+Pnlj//oM9e/w==",
-      "dev": true,
-      "requires": {
-        "@types/cheerio": "*",
-        "@types/react": "*"
-      }
-    },
     "@types/eslint": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.29.0.tgz",
@@ -5825,40 +5806,6 @@
         "@xtuc/long": "4.2.2"
       }
     },
-    "@wojtekmaj/enzyme-adapter-react-17": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.6.6.tgz",
-      "integrity": "sha512-gSfhg8CiL0Vwc2UgUblGVZIy7M0KyXaZsd8+QwzV8TSVRLkGyzdLtYEcs9wRWyQTsdmOd+oRGqbVgUX7AVJxug==",
-      "dev": true,
-      "requires": {
-        "@wojtekmaj/enzyme-adapter-utils": "^0.1.2",
-        "enzyme-shallow-equal": "^1.0.0",
-        "has": "^1.0.0",
-        "prop-types": "^15.7.0",
-        "react-is": "^17.0.0",
-        "react-test-renderer": "^17.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        }
-      }
-    },
-    "@wojtekmaj/enzyme-adapter-utils": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-utils/-/enzyme-adapter-utils-0.1.2.tgz",
-      "integrity": "sha512-MM/DqDqvxNVlWLqSVQiUbRN9MuDLJfefmPbJ8ZKdmdf5ID8G+i42XhFpoQh5bAZUCdwzRae3+WSZl2lXcFOrhw==",
-      "dev": true,
-      "requires": {
-        "function.prototype.name": "^1.1.0",
-        "has": "^1.0.0",
-        "object.fromentries": "^2.0.0",
-        "prop-types": "^15.7.0"
-      }
-    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -6276,30 +6223,6 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
-    "array.prototype.filter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.0.tgz",
-      "integrity": "sha512-TfO1gz+tLm+Bswq0FBOXPqAchtCr2Rn48T8dLJoRFl8NoEosjZmzptmuo1X8aZBzZcqsR1W8U761tjACJtngTQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "is-string": "^1.0.5"
-      }
-    },
-    "array.prototype.flat": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
-      "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1"
-      }
-    },
     "array.prototype.flatmap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
@@ -7445,42 +7368,6 @@
       "integrity": "sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ==",
       "dev": true
     },
-    "cheerio": {
-      "version": "1.0.0-rc.10",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
-      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
-      "dev": true,
-      "requires": {
-        "cheerio-select": "^1.5.0",
-        "dom-serializer": "^1.3.2",
-        "domhandler": "^4.2.0",
-        "htmlparser2": "^6.1.0",
-        "parse5": "^6.0.1",
-        "parse5-htmlparser2-tree-adapter": "^6.0.1",
-        "tslib": "^2.2.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "cheerio-select": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
-      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
-      "dev": true,
-      "requires": {
-        "css-select": "^4.1.3",
-        "css-what": "^5.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0",
-        "domutils": "^2.7.0"
-      }
-    },
     "chokidar": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
@@ -8691,12 +8578,6 @@
         "path-type": "^4.0.0"
       }
     },
-    "discontinuous-range": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
-      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
-      "dev": true
-    },
     "dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -8949,57 +8830,6 @@
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true
     },
-    "enzyme": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
-      "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
-      "dev": true,
-      "requires": {
-        "array.prototype.flat": "^1.2.3",
-        "cheerio": "^1.0.0-rc.3",
-        "enzyme-shallow-equal": "^1.0.1",
-        "function.prototype.name": "^1.1.2",
-        "has": "^1.0.3",
-        "html-element-map": "^1.2.0",
-        "is-boolean-object": "^1.0.1",
-        "is-callable": "^1.1.5",
-        "is-number-object": "^1.0.4",
-        "is-regex": "^1.0.5",
-        "is-string": "^1.0.5",
-        "is-subset": "^0.1.1",
-        "lodash.escape": "^4.0.1",
-        "lodash.isequal": "^4.5.0",
-        "object-inspect": "^1.7.0",
-        "object-is": "^1.0.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.1",
-        "object.values": "^1.1.1",
-        "raf": "^3.4.1",
-        "rst-selector-parser": "^2.2.3",
-        "string.prototype.trim": "^1.2.1"
-      }
-    },
-    "enzyme-shallow-equal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz",
-      "integrity": "sha512-MttIwB8kKxypwHvRynuC3ahyNc+cFbR8mjVIltnmzQ0uKGqmsfO4bfBuLxb0beLNPhjblUEYvEbsg+VSygvF1Q==",
-      "dev": true,
-      "requires": {
-        "has": "^1.0.3",
-        "object-is": "^1.1.2"
-      }
-    },
-    "enzyme-to-json": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz",
-      "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==",
-      "dev": true,
-      "requires": {
-        "@types/cheerio": "^0.22.22",
-        "lodash": "^4.17.21",
-        "react-is": "^16.12.0"
-      }
-    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -9042,12 +8872,6 @@
         "unbox-primitive": "^1.0.1"
       }
     },
-    "es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
-      "dev": true
-    },
     "es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
@@ -11508,30 +11332,12 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
-    "function.prototype.name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.4.tgz",
-      "integrity": "sha512-iqy1pIotY/RmhdFZygSSlW0wko2yxkSCKqsuv4pr8QESohpYyG/Z7B/XXvPRKTJS//960rgguE5mSRUsDdaJrQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "functions-have-names": "^1.2.2"
-      }
-    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "functions-have-names": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz",
-      "integrity": "sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==",
-      "dev": true
-    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -11863,16 +11669,6 @@
         }
       }
     },
-    "html-element-map": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.3.1.tgz",
-      "integrity": "sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==",
-      "dev": true,
-      "requires": {
-        "array.prototype.filter": "^1.0.0",
-        "call-bind": "^1.0.2"
-      }
-    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -14380,18 +14176,6 @@
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
-    "lodash.escape": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
-      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
-      "dev": true
-    },
-    "lodash.flattendeep": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
-      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
-      "dev": true
-    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@@ -14745,12 +14529,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moo": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
-      "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==",
-      "dev": true
-    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -14815,36 +14593,6 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
-    "nearley": {
-      "version": "2.20.1",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
-      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
-      "dev": true,
-      "requires": {
-        "commander": "^2.19.0",
-        "moo": "^0.5.0",
-        "railroad-diagrams": "^1.0.0",
-        "randexp": "0.4.6"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        },
-        "randexp": {
-          "version": "0.4.6",
-          "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
-          "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
-          "dev": true,
-          "requires": {
-            "discontinuous-range": "1.0.0",
-            "ret": "~0.1.10"
-          }
-        }
-      }
-    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -15065,89 +14813,6 @@
         "object-keys": "^1.1.1"
       }
     },
-    "object.entries": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz",
-      "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
-      }
-    },
-    "object.fromentries": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
-      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.19.1",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-          "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "get-symbol-description": "^1.0.0",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "internal-slot": "^1.0.3",
-            "is-callable": "^1.2.4",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.4",
-            "is-shared-array-buffer": "^1.0.1",
-            "is-string": "^1.0.7",
-            "is-weakref": "^1.0.1",
-            "object-inspect": "^1.11.0",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "is-callable": {
-          "version": "1.2.4",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-          "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-          "dev": true
-        },
-        "is-regex": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-          "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-tostringtag": "^1.0.0"
-          }
-        },
-        "is-string": {
-          "version": "1.0.7",
-          "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-          "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-          "dev": true,
-          "requires": {
-            "has-tostringtag": "^1.0.0"
-          }
-        },
-        "object-inspect": {
-          "version": "1.12.0",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
-          "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
-          "dev": true
-        }
-      }
-    },
     "object.getownpropertydescriptors": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz",
@@ -15504,15 +15169,6 @@
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
       "dev": true
     },
-    "parse5-htmlparser2-tree-adapter": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
-      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
-      "dev": true,
-      "requires": {
-        "parse5": "^6.0.1"
-      }
-    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -16763,12 +16419,6 @@
         "performance-now": "^2.1.0"
       }
     },
-    "railroad-diagrams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
-      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=",
-      "dev": true
-    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -18433,16 +18083,6 @@
         }
       }
     },
-    "rst-selector-parser": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
-      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
-      "dev": true,
-      "requires": {
-        "lodash.flattendeep": "^4.4.0",
-        "nearley": "^2.7.10"
-      }
-    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -19373,17 +19013,6 @@
         }
       }
     },
-    "string.prototype.trim": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.4.tgz",
-      "integrity": "sha512-hWCk/iqf7lp0/AgTF7/ddO1IWtSNPASjlzCicV5irAVdE1grjsneK26YG6xACMBEdCvO8fUST0UzDMh/2Qy+9Q==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2"
-      }
-    },
     "string.prototype.trimend": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",

kafka-ui-react-app/package.json

@@ -85,7 +85,6 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.2.11",
-    "@types/enzyme": "^3.10.9",
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.172",
     "@types/node": "^16.4.13",
@@ -101,10 +100,7 @@
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "dotenv": "^15.0.0",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.1",
     "eslint": "^8.7.0",
     "eslint-config-airbnb": "^19.0.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
@@ -135,10 +131,5 @@
   "engines": {
     "node": "14.17.1",
     "npm": "6.14.13"
-  },
-  "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
   }
 }

kafka-ui-react-app/src/components/Alerts/Alert.tsx

@@ -16,7 +16,10 @@ const Alert: React.FC<AlertProps> = ({ title, type, message, onDissmiss }) => (
   <S.Alert $type={type} role="alert">
     <div>
       <S.Title role="heading">{title}</S.Title>
-      <S.Message role="contentinfo">{message}</S.Message>
+      <S.Message
+        role="contentinfo"
+        dangerouslySetInnerHTML={{ __html: message }}
+      />
     </div>
 
     <IconButtonWrapper role="button" onClick={onDissmiss}>

kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx

@@ -7,9 +7,8 @@ import {
 import New, { NewProps } from 'components/Connect/New/New';
 import { connects, connector } from 'redux/reducers/connect/__test__/fixtures';
 import { Route } from 'react-router';
-import { act, fireEvent, screen } from '@testing-library/react';
+import { waitFor, fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/dom';
 import { ControllerRenderProps } from 'react-hook-form';
 
 jest.mock('components/common/PageLoader/PageLoader', () => 'mock-PageLoader');
@@ -63,9 +62,7 @@ describe('New', () => {
 
   it('fetches connects on mount', async () => {
     const fetchConnects = jest.fn();
-    await act(async () => {
+    await waitFor(() => renderComponent({ fetchConnects }));
-      renderComponent({ fetchConnects });
-    });
     expect(fetchConnects).toHaveBeenCalledTimes(1);
     expect(fetchConnects).toHaveBeenCalledWith(clusterName);
   });

kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx

@@ -21,7 +21,11 @@ describe('Cluster Styled Components', () => {
   describe('StatusIcon Component', () => {
     const getStatusCircle = () => screen.getByRole('status-circle');
     it('should check the rendering and correct Styling when it is online', () => {
-      render(<S.StatusIcon status={ServerStatus.ONLINE} />);
+      render(
+        <svg>
+          <S.StatusIcon status={ServerStatus.ONLINE} />
+        </svg>
+      );
 
       expect(getStatusCircle()).toHaveStyle(
         `fill:${theme.menu.statusIconColor.online}`
@@ -29,14 +33,22 @@ describe('Cluster Styled Components', () => {
     });
 
     it('should check the rendering and correct Styling when it is offline', () => {
-      render(<S.StatusIcon status={ServerStatus.OFFLINE} />);
+      render(
+        <svg>
+          <S.StatusIcon status={ServerStatus.OFFLINE} />
+        </svg>
+      );
       expect(getStatusCircle()).toHaveStyle(
         `fill:${theme.menu.statusIconColor.offline}`
       );
     });
 
     it('should check the rendering and correct Styling when it is Initializing', () => {
-      render(<S.StatusIcon status={ServerStatus.INITIALIZING} />);
+      render(
+        <svg>
+          <S.StatusIcon status={ServerStatus.INITIALIZING} />
+        </svg>
+      );
       expect(getStatusCircle()).toHaveStyle(
         `fill:${theme.menu.statusIconColor.initializing}`
       );

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx

@@ -15,20 +15,18 @@ describe('AddEditFilterContainer component', () => {
     code: 'mockCode',
   };
 
-  const setupComponent = (props: Partial<AddEditFilterContainerProps> = {}) => {
+  const setupComponent = (props: Partial<AddEditFilterContainerProps> = {}) =>
-    const { submitBtnText } = props;
+    render(
-    return render(
       <AddEditFilterContainer
         cancelBtnHandler={jest.fn()}
-        submitBtnText={submitBtnText || defaultSubmitBtn}
+        submitBtnText={props.submitBtnText || defaultSubmitBtn}
         {...props}
       />
     );
-  };
 
   describe('default Component Parameters', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
-      setupComponent();
+      await waitFor(() => setupComponent());
     });
 
     it('should check the default Button text', () => {
@@ -47,15 +45,11 @@ describe('AddEditFilterContainer component', () => {
       const inputNameElement = inputs[1];
       userEvent.type(inputNameElement, 'Hello World!');
 
-      await waitFor(() => {
+      await waitFor(() => expect(submitButtonElem).toBeEnabled());
-        expect(submitButtonElem).toBeEnabled();
-      });
 
       userEvent.clear(inputNameElement);
 
-      await waitFor(() => {
+      await waitFor(() => expect(submitButtonElem).toBeDisabled());
-        expect(submitButtonElem).toBeDisabled();
-      });
     });
 
     it('should view the error message after typing and clearing the input', async () => {
@@ -70,10 +64,9 @@ describe('AddEditFilterContainer component', () => {
       userEvent.clear(inputNameElement);
       userEvent.clear(textAreaElement);
 
-      await waitFor(() => {
+      await waitFor(() =>
-        const requiredFieldTextElements = screen.getByText(/required field/i);
+        expect(screen.getByText(/required field/i)).toBeInTheDocument()
-        expect(requiredFieldTextElements).toBeInTheDocument();
+      );
-      });
     });
   });
 
@@ -83,13 +76,12 @@ describe('AddEditFilterContainer component', () => {
         inputDisplayNameDefaultValue: mockData.name,
         inputCodeDefaultValue: mockData.code,
       });
+
       const inputs = screen.getAllByRole('textbox');
       const textAreaElement = inputs[0] as HTMLTextAreaElement;
       const inputNameElement = inputs[1];
-      await waitFor(() => {
+      await waitFor(() => expect(inputNameElement).toHaveValue(mockData.name));
-        expect(inputNameElement).toHaveValue(mockData.name);
+      expect(textAreaElement.value).toEqual('');
-        expect(textAreaElement.value).toEqual('');
-      });
     });
 
     it('should test whether the cancel callback is being called', async () => {
@@ -99,7 +91,7 @@ describe('AddEditFilterContainer component', () => {
       });
       const cancelBtnElement = screen.getByText(/cancel/i);
       userEvent.click(cancelBtnElement);
-      expect(cancelCallback).toBeCalled();
+      await waitFor(() => expect(cancelCallback).toBeCalled());
     });
 
     it('should test whether the submit Callback is being called', async () => {
@@ -118,31 +110,29 @@ describe('AddEditFilterContainer component', () => {
 
       const submitBtnElement = screen.getByText(defaultSubmitBtn);
 
-      await waitFor(() => {
+      await waitFor(() => expect(submitBtnElement).toBeEnabled());
-        expect(submitBtnElement).toBeEnabled();
-      });
 
       userEvent.click(submitBtnElement);
 
-      await waitFor(() => {
+      await waitFor(() => expect(submitCallback).toBeCalled());
-        expect(submitCallback).toBeCalled();
-      });
     });
 
-    it('should display the checkbox if the props is passed and initially check state', () => {
+    it('should display the checkbox if the props is passed and initially check state', async () => {
       setupComponent({ isAdd: true });
       const checkbox = screen.getByRole('checkbox');
       expect(checkbox).toBeInTheDocument();
       expect(checkbox).not.toBeChecked();
-      userEvent.click(checkbox);
+      await waitFor(() => userEvent.click(checkbox));
       expect(checkbox).toBeChecked();
     });
 
-    it('should pass and render the correct button text', () => {
+    it('should pass and render the correct button text', async () => {
       const submitBtnText = 'submitBtnTextTest';
-      setupComponent({
+      await waitFor(() =>
-        submitBtnText,
+        setupComponent({
-      });
+          submitBtnText,
+        })
+      );
       expect(screen.getByText(submitBtnText)).toBeInTheDocument();
     });
   });

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddFilter.spec.tsx

@@ -36,21 +36,23 @@ describe('AddFilter component', () => {
     expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
   });
 
-  it('should test click on return to custom filter redirects to Add filters', () => {
+  it('should test click on return to custom filter redirects to Add filters', async () => {
     setupComponent();
     userEvent.click(screen.getByRole('savedFilterText'));
     expect(screen.getByText('Saved filters')).toBeInTheDocument();
     expect(screen.queryByRole('savedFilterText')).not.toBeInTheDocument();
     expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
 
-    userEvent.click(screen.getByText(/back to custom filters/i));
+    await waitFor(() =>
+      userEvent.click(screen.getByText(/back to custom filters/i))
+    );
     expect(screen.queryByText('Saved filters')).not.toBeInTheDocument();
     expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
   });
 
   describe('Add new filter', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
-      setupComponent();
+      await waitFor(() => setupComponent());
     });
 
     it('adding new filter', async () => {
@@ -64,10 +66,8 @@ describe('AddFilter component', () => {
       const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
       expect(addFilterBtn).toBeDisabled();
       expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
-      await waitFor(() => {
+      await waitFor(() => userEvent.paste(codeTextBox, codeValue));
-        userEvent.paste(codeTextBox, codeValue);
+      await waitFor(() => userEvent.type(nameTextBox, nameValue));
-        userEvent.type(nameTextBox, nameValue);
-      });
       expect(addFilterBtn).toBeEnabled();
       expect(codeTextBox.value).toEqual(`${codeValue}\n\n`);
       expect(nameTextBox).toHaveValue(nameValue);
@@ -81,26 +81,17 @@ describe('AddFilter component', () => {
       const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
       expect(addFilterBtn).toBeDisabled();
       expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
-      await waitFor(() => {
+      await waitFor(() => userEvent.paste(codeTextBox, code));
-        userEvent.paste(codeTextBox, code);
-      });
       expect(addFilterBtn).toBeEnabled();
       expect(codeTextBox).toHaveValue(`${code}\n\n`);
     });
 
-    it('calls editFilter when edit button is clicked in saved filters', () => {
+    it('calls editFilter when edit button is clicked in saved filters', async () => {
-      const savedFiltersButton = screen.getByText('Saved Filters');
+      userEvent.click(screen.getByText('Saved Filters'));
-      expect(savedFiltersButton).toBeInTheDocument();
-
-      userEvent.click(savedFiltersButton);
-
       const index = 0;
-
       const editButton = screen.getAllByText('Edit')[index];
       userEvent.click(editButton);
-
       const { code, name } = filters[index];
-
       expect(editFilterMock).toHaveBeenCalledTimes(1);
       expect(editFilterMock).toHaveBeenCalledWith({
         index,
@@ -119,11 +110,13 @@ describe('AddFilter component', () => {
     const nameValue = 'filter name';
 
     beforeEach(async () => {
-      setupComponent({
+      await waitFor(() =>
-        addFilter: addFilterMock,
+        setupComponent({
-        activeFilterHandler: activeFilterHandlerMock,
+          addFilter: addFilterMock,
-        toggleIsOpen: toggleModelMock,
+          activeFilterHandler: activeFilterHandlerMock,
-      });
+          toggleIsOpen: toggleModelMock,
+        })
+      );
     });
 
     afterEach(() => {
@@ -151,21 +144,19 @@ describe('AddFilter component', () => {
         expect(addFilterBtn).toBeEnabled();
         userEvent.click(addFilterBtn);
 
-        await waitFor(() => {
+        await waitFor(() => expect(activeFilterHandlerMock).toHaveBeenCalled());
-          expect(activeFilterHandlerMock).toHaveBeenCalled();
+        expect(addFilterMock).not.toHaveBeenCalled();
-          expect(addFilterMock).not.toHaveBeenCalled();
-        });
       });
 
       it('OnSubmit condition with checkbox on functionality', async () => {
         userEvent.click(screen.getByRole('checkbox'));
 
         userEvent.click(screen.getAllByRole('button')[1]);
-        await waitFor(() => {
+        await waitFor(() =>
-          expect(activeFilterHandlerMock).not.toHaveBeenCalled();
+          expect(activeFilterHandlerMock).not.toHaveBeenCalled()
-          expect(addFilterMock).toHaveBeenCalled();
+        );
-          expect(toggleModelMock).not.toHaveBeenCalled();
+        expect(addFilterMock).toHaveBeenCalled();
-        });
+        expect(toggleModelMock).not.toHaveBeenCalled();
       });
 
       it('should check the state submit button when checkbox state changes so is name input value', async () => {
@@ -182,20 +173,21 @@ describe('AddFilter component', () => {
         expect(nameTextBox).toHaveValue('');
 
         userEvent.click(addFilterBtn);
-        await waitFor(() => {
+        await waitFor(() =>
-          expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1);
+          expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1)
-          expect(activeFilterHandlerMock).toHaveBeenCalledWith(
+        );
-            {
+
-              name: codeValue,
+        expect(activeFilterHandlerMock).toHaveBeenCalledWith(
-              code: codeValue,
+          {
-              saveFilter: false,
+            name: codeValue,
-            },
+            code: codeValue,
-            -1
+            saveFilter: false,
-          );
+          },
-          // get reset-ed
+          -1
-          expect(codeTextBox.value).toEqual(``);
+        );
-          expect(toggleModelMock).toHaveBeenCalled();
+        // get reset-ed
-        });
+        expect(codeTextBox).toHaveValue(``);
+        expect(toggleModelMock).toHaveBeenCalled();
 
         userEvent.paste(codeTextBox, codeValue);
         expect(codeTextBox).toHaveValue(`${codeValue}\n\n`);
@@ -205,20 +197,16 @@ describe('AddFilter component', () => {
 
         userEvent.type(nameTextBox, nameValue);
         expect(nameTextBox).toHaveValue(nameValue);
-
+        await waitFor(() => expect(addFilterBtn).toBeEnabled());
-        await waitFor(() => {
-          expect(addFilterBtn).toBeEnabled();
-        });
-
         userEvent.click(addFilterBtn);
 
-        await waitFor(() => {
+        await waitFor(() =>
-          expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1);
+          expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1)
-          expect(addFilterMock).toHaveBeenCalledWith({
+        );
-            name: nameValue,
+        expect(addFilterMock).toHaveBeenCalledWith({
-            code: codeValue,
+          name: nameValue,
-            saveFilter: true,
+          code: codeValue,
-          });
+          saveFilter: true,
         });
       });
     });

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/EditFilter.spec.tsx

@@ -23,14 +23,14 @@ const setupComponent = (props?: Partial<EditFilterProps>) =>
   );
 
 describe('EditFilter component', () => {
-  it('renders component', () => {
+  it('renders component', async () => {
-    setupComponent();
+    await waitFor(() => setupComponent());
     expect(screen.getByText(/edit saved filter/i)).toBeInTheDocument();
   });
 
-  it('closes editFilter modal', () => {
+  it('closes editFilter modal', async () => {
     const toggleEditModal = jest.fn();
-    setupComponent({ toggleEditModal });
+    await waitFor(() => setupComponent({ toggleEditModal }));
     userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
     expect(toggleEditModal).toHaveBeenCalledTimes(1);
   });
@@ -38,7 +38,7 @@ describe('EditFilter component', () => {
   it('save edited fields and close modal', async () => {
     const toggleEditModal = jest.fn();
     const editSavedFilter = jest.fn();
-    setupComponent({ toggleEditModal, editSavedFilter });
+    await waitFor(() => setupComponent({ toggleEditModal, editSavedFilter }));
     const inputs = screen.getAllByRole('textbox');
     const textAreaElement = inputs[0] as HTMLTextAreaElement;
     const inputNameElement = inputs[1];
@@ -49,8 +49,8 @@ describe('EditFilter component', () => {
     expect(editSavedFilter).toHaveBeenCalledTimes(1);
   });
 
-  it('checks input values to match', () => {
+  it('checks input values to match', async () => {
-    setupComponent();
+    await waitFor(() => setupComponent());
     const inputs = screen.getAllByRole('textbox');
     const textAreaElement = inputs[0] as HTMLTextAreaElement;
     const inputNameElement = inputs[1];

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/FilterModal.spec.tsx

@@ -22,17 +22,17 @@ const setupWrapper = (props?: Partial<FilterModalProps>) =>
     />
   );
 describe('FilterModal component', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
-    setupWrapper();
+    await waitFor(() => setupWrapper());
   });
   it('renders component with add filter modal', () => {
     expect(
       screen.getByRole('heading', { name: /add filter/i, level: 3 })
     ).toBeInTheDocument();
   });
-  it('renders component with edit filter modal', async () => {
+  it('renders component with edit filter modal', () => {
-    await waitFor(() => userEvent.click(screen.getByRole('savedFilterText')));
+    userEvent.click(screen.getByRole('savedFilterText'));
-    await waitFor(() => userEvent.click(screen.getByText('Edit')));
+    userEvent.click(screen.getByText('Edit'));
     expect(
       screen.getByRole('heading', { name: /edit saved filter/i, level: 3 })
     ).toBeInTheDocument();

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

@@ -44,29 +44,22 @@ const setupWrapper = (
 const getSubmit = () => screen.getByText('Submit');
 
 describe('Filters component', () => {
-  it('renders component', () => {
+  it('shows cancel button while fetching', () => {
+    setupWrapper({ isFetching: true });
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+  });
+
+  it('shows submit button while fetching is over', () => {
     setupWrapper();
-  });
+    expect(getSubmit()).toBeInTheDocument();
-
-  describe('when fetching', () => {
-    it('shows cancel button while fetching', () => {
-      setupWrapper({ isFetching: true });
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
-  });
-
-  describe('when fetching is over', () => {
-    it('shows submit button while fetching is over', () => {
-      setupWrapper();
-      expect(getSubmit()).toBeInTheDocument();
-    });
   });
 
   describe('Input elements', () => {
     const inputValue = 'Hello World!';
 
+    beforeEach(() => setupWrapper());
+
     it('search input', () => {
-      setupWrapper();
       const SearchInput = screen.getByPlaceholderText('Search');
       expect(SearchInput).toBeInTheDocument();
       expect(SearchInput).toHaveValue('');
@@ -75,7 +68,6 @@ describe('Filters component', () => {
     });
 
     it('offset input', () => {
-      setupWrapper();
       const OffsetInput = screen.getByPlaceholderText('Offset');
       expect(OffsetInput).toBeInTheDocument();
       expect(OffsetInput).toHaveValue('');
@@ -83,18 +75,18 @@ describe('Filters component', () => {
       expect(OffsetInput).toHaveValue(inputValue);
     });
 
-    it('timestamp input', () => {
+    it('timestamp input', async () => {
-      setupWrapper();
       const seekTypeSelect = screen.getAllByRole('listbox');
       const option = screen.getAllByRole('option');
+
       userEvent.click(seekTypeSelect[0]);
       userEvent.selectOptions(seekTypeSelect[0], ['Timestamp']);
       expect(option[0]).toHaveTextContent('Timestamp');
-      const TimestampInput = screen.getByPlaceholderText('Select timestamp');
+      const timestampInput = screen.getByPlaceholderText('Select timestamp');
-      expect(TimestampInput).toBeInTheDocument();
+      expect(timestampInput).toBeInTheDocument();
-      expect(TimestampInput).toHaveValue('');
+      expect(timestampInput).toHaveValue('');
-      userEvent.type(TimestampInput, inputValue);
+      userEvent.type(timestampInput, inputValue);
-      expect(TimestampInput).toHaveValue(inputValue);
+      await waitFor(() => expect(timestampInput).toHaveValue(inputValue));
       expect(screen.getByText('Submit')).toBeInTheDocument();
     });
   });
@@ -102,12 +94,10 @@ describe('Filters component', () => {
   describe('Select elements', () => {
     let seekTypeSelects: HTMLElement[];
     let options: HTMLElement[];
+
     const selectedDirectionOptionValue = SeekDirectionOptions[0];
-
     const mockDirectionOptionSelectLabel = selectedDirectionOptionValue.label;
-
     const selectTypeOptionValue = SeekTypeOptions[0];
-
     const mockTypeOptionSelectLabel = selectTypeOptionValue.label;
 
     beforeEach(() => {
@@ -123,6 +113,7 @@ describe('Filters component', () => {
       expect(options[0]).toHaveTextContent(mockTypeOptionSelectLabel);
       expect(screen.getByText('Submit')).toBeInTheDocument();
     });
+
     it('seekDirection select', () => {
       userEvent.click(seekTypeSelects[1]);
       userEvent.selectOptions(seekTypeSelects[1], [
@@ -132,28 +123,24 @@ describe('Filters component', () => {
     });
   });
 
-  describe('when live mode is active', () => {
+  it('stop loading when live mode is active', () => {
-    it('stop loading', () => {
+    setupWrapper();
-      setupWrapper();
+    userEvent.click(screen.getByText('Stop loading'));
-      const StopLoading = screen.getByText('Stop loading');
+    const option = screen.getAllByRole('option');
-      expect(StopLoading).toBeInTheDocument();
+    expect(option[1]).toHaveTextContent('Oldest First');
-      userEvent.click(StopLoading);
+    expect(getSubmit()).toBeInTheDocument();
-      const option = screen.getAllByRole('option');
-      expect(option[1]).toHaveTextContent('Oldest First');
-      expect(getSubmit()).toBeInTheDocument();
-    });
   });
 
-  describe('add new filter modal', () => {
+  it('renders addFilter modal', async () => {
-    it('renders addFilter modal', () => {
+    setupWrapper();
-      setupWrapper();
+    await waitFor(() =>
       userEvent.click(
         screen.getByRole('button', {
           name: /add filters/i,
         })
-      );
+      )
-      expect(screen.getByTestId('messageFilterModal')).toBeInTheDocument();
+    );
-    });
+    expect(screen.getByTestId('messageFilterModal')).toBeInTheDocument();
   });
 
   describe('when there is active smart filter', () => {
@@ -186,13 +173,13 @@ describe('Filters component', () => {
       expect(textAreaElement.value).toEqual(`${filterName}\n\n`);
       expect(inputNameElement).toHaveValue(filterCode);
 
-      await waitFor(() => {
+      await waitFor(() =>
-        return userEvent.click(
+        userEvent.click(
           within(messageFilterModal).getByRole('button', {
             name: /add filter/i,
           })
-        );
+        )
-      });
+      );
     });
 
     it('shows saved smart filter', () => {
@@ -204,9 +191,7 @@ describe('Filters component', () => {
       const deleteIcon = within(smartFilterElement).getByTestId(
         'activeSmartFilterCloseIcon'
       );
-      await waitFor(() => {
+      await waitFor(() => userEvent.click(deleteIcon));
-        userEvent.click(deleteIcon);
-      });
 
       const anotherSmartFilterElement =
         screen.queryByTestId('activeSmartFilter');

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

@@ -101,18 +101,13 @@ const SendMessage: React.FC = () => {
       const headers = data.headers ? JSON.parse(data.headers) : undefined;
       const errors = validateMessage(key, content, messageSchema);
       if (errors.length > 0) {
+        const errorsHtml = errors.map((e) => `<li>${e}</li>`).join('');
         dispatch(
           alertAdded({
             id: `${clusterName}-${topicName}-createTopicMessageError`,
             type: 'error',
             title: 'Validation Error',
-            message: (
+            message: `<ul>${errorsHtml}</ul>`,
-              <ul>
-                {errors.map((e) => (
-                  <li>{e}</li>
-                ))}
-              </ul>
-            ),
             createdAt: now(),
           })
         );

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

@@ -107,7 +107,6 @@ describe('SendMessage', () => {
     it('calls sendTopicMessage on submit', async () => {
       const sendTopicMessageMock = fetchMock.postOnce(url, 200);
       await renderAndSubmitData();
-
       await waitFor(() =>
         expect(sendTopicMessageMock.called(url)).toBeTruthy()
       );
@@ -135,7 +134,6 @@ describe('SendMessage', () => {
     it('should check and view validation error message when is not valid', async () => {
       const sendTopicMessageMock = fetchMock.postOnce(url, 200);
       await renderAndSubmitData(['error']);
-
       await waitFor(() => expect(sendTopicMessageMock.called(url)).toBeFalsy());
       expect(history.location.pathname).not.toEqual(
         clusterTopicMessagesPath(clusterName, topicName)

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

@@ -1,5 +1,4 @@
 import { ErrorResponse } from 'generated-sources';
-import React from 'react';
 
 export interface ServerResponse {
   status: number;
@@ -21,7 +20,7 @@ export interface Alert {
   id: string;
   type: AlertType;
   title: string;
-  message: React.ReactNode;
+  message: string;
   response?: ServerResponse;
   createdAt: number;
 }

kafka-ui-react-app/src/redux/reducers/alerts/alertsSlice.ts

@@ -26,7 +26,7 @@ const transformResponseToAlert = (payload: ServerResponse) => {
     id: url || nanoid(),
     type: 'error',
     title: `${status} ${statusText}`,
-    message,
+    message: message || '',
     response: payload,
     createdAt: now(),
   };

kafka-ui-react-app/src/setupTests.ts

@@ -1,7 +1,3 @@
-import { configure } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import 'jest-styled-components';
 import '@testing-library/jest-dom/extend-expect';
 import '@testing-library/jest-dom';
-
-configure({ adapter: new Adapter() });