feat: add additional_urls to finding details and markdown (#8704)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/CHANGELOG.md

@@ -2,12 +2,20 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
-## [1.12.1] (Prowler v5.12.1)
+## [1.13.0] (Prowler unreleased)
 
 ### 🚀 Added
+- Support for Markdown and AdditionalURLs in findings detail page [(#8704)](https://github.com/prowler-cloud/prowler/pull/8704)
+- `Prowler Hub` menu item with tooltip [(#8692)] (https://github.com/prowler-cloud/prowler/pull/8692)
+- Copy link button to finding detail page [(#8685)] (https://github.com/prowler-cloud/prowler/pull/8685)
 
-- `Prowler Hub` menu item with tooltip [(#8692)](https://github.com/prowler-cloud/prowler/pull/8692)
-- Copy link button to finding detail page [(#8685)](https://github.com/prowler-cloud/prowler/pull/8685)
+### 🔄 Changed
+
+### 🐞 Fixed
+
+---
+
+## [1.12.1] (Prowler v5.12.1)
 
 ### 🐞 Fixed
 
@@ -25,7 +33,6 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Overview chart "Findings by Severity" now shows only failing findings (defaults to `status=FAIL`) and chart links open the Findings page pre-filtered to fails per severity [(#8186)](https://github.com/prowler-cloud/prowler/pull/8186)
 - Handle API responses and errors consistently across the app [(#8621)](https://github.com/prowler-cloud/prowler/pull/8621)
 - No-permission message on the scan page [(#8624)](https://github.com/prowler-cloud/prowler/pull/8624)
-- Markdown rendering in finding details page [(#8604)](https://github.com/prowler-cloud/prowler/pull/8604)
 
 ### 🐞 Fixed
 

ui/components/findings/table/finding-detail.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Snippet } from "@nextui-org/react";
+import ReactMarkdown from "react-markdown";
 
 import { CodeSnippet } from "@/components/ui/code-snippet/code-snippet";
 import { CustomSection } from "@/components/ui/custom";
@@ -17,6 +18,14 @@ import { FindingProps, ProviderType } from "@/types";
 import { Muted } from "../muted";
 import { DeltaIndicator } from "./delta-indicator";
 
+const MarkdownContainer = ({ children }: { children: string }) => {
+  return (
+    <div className="prose prose-sm max-w-none whitespace-normal break-words dark:prose-invert">
+      <ReactMarkdown>{children}</ReactMarkdown>
+    </div>
+  );
+};
+
 const renderValue = (value: string | null | undefined) => {
   return value && value.trim() !== "" ? value : "-";
 };
@@ -131,15 +140,17 @@ export const FindingDetail = ({
               hideCopyButton
               hideSymbol
             >
-              <p className="whitespace-pre-line">
+              <MarkdownContainer>
                 {attributes.check_metadata.risk}
-              </p>
+              </MarkdownContainer>
             </Snippet>
           </InfoField>
         )}
 
         <InfoField label="Description">
-          {renderValue(attributes.check_metadata.description)}
+          <MarkdownContainer>
+            {attributes.check_metadata.description}
+          </MarkdownContainer>
         </InfoField>
 
         <InfoField label="Status Extended">
@@ -156,9 +167,10 @@ export const FindingDetail = ({
             {attributes.check_metadata.remediation.recommendation.text && (
               <InfoField label="Recommendation">
                 <div className="flex flex-col gap-2">
-                  <p>
+                  <MarkdownContainer>
                     {attributes.check_metadata.remediation.recommendation.text}
-                  </p>
+                  </MarkdownContainer>
+
                   {attributes.check_metadata.remediation.recommendation.url && (
                     <CustomLink
                       href={
@@ -184,17 +196,35 @@ export const FindingDetail = ({
               </InfoField>
             )}
 
-            {/* Additional Resources section */}
+            {/* Remediation Steps section */}
             {attributes.check_metadata.remediation.code.other && (
-              <InfoField label="Additional Resources">
-                <CustomLink
-                  href={attributes.check_metadata.remediation.code.other}
-                  size="sm"
-                >
-                  View documentation
-                </CustomLink>
+              <InfoField label="Remediation Steps">
+                <MarkdownContainer>
+                  {attributes.check_metadata.remediation.code.other}
+                </MarkdownContainer>
               </InfoField>
             )}
+
+            {/* Additional URLs section */}
+            {attributes.check_metadata.additionalurls &&
+              attributes.check_metadata.additionalurls.length > 0 && (
+                <InfoField label="References">
+                  <div className="flex flex-col gap-1">
+                    {attributes.check_metadata.additionalurls.map(
+                      (link, idx) => (
+                        <CustomLink
+                          key={idx}
+                          href={link}
+                          size="sm"
+                          className="!whitespace-normal break-all"
+                        >
+                          {link}
+                        </CustomLink>
+                      ),
+                    )}
+                  </div>
+                </InfoField>
+              )}
           </div>
         )}
 

ui/types/components.ts

@@ -483,6 +483,7 @@ export interface FindingProps {
           text: string;
         };
       };
+      additionalurls?: string[];
       servicename: string;
       checkaliases: string[];
       resourcetype: string;