From 9def4c3f53c57681e5aeca704256aafa4daa8f08 Mon Sep 17 00:00:00 2001
From: Florian Barbin <florian.barbin@obeo.fr>
Date: Thu, 29 Aug 2024 11:22:11 +0200
Subject: [PATCH] [3763] Add a default size on the Selection Dialog TreeView

Bug: https://github.com/eclipse-sirius/sirius-web/issues/3763
Signed-off-by: Florian Barbin <florian.barbin@obeo.fr>
---
 .../src/SelectionDialog.tsx                   | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx b/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx
index bfcb413f3d..b0f1fe8158 100644
--- 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 (