[Lens] small drag and drop visual fixes #159651

mbondyra · 2023-06-14T07:58:50Z

Summary

Fixes #159572

The dimension element should be invisible when being moved - fixed by .domDragDrop-isHidden css below .domDragDrop--isDragStarted that was overwriting opacity.

before:

after:

When navigating with keyboard, the margin of the element that was moving was slightly off - fixed by changing the constant REORDER_ITEM_MARGIN value to 16. Not sure if we use this package somewhere else and I should also test @jughosta?

before:

after:

When navigating with keyboard but not reordering, the ghost element was covering completely the element we would drop into. I fixed it by changing the translation values. I think that's not expected? Or is this intentional?
before:

after:

Checklist

Delete any items that are not applicable to this PR.

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
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2023-06-14T08:00:24Z

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

jughosta

Happy that you are back, Marta! 🎉
Thanks for looking into it!

jughosta · 2023-06-14T08:42:41Z

packages/kbn-dom-drag-drop/src/sass/drag_drop.scss

@@ -138,6 +138,10 @@ $reorderItemMargin: $euiSizeS;
  }
 }

+.domDragDrop--isDragStarted {
+  opacity: .5;


Sorry 😬
Thanks for noticing and fixing the opacity issue!

jughosta · 2023-06-14T08:46:08Z

packages/kbn-dom-drag-drop/src/sass/drag_drop.scss

@@ -15,7 +15,7 @@
  width: 100%;
  left: 0;
  opacity: .9;
-  transform: translate($euiSizeXS, $euiSizeXS);
+  transform: translate(-$euiSizeS, -$euiSizeL);


Would it be fine to keep positive offsets? Otherwise in Discover it's cut off.

With transform: translate($euiSizeXS, $euiSizeXS);:

With transform: translate(-$euiSizeS, -$euiSizeL);:

Thank you so much for noticing! I think doing the opposite values will work fine both for Lens and Discover, WDYT?

Yes, looks great! Thanks!

dej611 · 2023-06-14T09:08:08Z

packages/kbn-dom-drag-drop/src/constants.ts

@@ -8,4 +8,4 @@

 export const DEFAULT_DATA_TEST_SUBJ = 'domDragDrop';
 export const REORDER_ITEM_HEIGHT = 32;
-export const REORDER_ITEM_MARGIN = 8;
+export const REORDER_ITEM_MARGIN = 16;


Would it make sense to link these values to euiTheme values? https://elastic.github.io/eui/#/theming/sizing/values

Hmmm, are you sure it's possible? It looks like it's only possible using a useEuiTheme hook or in scss and we're not in the component here 😓 I'd appreciate help if I am missing something 🙏🏼

With this you should be able to access the same variables:

import { euiThemeVars } from '@kbn/ui-theme';

Ahhh, yes, but the variables here are stored as strings with px included (for example 16px) and we make calculations in JS later based on these values. I feel it's not worth to use it here. I'd prefer to leave it as is 🙏🏼

jughosta

LGTM 👍

jughosta · 2023-06-14T12:11:27Z

We could also backport these fixes.

kibana-ci · 2023-06-14T12:58:24Z

💚 Build Succeeded

Buildkite Build
Commit: 33025f5

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
`discover`	418.0KB	418.1KB	+2.0B
`eventAnnotation`	110.2KB	110.2KB	+2.0B
`lens`	1.2MB	1.2MB	+2.0B
total			+6.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	13	15	+2
`securitySolution`	409	413	+4
total			+6

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	14	16	+2
`securitySolution`	492	496	+4
total			+6

History

💛 Build #135091 was flaky 3b3b839
💔 Build #135060 failed 3ade50bacd0346115a9d7e0affe1f6c12ff463c9

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

stratoula

Changes LGTM!

MichaelMarcialis

Thanks for catching and fixing these, @mbondyra! LGTM!

@jughosta

## Summary Fixes elastic#159572 1. The dimension element should be invisible when being moved - fixed by `.domDragDrop-isHidden` css below `.domDragDrop--isDragStarted` that was overwriting opacity. before: <img width="508" alt="Screenshot 2023-06-14 at 09 45 23" src="https://github.com/elastic/kibana/assets/4283304/96dcd98e-3b71-4675-8e0f-1617cfacbd2d"> after: <img width="508" alt="Screenshot 2023-06-14 at 10 01 08" src="https://github.com/elastic/kibana/assets/4283304/f3b9de10-a2e5-4936-9695-245a57a9a8d4"> 2. When navigating with keyboard, the margin of the element that was moving was slightly off - fixed by changing the constant `REORDER_ITEM_MARGIN` value to 16. Not sure if we use this package somewhere else and I should also test @jughosta? before: <img width="436" alt="Screenshot 2023-06-14 at 09 45 38" src="https://github.com/elastic/kibana/assets/4283304/b6e3ad6e-fc6f-4c7f-850e-d3a4d8cf4775"> after: <img width="405" alt="Screenshot 2023-06-14 at 10 01 16" src="https://github.com/elastic/kibana/assets/4283304/4b850ca2-64d2-4c2a-a313-a7c10434674a"> 3. When navigating with keyboard but not reordering, the ghost element was covering completely the element we would drop into. I fixed it by changing the translation values. I think that's not expected? Or is this intentional? before: <img width="410" alt="Screenshot 2023-06-14 at 09 45 47" src="https://github.com/elastic/kibana/assets/4283304/60296878-ca52-4d0c-bb49-5a84503d48ac"> after: <img width="436" alt="Screenshot 2023-06-14 at 10 01 24" src="https://github.com/elastic/kibana/assets/4283304/c050fea1-10b2-4a72-95d3-fbfe920b9c96"> ### Checklist Delete any items that are not applicable to this PR. - [ ] 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/packages/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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] 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) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### 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) (cherry picked from commit 293a70b)

kibanamachine · 2023-06-21T16:13:45Z

💚 All backports created successfully

Status	Branch	Result
✅	8.8

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

Questions ?

Please refer to the Backport tool documentation

@jughosta

# Backport This will backport the following commits from `main` to `8.8`: - [[Lens] small drag and drop visual fixes (#159651)](#159651)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Marta Bondyra <[email protected]>

mbondyra requested review from a team as code owners June 14, 2023 07:58

mbondyra added Team:Visualizations Visualization editors, elastic-charts and infrastructure release_note:skip Skip the PR/issue when compiling release notes Feature:Lens labels Jun 14, 2023

mbondyra requested a review from jughosta June 14, 2023 08:02

jughosta reviewed Jun 14, 2023

View reviewed changes

[Lens] small drag and drop visual fixes

3b3b839

mbondyra force-pushed the lens/dnd_small_fixes branch from 3ade50b to 3b3b839 Compare June 14, 2023 08:54

dej611 reviewed Jun 14, 2023

View reviewed changes

fix translations

33025f5

jughosta approved these changes Jun 14, 2023

View reviewed changes

mbondyra added the backport:prev-minor Backport to (9.0) the previous minor version (i.e. one version back from main) label Jun 14, 2023

stratoula approved these changes Jun 19, 2023

View reviewed changes

MichaelMarcialis approved these changes Jun 21, 2023

View reviewed changes

mbondyra merged commit 293a70b into elastic:main Jun 21, 2023

mbondyra deleted the lens/dnd_small_fixes branch June 21, 2023 16:08

kibanamachine added the v8.9.0 label Jun 21, 2023

kibanamachine mentioned this pull request Jun 21, 2023

[8.8] [Lens] small drag and drop visual fixes (#159651) #160172

Merged

kibanamachine added the v8.8.2 label Jun 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] small drag and drop visual fixes #159651

[Lens] small drag and drop visual fixes #159651

mbondyra commented Jun 14, 2023 •

edited by kibanamachine

Loading

elasticmachine commented Jun 14, 2023

jughosta left a comment

jughosta Jun 14, 2023

jughosta Jun 14, 2023

mbondyra Jun 14, 2023

jughosta Jun 14, 2023

dej611 Jun 14, 2023

mbondyra Jun 14, 2023

dej611 Jun 14, 2023 •

edited

Loading

mbondyra Jun 14, 2023

jughosta left a comment

jughosta commented Jun 14, 2023

kibana-ci commented Jun 14, 2023

ESLint disabled line counts

Total ESLint disabled count

stratoula left a comment

MichaelMarcialis left a comment

kibanamachine commented Jun 21, 2023

[Lens] small drag and drop visual fixes #159651

[Lens] small drag and drop visual fixes #159651

Conversation

mbondyra commented Jun 14, 2023 • edited by kibanamachine Loading

Summary

Checklist

Risk Matrix

For maintainers

elasticmachine commented Jun 14, 2023

jughosta left a comment

Choose a reason for hiding this comment

jughosta Jun 14, 2023

Choose a reason for hiding this comment

jughosta Jun 14, 2023

Choose a reason for hiding this comment

mbondyra Jun 14, 2023

Choose a reason for hiding this comment

jughosta Jun 14, 2023

Choose a reason for hiding this comment

dej611 Jun 14, 2023

Choose a reason for hiding this comment

mbondyra Jun 14, 2023

Choose a reason for hiding this comment

dej611 Jun 14, 2023 • edited Loading

Choose a reason for hiding this comment

mbondyra Jun 14, 2023

Choose a reason for hiding this comment

jughosta left a comment

Choose a reason for hiding this comment

jughosta commented Jun 14, 2023

kibana-ci commented Jun 14, 2023

💚 Build Succeeded

Metrics [docs]

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

stratoula left a comment

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

kibanamachine commented Jun 21, 2023

💚 All backports created successfully

Questions ?

mbondyra commented Jun 14, 2023 •

edited by kibanamachine

Loading

dej611 Jun 14, 2023 •

edited

Loading