New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Kibana 8.15.0 has a weird `x` in the left bottom corner when switching to `hosts` from another part in o11y. #190220

Closed

philippkahr opened this issue Aug 9, 2024 · 2 comments · Fixed by #191276

Assignees

Labels

bug good first issue Team:obs-ux-infra_services

Contributor

philippkahr commented Aug 9, 2024

Kibana version: 8.15.0
Chrome: Version 129.0.6628.3 (Official Build) dev (arm64)

Go to any part in the O11Y part.
Select Inventory
Select anomaly
Select hosts
You should see a x in the bottom left corner.

Screen.Recording.2024-08-09.at.10.56.48.mov

@roshan-elastic @teresaalvarezsoler

The text was updated successfully, but these errors were encountered:

philippkahr added the bug label

botelastic bot added the needs-team label

dmlemeshko added the Team:obs-ux-infra_services label

Contributor

elasticmachine commented Aug 19, 2024

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

botelastic bot removed the needs-team label

Contributor

crespocarlos commented Aug 19, 2024 •

edited

Loading

It seems like it's the infraHideableReactQueryDevToolsButton element. On prod, the EuiButtonIcon icon is displayed while the ReactQueryDevtools compone isn't, which is correct according to the docs.

To keep the dev tools dismissible, the code needs to check the environment, similar to this

crespocarlos added the good first issue label

jennypavlova self-assigned this

jennypavlova mentioned this issue

[Infra] Fix react query closing x in a non development env #191276

Merged

jennypavlova added a commit that referenced this issue


          [Infra] Fix react query closing x in a non development env (#191276)

746662e

Closes [#190220](#190220)

## Summary

This PR removes the `x` icon used to close the react query dev tools
which appeared in a non-development environment by restricting it to
appear only in development mode.

| before | after |
|-------|-------|
| <img width="1907" alt="image"
src="https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0">
| <img width="1902" alt="image"
src="https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48">
|

In a development environment, the icon stays and works as before: 

<img width="1890" alt="image"
src="https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7">

jennypavlova closed this as completed in #191276

kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue


          [Infra] Fix react query closing x in a non development env (elastic#1…

ef27b1c

…91276)

Closes [elastic#190220](elastic#190220)

## Summary

This PR removes the `x` icon used to close the react query dev tools
which appeared in a non-development environment by restricting it to
appear only in development mode.

| before | after |
|-------|-------|
| <img width="1907" alt="image"
src="https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0">
| <img width="1902" alt="image"
src="https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48">
|

In a development environment, the icon stays and works as before:

<img width="1890" alt="image"
src="https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7">

(cherry picked from commit 746662e)

kibanamachine added a commit that referenced this issue


          [8.15] [Infra] Fix react query closing x in a non development env (#1…

392ed7f

…91276) (#191281)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Infra] Fix react query closing x in a non development env
(#191276)](#191276)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"jennypavlova","email":"dzheni.pavlova@elastic.co"},"sourceCommit":{"committedDate":"2024-08-26T14:36:30Z","message":"[Infra]
Fix react query closing x in a non development env (#191276)\n\nCloses
[#190220](https://github.com/elastic/kibana/issues/190220)\r\n\r\n##
Summary\r\n\r\nThis PR removes the `x` icon used to close the react
query dev tools\r\nwhich appeared in a non-development environment by
restricting it to\r\nappear only in development mode.\r\n\r\n| before |
after |\r\n|-------|-------|\r\n| <img width=\"1907\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0\">\r\n|
<img width=\"1902\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48\">\r\n|\r\n\r\nIn
a development environment, the icon stays and works as before:
\r\n\r\n<img width=\"1890\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7\">","sha":"746662e52d5b983d5279bc51d11a0387ae68fcee","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","ci:project-deploy-observability","Team:obs-ux-infra_services","v8.15.0","v8.16.0","v8.15.1","backport:version"],"title":"[Infra]
Fix react query closing x in a non development
env","number":191276,"url":"https://github.com/elastic/kibana/pull/191276","mergeCommit":{"message":"[Infra]
Fix react query closing x in a non development env (#191276)\n\nCloses
[#190220](https://github.com/elastic/kibana/issues/190220)\r\n\r\n##
Summary\r\n\r\nThis PR removes the `x` icon used to close the react
query dev tools\r\nwhich appeared in a non-development environment by
restricting it to\r\nappear only in development mode.\r\n\r\n| before |
after |\r\n|-------|-------|\r\n| <img width=\"1907\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0\">\r\n|
<img width=\"1902\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48\">\r\n|\r\n\r\nIn
a development environment, the icon stays and works as before:
\r\n\r\n<img width=\"1890\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7\">","sha":"746662e52d5b983d5279bc51d11a0387ae68fcee"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/191276","number":191276,"mergeCommit":{"message":"[Infra]
Fix react query closing x in a non development env (#191276)\n\nCloses
[#190220](https://github.com/elastic/kibana/issues/190220)\r\n\r\n##
Summary\r\n\r\nThis PR removes the `x` icon used to close the react
query dev tools\r\nwhich appeared in a non-development environment by
restricting it to\r\nappear only in development mode.\r\n\r\n| before |
after |\r\n|-------|-------|\r\n| <img width=\"1907\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0\">\r\n|
<img width=\"1902\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48\">\r\n|\r\n\r\nIn
a development environment, the icon stays and works as before:
\r\n\r\n<img width=\"1890\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7\">","sha":"746662e52d5b983d5279bc51d11a0387ae68fcee"}}]}]
BACKPORT-->

Co-authored-by: jennypavlova <dzheni.pavlova@elastic.co>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment