Skip to content

Commit 324909f

Browse files
PhilippeObertiPhilippeOberti
committed
[Security Solution ] security solution expanded flyout
- feature flag in security_solution plugin - new kbn-expandable-flyout package - skeleton of the expanded flyout with left, right and preview panels
1 parent 3e5a9ab commit 324909f

29 files changed

Lines changed: 1504 additions & 42 deletions

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,7 @@ x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin
337337
src/plugins/event_annotation @elastic/kibana-visualizations
338338
x-pack/test/plugin_api_integration/plugins/event_log @elastic/response-ops
339339
x-pack/plugins/event_log @elastic/response-ops
340+
packages/kbn-expandable-flyout @elastic/security-threat-hunting-investigations
340341
packages/kbn-expect @elastic/kibana-operations
341342
x-pack/examples/exploratory_view_example @elastic/uptime
342343
src/plugins/expression_error @elastic/kibana-presentation

‎.i18nrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"embeddableExamples": "examples/embeddable_examples",
2626
"esQuery": "packages/kbn-es-query/src",
2727
"esUi": "src/plugins/es_ui_shared",
28+
"expandableFlyout": "packages/kbn-expandable-flyout",
2829
"expressionError": "src/plugins/expression_error",
2930
"expressionGauge": "src/plugins/chart_expressions/expression_gauge",
3031
"expressionHeatmap": "src/plugins/chart_expressions/expression_heatmap",

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,7 @@
370370
"@kbn/event-annotation-plugin": "link:src/plugins/event_annotation",
371371
"@kbn/event-log-fixture-plugin": "link:x-pack/test/plugin_api_integration/plugins/event_log",
372372
"@kbn/event-log-plugin": "link:x-pack/plugins/event_log",
373+
"@kbn/expandable-flyout": "link:packages/kbn-expandable-flyout",
373374
"@kbn/exploratory-view-example-plugin": "link:x-pack/examples/exploratory_view_example",
374375
"@kbn/expression-error-plugin": "link:src/plugins/expression_error",
375376
"@kbn/expression-gauge-plugin": "link:src/plugins/chart_expressions/expression_gauge",

‎packages/kbn-expandable-flyout/README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# @kbn/expandable-flyout
2+
3+
## Purpose
4+
5+
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.
6+
7+
The flyout is composed of 3 sections:
8+
- a right section (primary section) that opens first
9+
- a left wider section to show more details
10+
- a preview section, that overlays the right section. This preview section can display multiple panels one after the other and displays a `Back` button
11+
12+
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.
13+
14+
## What the package offers
15+
16+
The ExpandableFlyout [React component](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/index) that renders the UI.
17+
18+
The ExpandableFlyout [React context](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout/src/components/context) that exposes the following api:
19+
- **openFlyout**: open the flyout with a set of panels
20+
- **openFlyoutRightPanel**: open a right panel
21+
- **openFlyoutLeftPanel**: open a left panel
22+
- **openFlyoutPreviewPanel**: open a preview panel
23+
- **closeFlyoutRightPanel**: close the right panel
24+
- **closeFlyoutLeftPanel**: close the left panel
25+
- **closeFlyoutPreviewPanel**: close the preview panels
26+
- **previousFlyoutPreviewPanel**: navigate to the previous preview panel
27+
- **closeFlyout**: close the flyout
28+
29+
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);
30+
31+
- 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).
32+
33+
## Usage
34+
35+
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:
36+
```typescript jsx
37+
<ExpandableFlyoutProvider>
38+
39+
...
40+
41+
</ExpandableFlyoutProvider>
42+
```
43+
44+
Then use the React UI component where you need:
45+
46+
```typescript jsx
47+
<ExpandableFlyout registeredPanels={myPanels} />
48+
```
49+
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)).
50+
51+
52+
## Terminology
53+
54+
### Section
55+
56+
One of the 3 areas of the flyout (left, right or preview).
57+
58+
### Panel
59+
60+
A set of properties defining what's displayed in one of the flyout section.
61+
62+
## Future work
63+
64+
- 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
65+
- add the feature to save the flyout state (layout) to the url
66+
- introduce the notion of scope to be able to handle more than one flyout per plugin??

‎packages/kbn-expandable-flyout/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
export { ExpandableFlyout } from './src';
10+
export { ExpandableFlyoutProvider, useExpandableFlyoutContext } from './src/context';
11+
12+
export type { ExpandableFlyoutProps } from './src';
13+
export type { FlyoutPanel } from './src/types';

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
module.exports = {
10+
preset: '@kbn/test',
11+
rootDir: '../..',
12+
roots: ['<rootDir>/packages/kbn-expandable-flyout'],
13+
};

‎packages/kbn-expandable-flyout/kibana.jsonc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"type": "shared-common",
3+
"id": "@kbn/expandable-flyout",
4+
"owner": "@elastic/security-threat-hunting-investigations"
5+
}

‎packages/kbn-expandable-flyout/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "@kbn/expandable-flyout",
3+
"private": true,
4+
"version": "1.0.0",
5+
"license": "SSPL-1.0 OR Elastic License 2.0"
6+
}

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { FlyoutPanel } from './types';
10+
11+
export enum ActionType {
12+
openFlyout = 'open_flyout',
13+
openRightPanel = 'open_right_panel',
14+
openLeftPanel = 'open_left_panel',
15+
openPreviewPanel = 'open_preview_panel',
16+
closeRightPanel = 'close_right_panel',
17+
closeLeftPanel = 'close_left_panel',
18+
closePreviewPanel = 'close_preview_panel',
19+
previousPreviewPanel = 'previous_preview_panel',
20+
closeFlyout = 'close_flyout',
21+
}
22+
23+
export type Action =
24+
| {
25+
type: ActionType.openFlyout;
26+
payload: {
27+
right?: FlyoutPanel;
28+
left?: FlyoutPanel;
29+
preview?: FlyoutPanel;
30+
};
31+
}
32+
| {
33+
type: ActionType.openRightPanel;
34+
payload: FlyoutPanel;
35+
}
36+
| {
37+
type: ActionType.openLeftPanel;
38+
payload: FlyoutPanel;
39+
}
40+
| {
41+
type: ActionType.openPreviewPanel;
42+
payload: FlyoutPanel;
43+
}
44+
| {
45+
type: ActionType.closeRightPanel;
46+
}
47+
| {
48+
type: ActionType.closeLeftPanel;
49+
}
50+
| {
51+
type: ActionType.closePreviewPanel;
52+
}
53+
| {
54+
type: ActionType.previousPreviewPanel;
55+
}
56+
| {
57+
type: ActionType.closeFlyout;
58+
};

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
10+
import React from 'react';
11+
import { LEFT_SECTION } from './test_ids';
12+
13+
interface LeftSectionProps {
14+
/**
15+
* Component to be rendered
16+
*/
17+
component: React.ReactElement;
18+
/**
19+
* Width used when rendering the panel
20+
*/
21+
width: number;
22+
}
23+
24+
/**
25+
* Left section of the expanded flyout rendering a panel
26+
*/
27+
export const LeftSection: React.FC<LeftSectionProps> = ({ component, width }: LeftSectionProps) => {
28+
return (
29+
<EuiFlexItem grow data-test-subj={LEFT_SECTION}>
30+
<EuiFlexGroup direction="column" style={{ maxWidth: width, width: 'auto' }}>
31+
{component}
32+
</EuiFlexGroup>
33+
</EuiFlexItem>
34+
);
35+
};
36+
37+
LeftSection.displayName = 'LeftSection';

0 commit comments

Comments
 (0)