Jenkins User Experience Special Interest Group, 4 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Jenkins UX SIG Meeting 4 Jan 2023

Description

Jenkins user experience special interest group January 4, 2023

00:50 - Security reviews for UX pull requests
02:46 - Collecting feedback on UX regressions
10:47 - Recent UI improvements
26:19 - Upcoming UI improvements
29:25 - Pipeline graph view improvements

A

Welcome this is the Jenkins user experience special interest group. It's January 4th 2023. Happy New Year topics that I've got on the agenda. Security reviews for ux poll requests, user feature, flag status, report, uh I, don't know without vodac here. If we'll actually do that, one I'm going to move it to the end in case vadak doesn't make it Yahoo UI removal Tim! Is it okay? If that one's on the list or would is there anything you want to put there.

B

Nothing to add.

A

Okay, all right so take that one off feedback on UI on UI ux regressions was a topic last month, so I brought it forward. Keyboard usability was a topic last month, but I wasn't sure. If there was anything we needed there are there and then I assume what's next in UI, and maybe we should have, should we have a topic that is what's happened recently in UI.

A

Because we got a bunch of of interesting pull requests merged in the most recent weekly. Any other topics that you want on the agenda.

A

Okay, then, let's go ahead and get are these topics? Okay, are they any that you would recommend? Someone wants to recommend? Hey drop, that topic from the list.

A

Okay, then, let's start with the list, so Security reviews for ux pull requests Tim. This has been an ongoing question. We ask each each month as we meet. um How is it going? Is it working? Do you have any insights you want to share there.

B

It's going okay at the moment, there's just one waiting review at the moment.

A

Only one that is awaiting review, okay, good, so the the security team is keeping up and and not it's not there's not a large backlog, particularly with the end of year holidays. Having one sitting in review is not not terribly surprising. Okay, good.

A

Anything else on that topic.

A

Okay, then, let's go on to the next: how to collect General feedback on UI and ux regressions. In the last session, the discussion had been around, let's see where was it maybe I'm off base and even creating the issue? Oh yes, so the question was jira Issues new issues with appropriate labels and cleaning up old issues. Any comments from those in the in the session about about the topic.

A

Because we're currently using the regression tag or regression label to flag all regressions right, so whether they're, ux or not,.

C

The only issue that I've seen has been adding the uh regression label before something has been triaged, um so the most efficient process that I've seen has been to if you're reporting a regression to also triage it at the same time and find the the original commit that introduced the regression and uh and and also to comment on the original change. So that kind of starts the process of discussion and resolution as quickly as possible. But when that isn't when, when the original change isn't known, there's some work to be done to discover it. So.

C

um The I think what I've been doing is using the untriaged label, the ux entry as labeled to indicate you know, hey, there's more um bisection that we need to do before we can identify which change caused. The regression.

A

And, and are you you finding that's working I'm a little worried that the ux on triage label may have quite a cube? Certainly if the submitter does the bisect I can see why that's the most efficient that then lets others immediately say: oh what shall we do about this? Whereas if somebody else has to bisect it's There's real work to do the bisect.

C

Yeah there's real work either way, um so um it's just a matter of finding the time to do it, but it's it's important to be it's important work to do. Okay,.

A

Any other any other I'm, not sure what more to go with there will continue. It sounds like we'll continue using the ux on triage label, uh we'll continue encouraging submitters to do the bisect themselves so that we identify which exact commit because I guess the other is. We continue encouraging people to use small commits so that the target of a bisect is is a a relatively narrow scope. Change that, if it had to be reverted, could be reverted without major damage to other things.

C

A

C

A while back I had offered to um provide help with people who are interested in learning how to do bisection more efficiently, because I over the last few months, I've come up with a process that works pretty well. For me, at least, um for example, you know I skipped compiling the tests, because you don't need to run any tests when you're bisecting, so I figured out kind of how to make that feedback loop as tight as possible.

C

um So if there are, if they're people that are struggling with, you know learning how to do that, I can definitely help people out.

A

