MAT-7023: Partial editor routes. broken height

package.json

@@ -82,6 +82,8 @@
     "react": "^17.0.2",
     "react-ace": "^10.0.0",
     "react-dom": "^17.0.2",
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "single-spa": "^5.9.3",

src/cqlEditorWithTerminology/CqlEditorWithTerminology.tsx

@@ -1,11 +1,13 @@
-import React from "react";
-import MadieAceEditor, { EditorPropsType } from "../AceEditor/madie-ace-editor";
+import React, { FC } from "react";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
 import "./CqlEditorWithTerminology.scss";
 import CqlBuilderPanel from "../CqlBuilderPanel/CqlBuilderPanel";
+import { useLocation } from "react-router-dom"
+import MadieAceEditor, { EditorPropsType } from "../AceEditor/madie-ace-editor";
 
-const CqlEditorWithTerminology = ({
+const CqlEditorWithTerminology: FC<EditorPropsType> = ({
   value,
   onChange,
   handleCodeDelete,
@@ -24,7 +26,10 @@
   setEditorVal,
   setIsCQLUnchanged,
   isCQLUnchanged,
-}: EditorPropsType) => {
+}) => {
+  const { pathname } = useLocation();
+  console.log('pathname is', pathname);
+
   return (
     <div className="allotment-wrapper" id="cql-editor-with-terminology">
       <Allotment defaultSizes={[175, 125]} vertical={false}>
@@ -65,4 +70,22 @@
   );
 };
 
-export default CqlEditorWithTerminology;
+const CqlEditorWithTerminologyWrapper: FC = (props) => {
+  //@ts-ignore
+  return <CqlEditorWithTerminology {...props} />;
+};
+
+export const routesConfig = [
+  {
+    path: "/*",
+    element: <CqlEditorWithTerminologyWrapper />,
+  },
+];
+
+const router = createBrowserRouter(routesConfig);
+
+const EditorBrowserRouter: FC<EditorPropsType> = (props) => {
+  return <RouterProvider router={router} />;
+}
+
+export default EditorBrowserRouter;

src/cqlEditorWithTerminology/EditorRoutes.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import CqlEditorWithTerminology from "./CqlEditorWithTerminology";
+// import EditMeasure from "../editMeasure/EditMeasure";
+// import MeasureLanding from "../measureLanding/MeasureLanding";
+// import NotFound from "../notfound/NotFound";
+
+
+
+export const routesConfig = [
+    {
+      children: [
+        { path: "/", element:(props) => <CqlEditorWithTerminology {...props}/> },
+        { path: "/valueSets", element:(props) => <CqlEditorWithTerminology {...props}/> },
+        { path: "/codes*", element:(props) => <CqlEditorWithTerminology {...props}/> }
+      ],
+    },
+  ];
+
+  const router = createBrowserRouter(routesConfig);
+
+  const EditorBrowserRouter = () => {
+    <RouterProvider router={router} />
+  }
+
+  export default EditorBrowserRouter;