From 26f444e5a43ec065c7a864511d28ddf3d5591a25 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.j.johnson@associates.cisa.dhs.gov>
Date: Tue, 31 Dec 2024 14:04:51 -0500
Subject: [PATCH 1/2] Edited Domain Details Severity Level

- Forced title case on all severity levels.
- Null, N/A, undefined, and empty strings are now displayed as "N/A".
- Low, Medium, High, and Critical severity levels remain the same.
- All other values are now displayed as "Other".
- Brought in the corresponding severity level color values as well.
---
 frontend/src/components/DomainDetails.tsx | 43 +++++++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/DomainDetails.tsx b/frontend/src/components/DomainDetails.tsx
index 66b934ef..2291334a 100644
--- a/frontend/src/components/DomainDetails.tsx
+++ b/frontend/src/components/DomainDetails.tsx
@@ -26,6 +26,8 @@ import { DefinitionList } from './DefinitionList';
 import { differenceInCalendarDays, parseISO } from 'date-fns';
 import { Webpage } from 'types';
 import { useAuthContext } from 'context';
+import { getSeverityColor } from 'pages/Risk/utils';
+import { Box } from '@mui/system';
 
 const PREFIX = 'DomainDetails';
 
@@ -335,6 +337,30 @@ export const DomainDetails: React.FC<Props> = (props) => {
   const webpageTree = generateWebpageTree(webpages);
   const webpageList = generateWebpageList(webpageTree);
 
+  //Format Severity Level in the advent of an irregular value
+  const titleCase = (severity?: any) => {
+    if (severity === null || severity === undefined) {
+      return 'N/A';
+    } else {
+      return severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase();
+    }
+  };
+  const severitylevels = ['N/A', 'Low', 'Medium', 'High', 'Critical', 'Other'];
+  const formatSeverity = (severity?: any) => {
+    const titleCaseSev = titleCase(severity);
+    if (severitylevels.includes(titleCaseSev)) {
+      return titleCaseSev;
+    }
+    if (
+      !titleCaseSev ||
+      ['Null', 'N/a', 'undefined', ''].includes(titleCaseSev)
+    ) {
+      return 'N/A';
+    } else {
+      return 'Other';
+    }
+  };
+
   return (
     <>
       <Button
@@ -401,9 +427,20 @@ export const DomainDetails: React.FC<Props> = (props) => {
                     <Typography className={classes.accordionHeading}>
                       {vuln.title}
                     </Typography>
-                    <Typography className={classes.vulnDescription}>
-                      {vuln.severity}
-                    </Typography>
+                    <Box
+                      className={classes.vulnDescription}
+                      sx={{ justifyItems: 'right' }}
+                    >
+                      <Typography
+                        sx={{
+                          borderBottom: `6px solid ${getSeverityColor({
+                            id: formatSeverity(vuln.severity)
+                          })}`
+                        }}
+                      >
+                        {formatSeverity(vuln.severity)}
+                      </Typography>
+                    </Box>
                     <Typography className={classes.vulnDescription}>
                       {vuln.state}
                     </Typography>

From 607cd69ff7dd4ae17451eabc458684159f32be95 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.j.johnson@associates.cisa.dhs.gov>
Date: Fri, 24 Jan 2025 13:58:24 -0500
Subject: [PATCH 2/2] Refinement to severity formatting logic

---
 frontend/src/components/DomainDetails.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DomainDetails.tsx b/frontend/src/components/DomainDetails.tsx
index 2291334a..7e0bd93e 100644
--- a/frontend/src/components/DomainDetails.tsx
+++ b/frontend/src/components/DomainDetails.tsx
@@ -353,7 +353,9 @@ export const DomainDetails: React.FC<Props> = (props) => {
     }
     if (
       !titleCaseSev ||
-      ['Null', 'N/a', 'undefined', ''].includes(titleCaseSev)
+      ['None', 'Null', 'N/a', 'Undefined', 'undefined', ''].includes(
+        titleCaseSev
+      )
     ) {
       return 'N/A';
     } else {