From fbbbcf8b9b856c6f7e602973552a4a0c98938372 Mon Sep 17 00:00:00 2001
From: Pablo Machado <pablo.nevesmachado@elastic.co>
Date: Wed, 16 Jun 2021 10:00:05 +0200
Subject: [PATCH] [Security Solution][Timeline] Fix User not able to scroll
 down and access Alert table on adding long content in Timeline's Description
 (#101486)

* Add LineClamp component to timeline description

* Truncate timeline description on timeline table

* Fix StyledLineClamp styled component performance issue

Read more: https://styled-components.com/docs/faqs#why-should-i-avoid-declaring-styled-components-in-the-render-method
---
 .../common/components/line_clamp/index.tsx    | 29 ++++++++++++-------
 .../components/flyout/header/index.tsx        | 11 +++----
 .../timelines_table/common_columns.tsx        | 14 +++++++--
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/line_clamp/index.tsx b/x-pack/plugins/security_solution/public/common/components/line_clamp/index.tsx
index 896b0ec5fd8df8..d8895490d1e0ff 100644
--- a/x-pack/plugins/security_solution/public/common/components/line_clamp/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/line_clamp/index.tsx
@@ -13,15 +13,6 @@ import * as i18n from './translations';
 const LINE_CLAMP = 3;
 const LINE_CLAMP_HEIGHT = 5.5;
 
-const StyledLineClamp = styled.div`
-  display: -webkit-box;
-  -webkit-line-clamp: ${LINE_CLAMP};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  max-height: ${`${LINE_CLAMP_HEIGHT}em`};
-  height: ${`${LINE_CLAMP_HEIGHT}em`};
-`;
-
 const ReadMore = styled(EuiButtonEmpty)`
   span.euiButtonContent {
     padding: 0;
@@ -35,7 +26,19 @@ const ExpandedContent = styled.div`
   overflow-y: auto;
 `;
 
-const LineClampComponent: React.FC<{ content?: string | null }> = ({ content }) => {
+const StyledLineClamp = styled.div<{ lineClampHeight: number }>`
+  display: -webkit-box;
+  -webkit-line-clamp: ${LINE_CLAMP};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-height: ${({ lineClampHeight }) => lineClampHeight}em;
+  height: ${({ lineClampHeight }) => lineClampHeight}em;
+`;
+
+const LineClampComponent: React.FC<{
+  content?: string | null;
+  lineClampHeight?: number;
+}> = ({ content, lineClampHeight = LINE_CLAMP_HEIGHT }) => {
   const [isOverflow, setIsOverflow] = useState<boolean | null>(null);
   const [isExpanded, setIsExpanded] = useState<boolean | null>(null);
   const descriptionRef = useRef<HTMLDivElement>(null);
@@ -71,7 +74,11 @@ const LineClampComponent: React.FC<{ content?: string | null }> = ({ content })
           <p>{content}</p>
         </ExpandedContent>
       ) : isOverflow == null || isOverflow === true ? (
-        <StyledLineClamp data-test-subj="styled-line-clamp" ref={descriptionRef}>
+        <StyledLineClamp
+          data-test-subj="styled-line-clamp"
+          ref={descriptionRef}
+          lineClampHeight={lineClampHeight}
+        >
           {content}
         </StyledLineClamp>
       ) : (
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx
index da45579b347739..dd8cdb818cad75 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx
@@ -52,6 +52,7 @@ import * as i18n from './translations';
 import * as commonI18n from '../../timeline/properties/translations';
 import { getTimelineStatusByIdSelector } from './selectors';
 import { TimelineKPIs } from './kpis';
+import { LineClamp } from '../../../../common/components/line_clamp';
 
 // to hide side borders
 const StyledPanel = styled(EuiPanel)`
@@ -206,13 +207,13 @@ const TimelineDescriptionComponent: React.FC<FlyoutHeaderProps> = ({ timelineId
     (state) => (getTimeline(state, timelineId) ?? timelineDefaults).description
   );
 
-  const content = useMemo(() => (description.length ? description : commonI18n.DESCRIPTION), [
-    description,
-  ]);
-
   return (
     <EuiText size="s" data-test-subj="timeline-description">
-      {content}
+      {description.length ? (
+        <LineClamp key={description.length} content={description} lineClampHeight={4.5} />
+      ) : (
+        commonI18n.DESCRIPTION
+      )}
     </EuiText>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
index 98d678a25b4c68..65963c96093209 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
@@ -10,7 +10,7 @@
 import { EuiButtonIcon, EuiLink } from '@elastic/eui';
 import { omit } from 'lodash/fp';
 import React from 'react';
-
+import styled from 'styled-components';
 import { ACTION_COLUMN_WIDTH } from './common_styles';
 import { isUntitled } from '../helpers';
 import { NotePreviews } from '../note_previews';
@@ -20,6 +20,14 @@ import { getEmptyTagValue } from '../../../../common/components/empty_value';
 import { FormattedRelativePreferenceDate } from '../../../../common/components/formatted_date';
 import { TimelineType } from '../../../../../common/types/timeline';
 
+const DescriptionCell = styled.span`
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
 /**
  * Returns the column definitions (passed as the `columns` prop to
  * `EuiBasicTable`) that are common to the compact `Open Timeline` modal view,
@@ -85,9 +93,9 @@ export const getCommonColumns = ({
     field: 'description',
     name: i18n.DESCRIPTION,
     render: (description: string) => (
-      <span data-test-subj="description">
+      <DescriptionCell data-test-subj="description">
         {description != null && description.trim().length > 0 ? description : getEmptyTagValue()}
-      </span>
+      </DescriptionCell>
     ),
     sortable: false,
   },