[3763] Add a default size on the Selection Dialog TreeView

Bug: #3763 Signed-off-by: Florian Barbin <[email protected]>
eclipse-sirius · Sep 6, 2024 · 665d5ad · 665d5ad
1 parent a655d7b
commit 665d5ad
Showing 1 changed file with 26 additions and 13 deletions.
diff --git a/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx b/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx
@@ -22,11 +22,21 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
 import { useEffect, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
 import { DiagramDialogComponentState } from './SelectionDialog.types';
 import { useSelectionDescription } from './useSelectionDescription';
 
 export const SELECTION_DIALOG_TYPE: string = 'selectionDialogDescription';
 
+const useTreeStyle = makeStyles()((theme) => ({
+  borderStyle: {
+    border: '1px solid',
+    borderColor: theme.palette.grey[500],
+    height: 300,
+    overflow: 'auto',
+  },
+}));
+
 export const SelectionDialog = ({
   editingContextId,
   dialogDescriptionId,
@@ -39,6 +49,7 @@ export const SelectionDialog = ({
     message: '',
     selectedObjects: [],
   };
+  const { classes } = useTreeStyle();
   const [state, setState] = useState<DiagramDialogComponentState>(initialState);
 
   const { loading, selectionDescription } = useSelectionDescription({
@@ -64,19 +75,21 @@ export const SelectionDialog = ({
 
   if (state.treeDescriptionId) {
     content = (
-      <TreeView
-        editingContextId={editingContextId}
-        readOnly={true}
-        treeId={`selection://?treeDescriptionId=${encodeURIComponent(
-          state.treeDescriptionId
-        )}&targetObjectId=${encodeURIComponent(targetObjectId)}`}
-        enableMultiSelection={false}
-        synchronizedWithSelection={true}
-        activeFilterIds={[]}
-        textToFilter={''}
-        textToHighlight={''}
-        treeItemActionRender={(props) => <SelectionDialogTreeItemAction {...props} />}
-      />
+      <div className={classes.borderStyle}>
+        <TreeView
+          editingContextId={editingContextId}
+          readOnly={true}
+          treeId={`selection://?treeDescriptionId=${encodeURIComponent(
+            state.treeDescriptionId
+          )}&targetObjectId=${encodeURIComponent(targetObjectId)}`}
+          enableMultiSelection={false}
+          synchronizedWithSelection={true}
+          activeFilterIds={[]}
+          textToFilter={''}
+          textToHighlight={''}
+          treeItemActionRender={(props) => <SelectionDialogTreeItemAction {...props} />}
+        />
+      </div>
     );
   }
   return (