That might be a good thing for the doc Sig Kevin Kevin I. Wonder if Basel do you think that's something if you and I did a session or you and I and Kevin did a session, we might consider asking Kevin to do some writing to describe the process and put it in the developer. Section.

C

That could work.

C

I'd be more than happy to work on something like that. That sounds like a great addition, or that's something that would be really useful going forward. So.

A

Good all right, thanks, okay,.

A

Anything else on the general feedback on UI and ux regressions.

A

Okay, next topic, then, was keyboard, usability and I think this was Christina and Christina's not with us today, so I'm prone to move this to the end of this. Are there any others who had topics on keyboard usability that they wanted to discuss.

A

A

Next topic, then, was what's happening. What's happened recently in UI improvements and here the thoughts that I had where we could look at the the most recent changelog from jenkins.io and see quite a number of places where, where there have been improvements added, are there any things Tim that you would like to highlight.

B

uh Did you want to show your ones first.

A

uh I could well, yours are more truthfully. Yours are more valuable if you've got anything you would like to share. I would rather go to yours. First mine or just looking sort of at the history.

B

um Yep, um let me just check weekly.

B

Let's hope there's some plugin updates.

B

Looks like someone's been too quick, updating, plugins.

C

B

Give me one six: if I've got no I, don't have it quite ready, um we'll see what else I can I can give a reason. Give a quick demo.

A

Okay, so I'm gonna stop sharing we'll let you switch and and take up the demo.

B

uh Okay, so I need to allow Zoom to get to my screen, which probably means I have to rejoin okay.

B

B

Okay, can you see um weekly.ci.gkins.io.

B

B

um Okay, so a few things went in the last couple of releases. um One of them is that um console log and a few other Pages have now got a breadcrumb. So it goes all the way over to console output rather than finishing here.

B

um So it's over a number of pages, um but that's probably a prominent one to show um the advanced button has had a facelift.

B

um So you fresh CI Jenkins IO, um so this is the on the LTS version.

B

uh It's really Advanced here right.

C

B

I'll just create a dummy, freestyle and delete it.

B

Okay, so here you go this Advanced button here, with the dot, dot, dots um and if you'd modified a field and then saved it and then reloaded it, uh you'd also get a little okay.

B

In some cases, you get an icon next to it that um showed that the fields inside it have been modified um so in here just to show them um to change from Advanced dot, dot dots to Advanced, with a little arrow which changes depending on what state it's set um and then there's a little icon that goes next to it when you've modified the value it says edited here.

A

It's a tooltip nice so now I can I can go, I can hide advanced again. I can hide Advanced words before I had no way to hide it, except to save the page and return yep.

B

Yep exactly the button will stick around and then you can hide and reopen.

B

um File upload has um was has been styled so rather than the default browser styling, there's now a style to look like a rest of our buttons.

B

And there's a new Jelly component as well to wrap that up um and.

B

Management links have now had badge items, icon, support added so next to manage plugins. If someone hadn't been so quick updating, plugins there'd be a little badge here, showing telling you how many um sorry does anyone hold on that one might not be merged. Yet uh I think that one's still open.

C

B

Okay yeah, so one of them's still open, uh so it's not managed not on the badge um so on the management Links Page badge is now a component. Previously it was either just as a custom um definition just for managed plugins. um Now it's a component extensible component that anyone can use on the manage Jenkins page. So it's currently used for managed, plugins and for manage old data.

B

um There will be a count up here and a tool tip and there's a open pull request, which also adds it to the manage plugins page on the right here, with account showing how many available plugin updates and also makes badges available in um the context menu, and so it's not just in the plugin manager. It's a it's part of our task, so anyone using ltask can also add a badge as well.

A

So so, on this page, for instance, would it be within your your idea of how things should be if the installed plugins had a badge that said how many plugins were installed or how are there some things you can highlight of ways we should be considering using these badges to make the experience better.

B

uh Yeah some guideline lines in here, um so yeah don't overwhelm it just use it where it makes sense, um so you wouldn't put badges on everything, um but just um see like if you've got an admin monitor up here, there's already an example of a badge like concept which shows you, like a notification count.

