Added UI components for managing edit sessions.

Leibniz-HBI · Aug 9, 2024 · 64b79c7 · 64b79c7
1 parent f654a15
commit 64b79c7
Show file tree

Hide file tree

Showing 35 changed files with 3,321 additions and 357 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -30,13 +30,6 @@ html {
     justify-content: center;
 }
 
-.vran-page-body {
-    display: block;
-    height: 100%;
-    flex: 1;
-    padding: 0px 12px 12px 12px;
-}
-
 .min-h-0 {
     min-height: 0px;
 }
@@ -46,6 +39,10 @@ html {
 .vh-85{
     height: 85vh;
 }
+
+.vh-65 {
+    height: 65vh;
+}
 .min-h-200px {
     min-height: 200px !important;
 }
@@ -91,10 +88,15 @@ html {
     border-radius: 12px;
 }
 
-.scroll-gutter {
+.scroll-gutter-both {
     scrollbar-gutter: stable both-edges;
 }
 
+.scroll-gutter {
+    scrollbar-gutter: stable;
+}
+
+
 .modal,
 .modal-backdrop {
     position: absolute !important;
@@ -184,6 +186,10 @@ svg {
     vertical-align: text-bottom !important;
 }
 
+.d-contents {
+    display: contents !important;
+}
+
 .form-label {
     width: 100%;
     padding-left: 0px !important;
@@ -248,3 +254,34 @@ div#layers > div > .container {
 .z-toast {
     z-index: 5000;
 }
+
+
+.d-grid {
+    display: grid;
+}
+
+.grid-r-1fr-1fr-c-1fr-1fr {
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+}
+
+.grid-row-1 {
+    grid-row: 1;
+}
+
+.grid-row-2 {
+    grid-row: 2;
+}
+
+.grid-col-1 {
+    grid-column: 1;
+}
+
+.grid-col-2 {
+    grid-column: 2;
+}
+
+.grid-row-1-3 {
+    grid-row: 1 / 3;
+}
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -39,7 +39,7 @@ export function VranRoot() {
     const dispatch: AppDispatch = useDispatch()
     return (
         <>
-            <Row className="flex-grow-1 m-0 h-100">
+            <Row className="m-0 h-100">
                 <Col className="ps-0 pe-0 h-100">
                     <div className="vran-page-container">
                         <Navbar expand="lg" className="bg-primary flex-shrink-0 mb-3">
@@ -86,7 +86,7 @@ export function VranRoot() {
                                 </Navbar.Collapse>
                             </Container>
                         </Navbar>
-                        <div className="vran-page-body flex-grow-1 flex-basis-0 flex-fill">
+                        <div className="d-contents">
                             <Outlet />
                         </div>
                     </div>

diff --git a/ui/src/column_menu/__tests__/get_hierarchy_integration.test.tsx b/ui/src/column_menu/__tests__/get_hierarchy_integration.test.tsx
@@ -191,7 +191,7 @@ describe('get hierarchy', () => {
         initialResponseSequence(fetchMock)
         renderWithProviders(
             <ColumnMenu
-                columnIndices={new Map()}
+                columnIndices={{}}
                 loadColumnDataCallback={jest.fn()}
                 hideColumnDataCallback={jest.fn()}
             />,
@@ -210,7 +210,7 @@ describe('get hierarchy', () => {
                 withLabel2[2]?.parentElement?.parentElement?.children[0]?.children[1]
 
             expect(expandIcon?.children[0]?.children[0]?.getAttribute('d')).toEqual(
-                'M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'
+                'M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'
             )
         })
         ;(expandIcon as HTMLElement | undefined)?.click()
@@ -225,7 +225,7 @@ describe('get hierarchy', () => {
                 withLabel2[2]?.parentElement?.parentElement?.children[0]?.children[1]
 
             expect(collapseIcon?.children[0]?.children[0]?.getAttribute('d')).toEqual(
-                'M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z'
+                'M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'
             )
         })
         ;(collapseIcon as HTMLElement | undefined)?.click()
@@ -245,7 +245,7 @@ describe('get hierarchy', () => {
         addResponseSequence(fetchMock, [[500, { msg: errorMsg }]])
         const { store } = renderWithProviders(
             <ColumnMenu
-                columnIndices={new Map()}
+                columnIndices={{}}
                 loadColumnDataCallback={jest.fn()}
                 hideColumnDataCallback={jest.fn()}
             />,
@@ -298,7 +298,7 @@ describe('create tag definition', () => {
         initialResponseSequence(fetchMock)
         renderWithProviders(
             <ColumnMenu
-                columnIndices={new Map()}
+                columnIndices={{}}
                 loadColumnDataCallback={jest.fn()}
                 hideColumnDataCallback={jest.fn()}
             />,
@@ -333,7 +333,7 @@ describe('create tag definition', () => {
         initialResponseSequence(fetchMock)
         renderWithProviders(
             <ColumnMenu
-                columnIndices={new Map()}
+                columnIndices={{}}
                 loadColumnDataCallback={jest.fn()}
                 hideColumnDataCallback={jest.fn()}
             />,
@@ -378,7 +378,7 @@ describe('create tag definition', () => {
         addResponseSequence(fetchMock, [[500, { msg: errorMsg }]])
         const { store } = renderWithProviders(
             <ColumnMenu
-                columnIndices={new Map()}
+                columnIndices={{}}
                 loadColumnDataCallback={jest.fn()}
                 hideColumnDataCallback={jest.fn()}
             />,
@@ -401,7 +401,7 @@ test('open edit menu', async () => {
     initialResponseSequence(fetchMock)
     const { store } = renderWithProviders(
         <ColumnMenu
-            columnIndices={new Map()}
+            columnIndices={{}}
             loadColumnDataCallback={jest.fn()}
             hideColumnDataCallback={jest.fn()}
         />,
@@ -417,7 +417,7 @@ test('open edit menu', async () => {
             'M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'
         )
         expect(svg?.children[1].getAttribute('d')).toEqual(
-            'M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z'
+            'M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'
         )
         if (svg !== undefined) {
             user.click(svg)