Minor cosmetics/UI/UX issues on SonarQube Jenkins plugin

jonesbusy · July 9, 2024, 1:09pm

Hi,

Just opening this thread to track some cosmetics/UI/UX issues on the Jenkins SonarQube plugin (GitHub - SonarSource/sonar-scanner-jenkins: SonarQube Scanner for Jenkins)

I’m posting here because I think it will have more chance to be fixed internally rather than on https://issues.jenkins.io/

There might be more but at least 2 that are particularly annoying for me

Tooltip of the badge is outdated. See the difference bellow compared to other badges

badges

See also the Jenkins design library for Jenkins UI component: Tooltips [Jenkins]

Ref for the jelly view : sonar-scanner-jenkins/src/main/resources/hudson/plugins/sonar/action/SonarBuildBadgeAction/badge.jelly at master · SonarSource/sonar-scanner-jenkins · GitHub

Server Side processing text is unreadable in dark mode (Dark Theme). Dark mode is now widely supported and installed and 20% of known controller.

dark_mode

Also in my opinion the link “passed” and “success” could be modernized (I’m not UX designer but the color also doesn’t match Colors [Jenkins]. Probably Symbol can also be used instead of giving a color to a

tag Symbols [Jenkins]

Ref for CSS and jelly view

github.com

SonarSource/sonar-scanner-jenkins/blob/master/src/main/resources/hudson/plugins/sonar/action/SonarProjectPageAction/jobMain.jelly#L22


      
          	    <j:forEach var="project" items="${projects}">
          		  <j:set var="status" value="${project.getBadgeStatus()}" />  
          		  <j:set var="ceStatus" value="${project.getCeStatus()}" />
          		  
          		  <j:if test="${status != null}">
          		  <tr><td>
          		  
          		    <div class="sonar-qg">
          		      <div class="sonar-qg-label">${project.getProjectName()}</div>
          		  
          		      <div class="sonar-qg-status">
          		        <a href="${project.getUrl()}" target="_blank" rel="noopener noreferrer" >
          		          <j:choose>
          		            <j:when test="${status=='Passed'}">
          		              <div class="badge badge-success"> ${status}</div>
          		            </j:when>
          		            <j:when test="${status=='Warning'}">
          		              <div class="badge badge-warning"> ${status}</div>
          		            </j:when>
          		            <j:when test="${status=='Failed'}">
          		              <div class="badge badge-failing"> ${status}</div>

github.com

SonarSource/sonar-scanner-jenkins/blob/cf80cb949e53d82d77d7014c8a678be270c137af/src/main/webapp/css/project_info.css#L47


      
          /* QUALITY GATE */
          .sonar-qg {
          	font-size: 16px;
          	font-weight: 600;
          }
          
          .sonar-qg-label {
          	display: inline-block;
          }
          
          .sonar-qg-status {
          	display: inline-block;
          	margin-left: 10px;
          	background-color: #4b9fd5;
          }
          
          /* CE TASK */
          .sonar-ce {
          	color: black;
          	font-size: 12px;
          	font-weight: 300;

Thanks

Lucas_Paulger · July 25, 2024, 10:14am

Hello @jonesbusy ,
Thank you for raising these UX issues; they are valid. I’ve created a ticket that you can follow to track our progress.

https://sonarsource.atlassian.net/browse/SONARJNKNS-377

Cheers,

system · August 1, 2024, 1:16pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.