A

Got it okay, so so it would probably not be wise that implied labels plug-in puts up the count of label implications that have been defined. That's not actually that helpful. This should be things that are that are quite valuable to the user before we put them on a badge.

B

Yeah there's some in the Prototype, there's I think there's a few examples in um of some badges as well on the builds um card.

B

um So here's like a kind of different sort of badge concept, but kind of shows where the pushes came from so just shows that it was a push from GitHub and whereas this was a build triggered um by myself.

B

um Yes, that's a different sort of concept, I'm, not sure. If there's any others, no I think that's the that's. The only one.

B

um Apart from that, um there's a couple bugs fixed um when you apply changes it no longer prompts to you um saying: are you sure, um because you've already saved it and we've reverse at the label destructive buttons dismiss as the um which, with the current button design, the administ? The admin monitor contrast just couldn't really work with um with the buttons? It needs a some sort of tweaks or button changes, um but there's no there's, no small fix that we could see.

B

um Previously, um just a couple of minor fixes that have been open for a while, we we knew collapse to build queue, uh so build executed widgets. um It was.

B

This was completely misaligned. So just such a recent bug effect that used to touch the side probably still does on CI. If you collapse this pain here, so just touching the edge so.

C

There's a reason, but.

B

Recent bug fix fixed that um I think that's about all. That's came in recently. It was two weeks ago, um there's now symbol, AP symbol, Java API for declaring symbols for using symbols and Java code, um so I think Julia's using that in his plugins.

B

um So you probably saw here that I was using uh well in the design Library. You would have seen that I was using the search bar component, uh so nice, just when you come in here so file's not in there yet, but um so there's now a search component that you can use and supports icons as well, um so rather than scrolling all the way to the bottom of the page.

B

um I think it auto focuses as well. So as soon as you arrive on here, just type validation.

B

um So that's a new component which is also being used on the manage Jenkins page and it's registered on this keyword shortcut. So you can just type log and go to that page.

A

ah Okay, so the that that search I had not experimented with yet the search on the manage Jenkins page is looking at all the things in that context. So if you type load statistics, it would write okay, so it chooses those items.

C

A

Nice very nice.

B

Yeah and there's also possible Improvement for later, is maybe drop. Some of these configure words as well as we noticed When developing this there's a lot of configure and it could probably just be changed to system tool.

B

Global Security, credential providers.

B

um But we may look at that later, um I think so that's just going back through the last few weeks releases um Church, uh the tippy pull request was finally merged. I, don't know if we mentioned that in the last one, but so it's no longer using the um I think it was probably Yahoo.

A

Ui, it was yeah, so so the tippy mer, the the tippy JS replacement of Yahoo UI for tooltips right yeah.

B

Yeah so that's been merged. It's using Tippy everywhere.

B

um It's just yeah, quite a nice bit of placement um and there's an API in it as well. So you can there's a couple of knobs that you can tweak as well if you want to have like an interactable menu, so you've got the warnings.

B

So if you had any of these that had any coverage, Maybe and core I don't know if this uses a there, we go back on page. It's got a no.

C

B

This one here so you um so this is a widget that warnings in G uses. So this is LCS spam uh see when I hover over this. It doesn't just straight away disappear. So that's what's known as interactable, um so you can. um You can set the interactable element if you want to be able to hover over text without disappearing. It's like a data data attribute. You can see it yeah, so I think that's about it. Unless anyone remembers anything else,.

A

Thank you great results, amazing. So the the the.

A

Right, bread crumbs the breadcrumb changes were one that that came that just arrived in 385, where a number of places that didn't have breadcrumbs before now have them.

B

Yeah yeah, and also, if and yes that was a while back but.

B

uh Yeah 2.375 the breadcrumbs were reworked into a more modern ones um and yeah a couple releases ago we restored highlighting the last breadcrumb because it was missing in quite a lot of places and the API is not the best um but yeah 2.385 um yeah a whole bunch. More places. I've got breadcrumbs added to configuration page here and.

