Show top level dir (#4165)

* Reload FileTree and File when changed externally

* Added tests

* Show project root in files pane

* Cut off titles that are too long

* Fix tests

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react'
 import styles from './ModelingPane.module.css'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { ActionButton } from 'components/ActionButton'
@@ -6,22 +7,24 @@ import { CustomIconName } from 'components/CustomIcon'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { ActionIcon } from 'components/ActionIcon'
 
-export interface ModelingPaneProps
-  extends React.PropsWithChildren,
-    React.HTMLAttributes<HTMLDivElement> {
+export interface ModelingPaneProps {
+  id: string
+  children: ReactNode | ReactNode[]
+  className?: string
   icon?: CustomIconName | IconDefinition
-  title: string
+  title: ReactNode
   Menu?: React.ReactNode | React.FC
   detailsTestId?: string
   onClose: () => void
 }
 
 export const ModelingPaneHeader = ({
+  id,
   icon,
   title,
   Menu,
   onClose,
-}: Pick<ModelingPaneProps, 'icon' | 'title' | 'Menu' | 'onClose'>) => {
+}: Pick<ModelingPaneProps, 'id' | 'icon' | 'title' | 'Menu' | 'onClose'>) => {
   return (
     <div className={styles.header}>
       <div className="flex gap-2 items-center flex-1">
@@ -34,7 +37,7 @@ export const ModelingPaneHeader = ({
             bgClassName="!bg-transparent"
           />
         )}
-        <span>{title}</span>
+        <span data-testid={id + '-header'}>{title}</span>
       </div>
       {Menu instanceof Function ? <Menu /> : Menu}
       <ActionButton
@@ -86,6 +89,7 @@ export const ModelingPane = ({
       }
     >
       <ModelingPaneHeader
+        id={id}
         icon={icon}
         title={title}
         Menu={Menu}