[Security Solution] expandable flyout - remove expand/collapse functionality on rule description (#162821)

x-pack/plugins/security_solution/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_right_panel_overview_tab.cy.ts

@@ -16,7 +16,6 @@ import {
   DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ABOUT_SECTION_HEADER,
   DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_ANALYZER_TREE,
   DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_DETAILS,
-  DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_EXPAND_BUTTON,
   DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_TITLE,
   DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_OPEN_RULE_PREVIEW_BUTTON,
   DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_HIGHLIGHTED_FIELDS_DETAILS,
@@ -107,14 +106,6 @@ describe(
         cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_DETAILS)
           .should('be.visible')
           .and('have.text', rule.description);
-        cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_EXPAND_BUTTON)
-          .should('be.visible')
-          .and('have.text', 'Expand');
-        cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_EXPAND_BUTTON).click();
-        cy.get(DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_EXPAND_BUTTON).should(
-          'have.text',
-          'Collapse'
-        );
 
         cy.log('reason');
 

x-pack/plugins/security_solution/cypress/screens/expandable_flyout/alert_details_right_panel_overview_tab.ts

@@ -11,7 +11,6 @@ import {
   ABOUT_SECTION_HEADER_TEST_ID,
   ANALYZER_TREE_TEST_ID,
   DESCRIPTION_DETAILS_TEST_ID,
-  DESCRIPTION_EXPAND_BUTTON_TEST_ID,
   DESCRIPTION_TITLE_TEST_ID,
   RULE_SUMMARY_BUTTON_TEST_ID,
   ENTITIES_CONTENT_TEST_ID,
@@ -60,8 +59,6 @@ export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_DETAILS = getDataT
 );
 export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_OPEN_RULE_PREVIEW_BUTTON =
   getDataTestSubjectSelector(RULE_SUMMARY_BUTTON_TEST_ID);
-export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_DESCRIPTION_EXPAND_BUTTON =
-  getDataTestSubjectSelector(DESCRIPTION_EXPAND_BUTTON_TEST_ID);
 export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_REASON_TITLE =
   getDataTestSubjectSelector(REASON_TITLE_TEST_ID);
 export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB_REASON_DETAILS =

x-pack/plugins/security_solution/public/flyout/right/components/description.stories.tsx

@@ -44,7 +44,7 @@ const wrapper = (children: React.ReactNode, panelContextValue: RightPanelContext
     </div>
   </RightPanelContext.Provider>
 );
