mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
## [Security Solution] Fixes a `Create field` _Data view_ overflow issue
This PR resolves <https://github.com/elastic/kibana/issues/121858> , an issue where the _Data view_ indexes specified in the `Create field` flyover may overflow the flyout header.
<https://github.com/elastic/kibana/issues/121858> was originally reported as a Firefox-only issue, where the Data view indexes were partially obscured via scroll bars in the `Create field` flyout, but per the details below, an overflow issue is present in all supported browsers, effecting both `8.0` and `8.1`, though the layout has changed slightly between those releases.
### Details
<https://github.com/elastic/kibana/issues/121858> was only on reproducible in **Windows 10** (due to scroll bar styling) using Firefox version `95.0.2`. (The same version of Firefox rendered correctly in Firefox on MacOS `12.2`). This screenshot below is from the issue:

_Above: This screenshot from <https://github.com/elastic/kibana/issues/121858> is only reproducible in Windows 10 when running Firefox `95.0.2`_
Note: The layout is slightly different in `main` (Kibana version `8.1`), because the `Create field` flyover includes an additional `Preview` section shown in the screenshot below:

_Above: In `main` / version `8.1`, a `Preview` pane appears in the right side of the `Create field` flyover, negating the scroll bar interaction reported in <https://github.com/elastic/kibana/issues/121858>_
The next section contains steps to reproduce the issue in both `8.0` and `8.1`, using any supported browser.
### Common reproduction steps
The screenshots in the steps below are from Firefox `95.0.2` on MacOS `12.2` running `main`:
1. Navigate to `Security > Alerts`
2. Click the `Fields` button to launch the Fields browser
3. Click the `(+) Create field` button
Expected result:
- The `Create field` flyout is displayed, per the screenshot below:

4. Right click the following flyout text and choose `Inspect` from the Firefox popup menu:
```
Data view: .alerts-security.alerts-default,apm-*-transaction*,auditbeat-*,endgame-*,filebeat-*,logs-*,packetbeat-*,traces-apm*,winlogbeat-*
```
5. Using the Firefox dev tools, keep expanding the tree under the `div` containing the `fieldEditor__flyoutPanel__header` class until the node containing the following text is displayed:
```
.alerts-security.alerts-default,apm-*-transaction*,auditbeat-*,endgame-*,filebeat-*,logs-*,packetbeat-*,traces-apm*,winlogbeat-*
```
per the screenshot below:

Expected result:
- The text in the screenshot above does NOT overflow
6. Edit the text node in the inspector and replace the text in the previous step with the same length string below:
```
01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567
```
**Expected result**
- The edited text above does NOT overflow
**Actual results**
- The text overflows the `Create field` flyout, per (1) in the screenshot below
- Firefox dev tools indicate an `overflow` has occurred, per (2) in the screenshot below

### Desk testing
The following screenshots document the fix, which was desk tested:
- With the default indexes
- With the non-breaking string `01234567890123...`
- On Windows 10 With Firefox using `8.0`, per the original issue reported in <https://github.com/elastic/kibana/issues/121858>
- In `main` / `8.1`
#### `8.0` / Windows 10 / Firefox `95.0.2` / Default indexes

#### `8.0` / Windows 10 / Firefox `95.0.2` / non-breaking string

#### `8.1` / macOS / Chrome `97.0.4692.71` / Default indexes

#### `8.1` / macOS / Chrome `97.0.4692.71` / non-breaking string

#### `8.1` / macOS / Firefox `96.0` / Default indexes

#### `8.1` / macOS / Firefox `96.0` / non-breaking string

#### `8.1` / macOS / Safari `15.2` / Default indexes

#### `8.1` / macOS / Safari `15.2` / non-breaking string

(cherry picked from commit cdd3b67374
)
Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
This commit is contained in:
parent
5117993fbe
commit
e919289138
1 changed files with 1 additions and 0 deletions
|
@ -33,6 +33,7 @@
|
|||
|
||||
&__header {
|
||||
padding: 0 !important;
|
||||
@include euiTextBreakWord;
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue