console: add types generator in add new action form

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6092 GitOrigin-RevId: 993de137c99d2af186d8f5088b3db6dfcb46a1e1
2024-09-11 10:46:25 +03:00 · 2022-10-04 20:42:32 +02:00 · 2022-10-04 20:42:32 +02:00 · bfca6d782d
commit bfca6d782d
parent bf991be955
10 changed files with 464 additions and 29 deletions
--- a/console/package-lock.json
+++ b/console/package-lock.json
@ -25,6 +25,7 @@
        "@sentry/react": "7.11.1",
        "@sentry/tracing": "7.11.1",
        "@types/lodash.get": "^4.4.6",
+        "@walmartlabs/json-to-simple-graphql-schema": "^3.0.1",
        "@xstate/react": "^2.0.0",
        "ace-builds": "^1.4.11",
        "antd": "4.18.6",
@ -35,6 +36,7 @@
        "case-sensitive-paths-webpack-plugin": "^2.3.0",
        "clsx": "1.1.1",
        "codemirror": "5.51.0",
+        "format-graphql": "^1.4.0",
        "graphiql": "1.0.0-alpha.0",
        "graphiql-code-exporter": "2.0.8",
        "graphiql-explorer": "0.6.2",
@ -11827,6 +11829,91 @@
        "url": "https://opencollective.com/typescript-eslint"
      }
    },
