From 26b18d36645e66d86e0cb50c884468f524eb203f Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Tue, 25 Jul 2023 18:57:23 +0200 Subject: [PATCH 01/13] feat(pages): creates explorer page content starting point SXT-1023 Signed-off-by: Jimmy Holway --- src/pages/deployment/chronicle/Explorer.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/pages/deployment/chronicle/Explorer.tsx diff --git a/src/pages/deployment/chronicle/Explorer.tsx b/src/pages/deployment/chronicle/Explorer.tsx new file mode 100644 index 00000000..0641fd95 --- /dev/null +++ b/src/pages/deployment/chronicle/Explorer.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const HelloWorld: React.FC = () => { + return ( +
+ Hello, World! +
+ ); +} + +export default HelloWorld; From ece7871e56aa4f79725516afde99ff80621675d0 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Tue, 25 Jul 2023 18:59:24 +0200 Subject: [PATCH 02/13] feat(router): creates route for chronicle explorer starting point SXT-1023 Signed-off-by: Jimmy Holway --- src/router/Router.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/router/Router.js b/src/router/Router.js index 9d0ecacc..b1aba8e2 100644 --- a/src/router/Router.js +++ b/src/router/Router.js @@ -33,6 +33,8 @@ import DeploymentSettingsDamlParties from 'containers/deployment/daml/Deployment import DeploymentSettingsDamlArchives from 'containers/deployment/daml/DeploymentSettingsDamlArchives' import DeploymentSettingsDamlTimeService from 'containers/deployment/daml/DeploymentSettingsDamlTimeService' +import DeploymentChronicle from 'containers/deployment/chronicle/Chronicle' + import DeploymentSettingsTaekionCli from 'containers/deployment/taekion/Cli' import DeploymentSettingsTaekionKeys from 'containers/deployment/taekion/Keys' import DeploymentSettingsTaekionVolumes from 'containers/deployment/taekion/Volumes' From 1bc6d7e6daf8caf0448ad57918377f5bfe957c44 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Thu, 27 Jul 2023 11:54:50 +0200 Subject: [PATCH 03/13] build(packages): installs @mui/lab for treeview component SXT-1023 Signed-off-by: Jimmy Holway --- package-lock.json | 262 +++++++++++++++++++++++++++++++++++----------- package.json | 1 + 2 files changed, 201 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1b03d7ba..76f1b07a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mui/icons-material": "^5.0.1", + "@mui/lab": "^5.0.0-alpha.137", "@mui/material": "^5.0.1", "@mui/system": "^5.12.3", "ace-builds": "^1.4.12", @@ -2064,9 +2065,9 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.21.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz", - "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz", + "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", "dependencies": { "regenerator-runtime": "^0.13.11" }, @@ -3522,6 +3523,94 @@ } } }, + "node_modules/@mui/lab": { + "version": "5.0.0-alpha.137", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.137.tgz", + "integrity": "sha512-bHfcfti9/GnB657QpTdlK1fc9gjkP3SC+NrXyb9NCr0rT5Cq7TEkBGXyY5wGUSCyHR3CrMvchkIsfG5sH/NJ9A==", + "dependencies": { + "@babel/runtime": "^7.22.6", + "@mui/base": "5.0.0-beta.8", + "@mui/system": "^5.14.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.1", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/lab/node_modules/@mui/base": { + "version": "5.0.0-beta.8", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", + "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", + "dependencies": { + "@babel/runtime": "^7.22.6", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.1", + "@popperjs/core": "^2.11.8", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/lab/node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/@mui/lab/node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/@mui/material": { "version": "5.12.3", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.3.tgz", @@ -3582,12 +3671,12 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/@mui/private-theming": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.3.tgz", - "integrity": "sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA==", + "version": "5.13.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", + "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", "dependencies": { - "@babel/runtime": "^7.21.0", - "@mui/utils": "^5.12.3", + "@babel/runtime": "^7.22.5", + "@mui/utils": "^5.13.7", "prop-types": "^15.8.1" }, "engines": { @@ -3623,12 +3712,12 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/@mui/styled-engine": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.3.tgz", - "integrity": "sha512-AhZtiRyT8Bjr7fufxE/mLS+QJ3LxwX1kghIcM2B2dvJzSSg9rnIuXDXM959QfUVIM3C8U4x3mgVoPFMQJvc4/g==", + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", + "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", "dependencies": { "@babel/runtime": "^7.21.0", - "@emotion/cache": "^11.10.8", + "@emotion/cache": "^11.11.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" }, @@ -3669,15 +3758,15 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/@mui/system": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.3.tgz", - "integrity": "sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz", + "integrity": "sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==", "dependencies": { - "@babel/runtime": "^7.21.0", - "@mui/private-theming": "^5.12.3", - "@mui/styled-engine": "^5.12.3", + "@babel/runtime": "^7.22.6", + "@mui/private-theming": "^5.13.7", + "@mui/styled-engine": "^5.13.2", "@mui/types": "^7.2.4", - "@mui/utils": "^5.12.3", + "@mui/utils": "^5.14.1", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -3736,13 +3825,13 @@ } }, "node_modules/@mui/utils": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.3.tgz", - "integrity": "sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.1.tgz", + "integrity": "sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==", "dependencies": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.22.6", "@types/prop-types": "^15.7.5", - "@types/react-is": "^16.7.1 || ^17.0.0", + "@types/react-is": "^18.2.1", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -3838,9 +3927,9 @@ "dev": true }, "node_modules/@popperjs/core": { - "version": "2.11.7", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", - "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -5131,11 +5220,11 @@ } }, "node_modules/@types/react-is": { - "version": "17.0.4", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.4.tgz", - "integrity": "sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==", + "version": "18.2.1", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz", + "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==", "dependencies": { - "@types/react": "^17" + "@types/react": "*" } }, "node_modules/@types/react-redux": { @@ -19370,9 +19459,9 @@ "dev": true }, "@babel/runtime": { - "version": "7.21.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz", - "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz", + "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", "requires": { "regenerator-runtime": "^0.13.11" } @@ -20514,6 +20603,55 @@ "@babel/runtime": "^7.21.0" } }, + "@mui/lab": { + "version": "5.0.0-alpha.137", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.137.tgz", + "integrity": "sha512-bHfcfti9/GnB657QpTdlK1fc9gjkP3SC+NrXyb9NCr0rT5Cq7TEkBGXyY5wGUSCyHR3CrMvchkIsfG5sH/NJ9A==", + "requires": { + "@babel/runtime": "^7.22.6", + "@mui/base": "5.0.0-beta.8", + "@mui/system": "^5.14.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.1", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "dependencies": { + "@mui/base": { + "version": "5.0.0-beta.8", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", + "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", + "requires": { + "@babel/runtime": "^7.22.6", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.1", + "@popperjs/core": "^2.11.8", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + } + }, + "prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + } + } + }, "@mui/material": { "version": "5.12.3", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.3.tgz", @@ -20553,12 +20691,12 @@ } }, "@mui/private-theming": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.3.tgz", - "integrity": "sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA==", + "version": "5.13.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", + "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", "requires": { - "@babel/runtime": "^7.21.0", - "@mui/utils": "^5.12.3", + "@babel/runtime": "^7.22.5", + "@mui/utils": "^5.13.7", "prop-types": "^15.8.1" }, "dependencies": { @@ -20580,12 +20718,12 @@ } }, "@mui/styled-engine": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.3.tgz", - "integrity": "sha512-AhZtiRyT8Bjr7fufxE/mLS+QJ3LxwX1kghIcM2B2dvJzSSg9rnIuXDXM959QfUVIM3C8U4x3mgVoPFMQJvc4/g==", + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", + "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", "requires": { "@babel/runtime": "^7.21.0", - "@emotion/cache": "^11.10.8", + "@emotion/cache": "^11.11.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" }, @@ -20608,15 +20746,15 @@ } }, "@mui/system": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.3.tgz", - "integrity": "sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz", + "integrity": "sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==", "requires": { - "@babel/runtime": "^7.21.0", - "@mui/private-theming": "^5.12.3", - "@mui/styled-engine": "^5.12.3", + "@babel/runtime": "^7.22.6", + "@mui/private-theming": "^5.13.7", + "@mui/styled-engine": "^5.13.2", "@mui/types": "^7.2.4", - "@mui/utils": "^5.12.3", + "@mui/utils": "^5.14.1", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -20646,13 +20784,13 @@ "requires": {} }, "@mui/utils": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.3.tgz", - "integrity": "sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.1.tgz", + "integrity": "sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==", "requires": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.22.6", "@types/prop-types": "^15.7.5", - "@types/react-is": "^16.7.1 || ^17.0.0", + "@types/react-is": "^18.2.1", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -20730,9 +20868,9 @@ "dev": true }, "@popperjs/core": { - "version": "2.11.7", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", - "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==" + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, "@radix-ui/primitive": { "version": "1.0.1", @@ -21651,11 +21789,11 @@ } }, "@types/react-is": { - "version": "17.0.4", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.4.tgz", - "integrity": "sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==", + "version": "18.2.1", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz", + "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==", "requires": { - "@types/react": "^17" + "@types/react": "*" } }, "@types/react-redux": { diff --git a/package.json b/package.json index 25dc56c9..fb1d1e0b 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mui/icons-material": "^5.0.1", + "@mui/lab": "^5.0.0-alpha.137", "@mui/material": "^5.0.1", "@mui/system": "^5.12.3", "ace-builds": "^1.4.12", From 084e03cfbb4b99791db2aa229f105b3f5ca6cf18 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Thu, 27 Jul 2023 11:58:03 +0200 Subject: [PATCH 04/13] build(packages): updates @mui/material SXT-1023 Signed-off-by: Jimmy Holway --- package-lock.json | 125 +++++++++++++++------------------------------- package.json | 2 +- 2 files changed, 40 insertions(+), 87 deletions(-) diff --git a/package-lock.json b/package-lock.json index 76f1b07a..579bea6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@emotion/styled": "^11.3.0", "@mui/icons-material": "^5.0.1", "@mui/lab": "^5.0.0-alpha.137", - "@mui/material": "^5.0.1", + "@mui/material": "^5.14.2", "@mui/system": "^5.12.3", "ace-builds": "^1.4.12", "autosuggest-highlight": "^3.1.1", @@ -3443,15 +3443,15 @@ "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" }, "node_modules/@mui/base": { - "version": "5.0.0-alpha.128", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.128.tgz", - "integrity": "sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ==", + "version": "5.0.0-beta.8", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", + "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", "dependencies": { - "@babel/runtime": "^7.21.0", - "@emotion/is-prop-valid": "^1.2.0", + "@babel/runtime": "^7.22.6", + "@emotion/is-prop-valid": "^1.2.1", "@mui/types": "^7.2.4", - "@mui/utils": "^5.12.3", - "@popperjs/core": "^2.11.7", + "@mui/utils": "^5.14.1", + "@popperjs/core": "^2.11.8", "clsx": "^1.2.1", "prop-types": "^15.8.1", "react-is": "^18.2.0" @@ -3490,9 +3490,9 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz", - "integrity": "sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA==", + "version": "5.14.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.2.tgz", + "integrity": "sha512-x+c/MgDL1t/IIy5lDbMlrDouFG5DYZbl3DP4dbbuhlpPFBnE9glYwmJEee/orVHQpOPwLxCAIWQs+2DKSaBVWQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" @@ -3564,38 +3564,6 @@ } } }, - "node_modules/@mui/lab/node_modules/@mui/base": { - "version": "5.0.0-beta.8", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", - "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", - "dependencies": { - "@babel/runtime": "^7.22.6", - "@emotion/is-prop-valid": "^1.2.1", - "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.1", - "@popperjs/core": "^2.11.8", - "clsx": "^1.2.1", - "prop-types": "^15.8.1", - "react-is": "^18.2.0" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@mui/lab/node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -3612,17 +3580,17 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/@mui/material": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.3.tgz", - "integrity": "sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg==", + "version": "5.14.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.2.tgz", + "integrity": "sha512-TgNR4/YRL11RifsnMWNhITNCkGJYVz20SCvVJBBoU5Y/KhUNSSJxjDpEB8VrnY+sUsV0NigLCkHZJglfsiS3Pw==", "dependencies": { - "@babel/runtime": "^7.21.0", - "@mui/base": "5.0.0-alpha.128", - "@mui/core-downloads-tracker": "^5.12.3", - "@mui/system": "^5.12.3", + "@babel/runtime": "^7.22.6", + "@mui/base": "5.0.0-beta.8", + "@mui/core-downloads-tracker": "^5.14.2", + "@mui/system": "^5.14.1", "@mui/types": "^7.2.4", - "@mui/utils": "^5.12.3", - "@types/react-transition-group": "^4.4.5", + "@mui/utils": "^5.14.1", + "@types/react-transition-group": "^4.4.6", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1", @@ -20557,15 +20525,15 @@ } }, "@mui/base": { - "version": "5.0.0-alpha.128", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.128.tgz", - "integrity": "sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ==", + "version": "5.0.0-beta.8", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", + "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", "requires": { - "@babel/runtime": "^7.21.0", - "@emotion/is-prop-valid": "^1.2.0", + "@babel/runtime": "^7.22.6", + "@emotion/is-prop-valid": "^1.2.1", "@mui/types": "^7.2.4", - "@mui/utils": "^5.12.3", - "@popperjs/core": "^2.11.7", + "@mui/utils": "^5.14.1", + "@popperjs/core": "^2.11.8", "clsx": "^1.2.1", "prop-types": "^15.8.1", "react-is": "^18.2.0" @@ -20591,9 +20559,9 @@ } }, "@mui/core-downloads-tracker": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz", - "integrity": "sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA==" + "version": "5.14.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.2.tgz", + "integrity": "sha512-x+c/MgDL1t/IIy5lDbMlrDouFG5DYZbl3DP4dbbuhlpPFBnE9glYwmJEee/orVHQpOPwLxCAIWQs+2DKSaBVWQ==" }, "@mui/icons-material": { "version": "5.11.16", @@ -20618,21 +20586,6 @@ "react-is": "^18.2.0" }, "dependencies": { - "@mui/base": { - "version": "5.0.0-beta.8", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", - "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", - "requires": { - "@babel/runtime": "^7.22.6", - "@emotion/is-prop-valid": "^1.2.1", - "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.1", - "@popperjs/core": "^2.11.8", - "clsx": "^1.2.1", - "prop-types": "^15.8.1", - "react-is": "^18.2.0" - } - }, "prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -20653,17 +20606,17 @@ } }, "@mui/material": { - "version": "5.12.3", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.3.tgz", - "integrity": "sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg==", + "version": "5.14.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.2.tgz", + "integrity": "sha512-TgNR4/YRL11RifsnMWNhITNCkGJYVz20SCvVJBBoU5Y/KhUNSSJxjDpEB8VrnY+sUsV0NigLCkHZJglfsiS3Pw==", "requires": { - "@babel/runtime": "^7.21.0", - "@mui/base": "5.0.0-alpha.128", - "@mui/core-downloads-tracker": "^5.12.3", - "@mui/system": "^5.12.3", + "@babel/runtime": "^7.22.6", + "@mui/base": "5.0.0-beta.8", + "@mui/core-downloads-tracker": "^5.14.2", + "@mui/system": "^5.14.1", "@mui/types": "^7.2.4", - "@mui/utils": "^5.12.3", - "@types/react-transition-group": "^4.4.5", + "@mui/utils": "^5.14.1", + "@types/react-transition-group": "^4.4.6", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1", diff --git a/package.json b/package.json index fb1d1e0b..08a1d777 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@emotion/styled": "^11.3.0", "@mui/icons-material": "^5.0.1", "@mui/lab": "^5.0.0-alpha.137", - "@mui/material": "^5.0.1", + "@mui/material": "^5.14.2", "@mui/system": "^5.12.3", "ace-builds": "^1.4.12", "autosuggest-highlight": "^3.1.1", From aad1ec6b722dce1fb3cb48e988f0a62fd9ec8744 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Thu, 27 Jul 2023 14:17:14 +0200 Subject: [PATCH 05/13] feat(chronicle): adds explorer page components including domain checker, treeview, and attribute explorer SXT-1023 Signed-off-by: Jimmy Holway --- src/pages/deployment/chronicle/Explorer.tsx | 430 +++++++++++++++++++- 1 file changed, 423 insertions(+), 7 deletions(-) diff --git a/src/pages/deployment/chronicle/Explorer.tsx b/src/pages/deployment/chronicle/Explorer.tsx index 0641fd95..7531bded 100644 --- a/src/pages/deployment/chronicle/Explorer.tsx +++ b/src/pages/deployment/chronicle/Explorer.tsx @@ -1,11 +1,427 @@ -import React from 'react'; +import React, { useState } from 'react' +import { palette, styled } from '@mui/system' + + +//CustomTextField + +import Autocomplete from "@mui/material/Autocomplete" +// import Button from "@mui/material/Button" +import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete' +import MenuItem from "@mui/material/MenuItem" +import IconButton from "@mui/material/IconButton" +import InputAdornment from "@mui/material/InputAdornment" +import TextField from "@mui/material/TextField" +import FormGroup from "@mui/material/FormGroup" + +import DeleteIcon from '@mui/icons-material/Delete' +import PublicIcon from '@mui/icons-material/Public' + +//Explorer +import Button from "@mui/material/Button" +import Container from "@mui/material/Container" +import Divider from "@mui/material/Divider" +import Grid from "@mui/material/Grid" +import TreeView from '@mui/lab/TreeView' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import ChevronRightIcon from '@mui/icons-material/ChevronRight' +import TreeItem from '@mui/lab/TreeItem' + +// CustomTextField types <- rename this to something more descriptive +interface CustomTextFieldProps { + options: string[] + onOptionAdd: (newOption: string) => void + onOptionRemove: (optionToRemove: string) => void +} + +// Explorer types +interface RenderTree { + id: string + name: string + meta?: { [key: string]: any }; + children?: RenderTree[] +} + +const data: RenderTree[] = [ + { + id: 'agents', + name: 'Agents', + children: [ + { + id: 'person', + name: 'Person', + children: [ + { + id: 'attributes9', + name: 'Attributes', + children: [ + { + id: 'CMSId', + name: 'CMSId', + meta: [ + { + id: 'CMSId_s9d68gf7', + name: 'CMSId_s9d68gf7', + description: 'Lorem Ipsum dolor sit amet', + }, + ], + }, + ], + } + ], + }, + { + id: 'organization', + name: 'Organization', + children: [ + { + id: 'attributes10', + name: 'Attributes', + children: [ + { + id: 'title', + name: 'Title', + meta: [ + { + id: 'title_s9d68gf7', + name: 'title_s9d68gf7', + description: 'Lorem Ipsum dolor sit amet', + }, + ], + }, + ], + }, + ], + }, + ], + }, + { + id: "entities", + name: "Entities", + children: [ + { + id: "Question", + name: "Question", + children: [ + { + id: "attribute5", + name: "Attributes", + children: [ + { + id: "CMSId", + name: "CMSId", + meta: [ + { + id: "CMSId_s9d68gf7", + name: "CMSId_s9d68gf7", + description: "Lorem Ipsum dolor sit amet" + } + ] + }, + { + id: "Content", + name: "Content", + meta: [] + } + ] + } + ] + }, + { + id: "Evidence", + name: "Evidence", + children: [ + { + id: "attribute6", + name: "Attributes", + children: [ + { + id: "SearchParameter", + name: "SearchParameter", + meta: [] + }, + { + id: "Reference", + name: "Reference", + meta: [] + } + ] + } + ] + }, + { + id: "Guidance", + name: "Guidance", + children: [ + { + id: "attribute7", + name: "Attributes", + children: [ + { + id: "Title", + name: "Title", + meta: [] + }, + { + id: "Version", + name: "Version", + meta: [] + } + ] + } + ] + }, + { + id: "PublishedGuidance", + name: "PublishedGuidance", + children: [ + { + id: "attribute8", + name: "Attributes", + children: [] + } + ] + } + ] + }, + { + id: "activities", + name: "Activities", + children: [ + { + id: "QuestionAsked", + name: "QuestionAsked", + children: [ + { + id: "attributes4", + name: "Attributes", + children: [ + { + id: "Content", + name: "Content", + meta: [] + } + ] + } + ] + }, + { + id: "Researched", + name: "Researched", + children: [ + { + id: "attributes1", + name: "Attributes", + children: [] + } + ] + }, + { + id: "Published", + name: "Published", + children: [ + { + id: "attributes2", + name: "Attributes", + children: [ + { + id: "Version", + name: "Version", + meta: [] + } + ] + } + ] + }, + { + id: "Revised", + name: "Revised", + children: [ + { + id: "attributes3", + name: "Attributes", + children: [ + { + id: "CMSId", + name: "CMSId", + meta: [] + }, + { + id: "Version", + name: "Version", + meta: [] + } + ] + } + ] + } + ] + } +] + +const StyledTextField = styled(TextField)({ + "& fieldset": { + borderTopRightRadius: 0, + borderBottomRightRadius: 0 + } + }) + + const StyledButton = styled(Button)({ + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }) + +const CustomTextField: React.FC = ({ options, onOptionAdd, onOptionRemove }) => { + const [inputValue, setInputValue] = useState("") + + const handleInputChange = (event: React.ChangeEvent<{}>, newInputValue: string | null) => { + setInputValue(newInputValue); + } + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault() + const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/; + if (inputValue && urlRegex.test(inputValue)) { + onOptionAdd(inputValue) + } + } + + const handleOptionRemove = (option: string) => { + onOptionRemove(option) + } + + return ( + + ( + + {option} + handleOptionRemove(option as string)}> + + + + )} + renderInput={(params) => { return ( + + + + + {params.InputProps.startAdornment} + + ) + }} + /> + )}} + /> + + Add + + + ) +} + +const Explorer: React.FC = () => { + const [selectedMeta, setSelectedMeta] = useState(null) + const [options, setOptions] = useState([ + 'https://example.com', + // any other initial options + ]) + + const handleNodeSelect = (event: React.SyntheticEvent, nodeId: string) => { + const selectedNode = findNodeById(data, nodeId); + setSelectedMeta(selectedNode?.meta || null); + }; + + const findNodeById = (nodes: RenderTree[], id: string): RenderTree | null => { + for (let node of nodes) { + if (node.id === id) { + return node; + } + if (node.children) { + const foundNode = findNodeById(node.children, id); + if (foundNode) { + return foundNode; + } + } + } + return null; + }; + + const renderTree = (nodes: RenderTree) => ( + + {Array.isArray(nodes.children) + ? nodes.children.map((node) => renderTree(node)) + : null} + + ) + + const renderObject = (obj: { [key: string]: any }) => { + return Object.entries(obj).map(([key, value]) => { + if (typeof value === 'object' && value !== null) { + return ( +
+ {key}: + {renderObject(value)} +
+ ); + } else { + return ( +
+ {key}: {value} +
+ ); + } + }); + } + + const handleOptionAdd = (newOption: string) => { + setOptions(prevOptions => [...prevOptions, newOption]) + } + + const handleOptionRemove = (optionToRemove: string) => { + setOptions(prevOptions => prevOptions.filter(option => option !== optionToRemove)); + } -const HelloWorld: React.FC = () => { return ( -
- Hello, World! -
- ); + + + + + + } + defaultExpanded={['root']} + defaultExpandIcon={} + onNodeSelect={handleNodeSelect} + > + {data.map((node) => renderTree(node))} + + + theme.shape.borderRadius, + backgroundColor: (theme) => theme.palette.grey[100] + }}> + {selectedMeta && +
+ {renderObject(selectedMeta)} +
+ } + + + + ) } -export default HelloWorld; +export default Explorer From e948292dce73a8ae46c5dd4b07ff457cc6219c83 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Thu, 27 Jul 2023 17:29:32 +0200 Subject: [PATCH 06/13] refactor(domaininput): renames customtextinput to domaininput and moves it to chronicle folder in components SXT-1023 Signed-off-by: Jimmy Holway --- src/components/chronicle/DomainInput.tsx | 94 ++++++++++++++++++ src/pages/deployment/chronicle/Explorer.tsx | 100 +------------------- 2 files changed, 97 insertions(+), 97 deletions(-) create mode 100644 src/components/chronicle/DomainInput.tsx diff --git a/src/components/chronicle/DomainInput.tsx b/src/components/chronicle/DomainInput.tsx new file mode 100644 index 00000000..5f215b22 --- /dev/null +++ b/src/components/chronicle/DomainInput.tsx @@ -0,0 +1,94 @@ +import React, { useState } from "react" +import { styled } from "@mui/system" + +import Autocomplete from "@mui/material/Autocomplete" +import Button from "@mui/material/Button" +import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete' +import MenuItem from "@mui/material/MenuItem" +import IconButton from "@mui/material/IconButton" +import InputAdornment from "@mui/material/InputAdornment" +import TextField from "@mui/material/TextField" +import FormGroup from "@mui/material/FormGroup" +import DeleteIcon from '@mui/icons-material/Delete' +import PublicIcon from '@mui/icons-material/Public' + +interface DomainInputProps { + options: string[] + onOptionAdd: (newOption: string) => void + onOptionRemove: (optionToRemove: string) => void +} + +const StyledTextField = styled(TextField)({ + "& fieldset": { + borderTopRightRadius: 0, + borderBottomRightRadius: 0 + } +}) + +const StyledButton = styled(Button)({ + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, +}) + +const DomainInput: React.FC = ({ options, onOptionAdd, onOptionRemove }) => { + const [inputValue, setInputValue] = useState("") + + const handleInputChange = (event: React.ChangeEvent<{}>, newInputValue: string | null) => { + setInputValue(newInputValue) + } + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault() + const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/; + if (inputValue && urlRegex.test(inputValue)) { + onOptionAdd(inputValue) + setInputValue(inputValue) + } + } + + const handleOptionRemove = (option: string) => { + onOptionRemove(option) + } + + return ( + + ( + + {option} + handleOptionRemove(option as string)}> + + + + )} + renderInput={(params) => { return ( + + + + + {params.InputProps.startAdornment} + + ) + }} + /> + )}} + /> + + Add + + + ) +} + +export default DomainInput diff --git a/src/pages/deployment/chronicle/Explorer.tsx b/src/pages/deployment/chronicle/Explorer.tsx index 7531bded..674adb55 100644 --- a/src/pages/deployment/chronicle/Explorer.tsx +++ b/src/pages/deployment/chronicle/Explorer.tsx @@ -1,22 +1,6 @@ import React, { useState } from 'react' -import { palette, styled } from '@mui/system' +import { styled } from '@mui/system' - -//CustomTextField - -import Autocomplete from "@mui/material/Autocomplete" -// import Button from "@mui/material/Button" -import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete' -import MenuItem from "@mui/material/MenuItem" -import IconButton from "@mui/material/IconButton" -import InputAdornment from "@mui/material/InputAdornment" -import TextField from "@mui/material/TextField" -import FormGroup from "@mui/material/FormGroup" - -import DeleteIcon from '@mui/icons-material/Delete' -import PublicIcon from '@mui/icons-material/Public' - -//Explorer import Button from "@mui/material/Button" import Container from "@mui/material/Container" import Divider from "@mui/material/Divider" @@ -26,14 +10,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ChevronRightIcon from '@mui/icons-material/ChevronRight' import TreeItem from '@mui/lab/TreeItem' -// CustomTextField types <- rename this to something more descriptive -interface CustomTextFieldProps { - options: string[] - onOptionAdd: (newOption: string) => void - onOptionRemove: (optionToRemove: string) => void -} +import DomainInput from '../../../components/chronicle/DomainInput' -// Explorer types interface RenderTree { id: string name: string @@ -258,78 +236,6 @@ const data: RenderTree[] = [ } ] -const StyledTextField = styled(TextField)({ - "& fieldset": { - borderTopRightRadius: 0, - borderBottomRightRadius: 0 - } - }) - - const StyledButton = styled(Button)({ - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }) - -const CustomTextField: React.FC = ({ options, onOptionAdd, onOptionRemove }) => { - const [inputValue, setInputValue] = useState("") - - const handleInputChange = (event: React.ChangeEvent<{}>, newInputValue: string | null) => { - setInputValue(newInputValue); - } - - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault() - const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/; - if (inputValue && urlRegex.test(inputValue)) { - onOptionAdd(inputValue) - } - } - - const handleOptionRemove = (option: string) => { - onOptionRemove(option) - } - - return ( - - ( - - {option} - handleOptionRemove(option as string)}> - - - - )} - renderInput={(params) => { return ( - - - - - {params.InputProps.startAdornment} - - ) - }} - /> - )}} - /> - - Add - - - ) -} - const Explorer: React.FC = () => { const [selectedMeta, setSelectedMeta] = useState(null) const [options, setOptions] = useState([ @@ -394,7 +300,7 @@ const Explorer: React.FC = () => { return ( - + From d6ee8fa723a6a1c00c425726ee7831066b45cda7 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Fri, 28 Jul 2023 11:13:20 +0200 Subject: [PATCH 07/13] fix(chronicle-explorer): cleans up imports, removed duplicated dummy data SXT-1023 Signed-off-by: Jimmy Holway --- src/pages/deployment/chronicle/Explorer.tsx | 65 ++++----------------- 1 file changed, 12 insertions(+), 53 deletions(-) diff --git a/src/pages/deployment/chronicle/Explorer.tsx b/src/pages/deployment/chronicle/Explorer.tsx index 674adb55..fa753f78 100644 --- a/src/pages/deployment/chronicle/Explorer.tsx +++ b/src/pages/deployment/chronicle/Explorer.tsx @@ -1,14 +1,18 @@ import React, { useState } from 'react' -import { styled } from '@mui/system' -import Button from "@mui/material/Button" -import Container from "@mui/material/Container" -import Divider from "@mui/material/Divider" -import Grid from "@mui/material/Grid" -import TreeView from '@mui/lab/TreeView' +import { + Container, + Divider, + Grid, +} from "@mui/material" + +import { + TreeItem, + TreeView, +} from '@mui/lab' + import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ChevronRightIcon from '@mui/icons-material/ChevronRight' -import TreeItem from '@mui/lab/TreeItem' import DomainInput from '../../../components/chronicle/DomainInput' @@ -104,50 +108,6 @@ const data: RenderTree[] = [ } ] }, - { - id: "Evidence", - name: "Evidence", - children: [ - { - id: "attribute6", - name: "Attributes", - children: [ - { - id: "SearchParameter", - name: "SearchParameter", - meta: [] - }, - { - id: "Reference", - name: "Reference", - meta: [] - } - ] - } - ] - }, - { - id: "Guidance", - name: "Guidance", - children: [ - { - id: "attribute7", - name: "Attributes", - children: [ - { - id: "Title", - name: "Title", - meta: [] - }, - { - id: "Version", - name: "Version", - meta: [] - } - ] - } - ] - }, { id: "PublishedGuidance", name: "PublishedGuidance", @@ -239,8 +199,7 @@ const data: RenderTree[] = [ const Explorer: React.FC = () => { const [selectedMeta, setSelectedMeta] = useState(null) const [options, setOptions] = useState([ - 'https://example.com', - // any other initial options + 'https://chronicle.domain.example', ]) const handleNodeSelect = (event: React.SyntheticEvent, nodeId: string) => { From 9468e6e27f443223e282ce2314aeb7563995748c Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Fri, 28 Jul 2023 11:14:45 +0200 Subject: [PATCH 08/13] fix(domaininput): adds form wrapper to fix submit bug, cleans up imports, sets inputValue to '' SXT-1023 Signed-off-by: Jimmy Holway --- src/components/chronicle/DomainInput.tsx | 93 +++++++++++++----------- 1 file changed, 49 insertions(+), 44 deletions(-) diff --git a/src/components/chronicle/DomainInput.tsx b/src/components/chronicle/DomainInput.tsx index 5f215b22..c60eca88 100644 --- a/src/components/chronicle/DomainInput.tsx +++ b/src/components/chronicle/DomainInput.tsx @@ -1,14 +1,17 @@ import React, { useState } from "react" import { styled } from "@mui/system" -import Autocomplete from "@mui/material/Autocomplete" -import Button from "@mui/material/Button" +import { + Autocomplete, + Button, + MenuItem, + IconButton, + InputAdornment, + TextField, + FormGroup, +} from "@mui/material" import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete' -import MenuItem from "@mui/material/MenuItem" -import IconButton from "@mui/material/IconButton" -import InputAdornment from "@mui/material/InputAdornment" -import TextField from "@mui/material/TextField" -import FormGroup from "@mui/material/FormGroup" + import DeleteIcon from '@mui/icons-material/Delete' import PublicIcon from '@mui/icons-material/Public' @@ -42,7 +45,7 @@ const DomainInput: React.FC = ({ options, onOptionAdd, onOptio const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/; if (inputValue && urlRegex.test(inputValue)) { onOptionAdd(inputValue) - setInputValue(inputValue) + setInputValue('') } } @@ -51,42 +54,44 @@ const DomainInput: React.FC = ({ options, onOptionAdd, onOptio } return ( - - ( - - {option} - handleOptionRemove(option as string)}> - - - - )} - renderInput={(params) => { return ( - - - - - {params.InputProps.startAdornment} - - ) - }} - /> - )}} - /> - - Add - + +
+ ( + + {option} + handleOptionRemove(option as string)}> + + + + )} + renderInput={(params) => { return ( + + + + + {params.InputProps.startAdornment} + + ) + }} + /> + )}} + /> + + Add + +
) } From 9e4d5cd2afc4f1558318f0758422f1ce015bafbf Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Fri, 28 Jul 2023 11:35:40 +0200 Subject: [PATCH 09/13] fix(domaininput): removes superfluous typing as codesmell SXT-1023 Signed-off-by: Jimmy Holway --- src/components/chronicle/DomainInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chronicle/DomainInput.tsx b/src/components/chronicle/DomainInput.tsx index c60eca88..267379e0 100644 --- a/src/components/chronicle/DomainInput.tsx +++ b/src/components/chronicle/DomainInput.tsx @@ -65,7 +65,7 @@ const DomainInput: React.FC = ({ options, onOptionAdd, onOptio renderOption={(props, option, state: AutocompleteRenderOptionState) => ( {option} - handleOptionRemove(option as string)}> + handleOptionRemove(option)}> From 449853c394e2002ff18726832c65f00b6ccb93e7 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Fri, 28 Jul 2023 14:51:01 +0200 Subject: [PATCH 10/13] test(domaininput): adds basic tests for DomainInput component SXT-1023 Signed-off-by: Jimmy Holway --- src/components/chronicle/DomainInput.tsx | 6 +- .../components/chronicle/DomainInput.test.tsx | 64 +++++++++++++++++++ 2 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 test/components/chronicle/DomainInput.test.tsx diff --git a/src/components/chronicle/DomainInput.tsx b/src/components/chronicle/DomainInput.tsx index 267379e0..4533aefd 100644 --- a/src/components/chronicle/DomainInput.tsx +++ b/src/components/chronicle/DomainInput.tsx @@ -1,4 +1,5 @@ -import React, { useState } from "react" +import * as React from "react" +import { useState } from "react" import { styled } from "@mui/system" import { @@ -10,6 +11,7 @@ import { TextField, FormGroup, } from "@mui/material" + import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete' import DeleteIcon from '@mui/icons-material/Delete' @@ -78,7 +80,7 @@ const DomainInput: React.FC = ({ options, onOptionAdd, onOptio ...params.InputProps, startAdornment: ( <> - + {params.InputProps.startAdornment} diff --git a/test/components/chronicle/DomainInput.test.tsx b/test/components/chronicle/DomainInput.test.tsx new file mode 100644 index 00000000..dd6d3aa2 --- /dev/null +++ b/test/components/chronicle/DomainInput.test.tsx @@ -0,0 +1,64 @@ +/** + * @jest-environment jsdom + */ + +import * as React from "react" +import { render, fireEvent, screen } from "@testing-library/react" +import DomainInput from "../../../src/components/chronicle/DomainInput" +import '@testing-library/jest-dom' + +describe("DomainInput", () => { + let options: string[] + let onOptionAdd: (newOption: string) => void + let onOptionRemove: (optionToRemove: string) => void + + beforeEach(() => { + options = ["http://example.com", "http://google.com"] + onOptionAdd = jest.fn() + onOptionRemove = jest.fn() + }) + + test("renders without crashing", () => { + render( + + ) + }) + + test("adds an option when a valid URL is entered and the Add button is clicked", () => { + render( + + ) + + fireEvent.change(screen.getByRole("combobox"), { + target: { value: "http://newurl.com" }, + }) + fireEvent.click(screen.getByRole("button", { name: "Add" })) + + expect(onOptionAdd).toHaveBeenCalledWith("http://newurl.com") + }) + + test("does not add an option when an invalid URL is entered and the Add button is clicked", () => { + render( + + ) + + fireEvent.change(screen.getByRole("combobox"), { + target: { value: "invalidurl" }, + }) + fireEvent.click(screen.getByRole("button", { name: "Add" })) + + expect(onOptionAdd).not.toHaveBeenCalled() + }) +}) From f1122edce6dc6df1d1910d1d8f7346ac6e102b30 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Fri, 4 Aug 2023 12:29:16 +0200 Subject: [PATCH 11/13] fix(containers-chronicle): updates chronicle container to point to tabbed playground/explorer SXT-1023 Signed-off-by: Jimmy Holway --- src/containers/deployment/chronicle/Chronicle.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/containers/deployment/chronicle/Chronicle.js b/src/containers/deployment/chronicle/Chronicle.js index b557094d..91b629e9 100644 --- a/src/containers/deployment/chronicle/Chronicle.js +++ b/src/containers/deployment/chronicle/Chronicle.js @@ -5,8 +5,7 @@ import routerActions from 'store/modules/router' import selectors from 'store/selectors' import Loading from 'components/system/Loading' -// import ChronicleExplorer from 'pages/deployment/chronicle/Explorer' -import Playground from 'pages/deployment/chronicle/Playground' +import Chronicle from 'pages/deployment/chronicle' const onCancel = (cluster) => routerActions.navigateTo('deployments', { cluster }) @connect( @@ -43,7 +42,7 @@ class DeploymentChronicleContainer extends React.Component { } return ( - ) From 18f68b22cd1153b74ca1e183c3d7a4a1d93c78a7 Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Fri, 4 Aug 2023 12:30:32 +0200 Subject: [PATCH 12/13] fix(router): consolidates playground/explorer to one view SXT-1023 Signed-off-by: Jimmy Holway --- src/router/Router.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/router/Router.js b/src/router/Router.js index b1aba8e2..9d0ecacc 100644 --- a/src/router/Router.js +++ b/src/router/Router.js @@ -33,8 +33,6 @@ import DeploymentSettingsDamlParties from 'containers/deployment/daml/Deployment import DeploymentSettingsDamlArchives from 'containers/deployment/daml/DeploymentSettingsDamlArchives' import DeploymentSettingsDamlTimeService from 'containers/deployment/daml/DeploymentSettingsDamlTimeService' -import DeploymentChronicle from 'containers/deployment/chronicle/Chronicle' - import DeploymentSettingsTaekionCli from 'containers/deployment/taekion/Cli' import DeploymentSettingsTaekionKeys from 'containers/deployment/taekion/Keys' import DeploymentSettingsTaekionVolumes from 'containers/deployment/taekion/Volumes' From 3dfe72f8f68e299d055803bda216d6ece1ec1c5b Mon Sep 17 00:00:00 2001 From: Jimmy Holway Date: Fri, 4 Aug 2023 12:32:43 +0200 Subject: [PATCH 13/13] feat(pages-chronicle): puts playground and explorer into tabbed layout view SXT-1023 Signed-off-by: Jimmy Holway --- src/pages/deployment/chronicle/index.tsx | 71 ++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 src/pages/deployment/chronicle/index.tsx diff --git a/src/pages/deployment/chronicle/index.tsx b/src/pages/deployment/chronicle/index.tsx new file mode 100644 index 00000000..cbb7bf2e --- /dev/null +++ b/src/pages/deployment/chronicle/index.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import { styled } from '@mui/system'; +import Box from '@mui/material/Box'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; + +import Explorer from './Explorer'; +import Playground from './Playground'; + +interface TabPanelProps { + children?: React.ReactNode; + index: number; + value: number; +} + +const VerticalFillContainer = styled('div')({ + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + width: '100%', +}) + +function CustomTabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props; + + return ( + + {value === index && children} + + ); +} + +function a11yProps(index: number) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + }; +} + +export default function BasicTabs() { + const [value, setValue] = React.useState(0); + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + + return ( + + + + + + + + + + + + + + + + + ) +}