C

B

A

Tim thanks very much.

A

So any other topics that people want to want to highlight on on the uh what's arrived recently in ux improvements, I could look at the I could show the change log. If that will help I'm, not sure that it tells us anything more than what Tim has already shown us. We did get I guess, HTML syntax is now available for node descriptions and there's a hide values and tables Edition. That was added. That's part of the user experience.

B

Oh Oops I meant to show that um did you want to show that Mark or.

A

No, if you, if you want to show it I, would I would certainly prefer it. If you show it it's much much more effective when you show it than when I show it.

B

Yeah sorry I missed that one and.

B

Cool so yeah, um so a new change, new kind of security enhancement um change was released in the last release.

B

um It's not a security fix as such, but it's kind of just um nice to have which helps prevent shoulder, surfing and um or even just if you're, sharing a screen and possibly putting something into a video or whatnot, and you don't want um all these values to show up, um so you can click.

B

So all system, properties and environment values are hidden by default and the other thing actually that I didn't mention before is the system information Pages now in tabs, rather than rather than one huge page, it would normally um scroll quite long, um but here it's just um yeah. It's been tabbed.

B

So yeah and you can click these to show them click them to hide them, and then you can copy them just fine as well and if you're copying text it won't change.

B

um I'm going to click, show hired here, because I don't know. What's here.

B

Yeah, so you can, you can show and show and hide all or reveal individual values.

B

As it looks fairly safe but I'm not going to click it on video.

A

Yeah very wise, so so that that transition to to tabs also happened in 385 or.

B

Yeah I think it was 385. great, so the other thing I was going to add, is yeah I managed, so I managed to close down a lot of pull requests over the New Year's Break.

B

um We were at about I, think 35, open um with UI pull requests um and we're now down to um 19 with um I. Think.

B

False I think I think 16 of those are ready. Yeah 16 of those are ready, PR's, I, think I, don't know if not this yeah, so 16 of those are really really PR's and three of them are in draft.

A

Well, thank you. Thank you for that nice. Nice merge thanks very much for so many that's great any other topics that we should highlight. I.

B

Was just I think most of the remaining ones have issues that need fixes is probably only three or four of them that are ready in the current state, ish that, with minor changes.

A

Great, thank you. So next topic was what's coming in UI improvements. Tim, that's a that's a common place! We've looked to you! Are there any things you would like to share or highlight hey things that are in progress, I've, seen more progress in in Yahoo UI removal, if I understood correctly,.

B

Yeah, so the next one is the um changing the um changing some of the context menus to um use Tippy instead of Yahoo UI. um So that's that's the one. That's waiting on Security review at the moment, um I think today and that one's going pretty smoothly I, don't think I've.

B

Sh yeah, so yeah existence test is passing on us in it. It all looks all looks good. The only issues we found this last week were some keyboard issues which were fixed for accessibility.

A

B

So yeah just waiting on Security review and then yeah we'll be able to replace that I. Don't think, it's all the context menus um so button drop downs haven't been changed in some places, um but it's just keeping it as a smaller, simple PR.

B

um But it looks quite nice you can. The screenshots on I'll send a link. If you want to open it.

A

Oh great, thank you. Yes,.

A

A

Nice- and these are these- are the screenshots that Jan has placed here- are using Tippy, not using Yahoo UI to do the to do the work yeah.

C

A

Great, thank you. So much that's looks, looks marvelous, thank you. So this is one neat Security review great. Thank you.

A

Any other items you wanted to highlight: I noted that you went to- and it looks like the site- is still running. The the Prototype site. You'd use to show show possible vision for the next next for a future Jenkins UI. Would you be okay if I embedded that URL here or maybe you could share the URL or is it something you're you're not really ready for people to to look at and think about? What's the future, what might the future be.

B

Yeah, it's fine. The link between posters didn't get her and oh.

A

It has okay, good all right anything else. You wanted to highlight on what's coming in UI improvements.

