[JENKINS-72745] "Manage Jenkins" nested context menu can stay open when parent menu closes by ridemountainpig · Pull Request #10251 · jenkinsci/jenkins

ridemountainpig · 2025-02-10T02:20:20Z

Testing done

CleanShot.2025-02-10.at.09.50.14.mp4

Proposed changelog entries

Fix "Manage Jenkins" nested context menu can stay open when parent menu closes

Proposed upgrade guidelines

N/A

### Submitter checklist
- [x] The Jira issue, if it exists, is well-described.
- [x] The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see [examples](https://github.com/jenkins-infra/jenkins.io/blob/master/content/_data/changelogs/weekly.yml)). Fill in the **Proposed upgrade guidelines** section only if there are breaking changes or changes that may require extra steps from users during upgrade.
- [x] There is automated testing or an explanation as to why this change has no tests.
- [ ] New public classes, fields, and methods are annotated with `@Restricted` or have `@since TODO` Javadocs, as appropriate.
- [ ] New deprecations are annotated with `@Deprecated(since = "TODO")` or `@Deprecated(forRemoval = true, since = "TODO")`, if applicable.
- [ ] New or substantially changed JavaScript is not defined inline and does not call `eval` to ease future introduction of Content Security Policy (CSP) directives (see [documentation](https://www.jenkins.io/doc/developer/security/csp/)).
- [ ] For dependency updates, there are links to external changelogs and, if possible, full differentials.
- [ ] For new APIs and extension points, there is a link to at least one consumer.

Desired reviewers

@mention

Before the changes are marked as ready-for-merge:

### Maintainer checklist
- [ ] There are at least two (2) approvals for the pull request and no outstanding requests for change.
- [ ] Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
- [ ] Changelog entries in the pull request title and/or **Proposed changelog entries** are accurate, human-readable, and in the imperative mood.
- [ ] Proper changelog labels are set so that the changelog can be generated automatically.
- [ ] If the change needs additional upgrade steps from users, the `upgrade-guide-needed` label is set and there is a **Proposed upgrade guidelines** section in the pull request title (see [example](https://github.com/jenkinsci/jenkins/pull/4387)).
- [ ] If it would make sense to backport the change to LTS, a Jira issue must exist, be a _Bug_ or _Improvement_, and be labeled as `lts-candidate` to be considered (see [query](https://issues.jenkins.io/issues/?filter=12146)).

daniel-beck · 2025-02-10T17:21:27Z

src/main/js/components/dropdowns/utils.js

  tippy(
    element,
    Object.assign({}, Templates.dropdown(), {
-      hideOnClick: element.dataset["hideOnClick"] !== "false",


Used in

jenkins/src/main/js/components/dropdowns/autocomplete.js

Line 96 in e34bdcf

e.dataset["hideOnClick"] = "false";

originally introduced in 3c67676.

I was unable to identify a difference in behavior as a result of this PR (e.g., in the "Copy From" textfield on the new item dialog), so perhaps I'm just missing how this is supposed to work? If it's not needed anymore or compensated for somehow by this new code, the data- attribute should not longer be set.

Pinging @zbynek as the original author who might be able to help with this question.

If we no longer read the data- attribute, we can indeed remove the assignment 👍

@zbynek Thanks for confirmation.

Can you think of a widget that would be affected by the attribute, where this change may change behavior? The autocomplete popup of the "Copy from" text field doesn't seem to change behavior when I edit the data- attribute in the DOM. I feel like I'm missing something.

My PR disables Tippy's default hideOnClick only for autocomplete, this PR disables it for all other dropdowns. So PR won't change behavior of autocomplete. It'ts the dropdowns that are not autocomplete that changed behavior in this PR:

For context menus clicking the chevron (downward triangle) the second time no longer closes the context menu. If that's still a desired behavior, the data- attribute is still needed (and should be read in the click handler to decide how to handle clicks in reference element).

@zbynek Thanks for clarifying. That seems like a problem.

open.mov

@daniel-beck I have updated the code to fix this problem. Thank you.

jenkins.mp4

@ridemountainpig Thanks. Unfortunately now the fields where this was previously left open close when they shouldn't:

close.mov

That's what the hideOnClick was used for. Could this behavior be retained, or does the fix for this require that we change one of the previous behaviors (stay open on autocomplete / close in other cases)?

@daniel-beck I have updated it. Could you please check it again? Thank you.

jenkins.mp4

daniel-beck · 2025-02-10T17:21:38Z

Appears to work great, thanks! 👍

krisstern

I like this logic

krisstern

Looks like there is some formatting issues with prettier. From the logs we have:

[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.15.1:corepack (prettier) on project jenkins-parent: Failed to run task: 'corepack yarn exec prettier --check .' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [Help 1]

zbynek

Looks good. One potential performance issue is that each instance adds a new event listener to document that never gets removed, but probably with the expected number of tooltips this won't cause visible slowdown.

zbynek · 2025-02-10T20:19:30Z

src/main/js/components/dropdowns/utils.js

+            const visibleDropdowns = Array.from(document.querySelectorAll('[data-tippy-root]'))
+              .filter(dropdown => window.getComputedStyle(dropdown).visibility === 'visible');
+
+            const isClickInAnyDropdown = visibleDropdowns.some(dropdown =>


Why check for click on visible dropdowns and not all of them? I think something like

isClickInAnyDropdown = !!event.target().closest('[data-tippy-root]')

should be enough (?)

I have updated the code, and it works great. Thank you.

daniel-beck · 2025-02-10T21:58:29Z

probably with the expected number of tooltips this won't cause visible slowdown

Does this interact poorly with widget refreshes every few seconds?

zbynek · 2025-02-10T23:52:13Z

Does this interact poorly with widget refreshes every few seconds?

The instances are created when you hover over the chevron, so if you keep the mouse cusor over the specific area and let the page reload a N times, you'll get N additional event handlers.

Stale

ridemountainpig · 2025-03-09T12:22:56Z

Hi @daniel-beck, could you please provide the review for this PR? Thank you.

daniel-beck · 2025-03-09T13:01:25Z

Thanks for the reminder. Putting it on the list, hoping to get to this tomorrow. Meanwhile, Prettier complains about the JS, so this cannot be merged as is. yarn lint:fix should do it, but not sure.

daniel-beck

Seems to work great now, thanks a lot!

daniel-beck · 2025-03-10T15:11:56Z

This PR is now ready for merge. We will merge it after approximately 24 hours if there is no negative feedback. Please see the merge process documentation for more information about the merge process.

/label ready-for-merge

Fix menu can stay open when parent menu closes

2be0a08

daniel-beck reviewed Feb 10, 2025

View reviewed changes

krisstern previously approved these changes Feb 10, 2025

View reviewed changes

krisstern reviewed Feb 10, 2025

View reviewed changes

zbynek reviewed Feb 10, 2025

View reviewed changes

Update utils.js

2120a9f

krisstern self-requested a review February 11, 2025 12:31

ridemountainpig added 2 commits February 11, 2025 20:42

Update utils.js

d65817a

Update utils.js

29c617c

MarkEWaite added the bug For changelog: Minor bug. Will be listed after features label Feb 11, 2025

Merge branch 'master' into JENKINS-72745

3a754df

zbynek approved these changes Feb 12, 2025

View reviewed changes

Merge branch 'master' into JENKINS-72745

2d4971b

Update utils.js

2152a47

daniel-beck approved these changes Mar 10, 2025

View reviewed changes

comment-ops-bot bot added the ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback label Mar 10, 2025

krisstern merged commit a19b790 into jenkinsci:master Mar 12, 2025
18 checks passed

Uh oh!

Conversation

ridemountainpig commented Feb 10, 2025

Testing done

Proposed changelog entries

Proposed upgrade guidelines

Desired reviewers

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

daniel-beck commented Feb 10, 2025

Uh oh!

krisstern left a comment

Choose a reason for hiding this comment

Uh oh!

krisstern left a comment

Choose a reason for hiding this comment

Uh oh!

zbynek left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zbynek Feb 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

daniel-beck commented Feb 10, 2025

Uh oh!

zbynek commented Feb 10, 2025

Uh oh!

ridemountainpig commented Mar 9, 2025

Uh oh!

daniel-beck commented Mar 9, 2025

Uh oh!

daniel-beck left a comment

Choose a reason for hiding this comment

Uh oh!

daniel-beck commented Mar 10, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

zbynek left a comment •

edited

Loading

zbynek Feb 10, 2025 •

edited

Loading