bugfix 331 - edit pen icon on long description

MTES-MCT · Sep 9, 2024 · 811eb73 · 811eb73
1 parent 5149eb0
commit 811eb73
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/.../src/features/pam/mission/components/elements/timeline/item/timeline-item-status.test.tsx b/.../src/features/pam/mission/components/elements/timeline/item/timeline-item-status.test.tsx
@@ -80,4 +80,21 @@ describe('ActionStatus', () => {
     render(<ActionStatus {...props(mock, previousActionMock)} />)
     expect(screen.queryByText('Indisponibilité - Technique - fin')).toBeInTheDocument()
   })
+  test('should truncate observations longer than 35 characters and add ellipsis', () => {
+    const longObservation = 'This is a very long observation that exceeds thirty-five characters.'
+
+    const mock = { ...actionMock, data: { ...actionMock.data, observations: longObservation } }
+    render(<ActionStatus {...props(mock, previousActionMock)} />)
+
+    const expectedTruncatedText = longObservation.slice(0, 35) + '...'
+    expect(screen.getByText(new RegExp(expectedTruncatedText))).toBeInTheDocument()
+  })
+  it('should display observations as is if shorter than 35 characters', () => {
+    const shortObservation = 'This is short.'
+
+    const mock = { ...actionMock, data: { ...actionMock.data, observations: shortObservation } }
+    render(<ActionStatus {...props(mock, previousActionMock)} />)
+
+    expect(screen.getByText('- ' + shortObservation)).toBeInTheDocument()
+  })
 })
diff --git a/frontend/src/features/pam/mission/components/elements/timeline/item/timeline-item-status.tsx b/frontend/src/features/pam/mission/components/elements/timeline/item/timeline-item-status.tsx
@@ -15,7 +15,7 @@ const ActionStatus: FC<MissionTimelineItemProps> = ({ action, previousActionWith
   const prevActionData = previousActionWithSameType?.data as unknown as NavActionStatus
   return (
     <TimelineItemWrapper onClick={onClick} borderWhenSelected={false}>
-      <Stack direction={'column'} spacing={'0.2rem'} style={{ padding: '0.2rem 0' }}>
+      <Stack direction={'column'} spacing={'0.2rem'} style={{ padding: '0.2rem 0'}}>
         <Stack.Item alignSelf={'flex-start'}>
           <Stack alignItems="center" spacing="0.5rem" style={{ width: '100%' }}>
             <Stack.Item>
@@ -27,16 +27,15 @@ const ActionStatus: FC<MissionTimelineItemProps> = ({ action, previousActionWith
                 weight="normal"
                 color={isSelected ? THEME.color.charcoal : THEME.color.slateGray}
                 decoration={isSelected ? 'underline' : 'normal'}
-                style={{
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis'
-                }}
               >
                 <b>{`${mapStatusToText(actionData?.status)} - début${
                   !!actionData?.reason ? ' - ' + statusReasonToHumanString(actionData?.reason) : ''
                 }`}</b>
-                {!!actionData?.observations ? ' - ' + actionData?.observations : ''}
+                {!!actionData?.observations
+                  ? ' - ' + (actionData?.observations.length > 35
+                  ? actionData?.observations.slice(0, 35) + '...'
+                  : actionData?.observations)
+                  : ''}
               </Text>
             </Stack.Item>
             <Stack.Item>