mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-04 04:26:11 +00:00
Merge branch 'heads/main' into daniel/kms-sign-verify
This commit is contained in:
Daniel Hougaard
Generated
+341
-3
@@ -23,6 +23,7 @@
|
||||
"@hcaptcha/react-hcaptcha": "^1.11.0",
|
||||
"@headlessui/react": "^1.7.19",
|
||||
"@hookform/resolvers": "^3.9.1",
|
||||
"@lexical/react": "^0.29.0",
|
||||
"@lottiefiles/dotlottie-react": "^0.12.0",
|
||||
"@octokit/rest": "^21.0.2",
|
||||
"@peculiar/x509": "^1.12.3",
|
||||
@@ -66,6 +67,7 @@
|
||||
"jspdf": "^2.5.2",
|
||||
"jsrp": "^0.2.4",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lexical": "^0.29.0",
|
||||
"ms": "^2.1.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"picomatch": "^4.0.2",
|
||||
@@ -1570,6 +1572,260 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/clipboard": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.29.0.tgz",
|
||||
"integrity": "sha512-llxZosYCwH13p2GfPfhAinukdvAZYxWuwf5md107X80hsE8TQJj25unjqTwRKQ+w/wD+hpmBMziU8+K/WTitWQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/html": "0.29.0",
|
||||
"@lexical/list": "0.29.0",
|
||||
"@lexical/selection": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/code": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/code/-/code-0.29.0.tgz",
|
||||
"integrity": "sha512-yKGzoKpyIO39Xf7OKLPpoCE5V8mTDCM3l3CDHZR3X1gM/VZQzf4jAiO3b06y9YkQ2fM8kqwchYu87wGvs8/iIQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0",
|
||||
"prismjs": "^1.30.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/devtools-core": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/devtools-core/-/devtools-core-0.29.0.tgz",
|
||||
"integrity": "sha512-uUq0m9ql/7mthp7Ho1vnG7Id6imQ5kD5mxUhX2lmgHretS+yAHGsGsGiPIVHdPWeVmUb2n4IVDJ+cJbUsUjQJw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/html": "0.29.0",
|
||||
"@lexical/link": "0.29.0",
|
||||
"@lexical/mark": "0.29.0",
|
||||
"@lexical/table": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=17.x",
|
||||
"react-dom": ">=17.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/dragon": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/dragon/-/dragon-0.29.0.tgz",
|
||||
"integrity": "sha512-Zaky2jd/Pp1blAZqPeGNdyhxnVL4lwVjbWPxhfS1gbW4Q5CBQ3aD3B0T4ljiKfmRNJm004LJ9q7KjhlRbREvZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/hashtag": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/hashtag/-/hashtag-0.29.0.tgz",
|
||||
"integrity": "sha512-fa7s0Yi2RKz/GvgT5XU9fborx6VPU3VtvvEPaIXgyd6zXZRiOhD9rGypwB3oj4fMK1ndx2dX0m7SwhMJo48D8w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/history": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/history/-/history-0.29.0.tgz",
|
||||
"integrity": "sha512-OrCwZycp/yaq63mw511NutkwAB+W6WSchG1xTxlLh6nbc8jnbvKhCf4CGbnrvlhD7hTuzxJ8FI9/2M/2zv/mNQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/html": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.29.0.tgz",
|
||||
"integrity": "sha512-+jV6ijppOpxpUGeXkGssXJbsAmFALfeLrgbM0xuZbxZ7RgYZ+5Atn00WjSno7+JV5EOuRkYmCNtS1tiHtXMY1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/selection": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/link": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/link/-/link-0.29.0.tgz",
|
||||
"integrity": "sha512-wGbKRF0x/6ZQHuCfr8m8qD1J0R1kFmWINBG2A1hUXPDf7UY5qm/nS2oKNDGpjiDMGwkVZ7n7WfzeBGO+KRe/Lg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/list": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.29.0.tgz",
|
||||
"integrity": "sha512-sWiof+i2ff8rL7KxJ3dxHLwyJfX423e1EVLmAdQEOPhyZJiNbeLTSNhNGsZ8FjFoBwvTTEDwuQZm3iT3hliKOg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/selection": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/mark": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/mark/-/mark-0.29.0.tgz",
|
||||
"integrity": "sha512-UB3x6pyUdpZHRqF4tiajLnC1+Umvt7x8Rkkdi29aNNvzIWniVwGkBOlmvFus7x+4dOV1D1fydwiP4m38nGgLDw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/markdown": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/markdown/-/markdown-0.29.0.tgz",
|
||||
"integrity": "sha512-4Od8WoDoviv9DxJZVgrIORTIAzyoGOpztbGbIBXguGmwvy7NnHQDh9fZYIYRrdI1Awp1VVGdJ3ku/7KTgSOoRw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/code": "0.29.0",
|
||||
"@lexical/link": "0.29.0",
|
||||
"@lexical/list": "0.29.0",
|
||||
"@lexical/rich-text": "0.29.0",
|
||||
"@lexical/text": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/offset": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/offset/-/offset-0.29.0.tgz",
|
||||
"integrity": "sha512-VyD2Ff3rBJpo++Fxvi3MNYmDELa+9nA0EgXqGRNb3MvRehRjHbaDbymtLMMHIwvbkF5lnra+ubStcTRQmoQxXw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/overflow": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.29.0.tgz",
|
||||
"integrity": "sha512-IzH3M652Ej2gB2sK65N3yTgyiQAa3I3tqKbSnBRiXu/+isxHoCy/qRr9/kL63uy7zhGvgV+EYsoffQCawIFt8Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/plain-text": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.29.0.tgz",
|
||||
"integrity": "sha512-F5C3meDb2HmO0NmKJBVRkjmX9PNln6O1jXU/APJuSFBdvfcIWSY58ncHR4zy2M5LF1Q5PQMWyIay9p+SqOtY5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/clipboard": "0.29.0",
|
||||
"@lexical/selection": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/react": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/react/-/react-0.29.0.tgz",
|
||||
"integrity": "sha512-YMlnljW/jxmwSzsRv5UPatfOoMZXqxFmRIEltTUIQfrOFdqn+ssUtCpjE6xRD1oxD6KpSIekakzLs+y/8+7CuQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/devtools-core": "0.29.0",
|
||||
"@lexical/dragon": "0.29.0",
|
||||
"@lexical/hashtag": "0.29.0",
|
||||
"@lexical/history": "0.29.0",
|
||||
"@lexical/link": "0.29.0",
|
||||
"@lexical/list": "0.29.0",
|
||||
"@lexical/mark": "0.29.0",
|
||||
"@lexical/markdown": "0.29.0",
|
||||
"@lexical/overflow": "0.29.0",
|
||||
"@lexical/plain-text": "0.29.0",
|
||||
"@lexical/rich-text": "0.29.0",
|
||||
"@lexical/table": "0.29.0",
|
||||
"@lexical/text": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"@lexical/yjs": "0.29.0",
|
||||
"lexical": "0.29.0",
|
||||
"react-error-boundary": "^3.1.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=17.x",
|
||||
"react-dom": ">=17.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/rich-text": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.29.0.tgz",
|
||||
"integrity": "sha512-fSKgXGxJUOWo7dwSTUYFVBNNk4pPN8norsZfdmKM1kGDS1/GKuVzlzHLKZ7rQb8RLD5a43p4ifEL+28P+q0Qqg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/clipboard": "0.29.0",
|
||||
"@lexical/selection": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/selection": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.29.0.tgz",
|
||||
"integrity": "sha512-lX9CRrXgKte65cozTHFXwUJ2fvZD92OEtos+YU+U40GJjf3NdheGeKDxDfOpF4AXrYRSszY7E0CzmIvuEs0p4A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/table": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.29.0.tgz",
|
||||
"integrity": "sha512-Jdj32kBDeJh/0dGaZB14JggnEIS956/cN7grnLr7cmhhVzDicvLMBENSXQVEJAQVcSIU4G9EvxC7GJZ9VgqDnA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/clipboard": "0.29.0",
|
||||
"@lexical/utils": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/text": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/text/-/text-0.29.0.tgz",
|
||||
"integrity": "sha512-QnNGr6ickTLk76o3PdxJjPwt//dpuh8idVfR73WdCIoAwkhiEPUxxTZERoMsudXj6O/lJ+/HhI61wVjLckYr3A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/utils": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.29.0.tgz",
|
||||
"integrity": "sha512-y2hhWQDjcXdplsAaQMuZx6ht9u1I4BV5NynA+WKoQ3h8vKxzeDnpCxVOK/zxU1R5dhM/nilnFu7uhvrSeEn+TQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/list": "0.29.0",
|
||||
"@lexical/selection": "0.29.0",
|
||||
"@lexical/table": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lexical/yjs": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@lexical/yjs/-/yjs-0.29.0.tgz",
|
||||
"integrity": "sha512-6IXWWlGkVJEzWP/+LcuKYJ9jmcFp8k7TT/jmz4V5gBD9Ut3swOGsIA/sQCtB9y7jad10csaDVmFdFzGNWKVH9A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lexical/offset": "0.29.0",
|
||||
"@lexical/selection": "0.29.0",
|
||||
"lexical": "0.29.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"yjs": ">=13.5.22"
|
||||
}
|
||||
},
|
||||
"node_modules/@lottiefiles/dotlottie-react": {
|
||||
"version": "0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.12.0.tgz",
|
||||
@@ -8871,6 +9127,17 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/isomorphic.js": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
|
||||
"integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "GitHub Sponsors ❤",
|
||||
"url": "https://github.com/sponsors/dmonad"
|
||||
}
|
||||
},
|
||||
"node_modules/iterator.prototype": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.4.tgz",
|
||||
@@ -9100,6 +9367,34 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lexical": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/lexical/-/lexical-0.29.0.tgz",
|
||||
"integrity": "sha512-eoBHUEn0LmExKeK6x2cFKU0FPaMk2Bc5HgiCzTiv5ymKtwWw7LeKcxaNPmLxRRdQpcWV1IMKjayAbw7Lt/Gu7w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lib0": {
|
||||
"version": "0.2.102",
|
||||
"resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.102.tgz",
|
||||
"integrity": "sha512-g70kydI0I1sZU0ChO8mBbhw0oUW/8U0GHzygpvEIx8k+jgOpqnTSb/E+70toYVqHxBhrERD21TwD5QcZJQ40ZQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"isomorphic.js": "^0.2.4"
|
||||
},
|
||||
"bin": {
|
||||
"0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
|
||||
"0gentesthtml": "bin/gentesthtml.js",
|
||||
"0serve": "bin/0serve.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"funding": {
|
||||
"type": "GitHub Sponsors ❤",
|
||||
"url": "https://github.com/sponsors/dmonad"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
@@ -10857,6 +11152,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/prismjs": {
|
||||
"version": "1.30.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
|
||||
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
|
||||
@@ -11142,6 +11446,22 @@
|
||||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-error-boundary": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
|
||||
"integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10",
|
||||
"npm": ">=6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||
@@ -13587,9 +13907,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.4.14",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
|
||||
"integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
|
||||
"version": "5.4.16",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.16.tgz",
|
||||
"integrity": "sha512-Y5gnfp4NemVfgOTDQAunSD4346fal44L9mszGGY/e+qxsRT5y1sMlS/8tiQ8AFAp+MFgYNSINdfEchJiPm41vQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -14131,6 +14451,24 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/yjs": {
|
||||
"version": "13.6.24",
|
||||
"resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.24.tgz",
|
||||
"integrity": "sha512-xn/pYLTZa3uD1uDG8lpxfLRo5SR/rp0frdASOl2a71aYNvUXdWcLtVL91s2y7j+Q8ppmjZ9H3jsGVgoFMbT2VA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"lib0": "^0.2.99"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0",
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "GitHub Sponsors ❤",
|
||||
"url": "https://github.com/sponsors/dmonad"
|
||||
}
|
||||
},
|
||||
"node_modules/yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
"@hcaptcha/react-hcaptcha": "^1.11.0",
|
||||
"@headlessui/react": "^1.7.19",
|
||||
"@hookform/resolvers": "^3.9.1",
|
||||
"@lexical/react": "^0.29.0",
|
||||
"@lottiefiles/dotlottie-react": "^0.12.0",
|
||||
"@octokit/rest": "^21.0.2",
|
||||
"@peculiar/x509": "^1.12.3",
|
||||
@@ -70,6 +71,7 @@
|
||||
"jspdf": "^2.5.2",
|
||||
"jsrp": "^0.2.4",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lexical": "^0.29.0",
|
||||
"ms": "^2.1.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"picomatch": "^4.0.2",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 685 KiB |
@@ -0,0 +1,79 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import { SecretRotationV2Form } from "@app/components/secret-rotations-v2/forms";
|
||||
import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
|
||||
import { SecretRotationV2Select } from "@app/components/secret-rotations-v2/SecretRotationV2Select";
|
||||
import { Modal, ModalContent } from "@app/components/v2";
|
||||
import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
|
||||
import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
|
||||
|
||||
type SharedProps = {
|
||||
secretPath: string;
|
||||
environment?: string;
|
||||
environments?: WorkspaceEnv[];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
} & SharedProps;
|
||||
|
||||
type ContentProps = {
|
||||
onComplete: (secretRotation: TSecretRotationV2) => void;
|
||||
selectedRotation: SecretRotation | null;
|
||||
setSelectedRotation: (selectedRotation: SecretRotation | null) => void;
|
||||
} & SharedProps;
|
||||
|
||||
const Content = ({ setSelectedRotation, selectedRotation, ...props }: ContentProps) => {
|
||||
if (selectedRotation) {
|
||||
return (
|
||||
<SecretRotationV2Form
|
||||
onCancel={() => setSelectedRotation(null)}
|
||||
type={selectedRotation}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <SecretRotationV2Select onSelect={setSelectedRotation} />;
|
||||
};
|
||||
|
||||
export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }: Props) => {
|
||||
const [selectedRotation, setSelectedRotation] = useState<SecretRotation | null>(null);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setSelectedRotation(null);
|
||||
onOpenChange(open);
|
||||
}}
|
||||
>
|
||||
<ModalContent
|
||||
title={
|
||||
selectedRotation ? (
|
||||
<SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
|
||||
) : (
|
||||
"Add Secret Rotation"
|
||||
)
|
||||
}
|
||||
onPointerDownOutside={(e) => e.preventDefault()}
|
||||
className={selectedRotation ? "max-w-2xl" : "max-w-3xl"}
|
||||
subTitle={
|
||||
selectedRotation ? undefined : "Select a provider to create a secret rotation for."
|
||||
}
|
||||
bodyClassName="overflow-visible"
|
||||
>
|
||||
<Content
|
||||
onComplete={() => {
|
||||
setSelectedRotation(null);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
selectedRotation={selectedRotation}
|
||||
setSelectedRotation={setSelectedRotation}
|
||||
{...props}
|
||||
/>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,102 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { DeleteActionModal, Switch } from "@app/components/v2";
|
||||
import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
|
||||
import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
|
||||
import { useDeleteSecretRotationV2 } from "@app/hooks/api/secretRotationsV2/mutations";
|
||||
|
||||
type Props = {
|
||||
secretRotation?: TSecretRotationV2;
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
onComplete?: () => void;
|
||||
};
|
||||
|
||||
export const DeleteSecretRotationV2Modal = ({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
secretRotation,
|
||||
onComplete
|
||||
}: Props) => {
|
||||
const deleteSecretRotation = useDeleteSecretRotationV2();
|
||||
const [revokeGeneratedCredentials, setRevokeGeneratedCredentials] = useState(false);
|
||||
const [deleteSecrets, setDeleteSecrets] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setRevokeGeneratedCredentials(false);
|
||||
setDeleteSecrets(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
if (!secretRotation) return null;
|
||||
|
||||
const { id: rotationId, name, type, projectId, folder } = secretRotation;
|
||||
|
||||
const handleDeleteSecretRotation = async () => {
|
||||
const rotationType = SECRET_ROTATION_MAP[type].name;
|
||||
|
||||
try {
|
||||
await deleteSecretRotation.mutateAsync({
|
||||
rotationId,
|
||||
type,
|
||||
revokeGeneratedCredentials,
|
||||
deleteSecrets,
|
||||
projectId,
|
||||
secretPath: folder.path
|
||||
});
|
||||
|
||||
createNotification({
|
||||
text: `Successfully deleted ${rotationType} Rotation`,
|
||||
type: "success"
|
||||
});
|
||||
|
||||
if (onComplete) onComplete();
|
||||
onOpenChange(false);
|
||||
} catch {
|
||||
createNotification({
|
||||
text: `Failed to delete ${rotationType} Rotation`,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DeleteActionModal
|
||||
isOpen={isOpen}
|
||||
onChange={onOpenChange}
|
||||
title={`Are you sure want to delete ${name}?`}
|
||||
deleteKey={name}
|
||||
onDeleteApproved={handleDeleteSecretRotation}
|
||||
>
|
||||
<Switch
|
||||
containerClassName="mt-4"
|
||||
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
|
||||
thumbClassName="bg-mineshaft-800"
|
||||
isChecked={revokeGeneratedCredentials}
|
||||
onCheckedChange={setRevokeGeneratedCredentials}
|
||||
id="revoke-credentials"
|
||||
>
|
||||
Revoke Credentials
|
||||
</Switch>
|
||||
<p className="mt-1 font-inter text-sm text-mineshaft-400">
|
||||
Generated credentials will {revokeGeneratedCredentials ? "" : "not"} be revoked on deletion
|
||||
{revokeGeneratedCredentials ? "" : " and remain active"}.
|
||||
</p>
|
||||
<Switch
|
||||
containerClassName="mt-4"
|
||||
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
|
||||
thumbClassName="bg-mineshaft-800"
|
||||
isChecked={deleteSecrets}
|
||||
onCheckedChange={setDeleteSecrets}
|
||||
id="delete-secrets"
|
||||
>
|
||||
Delete Secrets
|
||||
</Switch>
|
||||
<p className="mt-1 font-inter text-sm text-mineshaft-400">
|
||||
Rotation secrets will {deleteSecrets ? "" : "not"} be removed from your project on deletion.
|
||||
</p>
|
||||
</DeleteActionModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
|
||||
import { Modal, ModalContent } from "@app/components/v2";
|
||||
import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
import { SecretRotationV2Form } from "./forms";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
secretRotation?: TSecretRotationV2;
|
||||
};
|
||||
|
||||
export const EditSecretRotationV2Modal = ({ secretRotation, onOpenChange, ...props }: Props) => {
|
||||
if (!secretRotation) return null;
|
||||
|
||||
return (
|
||||
<Modal {...props} onOpenChange={onOpenChange}>
|
||||
<ModalContent
|
||||
title={<SecretRotationV2ModalHeader isConfigured type={secretRotation.type} />}
|
||||
className="max-w-2xl"
|
||||
bodyClassName="overflow-visible"
|
||||
>
|
||||
<SecretRotationV2Form
|
||||
onComplete={() => onOpenChange(false)}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
secretRotation={secretRotation}
|
||||
type={secretRotation.type}
|
||||
secretPath={secretRotation.folder.path}
|
||||
environment={secretRotation.environment.slug}
|
||||
/>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { Button, Modal, ModalClose, ModalContent } from "@app/components/v2";
|
||||
import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
|
||||
import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
|
||||
import { useRotateSecretRotationV2 } from "@app/hooks/api/secretRotationsV2/mutations";
|
||||
|
||||
type Props = {
|
||||
secretRotation?: TSecretRotationV2;
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
};
|
||||
|
||||
type ContentProps = {
|
||||
secretRotation: TSecretRotationV2;
|
||||
onComplete: () => void;
|
||||
};
|
||||
|
||||
const Content = ({ secretRotation, onComplete }: ContentProps) => {
|
||||
const rotateSecrets = useRotateSecretRotationV2();
|
||||
|
||||
const { id: rotationId, type, projectId, folder } = secretRotation;
|
||||
const rotationType = SECRET_ROTATION_MAP[type].name;
|
||||
|
||||
const handleRotateSecrets = async () => {
|
||||
try {
|
||||
await rotateSecrets.mutateAsync({
|
||||
rotationId,
|
||||
type,
|
||||
projectId,
|
||||
secretPath: folder.path
|
||||
});
|
||||
|
||||
createNotification({
|
||||
text: `Successfully rotated ${rotationType} secrets`,
|
||||
type: "success"
|
||||
});
|
||||
|
||||
onComplete();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
||||
createNotification({
|
||||
text: `Failed to rotate ${rotationType} secrets`,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="mb-8 text-sm text-mineshaft-200">
|
||||
Are you sure you want to rotate the secrets for this {rotationType} Rotation?
|
||||
</p>
|
||||
<div className="mt-8 flex w-full items-center justify-between gap-2">
|
||||
<ModalClose asChild>
|
||||
<Button colorSchema="secondary" variant="plain">
|
||||
Cancel
|
||||
</Button>
|
||||
</ModalClose>
|
||||
<Button
|
||||
onClick={handleRotateSecrets}
|
||||
isDisabled={rotateSecrets.isPending}
|
||||
isLoading={rotateSecrets.isPending}
|
||||
colorSchema="secondary"
|
||||
>
|
||||
Rotate Secrets
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const RotateSecretRotationV2Modal = ({ isOpen, onOpenChange, secretRotation }: Props) => {
|
||||
if (!secretRotation) return null;
|
||||
|
||||
const rotationType = SECRET_ROTATION_MAP[secretRotation.type].name;
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
<ModalContent
|
||||
title="Rotate Secrets"
|
||||
subTitle={`Rotate the secrets for this ${rotationType}.`}
|
||||
>
|
||||
<Content secretRotation={secretRotation} onComplete={() => onOpenChange(false)} />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,49 @@
|
||||
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
type Props = {
|
||||
type: SecretRotation;
|
||||
isConfigured: boolean;
|
||||
};
|
||||
|
||||
export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
|
||||
const destinationDetails = SECRET_ROTATION_MAP[type];
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-start gap-2">
|
||||
<img
|
||||
alt={`${destinationDetails.name} logo`}
|
||||
src={`/images/integrations/${destinationDetails.image}`}
|
||||
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
|
||||
/>
|
||||
<div>
|
||||
<div className="flex items-center text-mineshaft-300">
|
||||
{destinationDetails.name} Rotation
|
||||
<a
|
||||
target="_blank"
|
||||
href={`https://infisical.com/docs/platform/secret-rotations/${type}`}
|
||||
className="mb-1 ml-1"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
|
||||
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
|
||||
<span>Docs</span>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowUpRightFromSquare}
|
||||
className="mb-[0.07rem] ml-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-sm leading-4 text-mineshaft-400">
|
||||
{isConfigured
|
||||
? `Edit ${destinationDetails.name} Rotation`
|
||||
: `Rotate ${destinationDetails.name}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,98 @@
|
||||
import { faWrench } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { Spinner, Tooltip } from "@app/components/v2";
|
||||
import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
|
||||
import { SecretRotation, useSecretRotationV2Options } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
type Props = {
|
||||
onSelect: (type: SecretRotation) => void;
|
||||
};
|
||||
|
||||
export const SecretRotationV2Select = ({ onSelect }: Props) => {
|
||||
const { isPending, data: secretRotationOptions } = useSecretRotationV2Options();
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center py-2.5">
|
||||
<Spinner size="lg" className="text-mineshaft-500" />
|
||||
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{secretRotationOptions?.map(({ type }) => {
|
||||
const { image, name } = SECRET_ROTATION_MAP[type];
|
||||
|
||||
let size: number;
|
||||
|
||||
switch (type) {
|
||||
case SecretRotation.MsSqlCredentials:
|
||||
size = 50;
|
||||
break;
|
||||
default:
|
||||
size = 45;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={type}
|
||||
onClick={() => onSelect(type)}
|
||||
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
|
||||
>
|
||||
<img
|
||||
src={`/images/integrations/${image}`}
|
||||
width={size}
|
||||
className="mt-auto"
|
||||
alt={`${name} logo`}
|
||||
/>
|
||||
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
|
||||
{name}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<Tooltip
|
||||
side="bottom"
|
||||
className="max-w-sm py-4"
|
||||
content={
|
||||
<>
|
||||
<p className="mb-2">Infisical is constantly adding support for more services.</p>
|
||||
<p>
|
||||
{`If you don't see the third-party
|
||||
service you're looking for,`}{" "}
|
||||
<a
|
||||
target="_blank"
|
||||
className="underline hover:text-mineshaft-300"
|
||||
href="https://infisical.com/slack"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
let us know on Slack
|
||||
</a>{" "}
|
||||
or{" "}
|
||||
<a
|
||||
target="_blank"
|
||||
className="underline hover:text-mineshaft-300"
|
||||
href="https://github.com/Infisical/infisical/discussions"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
make a request on GitHub
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
|
||||
<FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
|
||||
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
|
||||
Coming Soon
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,109 @@
|
||||
import { faBan, faRotate, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { format, formatDistanceToNow } from "date-fns";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Tooltip } from "@app/components/v2";
|
||||
import { Badge } from "@app/components/v2/Badge/Badge";
|
||||
import { SecretRotationStatus, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
type Props = {
|
||||
secretRotation: TSecretRotationV2;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props) => {
|
||||
const { isAutoRotationEnabled, rotationStatus, nextRotationAt, lastRotationMessage } =
|
||||
secretRotation;
|
||||
|
||||
if (rotationStatus === SecretRotationStatus.Failed) {
|
||||
let errorMessage = lastRotationMessage;
|
||||
if (lastRotationMessage) {
|
||||
try {
|
||||
errorMessage = JSON.stringify(JSON.parse(lastRotationMessage), null, 2);
|
||||
} catch {
|
||||
errorMessage = lastRotationMessage;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
position="left"
|
||||
className="max-w-sm select-text"
|
||||
content={
|
||||
<div className="flex flex-col gap-2 whitespace-normal py-1">
|
||||
<div>
|
||||
<div className="mb-2 flex self-start text-red">
|
||||
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
|
||||
<div className="text-xs">Failure Reason</div>
|
||||
</div>
|
||||
<div className="break-words rounded bg-mineshaft-600 p-2 text-xs">{errorMessage}</div>
|
||||
</div>
|
||||
{nextRotationAt && (
|
||||
<span className="text-xs text-mineshaft-300">
|
||||
Next rotation attempt on {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
|
||||
{format(nextRotationAt, "h:mm aa")}.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Badge
|
||||
variant="danger"
|
||||
className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
Rotation Failed
|
||||
</Badge>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAutoRotationEnabled) {
|
||||
return (
|
||||
<Badge
|
||||
className={twMerge(
|
||||
"flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faBan} />
|
||||
Auto-Rotation Disabled
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
const daysToRotation =
|
||||
(new Date(nextRotationAt).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
className="max-w-lg"
|
||||
content={
|
||||
<>
|
||||
<span>
|
||||
Rotates on {format(nextRotationAt, "MM/dd/yyyy")} at {format(nextRotationAt, "h:mm aa")}
|
||||
</span>{" "}
|
||||
<span className="text-mineshaft-300">(Local Time)</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Badge
|
||||
variant={daysToRotation >= 7 ? "success" : "primary"}
|
||||
className={twMerge(
|
||||
"flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faRotate} />
|
||||
{daysToRotation < 0
|
||||
? "Rotating"
|
||||
: `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
|
||||
</Badge>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
import { ReactNode } from "react";
|
||||
import { faRotate } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { format } from "date-fns";
|
||||
|
||||
import { Modal, ModalContent, Spinner } from "@app/components/v2";
|
||||
import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
|
||||
import {
|
||||
SecretRotation,
|
||||
TSecretRotationV2,
|
||||
useViewSecretRotationV2GeneratedCredentials
|
||||
} from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
import { ViewSqlRotationGeneratedCredentials } from "./shared";
|
||||
|
||||
type Props = {
|
||||
secretRotation?: TSecretRotationV2;
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
};
|
||||
|
||||
type ContentProps = {
|
||||
secretRotation: TSecretRotationV2;
|
||||
};
|
||||
|
||||
const Content = ({ secretRotation }: ContentProps) => {
|
||||
const { id: rotationId, type, nextRotationAt } = secretRotation;
|
||||
|
||||
const { data: generatedCredentialsResponse, isPending } =
|
||||
useViewSecretRotationV2GeneratedCredentials({
|
||||
rotationId,
|
||||
type
|
||||
});
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center py-2.5">
|
||||
<Spinner size="lg" className="text-mineshaft-500" />
|
||||
<p className="mt-4 text-sm text-mineshaft-400">Loading generated credentials...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!generatedCredentialsResponse) {
|
||||
return (
|
||||
<div className="flex w-full justify-center">
|
||||
<p className="text-sm text-red">No generated credentials found for this rotation.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let Component: ReactNode;
|
||||
switch (generatedCredentialsResponse.type) {
|
||||
case SecretRotation.PostgresCredentials:
|
||||
case SecretRotation.MsSqlCredentials:
|
||||
Component = (
|
||||
<ViewSqlRotationGeneratedCredentials
|
||||
generatedCredentialsResponse={generatedCredentialsResponse}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
throw new Error("Unhandled View Generated Credential Rotation Type");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-y-4">
|
||||
{Component}
|
||||
{nextRotationAt && (
|
||||
<div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
|
||||
<FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
|
||||
<span>
|
||||
Next rotation occurs on: {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
|
||||
{format(nextRotationAt, "h:mm aa")}{" "}
|
||||
<span className="text-mineshaft-300">(Local Time)</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ViewSecretRotationV2GeneratedCredentialsModal = ({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
secretRotation
|
||||
}: Props) => {
|
||||
if (!secretRotation) return null;
|
||||
|
||||
const rotationType = SECRET_ROTATION_MAP[secretRotation.type].name;
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
<ModalContent
|
||||
onOpenAutoFocus={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
title="Generated Credentials"
|
||||
subTitle={`View the current and retired ${rotationType}.`}
|
||||
>
|
||||
<Content secretRotation={secretRotation} />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./ViewSecretRotationV2GeneratedCredentials";
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import { useReducer } from "react";
|
||||
import { faCheck, faCopy, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { GenericFieldLabel, IconButton, Tooltip } from "@app/components/v2";
|
||||
import { useTimedReset } from "@app/hooks";
|
||||
|
||||
type Props = {
|
||||
children?: string;
|
||||
label: string;
|
||||
isSensitive?: boolean;
|
||||
};
|
||||
|
||||
export const CredentialDisplay = ({ children, label, isSensitive }: Props) => {
|
||||
const [showCredential, toggleShowCredential] = useReducer((prev) => !prev, !isSensitive);
|
||||
|
||||
const [, isCopyingCredential, setCopyCredential] = useTimedReset<string>({
|
||||
initialState: "Copy ID to clipboard"
|
||||
});
|
||||
|
||||
return (
|
||||
<GenericFieldLabel label={label}>
|
||||
{children ? (
|
||||
<div className="flex w-full items-center gap-1 text-mineshaft-100">
|
||||
{showCredential ? children : "****************************"}
|
||||
<Tooltip content={`Copy ${label}`}>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
setCopyCredential(children);
|
||||
navigator.clipboard.writeText(children);
|
||||
}}
|
||||
ariaLabel="Copy credential"
|
||||
variant="plain"
|
||||
size="xs"
|
||||
>
|
||||
<FontAwesomeIcon icon={isCopyingCredential ? faCheck : faCopy} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{isSensitive && (
|
||||
<Tooltip content={`Show ${label}`}>
|
||||
<IconButton
|
||||
variant="plain"
|
||||
size="xs"
|
||||
onClick={toggleShowCredential}
|
||||
ariaLabel={`${showCredential ? "Hide" : "Show"} credential`}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEyeSlash} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</GenericFieldLabel>
|
||||
);
|
||||
};
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
import { faCheck, faClockRotateLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
|
||||
import { TViewSecretRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
type Props = {
|
||||
generatedCredentialsResponse: TViewSecretRotationGeneratedCredentialsResponse;
|
||||
};
|
||||
|
||||
export const ViewSqlRotationGeneratedCredentials = ({
|
||||
generatedCredentialsResponse: { generatedCredentials, activeIndex }
|
||||
}: Props) => {
|
||||
const inactiveIndex = activeIndex === 0 ? 1 : 0;
|
||||
|
||||
const activeCredentials = generatedCredentials[activeIndex];
|
||||
const inactiveCredentials = generatedCredentials[inactiveIndex];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="w-full border-b border-mineshaft-600">
|
||||
<span className="text-sm text-mineshaft-100">
|
||||
<FontAwesomeIcon icon={faCheck} className="mr-1.5 text-green" />
|
||||
Current Credentials
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-mineshaft-300">
|
||||
The active credential set currently mapped to the rotation secrets.
|
||||
</p>
|
||||
<div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
|
||||
<CredentialDisplay label="Username">{activeCredentials?.username}</CredentialDisplay>
|
||||
<CredentialDisplay isSensitive label="Password">
|
||||
{activeCredentials?.password}
|
||||
</CredentialDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="w-full border-b border-mineshaft-600">
|
||||
<span className="text-sm text-mineshaft-100">
|
||||
<FontAwesomeIcon icon={faClockRotateLeft} className="mr-1.5 text-yellow" />
|
||||
Retired Credentials
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-mineshaft-300">
|
||||
The retired credential set that will be revoked during the next rotation cycle.
|
||||
</p>
|
||||
<div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
|
||||
<CredentialDisplay label="Username">{inactiveCredentials?.username}</CredentialDisplay>
|
||||
<CredentialDisplay isSensitive label="Password">
|
||||
{inactiveCredentials?.password}
|
||||
</CredentialDisplay>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./ViewSqlRotationGeneratedCredentials";
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { format, setHours, setMinutes } from "date-fns";
|
||||
|
||||
import { FilterableSelect, FormControl, Input, Switch } from "@app/components/v2";
|
||||
import { getRotateAtLocal } from "@app/helpers/secretRotationsV2";
|
||||
import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
|
||||
|
||||
import { TSecretRotationV2Form } from "./schemas";
|
||||
import { SecretRotationV2ConnectionField } from "./SecretRotationV2ConnectionField";
|
||||
|
||||
type Props = {
|
||||
isUpdate: boolean;
|
||||
environments?: WorkspaceEnv[];
|
||||
};
|
||||
|
||||
export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }: Props) => {
|
||||
const { control } = useFormContext<TSecretRotationV2Form>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mb-4 text-sm text-bunker-300">
|
||||
Configure the connection rotation strategy for this Secret Rotation.
|
||||
</p>
|
||||
{!isUpdate && environments && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="environment"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl label="Environment" isError={Boolean(error)} errorText={error?.message}>
|
||||
<FilterableSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={environments}
|
||||
placeholder="Select an environment..."
|
||||
getOptionLabel={(option) => option?.name}
|
||||
getOptionValue={(option) => option?.id}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SecretRotationV2ConnectionField isUpdate={isUpdate} />
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label="Rotation Interval (In Days)"
|
||||
>
|
||||
<Input
|
||||
value={value}
|
||||
type="number"
|
||||
onChange={onChange}
|
||||
min={1}
|
||||
placeholder="my-secret-rotation"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="rotationInterval"
|
||||
/>
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl
|
||||
label="Rotate At (Local Time)"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input
|
||||
type="time"
|
||||
value={format(getRotateAtLocal(value), "HH:mm")}
|
||||
onChange={(e) => {
|
||||
const time = e.target.value;
|
||||
if (time) {
|
||||
const [hours, minutes] = time.split(":").map((str) => parseInt(str, 10));
|
||||
const newSelectedDate = setHours(setMinutes(new Date(), minutes), hours);
|
||||
onChange({
|
||||
hours: newSelectedDate.getUTCHours(),
|
||||
minutes: newSelectedDate.getUTCMinutes()
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="bg-mineshaft-700 text-white [color-scheme:dark]"
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
control={control}
|
||||
name="rotateAtUtc"
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="isAutoRotationEnabled"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl
|
||||
helperText={
|
||||
value
|
||||
? "Secrets will automatically be rotated when the rotation interval specified above as elapsed."
|
||||
: "Secrets will not be rotated automatically. You can still rotate secrets manually."
|
||||
}
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Switch
|
||||
className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
|
||||
id="auto-rotation-enabled"
|
||||
thumbClassName="bg-mineshaft-800"
|
||||
onCheckedChange={onChange}
|
||||
isChecked={value}
|
||||
>
|
||||
<p className="w-[9.6rem]">Auto-Rotation {value ? "Enabled" : "Disabled"}</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
import { FilterableSelect, FormControl } from "@app/components/v2";
|
||||
import { OrgPermissionSubjects, useOrgPermission } from "@app/context";
|
||||
import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
|
||||
import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
|
||||
import { SECRET_ROTATION_CONNECTION_MAP } from "@app/helpers/secretRotationsV2";
|
||||
import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
|
||||
|
||||
import { TSecretRotationV2Form } from "./schemas";
|
||||
|
||||
type Props = {
|
||||
onChange?: VoidFunction;
|
||||
isUpdate: boolean;
|
||||
};
|
||||
|
||||
export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }: Props) => {
|
||||
const { permission } = useOrgPermission();
|
||||
const { control, watch } = useFormContext<TSecretRotationV2Form>();
|
||||
|
||||
const rotationType = watch("type");
|
||||
const app = SECRET_ROTATION_CONNECTION_MAP[rotationType];
|
||||
|
||||
const { data: availableConnections, isPending } = useListAvailableAppConnections(app);
|
||||
|
||||
const connectionName = APP_CONNECTION_MAP[app].name;
|
||||
|
||||
const canCreateConnection = permission.can(
|
||||
OrgPermissionAppConnectionActions.Create,
|
||||
OrgPermissionSubjects.AppConnections
|
||||
);
|
||||
|
||||
const appName = APP_CONNECTION_MAP[app].name;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
tooltipText="App Connections can be created from the Organization Settings page."
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label={`${connectionName} Connection`}
|
||||
helperText={
|
||||
isUpdate ? (
|
||||
"Cannot be updated"
|
||||
) : (
|
||||
<p>
|
||||
Check out{" "}
|
||||
<a
|
||||
href={`https://infisical.com/docs/integrations/app-connections/${app}`}
|
||||
target="_blank"
|
||||
className="underline"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
our docs
|
||||
</a>{" "}
|
||||
to ensure your connection has the required permissions for secret rotation.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
>
|
||||
<FilterableSelect
|
||||
value={value}
|
||||
onChange={(newValue) => {
|
||||
onChange(newValue);
|
||||
if (callback) callback();
|
||||
}}
|
||||
isLoading={isPending}
|
||||
options={availableConnections}
|
||||
isDisabled={isUpdate}
|
||||
placeholder="Select connection..."
|
||||
getOptionLabel={(option) => option.name}
|
||||
getOptionValue={(option) => option.id}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="connection"
|
||||
/>
|
||||
{!isUpdate && availableConnections?.length === 0 && (
|
||||
<p className="-mt-2.5 mb-2.5 text-xs text-yellow">
|
||||
<FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
|
||||
{canCreateConnection ? (
|
||||
<>
|
||||
You do not have access to any {appName} Connections. Create one from the{" "}
|
||||
<Link to="/organization/app-connections" className="underline">
|
||||
App Connections
|
||||
</Link>{" "}
|
||||
page.
|
||||
</>
|
||||
) : (
|
||||
`You do not have access to any ${appName} Connections. Contact an admin to create one.`
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
|
||||
import { FormControl, Input, TextArea } from "@app/components/v2";
|
||||
|
||||
import { TSecretRotationV2Form } from "./schemas";
|
||||
|
||||
export const SecretRotationV2DetailsFields = () => {
|
||||
const { control } = useFormContext<TSecretRotationV2Form>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mb-4 text-sm text-bunker-300">
|
||||
Provide a name and description for this Secret Rotation.
|
||||
</p>
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
helperText="Must be slug-friendly"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label="Name"
|
||||
>
|
||||
<Input autoFocus value={value} onChange={onChange} placeholder="my-secret-rotation" />
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="name"
|
||||
/>
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
isOptional
|
||||
errorText={error?.message}
|
||||
label="Description"
|
||||
>
|
||||
<TextArea
|
||||
value={value ?? ""}
|
||||
onChange={onChange}
|
||||
placeholder="Describe the purpose of this rotation..."
|
||||
className="!resize-none"
|
||||
rows={4}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="description"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,231 @@
|
||||
import { useState } from "react";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { SecretRotationV2ConfigurationFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields";
|
||||
import { SecretRotationV2DetailsFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields";
|
||||
import { SecretRotationV2ParametersFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields";
|
||||
import { SecretRotationV2ReviewFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields";
|
||||
import { SecretRotationV2SecretsMappingFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields";
|
||||
import { Button } from "@app/components/v2";
|
||||
import { useWorkspace } from "@app/context";
|
||||
import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
|
||||
import {
|
||||
SecretRotation,
|
||||
TSecretRotationV2,
|
||||
useSecretRotationV2Option
|
||||
} from "@app/hooks/api/secretRotationsV2";
|
||||
import {
|
||||
useCreateSecretRotationV2,
|
||||
useUpdateSecretRotationV2
|
||||
} from "@app/hooks/api/secretRotationsV2/mutations";
|
||||
import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
|
||||
|
||||
import { SecretRotationV2FormSchema, TSecretRotationV2Form } from "./schemas";
|
||||
|
||||
type Props = {
|
||||
onComplete: (secretRotation: TSecretRotationV2) => void;
|
||||
type: SecretRotation;
|
||||
onCancel: () => void;
|
||||
secretPath: string;
|
||||
environment?: string;
|
||||
environments?: WorkspaceEnv[];
|
||||
secretRotation?: TSecretRotationV2;
|
||||
};
|
||||
|
||||
const FORM_TABS: { name: string; key: string; fields: (keyof TSecretRotationV2Form)[] }[] = [
|
||||
{
|
||||
name: "Configuration",
|
||||
key: "configuration",
|
||||
fields: [
|
||||
"isAutoRotationEnabled",
|
||||
"environment",
|
||||
"rotationInterval",
|
||||
"connection",
|
||||
"rotateAtUtc"
|
||||
]
|
||||
},
|
||||
{ name: "Parameters", key: "parameters", fields: ["parameters"] },
|
||||
{ name: "Mappings", key: "secretsMapping", fields: ["secretsMapping"] },
|
||||
{ name: "Details", key: "details", fields: ["name", "description"] },
|
||||
{ name: "Review", key: "review", fields: [] }
|
||||
];
|
||||
|
||||
const DEFAULT_ROTATION_INTERVAL = 30;
|
||||
|
||||
export const SecretRotationV2Form = ({
|
||||
type,
|
||||
onComplete,
|
||||
onCancel,
|
||||
environment: envSlug,
|
||||
secretPath,
|
||||
secretRotation,
|
||||
environments
|
||||
}: Props) => {
|
||||
const createSecretRotation = useCreateSecretRotationV2();
|
||||
const updateSecretRotation = useUpdateSecretRotationV2();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { name: rotationType } = SECRET_ROTATION_MAP[type];
|
||||
|
||||
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
|
||||
|
||||
const { rotationOption } = useSecretRotationV2Option(type);
|
||||
|
||||
const formMethods = useForm<TSecretRotationV2Form>({
|
||||
resolver: zodResolver(SecretRotationV2FormSchema),
|
||||
defaultValues: secretRotation
|
||||
? {
|
||||
...secretRotation,
|
||||
environment: currentWorkspace?.environments.find((env) => env.slug === envSlug),
|
||||
secretPath
|
||||
}
|
||||
: {
|
||||
type,
|
||||
isAutoRotationEnabled: true,
|
||||
rotationInterval: DEFAULT_ROTATION_INTERVAL,
|
||||
rotateAtUtc: {
|
||||
hours: 0,
|
||||
minutes: 0
|
||||
},
|
||||
environment: currentWorkspace?.environments.find((env) => env.slug === envSlug),
|
||||
secretPath,
|
||||
...rotationOption!.template
|
||||
},
|
||||
reValidateMode: "onChange"
|
||||
});
|
||||
|
||||
const onSubmit = async ({
|
||||
environment,
|
||||
connection,
|
||||
|
||||
...formData
|
||||
}: TSecretRotationV2Form) => {
|
||||
const mutation = secretRotation
|
||||
? updateSecretRotation.mutateAsync({
|
||||
rotationId: secretRotation.id,
|
||||
projectId: secretRotation.projectId,
|
||||
...formData
|
||||
})
|
||||
: createSecretRotation.mutateAsync({
|
||||
...formData,
|
||||
|
||||
connectionId: connection.id,
|
||||
environment: environment.slug,
|
||||
projectId: currentWorkspace.id
|
||||
});
|
||||
try {
|
||||
const rotation = await mutation;
|
||||
|
||||
createNotification({
|
||||
text: `Successfully ${secretRotation ? "updated" : "created"} ${rotationType} Rotation`,
|
||||
type: "success"
|
||||
});
|
||||
onComplete(rotation);
|
||||
} catch (err: any) {
|
||||
createNotification({
|
||||
title: `Failed to ${secretRotation ? "update" : "create"} ${rotationType} Rotation`,
|
||||
text: err.message,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
if (selectedTabIndex === 0) {
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedTabIndex((prev) => prev - 1);
|
||||
};
|
||||
|
||||
const { handleSubmit, trigger } = formMethods;
|
||||
|
||||
const isStepValid = async (index: number) => trigger(FORM_TABS[index].fields);
|
||||
|
||||
const isFinalStep = selectedTabIndex === FORM_TABS.length - 1;
|
||||
|
||||
const handleNext = async () => {
|
||||
if (isFinalStep) {
|
||||
handleSubmit(onSubmit)();
|
||||
return;
|
||||
}
|
||||
|
||||
const isValid = await isStepValid(selectedTabIndex);
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
setSelectedTabIndex((prev) => prev + 1);
|
||||
};
|
||||
|
||||
const isTabEnabled = async (index: number) => {
|
||||
let isEnabled = true;
|
||||
for (let i = index - 1; i >= 0; i -= 1) {
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
isEnabled = isEnabled && (await isStepValid(i));
|
||||
}
|
||||
|
||||
return isEnabled;
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
|
||||
<FormProvider {...formMethods}>
|
||||
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
|
||||
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
|
||||
{FORM_TABS.map((tab, index) => (
|
||||
<Tab
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
const isEnabled = await isTabEnabled(index);
|
||||
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
|
||||
}}
|
||||
className={({ selected }) =>
|
||||
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
|
||||
selected
|
||||
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
|
||||
: "text-bunker-300"
|
||||
}`
|
||||
}
|
||||
key={tab.key}
|
||||
>
|
||||
{index + 1}. {tab.name}
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<SecretRotationV2ConfigurationFields
|
||||
isUpdate={Boolean(secretRotation)}
|
||||
environments={environments}
|
||||
/>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<SecretRotationV2ParametersFields />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<SecretRotationV2SecretsMappingFields />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<SecretRotationV2DetailsFields />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<SecretRotationV2ReviewFields />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</FormProvider>
|
||||
<div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
|
||||
<Button onClick={handleNext} colorSchema="secondary">
|
||||
{isFinalStep ? `${secretRotation ? "Update" : "Create"} Secret Rotation` : "Next"}
|
||||
</Button>
|
||||
<Button onClick={handlePrev} colorSchema="secondary">
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
import { TSecretRotationV2Form } from "../schemas";
|
||||
import { SqlRotationParametersFields } from "./shared";
|
||||
|
||||
const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
|
||||
[SecretRotation.PostgresCredentials]: SqlRotationParametersFields,
|
||||
[SecretRotation.MsSqlCredentials]: SqlRotationParametersFields
|
||||
};
|
||||
|
||||
export const SecretRotationV2ParametersFields = () => {
|
||||
const { watch } = useFormContext<TSecretRotationV2Form>();
|
||||
|
||||
const rotationType = watch("type");
|
||||
|
||||
const Component = COMPONENT_MAP[rotationType];
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mb-4 text-sm text-bunker-300">
|
||||
Configure the required parameters for this Secret Rotation.
|
||||
</p>
|
||||
<Component />
|
||||
</>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./SecretRotationV2ParametersFields";
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
|
||||
import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
|
||||
import { FormControl, Input } from "@app/components/v2";
|
||||
import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
|
||||
import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
export const SqlRotationParametersFields = () => {
|
||||
const { control, watch } = useFormContext<
|
||||
TSecretRotationV2Form & {
|
||||
type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
|
||||
}
|
||||
>();
|
||||
|
||||
const type = watch("type");
|
||||
|
||||
const { rotationOption } = useSecretRotationV2Option(type);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label="Database Username 1"
|
||||
>
|
||||
<Input value={value} onChange={onChange} placeholder="infiscal_user_1" />
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="parameters.username1"
|
||||
/>
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
label="Database Username 2"
|
||||
>
|
||||
<Input value={value} onChange={onChange} placeholder="infiscal_user_2" />
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="parameters.username2"
|
||||
/>
|
||||
<NoticeBannerV2 title="Example Create User Statement">
|
||||
<p className="mb-3 text-sm text-mineshaft-300">
|
||||
Infisical requires two database users to be created for rotation.
|
||||
</p>
|
||||
<p className="mb-3 text-sm text-mineshaft-300">
|
||||
These users are intended to be solely managed by Infisical. Altering their login after
|
||||
rotation may cause unexpected failure.
|
||||
</p>
|
||||
<p className="mb-3 text-sm text-mineshaft-300">
|
||||
Below is an example statement for creating the required users. You may need to modify it
|
||||
to suit your needs.
|
||||
</p>
|
||||
<p className="mb-3 text-sm">
|
||||
<pre className="max-h-[10rem] overflow-y-auto whitespace-pre-wrap rounded border border-mineshaft-700 bg-mineshaft-800 p-2 text-mineshaft-300">
|
||||
{rotationOption!.template.createUserStatement}
|
||||
</pre>
|
||||
</p>
|
||||
</NoticeBannerV2>
|
||||
</>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./SqlRotationParametersFields";
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { format } from "date-fns";
|
||||
|
||||
import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
|
||||
import { SqlRotationReviewFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared";
|
||||
import { GenericFieldLabel } from "@app/components/v2";
|
||||
import { getRotateAtLocal } from "@app/helpers/secretRotationsV2";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
|
||||
[SecretRotation.PostgresCredentials]: SqlRotationReviewFields,
|
||||
[SecretRotation.MsSqlCredentials]: SqlRotationReviewFields
|
||||
};
|
||||
|
||||
export const SecretRotationV2ReviewFields = () => {
|
||||
const { watch } = useFormContext<TSecretRotationV2Form>();
|
||||
|
||||
const {
|
||||
environment,
|
||||
secretPath,
|
||||
connection,
|
||||
type,
|
||||
name,
|
||||
description,
|
||||
rotationInterval,
|
||||
rotateAtUtc
|
||||
} = watch();
|
||||
|
||||
const Component = COMPONENT_MAP[type];
|
||||
|
||||
return (
|
||||
<div className="mb-4 flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="w-full border-b border-mineshaft-600">
|
||||
<span className="text-sm text-mineshaft-300">Configuration</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Secret Path">{secretPath}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Rotation Interval">
|
||||
{rotationInterval} Day{rotationInterval > 1 ? "s" : ""}
|
||||
</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Rotate At">
|
||||
{format(getRotateAtLocal(rotateAtUtc), "h:mm aa")}
|
||||
</GenericFieldLabel>
|
||||
</div>
|
||||
</div>
|
||||
<Component />
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="w-full border-b border-mineshaft-600">
|
||||
<span className="text-sm text-mineshaft-300">Details</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<GenericFieldLabel label="Name">{name}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Description">{description}</GenericFieldLabel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./SecretRotationReviewFields";
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
|
||||
import { GenericFieldLabel } from "@app/components/v2";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
export const SqlRotationReviewFields = () => {
|
||||
const { watch } = useFormContext<
|
||||
TSecretRotationV2Form & {
|
||||
type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
|
||||
}
|
||||
>();
|
||||
|
||||
const [{ username1, username2 }, { username, password }] = watch([
|
||||
"parameters",
|
||||
"secretsMapping"
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="w-full border-b border-mineshaft-600">
|
||||
<span className="text-sm text-mineshaft-300">Parameters</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<GenericFieldLabel label="Database Username 1">{username1}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Database Username 2">{username2}</GenericFieldLabel>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="w-full border-b border-mineshaft-600">
|
||||
<span className="text-sm text-mineshaft-300">Secrets Mapping</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<GenericFieldLabel label="Username">{username}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Password">{password}</GenericFieldLabel>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./SqlRotationReviewFields";
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
import { TSecretRotationV2Form } from "../schemas";
|
||||
import { SqlRotationSecretsMappingFields } from "./shared";
|
||||
|
||||
const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
|
||||
[SecretRotation.PostgresCredentials]: SqlRotationSecretsMappingFields,
|
||||
[SecretRotation.MsSqlCredentials]: SqlRotationSecretsMappingFields
|
||||
};
|
||||
|
||||
export const SecretRotationV2SecretsMappingFields = () => {
|
||||
const { watch } = useFormContext<TSecretRotationV2Form>();
|
||||
|
||||
const rotationType = watch("type");
|
||||
|
||||
const Component = COMPONENT_MAP[rotationType];
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mb-4 text-sm text-bunker-300">
|
||||
Map the rotated credentials to secrets in your Infisical project.
|
||||
</p>
|
||||
<Component />
|
||||
</>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./SecretRotationV2SecretsMappingFields";
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { faArrowRight, faKey } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
|
||||
import { Badge, FormControl, FormLabel, Input } from "@app/components/v2";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
export const SqlRotationSecretsMappingFields = () => {
|
||||
const { control } = useFormContext<
|
||||
TSecretRotationV2Form & {
|
||||
type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
|
||||
}
|
||||
>();
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: "Username",
|
||||
input: (
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message}>
|
||||
<Input value={value} onChange={onChange} placeholder="DB_USERNAME" />
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="secretsMapping.username"
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: "Password",
|
||||
input: (
|
||||
<Controller
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message}>
|
||||
<Input value={value} onChange={onChange} placeholder="DB_PASSWORD" />
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="secretsMapping.password"
|
||||
/>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-hidden">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className="text-left">
|
||||
<th className="whitespace-nowrap">
|
||||
<FormLabel label="Rotated Credentials" />
|
||||
</th>
|
||||
<th />
|
||||
<th>
|
||||
<FormLabel
|
||||
tooltipClassName="max-w-sm"
|
||||
tooltipText="The name of the secret that the active credentials will be mapped to."
|
||||
label="Secret Name"
|
||||
/>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map(({ name, input }) => (
|
||||
<tr key={name}>
|
||||
<td className="whitespace-nowrap">
|
||||
<div className="mb-4 flex h-full items-start justify-center">
|
||||
<Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border border-mineshaft-600 bg-mineshaft-600 text-bunker-200">
|
||||
<FontAwesomeIcon icon={faKey} />
|
||||
<span>{name}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</td>
|
||||
<td className="whitespace-nowrap pl-5 pr-5">
|
||||
<div className="mb-4 flex items-center justify-center">
|
||||
<FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} />
|
||||
</div>
|
||||
</td>
|
||||
<td className="w-full">{input}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./SqlRotationSecretsMappingFields";
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./SecretRotationV2Form";
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import { slugSchema } from "@app/lib/schemas";
|
||||
|
||||
export const BaseSecretRotationSchema = z.object({
|
||||
name: slugSchema({ field: "Name" }),
|
||||
description: z.string().trim().max(256, "Cannot exceed 256 characters").nullish(),
|
||||
connection: z.object({ name: z.string(), id: z.string().uuid() }),
|
||||
environment: z.object({ slug: z.string(), id: z.string(), name: z.string() }),
|
||||
secretPath: z.string().min(1, "Secret path required"),
|
||||
isAutoRotationEnabled: z.boolean(),
|
||||
rotationInterval: z.coerce.number(),
|
||||
rotateAtUtc: z.object({
|
||||
hours: z.number(),
|
||||
minutes: z.number()
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import { MsSqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/mssql-credentials-rotation-schema";
|
||||
import { PostgresCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/postgres-credentials-rotation-schema";
|
||||
|
||||
const SecretRotationUnionSchema = z.discriminatedUnion("type", [
|
||||
PostgresCredentialsRotationSchema,
|
||||
MsSqlCredentialsRotationSchema
|
||||
]);
|
||||
|
||||
export const SecretRotationV2FormSchema = SecretRotationUnionSchema;
|
||||
|
||||
export type TSecretRotationV2Form = z.infer<typeof SecretRotationV2FormSchema>;
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
|
||||
import { SqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/shared";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
export const MsSqlCredentialsRotationSchema = z
|
||||
.object({
|
||||
type: z.literal(SecretRotation.MsSqlCredentials)
|
||||
})
|
||||
.merge(SqlCredentialsRotationSchema)
|
||||
.merge(BaseSecretRotationSchema);
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
|
||||
import { SqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/shared";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
export const PostgresCredentialsRotationSchema = z
|
||||
.object({
|
||||
type: z.literal(SecretRotation.PostgresCredentials)
|
||||
})
|
||||
.merge(SqlCredentialsRotationSchema)
|
||||
.merge(BaseSecretRotationSchema);
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./sql-credentials-rotation-schema";
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import { SecretNameSchema } from "@app/lib/schemas";
|
||||
|
||||
export const SqlCredentialsRotationSchema = z.object({
|
||||
parameters: z.object({
|
||||
username1: z.string().trim().min(1, "Database Username 1 Required"),
|
||||
username2: z.string().trim().min(1, "Database Username 2 Required")
|
||||
}),
|
||||
secretsMapping: z.object({
|
||||
username: SecretNameSchema,
|
||||
password: SecretNameSchema
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./CreateSecretRotationV2Modal";
|
||||
+9
-9
@@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form";
|
||||
import { faEye } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
|
||||
import { AWS_REGIONS } from "@app/helpers/appConnections";
|
||||
@@ -17,9 +17,9 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
|
||||
{keyId && <GenericFieldLabel label="KMS Key">{keyId}</GenericFieldLabel>}
|
||||
{tags && tags.length > 0 && (
|
||||
<SecretSyncLabel label="Resource Tags">
|
||||
<GenericFieldLabel label="Resource Tags">
|
||||
<Tooltip
|
||||
side="right"
|
||||
className="max-w-xl p-1"
|
||||
@@ -49,12 +49,12 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
|
||||
</Badge>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
)}
|
||||
{syncSecretMetadataAsTags && (
|
||||
<SecretSyncLabel label="Sync Secret Metadata as Resource Tags">
|
||||
<GenericFieldLabel label="Sync Secret Metadata as Resource Tags">
|
||||
<Badge variant="success">Enabled</Badge>
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
@@ -71,13 +71,13 @@ export const AwsParameterStoreDestinationReviewFields = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SecretSyncLabel label="Region">
|
||||
<GenericFieldLabel label="Region">
|
||||
{awsRegion?.name}
|
||||
<Badge className="ml-1" variant="success">
|
||||
{awsRegion?.slug}{" "}
|
||||
</Badge>
|
||||
</SecretSyncLabel>
|
||||
<SecretSyncLabel label="Path">{path}</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Path">{path}</GenericFieldLabel>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+11
-11
@@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form";
|
||||
import { faEye } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
|
||||
import { AWS_REGIONS } from "@app/helpers/appConnections";
|
||||
@@ -24,17 +24,17 @@ export const AwsSecretsManagerSyncReviewFields = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SecretSyncLabel label="Region">
|
||||
<GenericFieldLabel label="Region">
|
||||
{awsRegion?.name}
|
||||
<Badge className="ml-1" variant="success">
|
||||
{awsRegion?.slug}{" "}
|
||||
</Badge>
|
||||
</SecretSyncLabel>
|
||||
<SecretSyncLabel className="capitalize" label="Mapping Behavior">
|
||||
</GenericFieldLabel>
|
||||
<GenericFieldLabel className="capitalize" label="Mapping Behavior">
|
||||
{mappingBehavior}
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
{mappingBehavior === AwsSecretsManagerSyncMappingBehavior.ManyToOne && (
|
||||
<SecretSyncLabel label="Secret Name">{secretName}</SecretSyncLabel>
|
||||
<GenericFieldLabel label="Secret Name">{secretName}</GenericFieldLabel>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
@@ -49,9 +49,9 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
|
||||
{keyId && <GenericFieldLabel label="KMS Key">{keyId}</GenericFieldLabel>}
|
||||
{tags && tags.length > 0 && (
|
||||
<SecretSyncLabel label="Tags">
|
||||
<GenericFieldLabel label="Tags">
|
||||
<Tooltip
|
||||
side="right"
|
||||
className="max-w-xl p-1"
|
||||
@@ -81,12 +81,12 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
|
||||
</Badge>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
)}
|
||||
{syncSecretMetadataAsTags && (
|
||||
<SecretSyncLabel label="Sync Secret Metadata as Resource Tags">
|
||||
<GenericFieldLabel label="Sync Secret Metadata as Resource Tags">
|
||||
<Badge variant="success">Enabled</Badge>
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
|
||||
@@ -13,8 +13,8 @@ export const AzureAppConfigurationSyncReviewFields = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SecretSyncLabel label="Configuration URL">{vaultBaseUrl}</SecretSyncLabel>
|
||||
<SecretSyncLabel label="Label">{label}</SecretSyncLabel>
|
||||
<GenericFieldLabel label="Configuration URL">{vaultBaseUrl}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Label">{label}</GenericFieldLabel>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
|
||||
@@ -8,5 +8,5 @@ export const AzureKeyVaultSyncReviewFields = () => {
|
||||
const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.AzureKeyVault }>();
|
||||
const vaultBaseUrl = watch("destinationConfig.vaultBaseUrl");
|
||||
|
||||
return <SecretSyncLabel label="Vault URL">{vaultBaseUrl}</SecretSyncLabel>;
|
||||
return <GenericFieldLabel label="Vault URL">{vaultBaseUrl}</GenericFieldLabel>;
|
||||
};
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
|
||||
@@ -8,5 +8,5 @@ export const DatabricksSyncReviewFields = () => {
|
||||
const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Databricks }>();
|
||||
const scope = watch("destinationConfig.scope");
|
||||
|
||||
return <SecretSyncLabel label="Secret Scope">{scope}</SecretSyncLabel>;
|
||||
return <GenericFieldLabel label="Secret Scope">{scope}</GenericFieldLabel>;
|
||||
};
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
|
||||
@@ -10,5 +10,5 @@ export const GcpSyncReviewFields = () => {
|
||||
>();
|
||||
const projectId = watch("destinationConfig.projectId");
|
||||
|
||||
return <SecretSyncLabel label="Project ID">{projectId}</SecretSyncLabel>;
|
||||
return <GenericFieldLabel label="Project ID">{projectId}</GenericFieldLabel>;
|
||||
};
|
||||
|
||||
+12
-12
@@ -1,7 +1,7 @@
|
||||
import { ReactNode } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
import { GitHubSyncScope, TGitHubSync } from "@app/hooks/api/secretSyncs/types/github-sync";
|
||||
@@ -16,30 +16,30 @@ export const GitHubSyncReviewFields = () => {
|
||||
switch (config.scope) {
|
||||
case GitHubSyncScope.Repository:
|
||||
ScopeComponents = (
|
||||
<SecretSyncLabel label="Repository">
|
||||
<GenericFieldLabel label="Repository">
|
||||
{config.owner}/{config.repo}
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
);
|
||||
break;
|
||||
case GitHubSyncScope.Organization:
|
||||
ScopeComponents = (
|
||||
<>
|
||||
<SecretSyncLabel label="Organization">{config.org}</SecretSyncLabel>
|
||||
<SecretSyncLabel className="capitalize" label="Visibility">
|
||||
<GenericFieldLabel label="Organization">{config.org}</GenericFieldLabel>
|
||||
<GenericFieldLabel className="capitalize" label="Visibility">
|
||||
{config.visibility}
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case GitHubSyncScope.RepositoryEnvironment:
|
||||
ScopeComponents = (
|
||||
<>
|
||||
<SecretSyncLabel label="Repository">
|
||||
<GenericFieldLabel label="Repository">
|
||||
{config.owner}/{config.repo}
|
||||
</SecretSyncLabel>
|
||||
<SecretSyncLabel className="capitalize" label="Environment">
|
||||
</GenericFieldLabel>
|
||||
<GenericFieldLabel className="capitalize" label="Environment">
|
||||
{config.env}
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -52,9 +52,9 @@ export const GitHubSyncReviewFields = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SecretSyncLabel className="capitalize" label="Scope">
|
||||
<GenericFieldLabel className="capitalize" label="Scope">
|
||||
{config.scope.replace("-", " ")}
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
{ScopeComponents}
|
||||
</>
|
||||
);
|
||||
|
||||
+4
-4
@@ -1,6 +1,6 @@
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { SecretSync } from "@app/hooks/api/secretSyncs";
|
||||
import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
|
||||
@@ -14,10 +14,10 @@ export const HumanitecSyncReviewFields = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SecretSyncLabel label="Organization">{orgId}</SecretSyncLabel>
|
||||
<SecretSyncLabel label="Application">{appId}</SecretSyncLabel>
|
||||
<GenericFieldLabel label="Organization">{orgId}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Application">{appId}</GenericFieldLabel>
|
||||
{scope === HumanitecSyncScope.Environment && (
|
||||
<SecretSyncLabel label="Environment">{envId}</SecretSyncLabel>
|
||||
<GenericFieldLabel label="Environment">{envId}</GenericFieldLabel>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
+12
-12
@@ -1,7 +1,7 @@
|
||||
import { ReactNode } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import { SecretSyncLabel } from "@app/components/secret-syncs";
|
||||
import { GenericFieldLabel } from "@app/components/secret-syncs";
|
||||
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
|
||||
import { Badge } from "@app/components/v2";
|
||||
import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
|
||||
@@ -83,8 +83,8 @@ export const SecretSyncReviewFields = () => {
|
||||
<span className="text-sm text-mineshaft-300">Source</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<SecretSyncLabel label="Environment">{environment.name}</SecretSyncLabel>
|
||||
<SecretSyncLabel label="Secret Path">{secretPath}</SecretSyncLabel>
|
||||
<GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Secret Path">{secretPath}</GenericFieldLabel>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
@@ -92,7 +92,7 @@ export const SecretSyncReviewFields = () => {
|
||||
<span className="text-sm text-mineshaft-300">Destination</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<SecretSyncLabel label="Connection">{connection.name}</SecretSyncLabel>
|
||||
<GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>
|
||||
{DestinationFieldsComponent}
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,21 +101,21 @@ export const SecretSyncReviewFields = () => {
|
||||
<span className="text-sm text-mineshaft-300">Sync Options</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<SecretSyncLabel label="Auto-Sync">
|
||||
<GenericFieldLabel label="Auto-Sync">
|
||||
<Badge variant={isAutoSyncEnabled ? "success" : "danger"}>
|
||||
{isAutoSyncEnabled ? "Enabled" : "Disabled"}
|
||||
</Badge>
|
||||
</SecretSyncLabel>
|
||||
<SecretSyncLabel label="Initial Sync Behavior">
|
||||
</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Initial Sync Behavior">
|
||||
{SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP[initialSyncBehavior](destinationName).name}
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
{/* <SecretSyncLabel label="Prepend Prefix">{prependPrefix}</SecretSyncLabel>
|
||||
<SecretSyncLabel label="Append Suffix">{appendSuffix}</SecretSyncLabel> */}
|
||||
{AdditionalSyncOptionsFieldsComponent}
|
||||
{disableSecretDeletion && (
|
||||
<SecretSyncLabel label="Secret Deletion">
|
||||
<GenericFieldLabel label="Secret Deletion">
|
||||
<Badge variant="primary">Disabled</Badge>
|
||||
</SecretSyncLabel>
|
||||
</GenericFieldLabel>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,8 +124,8 @@ export const SecretSyncReviewFields = () => {
|
||||
<span className="text-sm text-mineshaft-300">Details</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-2">
|
||||
<SecretSyncLabel label="Name">{name}</SecretSyncLabel>
|
||||
<SecretSyncLabel label="Description">{description}</SecretSyncLabel>
|
||||
<GenericFieldLabel label="Name">{name}</GenericFieldLabel>
|
||||
<GenericFieldLabel label="Description">{description}</GenericFieldLabel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
export * from "../v2/GenericFieldLabel";
|
||||
export * from "./CreateSecretSyncModal";
|
||||
export * from "./DeleteSecretSyncModal";
|
||||
export * from "./EditSecretSyncModal";
|
||||
export * from "./SecretSyncImportSecretsModal";
|
||||
export * from "./SecretSyncImportStatusBadge";
|
||||
export * from "./SecretSyncLabel";
|
||||
export * from "./SecretSyncRemoveSecretsModal";
|
||||
export * from "./SecretSyncRemoveStatusBadge";
|
||||
export * from "./SecretSyncStatusBadge";
|
||||
|
||||
@@ -9,7 +9,7 @@ interface IProps {
|
||||
|
||||
export const Blur = ({ className, tooltipText }: IProps) => {
|
||||
return (
|
||||
<Tooltip content={tooltipText} isDisabled={!tooltipText}>
|
||||
<Tooltip content={tooltipText} className="max-w-md" isDisabled={!tooltipText}>
|
||||
<div
|
||||
className={twMerge("flex w-80 flex-grow items-center py-1 pl-4 pr-2", className)}
|
||||
tabIndex={0}
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import { ChangeEventHandler, useState } from "react";
|
||||
import { DayPicker, DayPickerProps } from "react-day-picker";
|
||||
import { DayPicker, DayPickerProps, getDefaultClassNames, UI } from "react-day-picker";
|
||||
import { faCalendar } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { PopoverContentProps, PopoverProps } from "@radix-ui/react-popover";
|
||||
import { format, setHours, setMinutes } from "date-fns";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Button } from "../Button";
|
||||
import { Input } from "../Input";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "../Popoverv2";
|
||||
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
|
||||
value?: Date;
|
||||
onChange: (date?: Date) => void;
|
||||
@@ -58,7 +61,30 @@ export const DatePicker = ({
|
||||
{value ? format(value, dateFormat) : "Pick a date and time"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-fit p-2" {...popUpContentProps}>
|
||||
<PopoverContent
|
||||
{...popUpContentProps}
|
||||
className={twMerge(
|
||||
"w-fit border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter",
|
||||
popUpContentProps.className
|
||||
)}
|
||||
>
|
||||
<div className="px-2 pt-4">
|
||||
<DayPicker
|
||||
{...props}
|
||||
mode="single"
|
||||
selected={value}
|
||||
onSelect={handleDaySelect}
|
||||
className="font-inter text-mineshaft-200"
|
||||
classNames={{
|
||||
today: "text-primary border-primary",
|
||||
selected: " text-mineshaft-100 bg-mineshaft-500",
|
||||
root: `text-mineshaft-300 ${defaultClassNames}`,
|
||||
[UI.DayButton]: "p-3 rounded hover:text-mineshaft-100",
|
||||
[UI.Weekday]: "px-3 pt-3",
|
||||
[UI.Chevron]: "fill-mineshaft-300"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-4 my-4">
|
||||
<Input
|
||||
type="time"
|
||||
@@ -67,17 +93,6 @@ export const DatePicker = ({
|
||||
className="bg-mineshaft-700 text-white [color-scheme:dark]"
|
||||
/>
|
||||
</div>
|
||||
<DayPicker
|
||||
{...props}
|
||||
mode="single"
|
||||
selected={value}
|
||||
onSelect={handleDaySelect}
|
||||
modifiersStyles={{
|
||||
selected: {
|
||||
background: "#cad62d"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
|
||||
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
|
||||
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
|
||||
import { ReactNode } from "@tanstack/react-router";
|
||||
import { cva, VariantProps } from "cva";
|
||||
import { EditorState, LexicalEditor } from "lexical";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { HighlightNode } from "./EditorHighlight";
|
||||
import { EditorPlaceholderPlugin } from "./EditorPlaceholderPlugin";
|
||||
|
||||
// Catch any errors that occur during Lexical updates and log them
|
||||
// or throw them as needed. If you don't throw them, Lexical will
|
||||
// try to recover gracefully without losing user data.
|
||||
function onError(error: Error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
const inputVariants = cva(
|
||||
"input w-full py-[0.375rem] text-gray-400 placeholder:text-sm placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2 hover:ring-bunker-400/60 duration-100",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: ["text-xs"],
|
||||
sm: ["text-sm"],
|
||||
md: ["text-md"],
|
||||
lg: ["text-lg"]
|
||||
},
|
||||
isRounded: {
|
||||
true: ["rounded-md"],
|
||||
false: ""
|
||||
},
|
||||
variant: {
|
||||
filled: ["bg-mineshaft-900", "text-gray-400"],
|
||||
outline: ["bg-transparent"],
|
||||
plain: "bg-transparent outline-none"
|
||||
},
|
||||
isError: {
|
||||
true: "focus:ring-red/50 placeholder-red-300",
|
||||
false: "focus:ring-primary-400/50 focus:ring-1"
|
||||
}
|
||||
},
|
||||
compoundVariants: []
|
||||
}
|
||||
);
|
||||
|
||||
const inputParentContainerVariants = cva("inline-flex font-inter items-center border relative", {
|
||||
variants: {
|
||||
isRounded: {
|
||||
true: ["rounded-md"],
|
||||
false: ""
|
||||
},
|
||||
isError: {
|
||||
true: "border-red",
|
||||
false: "border-mineshaft-500"
|
||||
},
|
||||
isFullWidth: {
|
||||
true: "w-full",
|
||||
false: ""
|
||||
},
|
||||
variant: {
|
||||
filled: ["bg-bunker-800", "text-gray-400"],
|
||||
outline: ["bg-transparent"],
|
||||
plain: "border-none"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
type Props = Omit<
|
||||
InputHTMLAttributes<HTMLDivElement>,
|
||||
"size" | "onChange" | "placeholder" | "aria-placeholder"
|
||||
> &
|
||||
VariantProps<typeof inputVariants> & {
|
||||
children?: ReactNode;
|
||||
namespace?: string;
|
||||
placeholder?: string;
|
||||
isFullWidth?: boolean;
|
||||
isRequired?: boolean;
|
||||
leftIcon?: ReactNode;
|
||||
rightIcon?: ReactNode;
|
||||
isDisabled?: boolean;
|
||||
isReadOnly?: boolean;
|
||||
containerClassName?: string;
|
||||
onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void;
|
||||
initialValue?: string;
|
||||
};
|
||||
|
||||
export const Editor = forwardRef<HTMLDivElement, Props>(
|
||||
(
|
||||
{
|
||||
children,
|
||||
namespace = "infisical-editor",
|
||||
className,
|
||||
containerClassName,
|
||||
isRounded = true,
|
||||
isFullWidth = true,
|
||||
isDisabled,
|
||||
isError = false,
|
||||
isRequired,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
variant = "filled",
|
||||
size = "md",
|
||||
isReadOnly,
|
||||
placeholder,
|
||||
onChange,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const initialConfig: InitialConfigType = {
|
||||
namespace,
|
||||
onError,
|
||||
nodes: [HighlightNode]
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={inputParentContainerVariants({
|
||||
isRounded,
|
||||
isError,
|
||||
isFullWidth,
|
||||
variant,
|
||||
className: containerClassName
|
||||
})}
|
||||
>
|
||||
{leftIcon && <span className="absolute left-0 ml-3 text-sm">{leftIcon}</span>}
|
||||
<LexicalComposer initialConfig={initialConfig}>
|
||||
<PlainTextPlugin
|
||||
contentEditable={
|
||||
<ContentEditable
|
||||
ref={ref}
|
||||
aria-required={isRequired}
|
||||
readOnly={isReadOnly}
|
||||
disabled={isDisabled}
|
||||
className={twMerge(
|
||||
leftIcon ? "pl-10" : "pl-2.5",
|
||||
rightIcon ? "pr-10" : "pr-2.5",
|
||||
inputVariants({ className, isError, size, isRounded, variant })
|
||||
)}
|
||||
{...props}
|
||||
placeholder={null}
|
||||
/>
|
||||
}
|
||||
ErrorBoundary={LexicalErrorBoundary}
|
||||
/>
|
||||
<OnChangePlugin onChange={onChange} />
|
||||
<EditorPlaceholderPlugin placeholder={placeholder} />
|
||||
{children}
|
||||
</LexicalComposer>
|
||||
{rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,127 @@
|
||||
/* eslint-disable no-underscore-dangle,@typescript-eslint/class-methods-use-this */
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import { useLexicalTextEntity } from "@lexical/react/useLexicalTextEntity";
|
||||
import {
|
||||
$applyNodeReplacement,
|
||||
EditorConfig,
|
||||
LexicalNode,
|
||||
SerializedTextNode,
|
||||
Spread,
|
||||
TextNode
|
||||
} from "lexical";
|
||||
|
||||
type HighlightTheme = { contentClassName: string };
|
||||
type Trigger = { startTrigger: string; endTrigger: string };
|
||||
|
||||
export type SerializedHighlightNode = Spread<
|
||||
{
|
||||
__highlightTheme: HighlightTheme;
|
||||
__trigger: Trigger;
|
||||
},
|
||||
SerializedTextNode
|
||||
>;
|
||||
|
||||
export class HighlightNode extends TextNode {
|
||||
__highlightTheme: HighlightTheme;
|
||||
__trigger: Trigger;
|
||||
|
||||
constructor(
|
||||
text: string,
|
||||
highlightTheme: HighlightTheme = {
|
||||
contentClassName: "ph-no-capture text-yellow-200/80"
|
||||
},
|
||||
trigger: Trigger = { startTrigger: "${", endTrigger: "}" },
|
||||
key?: string
|
||||
) {
|
||||
super(text, key);
|
||||
this.__highlightTheme = highlightTheme;
|
||||
this.__trigger = trigger;
|
||||
}
|
||||
|
||||
static getType(): string {
|
||||
return "highlight";
|
||||
}
|
||||
|
||||
static clone(node: HighlightNode): HighlightNode {
|
||||
return new HighlightNode(node.__text, node.__highlightTheme, node.__trigger, node.__key);
|
||||
}
|
||||
|
||||
static importJSON(serializedNode: SerializedHighlightNode): HighlightNode {
|
||||
return $applyNodeReplacement(new HighlightNode("")).updateFromJSON(serializedNode);
|
||||
}
|
||||
|
||||
createDOM(config: EditorConfig): HTMLElement {
|
||||
const dom = super.createDOM(config);
|
||||
dom.style.cursor = "default";
|
||||
dom.className = this.__highlightTheme.contentClassName;
|
||||
return dom;
|
||||
}
|
||||
|
||||
canInsertTextBefore(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
canInsertTextAfter(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
isTextEntity(): true {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export function $createKeywordNode(keyword: string = ""): HighlightNode {
|
||||
return $applyNodeReplacement(new HighlightNode(keyword));
|
||||
}
|
||||
|
||||
export function $isKeywordNode(node: LexicalNode | null | undefined): boolean {
|
||||
return node instanceof HighlightNode;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
contentClassName?: string;
|
||||
startTrigger?: string;
|
||||
endTrigger?: string;
|
||||
};
|
||||
|
||||
export const EditorHighlightPlugin = ({
|
||||
endTrigger = "}",
|
||||
startTrigger = "${",
|
||||
contentClassName = "ph-no-capture text-yellow-200/80"
|
||||
}: Props) => {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([HighlightNode])) {
|
||||
throw new Error("HighlightsPlugin: HighlightsNode not registered on editor");
|
||||
}
|
||||
}, [editor]);
|
||||
|
||||
const createKeywordNode = useCallback((textNode: TextNode): HighlightNode => {
|
||||
return $applyNodeReplacement(
|
||||
new HighlightNode(
|
||||
textNode.getTextContent(),
|
||||
{ contentClassName },
|
||||
{ startTrigger, endTrigger }
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
const getKeywordMatch = useCallback((text: string) => {
|
||||
for (let i = 0; i < text.length; i += 1) {
|
||||
if (text.slice(i, i + 2) === startTrigger) {
|
||||
const closingBracketIndex = text.indexOf(endTrigger, i + 2);
|
||||
if (closingBracketIndex !== -1) {
|
||||
return { start: i, end: closingBracketIndex + 1 };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}, []);
|
||||
|
||||
useLexicalTextEntity<HighlightNode>(getKeywordMatch, HighlightNode, createKeywordNode);
|
||||
|
||||
return null;
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useEffect } from "react";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import { useLexicalIsTextContentEmpty } from "@lexical/react/useLexicalIsTextContentEmpty";
|
||||
|
||||
export const EditorPlaceholderPlugin = ({ placeholder }: { placeholder: string | undefined }) => {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
const isEmpty = useLexicalIsTextContentEmpty(editor);
|
||||
|
||||
/* Set the placeholder on root. */
|
||||
useEffect(() => {
|
||||
const rootElement = editor.getRootElement() as HTMLElement;
|
||||
if (rootElement) {
|
||||
if (isEmpty && placeholder) {
|
||||
rootElement.setAttribute("placeholder", placeholder);
|
||||
} else {
|
||||
rootElement.removeAttribute("placeholder");
|
||||
}
|
||||
}
|
||||
}, [editor, isEmpty]); // eslint-disable-line
|
||||
|
||||
return null;
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
export { Editor } from "./Editor";
|
||||
export { EditorHighlightPlugin } from "./EditorHighlight";
|
||||
+1
-1
@@ -8,7 +8,7 @@ type Props = {
|
||||
labelClassName?: string;
|
||||
};
|
||||
|
||||
export const SecretSyncLabel = ({ label, children, className, labelClassName }: Props) => {
|
||||
export const GenericFieldLabel = ({ label, children, className, labelClassName }: Props) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
<p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./GenericFieldLabel";
|
||||
@@ -0,0 +1,27 @@
|
||||
import { ReactNode } from "react";
|
||||
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const NoticeBannerV2 = ({ title, children, className }: Props) => {
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="mb-1 flex items-center text-sm">
|
||||
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
|
||||
{title}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -9,12 +9,12 @@ type Props = {
|
||||
};
|
||||
|
||||
export const PageHeader = ({ title, description, children, className }: Props) => (
|
||||
<div className={twMerge("mb-4", className)}>
|
||||
<div className={twMerge("mb-4 w-full", className)}>
|
||||
<div className="flex w-full justify-between">
|
||||
<div className="w-full">
|
||||
<h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
<div className="flex items-center">{children}</div>
|
||||
</div>
|
||||
<div className="mt-2 text-gray-400">{description}</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { faCheck, faCopy, faKey, faRefresh } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { Button, Checkbox, IconButton, Slider } from "@app/components/v2";
|
||||
import { useTimedReset } from "@app/hooks";
|
||||
|
||||
type PasswordOptionsType = {
|
||||
length: number;
|
||||
useUppercase: boolean;
|
||||
useLowercase: boolean;
|
||||
useNumbers: boolean;
|
||||
useSpecialChars: boolean;
|
||||
};
|
||||
|
||||
type PasswordGeneratorModalProps = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onUsePassword?: (password: string) => void;
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
};
|
||||
|
||||
const PasswordGeneratorModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onUsePassword,
|
||||
minLength = 12,
|
||||
maxLength = 64
|
||||
}: PasswordGeneratorModalProps) => {
|
||||
const [copyText, isCopying, setCopyText] = useTimedReset<string>({
|
||||
initialState: "Copy"
|
||||
});
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [passwordOptions, setPasswordOptions] = useState<PasswordOptionsType>({
|
||||
length: minLength,
|
||||
useUppercase: true,
|
||||
useLowercase: true,
|
||||
useNumbers: true,
|
||||
useSpecialChars: true
|
||||
});
|
||||
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const generatePassword = () => {
|
||||
const charset = {
|
||||
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
|
||||
lowercase: "abcdefghijklmnopqrstuvwxyz",
|
||||
numbers: "0123456789",
|
||||
specialChars: "-_.~!*"
|
||||
};
|
||||
|
||||
let availableChars = "";
|
||||
if (passwordOptions.useUppercase) availableChars += charset.uppercase;
|
||||
if (passwordOptions.useLowercase) availableChars += charset.lowercase;
|
||||
if (passwordOptions.useNumbers) availableChars += charset.numbers;
|
||||
if (passwordOptions.useSpecialChars) availableChars += charset.specialChars;
|
||||
|
||||
if (availableChars === "") availableChars = charset.lowercase + charset.numbers;
|
||||
|
||||
let newPassword = "";
|
||||
for (let i = 0; i < passwordOptions.length; i += 1) {
|
||||
const randomIndex = Math.floor(Math.random() * availableChars.length);
|
||||
newPassword += availableChars[randomIndex];
|
||||
}
|
||||
|
||||
return newPassword;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
return () => {};
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
const password = useMemo(() => {
|
||||
return generatePassword();
|
||||
}, [passwordOptions, refresh]);
|
||||
|
||||
const copyToClipboard = () => {
|
||||
navigator.clipboard
|
||||
.writeText(password)
|
||||
.then(() => {
|
||||
setCopyText("Copied");
|
||||
})
|
||||
.catch(() => {
|
||||
setCopyText("Copy failed");
|
||||
});
|
||||
};
|
||||
|
||||
const usePassword = () => {
|
||||
if (onUsePassword) {
|
||||
onUsePassword(password);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="w-full max-w-lg rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-xl"
|
||||
>
|
||||
<div className="p-6">
|
||||
<h2 className="mb-1 text-xl font-semibold text-bunker-200">Password Generator</h2>
|
||||
<p className="mb-6 text-sm text-bunker-400">Generate strong unique passwords</p>
|
||||
|
||||
<div className="relative mb-4 rounded-md bg-mineshaft-900 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="w-4/5 select-all break-all pr-2 font-mono text-lg">{password}</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Button
|
||||
size="xs"
|
||||
colorSchema="secondary"
|
||||
variant="outline_bg"
|
||||
onClick={() => setRefresh((prev) => !prev)}
|
||||
className="w-full text-bunker-300 hover:text-bunker-100"
|
||||
>
|
||||
<FontAwesomeIcon icon={faRefresh} className="mr-1 h-3 w-3" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="xs"
|
||||
colorSchema="secondary"
|
||||
variant="outline_bg"
|
||||
onClick={copyToClipboard}
|
||||
className="w-full text-bunker-300 hover:text-bunker-100"
|
||||
>
|
||||
<FontAwesomeIcon icon={isCopying ? faCheck : faCopy} className="mr-1 h-3 w-3" />
|
||||
{copyText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<label htmlFor="password-length" className="text-sm text-bunker-300">
|
||||
Password length: {passwordOptions.length}
|
||||
</label>
|
||||
</div>
|
||||
<Slider
|
||||
id="password-length"
|
||||
min={minLength}
|
||||
max={maxLength}
|
||||
value={passwordOptions.length}
|
||||
onChange={(value) => setPasswordOptions({ ...passwordOptions, length: value })}
|
||||
className="mb-1"
|
||||
aria-labelledby="password-length-label"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 flex flex-row justify-between gap-2">
|
||||
<Checkbox
|
||||
id="useUppercase"
|
||||
className="mr-2 data-[state=checked]:bg-primary"
|
||||
isChecked={passwordOptions.useUppercase}
|
||||
onCheckedChange={(checked) =>
|
||||
setPasswordOptions({ ...passwordOptions, useUppercase: checked as boolean })
|
||||
}
|
||||
>
|
||||
A-Z
|
||||
</Checkbox>
|
||||
|
||||
<Checkbox
|
||||
id="useLowercase"
|
||||
className="mr-2 data-[state=checked]:bg-primary"
|
||||
isChecked={passwordOptions.useLowercase}
|
||||
onCheckedChange={(checked) =>
|
||||
setPasswordOptions({ ...passwordOptions, useLowercase: checked as boolean })
|
||||
}
|
||||
>
|
||||
a-z
|
||||
</Checkbox>
|
||||
|
||||
<Checkbox
|
||||
id="useNumbers"
|
||||
className="mr-2 data-[state=checked]:bg-primary"
|
||||
isChecked={passwordOptions.useNumbers}
|
||||
onCheckedChange={(checked) =>
|
||||
setPasswordOptions({ ...passwordOptions, useNumbers: checked as boolean })
|
||||
}
|
||||
>
|
||||
0-9
|
||||
</Checkbox>
|
||||
|
||||
<Checkbox
|
||||
id="useSpecialChars"
|
||||
className="mr-2 data-[state=checked]:bg-primary"
|
||||
isChecked={passwordOptions.useSpecialChars}
|
||||
onCheckedChange={(checked) =>
|
||||
setPasswordOptions({ ...passwordOptions, useSpecialChars: checked as boolean })
|
||||
}
|
||||
>
|
||||
-_.~!*
|
||||
</Checkbox>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button size="sm" colorSchema="primary" variant="outline_bg" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
{onUsePassword && (
|
||||
<Button
|
||||
size="sm"
|
||||
colorSchema="primary"
|
||||
variant="outline_bg"
|
||||
onClick={usePassword}
|
||||
className="ml-2"
|
||||
>
|
||||
Use Password
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export type PasswordGeneratorProps = {
|
||||
onUsePassword?: (password: string) => void;
|
||||
isDisabled?: boolean;
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
};
|
||||
|
||||
export const PasswordGenerator = ({
|
||||
onUsePassword,
|
||||
isDisabled = false,
|
||||
minLength = 12,
|
||||
maxLength = 64
|
||||
}: PasswordGeneratorProps) => {
|
||||
const [showGenerator, setShowGenerator] = useState(false);
|
||||
|
||||
const toggleGenerator = () => {
|
||||
setShowGenerator(!showGenerator);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
ariaLabel="generate password"
|
||||
colorSchema="secondary"
|
||||
size="sm"
|
||||
onClick={toggleGenerator}
|
||||
isDisabled={isDisabled}
|
||||
className="rounded text-bunker-400 transition-colors duration-150 hover:bg-mineshaft-700 hover:text-bunker-200"
|
||||
>
|
||||
<FontAwesomeIcon icon={faKey} />
|
||||
</IconButton>
|
||||
|
||||
<PasswordGeneratorModal
|
||||
isOpen={showGenerator}
|
||||
onClose={() => setShowGenerator(false)}
|
||||
onUsePassword={onUsePassword}
|
||||
minLength={minLength}
|
||||
maxLength={maxLength}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
export type { PasswordGeneratorProps } from "./PasswordGenerator";
|
||||
export { PasswordGenerator } from "./PasswordGenerator";
|
||||
@@ -0,0 +1,237 @@
|
||||
import {
|
||||
forwardRef,
|
||||
InputHTMLAttributes,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState
|
||||
} from "react";
|
||||
import { cva, VariantProps } from "cva";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type Props = {
|
||||
min: number;
|
||||
max: number;
|
||||
step?: number;
|
||||
isDisabled?: boolean;
|
||||
isRequired?: boolean;
|
||||
showValue?: boolean;
|
||||
valuePosition?: "top" | "right";
|
||||
containerClassName?: string;
|
||||
trackClassName?: string;
|
||||
fillClassName?: string;
|
||||
thumbClassName?: string;
|
||||
onChange?: (value: number) => void;
|
||||
onChangeComplete?: (value: number) => void;
|
||||
};
|
||||
|
||||
const sliderTrackVariants = cva("h-1 w-full bg-mineshaft-600 rounded-full relative", {
|
||||
variants: {
|
||||
variant: {
|
||||
default: "",
|
||||
thin: "h-0.5",
|
||||
thick: "h-1.5"
|
||||
},
|
||||
isDisabled: {
|
||||
true: "opacity-50 cursor-not-allowed",
|
||||
false: ""
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const sliderFillVariants = cva("absolute h-full rounded-full", {
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary-500",
|
||||
secondary: "bg-secondary-500",
|
||||
danger: "bg-red-500"
|
||||
},
|
||||
isDisabled: {
|
||||
true: "opacity-50",
|
||||
false: ""
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const sliderThumbVariants = cva(
|
||||
"absolute w-4 h-4 rounded-full shadow transform -translate-x-1/2 -mt-1.5 focus:outline-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary-500 focus:ring-2 focus:ring-primary-400/50",
|
||||
secondary: "bg-secondary-500 focus:ring-2 focus:ring-secondary-400/50",
|
||||
danger: "bg-red-500 focus:ring-2 focus:ring-red-400/50"
|
||||
},
|
||||
isDisabled: {
|
||||
true: "opacity-50 cursor-not-allowed",
|
||||
false: "cursor-pointer"
|
||||
},
|
||||
size: {
|
||||
sm: "w-3 h-3 -mt-1",
|
||||
md: "w-4 h-4 -mt-1.5",
|
||||
lg: "w-5 h-5 -mt-2"
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const sliderContainerVariants = cva("relative inline-flex font-inter", {
|
||||
variants: {
|
||||
isFullWidth: {
|
||||
true: "w-full",
|
||||
false: ""
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> &
|
||||
VariantProps<typeof sliderTrackVariants> &
|
||||
VariantProps<typeof sliderThumbVariants> &
|
||||
VariantProps<typeof sliderContainerVariants> &
|
||||
Props;
|
||||
|
||||
export const Slider = forwardRef<HTMLInputElement, SliderProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
containerClassName,
|
||||
trackClassName,
|
||||
fillClassName,
|
||||
thumbClassName,
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
value,
|
||||
defaultValue,
|
||||
isDisabled = false,
|
||||
isFullWidth = true,
|
||||
isRequired = false,
|
||||
showValue = false,
|
||||
valuePosition = "top",
|
||||
variant = "default",
|
||||
size = "md",
|
||||
onChange,
|
||||
onChangeComplete,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
): JSX.Element => {
|
||||
let initialValue = min;
|
||||
if (value !== undefined) {
|
||||
initialValue = Number(value);
|
||||
} else if (defaultValue !== undefined) {
|
||||
initialValue = Number(defaultValue);
|
||||
}
|
||||
|
||||
const [currentValue, setCurrentValue] = useState<number>(initialValue);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const percentage = Math.max(0, Math.min(100, ((currentValue - min) / (max - min)) * 100));
|
||||
|
||||
useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (value !== undefined && Number(value) !== currentValue) {
|
||||
setCurrentValue(Number(value));
|
||||
}
|
||||
}, [value, currentValue]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = Number(e.target.value);
|
||||
setCurrentValue(newValue);
|
||||
onChange?.(newValue);
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const handleMouseDown = useCallback(() => {
|
||||
if (!isDisabled) {
|
||||
setIsDragging(true);
|
||||
}
|
||||
}, [isDisabled]);
|
||||
|
||||
const handleChangeComplete = useCallback(() => {
|
||||
if (isDragging) {
|
||||
onChangeComplete?.(currentValue);
|
||||
setIsDragging(false);
|
||||
}
|
||||
}, [isDragging, currentValue, onChangeComplete]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDragging) {
|
||||
const handleGlobalMouseUp = () => handleChangeComplete();
|
||||
|
||||
document.addEventListener("mouseup", handleGlobalMouseUp);
|
||||
document.addEventListener("touchend", handleGlobalMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mouseup", handleGlobalMouseUp);
|
||||
document.removeEventListener("touchend", handleGlobalMouseUp);
|
||||
};
|
||||
}
|
||||
return () => {};
|
||||
}, [isDragging, handleChangeComplete]);
|
||||
|
||||
const ValueDisplay = showValue ? (
|
||||
<div className="text-xs text-bunker-300">{currentValue}</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
sliderContainerVariants({ isFullWidth, className: containerClassName }),
|
||||
"my-2"
|
||||
)}
|
||||
>
|
||||
{showValue && valuePosition === "top" && ValueDisplay}
|
||||
|
||||
<div className="relative flex w-full items-center">
|
||||
<div
|
||||
className={twMerge(
|
||||
sliderTrackVariants({ variant, isDisabled, className: trackClassName })
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
sliderFillVariants({ variant, isDisabled, className: fillClassName }),
|
||||
"left-0"
|
||||
)}
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
sliderThumbVariants({ variant, isDisabled, size, className: thumbClassName })
|
||||
)}
|
||||
style={{ left: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={currentValue}
|
||||
onChange={handleChange}
|
||||
onMouseDown={handleMouseDown}
|
||||
onTouchStart={handleMouseDown}
|
||||
disabled={isDisabled}
|
||||
required={isRequired}
|
||||
ref={inputRef}
|
||||
className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
|
||||
{...props}
|
||||
/>
|
||||
|
||||
{showValue && valuePosition === "right" && (
|
||||
<div className="ml-2 text-xs text-bunker-300">{currentValue}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Slider.displayName = "Slider";
|
||||
@@ -0,0 +1,2 @@
|
||||
export type { SliderProps } from "./Slider";
|
||||
export { Slider } from "./Slider";
|
||||
@@ -11,23 +11,28 @@ export * from "./DatePicker";
|
||||
export * from "./DeleteActionModal";
|
||||
export * from "./Drawer";
|
||||
export * from "./Dropdown";
|
||||
export * from "./Editor";
|
||||
export * from "./EmailServiceSetupModal";
|
||||
export * from "./EmptyState";
|
||||
export * from "./FilterableSelect";
|
||||
export * from "./FontAwesomeSymbol";
|
||||
export * from "./FormControl";
|
||||
export * from "./GenericFieldLabel";
|
||||
export * from "./HoverCardv2";
|
||||
export * from "./IconButton";
|
||||
export * from "./Input";
|
||||
export * from "./Menu";
|
||||
export * from "./Modal";
|
||||
export * from "./NoticeBanner";
|
||||
export * from "./NoticeBannerV2";
|
||||
export * from "./PageHeader";
|
||||
export * from "./Pagination";
|
||||
export * from "./PasswordGenerator";
|
||||
export * from "./Popoverv2";
|
||||
export * from "./SecretInput";
|
||||
export * from "./Select";
|
||||
export * from "./Skeleton";
|
||||
export * from "./Slider";
|
||||
export * from "./Spinner";
|
||||
export * from "./Stepper";
|
||||
export * from "./Switch";
|
||||
|
||||
@@ -77,6 +77,15 @@ export enum ProjectPermissionGroupActions {
|
||||
GrantPrivileges = "grant-privileges"
|
||||
}
|
||||
|
||||
export enum ProjectPermissionSecretRotationActions {
|
||||
Read = "read",
|
||||
ReadGeneratedCredentials = "read-generated-credentials",
|
||||
Create = "create",
|
||||
Edit = "edit",
|
||||
Delete = "delete",
|
||||
RotateSecrets = "rotate-secrets"
|
||||
}
|
||||
|
||||
export enum PermissionConditionOperators {
|
||||
$IN = "$in",
|
||||
$ALL = "$all",
|
||||
@@ -171,6 +180,11 @@ export type SecretImportSubjectFields = {
|
||||
secretPath: string;
|
||||
};
|
||||
|
||||
export type SecretRotationSubjectFields = {
|
||||
environment: string;
|
||||
secretPath: string;
|
||||
};
|
||||
|
||||
export type ProjectPermissionSet =
|
||||
| [
|
||||
ProjectPermissionSecretActions,
|
||||
@@ -200,6 +214,13 @@ export type ProjectPermissionSet =
|
||||
| (ForcedSubject<ProjectPermissionSub.SecretImports> & SecretImportSubjectFields)
|
||||
)
|
||||
]
|
||||
| [
|
||||
ProjectPermissionSecretRotationActions,
|
||||
(
|
||||
| ProjectPermissionSub.SecretRotation
|
||||
| (ForcedSubject<ProjectPermissionSub.SecretRotation> & SecretRotationSubjectFields)
|
||||
)
|
||||
]
|
||||
| [ProjectPermissionActions, ProjectPermissionSub.Role]
|
||||
| [ProjectPermissionActions, ProjectPermissionSub.Tags]
|
||||
| [ProjectPermissionActions, ProjectPermissionSub.Member]
|
||||
@@ -212,7 +233,6 @@ export type ProjectPermissionSet =
|
||||
| [ProjectPermissionActions, ProjectPermissionSub.Settings]
|
||||
| [ProjectPermissionActions, ProjectPermissionSub.ServiceTokens]
|
||||
| [ProjectPermissionActions, ProjectPermissionSub.SecretApproval]
|
||||
| [ProjectPermissionActions, ProjectPermissionSub.SecretRotation]
|
||||
| [
|
||||
ProjectPermissionActions,
|
||||
(
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
import { faGithub } from "@fortawesome/free-brands-svg-icons";
|
||||
import { faKey, faPassport, faUser } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faKey, faLock, faPassport, faUser } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import {
|
||||
AwsConnectionMethod,
|
||||
AzureAppConfigurationConnectionMethod,
|
||||
AzureKeyVaultConnectionMethod,
|
||||
DatabricksConnectionMethod,
|
||||
GcpConnectionMethod,
|
||||
GitHubConnectionMethod,
|
||||
HumanitecConnectionMethod,
|
||||
MsSqlConnectionMethod,
|
||||
PostgresConnectionMethod,
|
||||
TAppConnection
|
||||
} from "@app/hooks/api/appConnections/types";
|
||||
import { DatabricksConnectionMethod } from "@app/hooks/api/appConnections/types/databricks-connection";
|
||||
import { HumanitecConnectionMethod } from "@app/hooks/api/appConnections/types/humanitec-connection";
|
||||
|
||||
export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: string }> = {
|
||||
[AppConnection.AWS]: { name: "AWS", image: "Amazon Web Services.png" },
|
||||
@@ -26,7 +28,9 @@ export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: st
|
||||
image: "Microsoft Azure.png"
|
||||
},
|
||||
[AppConnection.Databricks]: { name: "Databricks", image: "Databricks.png" },
|
||||
[AppConnection.Humanitec]: { name: "Humanitec", image: "Humanitec.png" }
|
||||
[AppConnection.Humanitec]: { name: "Humanitec", image: "Humanitec.png" },
|
||||
[AppConnection.Postgres]: { name: "PostgreSQL", image: "Postgres.png" },
|
||||
[AppConnection.MsSql]: { name: "Microsoft SQL Server", image: "MsSql.png" }
|
||||
};
|
||||
|
||||
export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
|
||||
@@ -45,8 +49,11 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
|
||||
return { name: "Service Account Impersonation", icon: faUser };
|
||||
case DatabricksConnectionMethod.ServicePrincipal:
|
||||
return { name: "Service Principal", icon: faUser };
|
||||
case HumanitecConnectionMethod.API_TOKEN:
|
||||
case HumanitecConnectionMethod.ApiToken:
|
||||
return { name: "API Token", icon: faKey };
|
||||
case PostgresConnectionMethod.UsernameAndPassword:
|
||||
case MsSqlConnectionMethod.UsernameAndPassword:
|
||||
return { name: "Username & Password", icon: faLock };
|
||||
default:
|
||||
throw new Error(`Unhandled App Connection Method: ${method}`);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
export const SECRET_ROTATION_MAP: Record<SecretRotation, { name: string; image: string }> = {
|
||||
[SecretRotation.PostgresCredentials]: { name: "PostgreSQL Credentials", image: "Postgres.png" },
|
||||
[SecretRotation.MsSqlCredentials]: {
|
||||
name: "Microsoft SQL Server Credentials",
|
||||
image: "MsSql.png"
|
||||
}
|
||||
};
|
||||
|
||||
export const SECRET_ROTATION_CONNECTION_MAP: Record<SecretRotation, AppConnection> = {
|
||||
[SecretRotation.PostgresCredentials]: AppConnection.Postgres,
|
||||
[SecretRotation.MsSqlCredentials]: AppConnection.MsSql
|
||||
};
|
||||
|
||||
export const getRotateAtLocal = ({ hours, minutes }: TSecretRotationV2["rotateAtUtc"]) => {
|
||||
const now = new Date();
|
||||
|
||||
// convert utc rotation time to local datetime
|
||||
return new Date(
|
||||
Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), hours, minutes, 0, 0)
|
||||
);
|
||||
};
|
||||
@@ -5,5 +5,7 @@ export enum AppConnection {
|
||||
AzureKeyVault = "azure-key-vault",
|
||||
AzureAppConfiguration = "azure-app-configuration",
|
||||
Databricks = "databricks",
|
||||
Humanitec = "humanitec"
|
||||
Humanitec = "humanitec",
|
||||
Postgres = "postgres",
|
||||
MsSql = "mssql"
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
export type TAppConnectionOptionBase = {
|
||||
name: string;
|
||||
methods: string[];
|
||||
supportsPlatformManagement?: boolean;
|
||||
};
|
||||
|
||||
export type TAwsConnectionOption = TAppConnectionOptionBase & {
|
||||
@@ -38,6 +39,14 @@ export type THumanitecConnectionOption = TAppConnectionOptionBase & {
|
||||
app: AppConnection.Humanitec;
|
||||
};
|
||||
|
||||
export type TPostgresConnectionOption = TAppConnectionOptionBase & {
|
||||
app: AppConnection.Postgres;
|
||||
};
|
||||
|
||||
export type TMsSqlConnectionOption = TAppConnectionOptionBase & {
|
||||
app: AppConnection.MsSql;
|
||||
};
|
||||
|
||||
export type TAppConnectionOption =
|
||||
| TAwsConnectionOption
|
||||
| TGitHubConnectionOption
|
||||
@@ -45,7 +54,9 @@ export type TAppConnectionOption =
|
||||
| TAzureAppConfigurationConnectionOption
|
||||
| TAzureKeyVaultConnectionOption
|
||||
| TDatabricksConnectionOption
|
||||
| THumanitecConnectionOption;
|
||||
| THumanitecConnectionOption
|
||||
| TPostgresConnectionOption
|
||||
| TMsSqlConnectionOption;
|
||||
|
||||
export type TAppConnectionOptionMap = {
|
||||
[AppConnection.AWS]: TAwsConnectionOption;
|
||||
@@ -55,4 +66,6 @@ export type TAppConnectionOptionMap = {
|
||||
[AppConnection.AzureAppConfiguration]: TAzureAppConfigurationConnectionOption;
|
||||
[AppConnection.Databricks]: TDatabricksConnectionOption;
|
||||
[AppConnection.Humanitec]: THumanitecConnectionOption;
|
||||
[AppConnection.Postgres]: TPostgresConnectionOption;
|
||||
[AppConnection.MsSql]: TMsSqlConnectionOption;
|
||||
};
|
||||
|
||||
@@ -2,11 +2,11 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
|
||||
|
||||
export enum HumanitecConnectionMethod {
|
||||
API_TOKEN = "api-token"
|
||||
ApiToken = "api-token"
|
||||
}
|
||||
|
||||
export type THumanitecConnection = TRootAppConnection & { app: AppConnection.Humanitec } & {
|
||||
method: HumanitecConnectionMethod.API_TOKEN;
|
||||
method: HumanitecConnectionMethod.ApiToken;
|
||||
credentials: {
|
||||
apiToken: string;
|
||||
};
|
||||
|
||||
@@ -1,20 +1,24 @@
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { TAppConnectionOption } from "@app/hooks/api/appConnections/types/app-options";
|
||||
import { TAwsConnection } from "@app/hooks/api/appConnections/types/aws-connection";
|
||||
import { TDatabricksConnection } from "@app/hooks/api/appConnections/types/databricks-connection";
|
||||
import { TGitHubConnection } from "@app/hooks/api/appConnections/types/github-connection";
|
||||
import { THumanitecConnection } from "@app/hooks/api/appConnections/types/humanitec-connection";
|
||||
|
||||
import { AppConnection } from "../enums";
|
||||
import { TAppConnectionOption } from "./app-options";
|
||||
import { TAwsConnection } from "./aws-connection";
|
||||
import { TAzureAppConfigurationConnection } from "./azure-app-configuration-connection";
|
||||
import { TAzureKeyVaultConnection } from "./azure-key-vault-connection";
|
||||
import { TDatabricksConnection } from "./databricks-connection";
|
||||
import { TGcpConnection } from "./gcp-connection";
|
||||
import { TGitHubConnection } from "./github-connection";
|
||||
import { THumanitecConnection } from "./humanitec-connection";
|
||||
import { TMsSqlConnection } from "./mssql-connection";
|
||||
import { TPostgresConnection } from "./postgres-connection";
|
||||
|
||||
export * from "./aws-connection";
|
||||
export * from "./azure-app-configuration-connection";
|
||||
export * from "./azure-key-vault-connection";
|
||||
export * from "./databricks-connection";
|
||||
export * from "./gcp-connection";
|
||||
export * from "./github-connection";
|
||||
export * from "./humanitec-connection";
|
||||
export * from "./mssql-connection";
|
||||
export * from "./postgres-connection";
|
||||
|
||||
export type TAppConnection =
|
||||
| TAwsConnection
|
||||
@@ -23,7 +27,9 @@ export type TAppConnection =
|
||||
| TAzureKeyVaultConnection
|
||||
| TAzureAppConfigurationConnection
|
||||
| TDatabricksConnection
|
||||
| THumanitecConnection;
|
||||
| THumanitecConnection
|
||||
| TPostgresConnection
|
||||
| TMsSqlConnection;
|
||||
|
||||
export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id">;
|
||||
|
||||
@@ -35,11 +41,11 @@ export type TAvailableAppConnectionsResponse = { appConnections: TAvailableAppCo
|
||||
|
||||
export type TCreateAppConnectionDTO = Pick<
|
||||
TAppConnection,
|
||||
"name" | "credentials" | "method" | "app" | "description"
|
||||
"name" | "credentials" | "method" | "app" | "description" | "isPlatformManagedCredentials"
|
||||
>;
|
||||
|
||||
export type TUpdateAppConnectionDTO = Partial<
|
||||
Pick<TAppConnection, "name" | "credentials" | "description">
|
||||
Pick<TAppConnection, "name" | "credentials" | "description" | "isPlatformManagedCredentials">
|
||||
> & {
|
||||
connectionId: string;
|
||||
app: AppConnection;
|
||||
@@ -58,4 +64,6 @@ export type TAppConnectionMap = {
|
||||
[AppConnection.AzureAppConfiguration]: TAzureAppConfigurationConnection;
|
||||
[AppConnection.Databricks]: TDatabricksConnection;
|
||||
[AppConnection.Humanitec]: THumanitecConnection;
|
||||
[AppConnection.Postgres]: TPostgresConnection;
|
||||
[AppConnection.MsSql]: TMsSqlConnection;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
|
||||
|
||||
import { TBaseSqlConnectionCredentials } from "./shared";
|
||||
|
||||
export enum MsSqlConnectionMethod {
|
||||
UsernameAndPassword = "username-and-password"
|
||||
}
|
||||
|
||||
export type TMsSqlConnection = TRootAppConnection & { app: AppConnection.MsSql } & {
|
||||
method: MsSqlConnectionMethod.UsernameAndPassword;
|
||||
credentials: TBaseSqlConnectionCredentials;
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
|
||||
|
||||
import { TBaseSqlConnectionCredentials } from "./shared";
|
||||
|
||||
export enum PostgresConnectionMethod {
|
||||
UsernameAndPassword = "username-and-password"
|
||||
}
|
||||
|
||||
export type TPostgresConnection = TRootAppConnection & { app: AppConnection.Postgres } & {
|
||||
method: PostgresConnectionMethod.UsernameAndPassword;
|
||||
credentials: TBaseSqlConnectionCredentials;
|
||||
};
|
||||
@@ -6,4 +6,5 @@ export type TRootAppConnection = {
|
||||
orgId: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
isPlatformManagedCredentials?: boolean;
|
||||
};
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./sql-connection";
|
||||
@@ -0,0 +1,9 @@
|
||||
export type TBaseSqlConnectionCredentials = {
|
||||
host: string;
|
||||
port: number;
|
||||
username: string;
|
||||
password: string;
|
||||
database: string;
|
||||
sslEnabled: boolean;
|
||||
sslRejectUnauthorized: boolean;
|
||||
};
|
||||
@@ -125,7 +125,7 @@ export const eventToNameMap: { [K in EventType]: string } = {
|
||||
[EventType.CREATE_APP_CONNECTION]: "Create App Connection",
|
||||
[EventType.UPDATE_APP_CONNECTION]: "Update App Connection",
|
||||
[EventType.DELETE_APP_CONNECTION]: "Delete App Connection",
|
||||
[EventType.GET_SECRET_SYNCS]: "List Secret Syncs",
|
||||
[EventType.GET_SECRET_SYNCS]: "List secret syncs",
|
||||
[EventType.GET_SECRET_SYNC]: "Get Secret Sync",
|
||||
[EventType.CREATE_SECRET_SYNC]: "Create Secret Sync",
|
||||
[EventType.UPDATE_SECRET_SYNC]: "Update Secret Sync",
|
||||
@@ -154,7 +154,15 @@ export const eventToNameMap: { [K in EventType]: string } = {
|
||||
[EventType.KMIP_OPERATION_ACTIVATE]: "KMIP operation activate",
|
||||
[EventType.KMIP_OPERATION_REVOKE]: "KMIP operation revoke",
|
||||
[EventType.KMIP_OPERATION_LOCATE]: "KMIP operation locate",
|
||||
[EventType.KMIP_OPERATION_REGISTER]: "KMIP operation register"
|
||||
[EventType.KMIP_OPERATION_REGISTER]: "KMIP operation register",
|
||||
[EventType.GET_SECRET_ROTATIONS]: "List Secret Rotations",
|
||||
[EventType.GET_SECRET_ROTATION]: "Get Secret Rotation",
|
||||
[EventType.GET_SECRET_ROTATION_GENERATED_CREDENTIALS]:
|
||||
"Get Secret Rotation generated credentials",
|
||||
[EventType.CREATE_SECRET_ROTATION]: "Create Secret Rotation",
|
||||
[EventType.UPDATE_SECRET_ROTATION]: "Update Secret Rotation",
|
||||
[EventType.DELETE_SECRET_ROTATION]: "Delete Secret Rotation",
|
||||
[EventType.SECRET_ROTATION_ROTATE_SECRETS]: "Secret Rotation secrets rotated"
|
||||
};
|
||||
|
||||
export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {
|
||||
|
||||
@@ -155,5 +155,12 @@ export enum EventType {
|
||||
KMIP_OPERATION_REVOKE = "kmip-operation-revoke",
|
||||
KMIP_OPERATION_LOCATE = "kmip-operation-locate",
|
||||
KMIP_OPERATION_REGISTER = "kmip-operation-register",
|
||||
SECRET_APPROVAL_REQUEST_REVIEW = "secret-approval-request-review"
|
||||
SECRET_APPROVAL_REQUEST_REVIEW = "secret-approval-request-review",
|
||||
GET_SECRET_ROTATIONS = "get-secret-rotations",
|
||||
GET_SECRET_ROTATION = "get-secret-rotation",
|
||||
GET_SECRET_ROTATION_GENERATED_CREDENTIALS = "get-secret-rotation-generated-credentials",
|
||||
CREATE_SECRET_ROTATION = "create-secret-rotation",
|
||||
UPDATE_SECRET_ROTATION = "update-secret-rotation",
|
||||
DELETE_SECRET_ROTATION = "delete-secret-rotation",
|
||||
SECRET_ROTATION_ROTATE_SECRETS = "secret-rotation-rotate-secrets"
|
||||
}
|
||||
|
||||
@@ -132,6 +132,21 @@ export const fetchDashboardProjectSecretsByKeys = async ({
|
||||
return data;
|
||||
};
|
||||
|
||||
const mergePersonalRotationSecrets = (secrets: (SecretV3Raw | null)[]) => {
|
||||
const actualSecrets: SecretV3Raw[] = [];
|
||||
const dummySecrets: null[] = [];
|
||||
|
||||
secrets.forEach((secret) => {
|
||||
if (secret !== null) {
|
||||
actualSecrets.push(secret);
|
||||
} else {
|
||||
dummySecrets.push(secret);
|
||||
}
|
||||
});
|
||||
|
||||
return [...mergePersonalSecrets(actualSecrets), ...dummySecrets];
|
||||
};
|
||||
|
||||
export const useGetProjectSecretsOverview = (
|
||||
{
|
||||
projectId,
|
||||
@@ -145,6 +160,7 @@ export const useGetProjectSecretsOverview = (
|
||||
includeFolders,
|
||||
includeImports,
|
||||
includeDynamicSecrets,
|
||||
includeSecretRotations,
|
||||
environments
|
||||
}: TGetDashboardProjectSecretsOverviewDTO,
|
||||
options?: Omit<
|
||||
@@ -173,6 +189,7 @@ export const useGetProjectSecretsOverview = (
|
||||
includeFolders,
|
||||
includeImports,
|
||||
includeDynamicSecrets,
|
||||
includeSecretRotations,
|
||||
environments
|
||||
}),
|
||||
queryFn: () =>
|
||||
@@ -188,10 +205,11 @@ export const useGetProjectSecretsOverview = (
|
||||
includeFolders,
|
||||
includeImports,
|
||||
includeDynamicSecrets,
|
||||
includeSecretRotations,
|
||||
environments
|
||||
}),
|
||||
select: useCallback((data: Awaited<ReturnType<typeof fetchProjectSecretsOverview>>) => {
|
||||
const { secrets, ...select } = data;
|
||||
const { secrets, secretRotations, ...select } = data;
|
||||
const uniqueSecrets = secrets ? unique(secrets, (i) => i.secretKey) : [];
|
||||
|
||||
const uniqueFolders = select.folders ? unique(select.folders, (i) => i.name) : [];
|
||||
@@ -201,14 +219,22 @@ export const useGetProjectSecretsOverview = (
|
||||
: [];
|
||||
|
||||
const uniqueSecretImports = select.imports ? unique(select.imports, (i) => i.id) : [];
|
||||
const uniqueSecretRotations = secretRotations ? unique(secretRotations, (i) => i.name) : [];
|
||||
|
||||
return {
|
||||
...select,
|
||||
secrets: secrets ? mergePersonalSecrets(secrets) : undefined,
|
||||
secretRotations: secretRotations?.map((rotation) => {
|
||||
return {
|
||||
...rotation,
|
||||
secrets: mergePersonalRotationSecrets(rotation.secrets)
|
||||
};
|
||||
}),
|
||||
totalUniqueSecretsInPage: uniqueSecrets.length,
|
||||
totalUniqueDynamicSecretsInPage: uniqueDynamicSecrets.length,
|
||||
totalUniqueFoldersInPage: uniqueFolders.length,
|
||||
totalUniqueSecretImportsInPage: uniqueSecretImports.length
|
||||
totalUniqueSecretImportsInPage: uniqueSecretImports.length,
|
||||
totalUniqueSecretRotationsInPage: uniqueSecretRotations.length
|
||||
};
|
||||
}, []),
|
||||
placeholderData: (previousData) => previousData
|
||||
@@ -230,6 +256,7 @@ export const useGetProjectSecretsDetails = (
|
||||
viewSecretValue,
|
||||
includeImports,
|
||||
includeDynamicSecrets,
|
||||
includeSecretRotations,
|
||||
tags
|
||||
}: TGetDashboardProjectSecretsDetailsDTO,
|
||||
options?: Omit<
|
||||
@@ -260,6 +287,7 @@ export const useGetProjectSecretsDetails = (
|
||||
includeFolders,
|
||||
includeImports,
|
||||
includeDynamicSecrets,
|
||||
includeSecretRotations,
|
||||
tags
|
||||
}),
|
||||
queryFn: () =>
|
||||
@@ -277,12 +305,17 @@ export const useGetProjectSecretsDetails = (
|
||||
includeFolders,
|
||||
includeImports,
|
||||
includeDynamicSecrets,
|
||||
includeSecretRotations,
|
||||
tags
|
||||
}),
|
||||
select: useCallback(
|
||||
(data: Awaited<ReturnType<typeof fetchProjectSecretsDetails>>) => ({
|
||||
...data,
|
||||
secrets: data.secrets ? mergePersonalSecrets(data.secrets) : undefined
|
||||
secrets: data.secrets ? mergePersonalSecrets(data.secrets) : undefined,
|
||||
secretRotations: data.secretRotations?.map((rotation) => ({
|
||||
...rotation,
|
||||
secrets: mergePersonalRotationSecrets(rotation.secrets)
|
||||
}))
|
||||
}),
|
||||
[]
|
||||
),
|
||||
@@ -372,7 +405,7 @@ export const useGetProjectSecretsQuickSearch = (
|
||||
tags
|
||||
}),
|
||||
select: useCallback((data: Awaited<ReturnType<typeof fetchProjectSecretsQuickSearch>>) => {
|
||||
const { secrets, folders, dynamicSecrets } = data;
|
||||
const { secrets, folders, dynamicSecrets, secretRotations } = data;
|
||||
|
||||
const groupedFolders = groupBy(folders, (folder) => folder.path);
|
||||
const groupedSecrets = groupBy(
|
||||
@@ -384,11 +417,16 @@ export const useGetProjectSecretsQuickSearch = (
|
||||
(dynamicSecret) =>
|
||||
`${dynamicSecret.path === "/" ? "" : dynamicSecret.path}/${dynamicSecret.name}`
|
||||
);
|
||||
const groupedRotations = groupBy(
|
||||
secretRotations,
|
||||
(rotation) => `${rotation.folder.path === "/" ? "" : rotation.folder.path}/${rotation.name}`
|
||||
);
|
||||
|
||||
return {
|
||||
folders: groupedFolders,
|
||||
secrets: groupedSecrets,
|
||||
dynamicSecrets: groupedDynamicSecrets
|
||||
dynamicSecrets: groupedDynamicSecrets,
|
||||
secretRotations: groupedRotations
|
||||
};
|
||||
}, []),
|
||||
placeholderData: (previousData) => previousData
|
||||
|
||||
@@ -3,6 +3,7 @@ import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
|
||||
import { OrderByDirection } from "@app/hooks/api/generic/types";
|
||||
import { TSecretFolder } from "@app/hooks/api/secretFolders/types";
|
||||
import { TSecretImport } from "@app/hooks/api/secretImports/types";
|
||||
import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
|
||||
import { SecretV3Raw, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
|
||||
|
||||
export type DashboardProjectSecretsOverviewResponse = {
|
||||
@@ -14,11 +15,16 @@ export type DashboardProjectSecretsOverviewResponse = {
|
||||
totalFolderCount?: number;
|
||||
totalDynamicSecretCount?: number;
|
||||
totalImportCount?: number;
|
||||
secretRotations?: (TSecretRotationV2 & {
|
||||
secrets: (SecretV3Raw | null)[];
|
||||
})[];
|
||||
totalSecretRotationCount?: number;
|
||||
totalCount: number;
|
||||
totalUniqueSecretsInPage: number;
|
||||
totalUniqueDynamicSecretsInPage: number;
|
||||
totalUniqueFoldersInPage: number;
|
||||
totalUniqueSecretImportsInPage: number;
|
||||
totalUniqueSecretRotationsInPage: number;
|
||||
};
|
||||
|
||||
export type DashboardProjectSecretsDetailsResponse = {
|
||||
@@ -26,10 +32,14 @@ export type DashboardProjectSecretsDetailsResponse = {
|
||||
folders?: TSecretFolder[];
|
||||
dynamicSecrets?: TDynamicSecret[];
|
||||
secrets?: SecretV3Raw[];
|
||||
secretRotations?: (TSecretRotationV2 & {
|
||||
secrets: (SecretV3Raw | null)[];
|
||||
})[];
|
||||
totalImportCount?: number;
|
||||
totalFolderCount?: number;
|
||||
totalDynamicSecretCount?: number;
|
||||
totalSecretCount?: number;
|
||||
totalSecretRotationCount?: number;
|
||||
totalCount: number;
|
||||
};
|
||||
|
||||
@@ -39,9 +49,12 @@ export type DashboardProjectSecretsByKeys = {
|
||||
|
||||
export type DashboardProjectSecretsOverview = Omit<
|
||||
DashboardProjectSecretsOverviewResponse,
|
||||
"secrets"
|
||||
"secrets" | "secretRotations"
|
||||
> & {
|
||||
secrets?: SecretV3RawSanitized[];
|
||||
secretRotations?: (TSecretRotationV2 & {
|
||||
secrets: (SecretV3RawSanitized | null)[];
|
||||
})[];
|
||||
};
|
||||
|
||||
export type DashboardProjectSecretsDetails = Omit<
|
||||
@@ -49,6 +62,9 @@ export type DashboardProjectSecretsDetails = Omit<
|
||||
"secrets"
|
||||
> & {
|
||||
secrets?: SecretV3RawSanitized[];
|
||||
secretRotations?: (TSecretRotationV2 & {
|
||||
secrets: (SecretV3RawSanitized | null)[];
|
||||
})[];
|
||||
};
|
||||
|
||||
export enum DashboardSecretsOrderBy {
|
||||
@@ -67,6 +83,7 @@ export type TGetDashboardProjectSecretsOverviewDTO = {
|
||||
includeFolders?: boolean;
|
||||
includeDynamicSecrets?: boolean;
|
||||
includeImports?: boolean;
|
||||
includeSecretRotations?: boolean;
|
||||
environments: string[];
|
||||
};
|
||||
|
||||
@@ -83,6 +100,7 @@ export type TGetDashboardProjectSecretsDetailsDTO = Omit<
|
||||
export type TDashboardProjectSecretsQuickSearchResponse = {
|
||||
folders: (TSecretFolder & { envId: string; path: string })[];
|
||||
dynamicSecrets: (TDynamicSecret & { environment: string; path: string })[];
|
||||
secretRotations: TSecretRotationV2[];
|
||||
secrets: SecretV3Raw[];
|
||||
};
|
||||
|
||||
@@ -90,6 +108,7 @@ export type TDashboardProjectSecretsQuickSearch = {
|
||||
folders: Record<string, TDashboardProjectSecretsQuickSearchResponse["folders"]>;
|
||||
secrets: Record<string, SecretV3RawSanitized[]>;
|
||||
dynamicSecrets: Record<string, TDashboardProjectSecretsQuickSearchResponse["dynamicSecrets"]>;
|
||||
secretRotations: Record<string, TDashboardProjectSecretsQuickSearchResponse["secretRotations"]>;
|
||||
};
|
||||
|
||||
export type TGetDashboardProjectSecretsQuickSearchDTO = {
|
||||
|
||||
@@ -46,5 +46,6 @@ export {
|
||||
useGetIdentityTokenAuth,
|
||||
useGetIdentityTokensTokenAuth,
|
||||
useGetIdentityUniversalAuth,
|
||||
useGetIdentityUniversalAuthClientSecrets
|
||||
useGetIdentityUniversalAuthClientSecrets,
|
||||
useSearchIdentities
|
||||
} from "./queries";
|
||||
|
||||
@@ -15,11 +15,13 @@ import {
|
||||
IdentityMembershipOrg,
|
||||
IdentityOidcAuth,
|
||||
IdentityTokenAuth,
|
||||
IdentityUniversalAuth
|
||||
IdentityUniversalAuth,
|
||||
TSearchIdentitiesDTO
|
||||
} from "./types";
|
||||
|
||||
export const identitiesKeys = {
|
||||
getIdentityById: (identityId: string) => [{ identityId }, "identity"] as const,
|
||||
searchIdentities: (dto: TSearchIdentitiesDTO) => ["identity", "search", dto] as const,
|
||||
getIdentityUniversalAuth: (identityId: string) =>
|
||||
[{ identityId }, "identity-universal-auth"] as const,
|
||||
getIdentityUniversalAuthClientSecrets: (identityId: string) =>
|
||||
@@ -53,6 +55,26 @@ export const useGetIdentityById = (identityId: string) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useSearchIdentities = (dto: TSearchIdentitiesDTO) => {
|
||||
const { limit, search, offset, orderBy, orderDirection } = dto;
|
||||
return useQuery({
|
||||
queryKey: identitiesKeys.searchIdentities(dto),
|
||||
queryFn: async () => {
|
||||
const { data } = await apiRequest.post<{
|
||||
identities: IdentityMembershipOrg[];
|
||||
totalCount: number;
|
||||
}>("/api/v1/identities/search", {
|
||||
limit,
|
||||
offset,
|
||||
orderBy,
|
||||
orderDirection,
|
||||
search
|
||||
});
|
||||
return data;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetIdentityProjectMemberships = (identityId: string) => {
|
||||
return useQuery({
|
||||
enabled: Boolean(identityId),
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { OrderByDirection } from "../generic/types";
|
||||
import { OrgIdentityOrderBy } from "../organization/types";
|
||||
import { TOrgRole } from "../roles/types";
|
||||
import { ProjectUserMembershipTemporaryMode, Workspace } from "../workspace/types";
|
||||
import { IdentityAuthMethod, IdentityJwtConfigurationType } from "./enums";
|
||||
@@ -540,3 +542,14 @@ export type TProjectIdentitiesList = {
|
||||
identityMemberships: IdentityMembership[];
|
||||
totalCount: number;
|
||||
};
|
||||
|
||||
export type TSearchIdentitiesDTO = {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
orderBy?: OrgIdentityOrderBy;
|
||||
orderDirection?: OrderByDirection;
|
||||
search: {
|
||||
name?: { $contains: string };
|
||||
role?: { $in: string[] };
|
||||
};
|
||||
};
|
||||
|
||||
@@ -32,6 +32,7 @@ export type TSecretApprovalSecChange = {
|
||||
secretKey: string;
|
||||
secretValue?: string;
|
||||
secretComment?: string;
|
||||
isRotatedSecret?: boolean;
|
||||
tags?: string[];
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
export enum SecretRotation {
|
||||
PostgresCredentials = "postgres-credentials",
|
||||
MsSqlCredentials = "mssql-credentials"
|
||||
}
|
||||
|
||||
export enum SecretRotationStatus {
|
||||
Success = "success",
|
||||
Failed = "failed"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from "./enums";
|
||||
export * from "./queries";
|
||||
export * from "./types";
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { apiRequest } from "@app/config/request";
|
||||
import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
|
||||
import {
|
||||
TCreateSecretRotationV2DTO,
|
||||
TDeleteSecretRotationV2DTO,
|
||||
TRotateSecretRotationV2DTO,
|
||||
TSecretRotationV2Response,
|
||||
TUpdateSecretRotationV2DTO
|
||||
} from "@app/hooks/api/secretRotationsV2/types";
|
||||
|
||||
export const useCreateSecretRotationV2 = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ type, ...params }: TCreateSecretRotationV2DTO) => {
|
||||
const { data } = await apiRequest.post<TSecretRotationV2Response>(
|
||||
`/api/v2/secret-rotations/${type}`,
|
||||
params
|
||||
);
|
||||
|
||||
return data.secretRotation;
|
||||
},
|
||||
onSuccess: (_, { projectId, secretPath }) =>
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateSecretRotationV2 = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ type, rotationId, ...params }: TUpdateSecretRotationV2DTO) => {
|
||||
const { data } = await apiRequest.patch<TSecretRotationV2Response>(
|
||||
`/api/v2/secret-rotations/${type}/${rotationId}`,
|
||||
params
|
||||
);
|
||||
|
||||
return data.secretRotation;
|
||||
},
|
||||
onSuccess: (_, { projectId, secretPath }) =>
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
export const useRotateSecretRotationV2 = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ type, rotationId }: TRotateSecretRotationV2DTO) => {
|
||||
const { data } = await apiRequest.post<TSecretRotationV2Response>(
|
||||
`/api/v2/secret-rotations/${type}/${rotationId}/rotate-secrets`
|
||||
);
|
||||
|
||||
return data.secretRotation;
|
||||
},
|
||||
onSuccess: (_, { projectId, secretPath }) =>
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
|
||||
}),
|
||||
onError: (_, { projectId, secretPath }) =>
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteSecretRotationV2 = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({
|
||||
type,
|
||||
rotationId,
|
||||
deleteSecrets,
|
||||
revokeGeneratedCredentials
|
||||
}: TDeleteSecretRotationV2DTO) => {
|
||||
const { data } = await apiRequest.delete<TSecretRotationV2Response>(
|
||||
`/api/v2/secret-rotations/${type}/${rotationId}`,
|
||||
{ params: { deleteSecrets, revokeGeneratedCredentials } }
|
||||
);
|
||||
|
||||
return data.secretRotation;
|
||||
},
|
||||
onSuccess: (_, { projectId, secretPath }) =>
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
|
||||
})
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useQuery, UseQueryOptions } from "@tanstack/react-query";
|
||||
|
||||
import { apiRequest } from "@app/config/request";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2/enums";
|
||||
import {
|
||||
TListSecretRotationV2Options,
|
||||
TSecretRotationV2Option,
|
||||
TViewSecretRotationGeneratedCredentialsResponse,
|
||||
TViewSecretRotationV2GeneratedCredentialsDTO
|
||||
} from "@app/hooks/api/secretRotationsV2/types";
|
||||
|
||||
export const secretRotationV2Keys = {
|
||||
all: ["secret-rotations-v2"] as const,
|
||||
options: () => [...secretRotationV2Keys.all, "options"] as const,
|
||||
viewGeneratedCredentials: ({ type, rotationId }: TViewSecretRotationV2GeneratedCredentialsDTO) =>
|
||||
[...secretRotationV2Keys.all, type, rotationId] as const
|
||||
};
|
||||
|
||||
export const useSecretRotationV2Options = (
|
||||
options?: Omit<
|
||||
UseQueryOptions<
|
||||
TSecretRotationV2Option[],
|
||||
unknown,
|
||||
TSecretRotationV2Option[],
|
||||
ReturnType<typeof secretRotationV2Keys.options>
|
||||
>,
|
||||
"queryKey" | "queryFn"
|
||||
>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: secretRotationV2Keys.options(),
|
||||
queryFn: async () => {
|
||||
const { data } = await apiRequest.get<TListSecretRotationV2Options>(
|
||||
"/api/v2/secret-rotations/options"
|
||||
);
|
||||
|
||||
return data.secretRotationOptions;
|
||||
},
|
||||
...options
|
||||
});
|
||||
};
|
||||
|
||||
export const useSecretRotationV2Option = (type: SecretRotation) => {
|
||||
const { data: rotationOptions, isPending } = useSecretRotationV2Options();
|
||||
const rotationOption = rotationOptions?.find((option) => option.type === type);
|
||||
|
||||
return { rotationOption, isPending };
|
||||
};
|
||||
|
||||
export const useViewSecretRotationV2GeneratedCredentials = (
|
||||
{ rotationId, type }: TViewSecretRotationV2GeneratedCredentialsDTO,
|
||||
options?: Omit<
|
||||
UseQueryOptions<
|
||||
TViewSecretRotationGeneratedCredentialsResponse,
|
||||
unknown,
|
||||
TViewSecretRotationGeneratedCredentialsResponse,
|
||||
ReturnType<typeof secretRotationV2Keys.viewGeneratedCredentials>
|
||||
>,
|
||||
"queryKey" | "queryFn"
|
||||
>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: secretRotationV2Keys.viewGeneratedCredentials({ rotationId, type }),
|
||||
queryFn: async () => {
|
||||
const { data } = await apiRequest.get<TViewSecretRotationGeneratedCredentialsResponse>(
|
||||
`/api/v2/secret-rotations/${type}/${rotationId}/generated-credentials`
|
||||
);
|
||||
|
||||
return data;
|
||||
},
|
||||
...options
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,73 @@
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
import {
|
||||
TMsSqlCredentialsRotation,
|
||||
TMsSqlCredentialsRotationGeneratedCredentialsResponse
|
||||
} from "@app/hooks/api/secretRotationsV2/types/mssql-credentials-rotation";
|
||||
import {
|
||||
TPostgresCredentialsRotation,
|
||||
TPostgresCredentialsRotationGeneratedCredentialsResponse
|
||||
} from "@app/hooks/api/secretRotationsV2/types/postgres-credentials-rotation";
|
||||
import { TSqlOptionTemplate } from "@app/hooks/api/secretRotationsV2/types/shared";
|
||||
import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
|
||||
import { DiscriminativePick } from "@app/types";
|
||||
|
||||
export type TSecretRotationV2 = (TPostgresCredentialsRotation | TMsSqlCredentialsRotation) & {
|
||||
secrets: (SecretV3RawSanitized | null)[];
|
||||
};
|
||||
|
||||
export type TSecretRotationV2Option = {
|
||||
name: string;
|
||||
type: SecretRotation;
|
||||
connection: AppConnection;
|
||||
template: TSqlOptionTemplate;
|
||||
};
|
||||
|
||||
export type TListSecretRotationV2Options = { secretRotationOptions: TSecretRotationV2Option[] };
|
||||
|
||||
export type TSecretRotationV2Response = { secretRotation: TSecretRotationV2 };
|
||||
|
||||
export type TViewSecretRotationGeneratedCredentialsResponse =
|
||||
| TPostgresCredentialsRotationGeneratedCredentialsResponse
|
||||
| TMsSqlCredentialsRotationGeneratedCredentialsResponse;
|
||||
|
||||
export type TCreateSecretRotationV2DTO = DiscriminativePick<
|
||||
TSecretRotationV2,
|
||||
| "name"
|
||||
| "parameters"
|
||||
| "secretsMapping"
|
||||
| "description"
|
||||
| "connectionId"
|
||||
| "type"
|
||||
| "isAutoRotationEnabled"
|
||||
| "rotationInterval"
|
||||
| "rotateAtUtc"
|
||||
> & { environment: string; secretPath: string; projectId: string };
|
||||
|
||||
export type TUpdateSecretRotationV2DTO = Partial<
|
||||
Omit<TCreateSecretRotationV2DTO, "type" | "secretPath" | "projectId">
|
||||
> & {
|
||||
type: SecretRotation;
|
||||
rotationId: string;
|
||||
// required for query invalidation
|
||||
projectId: string;
|
||||
secretPath: string;
|
||||
};
|
||||
|
||||
export type TRotateSecretRotationV2DTO = {
|
||||
rotationId: string;
|
||||
type: SecretRotation;
|
||||
// required for query invalidation
|
||||
secretPath: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export type TDeleteSecretRotationV2DTO = TRotateSecretRotationV2DTO & {
|
||||
revokeGeneratedCredentials: boolean;
|
||||
deleteSecrets: boolean;
|
||||
};
|
||||
|
||||
export type TViewSecretRotationV2GeneratedCredentialsDTO = {
|
||||
rotationId: string;
|
||||
type: SecretRotation;
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
import {
|
||||
TSecretRotationV2Base,
|
||||
TSecretRotationV2GeneratedCredentialsResponseBase,
|
||||
TSqlCredentialsRotationGeneratedCredentials,
|
||||
TSqlCredentialsRotationProperties
|
||||
} from "@app/hooks/api/secretRotationsV2/types/shared";
|
||||
|
||||
export type TMsSqlCredentialsRotation = TSecretRotationV2Base & {
|
||||
type: SecretRotation.MsSqlCredentials;
|
||||
} & TSqlCredentialsRotationProperties;
|
||||
|
||||
export type TMsSqlCredentialsRotationGeneratedCredentialsResponse =
|
||||
TSecretRotationV2GeneratedCredentialsResponseBase<
|
||||
SecretRotation.MsSqlCredentials,
|
||||
TSqlCredentialsRotationGeneratedCredentials
|
||||
>;
|
||||
@@ -0,0 +1,17 @@
|
||||
import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
|
||||
import {
|
||||
TSecretRotationV2Base,
|
||||
TSecretRotationV2GeneratedCredentialsResponseBase,
|
||||
TSqlCredentialsRotationGeneratedCredentials,
|
||||
TSqlCredentialsRotationProperties
|
||||
} from "@app/hooks/api/secretRotationsV2/types/shared";
|
||||
|
||||
export type TPostgresCredentialsRotation = TSecretRotationV2Base & {
|
||||
type: SecretRotation.PostgresCredentials;
|
||||
} & TSqlCredentialsRotationProperties;
|
||||
|
||||
export type TPostgresCredentialsRotationGeneratedCredentialsResponse =
|
||||
TSecretRotationV2GeneratedCredentialsResponseBase<
|
||||
SecretRotation.PostgresCredentials,
|
||||
TSqlCredentialsRotationGeneratedCredentials
|
||||
>;
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from "./secret-rotation-base";
|
||||
export * from "./sql-credentials-rotation";
|
||||
@@ -0,0 +1,53 @@
|
||||
import { AppConnection } from "@app/hooks/api/appConnections/enums";
|
||||
import { SecretRotationStatus } from "@app/hooks/api/secretRotationsV2";
|
||||
|
||||
export type TSecretRotationV2Base = {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string | null;
|
||||
folderId: string;
|
||||
connectionId: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
rotationInterval: number;
|
||||
rotateAtUtc: {
|
||||
hours: number;
|
||||
minutes: number;
|
||||
};
|
||||
projectId: string;
|
||||
rotationStatus: SecretRotationStatus | null;
|
||||
lastRotationJobId: string | null;
|
||||
lastRotatedAt: string;
|
||||
lastRotationAttemptedAt: string;
|
||||
lastRotationMessage?: string | null;
|
||||
connection: {
|
||||
app: AppConnection;
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
environment: {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
};
|
||||
folder: {
|
||||
id: string;
|
||||
path: string;
|
||||
};
|
||||
} & (
|
||||
| {
|
||||
nextRotationAt: string;
|
||||
isAutoRotationEnabled: true;
|
||||
}
|
||||
| {
|
||||
nextRotationAt?: null;
|
||||
isAutoRotationEnabled: false;
|
||||
}
|
||||
);
|
||||
|
||||
export type TSecretRotationV2GeneratedCredentialsResponseBase<U, T> = {
|
||||
activeIndex: 0 | 1;
|
||||
generatedCredentials: [T, T | undefined];
|
||||
type: U;
|
||||
rotationId: string;
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export type TSqlCredentialsRotationProperties = {
|
||||
parameters: {
|
||||
username1: string;
|
||||
username2: string;
|
||||
};
|
||||
secretsMapping: {
|
||||
username: string;
|
||||
password: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type TSqlOptionTemplate = {
|
||||
secretsMapping: TSqlCredentialsRotationProperties["secretsMapping"];
|
||||
createUserStatement: string;
|
||||
};
|
||||
|
||||
export type TSqlCredentialsRotationGeneratedCredentials = {
|
||||
username: string;
|
||||
password: string;
|
||||
};
|
||||
@@ -2,6 +2,7 @@
|
||||
import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { apiRequest } from "@app/config/request";
|
||||
import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
|
||||
|
||||
import { SecretType, SecretV3RawSanitized } from "../secrets/types";
|
||||
import {
|
||||
@@ -82,7 +83,8 @@ export const useGetSnapshotSecrets = ({ snapshotId }: TSnapshotDataProps) =>
|
||||
createdAt: secretVersion.createdAt,
|
||||
updatedAt: secretVersion.updatedAt,
|
||||
type: "modified",
|
||||
version: secretVersion.version
|
||||
version: secretVersion.version,
|
||||
isRotatedSecret: secretVersion.isRotatedSecret
|
||||
};
|
||||
|
||||
if (secretVersion.type === SecretType.Personal) {
|
||||
@@ -162,6 +164,12 @@ export const usePerformSecretRollback = () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: secretSnapshotKeys.count({ workspaceId, environment, directory })
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: dashboardKeys.getDashboardSecrets({
|
||||
projectId: workspaceId,
|
||||
secretPath: directory ?? "/"
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user