[Security Solution][Notes] - add note block to alert defaitls flyout …

…header (elastic#193373)

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

@@ -0,0 +1,27 @@
+/*
+ * 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 } from '@testing-library/react';
+import { AlertHeaderBlock } from './alert_header_block';
+
+const title = <div>{'title'}</div>;
+const children = <div data-test-subj={'CHILDREN_TEST_ID'}>{'children'}</div>;
+const dataTestSubj = 'TITLE_TEST_ID';
+
+describe('<AlertHeaderBlock />', () => {
+ it('should render component', () => {
+ const { getByTestId } = render(
+ <AlertHeaderBlock title={title} data-test-subj={dataTestSubj}>
+ {children}
+ </AlertHeaderBlock>
+ );
+
+ expect(getByTestId('TITLE_TEST_ID')).toHaveTextContent('title');
+ expect(getByTestId('CHILDREN_TEST_ID')).toBeInTheDocument();
+ });
+});

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

@@ -0,0 +1,45 @@
+/*
+ * 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 type { ReactElement, ReactNode, VFC } from 'react';
+import React, { memo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
+
+export interface AlertHeaderBlockProps {
+ /**
+ * React component to render as the title
+ */
+ title: ReactElement;
+ /**
+ * React component to render as the value
+ */
+ children: ReactNode;
+ /**
+ * data-test-subj to use for the title
+ */
+ ['data-test-subj']?: string;
+}
+
+/**
+ * Reusable component for rendering a block with rounded edges, show a title and value below one another
+ */
+export const AlertHeaderBlock: VFC<AlertHeaderBlockProps> = memo(
+ ({ title, children, 'data-test-subj': dataTestSubj }) => (
+ <EuiPanel hasShadow={false} hasBorder paddingSize="s">
+ <EuiFlexGroup direction="column" gutterSize="xs" responsive={false}>
+ <EuiFlexItem grow={false}>
+ <EuiTitle size="xxs" data-test-subj={dataTestSubj}>
+ <h3>{title}</h3>
+ </EuiTitle>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>{children}</EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiPanel>
+ )
+);
+
+AlertHeaderBlock.displayName = 'AlertHeaderBlock';

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

@@ -13,17 +13,21 @@ import {
  SEVERITY_VALUE_TEST_ID,
  FLYOUT_ALERT_HEADER_TITLE_TEST_ID,
  STATUS_BUTTON_TEST_ID,
- ASSIGNEES_HEADER_TEST_ID,
  ALERT_SUMMARY_PANEL_TEST_ID,
+ ASSIGNEES_TEST_ID,
+ ASSIGNEES_EMPTY_TEST_ID,
+ NOTES_TITLE_TEST_ID,
 } from './test_ids';
 import { AlertHeaderTitle } from './alert_header_title';
 import moment from 'moment-timezone';
 import { useDateFormat, useTimeZone } from '../../../../common/lib/kibana';
 import { mockGetFieldsData } from '../../shared/mocks/mock_get_fields_data';
 import { mockDataFormattedForFieldBrowser } from '../../shared/mocks/mock_data_formatted_for_field_browser';
 import { TestProvidersComponent } from '../../../../common/mock';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 
 jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../../common/hooks/use_experimental_features');
 
 moment.suppressDeprecationWarnings = true;
 moment.tz.setDefault('UTC');
