Skip to content
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

[Dashboard] Add styling to allow clickable TSVB markdown images #147802

Merged
merged 6 commits into from
Jan 9, 2023
Merged

[Dashboard] Add styling to allow clickable TSVB markdown images #147802

merged 6 commits into from
Jan 9, 2023

Conversation

Heenawter
Copy link
Contributor

@Heenawter Heenawter commented Dec 19, 2022 •
edited
Loading

Summary

After upgrading to React 17, the old version of react-grid-layout was no longer compatible and required an upgrade as well. However, this upgrade included a PR that was specific to handling a visual glitch with draggable images without a drag handler - this had the unintended consequence of making clickable images in TSVB markdown only clickable in a small region at the bottom of the image.

This PR fixes this by undoing the changes made in the aforementioned PR specifically for TSVB markdown images.

Videos

Before

Before.mov

After

After.mov

Checklist

For maintainers

@Heenawter Heenawter added Feature:Dashboard Dashboard related features Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas loe:small Small Level of Effort Team:Visualizations Visualization editors, elastic-charts and infrastructure impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. labels Dec 19, 2022
@Heenawter Heenawter self-assigned this Dec 19, 2022
@Heenawter Heenawter added release_note:fix backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) labels Dec 19, 2022
@Heenawter Heenawter force-pushed the fix-markdown-images_2022-12-19 branch from e7ef5f0 to 883797c Compare December 19, 2022 20:26
@Heenawter Heenawter marked this pull request as ready for review December 19, 2022 20:27
@Heenawter Heenawter requested a review from a team as a code owner December 19, 2022 20:27
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

@Heenawter
Copy link
Contributor Author

@elasticmachine merge upstream

@Heenawter Heenawter added the Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. label Jan 3, 2023
@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #9 / alerting api integration security and spaces enabled - Group 2 Alerts alerts eventLog should generate events for alert decrypt errors

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
kibanaReact 208.2KB 208.2KB +40.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @Heenawter

MichaelMarcialis
MichaelMarcialis approved these changes Jan 9, 2023
View reviewed changes
Copy link
Contributor

@MichaelMarcialis MichaelMarcialis left a comment

Choose a reason for hiding this comment

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

LGTM!

