Update visual design and compatibility for SonarQube 10.8 / Community Build 24.12

CHANGELOG.md

@@ -7,11 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+* Support for the rule taxonomy mode selection in SonarQube 10.8.
+* Support for INFO and BLOCKER severity impacts when using the multi-quality-rule mode.
+
 ### Changed
 
 * Highlight.js has been updated to 11.10.0, improving rule description syntax highlighting for numeric literals
   and character strings.
 * The default SonarDelphi version is now [1.12.1](https://github.com/integrated-application-development/sonar-delphi/releases/tag/v1.12.1).
+* Icons, styling, and the rule description user interface have been updated to mirror SonarQube 10.8. 
 
 ### Fixed
 
@@ -20,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Unhandled exception when retrieval of rules from a remote SonarQube server fails.
 * Plugin information in Help > About persisting after the plugin is disabled.
 * Incorrect detection of project file (.dproj) when another .dproj file is included as a resource.
+* Rule descriptions not loading from a Connected Mode SonarQube 10.8+ / Community Build 24.12+ instance.
 
 ## [1.2.0] - 2024-10-14
 

client/BuildAdditionalResources.ps1

@@ -2,6 +2,7 @@ param(
   [string]$ProjectName
 )
 
+$AssetsDir = Join-Path $PSScriptRoot "assets\resources"
 $ResourceFile = "${ProjectName}Additional.rc"
 
 function Invoke-Webpack {
@@ -16,13 +17,34 @@ function Invoke-Webpack {
   }
 }
 
-function Add-Resources {
+function Get-Hash([string]$Text) {
+  $Stream = [System.IO.MemoryStream]::new([byte[]][char[]]$Text)
+  Get-FileHash -InputStream $Stream -Algorithm SHA256
+}
+
+function Get-AssetResources {
+  $RcData = @{}
+
+  Push-Location $AssetsDir
+  try {
+    Get-ChildItem . -Recurse -File | ForEach-Object {
+      $RelativePath = ((Resolve-Path -Relative $_.FullName) -replace "^\.\\").ToUpper()
+      $Key = "DL_ASSET_" + (Get-Hash $RelativePath).Hash
+      $RcData[$Key] = $_.FullName
+    }
+  }
+  finally {
+    Pop-Location
+  }
+
+  $RcData
+}
+
+function New-Rc([hashtable]$RcData) {
   Write-Host "Generating additional .rc file..."
-  @{
-    "DL_HTML_SCRIPT" = "..\jslib\dist\compiled.js"
-  }.GetEnumerator() |
-    ForEach-Object { "$($_.Key) RCDATA `"$($_.Value)`"" } |
-    Out-File $ResourceFile -Encoding ascii
+  $RcData.GetEnumerator() | ForEach-Object {
+    "$($_.Key) RCDATA `"$($_.Value)`""
+  } | Out-File $ResourceFile -Encoding ascii
 }
 
 function Invoke-Brcc32 {
@@ -31,5 +53,7 @@ function Invoke-Brcc32 {
 }
 
 Invoke-Webpack
-Add-Resources
+New-Rc (@{
+  "DL_GENERATED_JS" = Join-Path $PSScriptRoot "jslib\dist\compiled.js"
+} + (Get-AssetResources))
 Invoke-Brcc32

client/assets/rulehtml.css → client/assets/resources/rulehtml.css

@@ -19,6 +19,28 @@ body::-webkit-scrollbar {
   width: 17px;
 }
 
+.tab-buttons {
+  user-select: none;
+  margin-top: 12px;
+  border-bottom: 1px solid;
+}
+
+.tab-btn {
+  display: inline-block;
+  padding: 6px 10px;
+  cursor: pointer;
+  user-select: initial;
+  font-weight: bold;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
 .content {
   margin: 8px;
 }
@@ -74,8 +96,9 @@ code {
 }
 
 .impacts {
-  font-size: 11px;
-  margin-bottom: 0;
+  font-size: 12px;
+  margin-bottom: 8px;
+  margin-top: 4px;
 }
 
 p {
@@ -85,30 +108,67 @@ p {
 .impact {
   display: inline-block;
   margin-right: 5px;
-  padding: 3px 5px;
+  padding: 4px 6px 4px 9px;
   border-radius: 12px;
+  border: 1px solid black;
+  font-weight: bold;
+  cursor: default;
+}
+
+.impact.standard img:first-child, .impact.hotspot img:first-child {
+  margin-right: 4px;
 }
 
 .impact img {
   display: inline;
   vertical-align: middle;
+  margin-top: -4px;
+  margin-left: 4px;
 }
 
-.impact.low {
+.impact.info {
   color: rgb(49, 108, 146);
-  background-color: rgb(233, 244, 251);
+  border-color: rgb(143, 202, 234);
+  background-color: rgb(245, 251, 255);
 }
 
-.impact.medium {
+.impact.low {
   color: rgb(140, 94, 30);
-  background-color: rgb(254, 245, 208);
+  border-color: rgb(250, 220, 121);
+  background-color: rgb(252, 245, 228);
+}
+
+.impact.medium {
+  color: rgb(147, 55, 13);
+  border-color: rgb(254, 150, 75);
+  background-color: rgb(255, 240, 235);
 }
 
 .impact.high {
+  color: rgb(180, 35, 24);
+  border-color: rgb(217, 45, 32);
+  background-color: rgb(254, 243, 242);
+}
+
+.impact.blocker {
   color: rgb(128, 27, 20);
+  border-color: rgb(128, 27, 20);
   background-color: rgb(254, 228, 226);
 }
 
+.impact.standard {
+  padding-left: 4px;
+  background-color: white;
+}
+
+.impact.hotspot {
+  padding-left: 4px;
+  padding-right: 10px;
+  border-color: rgb(35, 106, 151);
+  color: rgb(35, 106, 151);
+  background-color: white;
+}
+
 .code-added, .code-removed {
   padding: 0 0.5em;
   margin: 0 -0.5em;

client/assets/issueicons/NOTICE.txt → client/assets/resources/sonar_icon/NOTICE.txt

@@ -1,5 +1,5 @@
 Icons from SonarLint IntelliJ
-Copyright (C) 2015-2023 SonarSource
+Copyright (C) 2015-2024 SonarSource
 
 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public

client/jslib/index.js

@@ -69,11 +69,25 @@ function generateExampleDiffs() {
   }
 }
 
+
+function registerTabs() {
+  for(const tabBtn of document.querySelectorAll(".tab-btn")) {
+    tabBtn.addEventListener("click", e => {
+      document.querySelectorAll(".tab-btn.active").forEach(c => c.classList.remove("active"));
+      document.querySelectorAll(".tab-content.active").forEach(c => c.classList.remove("active"));
+
+      e.target.classList.add("active");
+      document.getElementById(e.target.dataset.contentId).classList.add("active");
+    });
+  }
+}
+
 function main() {
   hljs.registerLanguage("delphi", delphi);
   highlightTag("pre");
   highlightTag("code");
   generateExampleDiffs();
+  registerTabs();
 }
 
 main();