[Security Solution][Timeline] Fix User not able to scroll down and ac…

…cess 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
elastic · Jun 16, 2021 · fbbbcf8 · fbbbcf8
1 parent b969142
commit fbbbcf8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 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
@@ -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
@@ -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/...ity_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx b/...ity_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,
   },