B

uh No not at the moment.

A

So I've been seeing pipeline graph view, improvements arriving that seem seem to be steadily making progress, anything that you wanted to share there.

B

Right, yeah, yeah, so I think it's a whole bunch on that month so ago. So in the November, quite a lot of work was done.

B

um Improving that uh not sure see it probably works on ci.g.io I'll just check the base version.

B

Yep yeah ci.jing style should have all that.

A

Yeah I've I confess I've turned off blue ocean I'm, not using blue ocean anymore I'm, just using pipeline graph view on my CI instance and I'm thrilled with it. It's working very well.

B

Nice, okay, yeah um I, can show that quickly.

A

B

B

uh See this is on ci.g.ii.

B

um There was quite a lot of fixes done to the um or the algorithm was reworked, um so it works a lot more like blue ocean. So most.

A

Cases Jim I think we may be seeing a different screen share I'm, seeing GitHub a GitHub page.

B

That Google Chrome window.

A

Got it now, it's now, it's pipeline graph view yeah.

B

um So yeah the algorithm has been fixed up, so this is very, very limited cases that don't work, um it's mostly matrixy sort of things, I think um and quite weird cases, but yeah in general. It works fine um pulled in the card design from the Prototype, um so um see, there's a couple of cards and then you can expand it um and using ionicons and keyboard and everything to expand, um and so that integrates here with GitHub projects and just pulls in some information from the details card.

A

um Yeah I I love that details card because on a pull request, it shows me the pull request title it's. It's amazing how helpful that is for me when oh what what what was the four eight nine one or five nine five, five nine seven gives me no information. It doesn't give me nearly enough information, whereas pipeline graph, you showing me that, in the in the tab or on that card, select builds by display name that Matt. That means something to me.

B

Yeah, so you've got repo- it's probably not too Irrelevant in this case, um Branch PR commit um and then when I started, timespins in queue and how long the build took. So thank you. This is showing one of the cases where it doesn't quite work.

A

B

Going on there um um anyway, so that was that card there and there's also some buttons here um you can rebuild and then for I think simple pipelines. You can also go to the configuration page.

B

um Doesn't say quite a lot of work and styling done so no longer overflows, um it's using um kind of a cleaner design. It highlights it highlights the active step.

B

And then you've got some you've got some step information here as well.

B

um If anything failed in a build, it should there's.

C

B

um So you can go to overall stage as well and get stage information um and in the stage information there'll be a link to any failed steps. So you can click the link to go to any failed steps and there's an algorithm based on Blue Ocean as well to automatically um open the um open the failed step. If anything failed along with being able to rebuild from this page without leaving and going to a different page.

B

um I think there's a little bit of so also that got rebranded from like pipeline graph view to being called um I. Guess this pipeline graph and pipeline console and they've got new icons um and from the job page it's called stages and a little bit of work. I think maybe a little bit of cleanup was done here, and it was a PR that I haven't finished, um which reworks that page to use a card layout as well I'm, not sure how far along I got on it.

A

So would we work the stages page to use card layout, uh uh nice.

B

Yeah I think I think the so it was just bring in more information. So you can have a details card on that page and then you could expand it.

B

Right and I was this page here, just continuously polls currently um I was I, just turned off because I didn't have time to implement it, but it was pretty annoying um all right, and this is so this. This goes to a different page. It doesn't pop out a model.

B

um So then you get a full page view of it. um So I think it was I, think the reason I didn't merge. It was I wanted to add a bit more to this page um like a details card or something, um but it's not sure, I didn't or maybe I just wanted to review. I. Don't know it was a while ago I'll get back to it. At some point.

B

Yeah cool, that's all those.

A

Okay, thanks Tim thanks very much.

A

So those were the all the topics we had for today uh unless somebody's arrived, who wants to talk to feature flag status or keyboard, usability or other topics? Are there other topics to be brought up.

A

All right, then, I'll go ahead and stop the recording thanks very much everyone for being here. The recording will be posted within the next 24 hours. Thanks a bunch.