From 68b8ac3fefa99d5444bdbdd9b20d4935ef8fc7d9 Mon Sep 17 00:00:00 2001
From: Philippe Oberti <philippe.oberti@elastic.co>
Date: Tue, 18 Jul 2023 09:23:13 +0200
Subject: [PATCH] [Security Solution] expandable flyout - add status to flyout
 header (#161942)

---
 .../alert_details_right_panel.cy.ts           |  3 +
 .../alert_details_right_panel.ts              |  4 +
 .../__snapshots__/index.test.tsx.snap         |  1 +
 .../right/components/header_title.test.tsx    | 17 +++--
 .../flyout/right/components/header_title.tsx  | 16 +++-
 .../right/components/status.stories.tsx       | 59 +++++++++++++++
 .../flyout/right/components/status.test.tsx   | 75 +++++++++++++++++++
 .../public/flyout/right/components/status.tsx | 65 ++++++++++++++++
 .../flyout/right/components/test_ids.ts       |  1 +
 .../flyout/right/components/translations.ts   |  7 ++
 .../public/flyout/right/context.tsx           |  2 +
 .../timeline/body/renderers/rule_status.tsx   |  1 +
 12 files changed, 241 insertions(+), 10 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/flyout/right/components/status.stories.tsx
 create mode 100644 x-pack/plugins/security_solution/public/flyout/right/components/status.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/flyout/right/components/status.tsx

diff --git a/x-pack/plugins/security_solution/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_right_panel.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_right_panel.cy.ts
index fb21d9d5a445d..44a2326aebc8e 100644
--- a/x-pack/plugins/security_solution/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_right_panel.cy.ts
+++ b/x-pack/plugins/security_solution/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_right_panel.cy.ts
@@ -43,6 +43,7 @@ import {
   DOCUMENT_DETAILS_FLYOUT_HEADER_RISK_SCORE_VALUE,
   DOCUMENT_DETAILS_FLYOUT_HEADER_SEVERITY,
   DOCUMENT_DETAILS_FLYOUT_HEADER_SEVERITY_VALUE,
+  DOCUMENT_DETAILS_FLYOUT_HEADER_STATUS,
   DOCUMENT_DETAILS_FLYOUT_HEADER_TITLE,
   DOCUMENT_DETAILS_FLYOUT_JSON_TAB,
   DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB,
@@ -85,6 +86,8 @@ describe(
 
       cy.get(DOCUMENT_DETAILS_FLYOUT_HEADER_CHAT_BUTTON).should('be.visible');
 
+      cy.get(DOCUMENT_DETAILS_FLYOUT_HEADER_STATUS).should('be.visible');
+
       cy.get(DOCUMENT_DETAILS_FLYOUT_HEADER_RISK_SCORE).should('be.visible');
       cy.get(DOCUMENT_DETAILS_FLYOUT_HEADER_RISK_SCORE_VALUE)
         .should('be.visible')
diff --git a/x-pack/plugins/security_solution/cypress/screens/expandable_flyout/alert_details_right_panel.ts b/x-pack/plugins/security_solution/cypress/screens/expandable_flyout/alert_details_right_panel.ts
index 50de0eb348264..60ebbe7fdd071 100644
--- a/x-pack/plugins/security_solution/cypress/screens/expandable_flyout/alert_details_right_panel.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/expandable_flyout/alert_details_right_panel.ts
@@ -20,6 +20,7 @@ import {
   FLYOUT_HEADER_RISK_SCORE_VALUE_TEST_ID,
   FLYOUT_HEADER_SEVERITY_TITLE_TEST_ID,
   FLYOUT_HEADER_SEVERITY_VALUE_TEST_ID,
+  FLYOUT_HEADER_STATUS_BUTTON_TEST_ID,
   FLYOUT_HEADER_TITLE_TEST_ID,
 } from '../../../public/flyout/right/components/test_ids';
 
@@ -42,6 +43,9 @@ export const DOCUMENT_DETAILS_FLYOUT_OVERVIEW_TAB =
   getDataTestSubjectSelector(OVERVIEW_TAB_TEST_ID);
 export const DOCUMENT_DETAILS_FLYOUT_TABLE_TAB = getDataTestSubjectSelector(TABLE_TAB_TEST_ID);
 export const DOCUMENT_DETAILS_FLYOUT_JSON_TAB = getDataTestSubjectSelector(JSON_TAB_TEST_ID);
+export const DOCUMENT_DETAILS_FLYOUT_HEADER_STATUS = getDataTestSubjectSelector(
+  FLYOUT_HEADER_STATUS_BUTTON_TEST_ID
+);
 export const DOCUMENT_DETAILS_FLYOUT_HEADER_RISK_SCORE = getDataTestSubjectSelector(
   FLYOUT_HEADER_RISK_SCORE_TITLE_TEST_ID
 );
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap
index 6ee4557d2ee22..c676809c3c2a5 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap
@@ -91,6 +91,7 @@ exports[`Event Details Overview Cards renders rows and spacers correctly 1`] = `
                   <button
                     aria-label="Click to change alert status"
                     class="euiBadge c3 emotion-euiBadge-primary-clickable"
+                    data-test-subj="rule-status-badge"
                   >
                     <span
                       class="euiBadge__content emotion-euiBadge__content"
diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/header_title.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/header_title.test.tsx
index d710945e980be..010535ffc55c7 100644
--- a/x-pack/plugins/security_solution/public/flyout/right/components/header_title.test.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/right/components/header_title.test.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
+import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
 import { RightPanelContext } from '../context';
 import {
   FLYOUT_HEADER_CHAT_BUTTON_TEST_ID,
@@ -21,7 +22,7 @@ import moment from 'moment-timezone';
 import { useDateFormat, useTimeZone } from '../../../common/lib/kibana';
 import { mockDataFormattedForFieldBrowser, mockGetFieldsData } from '../mocks/mock_context';
 import { useAssistant } from '../hooks/use_assistant';
-import { MockAssistantProvider } from '../../../common/mock/mock_assistant_provider';
+import { TestProvidersComponent } from '../../../common/mock';
 
 jest.mock('../../../common/lib/kibana');
 jest.mock('../hooks/use_assistant');
@@ -31,13 +32,17 @@ moment.tz.setDefault('UTC');
 
 const dateFormat = 'MMM D, YYYY @ HH:mm:ss.SSS';
 
+const flyoutContextValue = {} as unknown as ExpandableFlyoutContext;
+
 const renderHeader = (contextValue: RightPanelContext) =>
   render(
-    <MockAssistantProvider>
-      <RightPanelContext.Provider value={contextValue}>
-        <HeaderTitle />
-      </RightPanelContext.Provider>
-    </MockAssistantProvider>
+    <TestProvidersComponent>
+      <ExpandableFlyoutContext.Provider value={flyoutContextValue}>
+        <RightPanelContext.Provider value={contextValue}>
+          <HeaderTitle />
+        </RightPanelContext.Provider>
+      </ExpandableFlyoutContext.Provider>
+    </TestProvidersComponent>
   );
 
 describe('<HeaderTitle />', () => {
diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/header_title.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/header_title.tsx
index 0dea8c76f64cb..810df9ee67bab 100644
--- a/x-pack/plugins/security_solution/public/flyout/right/components/header_title.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/right/components/header_title.tsx
@@ -10,6 +10,7 @@ import React, { memo } from 'react';
 import { NewChatById } from '@kbn/elastic-assistant';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { isEmpty } from 'lodash';
+import { DocumentStatus } from './status';
 import { useAssistant } from '../hooks/use_assistant';
 import {
   ALERT_SUMMARY_CONVERSATION_ID,
@@ -67,10 +68,17 @@ export const HeaderTitle: FC = memo(() => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiTitle>
-      <EuiSpacer size="m" />
-      {timestamp && <PreferenceFormattedDate value={new Date(timestamp)} />}
-      <EuiSpacer size="m" />
-      <EuiFlexGroup direction="row" gutterSize="l">
+      <EuiSpacer size="xs" />
+      <EuiFlexGroup direction="row" gutterSize="m">
+        <EuiFlexItem grow={false}>
+          <DocumentStatus />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {timestamp && <PreferenceFormattedDate value={new Date(timestamp)} />}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="xs" />
+      <EuiFlexGroup direction="row" gutterSize="m">
         <EuiFlexItem grow={false}>
           <DocumentSeverity />
         </EuiFlexItem>
diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/status.stories.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/status.stories.tsx
new file mode 100644
index 0000000000000..5de5bd7cd3625
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/flyout/right/components/status.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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 type { Story } from '@storybook/react';
+import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
+import { StorybookProviders } from '../../../common/mock/storybook_providers';
+import { DocumentStatus } from './status';
+import { RightPanelContext } from '../context';
+import { mockBrowserFields, mockDataFormattedForFieldBrowser } from '../mocks/mock_context';
+
+export default {
+  component: DocumentStatus,
+  title: 'Flyout/Status',
+};
+
+const flyoutContextValue = {
+  closeFlyout: () => {},
+} as unknown as ExpandableFlyoutContext;
+
+export const Default: Story<void> = () => {
+  const contextValue = {
+    eventId: 'eventId',
+    browserFields: mockBrowserFields,
+    dataFormattedForFieldBrowser: mockDataFormattedForFieldBrowser,
+    scopeId: 'alerts-page',
+  } as unknown as RightPanelContext;
+
+  return (
+    <StorybookProviders>
+      <ExpandableFlyoutContext.Provider value={flyoutContextValue}>
+        <RightPanelContext.Provider value={contextValue}>
+          <DocumentStatus />
+        </RightPanelContext.Provider>
+      </ExpandableFlyoutContext.Provider>
+    </StorybookProviders>
+  );
+};
+
+export const Empty: Story<void> = () => {
+  const contextValue = {
+    eventId: 'eventId',
+    browserFields: {},
+    dataFormattedForFieldBrowser: [],
+    scopeId: 'scopeId',
+  } as unknown as RightPanelContext;
+
+  return (
+    <ExpandableFlyoutContext.Provider value={flyoutContextValue}>
+      <RightPanelContext.Provider value={contextValue}>
+        <DocumentStatus />
+      </RightPanelContext.Provider>
+    </ExpandableFlyoutContext.Provider>
+  );
+};
diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/status.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/status.test.tsx
new file mode 100644
index 0000000000000..379181d9691e7
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/flyout/right/components/status.test.tsx
@@ -0,0 +1,75 @@
+/*
+ * 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 { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context';
+import { RightPanelContext } from '../context';
+import { DocumentStatus } from './status';
+import { mockDataFormattedForFieldBrowser } from '../mocks/mock_context';
+import { TestProviders } from '../../../common/mock';
+import { useAlertsActions } from '../../../detections/components/alerts_table/timeline_actions/use_alerts_actions';
+import { FLYOUT_HEADER_STATUS_BUTTON_TEST_ID } from './test_ids';
+
+jest.mock('../../../detections/components/alerts_table/timeline_actions/use_alerts_actions');
+
+const flyoutContextValue = {
+  closeFlyout: jest.fn(),
+} as unknown as ExpandableFlyoutContext;
+
+const renderStatus = (contextValue: RightPanelContext) =>
+  render(
+    <TestProviders>
+      <ExpandableFlyoutContext.Provider value={flyoutContextValue}>
+        <RightPanelContext.Provider value={contextValue}>
+          <DocumentStatus />
+        </RightPanelContext.Provider>
+      </ExpandableFlyoutContext.Provider>
+    </TestProviders>
+  );
+
+const actionItem = {
+  key: 'key',
+  name: 'name',
+  'data-test-subj': 'data-test-subj',
+};
+
+(useAlertsActions as jest.Mock).mockReturnValue({
+  actionItems: [actionItem],
+});
+
+describe('<DocumentStatus />', () => {
+  it('should render status information', () => {
+    const contextValue = {
+      eventId: 'eventId',
+      browserFields: {},
+      dataFormattedForFieldBrowser: mockDataFormattedForFieldBrowser,
+      scopeId: 'scopeId',
+    } as unknown as RightPanelContext;
+
+    const { getByTestId, getByText } = renderStatus(contextValue);
+
+    expect(getByTestId(FLYOUT_HEADER_STATUS_BUTTON_TEST_ID)).toBeInTheDocument();
+    expect(getByText('open')).toBeInTheDocument();
+
+    getByTestId(FLYOUT_HEADER_STATUS_BUTTON_TEST_ID).click();
+    expect(getByTestId('data-test-subj')).toBeInTheDocument();
+  });
+
+  it('should render empty component', () => {
+    const contextValue = {
+      eventId: 'eventId',
+      browserFields: {},
+      dataFormattedForFieldBrowser: [],
+      scopeId: 'scopeId',
+    } as unknown as RightPanelContext;
+
+    const { container } = renderStatus(contextValue);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/status.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/status.tsx
new file mode 100644
index 0000000000000..b71bbfbdcf3af
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/flyout/right/components/status.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 { FC } from 'react';
+import React, { useMemo } from 'react';
+import { find } from 'lodash/fp';
+import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
+import type {
+  EnrichedFieldInfo,
+  EnrichedFieldInfoWithValues,
+} from '../../../common/components/event_details/types';
+import { SIGNAL_STATUS_FIELD_NAME } from '../../../timelines/components/timeline/body/renderers/constants';
+import { StatusPopoverButton } from '../../../common/components/event_details/overview/status_popover_button';
+import { useRightPanelContext } from '../context';
+import { getEnrichedFieldInfo } from '../../../common/components/event_details/helpers';
+
+/**
+ * Checks if the field info has data to convert EnrichedFieldInfo into EnrichedFieldInfoWithValues
+ */
+function hasData(fieldInfo?: EnrichedFieldInfo): fieldInfo is EnrichedFieldInfoWithValues {
+  return !!fieldInfo && Array.isArray(fieldInfo.values);
+}
+
+/**
+ * Document details status displayed in flyout right section header
+ */
+export const DocumentStatus: FC = () => {
+  const { closeFlyout } = useExpandableFlyoutContext();
+  const { eventId, browserFields, dataFormattedForFieldBrowser, scopeId } = useRightPanelContext();
+
+  const statusData = useMemo(() => {
+    const item = find(
+      { field: SIGNAL_STATUS_FIELD_NAME, category: 'kibana' },
+      dataFormattedForFieldBrowser
+    );
+    return (
+      item &&
+      getEnrichedFieldInfo({
+        eventId,
+        contextId: scopeId,
+        scopeId,
+        browserFields: browserFields || {},
+        item,
+      })
+    );
+  }, [browserFields, dataFormattedForFieldBrowser, eventId, scopeId]);
+
+  if (!statusData || !hasData(statusData)) return null;
+
+  return (
+    <StatusPopoverButton
+      eventId={eventId}
+      contextId={scopeId}
+      enrichedFieldInfo={statusData}
+      scopeId={scopeId}
+      handleOnEventClosed={closeFlyout}
+    />
+  );
+};
+
+DocumentStatus.displayName = 'DocumentStatus';
diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts b/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts
index 2740ae4b160f4..6c5b8a12e030c 100644
--- a/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts
+++ b/x-pack/plugins/security_solution/public/flyout/right/components/test_ids.ts
@@ -14,6 +14,7 @@ export const EXPAND_DETAILS_BUTTON_TEST_ID =
   'securitySolutionDocumentDetailsFlyoutHeaderExpandDetailButton';
 export const COLLAPSE_DETAILS_BUTTON_TEST_ID =
   'securitySolutionDocumentDetailsFlyoutHeaderCollapseDetailButton';
+export const FLYOUT_HEADER_STATUS_BUTTON_TEST_ID = 'rule-status-badge';
 export const FLYOUT_HEADER_SEVERITY_TITLE_TEST_ID =
   'securitySolutionAlertDetailsFlyoutHeaderSeverityTitle';
 export const FLYOUT_HEADER_SEVERITY_VALUE_TEST_ID = 'severity';
diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts b/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts
index 1d503f082de67..950d2e848dfc8 100644
--- a/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts
+++ b/x-pack/plugins/security_solution/public/flyout/right/components/translations.ts
@@ -31,6 +31,13 @@ export const SEVERITY_TITLE = i18n.translate(
   }
 );
 
+export const STATUS_TITLE = i18n.translate(
+  'xpack.securitySolution.flyout.documentDetails.statusTitle',
+  {
+    defaultMessage: 'Status',
+  }
+);
+
 export const RISK_SCORE_TITLE = i18n.translate(
   'xpack.securitySolution.flyout.documentDetails.riskScoreTitle',
   {
diff --git a/x-pack/plugins/security_solution/public/flyout/right/context.tsx b/x-pack/plugins/security_solution/public/flyout/right/context.tsx
index bb1ac1fd2b7ae..7b12fc3a3a6cb 100644
--- a/x-pack/plugins/security_solution/public/flyout/right/context.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/right/context.tsx
@@ -77,6 +77,8 @@ export const RightPanelProvider = ({
   children,
 }: RightPanelProviderProps) => {
   const currentSpaceId = useSpaceId();
+  // TODO Replace getAlertIndexAlias way to retrieving the eventIndex with the GET /_alias
+  //  https://github.com/elastic/kibana/issues/113063
   const eventIndex = indexName ? getAlertIndexAlias(indexName, currentSpaceId) ?? indexName : '';
   const [{ pageName }] = useRouteSpy();
   const sourcererScope =
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/rule_status.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/rule_status.tsx
index ef205eb00be45..a3a2bb17cdd43 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/rule_status.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/rule_status.tsx
@@ -57,6 +57,7 @@ const RuleStatusComponent: React.FC<Props> = ({
       onClickAriaLabel={onClickAriaLabel}
       iconType={iconType}
       iconSide={iconSide}
+      data-test-subj="rule-status-badge"
     >
       {value}
     </StyledEuiBadge>