+    "node_modules/@walmartlabs/json-to-simple-graphql-schema": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@walmartlabs/json-to-simple-graphql-schema/-/json-to-simple-graphql-schema-3.0.1.tgz",
+      "integrity": "sha512-fHO2Zxwr76eQbttR7W+i2QFmYE4m+Dpk1SIXAkJLmaxDbYzSIUAn3hoCvhuCAXMGwvPcIQTDfjx/2dRBtbHbNA==",
+      "dependencies": {
+        "lodash.isboolean": "3.0.3",
+        "lodash.isinteger": "4.0.4",
+        "lodash.isnumber": "3.0.3",
+        "lodash.isobject": "3.0.2",
+        "lodash.set": "4.3.2",
+        "pascal-case": "3.1.2",
+        "util": "0.12.4",
+        "yargs": "17.3.0"
+      },
+      "bin": {
+        "json-to-simple-graphql-schema": "app.js"
+      }
+    },
+    "node_modules/@walmartlabs/json-to-simple-graphql-schema/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/@walmartlabs/json-to-simple-graphql-schema/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@walmartlabs/json-to-simple-graphql-schema/node_modules/util": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
+      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "safe-buffer": "^5.1.2",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "node_modules/@walmartlabs/json-to-simple-graphql-schema/node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@walmartlabs/json-to-simple-graphql-schema/node_modules/yargs": {
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.0.tgz",
+      "integrity": "sha512-GQl1pWyDoGptFPJx9b9L6kmR33TGusZvXIZUT+BOz9f7X2L94oeAskFYLEg/FkhV06zZPBYLvLZRWeYId29lew==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@walmartlabs/json-to-simple-graphql-schema/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/@webassemblyjs/ast": {
      "version": "1.8.5",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@ -13289,7 +13376,6 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@ -18759,6 +18845,7 @@
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "devOptional": true,
      "dependencies": {
        "prr": "~1.0.1"
      },
@ -21088,7 +21175,6 @@
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
      "dependencies": {
        "is-callable": "^1.1.3"
      }
@ -21299,6 +21385,29 @@
      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
      "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A=="
    },
+    "node_modules/format-graphql": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/format-graphql/-/format-graphql-1.4.0.tgz",
+      "integrity": "sha512-RyhM4rJAqgJ2nb9X7VzCPt+LuhPDjd2W4JtAsSWFzKd4RReVARE00SILdSgA8eDSby8jB3LclhKPFQF7YTQxfg==",
+      "dependencies": {
+        "graphql": "^15.1.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "format-graphql": "dist/bin/index.js"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
+    "node_modules/format-graphql/node_modules/graphql": {
+      "version": "15.8.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.8.0.tgz",
+      "integrity": "sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
    "node_modules/formdata-node": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
@ -23672,7 +23781,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "has-tostringtag": "^1.0.0"
@ -23950,7 +24058,6 @@
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dev": true,
      "dependencies": {
        "has-tostringtag": "^1.0.0"
      },
@ -24245,7 +24352,6 @@
      "version": "1.1.9",
      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
-      "dev": true,
      "dependencies": {
        "available-typed-arrays": "^1.0.5",
        "call-bind": "^1.0.2",
@ -27538,6 +27644,11 @@
      "integrity": "sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw==",
      "dev": true
    },
+    "node_modules/lodash.set": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+      "integrity": "sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg=="
+    },
    "node_modules/lodash.uniq": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@ -28363,6 +28474,7 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "devOptional": true,
      "bin": {
        "mime": "cli.js"
      },
@ -32850,7 +32962,8 @@
    "node_modules/prr": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "devOptional": true
    },
    "node_modules/psl": {
      "version": "1.9.0",
@ -41558,7 +41671,6 @@
      "version": "1.1.8",
      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
-      "dev": true,
      "dependencies": {
        "available-typed-arrays": "^1.0.5",
        "call-bind": "^1.0.2",
@ -41638,7 +41750,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
      "dependencies": {
        "ansi-styles": "^4.0.0",
        "string-width": "^4.1.0",
@ -41655,7 +41766,6 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
      "dependencies": {
        "color-convert": "^2.0.1"
      },
@ -41670,7 +41780,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
      "dependencies": {
        "ansi-regex": "^5.0.1"
      },
@ -50928,6 +51037,78 @@
        "eslint-visitor-keys": "^2.0.0"
      }
    },
+    "@walmartlabs/json-to-simple-graphql-schema": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@walmartlabs/json-to-simple-graphql-schema/-/json-to-simple-graphql-schema-3.0.1.tgz",
+      "integrity": "sha512-fHO2Zxwr76eQbttR7W+i2QFmYE4m+Dpk1SIXAkJLmaxDbYzSIUAn3hoCvhuCAXMGwvPcIQTDfjx/2dRBtbHbNA==",
+      "requires": {
+        "lodash.isboolean": "3.0.3",
+        "lodash.isinteger": "4.0.4",
+        "lodash.isnumber": "3.0.3",
+        "lodash.isobject": "3.0.2",
+        "lodash.set": "4.3.2",
+        "pascal-case": "3.1.2",
+        "util": "0.12.4",
+        "yargs": "17.3.0"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "util": {
+          "version": "0.12.4",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
+          "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "is-arguments": "^1.0.4",
+            "is-generator-function": "^1.0.7",
+            "is-typed-array": "^1.1.3",
+            "safe-buffer": "^5.1.2",
+            "which-typed-array": "^1.1.2"
+          }
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+        },
+        "yargs": {
+          "version": "17.3.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.0.tgz",
+          "integrity": "sha512-GQl1pWyDoGptFPJx9b9L6kmR33TGusZvXIZUT+BOz9f7X2L94oeAskFYLEg/FkhV06zZPBYLvLZRWeYId29lew==",
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.3",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^21.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
+        }
+      }
+    },
    "@webassemblyjs/ast": {
      "version": "1.8.5",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@ -52110,8 +52291,7 @@
    "available-typed-arrays": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "dev": true
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
    },
    "aws-sign2": {
      "version": "0.7.0",
@ -56490,6 +56670,7 @@
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "devOptional": true,
      "requires": {
        "prr": "~1.0.1"
      }
@ -58288,7 +58469,6 @@
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
      "requires": {
        "is-callable": "^1.1.3"
      }
@ -58452,6 +58632,22 @@
      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
      "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A=="
    },
+    "format-graphql": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/format-graphql/-/format-graphql-1.4.0.tgz",
+      "integrity": "sha512-RyhM4rJAqgJ2nb9X7VzCPt+LuhPDjd2W4JtAsSWFzKd4RReVARE00SILdSgA8eDSby8jB3LclhKPFQF7YTQxfg==",
+      "requires": {
+        "graphql": "^15.1.0",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "15.8.0",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.8.0.tgz",
+          "integrity": "sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw=="
+        }
+      }
+    },
    "formdata-node": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
@ -60257,7 +60453,6 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "has-tostringtag": "^1.0.0"
@ -60454,7 +60649,6 @@
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dev": true,
      "requires": {
        "has-tostringtag": "^1.0.0"
      }
@ -60652,7 +60846,6 @@
      "version": "1.1.9",
      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
-      "dev": true,
      "requires": {
        "available-typed-arrays": "^1.0.5",
        "call-bind": "^1.0.2",
@ -63190,6 +63383,11 @@
      "integrity": "sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw==",
      "dev": true
    },
