From e34f277fed0e5811bb92085ef24515e380f74ff6 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 21:34:31 -0500 Subject: [PATCH 01/35] Add react-split library. --- package-lock.json | 32 ++++++++++++++++++++++++++++++++ package.json | 3 ++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index a7a14de05..2691befcf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", + "react-split": "^2.0.14", "web-vitals": "^2.1.2" }, "devDependencies": { @@ -30962,6 +30963,18 @@ "throttle-debounce": "^3.0.1" } }, + "node_modules/react-split": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz", + "integrity": "sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==", + "dependencies": { + "prop-types": "^15.5.7", + "split.js": "^1.6.0" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-syntax-highlighter": { "version": "13.5.3", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz", @@ -33453,6 +33466,11 @@ "node": ">=0.10.0" } }, + "node_modules/split.js": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz", + "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==" + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -60538,6 +60556,15 @@ "throttle-debounce": "^3.0.1" } }, + "react-split": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz", + "integrity": "sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==", + "requires": { + "prop-types": "^15.5.7", + "split.js": "^1.6.0" + } + }, "react-syntax-highlighter": { "version": "13.5.3", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz", @@ -62512,6 +62539,11 @@ "extend-shallow": "^3.0.0" } }, + "split.js": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz", + "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==" + }, "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", diff --git a/package.json b/package.json index 368067cf6..57c57bca6 100644 --- a/package.json +++ b/package.json @@ -30,10 +30,11 @@ "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", + "react-split": "^2.0.14", "web-vitals": "^2.1.2" }, "scripts": { - "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment", + "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false --jsxFragment React.Fragment", "build": "microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment", "prepare": "run-s build", "test": "react-scripts test", From ab0edb465f6e085b13627c4b1972dffe90216ba9 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 21:35:57 -0500 Subject: [PATCH 02/35] Update OSCALLoader components. Added conditional checks for `isRestMode` and added the react-split control so that when `isRestMode` is `true` the `OSCALLoader` component will render a split pane. --- src/components/OSCALLoader.css | 15 +++++++++++++++ src/components/OSCALLoader.js | 21 ++++++++++++++++----- 2 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 src/components/OSCALLoader.css diff --git a/src/components/OSCALLoader.css b/src/components/OSCALLoader.css new file mode 100644 index 000000000..990fac86a --- /dev/null +++ b/src/components/OSCALLoader.css @@ -0,0 +1,15 @@ +.split { + display: flex; + flex-direction: row; +} + +.gutter { + background-color: #eee; + background-repeat: no-repeat; + background-position: 50%; +} + +.gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: col-resize; +} \ No newline at end of file diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js index ba2522b3e..9bb401f92 100644 --- a/src/components/OSCALLoader.js +++ b/src/components/OSCALLoader.js @@ -6,6 +6,8 @@ import OSCALCatalog from "./OSCALCatalog"; import OSCALComponentDefinition from "./OSCALComponentDefinition"; import OSCALProfile from "./OSCALProfile"; import OSCALLoaderForm from "./OSCALLoaderForm"; +import Split from "react-split"; +import "./OSCALLoader.css"; const onError = (error) => ( @@ -214,11 +216,20 @@ export default function OSCALLoader(props) { } else if (!isLoaded) { result = ; } else if (oscalUrl) { - result = props.renderer( - isRestMode, - oscalData, - oscalUrl, - onResolutionComplete + result = ( + + { + isRestMode &&
Hello World!
+ } + { + props.renderer( + isRestMode, + oscalData, + oscalUrl, + onResolutionComplete) + } + ); } From 5f8a7a0788494d90065510e7fd2186f2de7317bf Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 21:38:51 -0500 Subject: [PATCH 03/35] Update App.js. --- example/src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/example/src/App.js b/example/src/App.js index 7ec13c0e1..8893d3eb4 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,4 +1,5 @@ import "./App.css"; +import "@EasyDynamics/oscal-react-library/dist/index.css" import { makeStyles, createTheme } from "@material-ui/core/styles"; import React, { useEffect, useState } from "react"; import Typography from "@material-ui/core/Typography"; From 8dc798f79d10c5419d8d7e7a806805607f5fe954 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 21:45:56 -0500 Subject: [PATCH 04/35] Add @monaco-editor/react pacakge. --- package-lock.json | 65 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 66 insertions(+) diff --git a/package-lock.json b/package-lock.json index 2691befcf..2bd374647 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/styles": "^4.11.4", + "@monaco-editor/react": "^4.3.1", "@testing-library/dom": "^8.11.3", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", @@ -3836,6 +3837,31 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz", + "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==", + "dependencies": { + "state-local": "^1.0.6" + }, + "peerDependencies": { + "monaco-editor": ">= 0.21.0 < 1" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz", + "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==", + "dependencies": { + "@monaco-editor/loader": "^1.2.0", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, "node_modules/@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -26204,6 +26230,12 @@ "integrity": "sha1-EUyUlnPiqKNenTV4hSeqN7Z52is=", "dev": true }, + "node_modules/monaco-editor": { + "version": "0.32.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.32.1.tgz", + "integrity": "sha512-LUt2wsUvQmEi2tfTOK+tjAPvt7eQ+K5C4rZPr6SeuyzjAuAHrIvlUloTcOiGjZW3fn3a/jFQCONrEJbNOaCqbA==", + "peer": true + }, "node_modules/move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -33517,6 +33549,11 @@ "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz", "integrity": "sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg==" }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "node_modules/state-toggle": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz", @@ -39952,6 +39989,23 @@ "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==", "dev": true }, + "@monaco-editor/loader": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz", + "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==", + "requires": { + "state-local": "^1.0.6" + } + }, + "@monaco-editor/react": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz", + "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==", + "requires": { + "@monaco-editor/loader": "^1.2.0", + "prop-types": "^15.7.2" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -57092,6 +57146,12 @@ "integrity": "sha1-EUyUlnPiqKNenTV4hSeqN7Z52is=", "dev": true }, + "monaco-editor": { + "version": "0.32.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.32.1.tgz", + "integrity": "sha512-LUt2wsUvQmEi2tfTOK+tjAPvt7eQ+K5C4rZPr6SeuyzjAuAHrIvlUloTcOiGjZW3fn3a/jFQCONrEJbNOaCqbA==", + "peer": true + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -62583,6 +62643,11 @@ "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz", "integrity": "sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg==" }, + "state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "state-toggle": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz", diff --git a/package.json b/package.json index 57c57bca6..908ab4090 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/styles": "^4.11.4", + "@monaco-editor/react": "^4.3.1", "@testing-library/dom": "^8.11.3", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", From 3c2ccd74b26bafb7500cca51105a725de99799d6 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 22:32:07 -0500 Subject: [PATCH 05/35] Add OSCALJsonEditor.js. --- src/components/OSCALJsonEditor.js | 43 +++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/components/OSCALJsonEditor.js diff --git a/src/components/OSCALJsonEditor.js b/src/components/OSCALJsonEditor.js new file mode 100644 index 000000000..5fa2e5b9f --- /dev/null +++ b/src/components/OSCALJsonEditor.js @@ -0,0 +1,43 @@ +import React, { useRef } from "react"; +import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; +import Editor from "@monaco-editor/react"; + + +export default function OSCALJsonEditor(props) { + + const editorRef = useRef(null); + const [controlJson, setControlJson] = React.useState(JSON.stringify(props.value)); + + const editorOptions = { + extraEditorClassName: "editor", + minimap: { + enabled: false + }, + scrollbar: { + verticalHasArrows: true + } + }; + + + function handleEditorDidMount(editor) { + editorRef.current = editor; + } + + function onSave() { + setControlJson(editorRef.current.getValue()); + } + + return ( +
+ + +
+ ); +} \ No newline at end of file From e1d8f4ec6e6399f9a4327e2316d061b818ecc86b Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 22:32:39 -0500 Subject: [PATCH 06/35] Update OSCALLoader component. --- src/components/OSCALLoader.css | 5 +++++ src/components/OSCALLoader.js | 28 +++++++++++++++++----------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/OSCALLoader.css b/src/components/OSCALLoader.css index 990fac86a..230ce4b6c 100644 --- a/src/components/OSCALLoader.css +++ b/src/components/OSCALLoader.css @@ -3,6 +3,11 @@ flex-direction: row; } +.split, .pane { + overflow-y: auto; + overflow-x: hidden; +} + .gutter { background-color: #eee; background-repeat: no-repeat; diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js index 9bb401f92..cfd078e1f 100644 --- a/src/components/OSCALLoader.js +++ b/src/components/OSCALLoader.js @@ -7,6 +7,7 @@ import OSCALComponentDefinition from "./OSCALComponentDefinition"; import OSCALProfile from "./OSCALProfile"; import OSCALLoaderForm from "./OSCALLoaderForm"; import Split from "react-split"; +import OSCALJsonEditor from "./OSCALJsonEditor"; import "./OSCALLoader.css"; const onError = (error) => ( @@ -218,17 +219,22 @@ export default function OSCALLoader(props) { } else if (oscalUrl) { result = ( - { - isRestMode &&
Hello World!
- } - { - props.renderer( - isRestMode, - oscalData, - oscalUrl, - onResolutionComplete) - } + sizes={isRestMode ? [25, 75] : []} + minSize={0}> +
+ { + isRestMode && + } +
+
+ { + props.renderer( + isRestMode, + oscalData, + oscalUrl, + onResolutionComplete) + } +
); } From 56a6c5ba26ad616f69fcbdff67b1f5ba36a104bf Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Sat, 19 Feb 2022 17:30:41 -0500 Subject: [PATCH 07/35] Update App.js. The `maxWidth` value of `xl` was added which overrides the default of large. This was done so that the JSON editor can be accomodated in the application. --- example/src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/App.js b/example/src/App.js index 8893d3eb4..1b9e8abeb 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -175,7 +175,7 @@ function App() { - + Date: Sat, 19 Feb 2022 17:43:50 -0500 Subject: [PATCH 08/35] Update OSCALLoader.js. The split pane defaults were updated so that the JSON Editor and viewer share a 50/50 split. The `minSize` value was also updated to 500 as a sensible default, because collapsing a pane to 0 can cause issues. --- src/components/OSCALLoader.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js index cfd078e1f..587ac737f 100644 --- a/src/components/OSCALLoader.js +++ b/src/components/OSCALLoader.js @@ -219,8 +219,8 @@ export default function OSCALLoader(props) { } else if (oscalUrl) { result = ( + sizes={isRestMode ? [50, 50] : []} + minSize={500}>
{ isRestMode && From 5666ce06f2d66cdfd553f5cd198b710c0dc03ec2 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Sat, 19 Feb 2022 17:49:36 -0500 Subject: [PATCH 09/35] Update OSCALJsonEditor.js. The updates improve the look and feel based on the margins and grid layout. The editor was also made sticky so that it follows veritical scrolling. --- src/components/OSCALJsonEditor.js | 56 ++++++++++++++++++++++--------- 1 file changed, 40 insertions(+), 16 deletions(-) diff --git a/src/components/OSCALJsonEditor.js b/src/components/OSCALJsonEditor.js index 5fa2e5b9f..58fe5f098 100644 --- a/src/components/OSCALJsonEditor.js +++ b/src/components/OSCALJsonEditor.js @@ -2,42 +2,66 @@ import React, { useRef } from "react"; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import Editor from "@monaco-editor/react"; +import { Grid, makeStyles, Typography } from "@material-ui/core"; export default function OSCALJsonEditor(props) { + const useStyles = makeStyles({ + grid: { + paddingRight: "16px", + position: "sticky", + top: "16px", + overflow: "hidden" + }, + editor: { + marginTop: "8px", + marginBottom: "8px", + width: "100%" + }, + chrome: { + } + }); + const classes = useStyles(); + const editorRef = useRef(null); - const [controlJson, setControlJson] = React.useState(JSON.stringify(props.value)); + const [value, setValue] = React.useState(JSON.stringify(props.value, null, "\t")); const editorOptions = { - extraEditorClassName: "editor", minimap: { enabled: false }, scrollbar: { verticalHasArrows: true - } + }, + tabSize: 2 }; - function handleEditorDidMount(editor) { + function handleEditorDidMount(editor, monaco) { editorRef.current = editor; } - function onSave() { - setControlJson(editorRef.current.getValue()); + function onClick() { + setValue(editorRef.current.getValue()); } return ( -
- - -
+ + + JSON Editor + + + + + + + + ); } \ No newline at end of file From 54ea88738dbd4d472cce010ea92045fb8b7421b4 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Sat, 19 Feb 2022 17:53:06 -0500 Subject: [PATCH 10/35] Update OSCALLoader.css. Removed overflow attributes, since they cause conflicts with sticky HTML elements. --- src/components/OSCALLoader.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/OSCALLoader.css b/src/components/OSCALLoader.css index 230ce4b6c..990fac86a 100644 --- a/src/components/OSCALLoader.css +++ b/src/components/OSCALLoader.css @@ -3,11 +3,6 @@ flex-direction: row; } -.split, .pane { - overflow-y: auto; - overflow-x: hidden; -} - .gutter { background-color: #eee; background-repeat: no-repeat; From 3f73f944c6eaf89514b77c23fc09a0461f9e34ba Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Sat, 19 Feb 2022 19:06:20 -0500 Subject: [PATCH 11/35] Update package-lock.json. --- example/package-lock.json | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 63b0e1fc9..f04b7e88c 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -33,15 +33,17 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/styles": "^4.11.4", + "@monaco-editor/react": "^4.3.1", "@testing-library/dom": "^8.11.3", "@testing-library/jest-dom": "^5.16.2", - "@testing-library/react": "^12.1.2", + "@testing-library/react": "^12.1.3", "history": "^5.2.0", "prop-types": "^15.8.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", + "react-split": "^2.0.14", "web-vitals": "^2.1.2" }, "devDependencies": { @@ -73,7 +75,7 @@ "microbundle-crl": "^0.13.11", "npm-run-all": "^4.1.5", "prettier": "^2.5.1", - "webpack": "^5.68.0" + "webpack": "^5.69.1" }, "engines": { "node": ">=10" @@ -35050,6 +35052,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/styles": "^4.11.4", + "@monaco-editor/react": "^4.3.1", "@storybook/addon-actions": "^6.4.19", "@storybook/addon-docs": "^6.4.19", "@storybook/addon-essentials": "^6.4.19", @@ -35061,7 +35064,7 @@ "@storybook/react": "^6.4.19", "@testing-library/dom": "^8.11.3", "@testing-library/jest-dom": "^5.16.2", - "@testing-library/react": "^12.1.2", + "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", "babel-eslint": "^10.1.0", "cross-env": "^7.0.3", @@ -35085,8 +35088,9 @@ "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", + "react-split": "^2.0.14", "web-vitals": "^2.1.2", - "webpack": "^5.68.0" + "webpack": "^5.69.1" }, "dependencies": { "@ampproject/remapping": { From 69912886eab3187630af4cf7da1ceaffdc89711b Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 22:32:07 -0500 Subject: [PATCH 12/35] Add OSCALJsonEditor.js. --- src/components/OSCALJsonEditor.js | 128 +++++++++++++++++------------- src/components/OSCALLoader.js | 64 +++++++++++---- 2 files changed, 120 insertions(+), 72 deletions(-) diff --git a/src/components/OSCALJsonEditor.js b/src/components/OSCALJsonEditor.js index 58fe5f098..399815d20 100644 --- a/src/components/OSCALJsonEditor.js +++ b/src/components/OSCALJsonEditor.js @@ -1,67 +1,83 @@ import React, { useRef } from "react"; -import Box from '@material-ui/core/Box'; -import Button from '@material-ui/core/Button'; +import Button from "@material-ui/core/Button"; import Editor from "@monaco-editor/react"; import { Grid, makeStyles, Typography } from "@material-ui/core"; - +import SaveIcon from "@material-ui/icons/Save"; export default function OSCALJsonEditor(props) { + const useStyles = makeStyles({ + grid: { + paddingRight: "16px", + position: "sticky", + top: "16px", + overflow: "hidden", + }, + editor: { + marginTop: "8px", + marginBottom: "8px", + width: "100%", + }, + }); + const classes = useStyles(); + const editorRef = useRef(null); - const useStyles = makeStyles({ - grid: { - paddingRight: "16px", - position: "sticky", - top: "16px", - overflow: "hidden" - }, - editor: { - marginTop: "8px", - marginBottom: "8px", - width: "100%" - }, - chrome: { - } - }); - const classes = useStyles(); - - const editorRef = useRef(null); - const [value, setValue] = React.useState(JSON.stringify(props.value, null, "\t")); - - const editorOptions = { - minimap: { - enabled: false - }, - scrollbar: { - verticalHasArrows: true - }, - tabSize: 2 - }; + const editorOptions = { + minimap: { + enabled: false, + }, + scrollbar: { + verticalHasArrows: true, + }, + tabSize: 2, + }; + handleEditorDidMount = (editor) => { + editorRef.current = editor; + }; - function handleEditorDidMount(editor, monaco) { - editorRef.current = editor; - } + handleSaveButtonClick = () => { + props.onSave(editorRef.current.getValue()); + }; - function onClick() { - setValue(editorRef.current.getValue()); - } + handleDiscardButtonClick = () => + editorRef.current.setValue(JSON.stringify(props.value, null, "\t")); + }; - return ( - - - JSON Editor - - - - - - - - - ); + return ( + + + + JSON Editor + + + + + + + + + + + ); } \ No newline at end of file diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js index 587ac737f..f3b7ec90c 100644 --- a/src/components/OSCALLoader.js +++ b/src/components/OSCALLoader.js @@ -1,14 +1,14 @@ import React, { useState, useEffect, useRef } from "react"; import Alert from "@material-ui/lab/Alert"; import CircularProgress from "@material-ui/core/CircularProgress"; +import Split from "react-split"; +import { makeStyles } from "@material-ui/core/styles"; import OSCALSsp from "./OSCALSsp"; import OSCALCatalog from "./OSCALCatalog"; import OSCALComponentDefinition from "./OSCALComponentDefinition"; import OSCALProfile from "./OSCALProfile"; import OSCALLoaderForm from "./OSCALLoaderForm"; -import Split from "react-split"; import OSCALJsonEditor from "./OSCALJsonEditor"; -import "./OSCALLoader.css"; const onError = (error) => ( @@ -52,6 +52,23 @@ const oscalObjectTypes = { }, }; +const useStyles = makeStyles({ + split: { + display: "flex", + flexDirection: " row", + "& > .gutter": { + backgroundColor: "#eee", + backgroundRepeat: "no-repeat", + backgroundPosition: "50%", + "&.gutter-horizontal": { + backgroundImage: + "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')", + cursor: "col-resize", + }, + }, + }, +}); + function populatePartialPatchData(data, editedFieldJsonPath, newValue) { if (editedFieldJsonPath.length === 1) { const editData = data; @@ -103,6 +120,7 @@ function restPatch( } export default function OSCALLoader(props) { + const classes = useStyles(); const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [isResolutionComplete, setIsResolutionComplete] = useState(false); @@ -176,6 +194,19 @@ export default function OSCALLoader(props) { } }; + const handleEditorSave = (jsonString) => { + const requestOptions = { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: jsonString, + }; + const promise = new Promise((resolve) => { + resolve("done"); + }); + promise.then(() => setOscalData(jsonString)); + fetch(oscalUrl, requestOptions); + }; + const onResolutionComplete = () => { setIsResolutionComplete(true); }; @@ -218,22 +249,23 @@ export default function OSCALLoader(props) { result = ; } else if (oscalUrl) { result = ( - -
- { - isRestMode && - } + > +
+ {isRestMode && ( + + )}
-
- { - props.renderer( - isRestMode, - oscalData, - oscalUrl, - onResolutionComplete) - } +
+ {props.renderer( + isRestMode, + oscalData, + oscalUrl, + onResolutionComplete + )}
); From 1aefb31e0bd812c9bda3a264af11b636a3070d38 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 21:35:57 -0500 Subject: [PATCH 13/35] Update OSCALLoader.js. The split pane defaults were updated so that the JSON Editor and viewer share a 50/50 split. The `minSize` value was also updated to 500 as a sensible default, because collapsing a pane to 0 can cause issues. --- example/src/App.js | 1 - package.json | 4 ++-- src/components/OSCALLoader.js | 7 +++++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/example/src/App.js b/example/src/App.js index 1b9e8abeb..5363072c6 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,5 +1,4 @@ import "./App.css"; -import "@EasyDynamics/oscal-react-library/dist/index.css" import { makeStyles, createTheme } from "@material-ui/core/styles"; import React, { useEffect, useState } from "react"; import Typography from "@material-ui/core/Typography"; diff --git a/package.json b/package.json index 908ab4090..8e610f098 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "web-vitals": "^2.1.2" }, "scripts": { - "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false --jsxFragment React.Fragment", + "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment", "build": "microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment", "prepare": "run-s build", "test": "react-scripts test", @@ -104,4 +104,4 @@ "files": [ "dist" ] -} +} \ No newline at end of file diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js index f3b7ec90c..75361362e 100644 --- a/src/components/OSCALLoader.js +++ b/src/components/OSCALLoader.js @@ -195,16 +195,19 @@ export default function OSCALLoader(props) { }; const handleEditorSave = (jsonString) => { + console.debug("handleEditorSave triggered."); const requestOptions = { method: "PUT", headers: { "Content-Type": "application/json" }, body: jsonString, }; - const promise = new Promise((resolve) => { + console.debug(`PUT ${oscalUrl}`); + const promise = new Promise((resolve, reject) => { resolve("done"); }); promise.then(() => setOscalData(jsonString)); - fetch(oscalUrl, requestOptions); + // fetch(oscalUrl, requestOptions) + // .then(response => console.debug("")) }; const onResolutionComplete = () => { From c6b0d4e4c1cdd2b6aa9720acaea84c2c1d4d9e05 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 18 Feb 2022 21:35:57 -0500 Subject: [PATCH 14/35] Update OSCALLoader.js. The split pane defaults were updated so that the JSON Editor and viewer share a 50/50 split. The `minSize` value was also updated to 500 as a sensible default, because collapsing a pane to 0 can cause issues. --- example/src/App.js | 1 - package.json | 4 ++-- src/components/OSCALLoader.css | 15 --------------- src/components/OSCALLoader.js | 7 +++++-- 4 files changed, 7 insertions(+), 20 deletions(-) delete mode 100644 src/components/OSCALLoader.css diff --git a/example/src/App.js b/example/src/App.js index 1b9e8abeb..5363072c6 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,5 +1,4 @@ import "./App.css"; -import "@EasyDynamics/oscal-react-library/dist/index.css" import { makeStyles, createTheme } from "@material-ui/core/styles"; import React, { useEffect, useState } from "react"; import Typography from "@material-ui/core/Typography"; diff --git a/package.json b/package.json index 908ab4090..8e610f098 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "web-vitals": "^2.1.2" }, "scripts": { - "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false --jsxFragment React.Fragment", + "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment", "build": "microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment", "prepare": "run-s build", "test": "react-scripts test", @@ -104,4 +104,4 @@ "files": [ "dist" ] -} +} \ No newline at end of file diff --git a/src/components/OSCALLoader.css b/src/components/OSCALLoader.css deleted file mode 100644 index 990fac86a..000000000 --- a/src/components/OSCALLoader.css +++ /dev/null @@ -1,15 +0,0 @@ -.split { - display: flex; - flex-direction: row; -} - -.gutter { - background-color: #eee; - background-repeat: no-repeat; - background-position: 50%; -} - -.gutter.gutter-horizontal { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); - cursor: col-resize; -} \ No newline at end of file diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js index f3b7ec90c..75361362e 100644 --- a/src/components/OSCALLoader.js +++ b/src/components/OSCALLoader.js @@ -195,16 +195,19 @@ export default function OSCALLoader(props) { }; const handleEditorSave = (jsonString) => { + console.debug("handleEditorSave triggered."); const requestOptions = { method: "PUT", headers: { "Content-Type": "application/json" }, body: jsonString, }; - const promise = new Promise((resolve) => { + console.debug(`PUT ${oscalUrl}`); + const promise = new Promise((resolve, reject) => { resolve("done"); }); promise.then(() => setOscalData(jsonString)); - fetch(oscalUrl, requestOptions); + // fetch(oscalUrl, requestOptions) + // .then(response => console.debug("")) }; const onResolutionComplete = () => { From 80129de848a82c092bc1916751fd303e12f2bb6b Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 25 Feb 2022 05:17:33 -0500 Subject: [PATCH 15/35] Add support for PUT method --- example/package-lock.json | 4 +- src/components/OSCALJsonEditor.js | 26 +++++-------- src/components/OSCALLoader.js | 62 +++++++++++++++---------------- 3 files changed, 41 insertions(+), 51 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 38fc3bb20..3b11abc42 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -37,7 +37,7 @@ "@testing-library/dom": "^8.11.3", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", - "history": "^5.2.0", + "history": "^5.3.0", "prop-types": "^15.8.0", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -35079,7 +35079,7 @@ "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.28.0", "gh-pages": "^3.2.3", - "history": "^5.2.0", + "history": "^5.3.0", "microbundle-crl": "^0.13.11", "npm-run-all": "^4.1.5", "prettier": "^2.5.1", diff --git a/src/components/OSCALJsonEditor.js b/src/components/OSCALJsonEditor.js index 399815d20..a879f3c79 100644 --- a/src/components/OSCALJsonEditor.js +++ b/src/components/OSCALJsonEditor.js @@ -31,18 +31,6 @@ export default function OSCALJsonEditor(props) { tabSize: 2, }; - handleEditorDidMount = (editor) => { - editorRef.current = editor; - }; - - handleSaveButtonClick = () => { - props.onSave(editorRef.current.getValue()); - }; - - handleDiscardButtonClick = () => - editorRef.current.setValue(JSON.stringify(props.value, null, "\t")); - }; - return ( @@ -54,7 +42,9 @@ export default function OSCALJsonEditor(props) { { + editorRef.current = editor; + }} value={JSON.stringify(props.value, null, "\t")} defaultLanguage="json" /> @@ -62,7 +52,9 @@ export default function OSCALJsonEditor(props) { - + + + + + + + + ); From e8cae87332e2d543869995d7572a5c90483d2f97 Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 25 Feb 2022 15:31:18 -0500 Subject: [PATCH 20/35] Update OSCALLoader.js --- src/components/OSCALLoader.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js index f0154e835..7b8d71ea4 100644 --- a/src/components/OSCALLoader.js +++ b/src/components/OSCALLoader.js @@ -46,13 +46,10 @@ const oscalObjectTypes = { }, }; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ split: { display: "flex", flexDirection: " row", - "& > .viewer": { - marginLeft: theme.spacing(2), - }, "& > .gutter": { backgroundColor: "#eee", backgroundRepeat: "no-repeat", @@ -227,18 +224,12 @@ export default function OSCALLoader(props) { if (!isLoaded) { result = ; } else if (oscalUrl) { - result = ( - + result = isRestMode ? ( + - {isRestMode && ( - - )} + - + {props.renderer( isRestMode, oscalData, @@ -248,6 +239,16 @@ export default function OSCALLoader(props) { )} + ) : ( + <> + {props.renderer( + isRestMode, + oscalData, + oscalUrl, + onResolutionComplete, + handleRestPatch + )} + ); } From d1ac2d940f58aa3f8600dcd301110fe0a3ea07ad Mon Sep 17 00:00:00 2001 From: Pranav Kothare Date: Fri, 25 Feb 2022 15:31:32 -0500 Subject: [PATCH 21/35] Update OSCALLoaderForm.js --- src/components/OSCALLoaderForm.js | 37 ++++++++++++++----------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/src/components/OSCALLoaderForm.js b/src/components/OSCALLoaderForm.js index a796343fb..af254ae4e 100644 --- a/src/components/OSCALLoaderForm.js +++ b/src/components/OSCALLoaderForm.js @@ -63,27 +63,9 @@ export default function OSCALLoaderForm(props) { }} > - {process.env.REACT_APP_REST_BASE_URL && ( - <> - - - - } - label="REST Mode" - /> - - - )} {!props.isRestMode ? ( <> - + - + diff --git a/src/components/OSCALJsonEditor.test.js b/src/components/OSCALJsonEditor.test.js new file mode 100644 index 000000000..20357b2e3 --- /dev/null +++ b/src/components/OSCALJsonEditor.test.js @@ -0,0 +1,130 @@ +import { React } from "react"; +import { + act, + render, + screen, + waitFor, + fireEvent, + within, +} from "@testing-library/react"; +import OSCALJsonEditor from "./OSCALJsonEditor"; + +const oscalData = { + "component-definition": { + metadata: { + title: "Test Component Definition", + version: "20200723", + "last-modified": "2021-06-08T13:57:28.355446-04:00", + parties: [ + { + type: "organization", + uuid: "ee47836c-877c-4007-bbf3-c9d9bd805a9a", + name: "Test Vendor", + }, + ], + "oscal-version": "1.0.0", + }, + }, +}; + +jest.mock( + "@monaco-editor/react", + () => + function Editor(props) { + const fragment = ( +