[TASK] Render tags in ReST files

This patch renders the tags of the ReST files in the panel of each change
log. The color of each tag is automatically adjusted to the severity of
the change.

Resolves: #84226
Releases: master
Change-Id: Iadc4fe1f01bb3d10b2ffd85fd85a516b22a685c3
Reviewed-on: https://review.typo3.org/56115
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>

Build/Resources/Public/Sass/install.scss

@@ -333,6 +333,10 @@ a[data-toggle="collapse"] {
     border-radius: 0;
     margin: 0;
 
+    .panel-collapse {
+        position: relative;
+    }
+
     &.panel-default .panel-heading {
         background: $gray-lighter;
     }
@@ -345,6 +349,10 @@ a[data-toggle="collapse"] {
         .panel-progress .panel-progress-bar {
             background-color: $brand-danger;
         }
+
+        .label {
+            @include label-variant($label-danger-bg);
+        }
     }
 
     &.panel-deprecation,
@@ -355,6 +363,10 @@ a[data-toggle="collapse"] {
         .panel-progress .panel-progress-bar {
             background-color: $brand-warning;
         }
+
+        .label {
+            @include label-variant($label-warning-bg);
+        }
     }
 
     &.panel-feature,
@@ -365,6 +377,10 @@ a[data-toggle="collapse"] {
         .panel-progress .panel-progress-bar {
             background-color: $brand-success;
         }
+
+        .label {
+            @include label-variant($label-success-bg);
+        }
     }
 
     &.panel-important,
@@ -375,6 +391,10 @@ a[data-toggle="collapse"] {
         .panel-progress .panel-progress-bar {
             background-color: $brand-info;
         }
+
+        .label {
+            @include label-variant($label-info-bg);
+        }
     }
 
     .panel-heading {
@@ -389,6 +409,24 @@ a[data-toggle="collapse"] {
         }
     }
 
+    .rst-tags {
+        position: absolute;
+        top: 0.75em;
+        right: 1em;
+
+        .label {
+            margin: 0 0.25em;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
     pre {
         margin: 0;
         border-radius: 0;

typo3/sysext/install/Classes/UpgradeAnalysis/DocumentationFile.php

@@ -143,6 +143,7 @@ protected function extractTags(array $file): array
         $tags = $this->extractTagsFromFile($file);
         // Headline starting with the category like Breaking, Important or Feature
         $tags[] = $this->extractCategoryFromHeadline($file);
+        natcasesort($tags);
 
         return $tags;
     }

typo3/sysext/install/Resources/Private/Partials/Upgrade/UpgradeDocs/PanelItem.html

@@ -25,6 +25,7 @@ <h3 class="panel-title">
         </h3>
     </div>
     <div id="collapse{id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{id}">
+        <div class="rst-tags t3js-tags"></div>
         <pre><f:format.raw>{fileArray.parsedContent}</f:format.raw></pre>
     </div>
 </div>

typo3/sysext/install/Resources/Public/JavaScript/Modules/UpgradeDocs.js

@@ -84,6 +84,7 @@ define([
             self.fulltextSearchField.on('keyup', function() {
               self.combinedFilterSearch();
             });
+            self.renderTags();
           } else {
             var message = InfoBox.render(Severity.error, 'Something went wrong', '');
             outputContainer.empty().append(message);
@@ -184,6 +185,17 @@ define([
       });
     },
 
+    renderTags: function() {
+      $.each($(this.selectorRestFileItem), function() {
+        var $me = $(this);
+        var tags = $me.data('item-tags').split(',');
+        var $tagContainer = $me.find('.t3js-tags');
+        tags.forEach(function(value) {
+          $tagContainer.append($('<span />', {'class': 'label'}).text(value));
+        });
+      });
+    },
+
     markRead: function(element) {
       var $button = $(element).closest('a');
       $button.toggleClass('t3js-upgradeDocs-unmarkRead t3js-upgradeDocs-markRead');