@@ -51,15 +55,16 @@ describe('<AlertHeaderTitle />', () => {
  });
 
  it('should render component', () => {
- const { getByTestId } = renderHeader(mockContextValue);
+ const { getByTestId, queryByTestId } = renderHeader(mockContextValue);
 
  expect(getByTestId(HEADER_TEXT_TEST_ID)).toHaveTextContent('rule-name');
  expect(getByTestId(SEVERITY_VALUE_TEST_ID)).toBeInTheDocument();
  expect(getByTestId(ALERT_SUMMARY_PANEL_TEST_ID)).toBeInTheDocument();
 
  expect(getByTestId(RISK_SCORE_VALUE_TEST_ID)).toBeInTheDocument();
  expect(getByTestId(STATUS_BUTTON_TEST_ID)).toBeInTheDocument();
- expect(getByTestId(ASSIGNEES_HEADER_TEST_ID)).toBeInTheDocument();
+ expect(getByTestId(ASSIGNEES_TEST_ID)).toBeInTheDocument();
+ expect(queryByTestId(ASSIGNEES_EMPTY_TEST_ID)).not.toBeInTheDocument();
  });
 
  it('should render title correctly if flyout is in preview', () => {
@@ -68,7 +73,15 @@ describe('<AlertHeaderTitle />', () => {
 
  expect(getByTestId(RISK_SCORE_VALUE_TEST_ID)).toBeInTheDocument();
  expect(queryByTestId(STATUS_BUTTON_TEST_ID)).not.toBeInTheDocument();
- expect(getByTestId(ASSIGNEES_HEADER_TEST_ID)).toHaveTextContent('Assignees—');
+ expect(getByTestId(ASSIGNEES_EMPTY_TEST_ID)).toBeInTheDocument();
+ expect(queryByTestId(ASSIGNEES_TEST_ID)).not.toBeInTheDocument();
+ });
+
+ it('should render notes section if experimental flag is enabled', () => {
+ (useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
+
+ const { getByTestId } = renderHeader(mockContextValue);
+ expect(getByTestId(NOTES_TITLE_TEST_ID)).toBeInTheDocument();
  });
 
  it('should render fall back values if document is not alert', () => {

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

@@ -6,11 +6,12 @@
  */
 
 import React, { memo, useCallback, useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPanel, useEuiTheme, EuiLink } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiLink } from '@elastic/eui';
 import { ALERT_WORKFLOW_ASSIGNEE_IDS } from '@kbn/rule-data-utils';
 import { i18n } from '@kbn/i18n';
 import { FlyoutTitle } from '@kbn/security-solution-common';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import { Notes } from './notes';
 import { useRuleDetailsLink } from '../../shared/hooks/use_rule_details_link';
 import { DocumentStatus } from './status';
 import { DocumentSeverity } from './severity';
@@ -22,6 +23,11 @@ import { PreferenceFormattedDate } from '../../../../common/components/formatted
 import { FLYOUT_ALERT_HEADER_TITLE_TEST_ID, ALERT_SUMMARY_PANEL_TEST_ID } from './test_ids';
 import { Assignees } from './assignees';
 
+// minWidth for each block, allows to switch for a 1 row 4 blocks to 2 rows with 2 block each
+const blockStyles = {
+ minWidth: 280,
+};
+
 /**
  * Alert details flyout right section header
  */
@@ -34,10 +40,13 @@ export const AlertHeaderTitle = memo(() => {
  refetchFlyoutData,
  getFieldsData,
  } = useDocumentDetailsContext();
+ const securitySolutionNotesEnabled = useIsExperimentalFeatureEnabled(
+ 'securitySolutionNotesEnabled'
+ );
+
  const { isAlert, ruleName, timestamp, ruleId } = useBasicDataFromDetailsData(
  dataFormattedForFieldBrowser
  );
- const { euiTheme } = useEuiTheme();
 
  const href = useRuleDetailsLink({ ruleId: !isPreview ? ruleId : null });
  const ruleTitle = useMemo(
@@ -89,27 +98,52 @@ export const AlertHeaderTitle = memo(() => {
  />
  )}
  <EuiSpacer size="m" />
- <EuiPanel
- hasShadow={false}
- hasBorder
- css={css`
- padding: ${euiTheme.size.m} ${euiTheme.size.s};
- `}
- data-test-subj={ALERT_SUMMARY_PANEL_TEST_ID}
- >
- <EuiFlexGroup direction="row" gutterSize="m" responsive={false}>
- <EuiFlexItem
- css={css`
- border-right: ${euiTheme.border.thin};
- `}
- >
+ {securitySolutionNotesEnabled ? (
+ <EuiFlexGroup
+ direction="row"
+ gutterSize="s"
+ responsive={false}
+ wrap
+ data-test-subj={ALERT_SUMMARY_PANEL_TEST_ID}
+ >
+ <EuiFlexItem style={blockStyles}>
+ <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
+ <EuiFlexItem>
+ <DocumentStatus />
+ </EuiFlexItem>
+ <EuiFlexItem>
+ <RiskScore />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiFlexItem>
+ <EuiFlexItem style={blockStyles}>
+ <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
+ <EuiFlexItem>
+ <Assignees
+ eventId={eventId}
+ assignedUserIds={alertAssignees}
+ onAssigneesUpdated={onAssigneesUpdated}
+ isPreview={isPreview}
+ />
+ </EuiFlexItem>
+ <EuiFlexItem>
+ <Notes />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ ) : (
+ <EuiFlexGroup
+ direction="row"
+ gutterSize="s"
+ responsive={false}
+ wrap
+ data-test-subj={ALERT_SUMMARY_PANEL_TEST_ID}
+ >
+ <EuiFlexItem>
  <DocumentStatus />
  </EuiFlexItem>
- <EuiFlexItem
- css={css`
- border-right: ${euiTheme.border.thin};
- `}
- >
+ <EuiFlexItem>
  <RiskScore />
  </EuiFlexItem>
  <EuiFlexItem>
@@ -121,7 +155,7 @@ export const AlertHeaderTitle = memo(() => {
  />
  </EuiFlexItem>
  </EuiFlexGroup>
- </EuiPanel>
+ )}
  </>
  );
 });

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

@@ -10,8 +10,8 @@ import { render } from '@testing-library/react';
 
 import {
  ASSIGNEES_ADD_BUTTON_TEST_ID,
+ ASSIGNEES_EMPTY_TEST_ID,
  ASSIGNEES_TITLE_TEST_ID,
- ASSIGNEES_HEADER_TEST_ID,
 } from './test_ids';
 import { Assignees } from './assignees';
 
@@ -180,6 +180,6 @@ describe('<Assignees />', () => {
  );
 
  expect(queryByTestId(ASSIGNEES_ADD_BUTTON_TEST_ID)).not.toBeInTheDocument();
- expect(getByTestId(ASSIGNEES_HEADER_TEST_ID)).toHaveTextContent('Assignees—');
+ expect(getByTestId(ASSIGNEES_EMPTY_TEST_ID)).toHaveTextContent('—');
  });
 });

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

@@ -14,12 +14,12 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiPopover,
- EuiTitle,
  EuiToolTip,
  useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { AlertHeaderBlock } from './alert_header_block';
 import { useSetAlertAssignees } from '../../../../common/components/toolbar/bulk_actions/use_set_alert_assignees';
 import { getEmptyTagValue } from '../../../../common/components/empty_value';
 import { ASSIGNEES_PANEL_WIDTH } from '../../../../common/components/assignees/constants';
@@ -32,7 +32,8 @@ import { useBulkGetUserProfiles } from '../../../../common/components/user_profi
 import { UsersAvatarsPanel } from '../../../../common/components/user_profiles/users_avatars_panel';
 import {
  ASSIGNEES_ADD_BUTTON_TEST_ID,
- ASSIGNEES_HEADER_TEST_ID,
+ ASSIGNEES_EMPTY_TEST_ID,
+ ASSIGNEES_TEST_ID,
  ASSIGNEES_TITLE_TEST_ID,
 } from './test_ids';
 
@@ -158,26 +159,19 @@ export const Assignees: FC<AssigneesProps> = memo(
  ]);
 
  return (
- <EuiFlexGroup
- data-test-subj={ASSIGNEES_HEADER_TEST_ID}
- direction="column"
- gutterSize="none"
- responsive={false}
+ <AlertHeaderBlock
+ title={
+ <FormattedMessage
+ id="xpack.securitySolution.flyout.right.header.assignedTitle"
+ defaultMessage="Assignees"
+ />
+ }
+ data-test-subj={ASSIGNEES_TITLE_TEST_ID}
  >
- <EuiFlexItem grow={false}>
- <EuiTitle size="xxs" data-test-subj={ASSIGNEES_TITLE_TEST_ID}>
- <h3>
- <FormattedMessage
- id="xpack.securitySolution.flyout.right.header.assignedTitle"
- defaultMessage="Assignees"
- />
- </h3>
- </EuiTitle>
- </EuiFlexItem>
  {isPreview ? (
- getEmptyTagValue()
+ <div data-test-subj={ASSIGNEES_EMPTY_TEST_ID}>{getEmptyTagValue()}</div>
  ) : (
- <EuiFlexGroup gutterSize="none" responsive={false}>
+ <EuiFlexGroup gutterSize="none" responsive={false} data-test-subj={ASSIGNEES_TEST_ID}>
  {assignedUsers && (
  <EuiFlexItem grow={false}>
  <UsersAvatarsPanel userProfiles={assignedUsers} maxVisibleAvatars={2} />
@@ -186,7 +180,7 @@ export const Assignees: FC<AssigneesProps> = memo(
  <EuiFlexItem grow={false}>{updateAssigneesPopover}</EuiFlexItem>
  </EuiFlexGroup>
  )}
- </EuiFlexGroup>
+ </AlertHeaderBlock>
  );
  }
 );