Skip to content

Fix warning in @kbn/grouping's GroupSelector component#215225

Merged
albertoblaz merged 1 commit intoelastic:mainfrom
albertoblaz:fix-grouping-warning
Mar 20, 2025
Merged

Fix warning in @kbn/grouping's GroupSelector component#215225
albertoblaz merged 1 commit intoelastic:mainfrom
albertoblaz:fix-grouping-warning

Conversation

@albertoblaz
Copy link
Contributor

@albertoblaz albertoblaz commented Mar 19, 2025 •
edited by kibanamachine
Loading

Summary

When a user clicks on the grouping's menu trigger to show all available grouping options, React throws this warning:

React does not recognize the `euiTheme` prop on a DOM element.

Reason is the <StyledContextMenu> component is a mere <div> element wrapped by @emotion to inject some styling. The rendered <div> that results from it can only receive HTML-compliant attributes as props. However, the euiTheme is an object that contains many fields, and some of them are not valid. And so, React throws a warning to address it.

Solution was to propagate just the border styling instead of the whole euiTheme object.

Screenshot

Screenshot 2025-03-19 at 18 37 18

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

  • Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  • Documentation was added for features that require explanation or tutorials
  • Unit or functional tests were updated or added to match the most common scenarios
  • If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
  • This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
  • Flaky Test Runner was used on any tests changed
  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

Identify risks

Very minor risk of not applying the correct border styling to the grouping's menu trigger.

@albertoblaz albertoblaz added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:Cloud Security Cloud Security team related labels Mar 19, 2025
@albertoblaz albertoblaz self-assigned this Mar 19, 2025
@albertoblaz albertoblaz force-pushed the fix-grouping-warning branch from 592b6d1 to dc7fdf8 Compare March 20, 2025 09:40
@elasticmachine
Copy link
Contributor

elasticmachine commented Mar 20, 2025

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
cloudSecurityPosture 488.8KB 488.8KB -4.0B
observability 1.3MB 1.3MB -4.0B
securitySolution 8.9MB 8.9MB -4.0B
total -12.0B

History

cc @albertoblaz

@albertoblaz albertoblaz marked this pull request as ready for review March 20, 2025 12:08
@albertoblaz albertoblaz requested a review from a team as a code owner March 20, 2025 12:08
@elasticmachine
Copy link
Contributor

elasticmachine commented Mar 20, 2025

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

umbopepato
umbopepato approved these changes Mar 20, 2025
View reviewed changes
Copy link
Member

@umbopepato umbopepato left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks @albertoblaz for fixing this 😊

@albertoblaz albertoblaz merged commit 19f057b into elastic:main Mar 20, 2025
9 checks passed
@albertoblaz albertoblaz deleted the fix-grouping-warning branch March 20, 2025 15:02
@cnasikas cnasikas added backport:version Backport to applied version labels v8.19.0 and removed backport:skip This PR does not require backporting labels Mar 20, 2025
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 20, 2025

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/13972557888

@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 20, 2025

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/13972557829

@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 20, 2025

💔 All backports failed

Status Branch Result
❌ 8.x Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 215225

Questions ?

Please refer to the Backport tool documentation

1 similar comment
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 20, 2025

💔 All backports failed

Status Branch Result
❌ 8.x Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 215225

Questions ?

Please refer to the Backport tool documentation

This was referenced Mar 20, 2025
Merged
Merged
@cnasikas cnasikas added backport:skip This PR does not require backporting and removed backport:version Backport to applied version labels v8.19.0 labels Mar 20, 2025
clintandrewhall pushed a commit to clintandrewhall/kibana that referenced this pull request Mar 20, 2025
@albertoblaz @clintandrewhall
Fix warning in @kbn/grouping's GroupSelector component (elastic#215225)
5531655 
## Summary

When a user clicks on the grouping's menu trigger to show all available
grouping options, React throws this warning:

```
React does not recognize the `euiTheme` prop on a DOM element.
```

Reason is the `<StyledContextMenu>` component is a mere `<div>` element
wrapped by `@emotion` to inject some styling. The rendered `<div>` that
results from it can only receive HTML-compliant attributes as props.
However, the `euiTheme` is an object that contains many fields, and some
of them are not valid. And so, React throws a warning to address it.

Solution was to propagate just the border styling instead of the whole
`euiTheme` object.

### Screenshot

<img width="312" alt="Screenshot 2025-03-19 at 18 37 18"
src="https://github.com/user-attachments/assets/bf4c25d3-ed95-41de-8204-0341662aa470"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Very minor risk of not applying the correct border styling to the
grouping's menu trigger.
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Mar 24, 2025
@albertoblaz @JoseLuisGJ
Fix warning in @kbn/grouping's GroupSelector component (elastic#215225)
667187c 
## Summary

When a user clicks on the grouping's menu trigger to show all available
grouping options, React throws this warning:

```
React does not recognize the `euiTheme` prop on a DOM element.
```

Reason is the `<StyledContextMenu>` component is a mere `<div>` element
wrapped by `@emotion` to inject some styling. The rendered `<div>` that
results from it can only receive HTML-compliant attributes as props.
However, the `euiTheme` is an object that contains many fields, and some
of them are not valid. And so, React throws a warning to address it.

Solution was to propagate just the border styling instead of the whole
`euiTheme` object.

### Screenshot

<img width="312" alt="Screenshot 2025-03-19 at 18 37 18"
src="https://github.com/user-attachments/assets/bf4c25d3-ed95-41de-8204-0341662aa470"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Very minor risk of not applying the correct border styling to the
grouping's menu trigger.
cqliu1 pushed a commit to cqliu1/kibana that referenced this pull request Mar 31, 2025
@albertoblaz @cqliu1
Fix warning in @kbn/grouping's GroupSelector component (elastic#215225)
bf8ba3e 
## Summary

When a user clicks on the grouping's menu trigger to show all available
grouping options, React throws this warning:

```
React does not recognize the `euiTheme` prop on a DOM element.
```

Reason is the `<StyledContextMenu>` component is a mere `<div>` element
wrapped by `@emotion` to inject some styling. The rendered `<div>` that
results from it can only receive HTML-compliant attributes as props.
However, the `euiTheme` is an object that contains many fields, and some
of them are not valid. And so, React throws a warning to address it.

Solution was to propagate just the border styling instead of the whole
`euiTheme` object.

### Screenshot

<img width="312" alt="Screenshot 2025-03-19 at 18 37 18"
src="https://github.com/user-attachments/assets/bf4c25d3-ed95-41de-8204-0341662aa470"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Very minor risk of not applying the correct border styling to the
grouping's menu trigger.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@umbopepato umbopepato umbopepato approved these changes

Assignees

@albertoblaz albertoblaz

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:Cloud Security Cloud Security team related v9.1.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@albertoblaz @elasticmachine @kibanamachine @umbopepato @cnasikas