-
-
Notifications
You must be signed in to change notification settings - Fork 8.7k
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.
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
Add components for dropdown items #8827
Conversation
The |
Another thing would be to be able to provide a url from where you can fetch json or a callback that can generate the html. That way you can dynamically update the menu without a page reload. As the dropdown js things are not exposed to plugins, I basically had to reimplement it in customizable header plugin, also creating my own webpack so I can access tippy. |
Definitely a good idea. There's the existing |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks fine security wise
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All looks good, not tested locally, could you update the design library though please?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The custom tags look a lot better than the HTML, and a new taglib seems like a good location 👍
Re no changelog, this should have at least a Developer: entry.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See previous review
Anybody have any other blockers with this PR or is it good to go? |
@@ -47,7 +47,7 @@ function menuItem(options) { | |||
const tag = itemOptions.type === "link" ? "a" : "button"; | |||
|
|||
const item = createElementFromHtml(` | |||
<${tag} class="jenkins-dropdown__item" href="${itemOptions.url}"> | |||
<${tag} class="jenkins-dropdown__item ${itemOptions.clazz || ""}" ${itemOptions.url ? `href="${itemOptions.url}"` : ""} ${itemOptions.id ? `id="${itemOptions.id}"` : ""}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be xmlEscape
'd (probably including the URL even though it's not new here).
/label ready-for-merge This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback. Thanks! |
Background
Currently to create a dropdown in Jenkins you'd do something like:
The upside of this approach is that you're not restricted as to what you put in your dropdown, e.g. you can display an image or video in your dropdown if you so wish.
The downsides of this however:
model-link
dropdowns work (they're powered via JSON rather than Jelly)My proposal would be to have a set of components, e.g.
dd:item
,dd:heading
,dd:separator
, to be a standardised way of implementing such dropdowns. The components themselves are just simple wrappers oftemplate
elements, which are converted via JS into HTML to be consumed by Tippy. This gives us the advantage that our implementations of dropdowns are standardised and that our JS API for dropdowns is consistent between Jelly dropdowns andmodel-link
JSON dropdowns.To allow for custom content in dropdowns I've added a
dd:custom
component which will display its child contents in the dropdown, its content needs to be escaped unlike the above components.As part of this change to demonstrate submenus I've updated the dashboard/build history to use a dropdown, which has a submenu for RSS feeds.
Let me know your thoughts 👍
Testing done
Proposed changelog entries
Proposed upgrade guidelines
N/A
Submitter checklist
Desired reviewers
@jenkinsci/sig-ux
Before the changes are marked as
ready-for-merge
:Maintainer checklist