Skip to content

Commit

Permalink
[8.6] [Dashboard] Add styling to allow clickable TSVB markdown images (
Browse files Browse the repository at this point in the history
…#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](react-grid-layout/react-grid-layout#1283
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](react-grid-layout/react-grid-layout#1283
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":"#147802
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](react-grid-layout/react-grid-layout#1283
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](react-grid-layout/react-grid-layout#1283
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":"#147802
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](react-grid-layout/react-grid-layout#1283
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](react-grid-layout/react-grid-layout#1283
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>
  • Loading branch information
kibanamachine and Heenawter committed Jan 9, 2023
1 parent 4794121 commit 8debf86
Showing 1 changed file with 1 addition and 0 deletions.
1 change: 1 addition & 0 deletions src/plugins/kibana_react/public/markdown/_markdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ $kbnDefaultFontSize: 14px;
max-width: 100%;
box-sizing: content-box;
border-style: none;
pointer-events: auto;
}

// 4. Blockquotes
Expand Down

0 comments on commit 8debf86

Please sign in to comment.