 Welcome, everyone. This is the Jenkins UX special interest group. It's the 29th of March 2023. Thanks for being here. Topics that I had on the list. I'm going to move this one down because I don't see Christina here. So, what's happened recently in UI improvements. What's coming in UI improvements work in progress. User feedback. I think this one. I don't see any new topics for it. I'd propose to leave it here unless the rest of you say, hey, we're done with this. Any other topics that we added to the agenda. Tim, are these are any of these where you would like to be the voice to talk to a specific topic or a specific item. Thanks. Okay. All right. Okay, then, then I'd say let's go ahead with. You have the floor. Do you want to share a screen you want to just talk what would how would you like to introduce. I'll show my screen. That's right. Great. Yes. I'm going to stop sharing. Okay, go ahead. Awesome. All right. So just go over some of the improvements that have come recently to Jenkins. So I guess I'll start from the dashboard. So we have the items on the thread that was posted I think last UX meeting. Lots of good suggestions. So definitely take them on board. One of them was kind of replacing the icon legend, rather than having a full page is quite heavy. We have a lightweight modal. It's a nice kind of pattern we reuse across Jenkins. Easy dismissible very fast interactive. And it kind of gets happy when you don't need it. It's quite nice. I'm working on a PR at the moment, which I think I may have demonstrated many moons ago, which will kind of redo the confirmation dialogues. If you hit delete build, you'll get a more visual pop up for that. Or on the plugin screen, when you uninstall a plug in, sometimes there's warnings because it might have kind of consequences or you might impact other plugins. We can now spread that in a more visual way that's kind of more apparent to the user. Kind of what they're doing. It's quite nice. The next very recently was kind of renaming some of the settings. That's just a simplification of the naming scheme. So I believe previously it was like configure system, manage notes and clouds just dropped the kind of starting word, kind of simpler. There's an update for the credentials plugin. I don't believe it's been merged yet, but hopefully soon. We'll update the icons as well as adopt the kind of simplified naming scheme. And then lastly on the manager side, just got a refreshed about Jenkins just a bit cleaner. Solve some of the issues we had with the sidebar previously, but like the version wasn't easily copyable. And we now have a little get involved link to kind of push people in the direction of getting involved, which is nice. And that's that's it for like a remember about what's happened recently. Could you take it? Well, could you continue sharing? Could you take it back one page? I think there was one point that it was. Oh, no, maybe this. Okay, I'm not sure this was. It's now slipped my mind. Sorry, that's there was there was a capability you added that looked especially interesting to me. I'd like one more page on. Yep. Oh, right, right. It was the pop up dialogue. Okay, you described something I do frequently, which is, I clean things up by deleting builds. And you were saying that it's whereas icon legend now has has a nice modal that appears in page, because when I delete a build today I get a big ugly browser driven pop up. It's something okay, your intention is to switch that as well that eventually that will become a modal that appears in page instead of being a separate window generated by the browser. Yeah, I believe there's some inconsistencies as well. Depending on the type of bottom of deleting might get a full page delete sometimes you might get a little art consistent as well. Oh, oh okay so yeah. Okay, consistent at the moment. So mostly mostly get a new page but not always. Sometimes the browser alert. Yeah, okay so so if you go into hello world that's there Oh you probably don't have. I could I could show it because the one I usually do is not delete pipeline I'm deleting an individual build, or an individual branch in a in a multi branch job that's now done. So when I do that, I get this pop up that is a is a browser alert, and it's really a browser alert. Yeah, okay you get interesting. Okay that's much better looking than the one I get. It's different it's depending on whether sort of freestyle or pipeline and stuff it's all different to differently. Okay good alright so this, this is all that experience is already better than the, than the experience I've been seeing. If you click the reload configuration from the manage page I think that's a browser one. Yeah. Okay. Thanks. Alright, thank you very much. Yeah, stop sharing. Any questions for yon others who've got topics they wanted to raise to to yon on what he just shared with us. Okay I'm going to pick up sharing and let's look at at the next stop on the agenda. On the what's coming topic. The simplified setting names is actually done now right you've you've that's implemented you you showed that to us. There is. There's not a PR but which is kind of under discussion about renaming manage Jenkins that's your page just to be settings. We'll see where that goes. Good. Very good. One of the features that you'd like, like a discussion on so the card layout if I remember correctly has not been merged yet but feature flags has been merged right. This was the proposal from Vodek felonie that, and I think I've seen that it had merged if I remember correctly. It does yeah but there's no feature flags. Okay so none implemented. Currently. Great. All right. Any, any other topics that you wanted to discuss or bring up. There is. Relating to the drop downs. Currently working on updating the political hetero lists and kind of repeatable element list to use the new drop down. This one here the drop your PR to that will be separate. Okay. Yeah but I'll look identical. I'll just kind of go through more of the system. Thank you. Any other questions that others want to ask so this was, you said it was a improved consistency of drop downs. Yes. Yeah for the kind of repeatable list element. Anything else there and since Christina is not here, I'm going to defer this one to the, to, to later it will have to happen in another meeting. Any other topics on the work in progress. Then how about on in terms of the user feedback. We had this post on the community that had given given some good feedback and I think there are a number of things that people have been taking action on trying to, hey how do we do this how do we improve it. Any other comments that want to be shared there. All right, I'm not sure what other topics should be on our list today do any others, any others have agenda topics that need to go on the meeting agenda for today. I have some questions. Okay. I'm a contributor and I would really like to contribute to the UI UX part of sentence. And I would really appreciate some guidance on where should I start at all seems very overwhelming. So one of the one of the thoughts that I had earlier today say Anton was consider reviewing and testing existing pull requests. I would like to use that review and test to familiarize yourself with the development techniques so yon's yon's pull requests or Tim's pull requests or oolies or, or others tend to highlight the techniques that are used, and then feedback on them. Oh hey I tested this and it behave this way is is appreciated, and will also let you see oh. This is how they use CSS in this context this is how they use jelly in this other context. So for me review and test is a good way to get started. Yon or Tim do you have or only do you have other guidance that you'd like to give. I think I'm looking at the existing Jenkins issues as well. There might be kind of small priority but still important issues that have arisen. It might have existed for for years for example that note at the time to actually could get around to doing it but you know was a hop on them. And another point is to look at things which you are interested in so because I'm interested in build results I'm just changing the user interface of build results. So if you are interested for instance in changing nodes or something like that then focus on that theme because Jenkins is so big you can't work everywhere so you need to pick your topic. And the best thing is to pick the topic you're really interested in so what is the most thing what you're interested in Jenkins so maybe that's a good point to look and edit at this topic and look into the issues for this topic. Everything because it's just to begin. So I took up an issue in the design library plugin. It's an old issue. But when I started working on it I found that there are many things I do not understand. And I don't know how to approach the maintainers I have asked questions in the issue itself, but I think the maintainer is busy. So, where should I start and how should I look for help. I posted in the GitHub by any chance. Yeah, it's in GitHub. No no no in Gitter. So sorry, so in the, I assume you exit on the Gitter chat. Okay. Because that, that location, that location may have more people watching it than are watching a specific issue. Right when you went a comment in a GitHub issue is like a comment in a bug report on Jira where you may get two or three or maybe four people are watching it whereas the chat channels we've got, we have more we have more people watching them, you may have a better chance of getting an answer. Is there any issue or topic in the UX part only which needs urgent or it needs help so I can be of, you know, use. Or should I look for old issues on. So I would think that that so you what your question was are you, can you help on new current things or or exit or older issues. And I think the idea of testing the existing issues, testing existing pull requests is certainly helpful. I'm not sure that say thinking you're going to contribute active development on current pull requests is probably too optimistic right you've got to develop some skills initially. At least that's my assumption. All right. So yeah that goes well my question. Thank you so much. Thanks for asking. Thank you very much insights from others or suggestions from others. Do we still have labels in Chira so I think if we look for user interface or user experience or UX in Chira. We will have a lot of issues where someone can start with. So, I'm not sure if we have a link somewhere with these labels, but not. Yeah, I think I can click it now and share it later here in the chat. Yeah, so certainly we've got the we've got the good first issue label. And, and there are other issues that are related to UX could also. Yeah, issues in the design library I think Santa and you had already said that you looked at the issues in the design library so that's a that's certainly a good place to see are there ways to get oriented there. But the components in the design library, the latest components used by Jenkins. They are the they are the preferred components used by Jenkins John is that a safe way to say it, saying that their latest Jenkins is 18 years of software development. And there are things that are popular that are not that are frequently used that are not latest design library is intended to be a view of how things should be and how we want them to be and what the, what the preferred approaches so actually one one take might be looking at the techniques used in the design library attempt to apply those techniques to some of the, some of the older components, thinking of the get plugin as an example thinking of some others where they aren't using the good practices that are highlighted in the design library, they need to be updated to use those good practices. Now, now I'm going to ask one young young and early and Tim. I've got some groovy code sitting in the get plugin that I would love to get rid of from its UI and have replaced with jelly. Is that something that would be good for someone like say on time to take on or is that too exotic and no don't don't. Okay, Tim's flinching him I see the flinch that's good okay. So, that's something you could try. It's not. It should be better, especially if you've got example progress where people have changed it before would be a good starting point depends how groovy it is though, it's been how much groovy isms you've done. And I didn't write it so so I can't predict how. Yeah. All right, so maybe not so Santa and I'm pulling back from that when you should ignore what I just said please don't don't heed what I just said. The complexity of the accessibility work that I know Christine has been highlighting, but that might be a topic as well, related to UX. That might be one that yeah that okay that's hadn't hadn't considered that one there you might. We might let me see if I can have, so I intend if you're interested I can see if Christine is interested in working with you on that one. There's certainly one that she's interested in. And it is an area that I don't think there's a lot of interest from others, nearly as passionately about it as some of the things that we've got in other places in the jank and joy. So just interested in CSS or things like that. You can have a look at the dark theme plug in and see. Yeah, how if every page already works with this plugin, because for instance my tables are not working in the dark theme plug in so maybe that's something you can have without jelly and just with plain CSS. How can we make all themes work for every element in Jenkins. So, this is a totally different topic. The NCSS seems a good place to start. Good. And I pasted a link in the chat, where we can have some issues or where you find the issues in Jenkins Tira with which are relevant with user interface. So let me put, I'm going to put embed that link here really because oops wrong one because I'm a Jira admin. I'm actually not going to open that page live on the screen. I never know what. Nope, I'll have to paste it later apparently I don't know how to do copy and paste. Thank you though. Any other topics that we need to discuss today. I have two questions or one question, which I'm wondering if what we are doing with this topic. So, can you show a one Jenkins instance mark just to I should care. Just our CI dot no really that's fine. One thing that's what is required for my plug ins to get us a one page screen where I can view everything in one page. And currently we have this footer. And somehow this footer is some kind of overlay. So I'm wondering how we can make it that I can have a screen page or maybe this is the wrong page maybe some detail page or can just click into a project and open some. Normally, this page is a little bit longer so you need to scroll. Okay, so let's look at one that's really long because I've got plenty of those like this one right. Okay, so let's look at this one. Oh, except if it's down. Oh no, okay it's here good. It's so big it needs a lot of time. CI dot Jenkins that I was very busy right now we we piled 1000 plus jobs into its queue yesterday and it's still recovering. So I may have to go here let's go to a different one will look at my personal server. Okay, so let's look here here. And maybe we look here. Here, and you want maybe we want to see something that has interesting results like this. Yes, yes. And here we see the footer is a is gone. It's just somewhere in the Nirvana so what I would like to have this footer stay always on top. I can have the page on the where the bill is this page should actually only scroll and not the footer. So I'm not sure why is our footer scrolling. What is the reason behind this. This is just historic reason, or has this some meaning that our footer is scrolling away. For me, I would, I personally at least prefer that the footer stays off my screen, most of the time. So I guess I've got a different view than you do really, I'm not sure what others position is but I don't like it when footers stick to the bottom particularly when all they've got in them is a little bit of version information, and a link to the rest API for me that's, that's real estate that I've sacrificed by not by if it stays on screen. I think that the main problem is that we have scrolling the left side the side panel is also scrolling. So, in my ideal world, the side panel would stay without scrolling and scrolling would be only this page where the build information is. But maybe I have a different opinion that's okay. So what I tried to do is to create my results so that you don't have to scroll the results. So scrolling is something which I don't like at all. So what I would like to have is one page where you can see everything in your page. And in order to achieve that I need to have a fixed size of the screen. For instance here, I, what I wanted to achieve is to, to have this page fill the full screen that is available but not more. So currently it's some, you know, some tricks that it is. Yeah, not really scrolling but you see, it's currently scrolling but I don't want to scroll. So is this something we are gonna want to have or is this just going from my fuse and I need to make an extra way on my plug ins. So I don't know what others think. So, so your goal here is to stay above the what I'm used to calling the fold so that I don't have to scroll downward right so yeah, you want to keep as much information as possible above the fold, particularly the most important information above the fold, but you don't know where the fold is is that is the reality is. For instance, if I click on the file coverage, then you see the files just on the top. Like that. Yes. And now this I want that this part is filling 100% of the screen and not more so how can I achieve that this is really annoying that I need to scroll. I don't want to scroll because the table itself will populate. I don't know how many columns or rows are available the table will grow at that size but now I have the scroll bar and I want to get rid of the scroll bar. But this is not possible yet so I'm wondering if we should try to achieve that. Yeah, if nobody wants it it's okay. And I need to look how I can make it in my plug ins but I think in general, these pages should not scroll. So right now what you're saying I think is that the the height of this table that we see the one that's that's coverage of all files is determined by a guess rather than by the explicit geometry of my my browser window. Yes. And if I use the browser window, I get in conflict with the future because the footer is some kind of overlay that is not calculated correctly. I would like to have a page and my page I would like to say a few hundred percent of the remaining space, but that's not possible and that's a little bit disappointed. Well, but it's but isn't isn't the message that you don't want to fill 100% of the vertical space because the menu over here has caused the vertical space to extend beyond below the fold. This is a different another problem. So, first of all, I would like to have the sidebar have a different scrolling that the rest. So currently the sidebar is locked with the content which makes no sense in my way so every other application has a fixed sidebar, which scrolls on in the sidebar and not the content. And we are having one scroll bar for sidebar and for content, which makes no sense for me. So normally the sidebar is a page or a sub page. I don't know how you call it technically. And normally you scroll the sidebar without scrolling the rest. Yeah, so, so I think I think the thing you're describing is sort of like we see here, where on this page on one of these pages for instance, the I need a long page. Yeah, but this is the same problem. Yes, exactly. So, right. I would like to have a Jenkins. Yeah, the left part different from the content. Okay. So currently the size of my few depends on the size of the side panel and that makes no sense. I would like to compute the size of my few based on the browser window. And currently it's the size of the whole screen including the side panel links and if you when you have more links. My page will get bigger and if you have less links my page will get smaller and that is some kind of disappointing. So, yeah, I'm not sure how others think about that. And I have no CSS skills to change that so I'm not sure how to proceed with this problem. There are some pages that have that sticky sidebar. All right, right. The plugin managers, the config Jenkins. They tried that. And then I had the problem that the footer did. Yeah, that when I take 100% of my few, then the footer overlays my page. So, maybe that's how we come again to the footer somehow the footer is not working as expected so it counts as pixels in when I take. 100% the footer somehow overlays my screen and that looks a little bit different strange. Would it be worth the concept of not having of being able to ask that the footer not be rendered on a particular panel, or is that is that flawed is that a bad choice. Currently the footer is the place where we have the rest API. I'm not sure this is something people need, at least in my plugins. But maybe the footer is the wrong place for the rest API. I don't know. Yeah, so even here on this page. Can you scroll just a moment. Yeah. Why is the menu on the left scrolling away this makes no sense for me here. So when you're scrolling the plugins, the menu, the side panel is scrolling away. This makes no sense for me. This is a bad user experience, I think. So the menu should stay at the place and just the content should scroll. I think on this page there is it was supposed to be like that. There's a book that's broken. Well, or it may just be that I'm two out of date on because this is 387.2 release candidate right so this is not current weekly. I think it made it in ages ago. Oh it did. Okay. If you go to like a job configuration. You should see the sticky side bother. Let's look at let's see are you okay with a pipeline job. Okay. Let's see if he's all right. Okay, yeah, that's okay. Okay, which, which really means we've got, we've got the tooling and the concept for sticky sidebar. We really do. It just is a matter of getting it more widely more widespread in Jenkins, because the concept is already here and implemented before job job editing for job configuration. But let's say when I'm or I presented it I think it was in two meetings ago, when I am trying to make it where these places were generalist where the description is when I want to have this part 100% of the screen. This is from general, including the safe and apply buttons but I want to have it 100% without the safe and apply buttons, because otherwise, the, the 20 pixels at the end are away. Puter safe and applies the wrong thing the footer at the bottom, it counts into my 100% I and I want to count it not in my 100% so I'm not sure I can say okay let's say I my page is only 90% but it would be simpler if I can say it's 100%. Most other UX frameworks work in this way that I can have 100% of the page and the rest fill the space that is remaining. Okay, I think I prepare a pull request with my plug in and then we can see if we can fix that with the footer somehow in core. I think the curve that the Jenkins kind of redesign prototype had something similar to what you were after. So just to see how that feels I think the rest for actual Jenkins to see the kind of feels right. But I don't agree. I think the sidebar should persist when it can. Okay. Thank you. Thank you. Thanks. Thanks very much. Anything else for discussion today. All right. Then I propose we call an end for today. Thanks very much everyone for being here. Thank you very much for your time and your efforts thank you.