diff --git a/package-lock.json b/package-lock.json index 28aa610..6bfaa16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@material-ui/core": "^4.12.4", "@mui/icons-material": "^5.5.1", "@mui/material": "^5.10.14", + "allotment": "^1.20.2", "axios": "^1.6.5", "babel-plugin-dynamic-import-node": "^2.3.3", "classnames": "^2.3.1", @@ -4018,6 +4019,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", @@ -4025,9 +4031,9 @@ "dev": true }, "node_modules/@madie/madie-design-system": { - "version": "1.2.32", - "resolved": "https://registry.npmjs.org/@madie/madie-design-system/-/madie-design-system-1.2.32.tgz", - "integrity": "sha512-dsk8zlg01EJNq8WL28x1VAfI/Q1oFMRUr3QRdnEA9LXoscle+x9mQx3lwqSNVuka3ZhnteRkJDD/dvg5mk4NQQ==", + "version": "1.2.37", + "resolved": "https://registry.npmjs.org/@madie/madie-design-system/-/madie-design-system-1.2.37.tgz", + "integrity": "sha512-sIz3pN+gM0iXA64t4TUxmipsK4gIPHWI2auMVaaQt7fJvrjldpTuldzVmRjhbWwLsqWTJ1Ms86aLCQc9MIrUkA==", "dependencies": { "@cmsgov/design-system": "^5.0.2", "@emotion/react": "^11.8.2", @@ -4040,7 +4046,7 @@ "@reach/portal": "^0.16.2", "@reach/tooltip": "^0.16.2", "axios": "^1.7.4", - "cookie": "^0.4.1", + "cookie": "^0.7.2", "cross-env": "^7.0.3", "d3-selection": "^1.4.2", "d3-shape": "^1.3.7", @@ -6146,6 +6152,28 @@ "ajv": "^6.9.1" } }, + "node_modules/allotment": { + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/allotment/-/allotment-1.20.2.tgz", + "integrity": "sha512-TaCuHfYNcsJS9EPk04M7TlG5Rl3vbAdHeAyrTE9D5vbpzV+wxnRoUrulDbfnzaQcPIZKpHJNixDOoZNuzliKEA==", + "dependencies": { + "classnames": "^2.3.0", + "eventemitter3": "^5.0.0", + "lodash.clamp": "^4.0.0", + "lodash.debounce": "^4.0.0", + "lodash.isequal": "^4.5.0", + "use-resize-observer": "^9.0.0" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/allotment/node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -7594,9 +7622,9 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" }, "node_modules/cookie": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", - "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", "engines": { "node": ">= 0.6" } @@ -9347,9 +9375,9 @@ } }, "node_modules/express": { - "version": "4.21.0", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz", - "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==", + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", + "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", "dev": true, "dependencies": { "accepts": "~1.3.8", @@ -9357,7 +9385,7 @@ "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.7.1", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", @@ -9389,9 +9417,9 @@ } }, "node_modules/express/node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "dev": true, "engines": { "node": ">= 0.6" @@ -10643,9 +10671,9 @@ } }, "node_modules/http-proxy-middleware": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz", - "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz", + "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==", "dev": true, "dependencies": { "@types/http-proxy": "^1.17.8", @@ -13878,17 +13906,26 @@ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" }, + "node_modules/lodash.clamp": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz", + "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", - "dev": true + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, "node_modules/lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -18550,6 +18587,18 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-resize-observer": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", + "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==", + "dependencies": { + "@juggle/resize-observer": "^3.3.1" + }, + "peerDependencies": { + "react": "16.8.0 - 18", + "react-dom": "16.8.0 - 18" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 2538b2a..a03baa0 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "@material-ui/core": "^4.12.4", "@mui/icons-material": "^5.5.1", "@mui/material": "^5.10.14", + "allotment": "^1.20.2", "axios": "^1.6.5", "babel-plugin-dynamic-import-node": "^2.3.3", "classnames": "^2.3.1", diff --git a/src/components/editCqlLibrary/EditCQLLibrary.scss b/src/components/editCqlLibrary/EditCQLLibrary.scss index 1a47fc7..0a173cb 100644 --- a/src/components/editCqlLibrary/EditCQLLibrary.scss +++ b/src/components/editCqlLibrary/EditCQLLibrary.scss @@ -23,43 +23,6 @@ display: flex; flex-grow: 1; - #left-panel { - width: 75%; - overflow: hidden; - } - - #right-panel { - width: 25%; - - > .inner-right { - padding: 43px 32px; - } - - input { - &.Mui-disabled { - background-color: #ededed; - border: #ededed; - } - } - - textarea { - resize: vertical; - border: none; - &.Mui-disabled { - background-color: #ededed; - border: #ededed; - } - } - - label:not(.Mui-disabled) { - font-weight: 500; - font-size: 14px; - line-height: 17px; - color: #333; - text-transform: none; - } - } - #divider { width: 22px; height: initial; @@ -85,11 +48,115 @@ align-items: center; justify-content: flex-end; } -} -.form-row { - display: flex; - flex-direction: row; - flex-grow: 1; - margin-bottom: 40px; + .form-row { + display: flex; + flex-direction: row; + flex-grow: 1; + margin-bottom: 40px; + } + + .allotment-wrapper { + margin: 0 32px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + + .inner-right { + margin-left: 30px; + } + + .split-view { + position: relative; + height: 700px; + + .left-panel { + width: 75%; + overflow: hidden; + + > .panel-content { + padding-top: 32px; + padding-left: 32px; + padding-right: 20px; + height: calc(100% - 48px); + } + } + + .right-panel { + width: 25%; + margin-left: 12px; + + > .panel-content { + padding-left: 16px; + padding-right: 16px; + height: calc(100% - 48px); + } + + > .tab-container { + > .MuiButtonBase-root { + margin-right: 8px; + + > .back-icon { + color: #0073c8; + } + } + + > .spacer { + display: flex; + flex-grow: 1; + } + + > .MuiTabs-root { + > .MuiTabs-scroller { + overflow-x: auto !important; + } + } + } + } + + .left-panel, + .right-panel { + height: 100%; + background: #fff; + + > .tab-container { + background-color: #ededed; + display: flex; + flex-direction: row; + align-items: center; + + > .MuiTabs-root { + background-color: #ededed; + margin-left: 16px; + } + } + + > .panel-content { + overflow: scroll; + } + } + + .sash { + width: 16px; + background-color: #ddd; + + &:before { + position: absolute; + content: ""; + top: 50%; + width: 4px; + height: 34px; + border: solid 1.5px #717171; + border-color: transparent #717171 transparent #717171; + } + + &:after { + position: absolute; + content: ""; + top: 0; + height: 48px; + width: 100%; + background-color: #ededed; + } + } + } + } } diff --git a/src/components/editCqlLibrary/EditCqlLibrary.test.tsx b/src/components/editCqlLibrary/EditCqlLibrary.test.tsx index bac5935..7aa9246 100644 --- a/src/components/editCqlLibrary/EditCqlLibrary.test.tsx +++ b/src/components/editCqlLibrary/EditCqlLibrary.test.tsx @@ -148,6 +148,11 @@ describe("Edit Cql Library Component", () => { beforeEach(() => { mockedAxios.get.mockClear(); mockedAxios.get.mockResolvedValue({ data: { ...cqlLibrary } }); + global.ResizeObserver = class { + observe() {} + unobserve() {} + disconnect() {} + }; }); it("should render form and cql library editor", () => { diff --git a/src/components/editCqlLibrary/EditCqlLibrary.tsx b/src/components/editCqlLibrary/EditCqlLibrary.tsx index cd433c9..b2c1fa6 100644 --- a/src/components/editCqlLibrary/EditCqlLibrary.tsx +++ b/src/components/editCqlLibrary/EditCqlLibrary.tsx @@ -6,6 +6,8 @@ import { useFormik } from "formik"; import { CqlLibrary, Model } from "@madie/madie-models"; import { CqlLibrarySchemaValidator } from "../../validators/CqlLibrarySchemaValidator"; import queryString from "query-string"; +import { Allotment } from "allotment"; +import "allotment/dist/style.css"; import useCqlLibraryServiceApi from "../../api/useCqlLibraryServiceApi"; import { cqlLibraryStore, @@ -356,203 +358,199 @@ const EditCqlLibrary = () => { success={success} outboundAnnotations={outboundAnnotations} /> -
-
-
- {!activeSpinner && ( - <> -
- - - -
- - - )} - {activeSpinner && ( -
+ + +
+ - -
- )} -
-
-
-
- -
- - + + +
+ + +
+ +
- * - - Indicates required field - -
-
- {activeTab === "details" && ( -
- {/* These are loaded in first instance and then removed why ? */} - {!formik.values.draft && ( -
- - CQL Library is not a draft. Only drafts can be edited. -

- } - canClose={false} - /> -
- )} - {!canEdit && ( -
- - You are not the owner of the CQL Library. Only owner - can edit it. -

- } - canClose={false} - /> -
- )} - -
- + -
+ > + * + + Indicates required field + +
+
+ {activeTab === "details" && ( +
+ {/* These are loaded in first instance and then removed why ? */} + {!formik.values.draft && ( +
+ + CQL Library is not a draft. Only drafts can be + edited. +

+ } + canClose={false} + /> +
+ )} + {!canEdit && ( +
+ + You are not the owner of the CQL Library. Only + owner can edit it. +

+ } + canClose={false} + /> +
+ )} -
-