From 900966b18d54a8ad8522942bc345150079919dfc Mon Sep 17 00:00:00 2001 From: Ethan Kaplan Date: Tue, 22 Oct 2024 14:51:03 -0700 Subject: [PATCH 1/8] MAT-7722 add allotment panes --- package-lock.json | 53 ++- package.json | 1 + .../editCqlLibrary/EditCQLLibrary.scss | 147 ++++--- .../editCqlLibrary/EditCqlLibrary.tsx | 359 +++++++++--------- 4 files changed, 331 insertions(+), 229 deletions(-) diff --git a/package-lock.json b/package-lock.json index 28aa610..43c86fe 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", @@ -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", @@ -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..342e852 100644 --- a/src/components/editCqlLibrary/EditCQLLibrary.scss +++ b/src/components/editCqlLibrary/EditCQLLibrary.scss @@ -10,56 +10,10 @@ border-color: #ededed; background-color: white; - #header-editor-row { - display: flex; - flex-direction: row; - flex-grow: 1; - height: 48px; - justify-content: flex-end; - background: #ededed; - } - .flow-container { 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; @@ -93,3 +47,102 @@ flex-grow: 1; margin-bottom: 40px; } + +.allotment-wrapper { + margin: 0 32px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + + .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.tsx b/src/components/editCqlLibrary/EditCqlLibrary.tsx index cd433c9..8a323c7 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,23 +358,21 @@ const EditCqlLibrary = () => { success={success} outboundAnnotations={outboundAnnotations} /> -
-
-
- {!activeSpinner && ( - <> -
- - - -
+ {/*
*/} +
+ + +
+ + + { inboundAnnotations={elmAnnotations} setOutboundAnnotations={setOutboundAnnotations} /> - - )} - {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} + /> +
+ )} -
-