From f720c334d6674b607d8672a17751574cf70b4b16 Mon Sep 17 00:00:00 2001
From: "K.Dileepa Thushan Peiris" <dileepapeiris5@gmail.com>
Date: Sun, 26 Apr 2026 05:49:09 +0530
Subject: [PATCH 1/5] Parse descriptions/bugfixes and improve PDF UI

Add parsing utilities for update descriptions and bug fixes (parseDescriptionSections, parseBugFixes) and use them in both the modal UI and PDF generator. The modal now renders structured sections (General Description, Implementation Details, Impact), formats bug-fix URLs as links, and preserves instructions/security advisories layout. PDF generation was updated to consume the parsed sections and bug-fix list. Also add a download state with a CircularProgress icon and disabled Download button while the PDF is being generated.
---
 .../all-updates/UpdateLevelsReportModal.tsx   | 222 +++++++++++-------
 .../updates/utils/updateLevelsReportPdf.ts    |  90 +++++--
 2 files changed, 210 insertions(+), 102 deletions(-)

diff --git a/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx b/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
index dc5266c980..109ebaa543 100644
--- a/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
+++ b/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
@@ -17,6 +17,7 @@
 import {
   Box,
   Button,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
@@ -26,8 +27,12 @@ import {
   Typography,
 } from "@wso2/oxygen-ui";
 import { Printer, X } from "@wso2/oxygen-ui-icons-react";
-import { useCallback, type JSX } from "react";
-import { generateUpdateLevelsReportPdf } from "@features/updates/utils/updateLevelsReportPdf";
+import { useCallback, useState, type JSX } from "react";
+import {
+  generateUpdateLevelsReportPdf,
+  parseBugFixes,
+  parseDescriptionSections,
+} from "@features/updates/utils/updateLevelsReportPdf";
 import type { UpdateLevelsReportModalProps, UpdateDescriptionLevel } from "@features/updates/types/updates";
 
 function isInstructionsNonEmpty(text: string | null | undefined): boolean {
@@ -43,16 +48,25 @@ function formatTimestamp(ts: number): string {
 }
 
 function UpdateDescriptionItem({ item }: { item: UpdateDescriptionLevel }): JSX.Element {
+  const parsed = parseDescriptionSections(item.description);
+  const displayDesc = parsed.generalDescription || parsed.implementationDetails || parsed.impact;
+  const bugFixUrls = parseBugFixes(item.bugFixes);
   return (
     <Box sx={{ pl: 2, py: 0.5, borderLeft: "2px solid", borderColor: "divider" }}>
-      {item.description?.trim() && (
+      {displayDesc && (
         <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
-          {item.description.trim()}
+          {displayDesc}
         </Typography>
       )}
-      {item.bugFixes?.trim() && (
+      {bugFixUrls.length > 0 && (
         <Typography variant="caption" color="text.secondary">
-          Bug fixes: {item.bugFixes.trim()}
+          Bug fixes:{" "}
+          {bugFixUrls.map((url, i) => (
+            <span key={i}>
+              {i > 0 && ", "}
+              <a href={url} target="_blank" rel="noreferrer">{url}</a>
+            </span>
+          ))}
         </Typography>
       )}
     </Box>
@@ -70,9 +84,15 @@ export default function UpdateLevelsReportModal({
   onView,
   rawData,
 }: UpdateLevelsReportModalProps): JSX.Element | null {
+  const [isDownloading, setIsDownloading] = useState(false);
+
   const handleDownloadPdf = useCallback(() => {
     if (!reportData) return;
-    generateUpdateLevelsReportPdf(reportData);
+    setIsDownloading(true);
+    setTimeout(() => {
+      generateUpdateLevelsReportPdf(reportData);
+      setIsDownloading(false);
+    }, 0);
   }, [reportData]);
 
   const handleLevelClick = useCallback(
@@ -278,91 +298,129 @@ export default function UpdateLevelsReportModal({
           <Typography variant="subtitle2" fontWeight={700} sx={{ mb: 2 }}>
             Update Details
           </Typography>
-          {reportData.allEntries.map((entry, i) => (
-            <Box key={i} sx={{ mb: 3 }}>
-              <Box
-                sx={{
-                  bgcolor: "warning.main",
-                  color: "warning.contrastText",
-                  px: 2,
-                  py: 1,
-                  borderRadius: 1,
-                  mb: 1,
-                }}
-              >
-                <Typography variant="subtitle2" fontWeight={700}>
-                  {entry.formattedDate} - Update No: {entry.updateNumber}
-                </Typography>
-                <Typography variant="caption">
-                  {entry.productName}-{entry.productVersion} ({entry.channel})
-                </Typography>
-              </Box>
-              {entry.description?.trim() && (
-                <Typography variant="body2" sx={{ mb: 1, pl: 1 }}>
-                  {entry.description.trim()}
-                </Typography>
-              )}
-              {entry.bugFixes?.trim() && (
-                <Typography variant="body2" sx={{ mb: 1, pl: 1 }}>
-                  <strong>Bug Fixes:</strong> {entry.bugFixes.trim()}
-                </Typography>
-              )}
-              {isInstructionsNonEmpty(entry.instructions) && (
-                <Box sx={{ mb: 1 }}>
-                  <Typography variant="caption" fontWeight={700} display="block" sx={{ pl: 1, mb: 0.5 }}>
-                    Instructions:
+          {reportData.allEntries.map((entry, i) => {
+            const parsedDesc = parseDescriptionSections(entry.description);
+            const bugFixUrls = parseBugFixes(entry.bugFixes);
+            return (
+              <Box key={i} sx={{ mb: 3 }}>
+                <Box
+                  sx={{
+                    bgcolor: "warning.main",
+                    color: "warning.contrastText",
+                    px: 2,
+                    py: 1,
+                    borderRadius: 1,
+                    mb: 1,
+                  }}
+                >
+                  <Typography variant="subtitle2" fontWeight={700}>
+                    {entry.formattedDate} - Update No: {entry.updateNumber}
                   </Typography>
-                  <Box
-                    component="pre"
-                    sx={{
-                      bgcolor: "grey.100",
-                      border: "1px solid",
-                      borderColor: "divider",
-                      borderRadius: 1,
-                      p: 1.5,
-                      m: 0,
-                      fontFamily: "monospace",
-                      fontSize: "0.75rem",
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-word",
-                    }}
-                  >
-                    {entry.instructions?.trim()}
-                  </Box>
-                </Box>
-              )}
-              {(entry.securityAdvisories?.length ?? 0) > 0 && (
-                <Box sx={{ pl: 1 }}>
-                  <Typography
-                    variant="caption"
-                    fontWeight={700}
-                    color="error.main"
-                    display="block"
-                    sx={{ mb: 0.5 }}
-                  >
-                    Security Advisories:
+                  <Typography variant="caption">
+                    {entry.productName}-{entry.productVersion} ({entry.channel})
                   </Typography>
-                  <Box component="ul" sx={{ pl: 2, m: 0 }}>
-                    {entry.securityAdvisories.map((adv, j) => (
-                      <Box component="li" key={j} sx={{ mb: 0.25 }}>
-                        <Typography variant="caption">
-                          <strong>{adv.id}</strong> ({adv.severity}): {adv.overview}
+                </Box>
+                {parsedDesc.generalDescription && (
+                  <Box sx={{ mb: 1, pl: 1 }}>
+                    <Typography variant="caption" fontWeight={700} display="block">
+                      General Description:
+                    </Typography>
+                    <Typography variant="body2">{parsedDesc.generalDescription}</Typography>
+                  </Box>
+                )}
+                {parsedDesc.implementationDetails && (
+                  <Box sx={{ mb: 1, pl: 1 }}>
+                    <Typography variant="caption" fontWeight={700} display="block">
+                      Implementation Details:
+                    </Typography>
+                    <Typography variant="body2">{parsedDesc.implementationDetails}</Typography>
+                  </Box>
+                )}
+                {parsedDesc.impact && (
+                  <Box sx={{ mb: 1, pl: 1 }}>
+                    <Typography variant="caption" fontWeight={700} display="block">
+                      Impact:
+                    </Typography>
+                    <Typography variant="body2">{parsedDesc.impact}</Typography>
+                  </Box>
+                )}
+                {bugFixUrls.length > 0 && (
+                  <Box sx={{ mb: 1, pl: 1 }}>
+                    <Typography variant="caption" fontWeight={700} display="block">
+                      Bug Fixes:
+                    </Typography>
+                    <Box>
+                      {bugFixUrls.map((url, j) => (
+                        <Typography key={j} variant="body2">
+                          <a href={url} target="_blank" rel="noreferrer">{url}</a>
                         </Typography>
-                      </Box>
-                    ))}
+                      ))}
+                    </Box>
                   </Box>
-                </Box>
-              )}
-            </Box>
-          ))}
+                )}
+                {isInstructionsNonEmpty(entry.instructions) && (
+                  <Box sx={{ mb: 1 }}>
+                    <Typography variant="caption" fontWeight={700} display="block" sx={{ pl: 1, mb: 0.5 }}>
+                      Instructions:
+                    </Typography>
+                    <Box
+                      component="pre"
+                      sx={{
+                        bgcolor: "grey.100",
+                        border: "1px solid",
+                        borderColor: "divider",
+                        borderRadius: 1,
+                        p: 1.5,
+                        m: 0,
+                        fontFamily: "monospace",
+                        fontSize: "0.75rem",
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-word",
+                      }}
+                    >
+                      {entry.instructions?.trim()}
+                    </Box>
+                  </Box>
+                )}
+                {(entry.securityAdvisories?.length ?? 0) > 0 && (
+                  <Box sx={{ pl: 1 }}>
+                    <Typography
+                      variant="caption"
+                      fontWeight={700}
+                      color="error.main"
+                      display="block"
+                      sx={{ mb: 0.5 }}
+                    >
+                      Security Advisories:
+                    </Typography>
+                    <Box component="ul" sx={{ pl: 2, m: 0 }}>
+                      {entry.securityAdvisories.map((adv, j) => (
+                        <Box component="li" key={j} sx={{ mb: 0.25 }}>
+                          <Typography variant="caption">
+                            <strong>{adv.id}</strong> ({adv.severity}): {adv.overview}
+                          </Typography>
+                        </Box>
+                      ))}
+                    </Box>
+                  </Box>
+                )}
+              </Box>
+            );
+          })}
         </Box>
       </DialogContent>
       <DialogActions
         className="print-hide"
         sx={{ "@media print": { display: "none !important" } }}
       >
-        <Button variant="outlined" color="warning" startIcon={<Printer size={18} />} onClick={handleDownloadPdf}>
-          Download PDF
+        <Button
+          variant="outlined"
+          color="warning"
+          startIcon={isDownloading ? <CircularProgress size={16} color="inherit" /> : <Printer size={18} />}
+          onClick={handleDownloadPdf}
+          disabled={isDownloading}
+        >
+          {isDownloading ? "Downloading..." : "Download PDF"}
         </Button>
         <Button variant="contained" color="warning" onClick={onClose}>
           Close
diff --git a/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts b/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
index 545436983f..c05bf589e9 100644
--- a/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
+++ b/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
@@ -56,6 +56,70 @@ function isInstructionsNonEmpty(text: string | null | undefined): boolean {
   return t !== "" && t !== "n/a" && t !== "na";
 }
 
+export type DescriptionSections = {
+  generalDescription: string;
+  implementationDetails: string;
+  impact: string;
+};
+
+/**
+ * Parses a description string that may contain embedded section labels
+ * ("General Description :", "Implementation details :", "Impact :") and
+ * returns each section separately. Falls back to treating the whole string
+ * as the general description when no labels are found.
+ */
+export function parseDescriptionSections(raw: string | null | undefined): DescriptionSections {
+  const empty: DescriptionSections = { generalDescription: "", implementationDetails: "", impact: "" };
+  if (!raw?.trim() || raw.trim().toLowerCase() === "n/a") return empty;
+
+  const headerRe = /(?:^|\n)\s*(General\s+Description|Implementation\s+[Dd]etails?|Impact)\s*:/gi;
+  if (!headerRe.test(raw)) {
+    return { ...empty, generalDescription: raw.trim() };
+  }
+  headerRe.lastIndex = 0;
+
+  const hits: Array<{ label: string; headerStart: number; contentStart: number }> = [];
+  let m: RegExpExecArray | null;
+  while ((m = headerRe.exec(raw)) !== null) {
+    hits.push({
+      label: m[1].replace(/\s+/g, "").toLowerCase(),
+      headerStart: m.index,
+      contentStart: m.index + m[0].length,
+    });
+  }
+
+  const result = { ...empty };
+  for (let i = 0; i < hits.length; i++) {
+    const { label, contentStart } = hits[i];
+    const end = i + 1 < hits.length ? hits[i + 1].headerStart : raw.length;
+    const content = raw.slice(contentStart, end).trim();
+    if (label === "generaldescription") result.generalDescription = content;
+    else if (label.startsWith("implementationdetail")) result.implementationDetails = content;
+    else if (label === "impact") result.impact = content;
+  }
+  return result;
+}
+
+/**
+ * Parses the bugFixes field, which may be a JSON-encoded array of URL strings
+ * or a plain string, filtering out "N/A" values.
+ */
+export function parseBugFixes(raw: string | null | undefined): string[] {
+  if (!raw?.trim()) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) {
+      return parsed
+        .map((item) => String(item).trim())
+        .filter((item) => item && item.toLowerCase() !== "n/a");
+    }
+  } catch {
+    // not JSON
+  }
+  const t = raw.trim();
+  return t && t.toLowerCase() !== "n/a" ? [t] : [];
+}
+
 /**
  * Computes structured report data for the Update Levels Report.
  * Used by UpdateLevelsReportModal for in-app display.
@@ -314,27 +378,13 @@ export function generateUpdateLevelsReportPdf(reportData: UpdateLevelsReportData
     doc.text(subText, margin + 3, y + headerLines.length * 6 + 6);
     y += boxH + 4;
 
-    renderField("General Description", entry.description);
-    renderField("Implementation Details", entry.bugFixes);
+    const parsedDesc = parseDescriptionSections(entry.description);
+    const bugFixUrls = parseBugFixes(entry.bugFixes);
 
-    // Impact (aggregated from security advisories)
-    const advisoriesWithImpact = entry.securityAdvisories?.filter((a) => a.impact?.trim());
-    if (advisoriesWithImpact && advisoriesWithImpact.length > 0) {
-      ensureSpace(14);
-      doc.setFontSize(9);
-      doc.setFont("helvetica", "bold");
-      doc.setTextColor(0, 0, 0);
-      doc.text("Impact:", margin, y);
-      y += 5;
-      doc.setFont("helvetica", "normal");
-      for (const adv of advisoriesWithImpact) {
-        const impLines = doc.splitTextToSize(adv.impact.trim(), contentW - 4);
-        ensureSpace(impLines.length * 5 + 3);
-        doc.text(impLines, margin + 4, y);
-        y += impLines.length * 5 + 3;
-      }
-      y += 2;
-    }
+    if (parsedDesc.generalDescription) renderField("General Description", parsedDesc.generalDescription);
+    if (parsedDesc.implementationDetails) renderField("Implementation Details", parsedDesc.implementationDetails);
+    if (parsedDesc.impact) renderField("Impact", parsedDesc.impact);
+    if (bugFixUrls.length > 0) renderField("Bug Fixes", bugFixUrls.join("\n"));
 
     // Instructions
     if (isInstructionsNonEmpty(entry.instructions)) {

From b1c57ed46f9eddbc280e7e05b8ce2d8f5502c893 Mon Sep 17 00:00:00 2001
From: "K.Dileepa Thushan Peiris" <dileepapeiris5@gmail.com>
Date: Sun, 26 Apr 2026 05:55:50 +0530
Subject: [PATCH 2/5] Ignore unused urlParams from useSearchParams

Only destructure the setUrlParams setter from useSearchParams in AllUpdatesTab.tsx (replacing `const [urlParams, setUrlParams]` with `const [, setUrlParams]`). This removes an unused variable and avoids linter warnings, clarifying that only the setter is needed.
---
 .../features/updates/components/all-updates/AllUpdatesTab.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/customer-portal/webapp/src/features/updates/components/all-updates/AllUpdatesTab.tsx b/apps/customer-portal/webapp/src/features/updates/components/all-updates/AllUpdatesTab.tsx
index 392d337e42..4fbc8e598d 100644
--- a/apps/customer-portal/webapp/src/features/updates/components/all-updates/AllUpdatesTab.tsx
+++ b/apps/customer-portal/webapp/src/features/updates/components/all-updates/AllUpdatesTab.tsx
@@ -84,7 +84,7 @@ import {
 export default function AllUpdatesTab(): JSX.Element {
   const navigate = useNavigate();
   const { projectId } = useParams<{ projectId: string }>();
-  const [urlParams, setUrlParams] = useSearchParams();
+  const [, setUrlParams] = useSearchParams();
 
   const [filter, setFilter] = useState<AllUpdatesTabFilterState>(
     ALL_UPDATES_TAB_INITIAL_FILTER,

From e9c8e7d7d12a0a2fddfadc3cb7decda180cc7042 Mon Sep 17 00:00:00 2001
From: "K.Dileepa Thushan Peiris" <dileepapeiris5@gmail.com>
Date: Sun, 26 Apr 2026 06:08:21 +0530
Subject: [PATCH 3/5] Validate bug-fix URLs and handle unsafe links

Add URL safety checks and improve error handling for update-levels report generation. Introduces isSafeHttpUrl() and updates parseBugFixes to only include http(s) links, and tweaks description header regex. In the UI, unsafe URLs are no longer rendered as <a> anchors (shown as plain text instead), and the PDF generation call is wrapped in a try/finally so the downloading state is always cleared. Changes span the report PDF util and the UpdateLevelsReportModal component to prevent unsafe schemes and ensure the spinner is reset on errors.
---
 .../all-updates/UpdateLevelsReportModal.tsx   | 20 +++++++++++++++----
 .../updates/utils/updateLevelsReportPdf.ts    | 17 ++++++++++++----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx b/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
index 109ebaa543..7709f33761 100644
--- a/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
+++ b/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
@@ -30,6 +30,7 @@ import { Printer, X } from "@wso2/oxygen-ui-icons-react";
 import { useCallback, useState, type JSX } from "react";
 import {
   generateUpdateLevelsReportPdf,
+  isSafeHttpUrl,
   parseBugFixes,
   parseDescriptionSections,
 } from "@features/updates/utils/updateLevelsReportPdf";
@@ -64,7 +65,11 @@ function UpdateDescriptionItem({ item }: { item: UpdateDescriptionLevel }): JSX.
           {bugFixUrls.map((url, i) => (
             <span key={i}>
               {i > 0 && ", "}
-              <a href={url} target="_blank" rel="noreferrer">{url}</a>
+              {isSafeHttpUrl(url) ? (
+                <a href={url} target="_blank" rel="noreferrer">{url}</a>
+              ) : (
+                url
+              )}
             </span>
           ))}
         </Typography>
@@ -90,8 +95,11 @@ export default function UpdateLevelsReportModal({
     if (!reportData) return;
     setIsDownloading(true);
     setTimeout(() => {
-      generateUpdateLevelsReportPdf(reportData);
-      setIsDownloading(false);
+      try {
+        generateUpdateLevelsReportPdf(reportData);
+      } finally {
+        setIsDownloading(false);
+      }
     }, 0);
   }, [reportData]);
 
@@ -352,7 +360,11 @@ export default function UpdateLevelsReportModal({
                     <Box>
                       {bugFixUrls.map((url, j) => (
                         <Typography key={j} variant="body2">
-                          <a href={url} target="_blank" rel="noreferrer">{url}</a>
+                          {isSafeHttpUrl(url) ? (
+                            <a href={url} target="_blank" rel="noreferrer">{url}</a>
+                          ) : (
+                            url
+                          )}
                         </Typography>
                       ))}
                     </Box>
diff --git a/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts b/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
index c05bf589e9..ca724d362c 100644
--- a/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
+++ b/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
@@ -72,7 +72,7 @@ export function parseDescriptionSections(raw: string | null | undefined): Descri
   const empty: DescriptionSections = { generalDescription: "", implementationDetails: "", impact: "" };
   if (!raw?.trim() || raw.trim().toLowerCase() === "n/a") return empty;
 
-  const headerRe = /(?:^|\n)\s*(General\s+Description|Implementation\s+[Dd]etails?|Impact)\s*:/gi;
+  const headerRe = /(?:^|\n)\s*(General\s+Description|Implementation\s+Details?|Impact)\s*:/gi;
   if (!headerRe.test(raw)) {
     return { ...empty, generalDescription: raw.trim() };
   }
@@ -100,9 +100,18 @@ export function parseDescriptionSections(raw: string | null | undefined): Descri
   return result;
 }
 
+export function isSafeHttpUrl(url: string): boolean {
+  try {
+    const { protocol } = new URL(url);
+    return protocol === "http:" || protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Parses the bugFixes field, which may be a JSON-encoded array of URL strings
- * or a plain string, filtering out "N/A" values.
+ * or a plain string, filtering out "N/A" values and non-http(s) schemes.
  */
 export function parseBugFixes(raw: string | null | undefined): string[] {
   if (!raw?.trim()) return [];
@@ -111,13 +120,13 @@ export function parseBugFixes(raw: string | null | undefined): string[] {
     if (Array.isArray(parsed)) {
       return parsed
         .map((item) => String(item).trim())
-        .filter((item) => item && item.toLowerCase() !== "n/a");
+        .filter((item) => item && item.toLowerCase() !== "n/a" && isSafeHttpUrl(item));
     }
   } catch {
     // not JSON
   }
   const t = raw.trim();
-  return t && t.toLowerCase() !== "n/a" ? [t] : [];
+  return t && t.toLowerCase() !== "n/a" && isSafeHttpUrl(t) ? [t] : [];
 }
 
 /**

From dc4ed543b0f93c32382d7a6101895c354da5f93c Mon Sep 17 00:00:00 2001
From: "K.Dileepa Thushan Peiris" <dileepapeiris5@gmail.com>
Date: Sun, 26 Apr 2026 06:08:38 +0530
Subject: [PATCH 4/5] Update UpdateLevelsReportModal.tsx

---
 .../components/all-updates/UpdateLevelsReportModal.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx b/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
index 7709f33761..c96615f8c7 100644
--- a/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
+++ b/apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
@@ -66,7 +66,7 @@ function UpdateDescriptionItem({ item }: { item: UpdateDescriptionLevel }): JSX.
             <span key={i}>
               {i > 0 && ", "}
               {isSafeHttpUrl(url) ? (
-                <a href={url} target="_blank" rel="noreferrer">{url}</a>
+                <a href={url} target="_blank" rel="noreferrer" style={{ color: "#1976d2", textDecoration: "underline" }}>{url}</a>
               ) : (
                 url
               )}
@@ -361,7 +361,7 @@ export default function UpdateLevelsReportModal({
                       {bugFixUrls.map((url, j) => (
                         <Typography key={j} variant="body2">
                           {isSafeHttpUrl(url) ? (
-                            <a href={url} target="_blank" rel="noreferrer">{url}</a>
+                            <a href={url} target="_blank" rel="noreferrer" style={{ color: "#1976d2", textDecoration: "underline" }}>{url}</a>
                           ) : (
                             url
                           )}

From 90a9e28f9ff4f6ee3a0e9e2529f52b4ba18be96d Mon Sep 17 00:00:00 2001
From: "K.Dileepa Thushan Peiris" <dileepapeiris5@gmail.com>
Date: Sun, 26 Apr 2026 06:16:12 +0530
Subject: [PATCH 5/5] Update updateLevelsReportPdf.ts

---
 .../updates/utils/updateLevelsReportPdf.ts    | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts b/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
index ca724d362c..dfa750ef34 100644
--- a/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
+++ b/apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
@@ -279,6 +279,35 @@ export function generateUpdateLevelsReportPdf(reportData: UpdateLevelsReportData
     pending.push({ srcPage: pg, x, y: baseY - 4, w, h: 6, key });
   };
 
+  // Render a labelled list of URLs as blue underlined external hyperlinks.
+  const renderUrlListField = (label: string, urls: string[]): void => {
+    if (urls.length === 0) return;
+    ensureSpace(14);
+    doc.setFontSize(9);
+    doc.setFont("helvetica", "bold");
+    doc.setTextColor(0, 0, 0);
+    doc.text(`${label}:`, margin, y);
+    y += 5;
+    doc.setFont("helvetica", "normal");
+    for (const url of urls) {
+      const urlLines = doc.splitTextToSize(url, contentW - 4);
+      ensureSpace(urlLines.length * 5 + 3);
+      for (const line of urlLines as string[]) {
+        const lineW = doc.getTextWidth(line);
+        doc.setTextColor(0, 102, 204);
+        doc.text(line, margin + 4, y);
+        doc.setDrawColor(0, 102, 204);
+        doc.line(margin + 4, y + 0.8, margin + 4 + lineW, y + 0.8);
+        doc.setDrawColor(0, 0, 0);
+        doc.link(margin + 4, y - 4, lineW, 5.5, { url });
+        y += 5;
+      }
+      doc.setTextColor(0, 0, 0);
+      y += 2;
+    }
+    y += 3;
+  };
+
   // Render a labelled field, skipping if value is empty.
   const renderField = (label: string, value: string | null | undefined): void => {
     if (!value?.trim()) return;
@@ -393,7 +422,7 @@ export function generateUpdateLevelsReportPdf(reportData: UpdateLevelsReportData
     if (parsedDesc.generalDescription) renderField("General Description", parsedDesc.generalDescription);
     if (parsedDesc.implementationDetails) renderField("Implementation Details", parsedDesc.implementationDetails);
     if (parsedDesc.impact) renderField("Impact", parsedDesc.impact);
-    if (bugFixUrls.length > 0) renderField("Bug Fixes", bugFixUrls.join("\n"));
+    if (bugFixUrls.length > 0) renderUrlListField("Bug Fixes", bugFixUrls);
 
     // Instructions
     if (isInstructionsNonEmpty(entry.instructions)) {