-export const RuleExpand: Story<void> = () => {
+export const Rule: Story<void> = () => {
   const panelContextValue = {
     dataFormattedForFieldBrowser: [ruleUuid, ruleDescription],
   } as unknown as RightPanelContext;
@@ -52,14 +52,6 @@ export const RuleExpand: Story<void> = () => {
   return wrapper(<Description />, panelContextValue);
 };
 
-export const RuleCollapse: Story<void> = () => {
-  const panelContextValue = {
-    dataFormattedForFieldBrowser: [ruleUuid, ruleDescription],
-  } as unknown as RightPanelContext;
-
-  return wrapper(<Description expanded={true} />, panelContextValue);
-};
-
 export const Document: Story<void> = () => {
   const panelContextValue = {
     dataFormattedForFieldBrowser: [
@@ -90,11 +82,11 @@ export const EmptyDescription: Story<void> = () => {
     ],
   } as unknown as RightPanelContext;
 
-  return wrapper(<Description expanded={true} />, panelContextValue);
+  return wrapper(<Description />, panelContextValue);
 };
 
 export const Empty: Story<void> = () => {
   const panelContextValue = {} as unknown as RightPanelContext;
 
-  return wrapper(<Description expanded={true} />, panelContextValue);
+  return wrapper(<Description />, panelContextValue);
 };

x-pack/plugins/security_solution/public/flyout/right/components/description.test.tsx

@@ -7,17 +7,8 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import {
-  DESCRIPTION_EXPAND_BUTTON_TEST_ID,
-  DESCRIPTION_TITLE_TEST_ID,
-  RULE_SUMMARY_BUTTON_TEST_ID,
-} from './test_ids';
-import {
-  DOCUMENT_DESCRIPTION_COLLAPSE_BUTTON,
-  DOCUMENT_DESCRIPTION_EXPAND_BUTTON,
-  DOCUMENT_DESCRIPTION_TITLE,
-  RULE_DESCRIPTION_TITLE,
-} from './translations';
+import { DESCRIPTION_TITLE_TEST_ID, RULE_SUMMARY_BUTTON_TEST_ID } from './test_ids';
+import { DOCUMENT_DESCRIPTION_TITLE, RULE_DESCRIPTION_TITLE } from './translations';
 import { Description } from './description';
 import { TestProviders } from '../../../common/mock';
 import { RightPanelContext } from '../context';
@@ -54,7 +45,7 @@ jest.mock('../../../common/lib/kibana');
 jest.mock('../../../common/components/link_to');
 
 describe('<Description />', () => {
-  it('should render the component collapsed', () => {
+  it('should render the component', () => {
     const panelContextValue = {
       dataFormattedForFieldBrowser: [ruleUuid, ruleDescription, ruleName],
     } as unknown as RightPanelContext;
@@ -72,58 +63,6 @@ describe('<Description />', () => {
     expect(getByTestId(DESCRIPTION_TITLE_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(DESCRIPTION_TITLE_TEST_ID)).toHaveTextContent(RULE_DESCRIPTION_TITLE);
     expect(getByTestId(RULE_SUMMARY_BUTTON_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(DESCRIPTION_EXPAND_BUTTON_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(DESCRIPTION_EXPAND_BUTTON_TEST_ID)).toHaveTextContent(
-      DOCUMENT_DESCRIPTION_EXPAND_BUTTON
-    );
-  });
-
-  it('should render the component expanded', () => {
-    const panelContextValue = {
-      dataFormattedForFieldBrowser: [ruleUuid, ruleDescription, ruleName],
-    } as unknown as RightPanelContext;
-
-    const { getByTestId } = render(
-      <TestProviders>
-        <RightPanelContext.Provider value={panelContextValue}>
-          <ThemeProvider theme={mockTheme}>
-            <Description expanded={true} />
-          </ThemeProvider>
-        </RightPanelContext.Provider>
-      </TestProviders>
-    );
-
-    expect(getByTestId(DESCRIPTION_TITLE_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(DESCRIPTION_TITLE_TEST_ID)).toHaveTextContent(RULE_DESCRIPTION_TITLE);
-    expect(getByTestId(RULE_SUMMARY_BUTTON_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(DESCRIPTION_EXPAND_BUTTON_TEST_ID)).toBeInTheDocument();
-    expect(getByTestId(DESCRIPTION_EXPAND_BUTTON_TEST_ID)).toHaveTextContent(
-      DOCUMENT_DESCRIPTION_COLLAPSE_BUTTON
-    );
-  });
-
-  it('should render expand and collapse when clicking on the button', () => {
-    const panelContextValue = {
-      dataFormattedForFieldBrowser: [ruleUuid, ruleDescription, ruleName],
-    } as unknown as RightPanelContext;
-
-    const { getByTestId } = render(
-      <TestProviders>
-        <RightPanelContext.Provider value={panelContextValue}>
-          <ThemeProvider theme={mockTheme}>
-            <Description />
-          </ThemeProvider>
-        </RightPanelContext.Provider>
-      </TestProviders>
-    );
-
-    expect(getByTestId(DESCRIPTION_EXPAND_BUTTON_TEST_ID)).toHaveTextContent(
-      DOCUMENT_DESCRIPTION_EXPAND_BUTTON
-    );
-    getByTestId(DESCRIPTION_EXPAND_BUTTON_TEST_ID).click();
-    expect(getByTestId(DESCRIPTION_EXPAND_BUTTON_TEST_ID)).toHaveTextContent(
-      DOCUMENT_DESCRIPTION_COLLAPSE_BUTTON
-    );
   });
 
   it('should not render rule preview button if rule name is not available', () => {
@@ -145,6 +84,7 @@ describe('<Description />', () => {
     expect(getByTestId(DESCRIPTION_TITLE_TEST_ID)).toHaveTextContent(RULE_DESCRIPTION_TITLE);
     expect(queryByTestId(RULE_SUMMARY_BUTTON_TEST_ID)).not.toBeInTheDocument();
   });
+
   it('should render document title if document is not an alert', () => {
     const panelContextValue = {
       dataFormattedForFieldBrowser: [ruleDescription],

x-pack/plugins/security_solution/public/flyout/right/components/description.tsx

@@ -6,22 +6,18 @@
  */
 
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
-import type { VFC } from 'react';
-import React, { useState, useMemo, useCallback } from 'react';
-import { css } from '@emotion/react';
+import type { FC } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { isEmpty } from 'lodash';
 import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
 import { useRightPanelContext } from '../context';
 import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers';
 import {
   DESCRIPTION_DETAILS_TEST_ID,
-  DESCRIPTION_EXPAND_BUTTON_TEST_ID,
   DESCRIPTION_TITLE_TEST_ID,
   RULE_SUMMARY_BUTTON_TEST_ID,
 } from './test_ids';
 import {
-  DOCUMENT_DESCRIPTION_COLLAPSE_BUTTON,
-  DOCUMENT_DESCRIPTION_EXPAND_BUTTON,
   DOCUMENT_DESCRIPTION_TITLE,
   RULE_DESCRIPTION_TITLE,
   RULE_SUMMARY_TEXT,
@@ -29,22 +25,11 @@ import {
 } from './translations';
 import { PreviewPanelKey, type PreviewPanelProps } from '../../preview';
 
-export interface DescriptionProps {
-  /**
-   * Boolean to allow the component to be expanded or collapsed on first render
-   */
-  expanded?: boolean;
-}
-
 /**
  * Displays the description of a document.
  * If the document is an alert we show the rule description. If the document is of another type, we show -.
- * By default, the text is truncated to only shows 2 lines.
- * The Expand/Collapse button allows the user to see the whole description.
  */
-export const Description: VFC<DescriptionProps> = ({ expanded = false }) => {
-  const [isExpanded, setIsExpanded] = useState(expanded);
-
+export const Description: FC = () => {
   const { dataFormattedForFieldBrowser, scopeId, eventId, indexName } = useRightPanelContext();
   const { isAlert, ruleDescription, ruleName, ruleId } = useBasicDataFromDetailsData(
     dataFormattedForFieldBrowser
@@ -94,9 +79,6 @@ export const Description: VFC<DescriptionProps> = ({ expanded = false }) => {
 
   const hasRuleDescription = ruleDescription && ruleDescription.length > 0;
 
-  // TODO look into hiding the expand/collapse button if the description is short
-  //  see https://github.com/elastic/security-team/issues/6248
-
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem data-test-subj={DESCRIPTION_TITLE_TEST_ID}>
@@ -113,37 +95,8 @@ export const Description: VFC<DescriptionProps> = ({ expanded = false }) => {
           )}
         </EuiTitle>
       </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiFlexGroup direction="column" gutterSize="xs" alignItems="flexStart">
-          <EuiFlexItem
-            data-test-subj={DESCRIPTION_DETAILS_TEST_ID}
-            css={css`
-              word-break: break-word;
-              ${!isExpanded &&
-              `
-              display: -webkit-box;
-              -webkit-line-clamp: 2;
-              -webkit-box-orient: vertical;
-              overflow: hidden;
-              `}
-            `}
-          >
-            {hasRuleDescription ? ruleDescription : '-'}
-          </EuiFlexItem>
-          {hasRuleDescription ? (
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                size="s"
-                onClick={() => setIsExpanded((preIsExpanded) => !preIsExpanded)}
-                data-test-subj={DESCRIPTION_EXPAND_BUTTON_TEST_ID}
-              >
-                {isExpanded
-                  ? DOCUMENT_DESCRIPTION_COLLAPSE_BUTTON
-                  : DOCUMENT_DESCRIPTION_EXPAND_BUTTON}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          ) : null}
-        </EuiFlexGroup>
+      <EuiFlexItem data-test-subj={DESCRIPTION_DETAILS_TEST_ID}>
+        {hasRuleDescription ? ruleDescription : '-'}
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts

@@ -35,8 +35,6 @@ export const RULE_SUMMARY_BUTTON_TEST_ID = 'securitySolutionDocumentDetailsFlyou
 export const DESCRIPTION_TITLE_TEST_ID = 'securitySolutionDocumentDetailsFlyoutDescriptionTitle';
 export const DESCRIPTION_DETAILS_TEST_ID =
   'securitySolutionDocumentDetailsFlyoutDescriptionDetails';
-export const DESCRIPTION_EXPAND_BUTTON_TEST_ID =
-  'securitySolutionDocumentDetailsFlyoutDescriptionExpandButton';
 export const REASON_TITLE_TEST_ID = 'securitySolutionDocumentDetailsFlyoutReasonTitle';
 export const REASON_DETAILS_TEST_ID = 'securitySolutionDocumentDetailsFlyoutReasonDetails';
 export const MITRE_ATTACK_TITLE_TEST_ID = 'securitySolutionAlertDetailsFlyoutMitreAttackTitle';

x-pack/plugins/security_solution/public/flyout/right/components/translations.ts

@@ -79,18 +79,6 @@ export const DOCUMENT_DESCRIPTION_TITLE = i18n.translate(
     defaultMessage: 'Document description',
   }
 );
-export const DOCUMENT_DESCRIPTION_EXPAND_BUTTON = i18n.translate(
-  'xpack.securitySolution.flyout.documentDetails.documentDescriptionExpandButton',
-  {
-    defaultMessage: 'Expand',
-  }
-);
-export const DOCUMENT_DESCRIPTION_COLLAPSE_BUTTON = i18n.translate(
-  'xpack.securitySolution.flyout.documentDetails.documentDescriptionCollapseButton',
-  {
-    defaultMessage: 'Collapse',
-  }
-);
 
 export const ALERT_REASON_TITLE = i18n.translate(
   'xpack.securitySolution.flyout.documentDetails.alertReasonTitle',

x-pack/plugins/translations/translations/fr-FR.json

@@ -33405,8 +33405,6 @@
     "xpack.securitySolution.flyout.documentDetails.collapseDetailButton": "Réduire les détails de l'alerte",
     "xpack.securitySolution.flyout.documentDetails.correlationsButton": "Corrélations",
     "xpack.securitySolution.flyout.documentDetails.correlationsTitle": "Corrélations",
-    "xpack.securitySolution.flyout.documentDetails.documentDescriptionCollapseButton": "Réduire",
-    "xpack.securitySolution.flyout.documentDetails.documentDescriptionExpandButton": "Développer",
     "xpack.securitySolution.flyout.documentDetails.documentDescriptionTitle": "Description du document",
     "xpack.securitySolution.flyout.documentDetails.documentReasonTitle": "Motif du document",
     "xpack.securitySolution.flyout.documentDetails.entitiesButton": "Entités",

x-pack/plugins/translations/translations/ja-JP.json

@@ -33404,8 +33404,6 @@
     "xpack.securitySolution.flyout.documentDetails.collapseDetailButton": "アラート詳細を折りたたむ",
     "xpack.securitySolution.flyout.documentDetails.correlationsButton": "相関関係",
     "xpack.securitySolution.flyout.documentDetails.correlationsTitle": "相関関係",
-    "xpack.securitySolution.flyout.documentDetails.documentDescriptionCollapseButton": "縮小",
-    "xpack.securitySolution.flyout.documentDetails.documentDescriptionExpandButton": "拡張",
     "xpack.securitySolution.flyout.documentDetails.documentDescriptionTitle": "ドキュメント説明",
     "xpack.securitySolution.flyout.documentDetails.documentReasonTitle": "ドキュメント理由",
     "xpack.securitySolution.flyout.documentDetails.entitiesButton": "エンティティ",

x-pack/plugins/translations/translations/zh-CN.json

@@ -33400,8 +33400,6 @@
     "xpack.securitySolution.flyout.documentDetails.collapseDetailButton": "折叠告警详情",
     "xpack.securitySolution.flyout.documentDetails.correlationsButton": "相关性",
     "xpack.securitySolution.flyout.documentDetails.correlationsTitle": "相关性",
-    "xpack.securitySolution.flyout.documentDetails.documentDescriptionCollapseButton": "折叠",
-    "xpack.securitySolution.flyout.documentDetails.documentDescriptionExpandButton": "展开",
     "xpack.securitySolution.flyout.documentDetails.documentDescriptionTitle": "文档描述",
     "xpack.securitySolution.flyout.documentDetails.documentReasonTitle": "文档原因",
     "xpack.securitySolution.flyout.documentDetails.entitiesButton": "实体",