[2287] Use a plain label to display Expressions in the Details view

Bug: #2287
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>

Author: pcdavid

CHANGELOG.adoc

@@ -44,6 +44,7 @@ Now, the choice is restricted to the _timeslice/snapshot_ type that match the gr
 - https://github.com/eclipse-syson/syson/issues/2270[#2270] [diagram] Add dedicated tools to diagram elements palette to create/edit/delete expressions.
 - https://github.com/eclipse-syson/syson/issues/2269[#2269] [diagram] When using direct edit on feature elements which have a value expression (e.g. an `Attribute` with a default value defined), the expression part (after the `=` sign) is no longer part of the initial direct edit value, and will be ignored if supplied in the new text value.
 Users should use the dedicated tools to edit expressions instead, as they ensure only valid expressions (with all names resolving) are accepted.
+- https://github.com/eclipse-syson/syson/issues/2287[#2287] [details] Use a label instead of a text field to display Expressions in the Details view
 
 === New features
 

doc/content/modules/user-manual/assets/images/expression-details.png

@@ -20,11 +20,10 @@ import {
   PropertySectionLabel,
   TextfieldStyleProps,
 } from '@eclipse-sirius/sirius-components-forms';
+import Typography from '@mui/material/Typography';
 
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -141,46 +140,14 @@ export const ExpressionPropertySection: PropertySectionComponent<GQLTextfield |
       <div className={classes.propertySectionLabel}>
         <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widgetForLabel} />
       </div>
-      <TextField
-        name={labelOverride}
-        placeholder={labelOverride}
-        variant="standard"
-        value={widget.stringValue}
-        spellCheck={false}
-        margin="dense"
-        multiline={true}
-        maxRows={4}
-        fullWidth
-        data-testid={labelOverride}
-        disabled={true}
-        error={widget.diagnostics.length > 0}
-        helperText={widget.diagnostics[0]?.message}
-        className={classes.textfield}
-        InputProps={
-          widget.style
-            ? {
-                className: classes.style,
-              }
-            : {}
-        }
-        inputProps={{
-          'data-testid': `input-${labelOverride}`,
-          className: classes.input,
-        }}
-        slotProps={{
-          input: {
-            endAdornment: (
-              <InputAdornment position="end">
-                <Tooltip title={'Edit'}>
-                  <IconButton size="small" onClick={onEditExpression}>
-                    <MoreHorizIcon />
-                  </IconButton>
-                </Tooltip>
-              </InputAdornment>
-            ),
-          },
-        }}
-      />
+      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+        <Typography>{widget.stringValue}</Typography>
+        <Tooltip title={'Edit'}>
+          <IconButton size="small" onClick={onEditExpression}>
+            <MoreHorizIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
       {modalElement}
     </div>
   );