 Okay. Recording started. Okay. So, everyone, welcome to the Jenkins UX-SIG meeting. We are the 9 of June. I'm adding in the Zoom conversation the link to the agenda notes for the newcomers or everyone who don't have it. Don't hesitate to join us on the IRC channel if you see this recording and want to react. So, I'm going to replace Mark for this one because Markweight is not available this time. So, hello Yan, hello Rick, hello Tim. We are the four of us. First step, let's just check agenda review on the topics. Thanks, Uli, for adding the new topic. So, let's see if all the topics are listed and then we can proceed. So, the first topic that we're going to cover will be the pull request dashboard. Is it still okay for you, Uli? Yes. The second topic is about the new release of the HRT API plugin, including Bootstrap 5 and a lot of more changes. Is that topic still to be covered today? Yeah, it's okay. Cool. Hello Fazur ID user group picker by Tim. Is it still okay for you? Collaboration with open source design by Oleg. Oleg told me he won't be available to join, so I propose that we move that topic unless someone has a question or something to replace him. One, two, three, okay, so I'm removing this for another time. And finally, roadmap icon by Uli. Is that still... I'm not sure I put it on the agenda because we had some discussions lately about icons, so... Okay. The topic of interest for me. Okay. That's why I attended this, so I don't know if we could discuss that a little further and then I can drop off after that, if that's possible. Yeah, that's fine. It's okay for me. Tim, is it okay for you as well? Yeah. So I'm moving that as first topic on the notes. Thank you. Okay. Okay, so is there another topic to be brought to the agenda or shall we proceed? We should proceed. Okay, so let's go. So roadmap icons. I'll let you take the mic, Uli and Jan. So I just put it on the agenda because recently we had some discussions about what is going on with the icons. And currently, I think we have a little bit unfinished state in Jenkins, so we have the new status icons for build failed, success and unstable. And we have new weather icons. And I think Tim and Felix started the work on the icons. And, yeah, now we have only a short piece of Jenkins converted with a new style. And one thing which is important, we can discuss is what is the total roadmap for icons. This is one point. And the other point is the point that Jan is talking about that the current icon set for the weather icons is not really useful for most of the users. So this is not related to the roadmap of the icons, but it's related to some icons that we already did change. So maybe if you can say something about the icons you are, you know, or you have the problems with the current icons, Jan, maybe it's a good idea to talk now. I'll just put in the chat if I can here doesn't seem to. There we go. A few days and share that that's a link to my comment, which is actually the first hidden comment where I made my observations about the, the suggested modifications. The basic thoughts are, we think we're all familiar with these icons because we see them all over the place and yet the ones with Jenkins seem to be confusing to people, I think primarily because they're one monochromatic to not actually consistent amongst themselves and and three slightly different to any sets that we've seen before. So, I outlined a series of suggestions on on how to improve them on the assumption that we want to keep that minimalist modern set of icons. So I don't have a disagreement with replacing the existing set and not particularly opinionated, I think as to what kind of icons or the usability of them there's been some comments somewhere else about using the temperature scale or just putting the raw number. So I don't have any thoughts on that but what I did put up is, is a series of sets for comparison and some suggested modifications, which are the six bullet points there. Two thoughts at the end are one is, let's make sure we're consistent in terms of font and line weight and so on across this icon set the build I status icon set and any other icons or symbols that we've got. And the other suggestion on there was to have specific cases for 100% and 0% and so that's why I displayed a series of seven icons instead of the five that were presented so that's my thoughts. I like the the final style with a lighter line weight. The symbols themselves you'll see are are consistent across all the sets with, you know, repeated repetitions of the icon in terms of the sun being identical the clouds being identical or scaled and so on. So that's all I have to say on that. In terms of the roadmap. That's a decision for people with more experience and more input into how Jenkins should look. So, thank you. Okay, thanks. Thanks for also proposing something there has been examples and there are actionable items. So I've put in the, I've put the note in the agenda, I might need help team only on how usually how this kind of request work is it a road for iron to help us contributes do we need to ask for help is there is some work that people already started on that topic. And I'll just add to if you don't mind. The reason I put in these specific suggestions and motivations was because it appeared that someone else with skill was going to start working on the icons. And there was no direction, kind of given as to which way to go so that's why I threw it out there. Yeah, so the UX work that was being done by club is at the time kind of stopped about this time. This was kind of the last thing that was being done. And then the person is working on it kind of rotated off. So it's really just down to a contributor is interested to just got time and they were to do it right now. So if anyone, anyone opens a poor question definitely reviewed and looked at. It's simply new designs that look good on there, especially some of the work you've done. So I think these icons were sourced from the, the current ones came from the material theme for Jenkins. They were described as that material theme have been around for quite a while. They didn't find a good source of the sort of icon elsewhere. It's not really in a lot of other products, at least not in the same way. But that's just trying to replace what was currently in Jenkins with a similar feeling but with more modern icons. Okay, so does that mean that we need a call for contribution for people with a pure UI or design skills there. Since we have proposal and direction is there. I'm not sure what you did with those icons and whether they you were just using them in Photoshop tool and recoloring them or whether it was done in an SVG editor design application. So we're just copy and paste from the links. So from the three different websites, Mike Afford who designed the work through the BBC produced a BBC like set of weather symbols and there's a link there to his sets. So I'm just going to reset for $20 or 20 pounds if, if that's an option. The other ones come from CNN and acuweather.com. So I basically just pulled them from, from the resources they're all. Now, I think Mike Afford produces PNGs. The others actually might be SVG. I can't remember right now, but it was just a copy and paste of the pictures in there I don't have any skills with UI tools unfortunately. I think one of the first ones was one that might have just in that thread just recolored the existing one to go up to one of the first couple of comments Damien. Yep. The one from tomorrow. I don't think it's that one. Oh yeah okay. That one there. I think that's the existing one. Just recolored. So yeah, he just changed it with a paint tool. I don't think you'd need a lot of experience to change the colors. If someone wants to give that a go and see what that looks like. How do you feel about that and would you be wanting to try to contribute at least starting with the color. Well, I've never had to play with an SVG tool. And I know there was a user Vincent. Who did make some suggestions I thought he might be attending here. I was not thrilled with the icons he offered but if if there's a. He also mentioned that he had trouble reading the existing set. The reason will be because it's in a sprite sheet. It's easier to copy them out and possibly fit the width and height on them while you're editing them. I can't make any promises but I can. No problem. My goal is not to force you or to ask you to sign with your blog. The question is only completely open. I think if, if there's agreement on, on which way to go and maybe a phased approach of, okay, first let's just add color guidance as suggested to the original set. You know the second piece about applying some consistency to everything if there's a preference among. I guess, among the quorum of which way to go in terms of a final objective. Do the members here like the, the heavier traditional BBC like the lighter modern BBC like CNN or or the thin line acu weather. I think the color thing, there's consensus on applying the color aspect. I'm trying to write down the same correct me if the notes does not capture what we're seeing. So whatever starting the colors accessibility issue. And then design of the icons based on the different weather examples. So that, yeah. As a proposal there so I will want to make a call a public call right now since one month and a half there is a big, let's say heated discussion on the French technical Twitter about accessibility for the web. There is a lot of people doing web front development, doing a big effort to share that knowledge about how to make. Let's say websites accessible for people with all the spectrum of disability that could be there, including color blindness. So that, if it's okay for you, I will want to ask some of these people that might be in French speaking initially and they will want to switch it back. That's to ask for contribution or help, because maybe people with these skills could give us professional advices and that's since this is an open source product or at least give us direction. So what do you think about this. I'm specifically to the usability I did have a separate response to Peter Levin didn't really down. Where there's actually a number of links in there under the sonar cube section. I don't know why the links don't really show up too well. I think you've had the same issue. A couple years ago, I guess, and, and so there's three or four separate links there are three links I think usage of colors, accessibility issues. So in our 11959 have some information. And then an article on defective color vision and traffic signals which actually has a good analysis on the color spectrum. The reasons for the four different types of color blindness. And how to pick colors that don't overlap on the spectrum. Okay. So if, if, like you said there's further discussion in the French Twitter accessibility is a major issue on the web. And there don't seem to be universal standards for accessibility. I did point out to Peter I don't think color blindness was an issue specifically for the weather, because there is nothing red green blue doesn't have a problem and it's just the contrast. Perhaps he was raising an issue about the build status icons which this wasn't the issue to talk about that on. So I suggested a different issue to track that. I'm not sure if it's link. Okay, so call for action that means that if anyone seeing that recording only one present there. If you know anyone that will be willing to try to at least start on a since it looks like the issue has a consensus about the colors. I am, if I'm correct. If anyone is okay to try to propose something. Did I miss something on that part, the perimeter will be color on the changing the colors of the existing concepts. And in parallel, discussing about pushing forward a consensus in particular it sounds like that the new build icons on a separate issue I need to find the correct link. There is no link for the build icons I just suggested there should be a separate issue. I can create one if you like. Yeah, that will be awesome. I'll do that after this meeting. And put the link on the IRC channel if you are in it. And I'll update the meeting notes with the link icon. Okay, so that's how is it done generally is it we write this done or do we write a call for action team already I'm not at ease with a. I think you don't need to write anything else. Okay, to implement this. Okay, thanks for reporting and all these details and the research you did I am that's that's a lot of I think useful information that should help the people that will be willing to implement this. So, I think one thing, which is still open a little bit for me is what's going on with the icons is anybody making any new icons or is it. Now this that we stop with the unfinished state in Jenkins. It's a little bit disappointing. I think that we started to convert a lot of icons. And now, yeah, I understand. Members left Jenkins project and now we are have this unfinished state. So, looks now. Thank you. Was it the Felix was working on that part one year ago is that correct. Felix and Joseph. I know that Felix doesn't have any more time right now to contribute. I can still ask him directly. Felix, if you listen to the recording afterwards, don't stay to let us know if you are willing to contribute back on that part. For the other I don't know them so yeah sounds like the status is it's unfinished job. Okay, so it's up to the community to provide additional icons now. There was talk about my creating a repo with all the icons that need replacing and matching them up and then making calls for contributors to start on that but none of that ever none of the end is up happening. So yeah, there's a bit of resistance about doing partial transfer, like starting doing them one by one because it would look quite inconsistent. So was a start small on a self contained component and then trying to a wider roll out. I did have a question in terms of the roadmap here. The second series of icons was a GIF and a PNG. The next iteration of icons, I believe was, there's a separate set of SVG files for icons, and the new ones is a package set. So is it defined in the roadmap that the package right set SVG file is the way to go. It doesn't have to be and like the package is reduced right share shape in anyone can provide them but it's a G is what was being used easier to scale and style. It's quite well with different themes as well. But yeah, that's what's being used in the moment. I saw. I can't remember where it was. I saw someone to leave on a channel I can even say if it was a public or private one, but but the fact that SVG cannot have to tip. I haven't checked, but I remember that there might be some tool tip when you move around the cursor on an icon. So I suggest this that I remember suggesting to that person to check and eventually open an issue about that because if it's the case, maybe it's technically possible, but it will be regression. I haven't checked that. I should try with the comparison version but that that case that will be interesting to challenge the usage of SVG unless we remove the tool tip for the icon that could happen. So but yeah, my knowledge is close to zero there. Yeah, that means that we need people to work on that because the status has really stated the work done last year is the current status now released. It doesn't look like there will be more effort. So we need new people with that skills to help. Yeah, it's not. A lot of it is just matching icons up or if ones are existing, pulling them together. But most of it doesn't require new icons to be created. There's mostly being pulled from material material design and some of font awesome. Most where they're mostly being sourced from but doesn't mean that they have to come from there can come from elsewhere or be created as long as the license is appropriate. Where will be the starting point if we have a new contributor that want to run high? Is there a starting one easy issue? I need someone to drive it really. Okay. To coordinate it and just set up a way of coordinating and figuring out whether it's the big thing whole bunch of icons at once or whether it's go component by component again. Okay, so that means if you are willing to contribute then manifest yourself on the IRC or for an issue because that means synchronization then. Okay. Is there anything else on that topic that you will want to to discuss? Thank you, Jan for being there for reporting. We'll try to find someone to implement these ideas or at least improve the situation. We can switch to the next topic. So it's your turn to speak about the pull request dashboard. Yes. I think the best thing about the pull request dashboard is that we provide another demo, but today we are not ready to present a demo so I would like to postpone this for the next meeting in two weeks. So currently the status that we have an implementation of a portlet for the code coverage plugin and the warnings plugin. These portlets already have been merged, but they are not part of their release yet of these plugins. So what I'm trying to do is to create a new release with of the warnings plugin and code coverage plugin. And then we can show the portlets in action. So this makes more sense to wait another two weeks. And then we'll see how the portlets look like. So we are making a lot of progress, but still need some work for the next demo. Okay. Is there any blocker regarding the release or build process that you would need help on? No, given the incident. No, it's okay. It's okay. Okay. Thanks. Is there any question about that topic precision details? No. Okay, so let's thanks really let's jump to the next topic. About the new release of the HRT API plugin. Yes, this is another point for me. I finished now the chance API migration to bootstrap five. Also data tables plug-in has a new release this week, which is compatible with bootstrap five. And I released the corresponding Jenkins plugins today. So these new API plugins are now already for download in Jenkins. The only thing what is still missing is the usage of these plugins. That means the warnings plugin and the forensics plugin and the unit plugin, they all have trend charts that use the new API. For all of these three plugins I created a pull request. And what I'm trying to do is to release the pull requests this week, at least for the warnings plugin and the forensics plugin. So they will appear in the update center quite soon. Okay. Cool. Is there anything blocking you here that you could need help on? Not so far. It's just some work that needs to be done. Okay. Thanks a lot. Is there any question or precision or question on that topic? How's the JUnit one going? I think you've been working on it for a while off and on. Yeah, I'm almost done with it, at least for the functionality. So the only thing is that currently some tests are breaking because of different versions in Jenkins through tests. So let's say versions I'm using for the UI plugins don't match with the bomb updates. So I need to fix these versions. But it is already working. So the JUnit trend chart is also configurable now. So I hope, or I tried to finish this today, but it didn't work up. So give me a little, some more days. Hopefully on the week and you have a pull request that can be merged hopefully. Sounds good. There's one comment on the e-charts API plugin. So I just pulled it up. The pie chart immediately is red, yellow, green, which would have the color blindness possibility. Yeah, mentioned by Peter. Yeah, which chart to do me. So in the e-charts API, there's an example of a pie chart and progress charts. Okay, and both of those have green, yellow issues. So I will just pull this up because it's worth putting in the chat. I'm not sure if you put the design link comment, traffic light comment. But this is a good point. I think one, you know, one topic I would like to add to the, to the charging library is to have some configuration of the colors we're using. So this is, I think is something that we need to make for Jenkins wide. So I think we discussed it. I think it's almost a year ago with Felix about the color map that we created for Jenkins that we also need a map for the charting tables. So if we create charts, we need to have a color map that is distinguishable and for color blindness, we need to be aware as well. Yeah. Yeah, so I posted that link in the, in the chat to the traffic light issue. Okay. Yeah, thanks. I don't know that this is a reference standard site per se, but it does describe the problem and highlight some of the issues very well. Okay. I'll have a look at it just. Making the colors configurable is possible. But yeah, it requires some additional work. So, two of the thoughts are one is it it's often just a matter of picking the right shade with the different weights of the three colors. Another possibility that they suggest for traffic lights that certainly applicable here is to apply a slight pattern in a different shade that would not be noticeable to most people, unless you're color blind, if you scroll down near the bottom. You can see a superimpose a pattern of an axe or an arrow. As you can see in the, the red icons for new meaning in the top quarter panel. So you could do the same thing in terms of a hatch pattern of horizontal line. Sorry, an axe has to hatch pattern a plus pattern or horizontal line for the three colors. Interesting. Anyway, that's what my thoughts. Thank you. It makes sense to define some your semantics for color. So currently we have, for instance, for warnings I have warnings with severities or we have tests which are failing or tests which are okay. So maybe we need some color semantics defined that we have a color that means okay a color that means a failure a color that means priority high and a color that means priority low. And then we have a mapping of these semantics, these words to a different color and a different user can select different colors if they want. So maybe that would make sense in a way. I'm not sure. So because currently, I think we have so many plugins which use so many different colors and yeah maybe it would make sense that the code coverage uses the same kind of colors as the warnings plugin and the unit plugin for instance. I'm not sure that makes sense for you. It actually makes sense. I think it's more matter of doing it. That's the problem here. Yeah. And for instance, a team created the black or what is it the dark theme so maybe we need to change the colors for these dark theme as well so That's a good point. The team could might could be a way to help it. Thanks for the pointer. I am. I've had it done the meeting not the link you gave us. I tried to capture what we discussed. Let me know if it's not clear if I did not capture it well. Thanks for the walk. Li by the way, because that's a lot of work. Is there any other question or feedback on that topic. So let's go to the last topic of the agenda for today demo of Azure AD group picker by team. Let me stop sharing my screen. Okay, should be able to share if you need. Yep, I was just going to share something I've been working on for a bit. Next thing. This is the Azure AD plugin. It's got an extension to the matrix or plug in which allows you to pick users as otherwise to just you your IDs and then it's not very easy to work with. But the problem with that is that the Jenkins API for interacting with us quite limited. And you can just you can just return a string and then it gets straight displayed here. You've got no way of customizing the outputs or supplying other information without it being displayed. If I type this is using like sample data and then Azure AD sandbox. So it's just going to think exactly the string here. But there's a problem that you can't differentiate where it's a user or group. Which means there's no way to validate specifically which one you want here. And which means we have to try both and it ends up and I want to log spam and I want to be extra queries and what we want. So I try that but then if I want a group, it just looks exactly the same here. So I've just been playing around with a web component that Microsoft provides. And I just want to show what I've managed to get it to. So you click in here. And it loads all the users that you work with. Decided not to work right now. Let me just restart it. I think it's. Cash token may have got cash for a little too long. Just be a second. You can still blame the fastly outage for the demo going wrong. No problem. So you tap in here and it brings up all the people that the currently logged in user works with. Using a contact API and then you can search for a specific person. And it comes up with the person, their profile picture, their position. And you can do multi-select now. So rather than doing them one by one. You can do groups. And so on the client side, I've got access to the whole user object so I can see whether they're a user or a group. And I've got the access to their ID and everything. So if you click here, you can then click on the user to check all the details and make sure it's the right person. Rather than just a name, especially if you've got multiple people with the same name. So I don't have multiple in this, but it's very easy to have multiple people with the exact same name. I mean, instead of looking up the ID, you get their profile picture. And you can also see their email as well. And. You can move them and then I can click add. And I can add your multiple of them at once. And because that's a user, it's automatically being validated. And that's a group. So it's not possible right now and make sure it's all. But there's some work going on to sort that out. And then that will work as well. So I can just add that and that and it all works. So this is what I posted on the mailing list about a proxying stuff before. So it supports client side or proxy or whatever you want. But I'm just proxying all the calls that this is the web components completely just a package you install. And it makes all the API calls to Microsoft graph. And so I just created something that just proxies all the API calls. Through just using OK HTTP. And using the do dynamic call from stapler, which lets you handle absolutely everything yourself. So credit having a do dynamic methods. You just completely handle it. I just pass off the call and respond. And just write the response back into the stapler response. I had a weird one with the picture and that the picture was they were trying to just trying to get in code with UTSA and didn't work. I eventually figured it out that the char set, even though the click through the code note, OK HTTP. It says it looks at the char set to detect it. It wasn't working. So I've ended up just hard coding the char set and that fixed the photos. And then I've got some caching up the token and using caffeine. As you just saw, it didn't fully work. So I might just evict the cash if it fails. Or try harder at calculating stuff. I should just show the JavaScript quickly. So looking at the. Yeah. So you see here, this is a weird component. It just looks like a HTML elements. This is the proxy for writing configuration for it. And then there's also. Down here. Yeah. Yeah. Sorry management people. So this is the component that I'm using and the configuration that's been done on the component. So any type of user or groups by default, just a user filtered to just security groups. And I think the default maximum shown is like five. It's up to 10. And then there's a little bit of JavaScript. It implements. So there's an event that it fires when selection changed. So I use that I've done a kind of bit of hand validation where if you don't put in the thing and showing up a message. And then when you want to switch and change it clears the message. And apart from that, it's just. Change the manual JavaScript that was here before just changing to a four each and. Get the person and then. The select the person people as a person and I just get the display name and the idea art. Because that's kind of how the plugin stores them so the actual stored user has a display name and ID and the ID is passed out of the user. And the ID that's checked that log in and authorization. But yeah, that is it. Anyone got any thoughts or questions. This component to multiple to make this multiple selection is the select to or is this a totally different component. I haven't really looked to be honest. It's called them it's called the Microsoft Graph Toolkit. It's a pretty package police up and time JavaScript components. And it's, I think it's implemented with a list and just check. It uses the shadow DOM quite a lot. The whole bunch of. Actually, it's a bunch of divs. So. Yeah, I think it's a custom components. And yeah, fully. Yeah. Yeah, a lot of shadow DOM and. Every every each one of those are the best. Looks really nice. As a former and still Jenkins administrator when I had to use AD. Yeah. Thank you for that contribution back because that one will develop me years ago. Yeah, this is your AD, which is the like the cloud based version, which Microsoft pushes everyone towards. So. Using graph API and everything rather than. No, and open ID connect or SAML authentication rather than LDAP. But yeah, it's a lot nicer than working with AD. Thanks a lot. Is there any question details on that topic? Okay, are there any new subjects to be brought on last minute? Cool. So if I understand correctly, I will have to stop the recording now. And as soon as it will be generated, I will upload it on the channel. The meeting notes have been updated. If I forgot something, we can still update it afterwards. And if it's okay, we can stop right now. Thanks for that. I've got to go back and a good rest of your day. Thanks everyone. Have a good day. Bye.