+    "lodash.set": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+      "integrity": "sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg=="
+    },
    "lodash.uniq": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@ -63842,7 +64040,8 @@
    "mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "devOptional": true
    },
    "mime-db": {
      "version": "1.52.0",
@ -67288,7 +67487,8 @@
    "prr": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "devOptional": true
    },
    "psl": {
      "version": "1.9.0",
@ -74078,7 +74278,6 @@
      "version": "1.1.8",
      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
-      "dev": true,
      "requires": {
        "available-typed-arrays": "^1.0.5",
        "call-bind": "^1.0.2",
@ -74146,7 +74345,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
      "requires": {
        "ansi-styles": "^4.0.0",
        "string-width": "^4.1.0",
@ -74157,7 +74355,6 @@
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
@ -74166,7 +74363,6 @@
          "version": "6.0.1",
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
          "requires": {
            "ansi-regex": "^5.0.1"
          }
--- a/console/package.json
+++ b/console/package.json
@ -93,6 +93,7 @@
    "@sentry/react": "7.11.1",
    "@sentry/tracing": "7.11.1",
    "@types/lodash.get": "^4.4.6",
+    "@walmartlabs/json-to-simple-graphql-schema": "^3.0.1",
    "@xstate/react": "^2.0.0",
    "ace-builds": "^1.4.11",
    "antd": "4.18.6",
@ -103,6 +104,7 @@
    "case-sensitive-paths-webpack-plugin": "^2.3.0",
    "clsx": "1.1.1",
    "codemirror": "5.51.0",
+    "format-graphql": "^1.4.0",
    "graphiql": "1.0.0-alpha.0",
    "graphiql-code-exporter": "2.0.8",
    "graphiql-explorer": "0.6.2",
--- a/console/src/components/Services/Actions/Common/components/ActionEditor.tsx
+++ b/console/src/components/Services/Actions/Common/components/ActionEditor.tsx
@ -1,6 +1,8 @@
 import React from 'react';
 import { GraphQLError } from 'graphql';
 import { IconTooltip } from '@/new-components/Tooltip';
+import { Button } from '@/new-components/Button';
+import { FaMagic } from 'react-icons/fa';
 import HandlerEditor from './HandlerEditor';
 import ExecutionEditor from './ExecutionEditor';
 import HeaderConfEditor from './HeaderConfEditor';
@ -11,6 +13,7 @@ import { Nullable } from '../../../../Common/utils/tsUtils';
 import ActionDefIcon from '../../../../Common/Icons/ActionDef';
 import TypesDefIcon from '../../../../Common/Icons/TypesDef';
 import { inputStyles } from '../../constants';
+import { TypeGeneratorModal } from './TypeGeneratorModal/TypeGeneratorModal';

 type ActionEditorProps = {
  handler: string;
@ -75,6 +78,8 @@ const ActionEditor: React.FC<ActionEditorProps> = ({
    timer: actionParseTimer,
  } = actionDefinition;

+  const [isTypesGeneratorOpen, setIsTypesGeneratorOpen] = React.useState(false);
+
  return (
    <>
      <h2 className="text-lg font-semibold mb-xs flex items-center">
@ -157,6 +162,21 @@ const ActionEditor: React.FC<ActionEditorProps> = ({

          <GlobalTypesViewer />
        </div>
+
+        <TypeGeneratorModal
+          isOpen={isTypesGeneratorOpen}
+          onInsertTypes={types =>
+            typeDefinitionOnChange(types, null, null, null)
+          }
+          onClose={() => setIsTypesGeneratorOpen(false)}
+        />
+
+        <Button
+          icon={<FaMagic />}
+          onClick={() => setIsTypesGeneratorOpen(true)}
+        >
+          Type generator
+        </Button>
      </div>

      <HandlerEditor
--- a/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/TypeGeneratorForm.tsx
+++ b/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/TypeGeneratorForm.tsx
@ -0,0 +1,126 @@
+import React, { useEffect } from 'react';
+import z from 'zod';
+import { CodeEditorField } from '@/new-components/Form';
+import { formatSdl } from 'format-graphql';
+import { jsonToSchema } from '@walmartlabs/json-to-simple-graphql-schema/lib';
+import { useFormContext } from 'react-hook-form';
+import { useDebouncedEffect } from '@/hooks/useDebounceEffect';
+import { SchemaType } from './types';
+
+export const schema = z.object({
+  jsonInput: z.string(),
+  graphqlInput: z.string(),
+  jsonOutput: z.string(),
+  graphqlOutput: z.string(),
+});
+
+const editorOptions = {
+  minLines: 10,
+  maxLines: 10,
+  showLineNumbers: true,
+  useSoftTabs: true,
+};
+
+export const TypeGeneratorForm = (props: {
+  setValues: (values: SchemaType) => void;
+}) => {
+  const { setValues } = props;
+  const { watch, setValue, setError, clearErrors } = useFormContext();
+  const jsonInput = watch('jsonInput');
+  const jsonOutput = watch('jsonOutput');
+  const graphqlInput = watch('graphqlInput');
+  const graphqlOutput = watch('graphqlOutput');
+
+  useEffect(() => {
+    setValues({
+      jsonInput,
+      jsonOutput,
+      graphqlInput,
+      graphqlOutput,
+    });
+  }, [jsonInput, jsonOutput, graphqlInput, graphqlOutput]);
+
+  useDebouncedEffect(
+    () => {
+      clearErrors();
+      try {
+        if (jsonInput) {
+          const schema = jsonToSchema({
+            jsonInput: jsonInput,
+            baseType: 'SampleInput',
+          });
+          setValue(
+            'graphqlInput',
+            formatSdl(schema.value.replace(/type\s(.*)\s\{/g, 'input $1 {'))
+          );
+        }
+      } catch (e) {
+        setError('jsonInput', {
+          message: 'Invalid JSON',
+        });
+      }
+
+      try {
+        if (jsonOutput) {
+          const schema = jsonToSchema({
+            jsonInput: jsonOutput,
+            baseType: 'SampleOutput',
+          });
+          setValue('graphqlOutput', formatSdl(schema.value));
+        }
+      } catch (e) {
+        setError('jsonOutput', {
+          message: 'Invalid JSON',
+        });
+      }
+    },
+    400,
+    [jsonInput, jsonOutput, clearErrors, setError, setValue]
+  );
+
+  return (
+    <div>
+      <div className="flex">
+        <CodeEditorField
+          noErrorPlaceholder
+          name="jsonInput"
+          label="Sample Request (JSON)"
+          tooltip="Enter a sample request in JSON format to generate the input type"
+          editorOptions={editorOptions}
+          editorProps={{
+            className: 'rounded-r-none',
+          }}
+        />
+        <CodeEditorField
+          name="graphqlInput"
+          label="&nbsp;"
+          tooltip=""
+          editorOptions={editorOptions}
+          editorProps={{
+            className: 'rounded-l-none bg-slate-100',
+          }}
+        />
+      </div>
+      <div className="flex">
+        <CodeEditorField
+          name="jsonOutput"
+          label="Sample Response (JSON)"
+          tooltip="Enter a sample response in JSON format to generate the output type"
+          editorOptions={editorOptions}
+          editorProps={{
+            className: 'rounded-r-none',
+          }}
+        />
+        <CodeEditorField
+          name="graphqlOutput"
+          label="&nbsp;"
+          tooltip=""
+          editorOptions={editorOptions}
+          editorProps={{
+            className: 'rounded-l-none bg-slate-100',
+          }}
+        />
+      </div>
+    </div>
+  );
+};
--- a/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/TypeGeneratorModal.tsx
+++ b/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/TypeGeneratorModal.tsx
@ -0,0 +1,71 @@
+import { Dialog } from '@/new-components/Dialog';
+import { Form } from '@/new-components/Form';
+import { SchemaType } from './types';
+import React from 'react';
+import { schema, TypeGeneratorForm } from './TypeGeneratorForm';
+
+interface TypeGeneratorModalProps {
+  onInsertTypes: (types: string) => void;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export const TypeGeneratorModal = (props: TypeGeneratorModalProps) => {
+  const { isOpen, onClose, onInsertTypes } = props;
+  const [values, setValues] = React.useState<SchemaType>({
+    jsonInput: JSON.stringify({
+      username: '',
+      password: '',
+    }),
+    graphqlInput: '',
+    jsonOutput: JSON.stringify({
+      accessToken: '',
+    }),
+    graphqlOutput: '',
+  });
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      size="xl"
+      footer={
+        <Dialog.Footer
+          onSubmit={() => {
+            onInsertTypes(
+              `${values?.graphqlInput ?? ''}\n${
+                values?.graphqlOutput ?? ''
+              }`.trim()
+            );
+            onClose();
+          }}
+          onClose={onClose}
+          callToDeny="Cancel"
+          callToAction="Insert Types"
+        />
+      }
+      title="Type Generator"
+      hasBackdrop
+      onClose={onClose}
+    >
+      <div className="px-sm">
+        <p className="text-muted mb-6">
+          Generate your GraphQL Types from a sample of your request and response
+          body.
+        </p>
+        <Form
+          options={{
+            defaultValues: values,
+          }}
+          className="pl-0 pr-0"
+          schema={schema}
+          onSubmit={() => {}}
+        >
+          {() => <TypeGeneratorForm setValues={setValues} />}
+        </Form>
+      </div>
+    </Dialog>
+  );
+};
--- a/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/extenrnal.types.d.ts
+++ b/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/extenrnal.types.d.ts
@ -0,0 +1,9 @@
+declare module '@walmartlabs/json-to-simple-graphql-schema/lib' {
+  export function jsonToSchema(options: {
+    jsonInput: string;
+    baseType: string;
+  }): { value: string };
+}
+declare module 'format-graphql' {
+  export function formatSdl(query: string): string;
+}
--- a/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/types.ts
+++ b/console/src/components/Services/Actions/Common/components/TypeGeneratorModal/types.ts
@ -0,0 +1,4 @@
+import z from 'zod';
+import { schema } from './TypeGeneratorForm';
+
+export type SchemaType = z.infer<typeof schema>;
--- a/console/src/new-components/Dialog/Dialog.tsx
+++ b/console/src/new-components/Dialog/Dialog.tsx
@ -1,7 +1,7 @@
 import React from 'react';
+import clsx from 'clsx';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { FaTimes } from 'react-icons/fa';
-import clsx from 'clsx';
 import { Button } from '../Button/Button';

 export type FooterProps = {
@ -47,12 +47,13 @@ const Backdrop = () => (
  <RadixDialog.Overlay className="fixed top-0 left-0 h-full w-full bg-gray-900/90 backdrop-blur-sm z-[100]" />
 );

-type DialogSize = 'sm' | 'md' | 'lg';
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl';

 const dialogSizing: Record<DialogSize, string> = {
  sm: 'max-w-xl',
  md: 'max-w-2xl',
  lg: 'max-w-3xl',
+  xl: 'max-w-4xl',
 };

 export type DialogProps = {
--- a/console/src/new-components/Form/CodeEditorField.tsx
+++ b/console/src/new-components/Form/CodeEditorField.tsx
@ -159,7 +159,6 @@ export const CodeEditorField: React.FC<CodeEditorFieldProps> = ({
                      },
                    },
                  ]}
-                  editorProps={editorProps}
                  setOptions={editorOptions}
                  data-test={dataTest}
                  className={clsx(
@ -169,7 +168,8 @@ export const CodeEditorField: React.FC<CodeEditorFieldProps> = ({
                      : 'border-gray-300',
                    disabled
                      ? 'bg-gray-200 border-gray-200 hover:border-gray-200'
-                      : 'hover:border-gray-400'
+                      : 'hover:border-gray-400',
+                    editorProps?.className
                  )}
                  data-testid={name}
                />
@ -177,8 +177,14 @@ export const CodeEditorField: React.FC<CodeEditorFieldProps> = ({
            );
          }}
        />
+        {/* This is to let form errors to appear below the tip */}
+        {tipState === 'ANY' && (
+          <div className="bg-legacybg top-full left-1 text-gray-600 text-sm mt-1">
+            {' '}
+          </div>
+        )}
        {tipState === 'ESC' && (
-          <div className="absolute bg-legacybg top-full left-1 text-gray-600 text-sm mt-1">
+          <div className="bg-legacybg top-full left-1 text-gray-600 text-sm mt-1">
            Tip:{' '}
            <strong>
              Press <em>Esc</em> key
@ -187,7 +193,7 @@ export const CodeEditorField: React.FC<CodeEditorFieldProps> = ({
          </div>
        )}
        {tipState === 'TAB' && (
-          <div className="absolute bg-legacybg top-full left-1 text-gray-600 text-sm mt-1">
+          <div className="bg-legacybg top-full left-1 text-gray-600 text-sm mt-1">
            Tip: Press <em>Esc</em> key then{' '}
            <strong>
              navigate with <em>Tab</em>
--- a/console/src/new-components/Tooltip/Tooltip.tsx
+++ b/console/src/new-components/Tooltip/Tooltip.tsx
@ -38,7 +38,7 @@ export const Tooltip: React.VFC<TooltipProps> = ({
      <RadixTooltip.Portal>
        <RadixTooltip.Content
          side={side}
-          className="bg-gray-800 p-sm text-white rounded max-w-lg"
+          className="bg-gray-800 p-sm text-white rounded max-w-lg z-[102]"
        >
          <RadixTooltip.Arrow
            className="fill-current text-gray-800"