fix: middle-truncate editable text field

techmatters · Nov 30, 2023 · b045686 · b045686
1 parent df6637a
commit b045686
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/common/components/EditableText.js b/src/common/components/EditableText.js
@@ -27,6 +27,8 @@ import {
   Typography,
 } from '@mui/material';
 
+import MiddleEllipsis from 'common/components/MiddleEllipsis';
+
 const EditableText = props => {
   const { t } = useTranslation();
   const {
@@ -36,6 +38,7 @@ const EditableText = props => {
     processing,
     addMessage,
     viewProps,
+    truncateLongNames,
     onSave,
     isEditing,
     setIsEditing,
@@ -133,6 +136,14 @@ const EditableText = props => {
     );
   }
 
+  const textValue = truncateLongNames ? (
+    <MiddleEllipsis>
+      <Typography component="span">{value}</Typography>
+    </MiddleEllipsis>
+  ) : (
+    value
+  );
+
   return (
     <Typography
       component={Stack}
@@ -154,7 +165,7 @@ const EditableText = props => {
         ...(viewProps?.sx || {}),
       }}
     >
-      {value || <Link href="#">+ {addMessage}</Link>}
+      {textValue || <Link href="#">+ {addMessage}</Link>}
       {isHovering && <EditIcon sx={{ color: 'blue.dark' }} />}
     </Typography>
   );

diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js
@@ -157,11 +157,15 @@ const SharedDataEntryBase = props => {
               id={`name-${dataEntry.id}`}
               label={t('sharedData.name_update')}
               value={dataEntry.name}
+              truncateLongNames={true}
               onSave={onUpdateName}
               processing={processing}
               isEditing={isEditingName}
               setIsEditing={setIsEditingName}
-              viewProps={{ color: 'black', sx: { flexGrow: 1 } }}
+              viewProps={{
+                color: 'black',
+                sx: { flexGrow: 1, overflow: 'hidden' },
+              }}
             />
           </Restricted>
         </Grid>