[Security Solution] expanded flyout (elastic#150240)

.github/CODEOWNERS

@@ -337,6 +337,7 @@ x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin
 src/plugins/event_annotation @elastic/kibana-visualizations
 x-pack/test/plugin_api_integration/plugins/event_log @elastic/response-ops
 x-pack/plugins/event_log @elastic/response-ops
+packages/kbn-expandable-flyout @elastic/security-threat-hunting-investigations
 packages/kbn-expect @elastic/kibana-operations
 x-pack/examples/exploratory_view_example @elastic/uptime
 src/plugins/expression_error @elastic/kibana-presentation

.i18nrc.json

@@ -25,6 +25,7 @@
     "embeddableExamples": "examples/embeddable_examples",
     "esQuery": "packages/kbn-es-query/src",
     "esUi": "src/plugins/es_ui_shared",
+    "expandableFlyout": "packages/kbn-expandable-flyout",
     "expressionError": "src/plugins/expression_error",
     "expressionGauge": "src/plugins/chart_expressions/expression_gauge",
     "expressionHeatmap": "src/plugins/chart_expressions/expression_heatmap",

package.json

@@ -370,6 +370,7 @@
     "@kbn/event-annotation-plugin": "link:src/plugins/event_annotation",
     "@kbn/event-log-fixture-plugin": "link:x-pack/test/plugin_api_integration/plugins/event_log",
     "@kbn/event-log-plugin": "link:x-pack/plugins/event_log",
+    "@kbn/expandable-flyout": "link:packages/kbn-expandable-flyout",
     "@kbn/exploratory-view-example-plugin": "link:x-pack/examples/exploratory_view_example",
     "@kbn/expression-error-plugin": "link:src/plugins/expression_error",
     "@kbn/expression-gauge-plugin": "link:src/plugins/chart_expressions/expression_gauge",

packages/kbn-expandable-flyout/README.md

@@ -0,0 +1,66 @@
+# @kbn/expandable-flyout
+
+## Purpose
+
+This package offers an expandable flyout UI component and a way to manage the data displayed in it. The component leverages the [EuiFlyout](https://github.com/elastic/eui/tree/main/src/components/flyout) from the EUI library.
+
+The flyout is composed of 3 sections:
+- a right section (primary section) that opens first
+- a left wider section to show more details
+- a preview section, that overlays the right section. This preview section can display multiple panels one after the other and displays a `Back` button
+
+At the moment, displaying more than one flyout within the same plugin might be complicated, unless there are in difference areas in the codebase and the contexts don't conflict with each other.
+
+## What the package offers
+
+The ExpandableFlyout [React component](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/index) that renders the UI.
+
+The ExpandableFlyout [React context](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/context) that exposes the following api:
+- **openFlyout**: open the flyout with a set of panels
+- **openFlyoutRightPanel**: open a right panel
+- **openFlyoutLeftPanel**: open a left panel
+- **openFlyoutPreviewPanel**: open a preview panel
+- **closeFlyoutRightPanel**: close the right panel
+- **closeFlyoutLeftPanel**: close the left panel
+- **closeFlyoutPreviewPanel**: close the preview panels
+- **previousFlyoutPreviewPanel**: navigate to the previous preview panel
+- **closeFlyout**: close the flyout
+
+To retrieve the flyout's layout (left, right and preview panels), you can use the **panels** from the same [React context](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/context);
+
+- To have more details about how these above api work, see the code documentation [here](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/utils/helpers).
+
+## Usage
+
+To use the expandable flyout in your plugin, first you need wrap your code with the context provider at a high enough level as follows:
+```typescript jsx
+<ExpandableFlyoutProvider>
+
+  ...
+
+</ExpandableFlyoutProvider>
+```
+
+Then use the React UI component where you need:
+
+```typescript jsx
+<ExpandableFlyout registeredPanels={myPanels} />
+```
+where `myPanels` is a list of all the panels that can be rendered in the flyout (see interface [here](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/index)).
+
+
+## Terminology
+
+### Section
+
+One of the 3 areas of the flyout (left, right or preview).
+
+### Panel
+
+A set of properties defining what's displayed in one of the flyout section.
+
+## Future work
+
+- currently the panels are aware of their width. This should be changed and the width of the left, right and preview sections should be handled by the flyout itself
+- add the feature to save the flyout state (layout) to the url
+- introduce the notion of scope to be able to handle more than one flyout per plugin??

packages/kbn-expandable-flyout/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { ExpandableFlyout } from './src';
+export { ExpandableFlyoutProvider, useExpandableFlyoutContext } from './src/context';
+
+export type { ExpandableFlyoutProps } from './src';
+export type { FlyoutPanel } from './src/types';

packages/kbn-expandable-flyout/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-expandable-flyout'],
+};

packages/kbn-expandable-flyout/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/expandable-flyout",
+  "owner": "@elastic/security-threat-hunting-investigations"
+}

