Merge pull request #332 from MTES-MCT/331-stylo-edit-disparait-lorsqu…

…e-phrase-trop-longue bugfix(331) - Stylo edit should appear even when observation is a long text
MTES-MCT · Sep 16, 2024 · 5765590 · 5765590
2 parents 1a4295e + 7944063
commit 5765590
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 36 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,26 @@ describe('ActionStatus', () => {
     render(<ActionStatus {...props(mock, previousActionMock)} />)
     expect(screen.queryByText('Indisponibilité - Technique - fin')).toBeInTheDocument()
   })
+  test('should apply ellipsis when observations exceed container width', () => {
+    const longObservation = 'This is a an observation';
+
+    const mock = { ...actionMock, data: { ...actionMock.data, observations: longObservation } };
+    render(<ActionStatus {...props(mock, previousActionMock)} />);
+    const textElement = screen.getByTestId('timeline-item-status-description')
+    const style = window.getComputedStyle(textElement);
+
+    expect(style.whiteSpace).toBe('nowrap');
+    expect(style.textOverflow).toBe('ellipsis');
+    expect(style.overflow).toBe('hidden');
+  });
+
+
+  it('should display observations as is a short description', () => {
+    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
@@ -1,6 +1,6 @@
-import { FC } from 'react'
+import React, { FC } from 'react'
 import { Icon, THEME } from '@mtes-mct/monitor-ui'
-import { Stack } from 'rsuite'
+import { FlexboxGrid, Stack } from 'rsuite'
 import { ActionStatus as NavActionStatus } from '../../../../../../common/types/action-types.ts'
 import { StatusColorTag } from '../../../ui/status-selection-dropdown.tsx'
 import { mapStatusToText, statusReasonToHumanString } from '../../../../utils/status-utils.ts'
@@ -15,43 +15,39 @@ 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.Item alignSelf={'flex-start'}>
-          <Stack alignItems="center" spacing="0.5rem" style={{ width: '100%' }}>
-            <Stack.Item>
-              <StatusColorTag status={actionData?.status} />
-            </Stack.Item>
-            <Stack.Item style={{ maxWidth: 'calc(100% - 3rem)' }}>
-              <Text
-                as="h3"
-                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 : ''}
-              </Text>
-            </Stack.Item>
-            <Stack.Item>
-              <Icon.EditUnbordered size={20} color={THEME.color.slateGray} />
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-        {!!prevActionData && (
-          <Stack.Item alignSelf={'flex-start'}>
-            <Text as={'h3'} color={THEME.color.slateGray} fontStyle={'italic'}>
-              {`${mapStatusToText(prevActionData?.status)} ${prevActionData?.reason ? `- ${statusReasonToHumanString(prevActionData?.reason)} ` : ''}- fin`}
+      <FlexboxGrid.Item style={{ width: '100%', padding: '0.2rem 0' }}>
+        <Stack direction="row" spacing="0.5rem">
+          <Stack.Item>
+            <StatusColorTag status={actionData?.status} />
+          </Stack.Item>
+          <Stack.Item alignSelf="flex-start" style={{ maxWidth: 'calc(100% - 3rem)' }}>
+            <Text
+              as="h3"
+              weight="medium"
+              color={isSelected ? THEME.color.charcoal : THEME.color.slateGray}
+              style={{
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+              }}
+              data-testid="timeline-item-status-description"
+            >
+              <b>{`${mapStatusToText(actionData?.status)} - début${
+                !!actionData?.reason ? ' - ' + statusReasonToHumanString(actionData?.reason) : ''
+              }`}</b>
+              {!!actionData?.observations ? ' - ' + actionData?.observations : ''}
             </Text>
           </Stack.Item>
+          <Stack.Item>
+            <Icon.EditUnbordered size={20} color={THEME.color.slateGray} />
+          </Stack.Item>
+        </Stack>
+        {!!prevActionData && (
+          <Text as={'h3'} color={THEME.color.slateGray} fontStyle={'italic'}>
+            {`${mapStatusToText(prevActionData?.status)} ${prevActionData?.reason ? `- ${statusReasonToHumanString(prevActionData?.reason)} ` : ''}- fin`}
+          </Text>
         )}
-      </Stack>
+      </FlexboxGrid.Item>
     </TimelineItemWrapper>
   )
 }