Use json-schema-faker and ajv (#883)

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

@@ -1465,6 +1465,18 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "debug": {
           "version": "4.3.2",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -1480,6 +1492,12 @@
           "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3725,14 +3743,13 @@
       }
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
+      "version": "8.6.3",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.3.tgz",
+      "integrity": "sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
     },
@@ -3996,7 +4013,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -5251,6 +5267,11 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "call-me-maybe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
+      "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms="
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -7568,6 +7589,18 @@
             "@babel/highlight": "^7.10.4"
           }
         },
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "debug": {
           "version": "4.3.2",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -7606,6 +7639,12 @@
           "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -8079,8 +8118,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esprint": {
       "version": "3.1.0",
@@ -8554,16 +8592,10 @@
       "integrity": "sha1-Ys8SAjTGg3hdkCNIqADvPgzCC8A=",
       "dev": true
     },
-    "faker": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/faker/-/faker-5.5.3.tgz",
-      "integrity": "sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g=="
-    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-diff": {
       "version": "1.2.0",
@@ -8928,11 +8960,6 @@
         }
       }
     },
-    "fn-name": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-3.0.0.tgz",
-      "integrity": "sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA=="
-    },
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
@@ -9117,6 +9144,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format-util": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/format-util/-/format-util-1.0.5.tgz",
+      "integrity": "sha512-varLbTj0e0yVyRpqQhuWV+8hlePAgaoFRhNFj50BNjEIrw1/DphHSObtqwskVCPWNgzwPoQrZAbfa/SBiicNeg=="
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9385,7 +9417,8 @@
     "get-own-enumerable-property-symbols": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
     },
     "get-package-type": {
       "version": "0.1.0",
@@ -10686,7 +10719,8 @@
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
+      "dev": true
     },
     "is-path-cwd": {
       "version": "2.2.0",
@@ -10746,22 +10780,8 @@
     "is-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
-    },
-    "is-relative-url": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-relative-url/-/is-relative-url-3.0.0.tgz",
-      "integrity": "sha512-U1iSYRlY2GIMGuZx7gezlB5dp1Kheaym7zKzO1PV06mOihiWTXejLwm4poEJysPyXF+HtK/BEd0DVlcCh30pEA==",
-      "requires": {
-        "is-absolute-url": "^3.0.0"
-      },
-      "dependencies": {
-        "is-absolute-url": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-          "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q=="
-        }
-      }
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true
     },
     "is-resolvable": {
       "version": "1.1.0",
@@ -12438,7 +12458,6 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
       "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -12560,39 +12579,30 @@
       "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
       "dev": true
     },
-    "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+    "json-schema-faker": {
+      "version": "0.5.0-rcv.39",
+      "resolved": "https://registry.npmjs.org/json-schema-faker/-/json-schema-faker-0.5.0-rcv.39.tgz",
+      "integrity": "sha512-4mzDwdwR73Fj8hcoli+zd2t+iFMsceQ81SIMGiStmK/80V+sJahTxAqQt5x6/UGi/xwLygIl+WzkOru4NtrNdw==",
+      "requires": {
+        "json-schema-ref-parser": "^6.1.0",
+        "jsonpath-plus": "^5.1.0"
+      }
     },
-    "json-schema-yup-transformer": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/json-schema-yup-transformer/-/json-schema-yup-transformer-1.6.0.tgz",
-      "integrity": "sha512-fxS3g2t+taJ8ZBlbmA8rK3YO9SyjeQxvCIIJxC8iDsaqnGn0SVI3DnFePdmtHmYmyor9mlKOKvk6Sc0YT2ZP7Q==",
+    "json-schema-ref-parser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/json-schema-ref-parser/-/json-schema-ref-parser-6.1.0.tgz",
+      "integrity": "sha512-pXe9H1m6IgIpXmE5JSb8epilNTGsmTb2iPohAXpOdhqGFbQjNeHHsZxU+C8w6T81GZxSPFLeUoqDJmzxx5IGuw==",
       "requires": {
-        "is-relative-url": "3.0.0",
-        "lodash": "4.17.21",
-        "stringify-object": "^3.3.0",
-        "yup": "^0.29.1"
-      },
-      "dependencies": {
-        "yup": {
-          "version": "0.29.3",
-          "resolved": "https://registry.npmjs.org/yup/-/yup-0.29.3.tgz",
-          "integrity": "sha512-RNUGiZ/sQ37CkhzKFoedkeMfJM0vNQyaz+wRZJzxdKE7VfDeVKH8bb4rr7XhRLbHJz5hSjoDNwMEIaKhuMZ8gQ==",
-          "requires": {
-            "@babel/runtime": "^7.10.5",
-            "fn-name": "~3.0.0",
-            "lodash": "^4.17.15",
-            "lodash-es": "^4.17.11",
-            "property-expr": "^2.0.2",
-            "synchronous-promise": "^2.0.13",
-            "toposort": "^2.0.2"
-          }
-        }
+        "call-me-maybe": "^1.0.1",
+        "js-yaml": "^3.12.1",
+        "ono": "^4.0.11"
       }
     },
