From ebbc598422d62e480cf50bee1b5427df0b6fc7bd Mon Sep 17 00:00:00 2001
From: Amelia Vance <amelia.vance@associates.cisa.dhs.gov>
Date: Fri, 28 Jun 2024 13:35:37 -0400
Subject: [PATCH 1/2] Add new file dataTransformUtils.ts

---
 frontend/src/utils/dataTransformUtils.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 frontend/src/utils/dataTransformUtils.ts

diff --git a/frontend/src/utils/dataTransformUtils.ts b/frontend/src/utils/dataTransformUtils.ts
new file mode 100644
index 00000000..9d3b975c
--- /dev/null
+++ b/frontend/src/utils/dataTransformUtils.ts
@@ -0,0 +1,16 @@
+export function truncateString(inputString: string) {
+  // Truncate string if " (" and " at" appears
+  const firstParenthesis = inputString.indexOf(' (');
+  const firstAt = inputString.indexOf(' at');
+  let cutOffIndex;
+  if (firstParenthesis === -1 && firstAt === -1) {
+    cutOffIndex = inputString.length;
+  } else if (firstParenthesis === -1) {
+    cutOffIndex = firstAt;
+  } else if (firstAt === -1) {
+    cutOffIndex = firstParenthesis;
+  } else {
+    cutOffIndex = Math.min(firstParenthesis, firstAt);
+  }
+  return inputString.substring(0, cutOffIndex);
+}

From 6874fd57c58dc3bf6cb5e034247d02f2377232e8 Mon Sep 17 00:00:00 2001
From: Amelia Vance <amelia.vance@associates.cisa.dhs.gov>
Date: Fri, 28 Jun 2024 13:36:47 -0400
Subject: [PATCH 2/2] Update logic and display for title field in
 vulnerabilities table

---
 .../pages/Vulnerabilities/Vulnerabilities.tsx | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx b/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx
index 7cd04607..81a9c6d5 100644
--- a/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx
+++ b/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx
@@ -23,6 +23,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { getSeverityColor } from 'pages/Risk/utils';
 import { differenceInCalendarDays, parseISO } from 'date-fns';
+import { truncateString } from 'utils/dataTransformUtils';
 
 export interface ApiResponse {
   result: Vulnerability[];
@@ -242,23 +243,28 @@ export const Vulnerabilities: React.FC<{ groupBy?: string }> = ({
       field: 'title',
       headerName: 'Vulnerability',
       minWidth: 100,
-      flex: 1,
+      flex: 1.2,
       renderCell: (cellValues: GridRenderCellParams) => {
+        if (cellValues.row.title.startsWith('CVE')) {
+          return (
+            <Button
+              aria-label={`View NIST entry for ${cellValues.row.title}`}
+              tabIndex={cellValues.tabIndex}
+              color="primary"
+              style={{ textDecorationLine: 'underline' }}
+              endIcon={<OpenInNewIcon />}
+              onClick={() =>
+                window.open(
+                  'https://nvd.nist.gov/vuln/detail/' + cellValues.row.title
+                )
+              }
+            >
+              {cellValues.row.title}
+            </Button>
+          );
+        }
         return (
-          <Button
-            aria-label={`View NIST entry for ${cellValues.row.title}`}
-            tabIndex={cellValues.tabIndex}
-            color="primary"
-            style={{ textDecorationLine: 'underline' }}
-            endIcon={<OpenInNewIcon />}
-            onClick={() =>
-              window.open(
-                'https://nvd.nist.gov/vuln/detail/' + cellValues.row.title
-              )
-            }
-          >
-            {cellValues.row.title}
-          </Button>
+          <Typography pl={1}>{truncateString(cellValues.row.title)}</Typography>
         );
       }
     },
@@ -308,7 +314,7 @@ export const Vulnerabilities: React.FC<{ groupBy?: string }> = ({
       field: 'kev',
       headerName: 'KEV',
       minWidth: 50,
-      flex: 0.5
+      flex: 0.3
     },
     {
       field: 'domain',