Skip to content

[DataView] Fix flyout styles#228078

Merged
jughosta merged 3 commits intoelastic:mainfrom
jughosta:227951-fix-data-view-flyout
Jul 17, 2025
Merged

[DataView] Fix flyout styles#228078
jughosta merged 3 commits intoelastic:mainfrom
jughosta:227951-fix-data-view-flyout

Conversation

@jughosta
Copy link
Contributor

@jughosta jughosta commented Jul 15, 2025

Summary

Before:
Screenshot 2025-07-15 at 11 09 01

After:
Screenshot 2025-07-16 at 11 13 25

Checklist

  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
  • Review the backport guidelines and apply applicable backport:* labels.
@jughosta jughosta self-assigned this Jul 15, 2025
defaultVisible={editData?.getAllowHidden()}
/>
</Form>
</FlyoutPanels.Content>
Copy link
Contributor Author

@jughosta jughosta Jul 16, 2025

Choose a reason for hiding this comment

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

Wrapped the title and the form with FlyoutPanels.Content. Excluding the footer.

@jughosta jughosta added Feature:Data Views Data Views code and UI - index patterns before 8.0 Team:DataDiscovery Discover, search (data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. t// backport:version Backport to applied version labels v9.1.0 v8.19.0 v9.2.0 release_note:fix labels Jul 16, 2025
@jughosta jughosta marked this pull request as ready for review July 16, 2025 09:21
@jughosta jughosta requested a review from a team as a code owner July 16, 2025 09:21
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@elasticmachine
Copy link
Contributor

💚 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
dataViewEditor 42.3KB 42.2KB -165.0B

History

cc @jughosta

Copy link
Contributor

@davismcphee davismcphee 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 for fixing it!

The only thing I noticed is that on small screen sizes, the second panel is completely hidden now. But I checked an older version, and even then it was only partially visible and unable to scroll fully into view, so it's not really much worse now:

@jughosta
Copy link
Contributor Author

jughosta commented Jul 17, 2025

The only thing I noticed is that on small screen sizes, the second panel is completely hidden now.

Seems the same on main. We can address it separately.

@jughosta jughosta merged commit 74c5788 into elastic:main Jul 17, 2025
26 checks passed
@jughosta jughosta deleted the 227951-fix-data-view-flyout branch July 17, 2025 07:23
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.19, 9.1

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

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 17, 2025
- Closes elastic#227951

## Summary

Before:
<img width="1508" height="792" alt="Screenshot 2025-07-15 at 11 09 01"
src="https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a"
/>

After:
<img width="1719" height="810" alt="Screenshot 2025-07-16 at 11 13 25"
src="https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746"
/>

### Checklist

- [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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

(cherry picked from commit 74c5788)
@kibanamachine
Copy link
Contributor

💔 Some backports could not be created

Status Branch Result
8.19 Backport failed because of merge conflicts
9.1

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 228078

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Jul 17, 2025
# Backport

This will backport the following commits from `main` to `9.1`:
- [[DataView] Fix flyout styles
(#228078)](#228078)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Julia
Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2025-07-17T07:23:41Z","message":"[DataView]
Fix flyout styles (#228078)\n\n- Closes
https://github.com/elastic/kibana/issues/227951\n\n##
Summary\n\nBefore:\n<img width=\"1508\" height=\"792\" alt=\"Screenshot
2025-07-15 at 11 09
01\"\nsrc=\"https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a\"\n/>\n\nAfter:\n<img
width=\"1719\" height=\"810\" alt=\"Screenshot 2025-07-16 at 11 13
25\"\nsrc=\"https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746\"\n/>\n\n\n\n\n###
Checklist\n\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"74c5788a5d0f69582e633005f55a588f8f03a6bf","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Feature:Data
Views","Team:DataDiscovery","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[DataView]
Fix flyout
styles","number":228078,"url":"https://github.com/elastic/kibana/pull/228078","mergeCommit":{"message":"[DataView]
Fix flyout styles (#228078)\n\n- Closes
https://github.com/elastic/kibana/issues/227951\n\n##
Summary\n\nBefore:\n<img width=\"1508\" height=\"792\" alt=\"Screenshot
2025-07-15 at 11 09
01\"\nsrc=\"https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a\"\n/>\n\nAfter:\n<img
width=\"1719\" height=\"810\" alt=\"Screenshot 2025-07-16 at 11 13
25\"\nsrc=\"https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746\"\n/>\n\n\n\n\n###
Checklist\n\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"74c5788a5d0f69582e633005f55a588f8f03a6bf"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/228078","number":228078,"mergeCommit":{"message":"[DataView]
Fix flyout styles (#228078)\n\n- Closes
https://github.com/elastic/kibana/issues/227951\n\n##
Summary\n\nBefore:\n<img width=\"1508\" height=\"792\" alt=\"Screenshot
2025-07-15 at 11 09
01\"\nsrc=\"https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a\"\n/>\n\nAfter:\n<img
width=\"1719\" height=\"810\" alt=\"Screenshot 2025-07-16 at 11 13
25\"\nsrc=\"https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746\"\n/>\n\n\n\n\n###
Checklist\n\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"74c5788a5d0f69582e633005f55a588f8f03a6bf"}}]}]
BACKPORT-->

Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
@jughosta
Copy link
Contributor Author

💚 All backports created successfully

Status Branch Result
8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

jughosta added a commit to jughosta/kibana that referenced this pull request Jul 20, 2025
- Closes elastic#227951

## Summary

Before:
<img width="1508" height="792" alt="Screenshot 2025-07-15 at 11 09 01"
src="https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a"
/>

After:
<img width="1719" height="810" alt="Screenshot 2025-07-16 at 11 13 25"
src="https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746"
/>

### Checklist

- [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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

(cherry picked from commit 74c5788)

# Conflicts:
#	src/platform/plugins/shared/data_view_editor/public/components/data_view_editor_flyout_content.tsx
#	src/platform/plugins/shared/data_view_editor/public/components/footer/footer.tsx
Bluefinger pushed a commit to Bluefinger/kibana that referenced this pull request Jul 22, 2025
- Closes elastic#227951

## Summary

Before:
<img width="1508" height="792" alt="Screenshot 2025-07-15 at 11 09 01"
src="https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a"
/>

After:
<img width="1719" height="810" alt="Screenshot 2025-07-16 at 11 13 25"
src="https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746"
/>




### Checklist


- [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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.
jughosta added a commit that referenced this pull request Jul 23, 2025
# Backport

This will backport the following commits from `main` to `8.19`:
- [[DataView] Fix flyout styles
(#228078)](#228078)

<!--- Backport version: 10.0.1 -->

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

<!--BACKPORT [{"author":{"name":"Julia
Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2025-07-17T07:23:41Z","message":"[DataView]
Fix flyout styles (#228078)\n\n- Closes
https://github.com/elastic/kibana/issues/227951\n\n##
Summary\n\nBefore:\n<img width=\"1508\" height=\"792\" alt=\"Screenshot
2025-07-15 at 11 09
01\"\nsrc=\"https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a\"\n/>\n\nAfter:\n<img
width=\"1719\" height=\"810\" alt=\"Screenshot 2025-07-16 at 11 13
25\"\nsrc=\"https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746\"\n/>\n\n\n\n\n###
Checklist\n\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"74c5788a5d0f69582e633005f55a588f8f03a6bf","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Feature:Data
Views","Team:DataDiscovery","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[DataView]
Fix flyout
styles","number":228078,"url":"https://github.com/elastic/kibana/pull/228078","mergeCommit":{"message":"[DataView]
Fix flyout styles (#228078)\n\n- Closes
https://github.com/elastic/kibana/issues/227951\n\n##
Summary\n\nBefore:\n<img width=\"1508\" height=\"792\" alt=\"Screenshot
2025-07-15 at 11 09
01\"\nsrc=\"https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a\"\n/>\n\nAfter:\n<img
width=\"1719\" height=\"810\" alt=\"Screenshot 2025-07-16 at 11 13
25\"\nsrc=\"https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746\"\n/>\n\n\n\n\n###
Checklist\n\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"74c5788a5d0f69582e633005f55a588f8f03a6bf"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/228376","number":228376,"state":"MERGED","mergeCommit":{"sha":"ae1da899f7e400bb118bdc42944f65ab228c4e3d","message":"[9.1]
[DataView] Fix flyout styles (#228078) (#228376)\n\n# Backport\n\nThis
will backport the following commits from `main` to `9.1`:\n- [[DataView]
Fix flyout
styles\n(#228078)](https://github.com/elastic/kibana/pull/228078)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Julia Rechkunova
<julia.rechkunova@elastic.co>"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/228078","number":228078,"mergeCommit":{"message":"[DataView]
Fix flyout styles (#228078)\n\n- Closes
https://github.com/elastic/kibana/issues/227951\n\n##
Summary\n\nBefore:\n<img width=\"1508\" height=\"792\" alt=\"Screenshot
2025-07-15 at 11 09
01\"\nsrc=\"https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a\"\n/>\n\nAfter:\n<img
width=\"1719\" height=\"810\" alt=\"Screenshot 2025-07-16 at 11 13
25\"\nsrc=\"https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746\"\n/>\n\n\n\n\n###
Checklist\n\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"74c5788a5d0f69582e633005f55a588f8f03a6bf"}}]}]
BACKPORT-->
kertal pushed a commit to kertal/kibana that referenced this pull request Jul 25, 2025
- Closes elastic#227951

## Summary

Before:
<img width="1508" height="792" alt="Screenshot 2025-07-15 at 11 09 01"
src="https://github.com/user-attachments/assets/4108c6af-0303-46df-8444-cf865c03714a"
/>

After:
<img width="1719" height="810" alt="Screenshot 2025-07-16 at 11 13 25"
src="https://github.com/user-attachments/assets/7e4cfd2d-a37b-492b-ac62-ec8e95d1d746"
/>




### Checklist


- [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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels Feature:Data Views Data Views code and UI - index patterns before 8.0 release_note:fix Team:DataDiscovery Discover, search (data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. t// v8.19.0 v9.1.0 v9.2.0

4 participants