+    "json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -12635,6 +12645,11 @@
       "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
       "dev": true
     },
+    "jsonpath-plus": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-5.1.0.tgz",
+      "integrity": "sha512-890w2Pjtj0iswAxalRlt2kHthi6HKrXEfZcn+ZNZptv7F3rUGIeDuZo+C+h4vXBHLEsVjJrHeCm35nYeZLzSBQ=="
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -14358,6 +14373,14 @@
         "mimic-fn": "^2.1.0"
       }
     },
+    "ono": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/ono/-/ono-4.0.11.tgz",
+      "integrity": "sha512-jQ31cORBFE6td25deYeD80wxKBMj+zBmHTrVxnc6CKhx8gho6ipmWM5zj/oeoqioZ99yqBls9Z/9Nss7J26G2g==",
+      "requires": {
+        "format-util": "^1.0.3"
+      }
+    },
     "open": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
@@ -16196,8 +16219,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "q": {
       "version": "1.5.1",
@@ -17248,8 +17270,7 @@
     "require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
     },
     "require-main-filename": {
       "version": "2.0.0",
@@ -18700,8 +18721,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
@@ -19046,6 +19066,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
       "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
       "requires": {
         "get-own-enumerable-property-symbols": "^3.0.0",
         "is-obj": "^1.0.1",
@@ -19286,11 +19307,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "synchronous-promise": {
-      "version": "2.0.15",
-      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz",
-      "integrity": "sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg=="
-    },
     "table": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
@@ -20169,7 +20185,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -22195,14 +22210,6 @@
         "property-expr": "^2.0.4",
         "toposort": "^2.0.2"
       }
-    },
-    "yup-faker": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yup-faker/-/yup-faker-0.1.0.tgz",
-      "integrity": "sha512-bQSVkIfW4Ny2Qay4i0rQU5eazsVgB1gi6nla6sHaMF92ouoTt+TSYwVbNbT7HqYslK3dg/VtypCAa5LUPVGliA==",
-      "requires": {
-        "faker": "^5.1.0"
-      }
     }
   }
 }

kafka-ui-react-app/package.json

@@ -12,13 +12,14 @@
     "@types/eventsource": "^1.1.6",
     "@types/yup": "^0.29.13",
     "ace-builds": "^1.4.12",
+    "ajv": "^8.6.3",
     "bulma": "^0.9.3",
     "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",
     "dayjs": "^1.10.6",
     "eslint-import-resolver-node": "^0.3.5",
     "eslint-import-resolver-typescript": "^2.4.0",
-    "json-schema-yup-transformer": "^1.6.0",
+    "json-schema-faker": "^0.5.0-rcv.39",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.1",
     "pretty-ms": "^7.0.1",
@@ -38,8 +39,7 @@
     "typesafe-actions": "^5.1.0",
     "use-debounce": "^7.0.0",
     "uuid": "^8.3.1",
-    "yup": "^0.32.9",
-    "yup-faker": "^0.1.0"
+    "yup": "^0.32.9"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [

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

@@ -7,10 +7,9 @@ import {
 } from 'generated-sources';
 import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
-import convertToYup from 'json-schema-yup-transformer';
-import { getFakeData } from 'yup-faker';
 import { useHistory } from 'react-router';
 import { clusterTopicMessagesPath } from 'lib/paths';
+import jsf from 'json-schema-faker';
 
 import validateMessage from './validateMessage';
 
@@ -42,7 +41,7 @@ const SendMessage: React.FC<Props> = ({
   const [keyExampleValue, setKeyExampleValue] = React.useState('');
   const [contentExampleValue, setContentExampleValue] = React.useState('');
   const [schemaIsReady, setSchemaIsReady] = React.useState(false);
-  const [schemaErrorString, setSchemaErrorString] = React.useState('');
+  const [schemaErrors, setSchemaErrors] = React.useState<string[]>([]);
   const {
     register,
     handleSubmit,
@@ -51,32 +50,29 @@ const SendMessage: React.FC<Props> = ({
   } = useForm({ mode: 'onChange' });
   const history = useHistory();
 
+  jsf.option('fillProperties', false);
+  jsf.option('alwaysFakeOptionals', true);
+
   React.useEffect(() => {
     fetchTopicMessageSchema(clusterName, topicName);
   }, []);
   React.useEffect(() => {
     if (schemaIsFetched && messageSchema) {
-      const validateKey = convertToYup(JSON.parse(messageSchema.key.schema));
-      if (validateKey) {
-        setKeyExampleValue(
-          JSON.stringify(getFakeData(validateKey), null, '\t')
-        );
-        setSchemaIsReady(true);
-      }
-
-      const validateContent = convertToYup(
-        JSON.parse(messageSchema.value.schema)
+      setKeyExampleValue(
+        JSON.stringify(
+          jsf.generate(JSON.parse(messageSchema.key.schema)),
+          null,
+          '\t'
+        )
       );
-      if (validateContent) {
-        setContentExampleValue(
-          JSON.stringify(getFakeData(validateContent), null, '\t')
-        );
-        setSchemaIsReady(true);
-      }
-
-      if (!validateKey && !validateContent) {
-        setSchemaIsReady(true);
-      }
+      setContentExampleValue(
+        JSON.stringify(
+          jsf.generate(JSON.parse(messageSchema.value.schema)),
+          null,
+          '\t'
+        )
+      );
+      setSchemaIsReady(true);
     }
   }, [schemaIsFetched]);
 
@@ -95,7 +91,7 @@ const SendMessage: React.FC<Props> = ({
         key,
         content,
         messageSchema,
-        setSchemaErrorString
+        setSchemaErrors
       );
 
       if (messageIsValid) {
@@ -188,9 +184,9 @@ const SendMessage: React.FC<Props> = ({
             />
           </div>
         </div>
-        {schemaErrorString && (
+        {schemaErrors && (
           <div className="mb-4">
-            {schemaErrorString.split('-').map((err) => (
+            {schemaErrors.map((err) => (
               <p className="help is-danger" key={err}>
                 {err}
               </p>

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

@@ -5,16 +5,13 @@ import SendMessage, {
 import { MessageSchemaSourceEnum } from 'generated-sources';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
-const mockConvertToYup = jest
-  .fn()
-  .mockReturnValue(() => ({ validate: () => true }));
-
-jest.mock('yup-faker', () => ({
-  getFakeData: () => ({
+jest.mock('json-schema-faker', () => ({
+  generate: () => ({
     f1: -93251214,
     schema: 'enim sit in fugiat dolor',
     f2: 'deserunt culpa sunt',
   }),
+  option: jest.fn(),
 }));
 
 const setupWrapper = (props?: Partial<Props>) => (
@@ -28,7 +25,7 @@ const setupWrapper = (props?: Partial<Props>) => (
         name: 'key',
         source: MessageSchemaSourceEnum.SCHEMA_REGISTRY,
         schema: `{
-          "$schema": "http://json-schema.org/draft-07/schema#",
+          "$schema": "https://json-schema.org/draft/2020-12/schema",
           "$id": "http://example.com/myURI.schema.json",
           "title": "TestRecord",
           "type": "object",
@@ -51,7 +48,7 @@ const setupWrapper = (props?: Partial<Props>) => (
         name: 'value',
         source: MessageSchemaSourceEnum.SCHEMA_REGISTRY,
         schema: `{
-          "$schema": "http://json-schema.org/draft-07/schema#",
+          "$schema": "https://json-schema.org/draft/2020-12/schema",
           "$id": "http://example.com/myURI1.schema.json",
           "title": "TestRecord",
           "type": "object",
@@ -116,7 +113,6 @@ describe('SendMessage', () => {
 
   describe('when schema is fetched', () => {
     it('calls sendTopicMessage on submit', async () => {
-      jest.mock('json-schema-yup-transformer', () => mockConvertToYup);
       jest.mock('../validateMessage', () => jest.fn().mockReturnValue(true));
       const mockSendTopicMessage = jest.fn();
       render(

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

@@ -5,7 +5,7 @@ export const testSchema = {
     name: 'key',
     source: MessageSchemaSourceEnum.SCHEMA_REGISTRY,
     schema: `{
-  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "http://example.com/myURI.schema.json",
   "title": "TestRecord",
   "type": "object",
@@ -28,7 +28,7 @@ export const testSchema = {
     name: 'value',
     source: MessageSchemaSourceEnum.SCHEMA_REGISTRY,
     schema: `{
-  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "http://example.com/myURI1.schema.json",
   "title": "TestRecord",
   "type": "object",

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

@@ -1,57 +1,54 @@
 import { TopicMessageSchema } from 'generated-sources';
-import convertToYup from 'json-schema-yup-transformer';
+import Ajv from 'ajv/dist/2020';
 
 const validateMessage = async (
   key: string,
   content: string,
   messageSchema: TopicMessageSchema | undefined,
-  setSchemaErrorString: React.Dispatch<React.SetStateAction<string>>
+  setSchemaErrors: React.Dispatch<React.SetStateAction<string[]>>
 ): Promise<boolean> => {
-  setSchemaErrorString('');
+  setSchemaErrors([]);
+  const ajv = new Ajv();
   try {
     if (messageSchema) {
-      const validateKey = convertToYup(JSON.parse(messageSchema.key.schema));
-      const validateContent = convertToYup(
-        JSON.parse(messageSchema.value.schema)
-      );
       let keyIsValid = false;
       let contentIsValid = false;
 
       try {
-        await validateKey?.validate(JSON.parse(key));
-        keyIsValid = true;
-      } catch (err) {
-        let errorString = '';
-        if (err.errors) {
-          err.errors.forEach((e: string) => {
-            errorString = errorString ? `${errorString}-Key ${e}` : `Key ${e}`;
-          });
-        } else {
-          errorString = errorString
-            ? `${errorString}-Key ${err.message}`
-            : `Key ${err.message}`;
+        const validateKey = ajv.compile(JSON.parse(messageSchema.key.schema));
+        keyIsValid = validateKey(JSON.parse(key));
+        if (!keyIsValid) {
+          const errorString: string[] = [];
+          if (validateKey.errors) {
+            validateKey.errors.forEach((e) => {
+              errorString.push(
+                `${e.schemaPath.replace('#', 'Key')} ${e.message}`
+              );
+            });
+            setSchemaErrors((e) => [...e, ...errorString]);
+          }
         }
-
-        setSchemaErrorString((e) => (e ? `${e}-${errorString}` : errorString));
+      } catch (err) {
+        setSchemaErrors((e) => [...e, `Key ${err.message}`]);
       }
       try {
-        await validateContent?.validate(JSON.parse(content));
-        contentIsValid = true;
-      } catch (err) {
-        let errorString = '';
-        if (err.errors) {
-          err.errors.forEach((e: string) => {
-            errorString = errorString
-              ? `${errorString}-Content ${e}`
-              : `Content ${e}`;
-          });
-        } else {
-          errorString = errorString
-            ? `${errorString}-Content ${err.message}`
-            : `Content ${err.message}`;
+        const validateContent = ajv.compile(
+          JSON.parse(messageSchema.value.schema)
+        );
+        contentIsValid = validateContent(JSON.parse(content));
+        if (!contentIsValid) {
+          const errorString: string[] = [];
+          if (validateContent.errors) {
+            validateContent.errors.forEach((e) => {
+              errorString.push(
+                `${e.schemaPath.replace('#', 'Content')} ${e.message}`
+              );
+            });
+            setSchemaErrors((e) => [...e, ...errorString]);
+          }
         }
-
-        setSchemaErrorString((e) => (e ? `${e}-${errorString}` : errorString));
+      } catch (err) {
+        setSchemaErrors((e) => [...e, `Content ${err.message}`]);
       }
 
       if (keyIsValid && contentIsValid) {
@@ -59,7 +56,7 @@ const validateMessage = async (
       }
     }
   } catch (err) {
-    setSchemaErrorString((e) => (e ? `${e}-${err.message}` : err.message));
+    setSchemaErrors((e) => (e ? `${e}-${err.message}` : err.message));
   }
   return false;
 };