Security hardening: authentication, input validation, OWASP compliance, architecture improvements, and CSP fixes for browser mode (#942)

app/src/components/Layout/ContentView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import ChartPanel from '../ChartPanel'
-import ReactSplitPane from 'react-split-pane'
+import ReactSplitPaneImport from 'react-split-pane'
 import Tree from '../Tree'
 import { AppState } from '../../reducers'
 import { ChartParameters } from '../../reducers/Charts'
@@ -9,6 +9,9 @@ import { List } from 'immutable'
 import { Sidebar } from '../Sidebar'
 import { useResizeDetector } from 'react-resize-detector'
 
+// Type cast to any to work around React 18 compatibility issues with react-split-pane 0.1.x
+const ReactSplitPane = ReactSplitPaneImport as any
+
 interface Props {
   heightProperty: any
   paneDefaults: any
@@ -75,7 +78,7 @@ function ContentView(props: Props) {
           split="vertical"
           minSize={0}
           size={sidebarWidth}
-          onChange={setSidebarWidth}
+          onChange={(size: number) => setSidebarWidth(size)}
           onDragFinished={closeSidebarCompletelyIfItSitsOnTheEdge}
           allowResize={true}
           style={{ height: '100%' }}
@@ -92,7 +95,7 @@ function ContentView(props: Props) {
               style={{ height: 'calc(100vh - 64px)' }}
               pane1Style={{ maxHeight: '100%' }}
               pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
-              onChange={setHeight}
+              onChange={(size: number) => setHeight(size)}
               onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
             >
               <Tree />