@Heenawter Heenawter merged commit eaa9423 into elastic:main Jan 9, 2023
@kibanamachine kibanamachine mentioned this pull request Jan 9, 2023
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jan 9, 2023
@Heenawter
[Dashboard] Add styling to allow clickable TSVB markdown images (elas…
3cc12f4 
…tic#147802)

## Summary

After upgrading to [React
17](elastic#128239), the old version of
`react-grid-layout` was no longer compatible and required an upgrade as
well. However, this upgrade included a
[PR](react-grid-layout/react-grid-layout#1283)
that overcame a visual glitch with images, which made it so that a
clickable image in TSVB markdown was only clickable in a small region at
the bottom of the image.

This PR fixes this by undoing the changes made in the aforementioned
[PR](react-grid-layout/react-grid-layout#1283)
specifically for TSVB markdown images.

### Videos

**Before**

https://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov

**After**

https://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov

### Checklist

- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit eaa9423)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
✅ 8.6

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

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Jan 9, 2023
@kibanamachine @Heenawter
[8.6] [Dashboard] Add styling to allow clickable TSVB markdown images (…
8debf86 
…#147802) (#148586)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Dashboard] Add styling to allow clickable TSVB markdown images
(#147802)](#147802)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-01-09T18:27:56Z","message":"[Dashboard]
Add styling to allow clickable TSVB markdown images (#147802)\n\n##
Summary\r\n\r\nAfter upgrading to
[React\r\n17](#128239), the old
version of\r\n`react-grid-layout` was no longer compatible and required
an upgrade as\r\nwell. However, this upgrade included
a\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nthat
overcame a visual glitch with images, which made it so that
a\r\nclickable image in TSVB markdown was only clickable in a small
region at\r\nthe bottom of the image.\r\n\r\nThis PR fixes this by
undoing the changes made in the
aforementioned\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nspecifically
for TSVB markdown images.\r\n\r\n###
Videos\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eaa9423d51c043a9a6f4640cee26490b6d817dea","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Platform-Design","Feature:Dashboard","release_note:fix","Team:Presentation","loe:hours","Team:Visualizations","impact:low","backport:prev-minor","v8.7.0"],"number":147802,"url":"https://github.com/elastic/kibana/pull/147802","mergeCommit":{"message":"[Dashboard]
Add styling to allow clickable TSVB markdown images (#147802)\n\n##
Summary\r\n\r\nAfter upgrading to
[React\r\n17](#128239), the old
version of\r\n`react-grid-layout` was no longer compatible and required
an upgrade as\r\nwell. However, this upgrade included
a\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nthat
overcame a visual glitch with images, which made it so that
a\r\nclickable image in TSVB markdown was only clickable in a small
region at\r\nthe bottom of the image.\r\n\r\nThis PR fixes this by
undoing the changes made in the
aforementioned\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nspecifically
for TSVB markdown images.\r\n\r\n###
Videos\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eaa9423d51c043a9a6f4640cee26490b6d817dea"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/147802","number":147802,"mergeCommit":{"message":"[Dashboard]
Add styling to allow clickable TSVB markdown images (#147802)\n\n##
Summary\r\n\r\nAfter upgrading to
[React\r\n17](#128239), the old
version of\r\n`react-grid-layout` was no longer compatible and required
an upgrade as\r\nwell. However, this upgrade included
a\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nthat
overcame a visual glitch with images, which made it so that
a\r\nclickable image in TSVB markdown was only clickable in a small
region at\r\nthe bottom of the image.\r\n\r\nThis PR fixes this by
undoing the changes made in the
aforementioned\r\n[PR](https://github.com/react-grid-layout/react-grid-layout/pull/1283)\r\nspecifically
for TSVB markdown images.\r\n\r\n###
Videos\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eaa9423d51c043a9a6f4640cee26490b6d817dea"}}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
@mistic mistic added v8.6.1 and removed v8.6.0 labels Jan 10, 2023
@mistic
Copy link
Member

mistic commented Jan 10, 2023

The backport was not included on v8.6.0 at it happened after the build candidate. Changing the label to v8.6.1.

jennypavlova pushed a commit to jennypavlova/kibana that referenced this pull request Jan 13, 2023
@Heenawter @kibanamachine @jennypavlova
[Dashboard] Add styling to allow clickable TSVB markdown images (elas…
9458af6 
…tic#147802)

## Summary

After upgrading to [React
17](elastic#128239), the old version of
`react-grid-layout` was no longer compatible and required an upgrade as
well. However, this upgrade included a
[PR](react-grid-layout/react-grid-layout#1283)
that overcame a visual glitch with images, which made it so that a
clickable image in TSVB markdown was only clickable in a small region at
the bottom of the image.

This PR fixes this by undoing the changes made in the aforementioned
[PR](react-grid-layout/react-grid-layout#1283)
specifically for TSVB markdown images.

### Videos

**Before**


https://user-images.githubusercontent.com/8698078/208514574-e586c1e0-3675-4ef2-9a42-9956f81dee5a.mov


**After**


https://user-images.githubusercontent.com/8698078/208514585-353a0413-7ed2-40f9-8e90-8289b5483ecb.mov



### Checklist

- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
@stratoula stratoula mentioned this pull request Jan 27, 2023
Closed
@drewdaemon drewdaemon added the Feature:TSVB TSVB (Time Series Visual Builder) label Feb 13, 2023
@dej611 dej611 mentioned this pull request May 15, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MichaelMarcialis MichaelMarcialis MichaelMarcialis approved these changes

Assignees

@Heenawter Heenawter

Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Feature:Dashboard Dashboard related features Feature:TSVB TSVB (Time Series Visual Builder) impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort release_note:fix Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.6.1 v8.7.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@Heenawter @elasticmachine @kibana-ci @kibanamachine @mistic @MichaelMarcialis @drewdaemon