[Security Solution] fix tools flyout title (elastic#263183)

Author: PhilippeOberti

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/document/components/title.tsx

@@ -24,11 +24,6 @@ export interface TitleProps {
    * The document to display
    */
   hit: DataTableRecord;
-  /**
-   * Optional boolean to render the title in a smaller font size.
-   * Should be used when the component is displayed in a tools flyout header.
-   */
-  isCompact?: boolean;
   /**
    * Optional boolean to suppress the rule details link even when a rule ID is present.
    * Should be used when the component is displayed in a rule preview context.
@@ -41,7 +36,7 @@ export interface TitleProps {
  * For alerts: shows the rule name with a warning icon, linked to the rule details page.
  * For events: shows the event title with an analyzeEvent icon.
  */
-export const Title: FC<TitleProps> = memo(({ hit, isCompact = false, hideLink = false }) => {
+export const Title: FC<TitleProps> = memo(({ hit, hideLink = false }) => {
   const { services } = useKibana();
 
   const isAlert = useMemo(
@@ -73,25 +68,12 @@ export const Title: FC<TitleProps> = memo(({ hit, isCompact = false, hideLink =
         external={false}
         data-test-subj={TITLE_LINK_TEST_ID}
       >
-        <FlyoutTitle
-          title={title}
-          iconType={iconType}
-          isLink
-          isCompact={isCompact}
-          data-test-subj={TITLE_TEST_ID}
-        />
+        <FlyoutTitle title={title} iconType={iconType} isLink data-test-subj={TITLE_TEST_ID} />
       </EuiLink>
     );
   }
 
-  return (
-    <FlyoutTitle
-      title={title}
-      iconType={iconType}
-      isCompact={isCompact}
-      data-test-subj={TITLE_TEST_ID}
-    />
-  );
+  return <FlyoutTitle title={title} iconType={iconType} data-test-subj={TITLE_TEST_ID} />;
 });
 
 Title.displayName = 'Title';

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/shared/components/flyout_title.tsx

@@ -37,11 +37,6 @@ export interface FlyoutTitleProps {
    * and the title text is changed to link color
    */
   isLink?: boolean;
-  /**
-   * Optional boolean to render the title in a smaller font size (`xs` instead of `s`).
-   * Should be used when the component is displayed in a tools flyout header.
-   */
-  isCompact?: boolean;
   /**
    * Optional data test subject string
    */
@@ -57,7 +52,6 @@ export const FlyoutTitle: FC<FlyoutTitleProps> = memo(
     iconType,
     iconColor,
     isLink = false,
-    isCompact = false,
     'data-test-subj': dataTestSubj = 'flyoutTitle',
   }) => {
     const { euiTheme } = useEuiTheme();
@@ -80,13 +74,13 @@ export const FlyoutTitle: FC<FlyoutTitleProps> = memo(
 
     const titleComponent = useMemo(() => {
       return (
-        <EuiTitle size={isCompact ? 'xs' : 's'} data-test-subj={`${dataTestSubj}Text`}>
+        <EuiTitle size="s" data-test-subj={`${dataTestSubj}Text`}>
           <EuiTextColor color={isLink ? euiTheme.colors.textPrimary : undefined}>
             <span>{title}</span>
           </EuiTextColor>
         </EuiTitle>
       );
-    }, [dataTestSubj, isCompact, isLink, title, euiTheme.colors.textPrimary]);
+    }, [dataTestSubj, isLink, title, euiTheme.colors.textPrimary]);
 
     const linkIcon = useMemo(() => {
       return (

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/shared/components/test_ids.ts

@@ -36,5 +36,4 @@ export const NOTES_COUNT_TEST_ID = `${PREFIX}HeaderNotesCount` as const;
 export const NOTES_LOADING_TEST_ID = `${PREFIX}HeaderNotesLoading` as const;
 
 export const TOOLS_FLYOUT_HEADER_TEST_ID = `${PREFIX}ToolsFlyoutHeader` as const;
-export const TOOLS_FLYOUT_HEADER_EXPAND_BUTTON_TEST_ID =
-  `${PREFIX}ToolsFlyoutHeaderExpandButton` as const;
+export const TOOLS_FLYOUT_HEADER_TITLE_TEST_ID = `${PREFIX}ToolsFlyoutHeaderTitle` as const;

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/shared/components/tools_flyout_header.test.tsx

@@ -6,49 +6,15 @@
  */
 
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import type { DataTableRecord } from '@kbn/discover-utils';
 import { ToolsFlyoutHeader } from './tools_flyout_header';
-import { TOOLS_FLYOUT_HEADER_TEST_ID, TOOLS_FLYOUT_HEADER_EXPAND_BUTTON_TEST_ID } from './test_ids';
+import { TOOLS_FLYOUT_HEADER_TEST_ID } from './test_ids';
 
-const mockOpenSystemFlyout = jest.fn();
-
-jest.mock('../../../common/lib/kibana', () => ({
-  useKibana: () => ({
-    services: {
-      overlays: {
-        openSystemFlyout: mockOpenSystemFlyout,
-      },
-    },
-  }),
-}));
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useStore: () => ({}),
-}));
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({ push: jest.fn() }),
-}));
-
-jest.mock('../hooks/use_default_flyout_properties', () => ({
-  useDefaultDocumentFlyoutProperties: () => ({ size: 'm' }),
-}));
-
-jest.mock('./flyout_provider', () => ({
-  flyoutProviders: jest.fn(({ children }: { children: React.ReactNode }) => children),
-}));
-
-jest.mock('../../document', () => ({
-  DocumentFlyout: () => <div data-test-subj="mockDocumentFlyout" />,
-}));
-
-jest.mock('../../document/components/title', () => ({
-  Title: ({ hit }: { hit: DataTableRecord }) => (
-    <div data-test-subj="mockTitle">{String(hit.id)}</div>
+jest.mock('./tools_flyout_title', () => ({
+  ToolsFlyoutTitle: ({ hit }: { hit: DataTableRecord }) => (
+    <div data-test-subj="mockToolsFlyoutTitle">{String(hit.id)}</div>
   ),
 }));
 
@@ -78,10 +44,6 @@ const renderHeader = (props: Partial<Parameters<typeof ToolsFlyoutHeader>[0]> =
 };
 
 describe('<ToolsFlyoutHeader />', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render the header container', () => {
     const { getByTestId } = renderHeader();
     expect(getByTestId(TOOLS_FLYOUT_HEADER_TEST_ID)).toBeInTheDocument();
@@ -92,20 +54,9 @@ describe('<ToolsFlyoutHeader />', () => {
     expect(getByText('Session view')).toBeInTheDocument();
   });
 
-  it('should render the expand button', () => {
-    const { getByTestId } = renderHeader();
-    expect(getByTestId(TOOLS_FLYOUT_HEADER_EXPAND_BUTTON_TEST_ID)).toBeInTheDocument();
-  });
-
-  it('should call openSystemFlyout when the expand button is clicked', () => {
-    const { getByTestId } = renderHeader();
-    fireEvent.click(getByTestId(TOOLS_FLYOUT_HEADER_EXPAND_BUTTON_TEST_ID));
-    expect(mockOpenSystemFlyout).toHaveBeenCalledTimes(1);
-  });
-
-  it('should render the document title', () => {
+  it('should render ToolsFlyoutTitle', () => {
     const { getByTestId } = renderHeader();
-    expect(getByTestId('mockTitle')).toBeInTheDocument();
+    expect(getByTestId('mockToolsFlyoutTitle')).toBeInTheDocument();
   });
 
   it('should render the document severity', () => {

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/shared/components/tools_flyout_header.tsx

@@ -6,30 +6,18 @@
  */
 
 import type { FC, ReactNode } from 'react';
-import React, { memo, useCallback } from 'react';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import React, { memo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import type { DataTableRecord } from '@kbn/discover-utils';
-import { useHistory } from 'react-router-dom';
-import { useStore } from 'react-redux';
 import { Timestamp } from '../../document/components/timestamp';
-import { Title } from '../../document/components/title';
 import { DocumentSeverity } from '../../document/components/severity';
-import { useKibana } from '../../../common/lib/kibana';
 import type { CellActionRenderer } from './cell_actions';
 import { noopCellActionRenderer } from './cell_actions';
-import { flyoutProviders } from './flyout_provider';
-import { DocumentFlyout } from '../../document';
-import { useDefaultDocumentFlyoutProperties } from '../hooks/use_default_flyout_properties';
-import { TOOLS_FLYOUT_HEADER_EXPAND_BUTTON_TEST_ID, TOOLS_FLYOUT_HEADER_TEST_ID } from './test_ids';
+import { ToolsFlyoutTitle } from './tools_flyout_title';
+import { TOOLS_FLYOUT_HEADER_TEST_ID } from './test_ids';
 
 const noop = () => {};
 
-const EXPAND_BUTTON_ARIA_LABEL = i18n.translate(
-  'xpack.securitySolution.flyout.toolsFlyoutHeader.expandButtonAriaLabel',
-  { defaultMessage: 'Open document details' }
-);
-
 export interface ToolsFlyoutHeaderProps {
   /**
    * The document to display
@@ -55,29 +43,6 @@ export interface ToolsFlyoutHeaderProps {
  */
 export const ToolsFlyoutHeader: FC<ToolsFlyoutHeaderProps> = memo(
   ({ hit, title, renderCellActions = noopCellActionRenderer, onAlertUpdated = noop }) => {
-    const { services } = useKibana();
-    const store = useStore();
-    const history = useHistory();
-    const defaultFlyoutProperties = useDefaultDocumentFlyoutProperties();
-
-    const onShowDocument = useCallback(() => {
-      services.overlays?.openSystemFlyout(
-        flyoutProviders({
-          services,
-          store,
-          history,
-          children: (
-            <DocumentFlyout
-              hit={hit}
-              renderCellActions={renderCellActions}
-              onAlertUpdated={onAlertUpdated}
-            />
-          ),
-        }),
-        { ...defaultFlyoutProperties, session: 'inherit' }
-      );
-    }, [defaultFlyoutProperties, history, hit, onAlertUpdated, renderCellActions, services, store]);
-
     return (
       <EuiFlexGroup
         justifyContent="spaceBetween"
@@ -92,22 +57,16 @@ export const ToolsFlyoutHeader: FC<ToolsFlyoutHeaderProps> = memo(
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup alignItems="flexEnd" direction="column" gutterSize="xs">
+          <EuiFlexGroup alignItems="flexEnd" direction="column" gutterSize="none">
             <EuiFlexItem>
-              <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false} wrap={false}>
+              <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false} wrap={false}>
                 <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
-                    iconType="expand"
-                    onClick={onShowDocument}
-                    aria-label={EXPAND_BUTTON_ARIA_LABEL}
-                    size="xs"
-                    color="primary"
-                    data-test-subj={TOOLS_FLYOUT_HEADER_EXPAND_BUTTON_TEST_ID}
+                  <ToolsFlyoutTitle
+                    hit={hit}
+                    renderCellActions={renderCellActions}
+                    onAlertUpdated={onAlertUpdated}
                   />
                 </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <Title hit={hit} isCompact={true} />
-                </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <DocumentSeverity hit={hit} />
                 </EuiFlexItem>

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/shared/components/tools_flyout_title.test.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import type { DataTableRecord } from '@kbn/discover-utils';
+import { ToolsFlyoutTitle } from './tools_flyout_title';
+import { TOOLS_FLYOUT_HEADER_TITLE_TEST_ID } from './test_ids';
+
+const mockOpenSystemFlyout = jest.fn();
+
+jest.mock('../../../common/lib/kibana', () => ({
+  useKibana: () => ({
+    services: {
+      overlays: {
+        openSystemFlyout: mockOpenSystemFlyout,
+      },
+    },
+  }),
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useStore: () => ({}),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({ push: jest.fn() }),
+}));
+
+jest.mock('../hooks/use_default_flyout_properties', () => ({
+  useDefaultDocumentFlyoutProperties: () => ({ size: 'm' }),
+}));
+
+jest.mock('./flyout_provider', () => ({
+  flyoutProviders: jest.fn(({ children }: { children: React.ReactNode }) => children),
+}));
+
+jest.mock('../../document', () => ({
+  DocumentFlyout: () => <div data-test-subj="mockDocumentFlyout" />,
+}));
+
+const createMockHit = (flattened: DataTableRecord['flattened']): DataTableRecord =>
+  ({
+    id: '1',
+    raw: {},
+    flattened,
+    isAnchor: false,
+  } as DataTableRecord);
+
+const alertHit = createMockHit({
+  'event.kind': 'signal',
+  'kibana.alert.rule.name': 'Test Rule Name',
+});
+
+const eventHit = createMockHit({
+  'event.kind': 'event',
+  'event.category': 'process',
+  'process.name': 'test-process',
+});
+
+const renderToolsFlyoutTitle = (hit: DataTableRecord) => render(<ToolsFlyoutTitle hit={hit} />);
+
+describe('<ToolsFlyoutTitle />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the alert title', () => {
+    const { getByTestId } = renderToolsFlyoutTitle(alertHit);
+    expect(getByTestId(TOOLS_FLYOUT_HEADER_TITLE_TEST_ID)).toHaveTextContent('Test Rule Name');
+  });
+
+  it('should render the event title', () => {
+    const { getByTestId } = renderToolsFlyoutTitle(eventHit);
+    expect(getByTestId(TOOLS_FLYOUT_HEADER_TITLE_TEST_ID)).toHaveTextContent('test-process');
+  });
+
+  it('should open the document flyout when clicked', () => {
+    const { getByTestId } = renderToolsFlyoutTitle(alertHit);
+    fireEvent.click(getByTestId(TOOLS_FLYOUT_HEADER_TITLE_TEST_ID));
+    expect(mockOpenSystemFlyout).toHaveBeenCalledTimes(1);
+  });
+});