From ee97b36e726c5dfd62a8aac8fe243633504bb54c Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Fri, 22 Mar 2024 16:02:33 -0400
Subject: [PATCH] :bug: Wrap long file paths in issues drawer (#1761)

Resolves https://issues.redhat.com/browse/MTA-1961?filter=12422675

---------

Signed-off-by: Ian Bolton <ibolton@redhat.com>
Signed-off-by: Cherry Picker <noreply@github.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 9ae5637c2..49569a649 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="truncate"
-                  >
+                  <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 000000000..ab9d2ed0b
--- /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;