From b3cd6827277c55516356f6614d1293d759bde345 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Tue, 12 Mar 2024 09:29:09 -0400
Subject: [PATCH 1/2] :bug: Wrap long file paths in issues drawer

Signed-off-by: Ian Bolton <ibolton@redhat.com>
---
 .../issues/issue-detail-drawer/issue-affected-files-table.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx b/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
index 9ae5637c20..81707b9ac4 100644
--- a/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
+++ b/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
@@ -155,7 +155,7 @@ export const IssueAffectedFilesTable: React.FC<
                   <Td
                     width={70}
                     {...getTdProps({ columnKey: "file" })}
-                    modifier="truncate"
+                    modifier="wrap"
                   >
                     <Button
                       variant="link"

From f19d617ce23c3213fe73f3c88bd2c1cdfbd33aaf Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Tue, 19 Mar 2024 20:36:32 -0400
Subject: [PATCH 2/2] Adds wbr elements to aid in path readibility when it is
 wrapped

Signed-off-by: Ian Bolton <ibolton@redhat.com>
---
 .../issue-affected-files-table.tsx            |  9 +++-----
 .../issue-detail-drawer/path-display.tsx      | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 client/src/app/pages/issues/issue-detail-drawer/path-display.tsx

diff --git a/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx b/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
index 81707b9ac4..49569a649e 100644
--- a/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
+++ b/client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx
@@ -25,6 +25,7 @@ import {
 import { SimplePagination } from "@app/components/SimplePagination";
 import { FileIncidentsDetailModal } from "./file-incidents-detail-modal";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
+import PathDisplay from "./path-display";
 
 export interface IIssueAffectedFilesTableProps {
   issue: AnalysisIssue;
@@ -152,17 +153,13 @@ export const IssueAffectedFilesTable: React.FC<
                   item={fileReport}
                   rowIndex={rowIndex}
                 >
-                  <Td
-                    width={70}
-                    {...getTdProps({ columnKey: "file" })}
-                    modifier="wrap"
-                  >
+                  <Td {...getTdProps({ columnKey: "file" })}>
                     <Button
                       variant="link"
                       isInline
                       onClick={() => setSelectedFileForDetailModal(fileReport)}
                     >
-                      {fileReport?.file || "<unknown>"}
+                      <PathDisplay path={fileReport?.file || "<unknown>"} />
                     </Button>
                   </Td>
                   <Td
diff --git a/client/src/app/pages/issues/issue-detail-drawer/path-display.tsx b/client/src/app/pages/issues/issue-detail-drawer/path-display.tsx
new file mode 100644
index 0000000000..ab9d2ed0b4
--- /dev/null
+++ b/client/src/app/pages/issues/issue-detail-drawer/path-display.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+interface PathDisplayProps {
+  path: string;
+}
+
+const PathDisplay: React.FC<PathDisplayProps> = ({ path }) => {
+  const normalizedPath = path.replace(/\\/g, "/");
+  const formattedPath = normalizedPath
+    .split("/")
+    .reduce<React.ReactNode[]>((acc, segment, index, array) => {
+      acc.push(segment);
+      if (index < array.length - 1) {
+        acc.push(<wbr key={`wbr-${index}`} />);
+        acc.push(<span key={`slash-${index}`}>/</span>);
+      }
+      return acc;
+    }, []);
+
+  return <>{formattedPath}</>;
+};
+
+export default PathDisplay;