Report types listed in a modal @ report plugins

rocky/assets/css/components/report.scss

@@ -110,12 +110,21 @@ span {
     padding: var(--spacing-grid-050) var(--spacing-grid-100);
     font-size: var(--tile-font-size);
     font-weight: var(--list-item-completed-font-weight);
-    margin: var(--spacing-grid-050) var(--spacing-grid-100)
-      var(--spacing-grid-050) 0;
 
     &.tags-color-grey-2 {
       color: var(--colors-grey-800);
       background-color: var(--colors-grey-100);
     }
   }
 }
+
+.tile-report-types-link {
+  font-size: var(--tag-font-size);
+  text-decoration: none;
+  font-weight: 700;
+
+  .icon {
+    vertical-align: middle;
+    margin-left: 0.5rem;
+  }
+}

rocky/katalogus/templates/partials/modal_report_types.html

@@ -0,0 +1,29 @@
+{% load i18n %}
+
+<a href="#{{ plugin_id }}-report-types-modal"
+   class="tile-report-types-link">{% translate "Required for" %} {{ report_types|length }} {% translate "report types" %}<span aria-hidden="true" class="icon ti-chevron-right"></span></a>
+{% with modal_id=plugin.id|add:"-report-types-modal" %}
+    {% component "modal" modal_id=modal_id size="dialog-medium" %}
+    {% fill "header" %}
+    {% translate "Report types for " %}{{ plugin.name }}
+{% endfill %}
+{% fill "content" %}
+<section>
+    <div>
+        <p>
+            {% for plugin_id, report_types in plugin_report_types.items %}
+                {% if plugin_id == plugin.id %}
+                    {% for report_type in report_types %}
+                        <span class="label tags-color-{{ report_type.label_style }}">{{ report_type.name }}</span>
+                    {% endfor %}
+                {% endif %}
+            {% endfor %}
+        </p>
+    </div>
+</section>
+{% endfill %}
+{% fill "footer_buttons" %}
+{% endfill %}
+{% endcomponent %}
+{% component_css_dependencies %}
+{% endwith %}

rocky/katalogus/templates/partials/plugin_tile.html

@@ -30,18 +30,23 @@
         {% endif %}
         <span class="plugin-author-link de-emphasized"><a target="_blank" href="https://openkat.nl" rel="noopener noreferrer">OpenKAT</a></span>
         {% if show_report_types %}
-            <div class="tags">
-                <p>
-                    <strong>{% translate "Required for:" %}</strong>
-                </p>
-                {% for plugin_id, report_types in plugin_report_types.items %}
-                    {% if plugin_id == plugin.id %}
-                        {% for report_type in report_types %}
-                            <span class="label tags-color-{{ report_type.label_style }}">{{ report_type.name }}</span>
-                        {% endfor %}
+            {% for plugin_id, report_types in plugin_report_types.items %}
+                {% if plugin_id == plugin.id %}
+                    {% if report_types|length >= 2 %}
+                        {% include "partials/modal_report_types.html" with plugin=plugin %}
+
+                    {% else %}
+                        <div class="tags">
+                            <p>
+                                <strong>{% translate "Required for: " %}</strong>
+                            </p>
+                            {% for report_type in report_types %}
+                                <span class="label tags-color-{{ report_type.label_style }}">{{ report_type.name }}</span>
+                            {% endfor %}
+                        </div>
                     {% endif %}
-                {% endfor %}
-            </div>
+                {% endif %}
+            {% endfor %}
         {% endif %}
         {% if not remove_action_buttons %}
             <div class="action-buttons">

rocky/rocky/locale/django.pot

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-11-12 15:31+0000\n"
+"POT-Creation-Date: 2024-11-06 09:53+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -1019,6 +1019,18 @@ msgstr ""
 msgid "Tableview"
 msgstr ""
 
+#: katalogus/templates/partials/modal_report_types.html
+msgid "Required for"
+msgstr ""
+
+#: katalogus/templates/partials/modal_report_types.html
+msgid "report types"
+msgstr ""
+
+#: katalogus/templates/partials/modal_report_types.html
+msgid "Report types for "
+msgstr ""
+
 #: katalogus/templates/partials/objects_to_scan.html
 #: rocky/templates/findings/finding_list.html
 #: rocky/templates/forms/widgets/checkbox_group_table.html
@@ -1080,7 +1092,7 @@ msgid "Add"
 msgstr ""
 
 #: katalogus/templates/partials/plugin_tile.html
-msgid "Required for:"
+msgid "Required for: "
 msgstr ""
 
 #: katalogus/templates/partials/plugin_tile_modal.html