packages/kbn-expandable-flyout/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/expandable-flyout",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-expandable-flyout/src/actions.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FlyoutPanel } from './types';
+
+export enum ActionType {
+  openFlyout = 'open_flyout',
+  openRightPanel = 'open_right_panel',
+  openLeftPanel = 'open_left_panel',
+  openPreviewPanel = 'open_preview_panel',
+  closeRightPanel = 'close_right_panel',
+  closeLeftPanel = 'close_left_panel',
+  closePreviewPanel = 'close_preview_panel',
+  previousPreviewPanel = 'previous_preview_panel',
+  closeFlyout = 'close_flyout',
+}
+
+export type Action =
+  | {
+      type: ActionType.openFlyout;
+      payload: {
+        right?: FlyoutPanel;
+        left?: FlyoutPanel;
+        preview?: FlyoutPanel;
+      };
+    }
+  | {
+      type: ActionType.openRightPanel;
+      payload: FlyoutPanel;
+    }
+  | {
+      type: ActionType.openLeftPanel;
+      payload: FlyoutPanel;
+    }
+  | {
+      type: ActionType.openPreviewPanel;
+      payload: FlyoutPanel;
+    }
+  | {
+      type: ActionType.closeRightPanel;
+    }
+  | {
+      type: ActionType.closeLeftPanel;
+    }
+  | {
+      type: ActionType.closePreviewPanel;
+    }
+  | {
+      type: ActionType.previousPreviewPanel;
+    }
+  | {
+      type: ActionType.closeFlyout;
+    };

packages/kbn-expandable-flyout/src/components/left_section.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import { LEFT_SECTION } from './test_ids';
+
+interface LeftSectionProps {
+  /**
+   * Component to be rendered
+   */
+  component: React.ReactElement;
+  /**
+   * Width used when rendering the panel
+   */
+  width: number;
+}
+
+/**
+ * Left section of the expanded flyout rendering a panel
+ */
+export const LeftSection: React.FC<LeftSectionProps> = ({ component, width }: LeftSectionProps) => {
+  return (
+    <EuiFlexItem grow data-test-subj={LEFT_SECTION}>
+      <EuiFlexGroup direction="column" style={{ maxWidth: width, width: 'auto' }}>
+        {component}
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
+
+LeftSection.displayName = 'LeftSection';

packages/kbn-expandable-flyout/src/components/preview_section.test.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PreviewSection } from './preview_section';
+import { PREVIEW_SECTION_BACK_BUTTON, PREVIEW_SECTION_CLOSE_BUTTON } from './test_ids';
+import { ExpandableFlyoutContext } from '../context';
+
+describe('PreviewSection', () => {
+  const context: ExpandableFlyoutContext = {
+    panels: {
+      right: {},
+      left: {},
+      preview: [
+        {
+          id: 'key',
+        },
+      ],
+    },
+  } as unknown as ExpandableFlyoutContext;
+
+  it('should render close button in header', () => {
+    const component = <div>{'component'}</div>;
+    const width = 500;
+    const showBackButton = false;
+
+    const { getByTestId } = render(
+      <ExpandableFlyoutContext.Provider value={context}>
+        <PreviewSection component={component} width={width} showBackButton={showBackButton} />
+      </ExpandableFlyoutContext.Provider>
+    );
+
+    expect(getByTestId(PREVIEW_SECTION_CLOSE_BUTTON)).toBeInTheDocument();
+  });
+
+  it('should render back button in header', () => {
+    const component = <div>{'component'}</div>;
+    const width = 500;
+    const showBackButton = true;
+
+    const { getByTestId } = render(
+      <ExpandableFlyoutContext.Provider value={context}>
+        <PreviewSection component={component} width={width} showBackButton={showBackButton} />
+      </ExpandableFlyoutContext.Provider>
+    );
+
+    expect(getByTestId(PREVIEW_SECTION_BACK_BUTTON)).toBeInTheDocument();
+  });
+});