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

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
 

frontend/syson-components/src/extensions/expressions/ExpressionPropertySection.tsx

@@ -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 data-testid={`details-expression-value`}>{widget.stringValue}</Typography>
+        <Tooltip title={'Edit'}>
+          <IconButton size="small" onClick={onEditExpression}>
+            <MoreHorizIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
       {modalElement}
     </div>
   );

integration-tests-cypress/cypress/e2e/project/details/details.cy.ts

@@ -92,8 +92,8 @@ describe('Details View Tests', () => {
         explorer.select('vehicle.actualSpeed <= maxSpeed');
       });
       it("Then the Details view shows the expression's textual value", () => {
-        details.getTextField('Expression value').should('exist');
-        details.getTextField('Expression value').should('have.value', 'vehicle.actualSpeed <= maxSpeed');
+        cy.getByTestId('details-expression-value').should('exist');
+        cy.getByTestId('details-expression-value').should('have.text', 'vehicle.actualSpeed <= maxSpeed');
       });
     });
 
@@ -106,8 +106,8 @@ describe('Details View Tests', () => {
         explorer.select('length');
       });
       it("Then the Details view shows the child expression's textual value", () => {
-        details.getTextField('Expression value').should('exist');
-        details.getTextField('Expression value').should('have.value', '80 [SI::centimetre]');
+        cy.getByTestId('details-expression-value').should('exist');
+        cy.getByTestId('details-expression-value').should('have.text', '80 [SI::centimetre]');
       });
     });
   });